Usability GUIdevelopment GUI Select the application structure Build

Usability GUI-development GUI (Select the application structure) Build the navigation model and evaluate Design the screens Build the menus, evaluate Select the command buttons Select the metaphors Select representations Create the layout Create the fields, labels and other controls Add the shortcuts and icons, evaluate Check the colours, visibility, restrictions, conceptual model, mappings, symbol language, exits, and feedback Build the dialog boxes accordingly Build the helps Evaluate Käyttöliittymät / GUI 1 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI Product development User descriptions -identification and categorisation Task analysis Context analysisi Usability requirements Requirements Navigation maps (Interaction models etc. ) Initial design Interactive design and testing Add the code here Design the navigation model Design the windows Prototypes Unfinished parts of the product User interfaces Test Implementing and training Use Käyttöliittymät / GUI 2 Interviews, meetings questionaires, observation logs, usability tests Product+ manuals Implemented product Iteration, usability tests, walktroughs with use scenarios, heuristic walktroughs cognitive walktrough guidelines, principles checklists usability tests (validating) interviews questionaires observation logs Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI 2 important strategies Transforming Iteration Scenarios A product Evaluate Analyse Build Design Mock-ups Checking the usability Prototypes Käyttöliittymät / GUI 3 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

GUI-development From scenarios Usability GUI to prototypes 1. Draw the flowcharts from the scenarios (Remember the PROBLEM SITUATIONS) 2. Search the (User’s)TASKobjects from the task-flows and scenarios (use cases) 1. no Trigger: the borrower says that Is it in loan? no a he has returned Change state of yes book that he seems Is it in loan? the book= seeking to have in loan Check Change statethe of selves Add the book of yes the book= seeking Check the book the seeking list Check the selves Add the book of of the customer Does helist insist? yes the seeking Result: . . . of the customer Does he insist? yes Result: . . . Borrower 3. Search and describe objects, their functions, attributes, identifications, fathers and childs child or adult customer of library, who has the card attributes of task object action on task objects phones address information in card containment street address number postal address datum among task objects I am inrelations In me name Open Save Print Add new edit Käyttöliittymät / GUI 4 2, 3. Identifies of task object loans orders books in search Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI …from scenarios (use cases) to prototypes 4. Build the navigation model Tell the use-scenarios, TEST THE MODEL yes Result: . . . AGAINST IT and MAKE CORRECTIONS 4. s 5. Transform the objects as GUI-objects, TEST! 5. s Käyttöliittymät / GUI 5 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI Objects and user interface Borrower identification child or adult customer of library, who has the card attributes name phones address information in card street address number commands postal address datum (Loans, orders, disappeared books) I am in Open Save Print Add new edit Käyttöliittymät / GUI 6 In me views loans orders disappeared books Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development Library system: navigation GUI map (partly) Borrower list or card number or social security number Fines Borrower Guardian/ ward Books in search Borrowed books selection Käyttöliittymät / GUI 7 Orders selection title (look only) selection Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI Taking care of the usability In step 4 Describe and test in details how the scenarios and tasks proceed using the new user interface. Correct the (especially the critical / much used parts) tasks fluent Those functions that must 4. be easy, should also be checked here. (Check for s instance all function names, are they comprehensable for novices You can make a usability test using these charts! Käyttöliittymät / GUI 8 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI Evaluation methods Käyttöliittymät / GUI 9 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development An example GUI The user searches for the customer, Alain Borrower, while mr. Borrower tells his problem: he has returned the book of which he has got a reminder Search Loans Borrower Alain Borrower OK List of loans Mr Borrower ( in the customer object window) is found. The the user clicks “Loans” button on the screen to get to know his loans. There is the reminded book in loan list alright, but mr Borrower insists that he had returned the book 4 weeks ago. . . …. . Käyttöliittymät / GUI 10 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI Evaluation • Heuristical methods • Usability testing – thinking aloud – usability walk trough To navigation maps Prototypes (paper and working) Helps, manuals Products Käyttöliittymät / GUI 11 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI … heuristiset • For first the whole system, then the details Heuristic evaluation is performed by having each individual evaluator inspect the interface alone. Only after all evaluations have been completed are the evaluators allowed to communicate and have their findings aggregated. • In general, heuristic evaluation is difficult for a single individual to do because one person will never be able to find all the usability problems in an interface. Käyttöliittymät / GUI 12 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI …heuristic. . • The most famous ones: Nielsen’s 10 heuristic rules • These heuristics are general rules that seem to describe common properties of usable interfaces. • you can make your own additional rules using typical errors in your company/product type Käyttöliittymät / GUI 13 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI Nielsen’s heuristic rules • Visibility of system status – The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. • Match between system and the real world – The system should speak the users' language with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow realworld conventions, making information appear in a natural and logical order. Käyttöliittymät / GUI 14 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development…heuristic GUI • User control and freedom – Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. • Consistency and standards – Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. • Error prevention – Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Käyttöliittymät / GUI 15 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development …heuristic GUI • Recognition rather than recall – Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. • Flexibility and efficiency of use – Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Käyttöliittymät / GUI 16 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development …heuristic GUI • Aesthetic and minimalist design – Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. • Help users recognize, diagnose, and recover from errors – Error messages should be expressed in plain language (no codes), preciselyindicate the problem, and constructively suggest a solution. Käyttöliittymät / GUI 17 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI …evaluation • Help and documentation – Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. Käyttöliittymät / GUI 18 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI Usability test methods • Thinking aloud method: the user makes the given tasks of a scenario thinking aloud, it means: saying what he/she is thinking (the base method) • Usability walktrough • Comments afterwards • Pair tests =Qualitative tests Quatitative tests Käyttöliittymät / GUI 19 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

GUI-development The steps of thinking aloud Usability GUI • Ordering – the product, goals of the tests, users, scenarios, use envoronment and context ->the method – amount of tests users, functions in testing the time of use ->budjet – tests scenarios and means • The test • Analysis and reporting Käyttöliittymät / GUI 20 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee

Usability GUI-development GUI Pros of testing + + Objective Qualitative test is always useful learning for evaluators and designers more usability errors are found than in other method + it is a very flexible method than even usability people think Käyttöliittymät / GUI 21 Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuottee