User Interface Design

1. User Interface Design Asst.Prof.Dr.SurasakMungsing

2. Objective • to understand different kinds of users and their needs • to understand attributes of a good user interface design

3. What is a User Interface ? • Methods and tools used by the users to interact, communicate and use an application • Graphical, textual, auditory information presented to the users including controls • Think: • What is the user interface of the automobile? • Different user interfaces may be provided in a system. Why?

4. Types of User Interface • Recent categorized : • Graphical User Interface (GUI) provide graphical output. • Web-based User Interface (WUI) provide web pages output. • Other types: • Command line • Touch • Voice • Natural language • Etc. • Think: What are other types?

5. Why do we need good User Interface ? • Easier to use • Easier to train people to use it • Less help people will need while using it • Users will like to use it. Satisfaction increased • Think:Do a lot of graphics help users to learnhow to use a program better than a few of clean and simple graphics?Why?

6. Usability • Usability • Efficient • Ease of learning • Memorability • Prevent errors • Satisfaction

7. Usability Measures • Time to learn • Speed of performance • Rate of errors by users • Retention over time • Subjective satisfaction

8. The Goalof good UI Design • To deliver a usable system • What is usable? • Meet requirements. • Easy to learn and easy to use • Increase effectiveness • Increase satisfaction • Think: Name some applications required to meet these goals

9. User Interface Design (UID) Process Life Cycle • UID Process • Requirements Analysis Phase • Design Phase • Construction Phase • Usability Test Phase • Deployment Phase • Each phase involves Review and Rework.

10. UID Process Outputs • Screen Prototypes • Use cases • Screens Deployed • Tested Screens • Working Screens

11. Requirements Analysis Phase (RAP) • Analyze user’s requirements. User profile Project Scope Requirements Analysis Customer Requirements Task profile UI Requirements Environment profile

12. Gathering Requirements • Observation • User Interview • Questionnaire • Think: Name other methods.

13. User Profile • To understand user profile, the designer must understand: • Different Tasks performed by the Member of the focus group. • Who are the Users? • What Tasks they performed? • User’s Skills and Experience. • Relevant training users received. • Think:What are other questions designers needto ask?

14. Task Profile • User goals • Sub-goals and tasks included • Tasks sequence/order

15. Environment Profile • Application’s look and feel • Interface type • Dialog box driven • Command line • Menu driven • What more?

16. High Level Design Phase • Build conceptual model • Design model represents designers’ perception of the system • Conceptual model represents users’ perception of the system. • Identify the main components • Main windows. • Major control points. • List the main features of each component • Sequence of events • Events required to complete different tasks.

17. Construction Phase • Develop working screens • Fully functional screens • Complete visualization of the high-level design • Screen review to acquire feedback and suggestion for improvement and rework

18. Usability Testing • Validate the user interface design against user requirements • Reveal areas will require refinement • Begin as early as the design phase • Three levels: • Concept testing require informal, group discussion. • Structured walkthrough with screen prototypes and specific tasks are performed • User observation

19. Deployment Phase • Deployment must start in advance of actual production • Deploy working models • Train end users • Provide support • Help desk • Documentation

20. The Elements of UID • Windows. • Events. • Pull-down menus / Drop-down menus. • Push buttons. • Icons. • Drop down or Combo box. • Check boxes • Radio buttons • Scrolling lists • Popup List • spin Boxes • Tabbed Panes.

21. Metaphors สัญลักษณ์ที่เทียบได้กับวัตถุในโลกแห่งความเป็นจริง • How to match the design model to the user models? • The answer is using graphical interfaces to give the user clues about how something works. • Metaphors help the user to use the application intuitively with minimum assistance. • The famous metaphor is Desktop.

22. IBM’s RealCD: An Example of using real world metaphors in UID • Audio-CD software package developed by the User Interface Architecture and Design Group at IBM. • What do you think about this Interface?

23. Metaphors

24. Tips on choosing metaphors • Match major user objects • Simple is better • Metaphors need not be unique • Look at user’s real world • Be flexible

