Designing the User Experience

Transcription

1 Designing the User Experience Tips & Techniques for Quick and Cheap UX Design Ray Vadnais User Experience Architect Academic Web Technologies University of California, Irvine

2 What I do User Experience Architect - UX and UI design for: EEE: UCI s course management system UC Recruit: The UC s academic employee recruitment management system

3 Why should I care about UX? You want people to... Use your app Want to use your app Tell others about your app But you also want to... Make sure you re developing something people need Make the best use of the limited time you have

4 What s involved in UX? Image from

5 What we ll focus on today What people want & how they will use your app Requirements gathering User stories Storyboarding Wireframes Testing

6 Requirements Gathering Stakeholder interviews: Talk to your users! Figure out what they need (both spoken and unspoken) Competitive analysis: What else is out there? What does it do well? What does it do poorly? How much does it cost? Big question: Why not go with it instead? Ask lots of questions there s no such thing as a stupid question Tools: Google Docs (collaborative creation and review of requirements), inperson meetings

7 User Stories One or more sentences in the everyday or business language of the end user or user of a system that captures what a user does or needs to do as part of his or her job function. Wikipedia Based on your requirements, what will users be doing in the system? Write a couple sentences to form the user story Validate by asking your stakeholders if the user stories make sense; are these things that might actually happen? Tools: Google Docs or Microsoft Word (or Notepad or a piece of paper)

8 User Stories: Examples Format: As a <person>, I want to <do something> so that <reason>. UC Recruit: As a reference, I want to type in my letter of recommendation so that I can provide the letter even if I can t upload it to the system. UC Recruit: As an analyst, I want to be able to import applicant data into a recruitment so that I can conduct my recruitment activities in an external system but still contribute data to reports. EEE: As a professor, I want to create a quiz that randomizes the questions for students so that I can encourage academic honesty.

9 Tangent: User Stories & Agile Integral component of agile Even if not using agile, still very useful for design

10 Storyboarding Graphic organizers in the form of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture,animation, motion graphic or interactive media sequence. Wikipedia Figure out how people would want to use the feature Ideal vs. realistic vs. worst case Storyboarding will help you to build your workflows Use the user stories you created Validate your proposed workflows by chatting with your users again

11 Storyboarding: Example

12 Storyboarding: Example Expanded

13 Storyboarding: Tools Diagramming software: OmniGraffle or Visio Save time by creating stencils:

14 Wireframes Depicts the page layout or arrangement of the website s content, including interface elements and navigational systems, and how they work together. - Wikipedia Start laying out the basic frame of the page Very low-fidelity Validate by meeting with users Conduct usability tests using wireframes to avoid contention over colors and other UI design choices

15 Wireframes: Example Start on a whiteboard or piece of paper Sketch out the various states (refer back to the workflows created earlier) Iterate! User story for this: As an analyst, I want to quickly update the status for an applicant so that I can easily manage my applicant pool.

16 Wireframes: Examples Use a program like Balsamiq Mockups if you want to create digital artifacts Or, start on a whiteboard and then move to Balsamiq Use your wireframes to validate your assumptions with your stakeholders

17 Wireframes: The Implemented Result

18 Wireframes: More Examples

19 User Tests Validate your workflow and interface design assumptions with actual users Don t need to write code - use your mockups

20 User Tests: Getting Participants Keep in touch with your users involve them every step of the way Identify and get time commitments from a few stakeholders and involve them in requirements gathering, analysis, storyboarding, workflow, etc. People usually will be happy to help! Worst case: bribe them ($5 gift cards to the campus bookstore can work wonders)

21 User Tests: Creating the Tests Identify what needs to be tested Create focused tests for each item Overly broad tests -> overly broad results Overly narrow tests -> overly narrow results Have a script to maintain consistency

22 User Tests: Sample Tasks

23 User Tests: Sample Script

24 User Tests: Conducting Tests Be prepared - have multiple states mocked up Know your mockups! Mark them if you need After the test starts, don t talk if something doesn t go well, take notes and fix it later Make sure you tell your users that the design is being tested, not them Be ready for weird awkward pauses and silences

25 User Tests: Example Task #1: Locate an evaluation for Math 3A taught by Professor Davis

26 User Tests: Example

27 User Tests: Example

28 But wait! Nobody used the search feature in our user tests

29

30

31 Why go through all this work? I know you just want to get started and code but... You can make sure you re implementing what your client wants Saves time Saves money Makes your client happy! If we hadn t met with users and run them through paper prototypes, we would have wasted weeks of effort implementing a search feature that few users would actually use.

32 Summary Spend some time doing this before writing any code: Requirements gathering User stories Storyboarding Wireframes Testing

33 Apps Mentioned Balsamiq Mockups Great tool for creating wireframes and quick-and-dirty mockups. Use this instead of a napkin. Windows and Mac $79 from with a free time-limited trial OmniGraffle High fidelity static prototypes. This is the primary tool we use for both EEE and UC Recruit. (Try Microsoft Visio if you prefer Microsoft Windows) Mac $60 ($120 for Pro) from

34 Thank you! Questions? Drop me an later: