Presentation is loading. Please wait.

Presentation is loading. Please wait.

Life, the Universe and GUI Design By Mike Miserendino.

Similar presentations


Presentation on theme: "Life, the Universe and GUI Design By Mike Miserendino."— Presentation transcript:

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.

23

24

25

26

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

39 Design Considerations Navigation Input Devices Use of Controls Color Text

40 Navigation

41 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

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

49 Consistency

50

51 Clear Purpose

52 Custom Controls Unless you are making a game or multi- media application, try to use the controls that are provided by the operating system Users are already familiar with standard controls and will readily understand their purpose and rules of operation

53 Tooltips

54 Hover Help May provide far too much information to be effective. May disappear before the user can finish reading them.

55 Hover Help

56 Color

57 Color is a phenomenon of perception not an objective component or characteristic of a substance Color is an aspect of vision; it is a psychophysical response consisting of the physical reaction of the eye and the automatic interpretive response of the brain to wavelength characteristics of light above a certain brightness level

58 Color Complementary colors Alerts Display Printouts Disability

59 Color Wheel Harmonious color combinations use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle, or any four colors forming a rectangle

60 Color Wheel The color wheel is a visual representation of color theory mlhttp://www.visibone.com/color/wheel.ht ml Color Wheel Pro - wheel-pro.com/index.html

61 Color Blindness Approximately 8% of men are color blind to some extent while only 0.4% of women are affected. The key issue is to know when you are using colors which some people will not be able to differentiate.

62 Color Blindness Most color blindness involves red or green Safe Web Colors for color-deficient vision - /colours/

63 Color Blindness Follow direction from color blindness guides Offer alternative colors or a means to customize UI colors

64 Color Selector

65 Look and Feel

66 Text Fonts Pre-Rendered vs. Dynamic Text Uppercase

67 Fonts Sizing Font Family

68 Pre-Rendered Text Looks Great Artistic Control Custom Fonts Pros:

69 Pre-Rendered Text High Bandwidth / Capacity More Work & QA Poor Internationalization High Maintenance Attributes not alterable by user Cons:

70 Dynamic Text Low Bandwidth / Capacity Easy to Internationalize Easy to Modify Low Maintenance Support for Dynamic Content Run-time Font Attributes Pros:

71 Dynamic Text More Code Limited Selection of Fonts Less Artistic Control Cons:

72 Uppercase Avoiding uppercase is one of the first rules of netiquette because it is universally interpreted as shouting The use of all uppercase makes the information inherently difficult to read

73 Speaking Geek Avoid technical jargon Utilize technical writers to assist with any text displayed on screen

74 Internationization Region/Locale EASL Resources

75 Yahoo Mail

76 Windows 95 "Insert Floppy - please insert the disk labeled "Windows 95 CD-ROM'.

77 Address Most U.S. designed applications assume that every country in the world has the same address conventions Validating address forms tends to provide the most frustration for users (e.g. valid state required!)

78 Fixed Sized Controls

79 Development Control libraries Utilities Graphics software Macromedia Flash

80 Resources Books Magazines Internet UI Related Organizations UI Related Businesses

81 Recommended Reading Designing the User Interface, Shneiderman The Humane Interface, Raskin International User Interfaces, del Galdo, Nielsen Design Graphics Magazine Java Look and Feel Guidelines, Sun Microsystems The Windows Interface Guidelines for Software Design, Microsoft Press

82 Web Human-Computer Interaction Resource Network -

83 Organizations ACM CHI - ACM SIGGRAPH - UI Engineering -

84 Contact Mike Miserendino


Download ppt "Life, the Universe and GUI Design By Mike Miserendino."

Similar presentations


Ads by Google