25. Ergonomics • Definition • A branch of science, an approach which puts human needs and capabilities at the focus of designing technology systems. • Objectives • Most productive use of human capabilities • Maintenance of human health and well being • Usage • Deals with the interaction of technological and work situations with the human beings • Basic human sciences involved are • Anatomy • Physiology • Psychology

26. UID Principles • Principles are thumb rules the designers can follow for designing a good UI • Usability Heuristics • Use Simple and Natural dialog box • Speak the user’s language • Minimize the user’s memory load • Be consistent. • Provide feedback • Support both novices and experts

27. UID Principles • Usability Heuristics(contd.) • Provide clearly marked exits • Support both novices and experts • Provide good error messages • Error prevention • Provide help and documentation • Can you give some examples that follow principles above?

28. Usability Heuristics • Use Simple and Natural dialog box

29. Usability Heuristics • Speak the user’s language

30. Usability Heuristics • Minimize the user’s memory load • Human weakness • Memory • Understanding complex math • Applying logic • Recognizing items is much easier than Recalling • Operation should be obvious to the user Simple tasks should be kept simple, and complex tasks made possible

31. Usability Heuristics • Be Consistent • Ensure that the user interface works consistently • Place all buttons in consistent places on all the windows • Use the same wordings • Actions should be consistent ex: Double Click action to open folder • Same color combinations and interface styles are used across the set of screens • Make objects consistent with its behaviour. Objects which act differently should look different • Reduces training and support costs

32. Usability Heuristics • Provide feedback • Obvious and Immediate • Example: • Acknowledge all button clicks by visual or aural feedback within 50 milliseconds • Display an hourglass for any action that will take from 1/2 to 2 seconds • Animate the hourglass so they know the system is working in the background • Display a message indicating the potential length of time (that the user may have to wait) for any action that will take longer than 2 seconds • Offer engaging text messages to keep users informed and entertained while they are waiting for long

33. Usability Heuristics • Explorable Interface • Give users well-marked roads and landmarks • Make actions reversible • Always allow a way out • Support both novices and experts • Cater to both the inexperienced and the experienced user • Provide good error messages • Expressed in plain language (no technical jargon) • Precise • Constructively suggest solution

34. Usability Heuristics • Error Prevention • Prevent a problem from occurring in the first place

35. Usability Heuristics • Provide help and documentation • Easy to search through • Focused on the user’s task • A list of concrete steps that must be followed • Concise and precise

36. Design Decisions: Costs and Benefits

37. UID Design Tips and Techniques • Navigation between screens is important • Navigation within a screen is important • Use color sparingly • User minimal number of appropriate fonts • When items are unavailable gray (disable) them out, do not remove them

38. Tips and Techniques • Left align edit fields and right align their labels.

39. UID Design Tips and Techniques

40. UID Design Tips and Techniques Decimal-align floating point numbers

41. Tips and Techniques • Do not create busy/crowded screens (reduce cluttering).

42. Tips and Techniques • Use group boxes and white-space to group logically related items on the screen (enhance clustering).

43. Tips and Techniques • Menu and button labels should have the key word(s) first • Bad Choice • Insert page break • Add Footnote • Update Table of Contents • Good Choice • – Insert • Page Break • Footnote • Table of Contents

44. Tips and Techniques • Always look at the user’s productivity, not the computer’s • Which of the following takes less time? • Heating water in a microwave for one minute and ten seconds • Heating it for one minute and eleven seconds

45. Tips and Techniques • Use explicit destruction • When an action has irreversible negative consequences, it should require the user to take an explicit action to perform it • Example: • Deleting a worksheet should require clicking on an erase pushbutton and answering a warning question such as “Are you sure you want to erase this worksheet?” with a button click in the warning dialog box.

46. UID Design Tips and Techniques • Robustness. • Interface should prevent errors from occurring, but if they do occur, it should allow users to quickly recover • Autonomy. • Users are most comfortable in an environment that is neither confining nor infinite, an environment that can be explored and is not hazardous. • Simple. • A good design requires a good balance between maximizing functionality and maintaining simplicity

47. Good versus Bad UI • Why some interfaces are bad? • Why some interfaces are good? • Give some examples and reasons.

48. Good vs. Bad

49. Good vs. Bad

50. Good vs. Bad