1. User Interface Design Notes p7 T120B029 2012 pavasario sem.

2. 2 User Interface Design(1) What is a user interface? Human-computer interaction is a major sub-area of software engineering Separation of information content and information form

3. 3 User Interface Design(2)

4. 4 Design process NEEDS DESIGN IMPLEMENTEVALUATE Modified from Preece, Rogers, and Sharp, Interaction Design

5. 5 Needs “Need-finding” –Identifying latent needs, not symptoms Observing/Understanding the users’ context Collecting data NEEDS DESIGN IMPLEMENTEVALUATE

6. 6 Capturing the Data Observer’s head Written notes Sketches and photos of the setting Recorded audio (or even video)

7. 7 Design Ideating – expressing ideas Brainstorming –More ideas  more creative  better –Group vs. individual creativity Representing –Sketching –Enacting NEEDS DESIGN IMPLEMENTEVALUATE

8. 8 Implement = Prototype Brings perspectives together –Designers –Users –Engineering, marketing, planning,….. User interaction design Conceptual model Coding a working prototype NEEDS DESIGN IMPLEMENTEVALUATE

9. 9 Examples: Low-Fidelity Prototype

10. 10 Evaluate User study Quantitative data Qualitative data NEEDS DESIGN IMPLEMENTEVALUATE

11. 11 Conducting a user study This is a collaborative task! Prototype (computer, low fidelity) Facilitator Observer/Note taker Users!!!!

12. 12 First-hand observation Identifying users and stakeholders Observe in the interviewee’s context Focused, short Eliciting and interpreting user’s needs Goal is to abstract design implications

13. 13 Measurable Quality Factors Ease of learning (time to learn) –How long does it take typical members of user community to learn how to use the commands relevant to a set of tasks? Speed of use –How long does it take to carry out the benchmark tasks?

14. 14 Measurable Quality Factors Frequency of errors –How many and what kinds of errors do users make in carrying out the benchmark tasks? Knowledge retention –How well do users maintain their knowledge over different periods of time? User satisfaction –How measure?

15. 15 Guidelines for “User-Friendliness” Use instructions that are easy to learn and remember Make help functions context sensitive Present logically connected functions together and consistently Create graphical user interfaces whenever possible Allow actions to be activated quickly

16. 16 User Interface Design Principles Undestad users Know the user Follow tried and true rules for interface design

17. 17 Undestand Users

18. 18 Know the User Novice Knowledgeable Frequent Infrequent

19. 19 Know the User Novice –Lots of feedback –Clear, constructive error messages –Minimize chances of making an error Knowledgeable but infrequent –Menus, consistent commands –Help screens Knowledgeable and frequent –Little feedback –Shortcuts

20. 20 Strategies for Differing User Levels? Rules Interaction Styles Menus Forms Command Language

21. 21 Rules for Interface Design (1) Be consistent Provide shortcuts Offer useful, meaningful feedback Design a beginning, middle and end for each sequence of actions Prevent catastrophic mistakes

22. 22 Rules for Interface Design (2) Verify deletion tasks Allow easy reversal of most actions Make user focus on task, not interface Do not rely on user memory Display only currently relevant information

23. 23 Interaction Styles(1) Interaction Devices Menu Selection Form Fill-in Command Language Natural Language Direct Manipulation

24. 24 Interaction Styles (2)

25. 25 Command Interface

26. 26 GUI and Direct Manipulation

27. 27 Desktop GUIs and web applications http://www.mikasbinkis.lt/ktu/# http://patogiau.lt/paslaugos/kaunas.htm

28. 28 Interaction Devices

29. 29 Pen-based Interaction

30. 30 Interactive Workspaces

31. 31 Virtual Reality http://www.vrealities.com

32. 32 Guidelines for Menus Be consistent and use terminology familiar to users Use distinctive items Be concise Put keywords first in the item name Create groups of logically similar items

33. 33 Guidelines for Forms Use a meaningful title Give understandable but brief instructions Use logical sequencing and grouping of fields Use familiar and consistent field labels Prevent errors whenever possible Allow easy error correction Clearly mark optional fields Clearly signal the completion of data entry

34. 34 Guidelines for Command Language Limit the number of commands Choose meaningful, distinctive command names If abbreviations are used, be consistent Structure of the command language should be consistent Use prompts to help intermittent users Consider command menus to help intermittent users

35. 35 Guidelines for Direct Manipulation Use easy to understand icons Avoid misleading analogies Do not violate population stereotypes Use icons for appropriate purposes (consider Calculator) Carefully design the iconic interaction (manner in which an icon is used)

36. 36 Summary User interfaces are ubiquitous Good user interfaces need to be designed Bad user interfaces have ramifications –Economic, political –Enjoyment –Even life or death 11:30

37. 37 Tools to use ?