Overview. GUI History Screen Design : Navigation, Windows, Controls, Text, Evaluating GUI Performance. Example: Car Rental

Transcription

1 Overview Introduction Fundamentals of GUIs Screen Design : Navigation, Windows, Controls, Text, Evaluating GUI Performance - Features - Use 1 GUI History Example: Car Rental 1980 : Keyboard based > 1990 mixed keyboard and mouse graphic elements need more screen space and high resolution displays > 2000 : like color 2

2 Interaction 15/16 Command Line Powerful Flexible Advantages Appeals to experts Conserves screen space Requires learning Disadvantages Intolerant to typing errors Difficult for casual users Commands must be memorized Form Fill-in See 1990 Advantages Disadvantages Familiar format Consumes screen space Simplifies information entry Requires careful and efficient design Requires minimal training Does nit prevent typing errors 3 Interaction 15/16 Menu selection Advantages Utilizes recognition memory Reduces interaction complexity Aids decision making process Minimizes typing Aids casual users Disadvantages May slow experienced users Consumes screen space May create complex menu hierarchies Antromophic Man-man-like interface incl. language dialogue, hand gestures, eye movements, Natural Advantages Disadvantages Difficult to implement 4

3 Interaction 15/16 Direct Manipulation Replacement of keyed entry by pointing devices such as mouse, touch screen, joystick, graphics tablet Faster learning Advantages Easier remembering Exploits visual cues Easy error recovery Provides context Immediate feedback Disadvantages Greater design complexity Window manipulation requirements Requires icon recognition Inefficient for touch typists (using keyboard without looking on it) Increased chance for screen clutter 5 Graphic Systems : Advantages Symbols are recognized faster than text see e.g. toolbars, message boxes with information and warning icons Fast learning Faster use and problem solving Easier remembering (images can be easier remembered than text) More natural Exploits visual cues (visual thinking is faster than verbal expressions) Fosters more concrete thinking direct approach rather than e.g. multiple structured systems like menues Provides context 6

4 Graphic Systems : Advantages Fewer errors (incl. error boxes, UNDO should be implemented) Increased feeling of control Immediate feedback Predictable system response Less anxiety ( Sorgen ) concerning use mainly for inexperienced users More attractive (relevant for skeptical users) May consume less screen space Replaces national languages Easily augmented with text information (Tool-tip-text) Low typing requirements (eliminate the need for typing skills) 7 Graphic Systems : Disadvantages Greater design complexity (symbol and screen design is very important) Learning still necessary Lack of experimental-derived design guidelines A lack of widely available and applicable design guidelines exists even today Inconsistency in technique and terminology e.g. many different symbols etc. exist for the same task Not always familiar (as people are trained to numbers and words) Number of symbols are more limited by human comprehension than text Few tested icons exist Inefficient for touch typists 8

5 Graphic Systems : Disadvantages Inefficient for experienced users Not always the preferred style of interaction (not all users prefer pure iconic interface) Increased clutter and confusion May consume more screen space Hardware limitations like processing speed and graphic capabilities 9 GUI vs. Web (I) GUI Web Hardware Monitor User focus Data & information User tasks Mostly well defined Mostly well defined Data and applications Properties generally known, trusted sources, typically meaningful organized Install, configure, personalize, start, use and upgrade programs Open, use, close data files Data entry Enormous variety Screen appearance different by browser Information and navigation Full of unknown content, source not always trusted, highly variable organization Link to a site, browse, read pages, fill out forms, register, downloads, 10

6 GUI vs. Web (II) Presentation elements Navigation GUI Windows, menus, controls, data, toolbars, messages Presented as specified Generally standardized by style guide Menus, lists, dialogs, Links, bookmarks, Web Two components: browser and page Within a page, many combinations of text, images, animation, Little standardization Interaction Clicking menu choices, pressing buttons, typing text, Basic interaction is a single click Response time Nearly instantaneous Quite variable 11 GUI vs. Web (III) Task efficiency Consistency Security Reliability Normally high GUI Targeted to specific people with specific tasks Similar or same objects are used in different applications (some kind of standardization and style guide) Often not an issue Web Limited by browser and network Sites tend to establish their own identity Frequent ignoring of GUI guidelines Renowned for security problems Different because of network providers, internet service providers, hosting servers, 12

