Traditional Graphical Interfaces Introduction Sus Lundgren 1 38

Traditional Graphical Interfaces: Introduction Sus Lundgren 1 38

Interaction Design • Designing a GUI is interaction design in the sense that – We design 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…” 2 38

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

GUI Telepathy 1 a: • Shhh! Don’t disturb the user – she or he is working! • There 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 4 38

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 • • • 5 38 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!

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 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? 6 38

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? – – 7 38 A paper? A painting? A photograph? A stack of OH-sheets?

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 8 38

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 9 38

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

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 11 38

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 12 38

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 13 38

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 14 38

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 15 38

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 • Image. Ready: Why can’t I have a simple input field? 16 38

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? ” 17 38

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

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 19 38

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 20 38

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 21 38

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… 22 38

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 23 38

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

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

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 26 38

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 27 38

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 28 38

29 38

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 30 38

Telepathy 2 a: 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? 31 38

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 32 38

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 33 38

Telepathy 3 a: 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) 34 38

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

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

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

Any Questions? 38 38