USER EXPERIENCE DESIGN

BACKGROUND & INTRODUCTIONS

My

background

Degree in Cognitive Science from SFU UI design experience with:

Canucks

Electronic Arts IBM Microsoft NBA Nokia Western Union Yahoo

Now run Optimal User Interfaces

Class

introductions
2

CLASS STRUCTURE

Participatory lecture Ask questions! Your input is essential

Exercises - activities to learn key techniques Assignment - documents youll hand in for grades Readings - More details on many class topics

CLASS ASSIGNMENT
Build

a website for a random chosen user group and industry deliverables:

Graded

Inforamtion Architecture (40%) Wireframes 3 key pages for desktop web (30%) Wireframe 3 key pages for mobile web (30%)

If

there is time in class we can do some work in class:

Class 1 - User research and competitive analysis Class 2 - Determine key tasks, Information Architecture Class 3 - Web wireframing Class 4 - Mobile wireframing and usability testing

TOPICS WELL COVER

Introduction Competitive Analysis Heuristic Evaluation Gathering Requirements Information Architecture Navigation Wireframing Interaction Design Web UI Design Mobile UI Design Usability Testing Future Interfaces

COURSE WEBSITE
http://www.optimalinterfaces.com/bcit Course Course Full

outline reading

slides with notes resources Information

Useful

Contact

6 Class Website - http://www.optimalinterfaces.com/bcit

OVERVIEW OF SESSION 1
What Why

is User Interface Design?

is UI Design important? to User Centered Design

Introduction

Competitive Analysis Heuristic

Evaluation

DEFINING USER INTERFACE DESIGN

Denition?

User Interface Design (UID) User Experience (UX) Interaction Design (ID) Usability Engineering (UE) Human-computer Interaction (HCI) Human Factors Engineering (HFE) Information Architecture (IA) Business Analysis (BA)

8 User Interface Design: A practice that involves taking a set of requirements and designing a human-computer interface to enable users to simply and efciently accomplish their goals. Usability Engineering: A general term used to describe the complete interaction design cycle including: requirements gathering, prototyping and usability testing. Human-Computer Interaction: A broad term used to describe both software and hardware interface designers. Typical HCI professional include both ergonomists and interaction designers. Human Factors Engineering: Another broad term used to describe both software and hardware interface designers. Typical Human Factors Engineers include both ergonomists and interaction designers. Information Architecture: The practice of taking a large amount of information and organizing in a manner that makes it easy for users to nd what they are looking for. Typical Information Architects include both lybrianians and interaction designers. Business Analysis: A general term used to describe the process of determining, optimizing and quantifying business (and sometimes) user requirements. Interaction Design: The practice of designing practical, usable and engaging user interfaces for software and hardware systems. More information: Dening User Interface Design - http://www.iawiki.net/DeningTheDamnThing What does a UX strategist do? (March 2012) - http://www.uxmatters.com/mt/archives/2012/03/what-does-a-ux-strategist-do.php

THE REAL DEFINITION...

Designing

an interface so that it does what the user wants and gets them to their goal efciently and effortlessly.

9 Top 10 Misconceptions of User Experience Design (2009) - http://mashable.com/2009/01/09/user-experience-design/

THE PARADOX OF TECHNOLOGY

Whenever the number of functions and required operations exceeds the number of controls, the design becomes arbitrary, unnatural and complicated. The same technology that simplies life by providing more functions in each device also complicates life by making that device more difcult to use. (Norman, 1988)

10

PRINCIPLES OF INTERFACE DESIGN

Learnability Efciency Memorability Error

Recovery

Satisfaction

11 Image: Japanese train schedule showing not only the schedule of the trains but the type of train and elevation of the tracks. No doubt the creator of the schedule completely understood how to use it... its doubtful that many others could gure it out. Principles of Interface Design Learnability: The system should be easy to learn so that the user can rapidly start getting some work done with the system. Efciency: The system should be efcient to use, so that once the user has learned the system, a high level of productivity is possible. Memorability: The system should be easy to remember, so that the casual user is able to return to the system after some period of not having used it, without having to learn everything all over again. Error recovery: The system should have a low error rate, so that users make few errors during the use of the system, and so that if they do make errors they can easily recover from them. Further, catastrophic errors must not occur. Satisfaction: The system should be pleasant to use so that users are subjectively satised when using it.

ON A DAY-TO-DAY BASIS

12 20% Requirements gathering - Collecting and documenting business needs - Ensuring that users requirements are being met 50% Interaction design / Information architecture - Information architecture - User Centered Design - Wireframing 30% User testing - Heuristic evaluation - Usability testing

GENIUS DESIGN
One

or several subject matter experts or designers making all the decisions on what users will want within an interface. on key decisions being correctly made by a genius in order for the design to work for users. majority of websites even today are created by genius design.

Relies

Vast

13

USER CENTERED DESIGN

Keeping

design

the user involved in all stages of the website

Much

more effective and more likely to produce a usable website

More information: http://www-01.ibm.com/software/ucd/ucd.html

14

EXPERIENCE DESIGN

Taking the interface from something that user must use in order to get their task done to something they want to use all the time. Understanding that poor interaction and user experience lowers the users perception of your brand. Apple virtually created the eld.

15

RETURN ON INVESTMENT

No

building would ever be designed without an architect:

1 in 7 cell phones are return with no faults found (2006). More than 25% of Wireless Routers are also returned with no faults found (2007). New Yorkers rate usability 3:2 higher than looks when choosing a new mobile phone (2007) Spending 10% of a projects budget on user interface design shows an 83% return on investment. (Neilsen, 2008)
16

RETURN ON INVESTMENT

IBM spent $20k redesigning a universal log-in application that reduced sign-in times for all employees, saving $50k per day. (1996) Bank of America reduced the average time to nd information on their intranet from 43.6 to 21.7 seconds (a 101% increase in productivity). An estimated savings of $100 million based on ight costs and training time (2008)

17 The Business Case For Investing In UI Design (April 2012) - http://www.fastcodesign.com/1669283/dollars-and-sense-the-business-case-forinvesting-in-ui-design

TIME AND COST SAVINGS

Spending a relatively small amount of time in requirements provides a huge reductions in later phases of the schedule. Changes to wireframes are far less costly than changes to visual designed or coded websites. Stakeholder are far less likely to make changes since everyone has agreed on requirements before programming begins. The bonus is that your users will also be happier with their experience using your software.
18

S.M.A.R.T. PROCESSES

Throughout

the entire development process we want to ensure that the process we follow conforms to each attribute of SMART. process discussed in class follows this methodology
More info: http://uxdesign.smashingmagazine.com/2011/09/13/the-s-m-a-r-t-user-experience-strategy/

The

19

USER CENTERED DESIGN PROCESS

20

USER CENTERED DESIGN PROCESS

21

USER CENTERED DESIGN PROCESS

22

ITERATIVE PROCESS

Good user interface design is an iterative process:

Research is performed Requirements are gathered Interface is created Interface is vetted with stakeholders Interface is updated Interface is tested with users Interface is updated

Vetting and testing may require several iterative rounds to nalize requirements and design.

23

INTEGRATING INTO EXISTING PROCESS

User Interface Designs works equally well in a waterfall or an agile software development process. It is important to budget for time before design begins for UID to get ahead of the software and visual design teams.

24

WEBSITE DISCUSSION

25

COMPETITIVE ANALYSIS

26

COMPETITIVE ANALYSIS

Ask yourself: What already exists that does similar things to what I want to do and does those things well? No matter what you are building, something like it exists already. Look for useful UI metaphors in hardware based systems also Competing products are already complete so they can be easily usability tested

27

COMPETITIVE ANALYSIS

Look across platforms Extract the best parts of existing user interfaces and modify them for your project No software is perfect so dont blindly copy

28

COMPETITIVE ANALYSIS EXERCISE

During

the class well be redesigning:

http://www.bcliquorstores.com/products
Do Do

some research to determine a good list of competitor sites screen grabs of interesting UI, good ideas and things that can be improved notes of key pros and cons for each example

Make

29

HEURISTIC EVALUATION

A formalized test performed by a usability expert The evaluator looks at each page of the interface individually A checklist is applied to each page, where problems are found, they are noted and explained