7 Usability Requirements 64, 68, 69 5 quality components by Nielsen (2003): Learnability Efficiency How easy is it for users to accomplish basic tasks? How quickly can tasks be performed by (experienced) users? Memorability How fast can rare users reestablish proficiency? Errors How many errors do users make and how easy is recovery? Satisfaction How pleasant is it to use the design? 13 Common Usability Problems (I) 65 64, 68, 69 Ambiguous menus and icons Confusing and inefficient navigation Inefficient operation Excessive or inefficient page scrolling Information overload Design inconsistency Input manipulation limits Highlighting and selection limitations Unclear step sequences 14

8 Common Usability Problems (II) 65 64, 68, 69 More steps to manage the interface than to perform tasks Complex linkage within application Inadequate feedback and confirmation Lack of system anticipation (Ahnung, vorausschauend) Inadequate error messages, help, tutorials and documentation Visual clutter (lack of white space, meaningless graphics, wasteful decoration, useless elements, 15 Some Practical Measures of Usability 65 64, 68, 69 Are people asking a lot of questions or often use the manual? Are users become some kind of aggressive when using the GUI? Are there many irrelevant actions being performed? Are there many object, elements etc. on the screen which could be ignored? Do a lot of people want to use the product (GUI)? 16

9 Some Objective Measures of Usability 65 64, 68, 69 How effective is the interface? How learnable is the interface? How flexible is the interface? What are the characteristics of the interface? 17 Some Objective Criteria to Measures Usability (I) 65 64, 6 Acc. Tyldesley (1998) Time to complete a task, percentage of tasks completed by unit time (speed) Ratio of successes to failures Time to spent on errors Number of other SW performing the same tasks better Number of commands used Frequency and duration of help or manual use Percentage of favorable to unfavorable user commands 18

10 Some Objective Criteria to Measures Usability (II) 65 64, 6 Number of repetitions of failed commands Number of times the interface misleads the user Number of available commands which are rarely used Number of users preferring this system Number and duration the user works around a problem Number of times the user loses control of the system Number of times the user expresses frustration or satisfaction 19 Fundamental Principles (I) Accessibility Systems should be designed to be usable without modification by many users Aesthetically pleasing Visual appeal by grouping and alignment, use of color and graphics Availability Makes all objects available all the time (compare to OFFICE 2003 and OFFICE 2007) Clarity An Interface should be easy to understand in terms of elements, text, functions Compatibility Provide compatibility for tasks, similar products, adopt user s perspective 20

11 Fundamental Principles (II) Configurability Permit easy personalization of configuration (OPTIONS) Consistency The GUI should look, act and operate the same throughout all tasks: - Same action should always have the same result - The function of elements should not change - The position of standard elements should not change Control - Actions should result form user requests and performed quickly - Permit users to customize GUI Directness Available alternatives should be visible 21 Fundamental Principles (III) Efficiency Minimize hand and eye movements Familiarity Use familiar concepts and language (real-world metaphors) Flexibility A system must be sensitive to different needs of users: Experience, knowledge, skills, personal preferences, Forgiveness - Tolerate common and unavoidable human errors Operability - Provide constructive messages when an errors does occur Ensure that the system can be used by ereryone 22

12 Fundamental Principles (IV) Obviousness A system should be easily learned and understood: Predictability - What to look at - What and when to do - Why and how to do it The user should be able to follow the progression of a task (Do not bundle or combine action) Recovery - A system should permit command to reverse or undo the action - Ensure that work is never lost due to an error Responsiveness The system must rapidly respond to an action including acknowledgement 23 Fundamental Principles (V) Safety Protect the user form making mistakes, e.g. by reminders, list of choices, Simplicity Provide an interface as simple as possible: Trade-Offs - Present common and necessary functions first - Hide things until they are needed - Provide visual hierarchy - Provide defaults - Provide uniformity and consistency - User requirements have priority over technical requirements - Final design is based on balancing often-conflicting design principles (compare Fundamental Principles) 24

13 User Characteristics (I) Motivation - Is the users attitude towards the system positive, neutral or negative? - Is the motivation high, moderate or low? Stress level etc. - Is the user patient or impatient? - Shows the user some kind of stress? - What are the users expectations are they satisfied? User s physical characteristics - Age distribution (classification) and gender - Education (degrees, ) - Handedness (87% right-handed) - Disabilities 25 Speed of Interaction 100 Typical values for keyboard Prose text Reading Listening Speaking Fast typist Average typist Typewriting Two finger typist Handwriting Transcription Computer Copying text Words per minute > >

14 Style Guides 121 Value of style guides - Allow faster performance - Reduce errors - Reduce training time - Improve satisfaction - Improve system acceptance - Reduce development and support costs Valuable for developers because of - Higher visibility of human-computer interface - Simpler design - Providing programming aids reducing programming time - Reduction of training time - Providing a benchmark for quality control testing 27 GUI Style Guides 122 / 123 MICROSOFT VISTA (763 pages) MICROSOFT WINDOWS XP APPLE (196 pages) Conceptual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html Conceptual/APStyleGuide/AppleStyleGuide2006.pdf SUN JAVA 28

15 GUI Interface Standards 122 / 123 ISO 9241 : Ergonomic requirements for work office with visual display terminals Contains guidelines for ergonomic aspects of hard- and software including display requirements, the uses of menus and icons, ISO : Software ergonomics for multimedia user interfaces Presents guidelines for the design of multimedia user interfaces ISO : Human-centered design processes for interactive systems Provides guidance on user-centered design through development process ISO : Ease of operation of everyday products User (consumer), context of use, test methods, Company related interface documents 29 Good Interface & Screen Designs 127 Reflect the capabilities, needs and tasks of the users Are adapted to hardware Achieve business objectives for which it is designed Good interface design goals: Reduction of Visual work Intellectual work Memory work Motor work (mouse, keyboard) Minimize burdens imposed by the technology used 30

16 How to Discourage the User 128 Unclear caption, wording, Improper objects and graphics Misleading headings Unnecessary or irrelevant information Requests that require backtrack or thinking about previous stuff Poor layout of screen objects incl. their placement Poor legibility 31 Interaction Starting Area & Arrangements 135 Provide the starting point in the screen s upper-left corner Focus user attention on the most important parts of the screen Divide information (elements) into units that are meaningful (grouping) Provide an ordering of elements including prioritization Possible ordering schemes: Conventional, sequence of use, frequency of use, function, importance Form groups that cover all possibilities All information that must be compared is visible at the same time Only information which is relevant to the user s tasks is presented 32

17 Examples of GUIs : Balance & Symmetry Balance / Symmetry Instability / Asymmetry 33 Examples of GUIs : Sequentiality Sequentiality Randomness 34

18 Examples of GUIs : Simplicity Simplicity Complexity 35 Examples of GUIs : Predictability

19 Screen / Windows Arrange all necessary object, elements etc. on one screen (if possible) 181 Prevent scrolling 178 If more than one screen is used the user should not have to remember things from one screen to the next 181 Arrange object in a way that user interaction including reading) starts in the top left corner Windows should always have a title which is descriptive and unique Screen / Windows : Arrangement of Screen Tasks 298 Sequential : no 38

