1. 38 1 Traditional Graphical Interfaces: Introduction Sus Lundgren

2. 38 2 Interaction Design Designing a GUI is interaction design in the sense that –We design the the behavior of the interfaces –We thus design the way the user will interact (behave together) with it An interaction designer can be compared with an architect Thus design for use; consider functionality (i.e. behavior) first, before designing anything –Express this as actions, not functions: ”I want to draw a blue rectangle”, not ”I want a rectangle tool that I can use, and then a Fill-tool…”

3. 38 3 The Telepathic interface… Isn’t quite here yet… http://www.fullstop.se/nemi/index2.html

4. 38 4 GUI Telepathy 1a: Shhh! Don’t disturb the user – she or he is working! There are a number of things to take into account –Design a GUI that suits the users mental model of the program and what it does –Provide good metaphors or idioms –Make adjustments to meet needs from any user, from beginner to expert –Support flow –Avoid excise

5. 38 5 Mental Models Users have mental models regarding items and tasks How to best depict ”green”? 1.Use the word: ”green” 2.Use the RGB: 0,153,0 /009900 3. 4. Green  example from Photoshop / Variations Mental models can be wrong, but that doesn’t matter as long as the user is satisfied and it does not impair work Most users don’t understand Boolean logic!

6. 38 6 Metaphors Metaphors can help the new users to grasp what a UI does, based upon intuition –Designer and user must have a similar way to associate The functionality / program and the metaphors describing them will diverge –No one has folders in folders in folders in a real-life cabinet Metaphors will restrict freedom of thought –For the user: a word processing program isn’t very powerful if you think it works exactly like a typewriter –For the designer: now, where’s that scrollbar?

7. 38 7 Metaphors Some programs mix metaphors… –This can confuse users  they need to re-adjust mental models –This can help users to understand functionality ”outside” the general metaphor Photoshop: the image you work on is what? –A paper? –A painting? –A photograph? –A stack of OH-sheets?

8. 38 8 Affordances An affordance is a quality in a thing that indicates a certain use –What we think an object can do, based upon what it looks like it can do –what we believe we can do with it E.g. buttons have a clear push-affordance lent from reality Opposite: constraint –E.g. impossible to do something wrong because two parts just don’t fit together etc

9. 38 9 Idioms In linguistic terms an idiom is a figure of speech –To beat around the bush –Att gå som katten kring het gröt In this context the term idiom means ”a way to achieve something” –Initialize a functionality If you don’t know what it means or how it works you simply won’t get it. Ever.  Idioms must be learned Good idioms only need to be learned once –Everyone can use a mouse after a few seconds

10. 38 10 GUI Idioms Menus Dropdowns Radio buttons Screen splitters Windows Title bars …

11. 38 11 Users… There are roughly three groups of users… –Beginners – intermediates – experts These groups need different support when fulfilling their goals Beginners –Noone is a beginner for long; they either learn or quit –Must get a clear idea of what the program can do for them; the program must apply to their mental models –Metaphors can help

12. 38 12 Users… Intermediates –The by far largest group –Know how to learn more, if needed –Have a ”feel” for the program and its visual clues (e.g. page count) Experts –Use the program a lot, perhaps several hours a day –Use even the more obscure functionalities –Have learned shortcuts and/or created macros for their most common tasks

13. 38 13 Users… In comparison, an example: –Beginners use menus –Intermediates use butcons –Experts use shortcuts Hidden functionality: ok, but never alone –You must know it’s there, i.e. that it’s possible to drag and drop files between two windows, or that there is a shortcut command for doing something –Hidden functionality must always have a visible counterpart, i.e. a button or menu choice

14. 38 14 The Delicate Flow Flow: focusing totally on one task –Extremely productive; that’s where our bosses want us to be! Falling out of flow costs –In concentration, time and quality Programs should be like cars: driven by the user –No unnecessary dialogs or questions about data from the program, unless the user has initiated this

15. 38 15 Supporting flow Provide plentiful and sophisticated direct manipulation idioms –Let the user drag and drop instead of entering coordinates Keep tools close at hand –Toolbars, palettes Give modeless, ambient feedback

16. 38 16 Supporting Flow Ask: Can this be made in one step instead of two –Many functions are based upon program structure; one choice/screen/window per functionality Example: Save As –Choose Save As –Specify location –Specify format –Specify other settings ImageReady: Why can’t I have a simple input field?

17. 38 17 Supporting Flow Distinguish between possibility and probability –Save on exit vs don’t save on exit Provide comparisons –Page 7(12) Reflect program status –Show this as modeless feedback Avoid unnecessary reporting –Don’t report ”Everything proceeds as expected, OK?” Provide choices, not blanks –Not: ”Set up your document” but ”Do you want you document to look like a, b, c or customize?”

