From Use to User Interface


Published on

From Use to User Interface- This 3-4 hour tutorial describes a practical approach to translating the goals users would like to achieve and the tasks they wish to accomplish into user interface designs that effectively support those goals and tasks.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • From Use to User Interface

    1. 1. Jeff Patton [email_address] Please join a work group of 4-6 people – thanks. from Use to User Interface Collaboratively designing and testing user interface that help your users succeed Copyright is held by the author/owner(s). OOPSLA 2007, October 21–25, 2007, Montréal, Québec, Canada. ACM 07/0010. from Use to User Interface
    2. 2. © Alistair Cockburn 2005-6 PEOPLE Learn Skills in a 3-stage Progression: Follow / Break Away / Achieve Fluency Level 1: following ( shu ) Learn “a technique that works” (Success = following the technique) Level 2: breaking away ( ha ) Learn limits of the technique Learn to shift between techniques Level 3: fluent ( ri ) Shift techniques at any moment Possibly unable to describe the shifts
    3. 3. We’ll be using a process miniature to explore and practice product design techniques <ul><li>We’ll practice each technique in an abbreviated manner </li></ul><ul><li>You’ll get just enough time to feel what the technique is like to practice – but not enough to practice it well </li></ul><ul><li>Practicing it well, takes… practice </li></ul><ul><li>Pay attention to what’s working and what’s troublesome for you about the technique </li></ul>
    4. 4. Section 1: Starting With Use <ul><li>13:30 – 15:00 </li></ul><ul><li>User Experience Distilled Using Garrett’s Elements Model </li></ul><ul><li>Exploring Use </li></ul><ul><ul><li>Elements of Use: User, Goal, Context </li></ul></ul><ul><ul><li>Use Cases, Task Models, User Scenarios </li></ul></ul><ul><li>The User Story </li></ul><ul><li>Identifying User Needs as Canonical Components </li></ul><ul><li>The Interaction Context & Component Placement </li></ul>
    5. 5. User Experience is Built From Dependent Layers <ul><li>Jesse James Garrett’s Elements of User Experience </li></ul>
    6. 6. The Surface Layer Describes Finished Visual Design Aspects Surface Skeleton Structure Scope Strategy
    7. 7. The Skeleton Describes Screen Layout and Functional Compartments in the Screen Surface Skeleton Structure Scope Strategy
    8. 8. Structure Defines Navigation from Place to Place in the User Interface task panes modal dialogs modal wizards Surface Skeleton Structure Scope Strategy
    9. 9. The Places in the User Interface are Built to Support User Tasks <ul><li>user tasks: </li></ul><ul><li>enter numbers </li></ul><ul><li>enter text </li></ul><ul><li>enter formulas </li></ul><ul><li>format cells </li></ul><ul><li>sort information </li></ul><ul><li>filter information </li></ul><ul><li>aggregate information </li></ul><ul><li>graph data </li></ul><ul><li>save data </li></ul><ul><li>import data </li></ul><ul><li>export data </li></ul><ul><li>print </li></ul><ul><li>….. </li></ul>Surface Skeleton Structure Scope Strategy
    10. 10. Business Goals Drive User Constituencies and Contexts Supported To Form Strategy <ul><li>business goals: </li></ul><ul><li>displace competitive products </li></ul><ul><li>motivate sale of other integrated products </li></ul><ul><li>establish file format as default information sharing format </li></ul><ul><li>… </li></ul><ul><li>user constituencies: </li></ul><ul><li>accountant </li></ul><ul><li>business planner </li></ul><ul><li>housewife </li></ul><ul><li>… </li></ul><ul><li>usage contexts: </li></ul><ul><li>office desktop </li></ul><ul><li>laptop on airplane </li></ul><ul><li>pda in car </li></ul><ul><li>… </li></ul>Surface Skeleton Structure Scope Strategy
    11. 11. Garret’s Elements of Ux Stack Applies to the User Experience of Other Complex Products <ul><li>These layers of concerns apply not only to software but a variety of products. </li></ul><ul><li>In particular, products that support a wide variety of user tasks benefit from this kind of thinking. </li></ul>
    12. 12. Let’s Look At a Product We All Use: The Place We Live <ul><li>goals: </li></ul><ul><li>live comfortably </li></ul><ul><li>eat well </li></ul><ul><li>stay clean </li></ul><ul><li>be healthy </li></ul><ul><li>keep up with Jones’s </li></ul><ul><li>… </li></ul><ul><li>user constituencies: </li></ul><ul><li>me </li></ul><ul><li>spouse </li></ul><ul><li>child </li></ul><ul><li>… </li></ul><ul><li>usage contexts: </li></ul><ul><li>suburban neighborhood </li></ul><ul><li>near good schools </li></ul><ul><li>near shopping </li></ul><ul><li>… </li></ul>Surface Skeleton Structure Scope Strategy
    13. 13. What might I do to reach my goals? <ul><li>user tasks: </li></ul><ul><li>store food </li></ul><ul><li>prepare food </li></ul><ul><li>eat food </li></ul><ul><li>sleep </li></ul><ul><li>bathe </li></ul><ul><li>store changes of clothing </li></ul><ul><li>stay out of rain </li></ul><ul><li>entertain guests </li></ul><ul><li>entertain self </li></ul><ul><li>… </li></ul>Surface Skeleton Structure Scope Strategy
    14. 14. Arranging tasks by affinity allows me to think about contexts that best support tasks. Contexts in a home have common names we all know. Surface Skeleton Structure Scope Strategy
    15. 15. When designing a particular interaction context – a kitchen for instance – I optimize layout and tool choices to support tasks I’ll do there. Surface Skeleton Structure Scope Strategy
    16. 16. I’m going to spend a lot of time here, I want my experience to be as pleasant as possible… Surface Skeleton Structure Scope Strategy
    17. 17. Understanding the relationship between goals, tasks, & tools is critical Software Product Goals Tasks Tools Features one or more users engaged in many tasks in support of a common high level goal is often referred to as workpractice Surface Skeleton Structure Scope Strategy
    18. 18. Garrett’s model provides helpful guidance for tool builders Goals Tasks Tools <ul><li>Business Goals </li></ul><ul><li>User Model with User Goals </li></ul><ul><li>Architectural Goals Based On Context of Use </li></ul><ul><li>User Tasks & Activities, or Use Cases </li></ul><ul><li>Technology Independent </li></ul><ul><li>Navigation Map </li></ul><ul><li>Page Wireframes </li></ul><ul><li>UI Design Guidelines </li></ul>Surface Skeleton Structure Scope Strategy
    19. 19. Today we’ll place our focus on tool-building: the structure, skeleton, & surface User Interface Prototyping Activities Surface Skeleton Structure Scope Strategy
    20. 20. Getting started with a UI design problem <ul><li>Read the Barney’s Information Kiosk problem on pages 35-36 </li></ul><ul><li>Begin thinking about: </li></ul><ul><ul><li>Business goals </li></ul></ul><ul><ul><li>Users and their goals </li></ul></ul><ul><ul><li>The types of user tasks users would likely choose to reach their goals </li></ul></ul><ul><ul><li>A kiosk tool that might support those tasks </li></ul></ul><ul><ul><li>(5 minutes) </li></ul></ul><ul><li>As a workgroup discuss the users, goals, and most likely tasks performed on the kiosk </li></ul><ul><ul><li>Try to talk about tasks without talking about the kiosk (tool) – this can be difficult </li></ul></ul><ul><ul><li>(5 minutes) </li></ul></ul>Barney’s
    21. 21. To design a tool, we first need to understand use – the preceding layer <ul><li>Elements of Use: </li></ul><ul><li>A Type of User </li></ul><ul><ul><li>Actor </li></ul></ul><ul><ul><li>User Role </li></ul></ul><ul><ul><li>User Profile </li></ul></ul><ul><ul><li>User Persona </li></ul></ul><ul><li>User Goal </li></ul><ul><ul><li>If I as a user accomplish this goal, I’ll consider myself successful. </li></ul></ul><ul><ul><li>Look for goals that motivate the use of software </li></ul></ul><ul><li>Context of Use </li></ul><ul><ul><li>Where and when will I be when I’m trying to accomplish this goal? </li></ul></ul><ul><ul><li>What other activities might I be engaged in when I attempt this goal? </li></ul></ul>
    22. 22. Modeling Use <ul><li>Various types of models are used to capture what we understand about users engaged in tasks in pursuit of a goal. </li></ul><ul><ul><li>Workflow Model </li></ul></ul><ul><ul><li>Use Case </li></ul></ul><ul><ul><li>User Task Model </li></ul></ul><ul><ul><li>User Scenario </li></ul></ul><ul><ul><li>User Story </li></ul></ul>
    23. 23. User Interface Designers Often Use “User Tasks” to Describe What People Do <ul><li>Tasks require intentional action on behalf of a tool’s user </li></ul><ul><li>Tasks have an objective that can be completed </li></ul><ul><li>Tasks decompose into smaller tasks </li></ul><ul><li>Activities are used to describe a broader goal, one that might use many tasks, any may or may not ever be completed. </li></ul><ul><li>“ Read an email message” is a task, “Managing email” is an activity. </li></ul>activity task task task task task
    24. 24. Use Cockburn’s goal level to understand the abstraction level of a user task Start to think about user interface design at sea level or above. * from Cockburn’s Writing Effective Use Cases
    25. 25. A Agile User Story Might Model Use... It’s Easier to Design User Interface if it Does <ul><li>Originally eXtreme Programming described a user story as a small amount of text written on an index card to function as a reminder for a conversation between developer and customer. </li></ul><ul><li>From Wikipedia: </li></ul><ul><ul><li>“ A user story is a software system requirement formulated as one or two sentences in the everyday language of the user.” </li></ul></ul><ul><li>The user story form credited to Rachel Davies in Cohn’s User Stories Applied combines user, task, and goal: </li></ul>[achieve some goal ] so that I can [perform some task ] I want to [type of user ] As a purchase it quickly, leave, and continue with my day. so that I can locate a specific CD in the store I want to harried shopper As a
    26. 26. User stories may describe user tasks or the tool that supports them User Story Software Product Goals Tasks Tools More task-centric : More tool-centric : locate a specific CD in the store I want to harried shopper As a enter a CD title into the search box and initiate a search I want to harried shopper As a
    27. 27. Favor user task-centric stories to base UI design on <ul><li>Especially during early scoping and release planning project stages </li></ul><ul><li>Especially before prototyping and testing proposed user interfaces </li></ul><ul><li>Be prepared to split task-centric user stories as necessary to: </li></ul><ul><ul><li>defer expensive-to-implement user interactions for future release. </li></ul></ul><ul><ul><li>to break up large user interface construction into more manageable pieces. </li></ul></ul><ul><li>Stories may become more tool-centric over time, and closer to development time </li></ul><ul><li>Defer tool-centricity to the latest responsible moment </li></ul>
    28. 28. Constantine & Lockwood’s Essential Use Case or “Task Case” is an easy way to begin to describe tool use <ul><li>A use case focusing on the interaction between user and system </li></ul><ul><li>Avoid describing what the user specifically does by focusing on the user’s intention </li></ul><ul><li>Determine the system responsibilities based on user goals and expectations </li></ul>System response System response Step one Step two System Responsibility User Intention
    29. 29. Activity: Write an Essential Use Case <ul><li>Review the business problem from your handouts (4-5 minutes) </li></ul><ul><li>As a team, using supplies on the table, write an essential use case for: </li></ul><ul><ul><li>User: Casual Browser </li></ul></ul><ul><ul><li>Task: Find most current release for a particular artist </li></ul></ul><ul><ul><li>As a casual browser </li></ul></ul><ul><ul><li>I want to find the most current release for a particular artist </li></ul></ul><ul><ul><li>so that I can get more information to make a buying decision. </li></ul></ul><ul><ul><li>(10 minutes) </li></ul></ul>
    30. 30. Begin to envision a solution by writing a user scenario <ul><li>A user scenario tells a story about a main character with a problem or goal </li></ul><ul><li>The scenario describes how our character reaches their goal using the proposed product </li></ul><ul><li>The scenario includes important facts, external context important to use, and goals and concerns of our character </li></ul><ul><li>The scenario should include interesting plot points that help us envision the more important aspects of the system </li></ul><ul><li>The scenario can gloss over uninteresting details </li></ul>
    31. 31. User scenario: Field Manager enters daily shift performance reports <ul><li>Field Manager’s Scenario </li></ul><ul><li>The shift has just ended and his reps are coming up with their totals. They have printed sheets with totals written on them. Steve quickly looks them over and signs them off. His assistant manager brings him other sheets with totals he’s signed off. </li></ul><ul><li>In between visits by reps, Steve opens his Field Manager Workbench on his laptop. After logging in he sees today’s date and the planned number of applications his reps should be gathering – 180 for today. </li></ul><ul><li>He also sees yesterday’s numbers, and last week’s numbers, and the last 30 days in graph that shows applications relative to approval rate. Last week’s numbers were bad, and it’s the last week of the month, so Steve knows he’s got to do well today. </li></ul><ul><li>Steve clicks “enter rep performance data.” He shuffles his reps performance sheets and grabs the first one. </li></ul><ul><li>The date is defaulted to today, and the shift is defaulted to ‘morning’ since he hasn’t yet entered info for today. Steve begins to enter the reps name, but after a few characters the system auto-completes his name. </li></ul><ul><li>The rep’s ID is already filled in, along with the code for the credit card promotion they’re working on today. </li></ul><ul><li>Steve fills in the shift information for his rep. He then enters the total number of applications taken. </li></ul><ul><li>It looks like from the notes on this sheet that this rep left sick two hours early. Steve adds a note about this in the system. </li></ul><ul><li>Time passes as more reps bring in their sheets and Steve completes entering them in between conversations. </li></ul><ul><li>After all the sheets are done, Steve looks at a summary screen for the day. It looks like he’s close to his goal. If the next shift continues at this rate he’ll beat the plan by 5% or so. That’s good. </li></ul><ul><li>Steve validates that the base pay is correct at $5 per app, and that he’s set an individual bonus giving reps $50 each if they reach 20 apps. Next to each rep he sees the calculated pay, base, bonus, and total pay for the day. </li></ul><ul><li>The annual sale at Macy’s has brought a lot of people in today. Steve chooses a “sale increases mall foot traffic” code to add to his shift data sheet. Frank, his boss, has pestered him to make sure he includes this type of information in his daily summaries. </li></ul><ul><li>Steven </li></ul><ul><li>Credit Card Marketing Field Manager </li></ul><ul><li>Steven is a field manager working at the local shopping center. He’s in the middle of a long workday supervising 13 reps who are busy talking to people trying to convince them to apply for a credit card. </li></ul>
    32. 32. Leveraging your task workflow model, write a user scenario for your focal user <ul><li>Begin to think of a kiosk that will make the life of your focal user better </li></ul><ul><li>Tell a story of typical use </li></ul><ul><li>Include interesting plot points </li></ul><ul><li>Include goals and pains of your user </li></ul><ul><li>Describe how the system helps the user overcome problems or achieve goals </li></ul>
    33. 33. Identifying UI tools that allow the system to meet its responsibilities to its user as abstract UI components <ul><li>For each system responsibility, what sort of tool will the system need to offer to meet that responsibility to the user? </li></ul><ul><li>Preliminarily decide on tools as abstract components. </li></ul><ul><ul><li>An abstract component (describe by Larry Constantine) refers to a general type of component with a certain responsibility </li></ul></ul>Container : contains and presents information. Action : allows execution of an action. Actionable Container : contains and presents information and allows the information to be acted on through selection or manipulation.
    34. 34. Exercise: Identify the abstract components in your essential use case <ul><li>Using post-it notes, identify abstract components to support your essential use case, and the essential use case in your handouts. </li></ul><ul><li>Give each component a descriptive name that suggests its responsibility. </li></ul><ul><li>(10 minutes) </li></ul>Selectable List
    35. 35. Interaction Contexts Gather Tools to Support Tasks <ul><li>An Interaction Context is an abstract “place” in your software that supports a number of tasks. </li></ul><ul><li>When the goal of a user changes, it’s grounds for an interaction context change. </li></ul><ul><li>For our design problem possible contexts might be: </li></ul>Starting Point: give the user a clear starting point for starting a search for titles in the store. Search Return: Evaluation: help the user decide if the searched for items were the items she was looking for or an easy way to reinitiate the search if not. Also aid in the quick decision to buy any successfully found item.
    36. 36. Exercise: Build Up Interaction Contexts <ul><li>As a group decide on and name your interaction contexts. </li></ul><ul><li>Use a name that suggests the type of tasks the context supports. </li></ul><ul><li>For each interaction context set aside a sheet of paper or card stock. </li></ul><ul><li>Relocate your post-it note abstract components to each context. If components belong in more than one context, write more post-it notes. </li></ul><ul><li>(10 minutes) </li></ul>
    37. 37. From Use to User Interface Jeff Patton [email_address]
    38. 38. Section 2: Designing & Validating For Use <ul><li>15:30 – 17:00 </li></ul><ul><li>Building a Paper UI Prototype </li></ul><ul><li>Testing the Paper Prototype </li></ul><ul><li>Usability vs. Visual Design </li></ul><ul><li>Williams’ Simple Visual Design Heuristics </li></ul>
    39. 39. Paper Prototyping Basics <ul><li>Tools </li></ul><ul><ul><li>Card Stock (use for screen backgrounds and cut up for components) </li></ul></ul><ul><ul><li>Index Cards (lined cards make great lists) </li></ul></ul><ul><ul><li>Scissors or Xacto knife </li></ul></ul><ul><ul><li>Cello tape </li></ul></ul><ul><ul><li>Repositionable tape </li></ul></ul><ul><ul><li>Pencils </li></ul></ul><ul><ul><li>Sharp felt tip pens </li></ul></ul><ul><ul><li>Transparency film (great to write on) </li></ul></ul><ul><li>Team approach </li></ul><ul><ul><li>Someone direct traffic </li></ul></ul><ul><ul><li>Various people build components </li></ul></ul><ul><ul><li>Someone assemble the user interface from the components </li></ul></ul><ul><ul><li>Someone continuously review what’s being assembled against your use case – will it work? </li></ul></ul>
    40. 40. Paper Prototyping Kit Demonstration
    41. 41. Finished prototypes are pieced together from moveable and removable paper components
    42. 42. Exercise: Build Your Prototype <ul><li>As a team within the short time-box, build your prototype to support the two user stories: </li></ul><ul><ul><li>As a casual browser </li></ul></ul><ul><ul><li>I want to find the most current release for a particular artist </li></ul></ul><ul><ul><li>-and- </li></ul></ul><ul><ul><li>As an impatient buyer </li></ul></ul><ul><ul><li>I want to find the location of a specific CD quickly </li></ul></ul><ul><li>Suggestions: </li></ul><ul><ul><li>One or more people build components </li></ul></ul><ul><ul><li>One or more assemble the prototype using the components </li></ul></ul><ul><ul><li>Someone use the task cases to validate the UI supports these user stories </li></ul></ul><ul><li>(15 minutes) </li></ul>
    43. 43. Preparing to Testing Your Paper Prototype <ul><li>Identify test subjects </li></ul><ul><ul><li>Should match the characteristics and skills of our your target user constituencies </li></ul></ul><ul><ul><li>Actual end users or stand-ins </li></ul></ul><ul><li>Identify tasks to test </li></ul><ul><li>Assemble your test team </li></ul><ul><ul><li>facilitator </li></ul></ul><ul><ul><li>computer </li></ul></ul><ul><ul><li>observers </li></ul></ul><ul><li>Coach the test team on the testing personalities: </li></ul><ul><ul><li>flight attendant </li></ul></ul><ul><ul><li>sports caster </li></ul></ul><ul><ul><li>scientist </li></ul></ul><ul><li>Decide on test approach – single or paired subjects </li></ul><ul><li>Setup your testing facility </li></ul>
    44. 44. Run Your Usability Test <ul><li>Facilitator introduces the team. </li></ul><ul><li>Facilitator introduces tasks to perform and goals, then invites test participants to “think out loud” and begin. </li></ul><ul><li>Facilitator plays sports-caster; keeps subject talking, narrating when necessary. </li></ul><ul><li>Observers record data – use post-it notes to make downstream analysis move faster. </li></ul><ul><li>When the test is complete observers may ask test participants questions. </li></ul><ul><li>Thank test participants. </li></ul><ul><li>Consolidate data. </li></ul><ul><ul><li>How many issues did you detect? Consider issues as items you’d change. </li></ul></ul>
    45. 45. Testing In Action
    46. 46. Exercise: Test Your Paper Prototype <ul><li>(10 minutes) </li></ul><ul><ul><li>casual browser, find the most current release for a particular artist </li></ul></ul><ul><ul><li>-and- </li></ul></ul><ul><ul><li>impatient buyer, find the location of a specific CD quickly </li></ul></ul><ul><li>Facilitator introduces the team. </li></ul><ul><li>Facilitator introduces tasks to perform and goals, then invites test participants to “think out loud” and begin. </li></ul><ul><li>Facilitator plays sports-caster; keeps subject talking, narrating when necessary. </li></ul><ul><li>Observers record data – use post-it notes to make downstream analysis move faster. </li></ul><ul><li>When the test is complete observers may ask test participants questions. </li></ul><ul><li>Thank test participants. </li></ul><ul><li>Consolidate data. </li></ul><ul><ul><li>How many issues did you detect? Consider issues as items you’d change. </li></ul></ul>
    47. 47. Exercise: Fix Issues <ul><li>As a team decide on which of the issues you discovered to fix. </li></ul><ul><li>Adjust your prototype to prepare for you next test. </li></ul><ul><li>(10 minutes) </li></ul>
    48. 48. Exercise: Re-test Your Prototype <ul><li>(10 minutes) </li></ul><ul><ul><li>casual browser, find the most current release for a particular artist </li></ul></ul><ul><ul><li>-and- </li></ul></ul><ul><ul><li>impatient buyer, find the location of a specific CD quickly </li></ul></ul><ul><li>Facilitator introduces the team. </li></ul><ul><li>Facilitator introduces tasks to perform and goals, then invites test participants to “think out loud” and begin. </li></ul><ul><li>Facilitator plays sports-caster keeps subject talking, narrating when necessary. </li></ul><ul><li>Observers record data – use post-it notes to make downstream analysis move faster. </li></ul><ul><li>When the test is complete observers may ask test participants questions. </li></ul><ul><li>Thank test participants. </li></ul><ul><li>Consolidate data. </li></ul><ul><ul><li>How many issues did you detect? Consider issues as items you’d change. </li></ul></ul>
    49. 49. This isn’t just the right way to test, it’s RITE <ul><li>Traditional usability testing focuses on: </li></ul><ul><ul><li>Identifying repeatable user misteps errors </li></ul></ul><ul><ul><li>UI concerns that may make the software difficult to learn, or learned behavior hard to maintain </li></ul></ul><ul><ul><li>Reporting those errors back along with suggestions for correcting problems </li></ul></ul><ul><li>The RITE method: Rapid Iterative Testing and Evaluation </li></ul><ul><ul><li>First documented by Microsoft (Medlock, Wixon, Terrano, Romero, and Fulton) </li></ul></ul><ul><ul><li>Rather than focusing on number of errors identified, emphasize number of errors fixed </li></ul></ul><ul><ul><li>Required the capability to correct errors between iterative tests </li></ul></ul><ul><ul><li>For higher-fidelity prototypes or working code, this requires developer participation </li></ul></ul>
    50. 50. Unraveling Usability Concerns From Visual Design Concerns <ul><li>Usability is a measured characteristic of your software. </li></ul><ul><li>Typical usability tests measure: </li></ul><ul><ul><li>Task completion frequency </li></ul></ul><ul><ul><li>Task completion time </li></ul></ul><ul><ul><li>Errors or mis-steps </li></ul></ul><ul><li>Professionals [and novices] can give their subjective evaluation on usability, but you can’t really be sure until you test [or ship]. </li></ul><ul><li>Paper Prototype usability testing helps identify usability issues before the software is built. </li></ul><ul><li>Visual design adds look and feel that may affect usability. </li></ul><ul><li>Don’t assume those skilled at visual design are also skilled at usability. </li></ul>
    51. 51. Layer in user interface concerns – like a layer cake <ul><li>Start with usefulness: </li></ul><ul><ul><li>Utility first </li></ul></ul><ul><ul><li>Usability second </li></ul></ul><ul><ul><li>Follow on with design esthetics </li></ul></ul><ul><li>Defer user stories about design esthetics until after the software is useful </li></ul>utility (does the software offer functionality to support my goals?) usability (can that functionality easily learned, and effectively used?) design esthetics (is the software fun, pleasant, exciting – what is my emotional response?) usefulness
    52. 52. Test First – Building Confidence into Software Development <ul><li>Agile development’s test-first technique doesn’t just apply to code. </li></ul><ul><li>Use paper prototyping and usability testing to validate that your user interface requirements are accurate and the software you intend to build can be effectively used. </li></ul><ul><li>Iteration and testing of user interface using low-fidelity prototyping is faster than working code. </li></ul><ul><li>Iterate to learn in the fastest medium available </li></ul>
    53. 53. William’s 4 Basic Design Principles Visual Design Basics Robin Williams’ The Non-Designer’s Design Book
    54. 54. Good Visual Design Observes 4 Simple Principles <ul><li>Learn the principles </li></ul><ul><li>Recognize when you are and aren’t using them </li></ul><ul><li>Apply them to help users achieve their goals </li></ul>C R A P Contrast Repetition Alignment Proximity
    55. 55. Proximity <ul><li>Proximity communicates affinity – distance communicates lack of affinity. </li></ul><ul><li>Group related items together. </li></ul><ul><li>“ Clumps” of items can feel like one item. </li></ul>
    56. 56. Alignment <ul><li>Alignment communicates association </li></ul><ul><li>Nothing should be placed on the screen arbitrarily. Every item should have a connection with something else on the screen – after all if it’s on the same screen it’s associated. </li></ul><ul><li>3 Horizontal Alignments: Left Center Right </li></ul><ul><ul><li>Center alignments are visually the weakest </li></ul></ul>
    57. 57. Repetition <ul><li>Repeated elements blend in. </li></ul><ul><li>Repeat some aspects of the design throughout the entire application. </li></ul><ul><li>Repetition can be thought of as consistency. Appropriate repetition makes the application appear cohesive. </li></ul><ul><li>Elements that repeat each page become static – or “visually persistent.” As users move from place to place in your software, they need only observe what’s changed. </li></ul>
    58. 58. Contrast <ul><li>Contrast communicates importance. </li></ul><ul><li>Use contrast to focus the users attention, to guide him/her through the application. </li></ul><ul><li>Contrast, or don’t. If two items are not exactly the same, make them different – really different. Subtle difference isn’t contrast, it’s perceived by users as tension in the screen and often looks like a mistake. </li></ul>
    59. 64. From Use to User Interface Jeff Patton [email_address]
    60. 65. User Experience Words <ul><li>User Centered Design </li></ul><ul><ul><li>refers to a class of methodologies where design decisions are based on some tangible user model. That user model must be based on the research of the users of the application. </li></ul></ul><ul><li>Interaction Design </li></ul><ul><ul><li>refers to the specific choices of user interactions we make to allow users to meet their goals in the software. Interaction Designers are generally User Centered Designers. </li></ul></ul><ul><li>Visual Design </li></ul><ul><ul><li>refers to the design of the visual appearance of software, advertising, or other commercial products. Visual Design focuses a bit more on esthetics. Visual Designers are often NOT User Centered Designers. </li></ul></ul>
    61. 66. User Experience Words <ul><li>Usability </li></ul><ul><ul><li>Usability refers to the ability of a specific type of user to be able to effectively carry out a task using a product. </li></ul></ul><ul><ul><li>Usability is usually measured through testing. Given a number of test subjects that reflect the type of user that will use the application: </li></ul></ul><ul><ul><ul><li>how many successfully complete a task. </li></ul></ul></ul><ul><ul><ul><li>on average how quickly do they complete that task. </li></ul></ul></ul><ul><ul><ul><li>on average how many user errors are made while attempting to complete that task. </li></ul></ul></ul><ul><li>Usability Engineering </li></ul><ul><ul><li>refers to the practice of usability. Usability Engineers often have much in common with testers. While they may design the user interface, often their emphasis is on evaluating the user interface and making recommendations for improvement. Usability Engineers are generally User Centered, but they may not be Designers. </li></ul></ul>
    62. 67. User Experience Words <ul><li>Information Architecture </li></ul><ul><ul><li>refers to the structuring of information so that it best supports the consumption by its target users. An IA professional is often considered a counterpart to an Interaction Designer where Interaction Designers focus on how people use computers to accomplish work, and Information Architects focus on how people leverage information to support goals. </li></ul></ul><ul><li>HCI or CHI </li></ul><ul><ul><li>Human-Computer, or Computer-Human interaction refers to the study of how humans and computers interact. An HCI professional may be a researcher, a designer, a psychologist, or anyone who might focus on human-computer interaction as part of their work or study. </li></ul></ul>
    63. 68. User Experience Words <ul><li>User Experience </li></ul><ul><ul><li>refers to the overall experience a user has with a product. This experience doesn’t stop at the use of the product but starts with the advertising and presenting of the brand through the purchase to the use and the day-to-day feeling the user carries with them about the product. </li></ul></ul><ul><li>User Experience Professional </li></ul><ul><ul><li>may refer to any of the roles already discussed. Someone whose day-to-day practice focuses on improving some or all aspects of user experience. </li></ul></ul><ul><ul><li>We are all directly or indirectly User Experience Practitioners… how professional we are at it may be up for discussion. </li></ul></ul>
    64. 69. Usability Refers To The Ability of a User To Effectively Execute A Task Using a Tool <ul><li>While Visual Design certainly can affect usability, it’s quite possible for a product to have pleasing visual design, but intolerable usability. </li></ul>Don Norman’s The Design of Everyday Things
    65. 70. Nielsen’s 10 Usability Heuristics <ul><li>Visibility of system status (keep the user informed) </li></ul><ul><ul><li>Be forthcoming - don’t hide information </li></ul></ul><ul><li>Match between system and real world (user language and real world conventions) </li></ul><ul><ul><li>Watch your language </li></ul></ul><ul><li>User control and freedom (easy exits, undo and redo) </li></ul><ul><ul><li>padded corners, hand rails, and safety nets </li></ul></ul><ul><li>Consistency and standards </li></ul><ul><ul><li>same thing the same way </li></ul></ul><ul><li>Error prevention </li></ul><ul><li>Recognition rather than recall (reduce remembering with visible options, actions, and instructions) </li></ul><ul><li>Flexibility and efficiency of use (customization and support for advanced users) </li></ul><ul><li>Aesthetic and minimalist design (reduce irrelevant or rarely needed information) </li></ul><ul><li>Help in recognizing, diagnosing, and recovering from errors </li></ul><ul><li>Good help and documentation </li></ul>Jakob Nielsen’s Usability Engineering
    66. 71. From Use to User Interface Jeff Patton [email_address]