Screen Design : Navigation, Windows, Controls, Text,

Transcription

1 Overview ntroduction Fundamentals of GUs - Design methods - ome examples creen Design : Navigation, Windows, Controls, Text, valuating GU Performance 1

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

3 Fundamentals of GU Development Process () Project planning definition ystems design mplementation ntegration & testing Repeat for each feature at major milestones nstallation & deployment Maintenance After all features have been integrated and tested 3

4 Fundamentals of GU Development Process () Planning Risk analysis ncreasing complexity Client communication tart ngineering nd (Client) valuation Construction 4

5 Fundamentals of GU Development Process () Client communication stablish 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 ngineering Detailed specification of HW and W, flowchart, system design, Construction ngineering tasks into code, integration & test, install, maintain, user support Client evaluation Obtain feedback of evaluation during development and installation 5

6 Fundamentals of GU Development Process (V) User Centered Design 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 GU to develop mplement alpha version and conduct usability tests with potential users 6

7 Graphical User nterface Design valuation () Define user and usability requirements Model user tasks Model user objects Define style guide Design GU Prototype GU valuate GU Usability problems hip GU (system) 7

8 Graphical User nterface Design valuation () Define users and usability requirements Questions Tasks Objects tyle Who are the end users? Design - What characteristics and knowledge Prototype do the users have? - What will their pattern of use be? valuate - 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 nterface Design valuation () Define users and usability requirements Outputs Tasks Objects tyle User class description describes different types of end-users in a cluster-like way Design Prototype valuate Usability requirements with evaluation criteria and level which must be achieved by GU 9

10 Graphical User nterface Design valuation (V) Model User Tasks Questions Tasks Objects Design tyle What tasks do the users perform? - What are they trying to achieve (task goals)? - How frequently do users perform this tasks? Prototype valuate - 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: Object is something on the screen that accepts user input like command buttons, text boxes, radio buttons, menus 10

11 Graphical User nterface Design valuation (V) Model User Tasks Outputs Tasks Objects Design tyle Task models - Defining what tasks a user will perform This is a key-topic of GU design Prototype valuate - nfluences W to be written for GU, 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 nterface Design valuation (V) Model User Objects Questions Tasks Objects Design tyle 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? Prototype valuate Remark: Object is something on the screen that accepts user input like command buttons, text boxes, radio buttons, menues 12

13 Graphical User nterface Design valuation (V) Model User Objects Outputs Tasks Objects Design tyle User object models Can be one or more for each type depending on users xamples: Prototype valuate - imple GU for inexperienced users & extended for pros see PANAONC digital camera Glossary of user terms 13

14 Graphical User nterface Variations Model User Objects xpert nexperienced 14

15 Graphical User nterface Design valuation (V) Define style guide Questions Tasks Objects Design tyle Prototype What GU environment will be used? valuate 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 nterface Design valuation (X) Define style guide Outputs Tasks Objects Design tyle Application style guide Prototype Defines the GU elements valuate (objects, menues, ) used in terms of design and interaction with the user and reaction of the object 16

17 Case tudy : Graphical User nterface Design valuation Questions Who are the end users? - What characteristics and knowledge do the users have? Techniker ngenieure, (PC-) Fachleute - What will their pattern of use be? Regelmäßig, aber auch erstmalig - What will the system means to them? Arbeitserleichterung, (personal benefits, costs, motivation, ) What are the usability requirements? - Which usability requirement is critical? Meßwerte dürfen nicht unabsichtlich gelöscht oder überschrieben werden, Reicht tromversorgung für die vorgesehene Messzeit? - How can these requirements be specified so that they can measured and tested? Kann man Daten beabsichtigt unabsichtlich löschen? 17

18 Case tudy : Graphical User nterface Design valuation Outputs User class description describes different types of end-users in a cluster-like way Techniker (Theo), ngenieur (ngo) Usability requirements with evaluation criteria and level which must be achieved by GU Leicht bedienbar, Fehlbedienungs-sicher, selbsterklärend 18

19 Graphical User nterface Design valuation (X) Design GU Questions Tasks Objects Design tyle What views of objects are required for the tasks? How should these views be allocated to windows? Prototype valuate 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? 19

20 Graphical User nterface Design valuation (X) Design GU Outputs Tasks Objects Design tyle Window designs including specification of interactive behavior Prototype valuate Window navigation design First stage: GU - supports user tasks - shows user objects - is according to style guide - meets usability requirements 20

21 Graphical User nterface Design valuation (X) Prototype GU Questions Tasks Objects Design tyle How can the user perform the tasks scenarios using the GU? Prototype valuate Are there extra views of objects required? hould windows be restructured to support the tasks better? s 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? 21

22 Graphical User nterface Design valuation (X) Prototype GU Outputs Tasks Objects Design tyle Working prototype of the GU Prototype Revision proposals to GU design valuate as an iterative process - nvestigate usability and feasibility - Validity of tasks- and user object model - Verify style guide 22

23 Graphical User nterface Design valuation (XV) valuate GU Questions Tasks Objects Design tyle How usable is the GU rated by the Prototype (end-) users in terms of usability criteria? valuate What usability problems do users encounter? Does the GU provide adequate support? Aim: Checking if GU - satisfies all usability requirements - adequately supports all tasks 23

24 Graphical User nterface Design valuation (XV) valuate GU Outputs Tasks Objects Design tyle valuation report of usability Prototype of GU design (and prototype) valuate Usability problems Proposed revisions to GU design 24

25 Challenges of W for GU Design All Attractive GUs have to be dynamic and flexible High demands to software development Non-PC Applications Cost pressure in case of products for the mass market Often restricted power consumption Low memory requirements Low computing power 25

26 olutions for W for GU Design Providing class libraries with ready-made GU components (Widgets) (e.g. WNDOW, ANDROD, O etc.) Object oriented programming model High degree of software reusability (standard W e.g. JAVA, HTML 5.0) Compact implementation (especially for µc) Use GU design software (available from various vendors) 26

27 xamples for Low Res GU Design Buttons Text and icons Visualization and measuring instruments 27

28 xamples for Low Res GU Design 8-Bit µc with GPOs and 5 buttons 28

29 xamples for Non WNDOW Mid Res GU Design 29

30 xamples for Non WNDOW Mid Res GU Design 30

31 oftware for GU Design JCONTROL ( JAVA MWN ( for 8-32-Bit µc, AN-C HTML 5.0 ATV ( MWZZARD ( for 8-32-Bit µc, AN-C GU Library ( for low res LCD controllers M WNDOW development tools & plug-ins LNUX development tools & plug-ins AP Automotive: Trialversionen z.b