30

PROBLEMS WITH HEURISTICS EVALUATION

Never a substitute for real user testing, an expert is performing the test which is by denition not going to nd all the problems. Will not nd problems between pages If heuristics used are incorrect then test is meaningless

31

EVALUATION HEURISTICS
1. Task centric design 2. Navigation and information architecture 3. Forms and data entry 4. Simplicity 5. Instructions, feedback and error handling 6. Search and results 7. Performance 8. Visual design and layout 9. Trust and credibility 10. Quality of writing and content 11. Consistency and best practices 12. Technical design and accessibility

32 Based on Jakob Neilsens (http://www.useit.com/papers/heuristic/heuristic_list.html)

1. TASK CENTRIC DESIGN

Is the site designed based on key user tasks? Are the most important tasks easy to complete? Can tasks be completed quickly and immediately? Does the users ow of information match the sites ow?

33

1. TASK CENTRIC DESIGN

User should not have to recall information from one part of the application to another Instructions should be visible and clearly written for complex actions Content should be relevant and not overwhelming Content should be on the screen at the right time for the user to use it

34

1. TASK CENTRIC DESIGN

35

1. TASK CENTRIC DESIGN

36

2. NAVIGATION AND INFORMATION ARCHITECTURE

Minimize the users memory load (Millers Magic Number) Should be able to answer the following questions:

Where am I? Where can I go from here? What is this and why would I care?

37

2. NAVIGATION AND INFORMATION ARCHITECTURE

38

2. NAVIGATION AND INFORMATION ARCHITECTURE

39

3. FORMS AND USER INPUT

Inform the user what theyll need before they start Input should be made as minimal as possible Users should understand the value of entering their personal information

40

3. FORMS AND USER INPUT

Fields should adhere to standard interaction design principles Use recognition elds rather than recall elds Use wizards for complete low frequency tasks Provide defaults when possible Allow users to undo all actions

41

4. SIMPLICITY

Ideally: Present exactly the text that the user needs Information that is used together is displayed together Information is ordered in the same way the user will use it Provide clearly marked exits to all actions Simplicity extends to many different areas:

Visual Design Functionality Content Technical Design etc.

42

4. SIMPLICITY

43

5. INSTRUCTIONS, FEEDBACK AND ERROR HANDLING

If possible prevent all errors If not possible to prevent then strive to reduce Provide an easy way to Undo previous actions If an error does occur, provide good feedback in the form of:
Unique error identier Description of problem Description of possible solutions

44

5. INSTRUCTIONS, FEEDBACK AND ERROR HANDLING

45

5. INSTRUCTIONS, FEEDBACK AND ERROR HANDLING

46

5. INSTRUCTIONS, FEEDBACK AND ERROR HANDLING

Help should be used very infrequently Normally basic instructions should be enough for users to complete tasks within the interface Explicit help should not be needed unless the site is very complex and requires users become expert quickly Provide help in context Show dont tell if possible

47

6. SEARCH AND RESULTS

Search is a well understood functionality at this point Results should provide good results by user relevance Results should give the user enough information to make an informed decision about which result is the right result Results can be categorized by content types handled by the site Try to make search results more interesting for users

48

7. PERFORMANCE

Response times should be quick (even in the most complex situations) 5 second limit on page loads on the web Display status information in any case where the system is doing non-obvious things Progress bars are awesome (when they work properly)

49

7. PERFORMANCE

50 As we know from the Cognitive Psychology sections, users will not wait 60 seconds for feedback.

7. PERFORMANCE

51 As we know from the Cognitive Psychology sections, users will not wait 60 seconds for feedback.

8. VISUAL DESIGN & LAYOUT

Overall calls-to-action should be related to user task priorities Group like information and functionality together on the screen Minimize the impact of visual information Use white space efciently Ensure visual consistency

52

8. VISUAL DESIGN & LAYOUT

53 Jakob Nielsens classic website: can you spot the one graphical item used? He did a one year study in order to justify its use.

8. VISUAL DESIGN & LAYOUT

54 Jakob Nielsens classic website: can you spot the one graphical item used? He did a one year study in order to justify its use.

9. TRUST AND CREDIBILITY

The visual design, logos and graphics will heavily inuence users perspective on the sites credibility Bug free Avoid animations, pop-ups, sound, auto-running movies etc.

55

9. TRUST AND CREDIBILITY

56

10. QUALITY OF WRITING AND CONTENT

Good web writing
Provides Short Uses

Poor web writing

Wordy Paragraphs Reads

an overview

and to the point

of text

bold, italics and bullet points video imagery and

like an advertisement provide ways to continue the experience

Incorporates Uses

Doesnt

hyperlinking

57

10. QUALITY OF WRITING AND CONTENT

58

59

11. CONSISTENCY AND BEST PRACTICES

Follow

existing Web / OS / Platform standards consistency:

Internal

Fonts Colours Language Navigation Visual design Branding etc...

60

11. CONSISTENCY AND BEST PRACTICES

61

11. CONSISTENCY AND BEST PRACTICES

62

11. CONSISTENCY AND BEST PRACTICES

63 Here the scroll bar to the right is implemented in a non-standard way, this means that the user must click the down arrow about 300 times before reaching the bottom of the page. Simply using a standard scroll bar would have reduced development time and vastly improved usability. Also note that alphabetical ordering of cities here may not be the most productive.

12. TECHNICAL DESIGN AND ACCESSIBILITY

A large proportion of the population have physical handicaps Government laws provide clear rules that websites need to be accessible Flash / Frames / Java are all terrible for accessibility Lots of great resources on the web

64

12. TECHNICAL DESIGN & ACCESSIBILITY

Technical design and code implementation can have a massive impact on usability. The most usable wireframes can be coded into completely unusable websites. Performance is a major factor which usually cant be quantied until coding is complete. Subtle coding changes from original wireframes can make obvious interactions much more difcult for the user.

65

12. TECHNICAL DESIGN AND ACCESSIBILITY

66

12. TECHNICAL DESIGN AND ACCESSIBILITY

67 Classic mapping issue on the web. Clicking Download doesnt actually begin a download, it starts a long drawn out process leading you towards download.

REVIEW OF HEURISTICS
1. Task centric design 2. Navigation and information architecture 3. Forms and data entry 4. Simplicity 5. Instructions, feedback and error handling 6. Search and results 7. Performance 8. Visual design and layout 9. Trust and credibility 10. Quality of writing and content 11. Consistency and best practices 12. Technical design and accessibility

68 Based on Jakob Neilsens (http://www.useit.com/papers/heuristic/heuristic_list.html)

OUTPUT OF A HEURISTIC EVALUATION

69

SESSION REVIEW
What Why

is User Interface Design?

is UI Design important? to User Centered Design

Introduction

Competitive Analysis Heuristic

Evaluation

70

HEURISTIC EVALUATION EXERCISE

Build

a content audit of the liquor store site which pages are unique templates

Determine Build

a heuristic evaluation for key pages

71

CLASS ASSIGNMENT
Build

a website for a random chosen user group and industry deliverables:

Graded

Inforamtion Architecture (40%) Wireframes 3 key pages for desktop web (30%) Wireframe 3 key pages for mobile web (30%)

If

there is time in class we can do some work in class:

Class 1 - User research and competitive analysis Class 2 - Determine key tasks, Information Architecture Class 3 - Web wireframing Class 4 - Mobile wireframing and usability testing

72

USER EXPERIENCE DESIGN

BUILDING CONSENSUS

73

BUILDING CONSENSUS

Gathering business requirements Gathering user requirements Creating and prioritizing tasks Content auditing Information Architecture

74

WHERE ARE WE?

(IN THE INTERFACE DESIGN PROCESS)

75

GATHERING REQUIREMENTS

76

R.A.C.I.
A

matrix that includes the names of all project stakeholders and the entire team that will be building the website. high-level requirement is listed and at least one R, A, C and I is assigned to each requirement.

Each

R - Responsible for Doing the Work A - Accountable for deliverable (Sign-off) C - Consulted as input to a decision I - Informed after decisions made

77

BUSINESS REQUIREMENTS

Business requirements often existing before the project starts (often the reason for the project in the rst place). If business requirements are murky then the KJ technique is an effective way of building consensus within the business. Business requirements and User requirements combine to form the user interface requirements of the website. Wireframes are the best way of capturing business (and user) UI requirements because they are visual but also easily updated. Initially creating textual descriptions of each important user task within the site will be enough to start the wireframing process.
78

CONTENT AUDIT
Important

to understand what existing already

Spreadsheet Each

with every content element from every page of the existing site content element is assigned a current state:
Complete Missing Outdated Incorrect Double

79

REVIEW EXISTING ANALYTICS

Existing

website metrics and analytics can provide valuable insight before design starts.
Where are users going now? Where arent users going now? What are users dropping off?

Users

are bound by your existing structure, interface, functionality and usability problems.

80 Common analytics tools: Google Analytics Adobe Omniture Webtrends

PLATFORM & TECHNICAL CONSTRAINTS

Critical to understand what technical limitations already exist before you start your design. Talk to the developers to understand what is easy, possible and more difcult. Signicant design differences between a full-screen website and a mobile website. Use standards based technology by default. Only build your own or use non-standard technology in situations where the standard doesnt meet your needs.
81

More Info: Separate Mobile Website Vs. Responsive Website - http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-websitepresidential-smackdown/

TECHNICAL CONSTRAINTS & OPPORTUNITIES

What technology must be used based on existing systems? What technology will be used based on pre-determined decisions? What user interface technologies will/could be used? Once you have a solid understanding of what technology will be using, what are the technical constraints of those techs and how will they impact the user experience?

82

UNDERSTANDING YOUR CMS

Your Content Management System (and its related constraints) play a big part in what you can and cant do within your designs Most CMSs allow for basic information hierarchy and standard interactions. More complex organization and interaction can be limited. Choose your CMS well!

83 Common CMSs: Alfresco Django Drupal Interwoven Joomla Lotus Web CMS Microsoft SharePoint Sitenity CMS Sitecore Typo Wordpress

KEY PERFORMANCE INDICATORS

KPIs

can be created to measure performance and as goals for future performance. KPIs include:

Common

Click-throughs Page Views Site visits (or user sessions) Unique visitors Conversion Rates Abandonment Rates Attrition Loyalty, frequency and how recently users have visited

84

BRAINSTORMING BUSINESS REQUIREMENTS

Mind

Mapping allows large groups to come to consensus UX designer leads a session walking through key user tasks from beginning to end.

ONLINE%ADVERTISING,%SEARCH,%AFFILIATE,%SOCIAL,% FRIENDS,%PR,%OUTREACH,%EMAIL,%DRTV,%OFFLINE%MEDIA%

PROF.%PROFILE/RATINGS% STUDENT%PROFILE/RATINGS%

SHARE% COMMUNITY%
FACEBOOK% LINKEDIN% EMAIL% TWITTER%

ACCOUNT%

USER% PROSPECT%
REAL%TIME% WEBINAR%

SITE%

EVENTS%

WHATS%NEW?% WHO%WE%ARE% RECOMMEND% WHAT%IS%SUBSCRIPTION?% GREAT%CONTENT% FEATURED%PRODUCTS% PROMOS%

WHAT%IS%TTC?% COURSE%SPECIFIC%

QUEUE%

PATH% SEARCH%

TOPICS%

PROMOTION%
GIFTING% REFERRAL% RELATED%RESOURCES% LIMITED%FREE%TRIAL% EVENTS/WEBINAR% ACCOUNT% PLAN%CHOICE% CREDIT%CARD% RECOMMENDS% ACHIEVEMENT% SHARED% TRENDING% PROMOS%

PREFERENCES% INTEREST% CREDITS% COMM.%PREF.% CREDIT%REMINDER% GIFTING& ACHIEVEMENTS% REWARDS% UNSUBSCRIBE% ADD%CREDITS% RETENTION% CIRCLES% PROF.%INTEREST% TESTIMONIAL% ACHIEVEMENTS% COMMENTS% RATINGS% GROUPS% RETURN?%

COURSE%

COURSE%
LIMITED%FOR%TRIAL% EVENTS/WEBINARS% RELATED%RESOURCES% AUDIO/VIDEO%

SUBSCRIBE% FREE%TRIAL%

LECTURE%

MAIN%LIBRARY%
SUBSCRIBED%COURSES%

ABOUT%TGC%
WHO%WE%ARE%

TTC SUBSCRIPTION SITE USER PATH

VIEW%BY:% COMMENTS% QUESTIONS% EXPLANATIONS% MODERATED%FAQ% TAGGING% BOOKMARK% POLLS/QUIZ% RELATED%RESOURCES% GLOSSERY/STARTING%MATERIALS% TRANSCRIPTS%

All

ideas should be included. should be avoided occurs after brainstorming is complete.

85

Details

Scoping

Mind Mapping Tools: " MindMeister - http://www.mindmeister.com/ " NovaMind - http://www.novamind.com/ " XMind - http://www.xmind.net/

PROJECT STAKEHOLDERS ARE NOT USERS

Because they're in charge of a particular topic, they obviously know much more than the target audience about all aspects of it. As insiders working in your organization, you're aware of how you structure your domain and each department's responsibilities. As professionals (many of you with college degrees), you are often smarter and better educated than many people in the target audience. Often, project stakeholders are also more tech savvy than the audience, with a better understanding of computers and Internet concepts. Finally, because it's your project, project stakeholders are much more motivated to care about the content than your users.

86

DESIGN FOR YOUR USERS (NOT FOR YOURSELF)

If

project members and stakeholders could see things from a real users perspective they would design perfect applications (and you wouldnt be taking this course) research is needed to determine what your users really want lost is not easily regained
John Sheerer The Video Professor

User

Innocence Thus

the importance of Usability Testing

87 Innocence Lost: Once someone has gained even a small amount of understanding about how the system is designed or implemented they have learned a great deal more about how the interface works than a novice user has. Even the best Interaction Designers have a difcult time looking at an interface from the perspective of a novice user because they have so much built up knowledge of the system. Usability Testing asks real users (who know nothing about the design) to perform common tasks within the interface. Usability Testing is the only true test of an interface because its the only point at which someone without system knowledge is interaction with the system.

WHO ARE YOUR USERS?

Lots of existing demographic information is already available to you:

Marketing department Market Research Company Customer Service department Competitors Business plan Requests For Proposal Google

88

UNDERSTANDING THE USER

Full

http://www.engadget.com/2009/06/29/13-year-old-trades-ipod-for-walkman-reports-on-mysterious-ancie/

Story:

89

WHO ARE WEB USERS?

90

CONTEXT OF USE
Its

important to understand when users want to use your services and content. existing website analytics to see what types of devices are already consuming similar content.

Check

91

TASKS VS. GOALS

Goal

What the user is trying to accomplish by using the interface

Task

The complete process from starting to interact with the software to accomplishing the goal (including each step along the way)

92

USER RESEARCH TECHNIQUES

93

REQUIREMENT GATHERING TECHNIQUES

Business Requirements:

User Requirements:

Request for Proposal (RFP) Existing functionality and content Competitive Analysis Questionnaires / Surveys Subject Matter Experts Stakeholder Interviews KJ with business stakeholders

Customer Service input Questionnaires / Surveys User Interviews Competitive Analysis Personas Focus Groups KJ with real users

Keep all requirements rooted in real user tasks

94

PERSONAS

Fictitious characters that are created to represent the different user types within a targeted demographic that might use a site or product. (wikipedia.com) Help team members share a specic, consistent understanding of various audience groups. Keep project stakeholders grounded in an understanding of real world users More info:
http://www.steptwo.com.au/papers/kmc_personas/

95

USER INTERVIEWS

One-on-one interviews with users Seeking to determine three key things:

1. How

users currently approach the task? are the users information needs (inputs and outputs)? users deal with exceptional circumstances?

2. What 3. How

96

FOCUS GROUPS

Ensure you have the right users Keep the groups small Focus on determining high priority tasks Dont let anyone dominate the conversation More information:
http://www.managementhelp.org/evaluatn/focusgrp.htm

97

KJ TECHNIQUE
1. Gather project stakeholder and representative users 2. Focus on a specic question to answer 3. Individually come up with features, functions and content 4. Gather and group features 5. Name each group 6. Vote for the most important groups 7. Iterate for other questions
More information:
http://www.uie.com/articles/kj_technique/

98

TASK ANALYSIS

Seek out work-arounds and more effective strategies for completing tasks Identify weaknesses in the current process

Good time to resolve any existing requirement questions

The output of task analysis is a list of prioritized tasks that user want to perform within the interface. Even better, each task can be broken down a ow chart that shows individual actions and choices that must be made to complete the task.

99

PRIORITIZING YOUR REQUIREMENTS

Customer Requirements Business Requirements Seducible Moments Exploited

Business Compromise

Maximum Value

Wont Do

Will Do
http://www.openroad.ca/2011/07/21/visualizing-requirements-vs-scope/

Wont Do

100

CAN YOU EXPLAIN YOUR SITE IN 20 SECONDS?

If

you can not explain your site in 20 seconds so that a user would want to use it then there is a good chance that you need to go back to the drawing board with your requirements.

101

BRAINSTORM THEN SIMPLIFY

Brainstorming
(Diverge)
Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea

Simplication
(Converge)

Solution Solution Solution Solution Solution Solution Solution Solution Solution

Initial Ideas

Solution

Time & Level of Detail

102

SIMPLIFY
Build

half a product, not a half-ass product... Take whatever you think your product should be and cut it in half. 37Signals, Getting Real together the smallest project possible, release it and then add to it based on input from your users. Bang-style web projects rarely develop useful usable software

Put

Big

103

M.O.S.C.O.W.

Used to scope a project once all possible requirements are understood. Each requirements is listed in a matrix and a priority is given to each one:

M - Must have (highest priority) S - Should have (medium priority) C - Could have (nice to have) W - Wont have (technical, process or user constraint)

Decisions should be made based on the key user tasks and their relative priorities Keep it simple!
104

UX OUTPUTS OF THE REQUIREMENTS PHASE

List of things users want to accomplish (goals) Information needed to accomplish goals (inputs) Steps to perform the task Information outputs of the task Priority and frequency of use for each task Scoped to keep it simple and focused on key user tasks

105

KJ EXERCISE

106

WEBSITE DISCUSSION

107

INFORMATION ARCHITECTURE

108

UNDERSTANDING HUMAN MEMORY

Size of memory:
Sensory memory: Vast Short Term memory: Very small Long Term memory: ~Innite

Length of memory:
Sensory Memory: ~60 milliseconds Short Term Memory: ~30 seconds Long Term Memory: ~innite

109

UNDERSTANDING HUMAN MEMORY

How is information retained:

Sensory Memory: Only what is attended Short Term Memory: Only what is rehearsed Long Term Memory: Only what is associated

Recognition vs. Recall: because humans remember things through association, recognition is a much more powerful tool than recall
110

KEEPING USERS INVOLVED

Concepting takes existing requirements and organizes them into a meaningful and usable information architecture hierarchy We want to ensure that information is organized in a way that is:
Logically structured User centered Tested with real users

111

MILLERS MAGIC NUMBER

7 plus or minus 2 items Between 5 and 9 items at each level of the hierarchy Ideally around 5-7 to facilitate later expansion of the architecture Ensures that a hierarchy is neither too at nor too deep

112

WHEN NOT TO USE MILLERS NUMBER

Millers Magic Number, Mutual Exclusivity and Progressive Disclosure work very well for the vast majority of sites. Why do some popular sites break these rules and how are they still successful? The key to many of these sites is that they are designed to encourage exploration rather than nding specic content. Rarely will you be designing these types of site.
113

ORGANIZING INFORMATION

Human memory functions as a hierarchy

Hierarchy

organize:

can be used to

Web pages Application menus Products Any list or hierarchy of info

The hierarchy becomes site navigation

114

DESCRIBING A HIERARCHY

115

PROGRESSIVE DISCLOSURE

"On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely. - Jakob Neilsen, 2008 Display only what is necessary to complete the task Instead of providing an overwhelming array of possible options, provide a simple array of options that covers the most important tasks Simplify user decisions by reducing the complexity of decision making

116

PROGRESSIVE DISCLOSURE
Used

everywhere in the interface design process:

Information Architecture Visual Design Content Management Functional Design

117

PROGRESSIVE DISCLOSURE EXAMPLE

118

PROGRESSIVE DISCLOSURE EXAMPLE

119

MUTUAL EXCLUSIVITY
Options

at all levels of the hierarchy should be mutually exclusive pursuing the goal, when the user considers the options, there should be only one choice that appears to lead the user to their goal. against the tasks you know the user will want to perform within the application

In

Test

120

LOGICAL ORGANIZATION?

121

IA VS. NAVIGATION

The

IA translates one-to-one to most common styles of navigation. below 3 levels becomes much more complex
122

Navigation

CREATING THE IA

Speak the users language:

Avoid subject-matter jargon when naming sections Avoid surfacing company structure in naming the items

Problems are often caused by the wording of the items (much less often its the organization of items) Post-Its are very useful for creating an information architecture with a group of stakeholders and users

123

CREATING THE IA

Keep item names as short as possible (while still keeping the meaning of the label) Use consistent grammar (for example verb + noun) when naming Avoid label names that are generic (ie. Other or Misc.) these are catchalls for content and will cause mutual exclusivity problems Avoid categories with one item in them

124

CONTENT VS. FUNCTIONALITY

Content

Pages

Every content page is included in the Information Architecture Usually created from a set of pre-dened template

Functional

Pages

Each unique piece of functionality is represented by a single box in an the Information Architecture Details of how the functionality works and what pages are contained within the functionality are left to Wireframes Should be visually or textually differentiated in IA from content pages
125

CARD SORTING

...Researchers give participants a set of index cards, each containing a piece of content and, optionally, a description. Participants sort these pieces of content into categories that make sense to them, then name those categories. - UXMatters (2011) Users work from the bottom up to individually create the structure of the website.

126 Comparing user created IA Methods: http://www.uxmatters.com/mt/archives/2011/06/comparing-user-research-methods-for-informationarchitecture.php

CARD SORTING EXERCISE

Half

the class: into groups a pile of cards your cards into meaningful groupings to your group how and why you organized your

Get Take

Organize Explain

cards

Other

half of the class: the major groupings of alcohol on bcliquor store

Compile

site.

127

OUTPUTTING THE IA
Can

be in a ow chart-type diagram excel sheet or simply a tabbed list

128

OUTPUTTING THE IA
A

simple tabbed list is the easiest way to initially create and play with the IA

129

OUTPUTTING THE IA
Detail

can be added to the pages as the design proceeds.

130 Showing a screenshot from Omnioutliner but Excel or even a word-processor like Word can do something similar. More information: IA Institutes IA Tools page - http://www.iainstitute.org/tools/

TESTING THE IA

Give the user a specic goal (from the bottom of the architecture) Present the user with a single level of the architecture (starting at the top of the hierarchy) Progressively disclose the architecture to the user as they select their choice at each level

131

USEFUL IA TOOLS

132 Websort.net: http://www.websort.net Treejack: http://www.optimalworkshop.com/treejack.htm

INFORMATION ARCHITECTURE EXERCISE

133

MANAGING CONTENT
Use

the Information Architecture to help manage content:

Home [0.0]

Products [1.0]

Downloads [2.0]

Support [3.0]

Contact Us [4.0]

Product 1 [1.1]

Manual [3.1]

Product 2 [1.2]

Knowledge Base [3.2]

Product 3 [1.3]

FAQ [3.3]

Product 4 [1.4]

Product 5 [1.5]

134

CONTENT STRATEGY
Web

content is useless unless it does one or both of the following:

Support Support

a key business objective a customer (user) in completing a task

Less

is better than more:

Less

content is easier to manage Less content is more user friendly Less content costs less to create

135

WRITING TIPS FROM GOOGLES ANDROID

136 Excerpt from the Android Design Guidelines (2012)

CONTENT STRATEGY DELIVERABLES

Message Map Content Inventory Gap Analysis Site Map Page Tables Content Template Map Editorial Strategy Content Style Guide Editorial Workow Diagram Metadata Framework Taxonomy Content Flow Schematic Content Model Content Quality Assurance Tools Content Production Schedule Competitor Content Audit Content Migration Plan Content Licensing Evaluation Report

137

SESSION REVIEW

Gathering business requirements Gathering user requirements Creating and prioritizing tasks Content auditing Information Architecture

138

USER EXPERIENCE DESIGN

USER INTERFACE DESIGN

139

UI DESIGN
Introduction Design

to UI Design

patterns

Wireframing Interaction Web

Design

UI Design

140

WHERE ARE WE?

(IN THE INTERFACE DESIGN PROCESS)

141

UI DESIGN

142

UNDERSTANDING HUMAN PERCEPTION

Users scan / read from left to right (with Latinate languages) Users read from top to bottom Users Scan the screen Users look for keywords

143

WHAT DOES EYE TRACKING TELL US?

1. Headlines draw eyes before pictures 2. People scan the rst couple words of a headline 3. People scan the left side of a list of headlines 4. Your headline must grab attention in less than 1 second. 5. Smaller type promotes closer reading. 6. Navigation at the top of the page works best. 7. Short paragraphs encourage reading. 8. Introductory paragraphs enjoy high readership. 9. Ad placement in the top and left positions works best. 10. People notice ads placed close to popular content. 11. People read text ads more than graphic ads. 12. Multimedia works better than text for unfamiliar or conceptual information. Source: http://www.directcreative.com/blog/eye-tracking-websites

144

UNDERSTANDING HUMAN ATTENTION

Human attention works in a spotlight model Attention can be focused But the beam of attention can not be split. The spotlight model of attention:
Human attention can be focused broadly or narrowly like an adjustable spotlight, however (like a spotlight) the beam can not be split between multiple things at the same time.

Only attended processes can be actively transferred to memory.

145

HOW LONG WILL USERS WAIT?

Users

will wait:

Up to 5 seconds for an action to take place 10 seconds with general feedback Longer with very good feedback

146

DONT SPLIT THE USERS ATTENTION

147

USE VISUAL GROUPING

148

USE EXISTING STANDARDS

Standards existing for a reason: consistency is the cornerstone of good usability. Follow the platform styleguide unless the existing standard doesnt meet your needs It is very difcult to create new usable widgets For the Web: US Government Research Based Web design standards
http://www.usability.gov/guidelines/index.html

149 Creating a Standards and Guidelines document: http://konigi.com/wiki/user-interface-style-guides http://www.uxbooth.com/resources/yahoo-style-guide/

USE PLATFORM DESIGN GUIDELINES

Apple, Google, Microsoft

and many others have detailed and well designed Platform Design Guideline documents that can provide you with a ton of useful information when designing for a particular platform.

150 Image from Googles Android Design Guidelines (2012) that help the designer to decide whether a conrmation dialog is needed for any user action.

USE DESIGN PATTERNS

Well understood interactions that are known and to work and have been tested with real users

Welie.com
http://www.welie.com

Yahoo Design Patterns

http://developer.yahoo.com/ypatterns/

US Government Research
http://www.usability.gov/pdfs/guidelines.html

Quince
http://quince.infragistics.com/

151 Even More Patterns: Yahoo Design Patterns -http://developer.yahoo.com/ypatterns/ PatternTap (Visual and Tag searching of common UI elements and layouts) -http://patterntap.com/ A large number of website design patterns -http://ui-patterns.com/ Huge list of Style Guides and UI Guidelines -http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-styleguides/ Website Design Pattern Collection -http://box.mepholio.com/ 15 common user control patterns - http://designingwebinterfaces.com/15-common-components Konigi Interface and visual design real-world patterns - http://konigi.com/interface User and Best Practices and Design Patterns - http://www.userplus.org/ Welie Pattern Library for UX Designers -http://www.welie.com Quince (large collection of UI design patterns) -http://quince.infragistics.com/ Also have a look at Stencils for wireframing tools such as OmniGrafe and Visio.

DESIGN PATTERN EXAMPLE

152 From Yahoos Web Design Patterns - http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html

YOUR DESIGN AND COPYRIGHT

Visual design is always copyright Function and interaction design can generally be copied Although interaction is patentable it has rarely held up in court Dont blindly copy as no design is perfect

153 More resources: http://www.uxmatters.com/mt/archives/2011/04/why-great-designers-stealand-are-proud-of-it.php http://www.smashingmagazine.com/2011/06/14/understanding-copyright-and-licenses/ http://www.uxmatters.com/mt/archives/2007/07/your-design-is-infringing-on-my-patent-the-case-against-user-interface-and-interactionmodel-patents.php

WEBSITE DISCUSSION

154

WIREFRAMING

155

WIREFRAMING

Sometimes called an interface prototype, a wireframe is a visually basic but functionally complete version of the nal interface.
User types seeing this view:
Registered member Authenticated registered member Anonymous Returning prospect Registered prospect Authenticated registered Prospect

DIRECTV .com GameStar Project

Document: DIRECTV_IDD_GameStar_v1.2.vsd Last Edited: June 7, 2006 Author: Chris Masterton

Notes

GameStar Games
About DIRECTV | Investor Relations | DIRECTV For Business | MDUs

This screen displays the full list of GameStar Games along with a short description of each. This screen allows the user to quickly look over the entire GameStar library.

[user status module]

1 GameStar Games
search

1
- How to Order - Link to SkillJam - Tournaments and Competitions - Highscorees - GameStar Community

potential flash module [Introductory Copy] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Find Out More >> Order Now >>

[image]

Header area: Area for content depending on user type / subscription status. For Anonymous / Prospect / Nonsubscribing members, this area should contain information describing the benefits of the GameStar service, some indication of the hardware requirements, and links to more information: ie. Find Out More would go to 3.12.1 Guide To GameStar and Order Now would link to 3.12.3 Order Now. Subcribing Registered Member / Subscribing Authenticated Registered Members: would see a header that was more promotional in nature, with the opportunity to use this copy to speak to subscribers in a general sense or to promote an individual games or GamePasses. Ex:

2 3
navigation

Show all Game Title

Show only:

Normal GamePasses

DVR GamePasses Genre Type

GamePass Name

[Game Title] [Game Title] [Game Title] [Game Title]

[GamePas Name] [GamePas Name] [GamePas Name] [GamePas Name]

Action Kids Action Casino

GamePass GamePass GamePass GamePass

Order GamePass Not Currently Available Order GamePass Order GamePass

GameStar Games

Right Hand Rail: Contextual links and/or Interactive modules and/or Targetted promotions

[image]

5
TV Listings

[Game Title] [GamePas Name] Action GamePass Close x Content [Game Title] [Game Title] [GamePas Name] Action GamePass Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pretium gravida est. Duis elementum [image] laoreet eros. Aenean massa lectus. View Details >> [Game Title] [GamePas Name] Action GamePass GamePass Name: Barbie Genre: Action [Game Title] [GamePas Name] Kids GamePass Type: GamePass Game Title] [GamePas Name] Action Action Action Action Kids Action Casino Action Action GamePass GamePass GamePass GamePass DVR GamePass GamePass DVR GamePass GamePass DVR GamePass

[Promotional Copy] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Details >>

2 3

GamePass Type Filter: Allows the user to filter the listings based on Non-DVR or DVR-Only GamePasses. Listings headings: Default will be listings sorted alphabetically by GamePass name (then by Game Name). Current sort column is displayed by the arrow; clicking on the column will reverse the sort order. GamePass Name: Sorts alphabetaically by GamePass name Genre: Sorts alphabetically by genre Type: Sorts alphabetically by GamePass type

Order GamePass

[Game Title] [Game Title] [Game Title] [Game Title] [Game Title] [Game Title] [Game Title] [Game Title]

[GamePas Name] [GamePas Name] [GamePas Name] [GamePas Name] [GamePas Name] [GamePas Name] [GamePas Name] [GamePas Name] [GamePas Name]

Casino

DVR GamePass

Order DVR GamePass Not Currently Available Order GamePass Not Currently Available Order DVR GamePass Order GamePass Not Currently Available Order GamePass Order DVR GamePass

quick links

[Game Title]

Contact Us | Site Map | Legal | Feedback

Game Listing: Clicking on Game Title will open expanded view (see Notee 5). User can Order without expanding (go to either 7.4.5.2 Order Daily GamePass or 7.4.5.3 Order DVD GamePass. Game listings will only show currently available game titles. Some games may not be currently available, if this is the case then the Order button will be changed and nonactionable. Expanded view: program listing and functionality as it appears in the expanded view, along with close button in top right to return to condensed state. Clicking on Program Title and View Details activates 6.6.1 GameStar Game Details. GamePass details activates 6.6.4 GameStar GamePass Details.

not indicative of final design or nomenclature

156

WHAT IS A WIREFRAME?

A wireframe is a skeleton of an application that depicts navigational concepts, functions and content. The document typically contains one wireframe page for each unique template on the website. A wireframe often has only preliminary textual content and is not intended to represent the nal layout or visual design of the page. Wireframes are intended to:

Capture business and user requirements Depict navigational structure and function Indicate UI elements and their use Indicate changes in UI states An indication of copy needs Display the visual priority of page elements Display how error handling occurs

Wireframes are not intended to show: Visual design Final copy Final page layout

157

WHY WIREFRAME?

Cheap to create: in comparison to visual designed or developed pages. Quickly created: wireframes for an entire small website can be created and iterated in a matter of days. Easily changed: wireframing tools make creating and updating representative interfaces easy and quick. Testable: wireframes can be easily usability tested with real users. Disposable: major problems found within the interface can often only be xed by fundamental changes to the UI.

158

THE IDEAL MILESTONE

A complete iterated and tested wireframe document:

Wireframe Process

Provides a complete understanding of project scope Makes a clear detailed visual requirements specication Created in a format that is understood by all project stakeholders Makes ideal input into usability testing Allows for much more accurate development budgets and timelines Output tailored for visual designers, developers and content managers
Visual Visual Design Design

Initial Wireframes

Stakeholder Review

Wireframes Updated
(add design notes)

Usability Testing

Wireframes Finalized

Finalized wireframes are the ideal place to get sign-off on the scope of the project.

Content Visual Design Creation

Development Visual Design

159

PAPER WIREFRAMING

Can be anything from a scribbled screen on a napkin to a detailed multipage Visio diagram

160 Use Paper Wireframing tools: " - Paper / Whiteboard " * Omni-grafe (my current favourite) " - Visio " - Power Point " - Denim " - Excel (?!) - More advanced tools for prototyping: http://www.boxesandarrows.com/view/visio_replaceme

FUNCTIONAL WIREFRAMING

Interactive clickable interface that shows all screen information but not its exact layout and graphics.

161 Useful Non-graphical Wireframing tools: " - Balsamic (dedicated prototyping tool) " - Axure (dedicated prototyping tools) " - Protoshare (collaborative wireframing tool) " - Sketchow (Microsoft) " - Mockow (another collaborative wireframing tool - http://www.mockow.com) " - HTML (+ Javascript) " - Visio or Omnigrafe + PDF links " - Justinmind - http://www.justinmind.com/ " - HotGloo - http://www.hotgloo.com/

BRAINSTORM THEN SIMPLIFY

Brainstorming
(Diverge)
Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea Idea

Simplication
(Converge)

Solution Solution Solution Solution Solution Solution Solution Solution Solution

Initial Ideas

Solution

Time & Level of Detail

162

LEVEL OF DETAIL

Initial Wireframes:
Design is high-level (lots of boxes and dummy text) Focus on page concepts and information hierarchy Discuss overall page goals Briey explain complex interactions

After initial review:

Add best guess text and content Add initial design notes Simplify functionality

Final iteration:
Detailed design notes Error cases Templates noted

163

OUTPUTS OF PROTOTYPING

A wireframe page is typically created for every major functional screen within the interface Screens with varying content (templates) can be wireframed once and the wireframe can be assumed to be a template for other content screens. Detailed design notes are added before wireframes are nalized. These detail all interaction states and error cases.

164

WIREFRAMING TOOLS

Balsamiq HTML Microsoft PowerPoint / Google Present Microsoft Visio MockFlow OmniGrafe UXPin

165

INTERFACE DESIGN BEST PRACTICES

166

GENERAL ID GUIDELINES

Understand your users and their interaction design constraints Understand the benets and constraints of the delivery medium you are using Follow existing standards and best practices unless there is a good reason not to Use existing design patterns

167 Design constraints: " - How fast is the users computer " - What resolution are they running? " - Are users more expert or more novice or both? " - Is instructional text necessary? Benets of the Web medium: " - Users can go anywhere at any time " - Similar content can be linked together Constraints of the Web medium: " - Vast array of users, computers, connections, browsers and displays Platform Style Guides: " - Great resource for all platform Style Guides: " " http://www.experiencedynamics.com/science_of_usability/ui_style_guides/

SIMPLIFY
People

are busy. They want to accomplish their goal and get off of your site. look for ways to restructure the information and ow to simplify the user experience. overcomplicate the visual design (especially marketing and advertising). your efforts on making a limited set of tasks efcient, effortless and engaging.

Always

Dont

Focus

168

FOCUS ON KEY TASKS

The best way to simplify is to only create functionality that supports your key user tasks. Build the simplest solution then add to it based on user input. Focus your time on getting the highest priority tasks as close to perfect as possible.

169

DIGGING INTO THE DETAILS

So far youve been looking at design from the topdown. Your existing requirements and tasks are looking at the interface from a high level. Now its time to focus on the minute details of each screen For each task:

Device Management Status Power Status Connected Hosts Current Prole / Last Update Current Firmware / Last Update Last restart Last online time Last ofine time Grouping Groups and sub-groups Select All, Group, Sub-group Renaming Prex Prex + Group Name Prex + Group Name + Custom Discovery WAN vs. LAN vs. NAT Keep what exists in the MC now Steer towards new discovery method Discover by IP Discover by FQDN Persistent Prole Scheduled Automated renaming Power Power Off Power On Schedule by Group Messaging Ability to message group, sub-group of devices Scheduling Advanced scheduling options Actions: Update Prole Update Firmware Pair / Re-pair Reboot device Create prole from current settings Move to new group / ungroup View attached devices Send message Send Power Setting

Extract the specic goal for this task List all elds you know you need to show List all elds you know the user needs to see List all elds that the user can interact with List all the actions the user can do Organize your listed items by page

170

PAGE DESIGN

Each page should be a logical grouping of elds. High level pages are generally overviews and have a large numbers of elds Lower level pages generally have less elds and are more specic Overall strive to keep pages simple and focused!

For each page: Group the elds by common areas of the screen Prioritize the elds in logical order or by task priority Prioritize the areas of the screen Assign an approximate location and size to each screen area

Create pages for: All pages in the IA (of course only unique templates) All functional pages

171

PAGE DESIGN
Global Header Search & Filtering Device Actions

Device Management

Device Discovery

Global Footer

Complex sections of the page may need to be sub-sectioned

172

SECTION DESIGN

Sometimes useful to design the individual parts of a page on their own and then integrate all the sections together into the nal page layout. Dont worry about layout until you put the whole page together Translate your list of elds for this section into individual widgets

Use standard web widgets Use Lorem Ipsum (for now) for content

Organize the widgets logically within the section Once youve completed a section. Add it to the main page and repeat for all page sections.
Textual Search Endpoint name (default) IP address FQDN Prole Name Group or sub-group name

Endpoint name

is |

Search

173

MINIMIZE USER INPUT

Users hate to input anything A large amount of cognitive and physical work goes into completing even a single form element This is especially true in a mobile world

174

REMEMBER COGNITIVE CONSTRAINTS

Use

recognition as much as possible over recall the users memory load by using Millers Magic Number split the users attention. Visual cues should call attention to the most important tasks

Reduce

Dont

175

WHITE SPACE IS GOOD

Screens

with lots of whitespace look more professional, organized and easy to approach than those with little or no whitespace

176

CONTENT IS EXTREMELY IMPORTANT

Highlighted keywords Meaningful sub-headings (not "clever" ones) Bulleted lists One idea per paragraph The inverted pyramid style, starting with the conclusion Half the word count (or less) than conventional writing Scannable layout
More Details:
http://www.useit.com/alertbox/9710a.html

177

VISUAL DESIGN

Its the Visual Designers job to put aesthetics rst... but aesthetics can make an interface more difcult to use Often Visual Designers dont understand the medium they are designing for Designers often design thinking of themselves as the user More info:

http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/ http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

178 So you call yourself a visual designer? http://designreviver.com/articles/so-you-call-yourself-a-designer/

ERROR HANDLING

1. The error message should short but human readable and understandable 2. The error message should explain the problem and give possible solutions 3. The error message should provide a unique code for reference 4. The placement of the message should be associated with the eld 5. The message style needs to be separated from the style of the eld labels and instructions 6. The style of the error eld needs to be different than the normal eld
More information:
http://www.nomensa.com/blog/2010/4-rules-for-displaying-error-messages-from-a-user-experience-perspective/

179

WEBSITE DISCUSSION

180

NAVIGATION

181

TYPES OF NAVIGATION

Menu-based navigation Twisties Mega drop-downs Linear navigation (wizards) Search based navigation Task based navigation Bread-crumb trails

182

MENU-BASED NAVIGATION

183 Menu-Based Navigation: Should be very easy to design since it can be taken directly from the information architecture. Remember Millers Magic Number. Ensure that navigation looks visually like navigation to the user.

TWISTIES

Great

for encouraging progressive disclosure going more than two levels deep

Avoid

184

MEGA DROP-DOWNS

185

MENU DESIGN BEST PRACTICES

Menu

hierarchy comes directly form your Information Architecture should be ordered logically for the user

Menus

Alphabetically By usage Other logical orderings

Menu More

names should map directly the name of the page they refer to (known as natural mapping) than three levels of menus should rarely be used

186

LINEAR NAVIGATION (WIZARDS)

187

USING WIZARDS

Use for infrequent but complex tasks Minimize the number of steps but dont overwhelm the user Logically group the information collected at each step Provide an indication of how many steps and where the user is in the process Provide a Back option

188

SEARCHED BASED NAVIGATION

Useful for nding content within huge amounts of information Often where users go if they cant immediately nd what they are looking for within the IA Should work well but often does not. Ensure your page meta-information is strong.

189

TASK BASED NAVIGATION

With a fundamental understanding of the goals that the user will want to complete within the application, Task based navigation can provide an easy way for users to complete complex tasks. Task base navigation displays all possible goals to the user as a method of navigation.

190

FACETED BROWSE

191

BREAD-CRUMB TRAILS

Used to show the location the user is current in within (typically) a website. Levels within the navigation before this page are hyperlinked. Current page is never hyperlinked. Allows the user to understand the structure of the architecture. Allows the user to quickly jump back to a previous level of hierarchy if they make a mistake. Shows here you are not how you got here

192

WEB UI DESIGN

193

USE STANDARD WEB WIDGETS

Checkbox Radio Button

label ON

Drop-down Switch Text eld Text box

text enter text

Tabs Button

Featured Tab

Tab

Tab

Tab

Tab

Button

194 An extensive guide to form usability - http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

CHECKBOX VS. RADIO BUTTON

Singular choices. Multiple simultaneous options are never possible Radio buttons always include a default (meaning that no error checking is needed) Remember to visually group your radio buttons so its clear what is being chosen

195 From Googles Android Design Guidelines (2012) - http://developer.android.com/design/index.html

CHECKBOX VS. RADIO BUTTON

196

RADIO BUTTON VS. DROP-DOWN

Radio Drop

Buttons should be used for 2 to 7 options Downs should be used for more than 7 options

197

BUTTONS VS. LINKS

Buttons are generally used for actions and can have various states:

Primary Action Secondary Action Disabled Depressed Actioned

Links are generally used for navigation and can have various states:
Unvisited Pressed Actioned

198

COMBO BOX
Combine

the functionality of Drop Downs and Text Entry widgets into one understood but little used in the past

Powerful, well

199

WEB DESIGN BEST PRACTICES

Keep

the experience focused especially on lower level pages that the experience never ends

Ensure Dont

make users login until youve proved value social channels intelligently

Integrate

200

WEB DESIGN BEST PRACTICES

Put

important stuff at the top of the page that users will scroll

Assume

Dont

worry too much about the fold hyperlinking intelligently

Use

201

SESSION REVIEW
Introduction Design

to UI Design

patterns

Wireframing Interaction Web

Design

UI Design

202

COLLABORATIVE DESIGN EXERCISE

Well

work together to compile a list of features and content for the BC Liquor Store product page those feature and content into meaningful group sketch out some of your ideas on paper

Organize

Individually Then

well consolidate everyones ideas into a single design

203

USER EXPERIENCE DESIGN

MOBILE DESIGN AND TESTING THE INTERFACE

204

MOBILE DESIGN & TESTING

Mobile UI Design Mobile Best Practices Usability Testing Future Interfaces

205

MOBILE UI DESIGN

206

WHAT IS MOBILE?

207

WASTE TIME WHEN IM OUT

If something pops into my mind, I will look it up. I dont want to sit and stare at people, so i look at my phone.

208

WASTE TIME WHEN IM OUT

209

DOWNTIME AT HOME
When Im at home on the sofa I never get up to use my laptop, I use my phone.

I browse offers on my phone & then print them off from my laptop

210

DOWNTIME AT HOME

211

DOWNTIME AT HOME
When Im at home on the sofa I never get up to use my laptop, I use my phone.

I browse offers on my phone & then print them off from my laptop

212

TACKLING PROBLEMS ON-THE-GO

213

PART OF A ROUTINE

If I havent really used an app within a month, I delete it. I just counted, I have 183 apps...I only use 10 of them!

214

PART OF A ROUTINE

215

WHY SHOULD I CARE?

Why would I download an app that I am hardly going to use?

insights from webcredible mobile research study (UK, 2012)

216

WHY SHOULD I CARE?

217

IS MOBILE WORTH IT?

What problem is a mobile solution going to solve?

218

IS MOBILE WORTH IT?

219

WHAT IS THE VALUE PROPOSITION?

Optimized functionality? Save Time?

Avoiding Calling in?

Customer Value

Save Money?

Information when they need it?

Less Hassle? Provide a unique experience?

220

EXAMPLE: JAMIE OLIVERS RECIPES

221

HOW JAIMIE UNDERSTOOD HIS USERS &

CONTEXT OF USE
Cooks

that like step-by-step instructions are his biggest audience people are cooking, their hands are messy and they wont want to touch the screen to go to the next step

When

222

KNOW YOUR OS

223

APPLE IOS DESIGN GUIDELINES

224

NATIVE APP VS. MOBILE WEB

225

NATIVE APP VS. MOBILE WEB

Mobile apps currently have better usability than mobile sites, but forthcoming changes will eventually make a mobile site the superior strategy.
Jakob Nielsen - Feb 2012

http://www.useit.com/alertbox/mobile-sites-apps.html

226

NATIVE APP VS. MOBILE WEB

Native App
More responsive Follows native app
conventions

Mobile Web
Build once, run anywhere Better integration with
hyperlinks

Better integration with device

features

Easy deployment, no app

stores

More future proof

227

RESPONSIVE VS. TAILORED

228

RESPONSIVE DESIGN
Determine Determine Design Plan

information

absolutely critical nice-to-have information

for the worst case (smallest) scenario initially modularly

Then

plan out the best case (largest) scenario work out other possible layouts.

Finally

229

MOBILE BEST PRACTICES

230

FOCUS ON KEY TASKS

231

USEFUL TASKS, SHORTER PROCESS

232

DESIGN FOR SIMPLICITY

233

DESIGN FOR SIMPLICITY

Relate

visual precedence to task importance functionality navigation narrow and shallow

Reduce Keep

Avoid

extraneous information on each screen or remove preferences

Reduce

234

SMALL SCREEN LIMITATIONS

Minimize Minimize

user input vertical scrolling and avoid

horizontal scroll
User

hyperlinking effectively useful error messages the information on the

Provide

Prioritize

screen

235

RESPECT USER EFFORT

Design Plan

for efciency

a narrow and shallow information architecture to reduce mental effort when making decisions the number of preferences

Strive

Limit

236

FITTS LAW

Basically: the

bigger something is the easier it is for the user to target it.

237

USER INPUT
Agonize Text

over every user entry widget

entry is extremely difcult on mobile devices widgets are much easier than Recall widgets defaults whenever possible show optional elds

Recognition

Use

Never

238

PROVIDE USEFUL FEEDBACK

Identify Employ

critical feedback

alternative feedback modalities intelligently quick system response

Ensure

time

Be

very careful when using audio, LED or vibration feedback

239

SECURITY IS EVEN MORE IMPORTANT

240

WEBSITE REVIEW

241

MOBILE DESIGN WORKSHOP

Collectively decide which Liquor Store features make sense for mobile Work individually to paper prototype your UI ideas Work together to create a hybrid mobile UI

242

TESTING THE INTERFACE

243

WHERE ARE WE?

(IN THE INTERFACE DESIGN PROCESS)

244

INTERFACE EVALUATION WITHOUT USERS

245

WHY BOTHER?

A good, inexpensive way to catch problems before the interface is tested with users Helps ensure the interface is as bug-free as possible Dont use as a substitute for usability testing

246

HEURISTIC EVALUATION

A formalized test performed by a usability expert The evaluator looks at each page of the interface individually A checklist is applied to each page, where problems are found, they are noted and explained

247

ONLINE EVALUATION TOOLS

Accessibility Testing: A/B Testing:

http://wave.webaim.org/

http://verifyapp.com/

248

USABILITY TESTING
(INTERFACE TESTING WITH USERS)

249

WHAT IS A USABILITY TEST?

Simulates real users using real software in the real world Asks a single user to perform the most common tasks within an application (or wireframe or prototype) and records their problems The process is repeated for several users to provide more statistically meaningful feedback

250

WHY USABILITY TEST?

Easily determine user problems with the interactions design before the it is released Discovers design and feature ideas for future releases Increases the value of software by ensuring that it is usable The only real way to know that the software solves the problem it was designed to solve
251

WHEN TO TEST?
General At

rule is: Test early, Test often!

minimum before development starts and when development is wrapping up. did weekly usability tests (Usability Wednesday) in the last two months of development on their website at Tivo.com performed 20,000 User Studies Performed in 2010

Tivo

Google

252 Googles 20,000 User Studies in 2010 - http://www.youtube.com/watch?v=J5RZOU6vK4Q&feature=player_embedded#!

WHAT TO TEST?

Wireframes Pre production system Production system Existing competing software

253

ABOUT THE TASKS

Ensure tasks chosen are representative and real Choose tasks that are critical to the success of the application Tasks should be ordered by the logical ow that the user would take in the application Wording of tasks should not reect how they are accomplished within the interface task memory is important, retest the task again later in the test by rewording it

If

254

USABILITY METRICS
Its important to set your goals before beginning the test Success criteria should be set out for individual tasks:

Time to complete Efciency through steps of the process Allowable number of failed tasks

255

PREPARING FOR THE TEST

Lab Setup:
Wireframe / Prototype / Software setup Microphone / Camera setup

Pre-test / Post-test questionnaire Testing materials:

Tasks each on a single page Informed consent form Payment ready for participants

256 Tip: Its a great idea to run an internal team member (who is not intimate with the design) through the test before putting real participants through. This can uncover methodology, task or even software bugs.

ROLES WITHIN A USABILITY TEST

Single User (participant) Facilitator Recorder (Observers)

257 Facilitator: the only person who interacts with the participant. The facilitator sits with the user and is there to ensure that the user keeps on track, however the facilitator should never help the user through the task unless they are completely lost or stuck. Once the facilitator provides any help to the user on a task, the task is immediately failed. Recorder: Never seen by the user, the recorder is watching on a separate screen and recording problems that the user is encountering within the interface.

RECRUITING REAL USERS

Its

critical to get real users:

Within demographics of your actual users Within the expected experience level of your users No experience with your new interface

May use a recruitment agency most tests 8-10 users will be enough to nd at least 80% of problems. More will have diminishing returns.

For

258 Locally Ive had good success with Synovate as a recruiting agency 555 W 12 Ave. #600 604-664-2400 http://www.synovate.com/ They also have a good focus group room which includes one way glass, perfect for usability testing. Another option is: Consumer Research Centre http://consumerresearch.ca

LAB SETUP

259

INTRODUCING THE USER TO THE TEST

We are testing the interface and not you! Encourage talking out loud Encourage the user to read the tasks out loud Inform the user about Facilitator help Inform the user that they may quit at any time

260

RECORDING PROBLEMS
Things not to record: Things to record: User comments (if relevant) Users path through the software Where / how the user got lost Every action the user performs User problems Everything the user says Task completion time Facilitator help (if any)

261

CONCLUDING THE TEST

Post-test questionnaire General comments / questions / problems Facilitator and Recorder run through the test again without the user

262

SUMMARIZING THE RESULTS

User demographics # of tasks not completed per task (aka. success rate) Average time to complete per task (aka. task completion time) Ranked usability problems based on:

Occurrence of problem Severity of the problem

Proposed solutions to found problems

263

USABILITY TESTING OUTPUT

264 Example of a usability testing report. This is one page of the report explaining the most important usability issue found. Note the number of users who experienced the problem, the examples of where the problems occurred and the link to a video clip of a real user experiencing the problem.

TOOLS TO HELP WITH TESTING

In-person testing tools:

Morae (PC) Silverback (Mac)

Remote testing tools:

Adobe Acrobat Connect Loop 11 Usabilla

265 Morae: http://www.techsmith.com/morae.asp Silverback: http://silverbackapp.com/ Remote Usability Testing (+ Phone): http://www.adobe.ca/products/acrobatconnectpro/ Loop11: http://www.loop11.com/ Usabilla: http://usabilla.com/

USABILITY TESTING MOVIE EXAMPLE

266

OTHER USABILITY TOOLS

267 Feng-Gui: http://www.feng-gui.com/faq.htm Verify App: http://verifyapp.com/tour/click-test

USABILITY TESTING EXERCISE

Get into even numbered groups Determine a few key tasks youd like to test Take turns running each member of the group through a usability test of your existing assignment designs Integrate the feedback into your nal assignment wireframes

268

WHERE ARE WE?

(IN THE INTERFACE DESIGN PROCESS)

269

WITH THE SOFTWARE ENGINEERING LIFECYCLE

INTEGRATING THE USABILITY ENGINEERING LIFECYCLE

270

FUTURE TOPICS IN UI DESIGN

271

NOW & FUTURE INTERFACES

Task centred interfaces Language comprehension 3D interfaces Multi-touch Improved Hardware

272 Five Technologies That Will Transform Homes of the Future - http://arstechnica.com/business/the-networked-society/2012/03/the-vetechnologies-that-will-transform-homes-of-the-future.ars

TOUCH INTERFACES

273

WINDOWS 8

274

IMPROVED HARDWARE

275

AUGMENTED REALITY

276

MOVEMENT CONTROLLED INTERFACES

277 John Underkofer on the Future of UI Design - http://www.ted.com/talks/john_underkofer_drive_3d_data_with_a_gesture.html

LANGUAGE COMPREHENSION

278 Siris Big Brother from Google - http://www.cringely.com/2012/03/siris-big-brother-from-google/ Future of Voice Recognition - http://arstechnica.com/business/news/2012/03/future-of-voice-recognition-assistants-that-remember-everythingyou-say.ars

EVEN MORE INFORMATION

Associations:
VanUE IxDA Vancouver ACM SIG-CHI

Web

Smashing Magazine Boxes and Arrows Lots of useful links on the course website

Twitter:

Measuring usability (@MeasuringU) Web Usability @web_usability UX Magazine (@uxmag)

279

QUESTIONS...?

280

SESSION REVIEW

Mobile UI Design Mobile Best Practices Usability Testing Future Interfaces

281

THANK YOU!
Feedback, comments, questions

concerns about the course? Email me!

or

(chris@optimalinterfaces.com)

282