INTERFACE DESIGN ITD34003 CHAPTER 2 PDF

INTERFACE DESIGN ITD34003 CHAPTER 2 : UNDERSTANDING USERS, HOW INTERFACE AFFECTS USERS AND USER-CENTERED APPROACH TOPICS OF DISCUSSION What is cognition? Why it is important to understand in HCI Describe how cognition has been a...

INTERFACE DESIGN ITD34003 CHAPTER 2 : UNDERSTANDING USERS, HOW INTERFACE AFFECTS USERS AND USER-CENTERED APPROACH TOPICS OF DISCUSSION What is cognition? Why it is important to understand in HCI Describe how cognition has been applied to interaction design Explain what are mental models and how to elicit them Cover relevant theories of cognition 2023 2  Which involves fast vs slow thinking? 2+2= 21 × 29 = What color eyes do you have? How many colors are there in the rainbow? How many months in the year have 31 days? What is the name of the first school you attended? 2023 3  How can understanding cognition help? Provides knowledge about what users can and cannot be expected to do Identifies and explains the nature and causes of problems that users encounter Provides theories, modeling tools, guidance, and methods that can lead to the design of better interactive products 2023 4  Cognitive processes Attention Perception Memory Learning Reading, speaking and listening Problem-solving, planning, reasoning and decision-making 2023 5  Which involves fast vs slow thinking? Selecting things on which to concentrate at a point in time from the mass of stimuli around us Allows us to focus on information that is relevant to what we are doing Involves audio and/or visual senses Focused and divided attention  Enables us to be selective in terms of the mass of competing stimuli, but limits our ability to keep track of all events Design recommendation  Information at the interface should be structured to capture users’ attention, for example, use perceptual boundaries (windows), color, reverse video, sound, and flashing lights 2023 6  Activity: Find the price for a double room at the Quality Inn in Pennsylvania 2023 7  Multitasking and attention Is it possible to perform multiple tasks without one or more of them being detrimentally affected? Multitasking can cause people to lose their train of thought, make errors, and need to start over 2023 8 Is it OK to use a phone when driving? 2023 9  The answer is : No! Drivers are prone to be distracted There is a significant chance of causing accidents Drivers’ reaction times are longer to external events when talking on the phone in a car (Caird et al., 2018) Response time is slower to unexpected events (Briggs et al., 2018) 2023 10  Design implications for attention Context: Make information salient when it needs to be attended to at a given stage of a task Use techniques to achieve this: For example, color, ordering, spacing, underlining, sequencing, and animation Avoid cluttering visual interfaces with too much information Consider designing different ways to support effective switching and returning to an interface 2023 11  Avoiding cluster 2023 12  Perception How information is acquired from the world and transformed into experiences Obvious implication is to design representations that are readily perceivable, for instance: Text should be legible Icons should be easy to distinguish and read 2023 13  Perception Hamburger icon for navigation. Instagram app for iOS. 2023 14  Activity: Which is the easiest to read and why? What is the time? What is the time? What is the time? What is the time? What is the time? 2023 15  Design implications Icons should enable users to distinguish their meaning readily Bordering and spacing are effective visual ways of grouping information Sounds should be audible and distinguishable Research proper color contrast techniques when designing an interface: Yellow on black or blue is fine Yellow on green or white is a no-no Haptic feedback should be used judiciously 2023 16  Memory Involves recalling various kinds of knowledge that allow people to act appropriately  For example, recognizing someone’s face or remembering someone’s name First, encode and then retrieve knowledge We don’t remember everything−it involves filtering and processing what is attended to Context is important as to how we remember (that is, where, when, how, and so on) We recognize things much better than being able to recall things 2023 17  Recognition versus recall Command-based interfaces require users to recall from memory a name from a possible set of 100s of names Graphical interfaces provide visually-based options (menus, icons) that users need only browse through until they recognize one Web browsers provide tabs and history lists of visited URLs that support recognition memory 2023 18  The problem with the classic ‘7,+ or − 2’ George Miller’s (1956) theory of how much information people can remember People’s immediate memory capacity is very limited to 7, + or −2 Has been applied in interaction design when considering how many options to display But is it a good use of a theory in HCI? Is it helpful? 2023 19  When creating an interface, should the designer… Present only 7 options on a menu Display only 7 icons on a tool bar Have no more than 7 bullets in a list Place only 7 items on a pull down menu Place only 7 tabs on the top of a website page? Not necessarily… 2023 20  The reason is… People can scan lists of bullets, tabs, and menu items for the one they want They don’t have to recall them from memory, having only briefly heard or seen them So you can have more than nine at the interface  For instance, history lists of websites visited Sometimes a small number of items is good  For example, smart watch displays Depends on task and available screen estate 2023 21  Personal Information management This is a growing problem for many users: They accumulate a vast number of documents, images, music files, video clips, emails, attachments, bookmarks, and so forth Where and how to save them all; then remembering what they were called and where to find them again Naming most common means of encoding them But can be difficult to remember, especially when you have 10,000s How might such a process be facilitated taking into account people’s memory abilities? 2023 22  Personal Information management Bergman and Whittaker, three interdependent processes model (2016) to help people manage their stuff: I. How to decide what stuff to keep II. How to organize it when storing III. Which strategies to use to retrieve it later Most common approach is to use folders and naming Strong preference for scanning across and within folders when looking for something Search engines only helpful if you know the name of the file Smart search engines help with listing relevant files for partial name or when type in first letter 2023 23 Apple’s Spotlight search tool 2023 24  Memory load Online/mobile and phone banking now require users to provide multiple pieces of information to access their account  For instance, ZIP code, birthplace, a memorable date, first school attended  Known as multifactor authentication (MFA) Why?  Increased security concerns Password managers, such as LastPass, have been developed that require only one master password  Reduces stress and memory load on users Passwords could become extinct with the widespread use of biometrics and computer vision algorithms 2023 25  Memory aids SenseCam, developed by Microsoft Research Labs (now Autographer)  A wearable device that intermittently takes photos without any user intervention while worn  Digital images taken are stored and revisited using special software  Has been found to improve people’s memory, especially those suffering from dementia Other aids include RemArc, which triggers long-term memory using old BBC materials 2023 26 SenseCam 2023 27  Design implications Reduce cognitive load by avoiding long and complicated procedures for carrying out tasks Design interfaces that promote recognition rather than recall Provide users with various ways of labelling digital information to help them easily identify it again  For example, folders, categories, color, flagging, and time stamping 2023 28  Consider your design needs before choosing a label solution 2023 29  Modern labelling solutions empower you to track products for shipping 2023 30  Learning Involves the accumulation of skills and knowledge involving memory Two main types:  Incidental learning (for example, recognizing people’s faces, what you did today)  Intentional learning (for instance, studying for an exam, learning to cook)  Intentional learning is much harder!  Many technologies have been developed to help (for example, multimedia, animations, VR) People find it hard to learn by following instructions in a manual People prefer to learn by doing 2023 31  Virtual reality is the use of computer technology to create simulated environments. 2023 32  Design implications Design interfaces that encourage exploration Design interfaces that constrain and guide learners Dynamically linking concepts and representations can facilitate the learning of complex material 2023 33 Design implications Design interfaces that encourage exploration Design interfaces that constrain and guide learners Dynamically linking concepts and representations can facilitate the learning of complex material 2023 34  Reading, speaking, and listening The ease with which people can read, listen, or speak differs: Many prefer listening to reading Reading can be quicker than speaking or listening Listening requires less cognitive effort than reading or speaking Dyslexics have difficulties understanding and recognizing written words 2023 35  Applications Voice user interfaces allow users to interact with them by asking questions  For example, Google Voice, Siri, and Alexa Speech-output systems use artificially-generated speech  For instance, written text-to-speech systems for the visually impaired Natural-language systems enable users to type in questions and give text-based responses  Such as, chatbots 2023 36  voice assistant on Amazon’s Alexa 2023 37  Siri - Voice User Interface Design 2023 38  Design implications Speech-based menus and instructions should be short Accentuate the intonation of artificially generated speech voices  They are harder to understand than human voices Provide opportunities for making text large on a screen 2023 39  Problem-solving, planning, reasoning, and decision-making All these processes involve reflective cognition  For example, thinking about what to do, what the options are, and the consequences Often involves conscious processes, discussion with others (or oneself), and the use of artifacts  Such as maps, books, pen, and paper This may involve working through different scenarios and deciding which is the best option Weighing up alternatives 2023 40  Design implications Provide information and help pages that are easy to access for people who wish to understand more about how to carry out an activity more effectively (for example, web searching) Use simple and memorable functions to support rapid decision-making and planning 2023 41  Cognitive frameworks These are used to explain and predict user behavior at the interface  Based on theories of behavior  Focus is on mental processes that take place  Also use of artifacts and representations Most well known are:  Mental models  Gulfs of execution and evaluation  Distributed cognition  External and embodied cognition 2023 42  Mental models Users develop an understanding of a system through learning about and using it Knowledge is sometimes described as a mental model: How to use the system (what to do next) What to do with unfamiliar systems or unexpected situations (how the system works) People make inferences using mental models of how to carry out tasks 2023 43  Everyday reasoning and mental models (a) You arrive home on a cold winter’s night to a cold house. How do you get the house to warm up as quickly as possible? Set the thermostat to be at its highest or to the desired temperature? (b) You arrive home starving hungry. You look in the fridge and find all that is left is an uncooked pizza. You have an electric oven. Do you warm it up to 375 degrees first and then put it in (as specified by the instructions) or turn the oven up higher to try to warm it up quicker? 2023 44  How can UX be designed to help people build better mental models? Clear and easy to use instructions Appropriate tutorials and contextual sensitive guidance Provide online videos and chatbot windows when needing help Transparency: to make interfaces intuitive to use Affordances of what actions an interface allows  For example, swiping, clicking, or selecting 2023 45  Gulfs of execution and evaluation The ‘gulfs’ explicate the gaps that exist between the user and the interface The gulf of execution The distance from the user to the physical system The gulf of evaluation The distance from the physical system to the user Bridging the gulfs can reduce cognitive effort required to perform tasks Can reveal whether interface increases or decreases cognitive load and whether it is obvious what to do next (Norman, 1986; Hutchins et al, 1986) 2023 46 Bridging the gulfs 2023 47  Information processing Conceptualizes human performance in metaphorical terms of information processing stages 2023 48  Limitations Based on modeling mental activities that happen exclusively inside the head Do not adequately account for how people interact with computers and other devices in real world 2023 49  External cognition Concerned with explaining how we interact with external representations (such as maps, notes, and diagrams) What are the cognitive benefits and what processes involved How they extend cognition What technologies can we develop to help people carry out complex tasks (for example, learning, problem solving, and decision-making)? 2023 50  Externalizing to reduce memory load Examples include the use of diaries, reminders, calendars, notes, shopping lists, to-do lists  Written to remind us of what to do Post-its, piles, and marked emails are used to:  Where placed indicates the priority of what to do 2023 51  Annotation and cognitive tracing Annotation involves modifying existing representations through making marks  For example, crossing off, ticking, and underlining Cognitive tracing involves externally manipulating items into different orders or structures  For instance, playing Scrabble or cards 2023 52  Summary Cognition Cognition involves involves many many processes processes including including attention, attention, memory, memory, perception, perception, and and learning learning The The way way an an interface interface is is designed designed can can greatly greatly affect affect how how well well users users can can perceive, perceive, attend, attend, learn, learn, and and remember remember how how to to do do their their tasks tasks Theoretical Theoretical frameworks, frameworks, suchsuch as as mental mental models models and and external external cognition, cognition, provide provide ways ways ofof understanding understanding howhow and and why why people people interact with products interact with products This This can can lead lead toto thinking thinking about about how how to to design design better better products products  Types of Interfaces that affects user 2023 54 Overview Interface types​ Highlight the main design and research considerations for each of the different interfaces​ Type of interfaces : 2023 55  Command line interfaces Commands such as abbreviations (for instance, ls) typed in at the prompt to which the system responds (for example, by listing current files)​ Some are hard wired at keyboard, while others can be assigned to keys​ Efficient, precise, and fast​ Second Life command line-based interface for visually- 2023 impaired users 56  Graphical user interfaces (GUI) Xerox Star first WIMP gave rise to GUIs Windows Sections of the screen that can be scrolled, stretched, overlapped, opened, closed, and moved around the screen using the mouse Icons Pictograms that represent applications, objects, commands, and tools that were opened when clicked on Menus Lists of options that can be scrolled through and selected Pointing device A mouse controlling the cursor as a point of entry to the windows, menus, and icons on the screen 2023 57  Example of first-generation GUI Simple smartwatch menus with 1, 2, or 3 options 2023 58  Windows design Windows were invented to overcome the physical constraints of a computer display They enable more information to be viewed and tasks to be performed Scroll bars within windows enable more information to be viewed Multiple windows can make it difficult to find desired one Listing, tabbing, and thumbnails are techniques that can help 2023 59  Windows design: Thumbnails of top websites visited and suggested highlights Selecting a country from a scrolling window 2023 60  Menu styles Flat list: Good for showing large number of options at the same time when display is small Drop down: Shows more options on same screen (for example, cascading) Pop-up: When pressed, command key for relevant options Contextual: Provides access to often-used commands associated with a particular item Collapsible: Toggles between + and − icons on a header to expand or contract its contents Mega: All options shown using 2D drop-down layout 2023 61  Template for a collapsible menu A mega menu 2023 62  Virtual reality Provide new kinds of experience, enabling users to interact with objects and navigate in 3D space Create highly-engaging user experiences Areas : Video games Arcade games for social groups Architecture, design, and education 2023 63 Virtual reality https://www.youtube.com/ watch?v=u5L9Mvh7tAk Sony PS VR2 2023 64  Website design Concern was with how best to structure information to enable users to navigate and access them easily and quickly Nowadays, more emphasis is on making pages distinctive, striking, and aesthetically pleasing Need to think of how to design information for multiple platforms—keyboard or touch?  For example, smartphones, tablets, and PCs 2023 65  Breadcrumbs for navigation Breadcrumbs are category labels: Enable users to look at other pages without losing track of where they have come from Very usable Enable one-click access to higher site levels Attract first time visitors to continue to browse a website having viewed the landing page 2023 66  Mobile interfaces Handheld devices intended to be used while on the move Have become pervasive, increasingly used in all aspects of everyday and working life  For example, phones, fitness trackers, and smartwatches Larger-sized tablets used in mobile settings  Including those used by flight attendants, marketing professionals, and at car rental returns 2023 67 QR codes and smartphon es 2023 68 Voice User Interfaces Involves a person talking with a spoken language app, for example, timetable, travel planner, or phone service Used most for inquiring about specific information, for example, flight times or to perform a transaction, such as buying a ticket Also used by people with visual impairments  For example, speech recognition word processors, page scanners, web readers, and home control systems 2023 69 Touchscreens Single touchscreens are used in walk-up kiosks (such as ticket machines and ATMs) to detect the presence and location of a person’s touch on the display Multi-touch surfaces support a range of more dynamic finger-tip actions, for example, swiping, flicking, pinching, pushing, and tapping Now used for many kinds of displays, such as smartphones, iPods, tablets, and tabletops  Supports one and two hand gestures, including tapping, zooming, stretching, flicking, dwelling, and dragging 2023 70 Gesture-based systems Gestures involve moving arms and hands to communicate Uses camera recognition, sensor, and computer vision techniques  Recognize people’s arm and hand gestures in a room  Gestures need to be presented sequentially to be understood (compare with the way sentences are constructed) Recognizes core gestures for manipulating MRI or CT images using Microsoft Kinect 2023 71  Haptic interfaces Provide tactile feedback  By applying vibration and forces to a person’s body, using actuators that are embedded in their clothing or a device they are carrying, such as a smartphone Vibrotactile feedback can be used to simulate the sense of touch between remote people who want to communicate Ultrahaptics creates the illusion of touch in midair using ultrasound to make the illusion of 3D shapes 2023 72 Haptic interfaces Ultrahaptics 2023 73 Realtime vibrotactile feedback Provides nudges when playing violin incorrectly Uses motion capture to sense arm movements that deviate from model Nudges are short vibrations on arms and hands 2023 74  Summary Many Many innovative innovative interfaces interfaces have have emerged emerged in in last last 30 30 years, years, including including speech, speech, wearable, wearable, mobile, mobile, brain, brain, and and tangible tangible This This raises raises many many design design and and research research questions questions as as to to decide decide which which to to use use  For For example, example, how how best best to to represent represent information information to to the the user user so so that that they they can carry out ongoing activity or task can carry out ongoing activity or task New New smart smart interfaces interfaces that that are are context-aware context-aware and and monitor monitor people people  Raising Raising new new ethical ethical issues issues concerned concerned with with what what data data is is being being collected collected and what it is used for and what it is used for