Hci lec 4
Download as PPT, PDF0 likes128 views
This document provides an overview of interaction design basics including the design process, users, scenarios, navigation design, and principles of interface design. It discusses designing with the user and goals in mind while considering constraints. The design process involves analysis, prototyping, and evaluation. Scenarios help envision how users will interact. Navigation design principles include structure, breadcrumbs, and diagrams. Interface design principles cover grouping, order, alignment, white space, controls, and user feedback.
Hci lec 4
- 1. Human Computer Interaction Interaction Design Basics Lecture 04
- 2. Interaction Design Basics Design: What it is, goals, constraints The design process What happens when Users Who they are, what they are like … Scenarios Rich stories of design Navigation Finding your way around a system Iteration and prototypes Never get it right first time!
- 3. Principles, guidelines and standards •Designing for maximum usability – the goal of interaction design •Standards and guidelines – direction for design • Usability • Easy • Efficient • Entertaining One of the aims of good design
- 4. What is design? Achieving goals within constraints • goals - purpose – who is it for, why do they want it • constraints – materials, platforms, cost, time
- 5. The process of design what is wanted analysis design implement and deploy prototype interviews ethnography what is there vs. what is wanted guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis
- 6. Know Your User • Who are they? • Talk to them • Watch them • Use your imagination
- 7. Scenarios … • What will users want to do? • Step-by-step walkthrough – what can they see (sketches, screen shots) – what do they do (keyboard, mouse etc.) – what are they thinking? • Use and reuse throughout design
- 8. navigation design local structure – single screen global structure – whole site start the systems info and help management messages add user remove user
- 9. Think about Structure • local – looking from this screen out • global – structure of site, movement between screens • wider still – relationship with other applications
- 10. Four Golden Rules • knowing where you are • knowing what you can do • knowing where you are going – or what will happen • knowing where you’ve been – or what you’ve done
- 11. where you are – breadcrumbs shows path through web site hierarchy web site top level category sub-category this page live links to higher levels
- 12. Hierarchical Diagrams • parts of application – screens or groups of screens • typically functional separation the systems info and help management messages add user remove user
- 13. Think About Dialogue what does it mean in UI design? Minister: do you name take this woman … Man: I do Minister: do you name take this man … Woman: I do Minister: I now pronounce you man and wife
- 14. think about dialogue Marriage Service Minister: do you name take this woman …
- 15. screen design and layout basic principles grouping, structure, order alignment use of white space ABCDEFGHIJKLM NOPQRSTUVWXYZ Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell
- 16. Grouping and Structure logically together physically together Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … …
- 17. Order of Groups and Items • think! - what is natural order • should match screen order! – use boxes, space etc. – set up tabbing right! • instructions – beware the cake recipie syndrome! … mix milk and flour, add the fruit after beating them
- 18. Decoration • use boxes to group logical items • use fonts for emphasis, headings • but not too many!! ABCDEFGHIJKLM NOPQRSTUVWXYZ
- 19. alignment - text • you read from left to right (English and European) align left hand side Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan boring but readable!
- 20. alignment - names • Usually scanning for surnames make it easy! Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell
- 21. alignment - numbers think purpose! which is biggest? 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256
- 22. alignment - numbers visually: long number = big number align decimal points or right align integers 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34
- 23. multiple columns • scanning across gaps hard: (often hard to avoid with large data base fields) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
- 24. multiple columns - 2 • use leaders sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
- 25. multiple columns - 3 • or greying (vertical too) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
- 26. sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 multiple columns - 4 • or even (with care!) ‘bad’ alignment
- 27. white space - the counter WHAT YOU SEE
- 28. white space - the counter WHAT YOU SEE THE GAPS BETWEEN
- 32. physical controls • grouping of items – defrost settings – type of food – time to cooktype of food time to cook defrost settings
- 33. physical controls • grouping of items • order of items 1) type of heating 2) temperature 3) time to cook 4 4) start 2 3 1
- 34. physical controls • grouping of items • order of items • decoratio – buttonsdifferent colours for different functions lines around related buttons (temp up/down)
- 35. physical controls • grouping of items • order of items • decoration • alignment ? easy to scan ? centred text in buttons
- 36. physical controls • grouping of items • order of items • decoration • alignment • white space gaps to aid grouping
- 37. user action and control entering information knowing what to do
- 38. entering information • forms, dialogue boxes – presentation + data input – similar layout issues – alignment • logical layout – use task analysis (ch15) – groupings – natural order for entering information • top-bottom, left-right (depending on culture) • set tab order for keyboard entry Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster ?
- 39. knowing what to do • what is active what is passive – where do you click – where do you type • consistent style helps – e.g. web underlined links • labels and icons – standards for common actions – language – bold = current state or action
- 40. bad use of colour • over use - without very good reason (e.g. kids’ site) • colour blindness • poor use of contrast • do adjust your set! – adjust your monitor to greys only – can you still read your screen?