Screen Design : Navigation, Windows, Controls, Text,

Transcription

1 Overview Introduction Fundamentals of GUIs - methods - Some examples Screen : Navigation, Windows, Controls, Text, Evaluating GUI Performance 1

2 Fundamentals of GUI What kind of application? - Simple or complex GUI - Rare or heavy user input - Data to display Application requirements set HW & SW - Customized or commercial (e.g. PC) hardware - Operating system (required?, eases use by common dialogs,...) - Display size and resolution (data to display, viewing distance) - SW to program GUI Other topics - need to be specified - Evaluation by users - Iterative design flow 2

3 Fundamentals of GUI Development Process (I) Project planning definition Systems design Implementation Integration & testing Repeated evaluation is the ONLY way to great GUIs Repeat for each feature at major milestones Installation & deployment Maintenance After all features have been integrated and tested 3

4 Fundamentals of GUI Development Process (II) Planning Risk analysis Client communication Start Increasing complexity Engineering Repeated evaluation is the ONLY way to great GUIs End (Client) Evaluation Construction 4

5 Fundamentals of GUI Development Process (III) Client communication Establish effective communication between R&D and client/customer Planning Define timetable, milestones, resources, budget, Risk analysis Assess technical and financial risks Client can be also customer Engineering Detailed specification of HW and SW, flowchart, system design, Construction Engineering tasks into code, integration & test, install, maintain, user support Client evaluation Obtain feedback of evaluation during development and installation 5

6 Fundamentals of GUI Development Process (IV) User Centered Process Obtain a list of users, make clusters Develop prototypes with increasing performance for evaluation within user clusters Gain understanding of aspects of user s work within the GUI to develop Implement alpha version and conduct usability tests with potential users 6

7 Graphical User Interface Evaluation (I) Define user and usability requirements Model user tasks Model user objects Define style guide GUI GUI GUI Usability problems Ship GUI (system) 7

8 Graphical User Interface Evaluation (II) Define users and usability requirements Questions Who are the end users? - What characteristics and knowledge do the users have? - What will their pattern of use be? - What will the system means to them? (personal benefits, costs, motivation, ) What are the usability requirements? - Which usability requirement is critical? - How can these requirements be specified so that they can measured and tested? 8

9 Graphical User Interface Evaluation (III) Define users and usability requirements Outputs User class description describes different types of end-users in a cluster-like way Usability requirements with evaluation criteria and level which must be achieved by GUI 9

10 Graphical User Interface Evaluation (IV) Model User Questions What tasks do the users perform? - What are they trying to achieve (task goals)? - How frequently do users perform this tasks? - How can the overall task can be broken down in subtasks? - How critical is each subtask to achieve the overall goal? What are the typical scenarios for each task? - How are these scenarios achieved by action on objects by users? Remark: An object is something on the screen that accepts user input like command buttons, text boxes, radio buttons, menues, or visualizes data like graphics, status bars, 10

11 Graphical User Interface Evaluation (V) Model User Outputs Task models - Defining what tasks a user will perform This is a key-topic of GUI design - Influences SW to be written for GUI, display and user input HW Task scenarios - Different tasks can be described ranging from (early) prototypes to final system - Task scenarios are relevant for evaluation of usability - Can be used to measure efficiency, learnability, 11

12 Graphical User Interface Evaluation (VI) Model User Questions What are the objects in the system? - What actions can the user do to or with an object? - What information does the user (need to) know about an object? - How are the objects related to each other? Remark: An object is something on the screen that accepts user input like command buttons, text boxes, radio buttons, menus, or visualizes data like graphics, status bars, 12

13 Graphical User Interface Evaluation (VII) Model User Outputs User object models Can be one or more for each type depending on users Examples: - Simple GUI for inexperienced users & extended for pros see PANASONIC digital camera Glossary of user terms 13

14 Graphical User Interface Variations Model User Expert Inexperienced 14

15 Graphical User Interface Evaluation (VIII) Define style guide Questions What GUI environment will be used? What style will users be familiar with and expect? What will the windows look like? What standard menu items will be used? What types of objects will be used (e.g. buttons, lists, )? What standard patterns of interaction will be used? How will the help system be structured? 15

16 Graphical User Interface Evaluation (IX) Define style guide Outputs Application style guide Defines the GUI elements (objects, menues, ) used in terms of design and interaction with the user and reaction of the object Examples of style guides see Introduction like APPLE, WINDOWS, ANDROID, automation, 16

17 Guides 121 Value of style guides - Allow faster performance - Reduce errors - Reduce training time - Improve satisfaction - Improve system acceptance - Reduce development and support costs Examples see Introduction 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 17

18 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 18

19 Graphical User Interface Evaluation (X) GUI Questions What views of objects are required for the tasks? How should these views be allocated to windows? What layouts should be used for windows? How does the user navigate from one window to another? What menu items and other controls are required? How are menus and controls structured? 22

20 Graphical User Interface Evaluation (XI) GUI Outputs Window designs including specification of interactive behavior Window navigation design First stage: GUI - supports user tasks - shows user objects - is according to style guide - meets usability requirements 23

21 Graphical User Interface Evaluation (XII) GUI Questions How can the user perform the tasks scenarios using the GUI? Are there extra views of objects required? Should windows be restructured to support the tasks better? Is the inter-window navigation adequate to support tasks? How can the things the user has to do be simplified and streamlined (same philosophy on similar tasks)? What problems does the user encounter? What improvements does the user suggest? 24

22 Graphical User Interface Evaluation (XIII) GUI Outputs Working prototype of the GUI Revision proposals to GUI design as an iterative process - Investigate usability and feasibility - Validity of tasks- and user object model - Verify style guide 25

23 Graphical User Interface Evaluation (XIV) GUI Questions How usable is the GUI rated by the (end-) users in terms of usability criteria? What usability problems do users encounter? Does the GUI provide adequate support? Aim: Checking if GUI - satisfies all usability requirements - adequately supports all tasks 26

24 Graphical User Interface Evaluation (XV) GUI Outputs Evaluation report of usability of GUI design (and prototype) Usability problems Proposed revisions to GUI design 27

25 Group Work : Case Study IV (Master) Topics for presentation, GUI prototyping and final documentation - Prepare at least a few sentences and/or figures for each of the questions and the outputs of GUIDE method (p. 8 23) for - Presentation (~8 slides, next lecture) and final (exam) document - Discuss your prototype now regarding p. 24 & 25 - Evaluation tasks are discussed more in detail in Evaluating GUI Performance - Continue prototyping (GUI SW should be already chosen) your Case Study for exam presentation and documentation. 30