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

1. Creating Great User Experiences:The View from 10,000 feet Lynn Wadsworth, Enterprise Architect – User Experience April 2012

2. Why User Experience? • Interactive service delivery: not a one-way static experience • Quality of interaction can make or break a website or web application. • When a system is designed for the user (vsthe maker or a “business owner”) it is often a very different experience.

3. What is User Experience? User Experience Names and Practices • UX – User Experience • User-Centered Design • Experience Design • Human Factors • HCI – Human Computer Interaction • Usability Testing • Interface Design • Information Architecture • Interaction Design • Visual Design

4. What is User Experience ? “True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.” —Nielsen Norman Group “User-centered design means understanding what your users need, how they think, and how they behave - and incorporating that understanding into every aspect of your process.” —Jesse J. Garrett

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

6. The Iceberg Analogy of Usability • Top 10% - Visual cues, feedback and esthetics or “The Look” • Visual cues, i.e. the three-dimensional look of push buttons in traditional interfaces is a cue that says "push me." • Feedback provides acknowledgement to the user that a request is being acted upon, i.e. confirmation messages. • Esthetics includes all of the aspects that create subjective appeal, i.e. the use of color, line styles, and typography.

7. The Iceberg Analogy of Usability • 30% - Interaction Design or “The Feel” • This is how a user interacts with the system tools, i.e. keyboard mappings, mouse button mappings, menu structures, shortcuts, and interface navigation conventions. • Taken together, “the look and feel” of an interface is analogous to the syntax of a language.

8. The Iceberg Analogy • 60% - User’s “Mental Model,” i.e. tasks, goals, behavior, expectations • A mental model is a set of beliefs about how a system works. Humans interact with systems based on these beliefs. (Norman, 1988) • The point is not that the look and feel are not important, but rather that if you do not get the 60% right, you have little chance of getting the other 40% even close to right.

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

10. User Centered Design • Identify users and understand their goals, motivations, behaviors • Design relevant solutions based on users’ needs, and desires. Peter Morville’s UX Honeycomb illustrates six basic elements of user experience.

11. User Experience in Action Research We learn about the people who will use the design: what they do, how they work, where they work, and what they care about. Design We use what we know about the users to make design decisions. We design systems that make sense for the user. Evaluation We test designs with users to discover what the design is doing right and what can be done to make it better.

12. Research • Research Goals • Understand users • Understand user tasks • What is important to the user? • User’s mental model (how the user thinks about their work/task) • Research Activities • Contextual inquiry, field research • Interviews • Task analysis • Personas • Surveys • Competitive Analysis

13. Student Feedback on “Dashboard” • Extended interviews with students at SCSU • 25 interviews at MSCSA Conference • Link to optional survey, 300 responses

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

15. Simple Research Activities • Understand your users’ needs and behaviors • Create personas • Conduct simple surveys • Use paper prototypes • Interviews

16. Design • Design Goals • Create and describe elegant solutions that meet business objectives and user needs • Design Activities • Information architecture • Navigation • Storyboards • Detailed descriptions of screen elements • Detailed descriptions of screen behaviors • Widgets, icons, controls, etc. • Visual design • Interactive design • Functioning prototype

17. User-Centered Design Principles adapted from Whitney Hess, Guiding Principles for Experience Design • Stay out of people’s way • Make things efficient • Use appropriate defaults • Prevent errors when possible • Make actions reversible

18. User-Centered Design Principlesadapted from Whitney Hess, Guiding Principles for Experience Design • Less is more – everything must have a purpose • Present few choices and limit distractions • Group related objects near each other • Create a visual hierarchy that matches the users needs • Use consistent interface elements and patterns

19. User-Centered Design Principlesadapted from Whitney Hess, Guiding Principles for Experience Design • Provide Context • Put related communication together • Provide a strong information scent, signposts, and ques • Avoid jargon • Be Responsive • Respond quickly • Provide feedback • Use emotion • Be credible and trustworthy

20. User-Centered Design Principlesadapted from Whitney Hess, Guiding Principles for Experience Design • Provide useful content - upfront http://www.dmolsen.com/mobile-in-higher-ed/2011/02/07/the-university-home-page-mobile-first/

21. Vision for MNSCU Student User Experience Usability Goals Student VoiceInterface Guidelines Easy to Learn “I understood what to do right away. I completed my application in no time – no problem.” The interface will use familiar, web-based conventions for information display, navigation, and task patterns. Easy to Remember “I always know where to go on the MNSCU website, everything just makes sense.” The interface will act consistently across functions, departments, and institutions, creating a seamless experience for students. Fast and Efficient “I can do everything for school online, it is convenient and available when I want to use it.” The interface will respond quickly 24/7 and not require students to navigate through unnecessary information to complete their tasks. Satisfied Users “MNSCU really understands students like me. They will help me succeed.” The interface will inspire confidence and demonstrate value by remembering the student’s previous visits and present individualized information in a relevant, professional, and up-to-date manner.

22. Home Page Project Design Goals • One stop shop for critical, contextual, and actionable information • Familiar web-based metaphors and patterns • Flexible, expandable, and useable presentation framework • Mobile friendly • Replace the current MnSCU eServices home page

23. One stop shop… Critical, Contextual, and Actionable information

24. User Experience Design Challenges: • Overwhelming amount of information • Indicate priority information, create visual hierarchy • Minimize visual confusion • New look and feel • Up to date – web • Professional • Design must translate for interior pages, mobile • Wide variety of school brands and brand colors • Neutral grays and one other color (gold) as a compatible pairing. The gold is from the MnSCU logo.

27. Simple Design Activities • Use what you know to build solutions for your users • Wire frames • Task flows • Design comps • Prototypes

28. Evaluation • Evaluation Goals • Measuring the quality of auser’s experience • Ease of learning for new usersand memorability for repeat users • Efficiency of use for experienced users • Error frequency and severity • Satisfaction: Does the user like using the system? • Evaluation Activities • Usability inspections • Usability testing • Surveys (satisfaction)

29. Simple Evaluation Activities • Measure your solutions using actual users • Guerilla testing

30. User Experience Adds Value • Improved system quality • Increased trust in systems • Improved productivity • Reduced training costs • Reduced costs for development, maintenance, and support • Reduced development time • Saved redesign costs • Satisfied customers • Better brand image • Wider adoption

31. Some Resources http://www.usability.gov/ Usability.gov is a one-stop source for government web designers to learn how to make websites more usable, useful, and accessible http://www.upassoc.org/ The UPA supports people who research, design, and evaluate the user experience of products and services http://www.boxesandarrows.com/ Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business http://www.lukew.com/ LukeW is an internationally recognized digital product leader who has designed or contributed to software used by more than 700 million people worldwide

32. Thank you! • Questions?