18. 38 18 Supporting Flow Distinguish between functions and their configuration –Having to submit the same settings over and over again (when saving, printing etc) again is highly tiring Hide dangerous commands –No butcons or shortcuts for ”Format C:” –Thus: the user can relax and does not have to fear to trigger something terrible Be careful with mode-changes –Avoid double tab rows, menus that change with mode

19. 38 19 Eliminating Excise Excise are those extra moves that aren’t goal-directed but still needed; extra work –Filling up gas in your car –Installation & configuration Typical excise are notifying pop-ups, conformation messages etc –Not all of them can be removed, but many Allow input where there’s output –When feedbacking ”this was entered” give possibility to change there and then

20. 38 20 Eliminating Excise ”Stay in the same room” –Rescaling directly on an object, not by choosing a menu and some menu item and then entering numbers in a dialog box somewhere Visual clutter can become excise too –Skip flash intro :) –Reduce cognitive load

21. 38 21 Software Posture The posture is ”a programs way to be” –How it presents itself –Based upon its use Your traditional desktop GUI has four postures –Sovereign; monopolizing applications –Transient; single-functional programs –Daemonic; programs providing invisible functionality –Auxiliary ; assisting programs

22. 38 22 Sovereign Posture For programs that –Are used for long time periods, more or less continuously –Have complex functionalities and features –Can be described as important or primary work tools for the user –Thus use full-screen mode Word processors, spread sheets, programming tools, image processing tools…

23. 38 23 Sovereign Posture Take the pixels: optimize for full-screen mode Main design point: The user will become familiar with the interface soon –Mute colors and texture, otherwise they will become tiring –Toolbars etc can be made smaller than usual, the user will learn to find them –Use peripheral pixels for not-so-important information or functionality –Design an interface that can be explored; indicate casuality

24. 38 24 Sovereign Posture Can you see the difference –After a few hours you will…

25. 38 25 Sovereign Posture Can you see the difference –After a few hours you will…

26. 38 26 Sovereign Posture Users on many levels –Provide several ways to achieve the same result; menu items, butcons, shortcuts Often-used functions must be fast and streamlined –Avoid extra/unnecessary input… Give feedback modelessly

27. 38 27 Transient Posture For minor programs –With few functions –Not used very often, and normally for doing/starting its one task Main design point: Wham bam thank you ma’m –Large buttons –Few functions –Bright colors –Not larger than necessary –Clear labeling

28. 38 28 Daemonic Posture Do not normally interact with the user –Mailer daemon, printer daemon… –Start or shut down at the command from other programs, rather than from the user Main design point: Invisible touch –Represent modelessly –However configuration or settings sometimes have to be made; transient posture

29. 38 29

30. 38 30 Auxiliary Posture Programs/functions that are continuously present, however only supporting –Often report things; status, time etc Never main locus of attention Always on screen –Can afford to be small –Must be very simple and bold in reporting its information

31. 38 31 Telepathy 2a: Considerate Software If an object provides interactivity we will attribute it human characteristics like feelings and goals: Anthropomorphization –The program is trying to print –It doesn’t want to start Cooper: Why not design programs to act like considerate humans?

32. 38 32 Considerate Software ”Takes an interest” –Remembers input info from time to time and program to program ”Is forthcoming” –Gives us relevant information we didn’t ask for, e.g. if the printer is out of paper pr there’s a queue ”Anticipates needs” –Preloads web pages, dates etc Keeps us informed –With modeless feedback Is perceptive –Notes user behavior patterns and adapts to it

33. 38 33 Considerate Software Is self confident… –Doesn’t ask ”are you sure”-questions …but forgiving –Lets you undo whatever you were ”sure” of Fails gracefully –Trying to minimize the danger / data loss Can bend the rules Takes responsibility –If the file is sent to the print handler a ”stop printing” command should be forwarded too

34. 38 34 Telepathy 3a: Smart Software Cooper: Put the idle cycles to work –We have a lot more CPU-power than we use The software should monitor user behavior to be able to –Foresee actions, e.g. preset values –Eliminating or offering choices –Identify start of common command sequences and fulfill them (e.g. manually inversing text)

35. 38 35 Smart Software Should remember data –File locations, both for save and retrieval –Make backup files –Remember the undo-stack from time to time

36. 38 36 What do YOU think? Just how considerate and smart shall an application be? What are the consequences?

37. 38 37 Let’s order some coffee Make a small popup for ordering… …coffee or tea …with or without cream and/or sugar

38. 38 Any Questions?