COMP3008 Fall 2024 Design Concepts PDF

Elizabeth Stobert COMP3008 – FALL 2024 Materials are intended for COMP3008 class use only. Sharing or posting of class content is not permitted. DESIGN CONCEPTS 1 Photo: 1082901185 by Chaosamran_Studio, shutterstock.com  Affordances P...

Elizabeth Stobert COMP3008 – FALL 2024 Materials are intended for COMP3008 class use only. Sharing or posting of class content is not permitted. DESIGN CONCEPTS 1 Photo: 1082901185 by Chaosamran_Studio, shutterstock.com  Affordances Perceived and actual affordances: the actions suggested by the design of an object Knobs should be turned Buttons should be pressed Handles are for grasping Slots are for inserting things Photos: 121512376 by Timolina; 683606308 by weedesign; 140141683 by Heather Lucia Snow; 678680911 by Chatchai chaihan; shutterstock.com  Affordances Problems occur when the perceived affordances do not match the designer’s intended use False affordance: apparent affordance doesn’t have a corresponding real function (looks like a button but can’t be pressed) Photos: 70275916 by Icatnews; 233081299 by Sveta Y; shutterstock.com Perceived affordances in GUI Need to create appropriate visual affordances through familiar idioms and metaphors Photo: 218610844 by Denis Semenchenko; shutterstock.com When simple things need explaining, the design has failed Boxes over his head are moving around and are clickable to get info about their university programs. To view, ”catch” the right one and click on it! Website: https://www.uat.edu/  Constraints The opposite of affordances. Limit the perceived potential actions based on the object’s appearance – Physical constraints: physical limitations constrain possible actions (a large peg cannot fit into a small hole) – Cultural constraints: rely on social/cultural conventions to dictate what is acceptable (red = stop, stand facing front in an elevator) – Logical constraints: logic dictates what should probably happen (no leftover pieces when building Ikea furniture) Photos: 72275470 by Hadrian , 1693864489 by MIA Studio; shutterstock.com  Constraints More constraints = less opportunity for error … particularly for managing user input Photos: screenshots are my own  Design/Psychology of Everyday Things by Don Norman 1990, latest edition 2013 Photo: Amazon.ca  TRY IT … Look at the doors around you. - Do you ever pull when you should push? - Do they need written instructions? Photos: 1344367082 by wedninth; 333769355 by Pair Srinrat; 350890904 by Chulika; 564748882 by CapturePB; 1646137660 by Ken Schulze; 459057079 by Mr.Alex; shutterstock.com DESIGN CONCEPTS 2 Photo: 1082901185 by Chaosamran_Studio, shutterstock.com  The set of possible relations between objects Control-display compatibility Mapping – The natural relationship between controls and displays Photos: 1684033849 by Standret; 1699161304 by Trovoboworod; 1837747 by Joellen L Armstrong; shutterstock.com  Mapping Quick – move the cursor from Screen 1 to Screen 2 Screen 2 Screen 1 Scrolling on Mac vs Windows --- are you directly manipulating the page to move it up, or are you moving the scrollbar down?? Photos: Screenshots are my own  The thing that happens right after an action is performed is assumed by users to have been Causality caused by that action – Interpreted as “feedback” Photo: 80519263 by kpatyhka; shutterstock.com  False Causality Incorrect effect: wrong interpretation linking action and event together E.g., Computer hangs after installing new program even though the two aren’t related. Causes superstitious behaviour Invisible effect: command with no apparent result E.g., Mouse clicks on an unresponsive system… often results in repeated commands which may eventually get interpreted, giving incorrect results Photo: 1755781085 by fizkes; shutterstock.com  Transfer effects Transfer learning/expectations of similar objects to current objects Positive transfer: previous learning is applicable and correct in new situation Negative transfer: previous learning conflicts with new situation Photos: 1666171714 by spaxiax; 163292837 by Alexey Boldin; 66675376 by Mihai Simonia; screenshots are my own and Sebastian’s  Cultural idioms Populations learn idioms (conventions) that mean certain things (red = danger, green = safe) Idioms vary in different cultures (locally specific) – Light switches: up = on (N. America), = off (Britain) – Faucets: clockwise = off (N. America), = on (Britain) Difficult to change – Qwerty keyboard designed to prevent jamming of keys – Dvorak keyboard (‘30s) provably faster Photos: 621883967 by Veniamin Kraskov; shutterstock.com  Individual Differences: Physical Rarely possible to accommodate everyone perfectly Design should cater to 95% of audience (designing only for average is a mistake) Examples: – Smartphones: size, weight, positioning and size of icons – On-screen visibility: font size, line thickness, colour (colour-blind?) Photos: 1627810414 by komokvm; 480062584 by Volodymyr TVERDOKHLIB; shutterstock.com  Individual Differences: Expertise Novices – Walk up & use system – Intro tutorials for more complex uses – UI affords restricted set of tasks Casual – Standard idioms – Recognition (visual affordances over recall) – Reference guides – UI affords basic task structure Intermediate – Advanced idioms – Complex controls – Reminders and tips – UI affords advanced tasks Expert – Shortcuts for power use – UI affords full tasks + customization Photo: 696814915 by David Prado Perucha; 1361025593 by Gorodenkoff; 1689338005 by fizkes; shutterstock.com  Key messages Good design accounts for human limitations and capabilities Use design concepts to analyze existing interfaces and to design new interfaces Concepts must be used appropriately – Not universal truths Photo: MS Office 365  Try it Pick up a physical item – what are its affordances? Constraints? Mappings? – What kind of feedback does it give? – Does it use any idioms? – Are there any likely transfer effects? – Who is the target audience? Would it work for everyone? Now try it with an app Photos: 1724650480 by 88studio; 1259408890 by Everything You Need; 700636498 by Sergey Peterman; shutterstock.com  Human Error Photo: 1024782127 by Master1305; shutterstock.com  We are forgetful Humans are… We don’t see what’s really there We’re imprecise, ambiguous, clumsy well, human We get confused when there’s too much happening We get tired, bored, distracted Photos: 358435634 by Stokkete; shutterstock.com  Types of errors Mistakes: errors from a deliberate process. The user decided to do the wrong thing, often because of lack of knowledge or misunderstanding – e.g., A user tries to connect their laptop to a printer using a wifi connection but it only has a USB connection. Slips: errors in carrying out an intended process. The user knows what to do and may have done it successfully before, but still makes an error – e.g., A user forgets to plug in their laptop to charge overnight. – e.g., A user intends to video-call someone using Zoom but instead opens the Skype app. Photo: 261861617 by file404; shutterstock.com Lesson 1: the myth of human error – Most failures are due to poor designs that don’t recognize human capabilities and fallibilities – This incorrectly gets classified as “human error” Photo: 591219035 by Sinart Creative; shutterstock.com  Preventing errors Include constraints within the interface to limit potential for error Offer suggestions – Auto-correct, auto-complete – Menus for options Use reasonable default values Be forgiving of formatting in user input Provide ability to undo Make it difficult to do risky things Source: https://www.nngroup.com/articles/slips/ ; Photo: 227442373 by ra2 studio; shutterstock.com Lesson 2: good design always accounts for human capabilities and limitations How you can train yourself: - Look for examples of “human error” - Critique them for possible “design errors” - Propose designs that limit/remove these errors Photo: 222833383 by Brian A Jackson; shutterstock.com  Try it Think of an app or something around the house where you or someone else often makes errors while using it – TV remote? – Which key to unlock the door? – Screen-sharing in video-calls? – Changing router settings? How could you improve its design? Photo: MS Office 365