1

Creating Great User Experiences:The View from 10,000 feet

Lynn Wadsworth, Enterprise Architect – User Experience April 2012

2

Why User Experience?

• Interactive service delivery: not a one-way static experience

• Quality of interaction can make or break a website or web application.

• When a system is designed for the user (vs the maker or a “business owner”) it is often a very different experience.

3

What is User Experience?User Experience Names and Practices

– UX – User Experience– User-Centered Design– Experience Design– Human Factors– HCI – Human Computer Interaction

– Usability Testing– Interface Design– Information Architecture– Interaction Design– Visual Design

4

What is User Experience ? “True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.”

—Nielsen Norman Group

“User-centered design means understanding what your users need, how they think, and how they behave - and incorporating that understanding into every aspect of your process.”

—Jesse J. Garrett

5

The Iceberg Analogy of Usability

The Iceberg Analogy of Usability, Dick Berry, User Experience Design, IBM Ease of Use Team, 10/2000http://www.ibm.com/developerworks/library/w-berry/

6

The Iceberg Analogy of Usability

• Top 10% - Visual cues, feedback and esthetics or “The Look”• Visual cues, i.e. the three-dimensional look of push buttons in traditional

interfaces is a cue that says "push me." • Feedback provides acknowledgement to the user that a request is being

acted upon, i.e. confirmation messages. • Esthetics includes all of the aspects that create subjective appeal, i.e. the

use of color, line styles, and typography.

7

The Iceberg Analogy of Usability

• 30% - Interaction Design or “The Feel”• This is how a user interacts with the system tools, i.e. keyboard

mappings, mouse button mappings, menu structures, shortcuts, and interface navigation conventions.

• Taken together, “the look and feel” of an interface is analogous to the syntax of a language.

8

The Iceberg Analogy

• 60% - User’s “Mental Model,” i.e. tasks, goals, behavior, expectations

• A mental model is a set of beliefs about how a system works. Humans interact with systems based on these beliefs. (Norman, 1988)

• The point is not that the look and feel are not important, but rather that if you do not get the 60% right, you have little chance of getting the other 40% even close to right.

9

What is a mental model?A mental model is an explanation of someone's thought process about how something works in the real world. It is a representation of the surrounding world, the relationships between its various parts and a person's intuitive perception about his or her own acts and their consequences.

User Centered Design• Identify users and

understand their goals, motivations, behaviors

• Design relevant solutions based on users’ needs, and desires.

Peter Morville’s UX Honeycomb illustrates six basic elements of user experience.

10

11

User Experience in Action

EvaluationWe test designs with users to discover what the design is doing right and what can be done to make it better.

ResearchWe learn about the people who will use the design: what they do, how they work, where they work, and what they care about.

DesignWe use what we know about the users to make design decisions. We design systems that make sense for the user.

12

Research• Research Goals

– Understand users– Understand user tasks– What is important to the user?– User’s mental model

(how the user thinks about their work/task)

• Research Activities– Contextual inquiry, field research– Interviews – Task analysis– Personas – Surveys– Competitive Analysis

13

Student Feedback on “Dashboard”

Extended interviews with students at SCSU

25 interviews at MSCSA Conference

Link to optional survey, 300 responses

14

What students told us

Which items on this page are most usefulto you? – Class schedule 205 – Financial aid information 178 – Holds that may impact registration 128 – Action items 92 – Wait listed classes 68 – My MnSCU schools 55 – None of the above 37Optional open text box responses from 300 respondents

15

Simple Research Activities

• Understand your users’ needs and behaviors– Create personas– Conduct simple surveys– Use paper prototypes– Interviews

16

Design• Design Goals

– Create and describe elegant solutions that meet business objectives and user needs

• Design Activities– Information architecture– Navigation– Storyboards– Detailed descriptions of screen elements – Detailed descriptions of screen behaviors – Widgets, icons, controls, etc.– Visual design– Interactive design– Functioning prototype

17

• Stay out of people’s way– Make things efficient– Use appropriate defaults– Prevent errors when possible– Make actions reversible

User-Centered Design Principles adapted from Whitney Hess, Guiding Principles for Experience Design

18

User-Centered Design Principlesadapted from Whitney Hess, Guiding Principles for Experience Design

• Less is more – everything must have a purpose– Present few choices and limit

distractions– Group related objects near each

other– Create a visual hierarchy that

matches the users needs– Use consistent interface elements

and patterns

19

User-Centered Design Principlesadapted from Whitney Hess, Guiding Principles for Experience Design

• Provide Context– Put related communication together– Provide a strong information scent,

signposts, and ques– Avoid jargon

• Be Responsive– Respond quickly– Provide feedback

• Use emotion– Be credible and trustworthy

http://www.dmolsen.com/mobile-in-higher-ed/2011/02/07/the-university-home-page-mobile-first/

User-Centered Design Principlesadapted from Whitney Hess, Guiding Principles for Experience Design

• Provide useful content - upfront

21

Vision for MNSCU Student User Experience Usability Goals Student Voice Interface Guidelines

Easy to Learn“I understood what to do right away. I

completed my application in no time – no problem.”

The interface will use familiar, web-based conventions for information display, navigation, and task patterns.

Easy to Remember“I always know where to go on the MNSCU

website, everything just makes sense.”The interface will act consistently across

functions, departments, and institutions, creating a seamless experience for students.

Fast and Efficient“I can do everything for school online, it is

convenient and available when I want to use it.”

The interface will respond quickly 24/7 and not require students to navigate through unnecessary information to complete their tasks.

Satisfied Users“MNSCU really understands students like

me. They will help me succeed.”The interface will inspire confidence and

demonstrate value by remembering the student’s previous visits and present individualized information in a relevant, professional, and up-to-date manner.

22

Home Page Project Design Goals

• One stop shop for critical, contextual, and actionable information

• Familiar web-based metaphors and patterns• Flexible, expandable, and useable presentation

framework • Mobile friendly• Replace the current MnSCU eServices home page

23

One stop shop… Critical, Contextual, and Actionable information

24

User Experience Design Challenges:

• Overwhelming amount of information– Indicate priority information, create visual hierarchy– Minimize visual confusion

• New look and feel– Up to date – web – Professional

• Design must translate for interior pages, mobile• Wide variety of school brands and brand colors

– Neutral grays and one other color (gold) as a compatible pairing. The gold is from the MnSCU logo.

25

26

27

Simple Design Activities

• Use what you know to build solutions for your users

• Wire frames • Task flows• Design comps• Prototypes

28

Evaluation• Evaluation Goals

– Measuring the quality of auser’s experience

– Ease of learning for new usersand memorability for repeat users

– Efficiency of use for experienced users

– Error frequency and severity– Satisfaction: Does the user

like using the system?• Evaluation Activities

– Usability inspections– Usability testing– Surveys (satisfaction)

29

Simple Evaluation Activities

• Measure your solutions using actual users– Guerilla testing

30

User Experience Adds Value

• Improved system quality• Increased trust in systems• Improved productivity• Reduced training costs

• Reduced costs for development, maintenance, and support

• Reduced development time• Saved redesign costs

• Satisfied customers• Better brand image• Wider adoption

31

Some Resources http://www.usability.gov/

Usability.gov is a one-stop source for government web designers to learn how to make websites more usable, useful, and accessible

http://www.upassoc.org/The UPA supports people who research, design, and evaluate the user experience of products and services

http://www.boxesandarrows.com/Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business

http://www.lukew.com/LukeW is an internationally recognized digital product leader who has designed or contributed to software used by more than 700 million people worldwide

32

Thank you!

• Questions?