20 Screen / Windows : Arrangement of Screen Tasks 296 Sequential : yes 39 Screen / Windows : Arrangement of Screen Tasks 296 Sequential : yes optimized by grouping and rearrangement of checkbox Main Files Update with changes 40

21 Arranging Windows 397/8 Overlapping Cascading Tiled No window should ever completely hidden! 41 Components of Windows 391 Window state Title bar Menu bar Toolbar User area Status bar Frame There are (per definition) primary and secondary windows: - Primary: see above - Secondary: Common dialogs, message boxes, pop-up windows, 42

22 Primary Window 400 Proper usage - Used to represent an independent application - Menu, toolbar, status, - Divide independent functions into separate primary windows - Arrange unrelated functions in one window 43 Secondary Windows 401 Common dialogs, message boxes, pop-up windows, Proper usage - For performing supplemental actions - For presenting frequently or occasionally used windows - Use objects of operating systems which are well known to the user Important Guidelines - Should typically not appear in the toolbar - A secondary window should not be as large as the primary window 44

23 Secondary Windows : Common Dialogs 416 open save print color 45 Secondary Windows : Message Boxes 411 Proper usage - Use for presenting brief messages - Use for requesting specific actions - Use for tasks that take are easy to be done Important Guidelines - Should typically contain text which can be understood - Should have icons for emphasizing 46

