Life, the Universe and GUI Design

1. Life, the Universe and GUI Design By Mike Miserendino

2. 42

3. What is the question?

4. Where do we start?

5. Requirements

6. Requirements Sources • Research • User Interviews • Focus Groups • User Groups

7. Interview • Ask lots of questions • Have the user do most of the talking • Mix questions types from yes/no to those requiring an explanation

8. GUI Guidelines and Standards • Contains basic design guidelines • Provides a consistent look and feel • Helps maintain company standards • Builds foundation for UI specifications

9. User Interface Specification • Blueprint for all user interfaces • Contains user interface layouts and overall application map • Describes function of all user interface components • Details the layout, behavior, and flow of all UI content • Establishes detailed requirements • Provides verification testing

10. User Interface Map

11. Display Definition

12. Menu Layout

13. Page Layout

14. Functionality

15. Toolbar Definition

16. Architectural Specifications • Modeled from User Interface Specification and business logic • Provides basis for Interface Control Document

17. Interface Control Document • Maps user interface to application • Derived from UI Specification • Satisfies UI requirements • Standard reference for the GUI developers so that they can look up and understand the interface methods exposed by the Back-End components

18. Insert ICD Sample Here

19. User Interface Design • Good UI design has everything to do with the user's tasks, goals, cognitive processes, and behavior. • Simple • Functional • Clean

20. Design Inspiration • Print Ads • Graphic Design • TV / Movies • Real life models

21. Advertisement Clippings

22. Okudagram • Display type invented by Michael Okuda for starship console displays seen in Star Trek. • http://www.lcarscom.net/

27. Sketches • Roughs of user interfaces or controls • Add functional notes as needed • Notepad or graph paper • Colored pens

28. Sketching

29. Wall Layouts • Use Velcro backed cutouts or pinups of controls • Sticky notes • Easy to layout and modify • Excellent for brain storming • Difficult to back up – manual copy • Not space efficient

30. Dry Erase Board • Cheap • Quick • Easy to modify • Limited size • Manual backup

31. Interactive Sketch Board • Dry erase board with PC or printer • Capability to save to file or hard copy • Slow • Expensive

32. Prototyping for Design • Simple functions available • Time consuming • Limited access • Reuse during prototyping phase

33. UI Models • Deductive User Interface • Inductive User Interface

34. Deductive User Interface • Most elements in software today require the user to study them and deduce their behavior • Typically found in traditional applications

35. Deductive User Interface

36. Inductive User Interface (IUI) • Also called inductive navigation, the IUI model suggests how to make software applications simpler by breaking features into screens or pages that are easy to explain and understand. • Informal tests suggest that users can perform tasks as quickly in this model as in traditional interfaces, and may find things more easily.

37. Microsoft Money

38. Microsoft Money

39. Design Considerations • Navigation • Input Devices • Use of Controls • Color • Text

40. Navigation

41. Navigation • Some UIs are like a maze. • Mazes make good puzzles. • People are not particularly good at remembering long sequences.

42. Input Devices • Keyboard • Mouse • Tablet • Touch screen

43. Control Clutter

44. Order

45. Visible • If something is important enough to be displayed to the user, make sure that the user will be able to see it.

46. Visible

47. Visible

48. Consistency • "consistency makes the interface familiar and predictable“ (The Windows User Interface Guidelines for Software Design, Microsoft Press)

49. Consistency

50. Consistency