User Experience Design

PRESENTED BY

Morgan Bibbs Director of Creative Services J. William Fulbright College of Arts & Sciences

John C. Dailey, Ph.D. Content Strategist University Relations

WHAT IS USER EXPERIENCE?

User Experience (UX)

• User experience is how people feel when they interact with a product or service, such as a website or an app.

• Every instance of human-object interaction has an associated user experience, but, in general, UX practitioners are interested in the relationship between human users and computers and computer-based products, such as websites, applications and systems.

Why Does UX Matter?

• In times gone by, web design was simple; developers built stuff they thought was cool and that they hoped their users would like. Unfortunately, there are two problems with that approach:

• Back then, there was far less competition for people's attention online.

• There's no consideration for the user – the success or failure of a development project finally was a matter of luck as much as it was the judgement of the design team.

• UX enables designers to focus on the user. It increases the chances of a project's success, because it doesn’t gamble on the brand loyalty of users.

The 7 Factors That Influence User Experience

User Experience Honeycombby Peter Morville- JUNE 21, 2004 

The 7 Factors That Influence User Experience

USEFUL If a product isn’t useful to someone, why would they use it? If it’s not useful, it’s unlikely to be able to compete for attention alongside a market full of purposeful and useful products.

Paths vs. Puzzles

The 7 Factors That Influence User Experience

USABLE Enabling users to achieve their end objective with a product effectively and efficiently.

The 5 Characteristics of Usable Products* 1. Effectiveness 2. Efficiency 3. Engagement 4. Error Tolerance 5. Ease of Learning

* Whitney Quesenberry, the UX and Usability Expert and former President of the Usability Professional’s Association (UXPA)

The 7 Factors That Influence User Experience

FINDABLE Findable refers to the idea that the information the user is looking for must be easy to find.

The reason is quite simple: if you cannot find the content you want in a website, you’re going to stop browsing it and look somewhere else.

The 7 Factors That Influence User Experience

CREDIBLE Credibility relates to the ability of the user to trust in your website—not just that it has the information the user is looking for, but also that that information is accurate and reliable.

Keeping your website on-brand aids in building credibility.

The 7 Factors That Influence User Experience

ACCESSIBLE It’s also worth remembering that when you design for accessibility, you will often find that you create products that are easier for everyone to use, not just those with disabilities.

Don’t neglect accessibility in the user experience; it’s not just about showing courtesy and decency—it’s about heeding common sense and following the law, too!

The 7 Factors That Influence User Experience

DESIRABLE Scion and Porsche both make cars. Both brands are, to some extent, useful, usable, findable, accessible, credible and valuable—but Porsche is much more desirable than Scion. This is not to say that Scion is undesirable; they have sold a lot of cars. However, given a choice of a new Porsche or Scion for free, most people will opt for the Porsche.

The 7 Factors That Influence User Experience

VALUABLE Your product must deliver value to both the business, and to the user. Without value, it is likely that any initial success of a website will eventually corrode as the reality of a poor user experience starts to undermine it.

As designers, we should bear in mind that value is one of the key influences on purchasing decisions. A $100 product that solves a $10,000 problem is one that is likely to succeed; a $10,000 product that solves a $100 problem is far less likely to do so.

WHAT IS USER EXPERIENCE

DESIGN?

User Experience (UX) Design

• User experience design is putting the principles of user experience into practice.

• Early websites were simple, static pages that served up information to feed curious searchers. However, a few decades later, most website online are interactive and offer a more immersive experience.

• You can add all the features and functionality that you like to a site or application, but the success of the project rides on a single factor: how the users feel about it.

Nielsen’s Ten Usability Heuristics

Jacob NielsenJacob Nielsen Ph.D., is a User Advocate and principal of the Nielsen Norman Group

Don NormanDon Norman is co-founder and Principal Emeritus of Nielsen Norman Group

heu ris tic

Involving or serving as an aid to learning, discovery, or problem-solving.

These usability heuristics are broad rules of thumb and not specific usability guidelines.

\ hyu̇-ˈri-stik \

1 Visibility of System StatusThe system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Progress Bars

“Hey Apple, just because you colored the dreaded hung up symbol with rainbow colors, doesn't lessen the impact of dread when my computer is hung up.”

– Quote and feature image from a 2015 post on the blog, retiredindelaware.blogspot.com

“Loading” Icons

2 Match between system and the real worldThe system should speak the users’ language, using words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Skeuomorphism is the design concept of making items resemble their real-world counterparts, either in the way they look or the way users interact with them.

Google Material DesignHere are a couple of Google’s Material Design Principles:

Material is the Metaphor – Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

Motion provides meaning – Motion focuses attention and maintains continuity, through subtle feedback and coherent transitions.

3 User control and freedomUsers often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

For items in the cart, there are links to easily delete or save items for later.

For items saved for later, there are links to easily delete, move to cart, or move to wish list.

4 Consistency and standardsUsers should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

The majority of users expect the search bar to be in the top right corner of the screen.

Users of all UARK websites can expect to see a breadcrumb on all sub-pages indicating where you are relative to the U of A homepage.

5 Error PreventionEven better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or checks or them and present users with a confirmation option before they commit to the action.

When editing page content in OUCampus, if you make a change and click the “Close” icon without saving, a dialog box pops up to prevent you from leaving without saving your changes.

6Recognition rather than recall

The Newswire archive displays the selected filters, so the user doesn’t have to remember what they’ve already filtered by.

7 Flexibility and efficiency of useAccelerators – unseen by the novice her – may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

8 Aesthetic and minimalist designDialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

After a quick Google search for “How to use Font Awesome on desktop,” search results take you here.

There is no clear call to action to download the Font Awesome files, but there is a graphic of the file structure and instructions outlining what to do once the files are downloaded.

9 Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

On the Newswire submission page, the form field lets you know that the phone number is invalid immediately.

Before you begin typing, the placeholder text shows you what a valid phone number looks like.

10 Help and documentationEven though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

The UVU Registration Tools page is clear and concise. The two steps are clearly delineated, and the individual steps within them are short and simple to understand.

The page doesn’t include redundant or unnecessary information that can distract from the documentation.

EXERCISES

Final Tips and ResourcesOther usability topics to look into: • Banner Blindness • Miller’s Rule - lists of 7, +/- 2 • Fitt’s Law - distance and size of target • Hick-Hyman Law - number of choices and reaction time

References from this presentation: • NN/g - Nielsen Norman Group - nng.com • Jesse James Garrett - www.jjg.net

Questions?