24 Secondary Windows : Input Boxes 402 Proper usage - Use for input of numbers or text - Use rarely - Default input can be set in order to minimize user input Important Guidelines - Should typically contain text which can be understood - Input data should be verified before processing 47 Sizing and Placing Windows 415/6 Number of windows - Minimize number of windows needed - Too many windows can be confusing Sizing windows - Windows should be large enough to present all information - If a window is too large, determine if all information is needed and/or related or use other objects which are smaller - Optimum windows size about 12 lines for text - Avoid scrolling - Main windows can/should be maximized (full screen) Placing windows - Don t hide other windows completely - Cascading is recommended 48

25 Elements of GUIs : Menus 308 ff Hierarchical/sequential structure recommended, additional toolbar 312 Level 0 File Options Level 1 Open O1 Save O2 >> Text Number 49 Elements of GUIs : Menus 308 ff Organisation & Proper use - Language and consistency acc. user expectations - Display all or only relevant alternatives - Cascade menus if necessary - Delete or grey out inactive items - Mark active selections - Maximum of 6 without grouping or up to 20 with grouping (line separators) - Order acc. importance or alphabetically - Use keyboard accelerators (F1 for help, CRTL + C for copy, ) - Order menu items in a useful order (important first, alphabetically, ) 50

26 Elements of GUIs : Data Field (Text Boxes) 461 Description: Purpose: Advantages: Rectangular shape, single or multi-line Text to enter (proposal can be displayed) Flexibility, familiar, little space, rapid reading Disadvantage: Requires keyboard, input must be remembered, not fail save e.g. for databases Proper usage: Data that can t be categorized or selection is not possible, text height and font appropriate, black text on light background can be structured to requested input, e.g. phone number: 466 Phone (area / line direct) / - 51 Elements of GUIs : Command Button (Toolbar similar) 445 Description: Rectangular shape, label as text or graphics Purpose: Start action Advantages: Always visible, faster than menu, can be logically ordered Disadvantage: Consumes screen space, requires often pointing device Proper usage: Size as large as reasonable, use not more than 6 buttons on a window, arrange buttons logically, use enable and disable, use descriptive text 52

27 Elements of GUIs : Checkboxes 478 Description: Purpose: Advantages: Vertical and horizontal arrangement Small circles filled if selected and label, only one can be chosen Selection of only one items (compare to Check Box) Easy to access, easy to compare, preferred by users Disadvantage: Consumes screen space, limited number of choices Proper usage: For settings or attributes, non-exclusive choices, good for choices that are discrete, small and fixed in number, choices which are not easy to remember, choices that never chance in content 53 Elements of GUIs : Radio Buttons 468 Vertical and horizontal arrangement Description: Small circles filled if selected and label, only one can be chosen Purpose: Selection of only one item Advantages: Easy to access, easy to compare, preferred by users Disadvantage: Consumes screen space, limited number of choices Proper usage: For settings or attributes, non-exclusive choices, good for choices that are discrete, small and fixed in number, choices which are not easy to remember, choices that never chance in content 54

28 Elements of GUIs : Combo Box (Drop down) 504 Description: Purpose: Rectangular box offering a list of choices Selection of one (or more) item when space is limited Advantages: Unlimited number of choices, save screen space, shows all Disadvantage: Requires action to display list, long lists require scrolling Proper usage: Use when screen space is limited, text can also be typed, highlight selected choice 55 Elements of GUIs : List Boxes 493 Description: Permanently displayed box with a list of attributes, selection by mouse possible, no text entry Purpose: Displays a collections of items Advantages: Unlimited number of choices, elements can be added Disadvantage: Requires action to display list, long lists require scrolling Proper usage: Items which are not frequently used, items large in number, highlight selected choice 56

29 Elements of GUIs : Data Input Examples Things to evaluate: - User input load - Screen space - Data to remember - Database consistent input (no typing errors, 57 Elements of GUIs : Data Input Examples Type Description Good Issue A Text Box only B Radio Buttons and Text Boxes C List Boxes and Text Boxes D Drop Combo Boxes and Text Boxes 58

30 Elements of GUIs : Scroll Bar, Slider 517 Description: Purpose: Bar as scale with buttons, optional text boxes, selected by mouse, drag or click slider, horizontal and vertical arrangement Setting of a numerical value without keyboard Advantages: Visualization of setting, easy to use, better than keyboard input Disadvantage: Consumes more screen space than text input, mouse needed, can be less precise than text (e.g ) Proper usage: To set an attribute, limited range of possible values 59 Elements of GUIs : Progress Indicator Description: Rectangular bar that visualizes the progress performed Purpose: Provides feedback of processing of a lengthy operation Advantages: Better than hour glass Disadvantage: Needs some screen space Proper usage: Portion of process completed, can be combined with numbers, can be used in an extra frame to save screen space or in status bar 60

31 Elements of GUIs : Tabs 521 Description: Purpose: Window containing tabbed dividers, navigation between pages Presentation of information that can be logically organized into pages or sections Advantages: Resembles sheets of paper, effective organization Disadvantage: Visually complex Proper usage: To present discrete, logically structured information, tab name should be short & descriptive, do not use for sequential steps user is familiar with tabs as options settings 61 Elements of GUIs : Icons, Index, Symbol 653 Description: Square graphics, 16 x 16, 32 x 32, 48 x 48, 256 colors Purpose: Visualization and icon to click Advantages: Saves screen space, graphics more intuitive for users Disadvantage: Often not easy to design Proper usage: Use common icons, consider cultural and social aspects as cross, body, 62

32 Elements of GUIs : Tool Bar 614 Description: Purpose: Advantages: Icons that can be selected User interaction by clicking on icon, additional to menu Speeds up user interaction Disadvantage: Only effective with proper icons, consume screen space Proper usage: Excerpt of most often used menu items, icons must be easy to understand and to remember 63 Elements of GUIs : Status Bar 614 Description: Purpose: Context sensitive messages related to object with focus or processing tasks Provides explanatory information, describes use of objects Advantages: Easies user information, saves screen space compared to labels, Disadvantage: Only effective with user training Proper usage: Do not use for essential information 64

33 Elements of GUIs : Common Dialogues Description: Series of standardized windows provided by OS Purpose: User interaction for open, save, print, Advantages: Users are trained to common dialogues, no SW development Disadvantage: In some cases not very effective Proper usage: Use meaningful adaptation like extension filters for files 65 Elements of GUIs : Palette 488 Description: Series of graphical elements Purpose: Advantages: Selection of one option Picture aid, easy to compare choices, consumes less screen space than text Disadvantage: Limited number of choices or use >>, difficult to organize for scanning efficiency, requires meaningful graphical representation Proper usage: Setting of attributes, properties or values, exclusive choice, good for discrete elements which are limited and variable in number, not easy to remember, do not use when text is clearer than icons 66

34 Elements of GUIs : Controls Selection 549 Choosing the best control for certain tasks and screen space conditions: Task Exclusive choice Not exclusive choice Best control Radio buttons Check boxes Limited space Drop down list box Multiple selection list box Setting a value within a range Bar Text box Executing an action Command button or icon Menu 67 Elements of GUIs : Data Presentation 227 Display information always with labels or headings, use also units Display information in a useable format e.g. phone numbers, Format information as commonly used, support format in input box Time: 10:32:15, credit card: Break long strings into 3 or 4 digits with blanks in between see credit card, phone number, Align data into columns Organize for top-to-bottom scanning 68

35 Elements of GUIs : Data Justification 228 Left justify text formats Name: John Doe Name: John Doe City: Munich City: Munich Right justify numeric data Charge: Charge: Tax: 1.45 Tax: 1.45 Create a data ladder Animal: Cat Animal: Cat Age: 8 Age: 8 Number: 1234 Number: 1234 State: Ge State: Ge Create data statements Cats: cats Dogs: 8 8 dogs 69 Example for Numerical Information Temperature + or -? 70

36 Elements of GUIs : Graphical Data Presentation (I) 263 Graphs are suitable for fast and easy comparison of data When charts & graphs? < 3 numbers: words ; 3 10: table ; > 5 graph Major types of charts and graphs (see MS EXCEL) Line graph - not more than 5 curves - use adjacent labels, at least legend - use solid lines for actual data, dotted for projected Bar charts - horizontal or vertical - vertical typically over time - horizontal: top information more relevant Pie charts - data must add to 100% - use less than 5 segments, no segment less than 5% 71 Elements of GUIs : Graphical Data Presentation (II) 263 Graphs emphasize data Show data not design variation Provide proper context for data interpretation (see example) Use of axis, scale, labels, legends, units in a proper way Fill entire area of graph with data Use the appropriate graph (scatter, line, pie chart, ) Do not overload graphs with multiple data, a maximum of 5 is recommended Use easy to distinguish line coding Data lines etc. should be the most visible, use thinner lines for axis and grid 72

37 Elements of GUIs : Graphical Data Presentation (III) 263 Example for proper context for data interpretation Turn over /B$ Before, after??? Turn over /B$ Elements of GUIs : Interaction Devices (I) 424 Short overview, details see lecture MMI Input devices for selecting objects and data input traditional: keyboard, mouse newer : touch screen, voice Output devices for system feedback and information traditional: paper, screen newer: sound, voice, force However there apply often restrictions in those devices like screen space, no place for keyboard or mouse, GUI design must deal with input and output limitations 74

38 Elements of GUIs : Interaction Devices (II) 424 What is really selected? GUI proper made but issue on color for select and non-selected choices 75 Elements of GUIs : Words and Text 565, 628 Choosing proper words - Use short & familiar words in simple language, - Use only complete words and positive terms - Use plain and simple proportional fonts with point size of Do not use jargon, abbreviations, Sentences and messages - Must be brief and simple, limited to about 20 words per sentence, - Must be understandable for all users (education, qualification, ) - Line length characters, use proper line spacing - Emphasize text by position, boxes, bold font, capital letters, Message Boxes - Title bar must clearly provide the source of the message - Text must be clear (s.a.) and limited to about 2 to 3 lines - Icon is often helpful 76

39 Elements of GUIs : Summary GUI design is most important to MMI Proper GUI saves (less user time, acceptance) money User should never lost, HELP is strongly recommended HELP (or information) via Status Bar, Tool Tip Text, Help file, Response time is mission critical If applicable refer to corresponding cultures System limitations have to be compensated by GUI Evaluation (see next chapter) is necessary 77