ch7

• Interface types


  • Command
  • Graphical
  • Multimedia
  • Virtual reality
  • Web
  • Mobile
  • Appliance
  • Voice
  • Pen
  • Touch
  • Gesture
  • Haptic
  • Multimodal
  • Shareable
  • Tangible
  • Augmented Reality
  • Wearables
  • Robots and drones
  • Brain–computer interaction
  • Smart
• Command line interfaces


  1. Commands such as abbreviations (for instance, ls) typed in at the prompt to which the system responds (for example, by listing current files)

  2. Some are hard wired at keyboard, while others can be assigned to keys

  3. Efficient, precise, and fast

  4. Large overhead to learning set of commands
• Command line interfaces


  • Form, name types and structure are key research questions
  • Consistency is most important design principle
  • For example, always use first letter of command
  • Command interfaces popular for web scripting
• Graphical user interfaces (GUIs)


  • 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
• Simple smartwatch menus


  • with 1, 2, or 3 options
• Window 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
• Is this method any better?
• Menu styles


  • Flat list
  • Drop down
  • Pop-up
  • Contextual
  • Collapsible
  • Mega
• Window management


  • Enables users to move fluidly between different windows (and monitors)
  • How to switch attention between windows without getting distracted
  • Design principles of spacing, grouping, and simplicity should be used
  • Which terms to use for menu options (for example, "front" versus "bring to front"
  • Mega menus easier to navigate than drop-down ones
• Icon design


  • Icons are assumed to be easier to learn and remember than commands
  • Icons can be designed to be compact and variably positioned on a screen
  • Now pervasive in every interface
  • For example, they represent desktop objects, tools (for example, a paintbrush), applications (for instance, a web browser), and operations (such as cut, paste, next, accept, and change)
• Icons


  • Since the Xerox Star days, icons have changed in their look and feel: black and white, Color, shadowing, photorealistic images, 3D rendering, and animation
  • Many designed to be very detailed and animated making them both visually attractive and informative
  • Can be highly inviting, emotionally appealing, and feel alive
• Icon forms


  • The mapping between the representation and underlying referent can be: Similar (for example, a picture of a file to represent the object file), Analogical (for instance, a picture of a pair of scissors to represent 'cut'), Arbitrary (such as the use of an X to represent 'delete')
  • The most effective icons are similar ones
  • Many operations are actions making it more difficult to represent them
  • Use a combination of objects and symbols that capture the salient part of an action
• Iconography


  • There is a wealth of resources for creating icons
  • Guidelines, style guides, icon builders, libraries, online tutorials
  • Text labels can be used alongside icons to help identification for small icon sets
  • For large icon sets (for instance, photo editing or word processing) can use the hover function
• Multimedia


  • Combines different media within a single interface with various forms of interactivity
  • Graphics, text, video, sound, and animation
  • Users click on links in an image or text
  • Another part of the program
  • An animation or a video clip is played
  • Users can return to where they were or move on to another place
  • Can provide better ways of presenting information than a single media can
• Pros and cons of Multimedia


  • Facilitates rapid access to multiple representations of information
  • Can provide better ways of presenting information than can any media alone
  • Can enable easier learning, better understanding, more engagement, and more pleasure
  • Can encourage users to explore different parts of a game or story
  • Tendency to play video clips and animations while skimming through accompanying text or diagrams
• Multimedia research and design considerations

  • How to design multimedia to help users explore, keep track of, and integrate the multiple representations
  • Provide hands-on interactivities and simulations that the user has to complete to solve a task
  • Provide quizzes, electronic notebooks, and games
  • Multimedia good for supporting certain activities, such as browsing, but less optimal for reading at length
• Virtual reality


  • Computer-generated graphical simulations providing: "the illusion of participation in a synthetic environment rather than external observation of such an environment" (Gigante, 1993)
  • Provide new kinds of experience, enabling users to interact with objects and navigate in 3D space
  • Create highly-engaging user experiences
• Pros and cons of Virtual reality

  • Can have a higher level of fidelity with objects that they represent compared to multimedia
  • Induces a sense of presence where someone is totally engrossed by the experience
  • "a state of consciousness, the (psychological) sense of being in the virtual environment" (Slater and Wilbur, 1999)
  • Provides different viewpoints: first and third person
  • Early head-mounted displays were uncomfortable to wear and could cause motion sickness and disorientation
  • Lighter VR headsets are now available (for example, HTC Vive) with more accurate head tracking
• Application areas of Virtual reality

  • Video games
  • Arcade games for social groups
  • Therapy for fears
  • Experience how others feel emotions (For example, empathy and compassion)
  • Enrich user's planning experience for travel destinations
  • Architecture, design, and education
• Virtual reality research and design considerations

  • Much research on how to design safe and realistic VRs to facilitate training (For example, flying simulators)
  • Help people overcome phobias (for example, spiders or talking in public)
  • How best to navigate through them (for instance, first versus third person)
  • How to control interactions and movements (for example, by using head and body movements)
  • How best to interact with information (for instance by using keypads, pointing, and joystick buttons)
  • Level of realism to aim for to engender a sense of presence
• Website design


  • Early websites were largely text-based, providing hyperlinks
  • 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)
• Usability versus aesthetics?


  • Vanilla or multi-flavor design?
  • Ease of finding something versus aesthetic and enjoyable experience
  • Web designers are: "thinking great literature"
  • Users read the web like a: "billboard going by at 60 miles an hour" (Krug, 2014)
  • Need to determine how to brand a web page to catch and keep 'eyeballs'
• 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
• In your face Web ads


  • Web advertising is often intrusive and pervasive
  • Flashing, aggressive, persistent, and annoying
  • Often requires action to get rid of
  • What is the alternative? Use of ad blockers
• Website design research and design considerations


  • Many books and guidelines on website design
  • Veen's (2001) three core questions to consider when designing any website: Where am I? Where can I go? What's here?
• 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)
• Mobile interface research and design considerations

  • Mobile interfaces can be cumbersome to use for those with poor manual dexterity or 'fat' fingers
  • Key concern is hit area: Area on the phone display that the user touches to make something happen, such as a key, an icon, a button, or an app
  • Space needs to be big enough for all fingers to press accurately
  • If too small, the user may accidentally press the wrong key
  • Fitts' law can be used to help design right spacing
  • Minimum tappable areas should be 44 points x 44 points for all controls
• Appliances


  • Everyday devices in home, public places, or car (For example, washing machines, remotes, toasters, printers, and navigation systems)
  • And personal devices (For instance, digital clock and digital camera)
  • Used for short periods (For example, starting the washing machine, watching a program, buying a ticket, changing the time, or taking a snapshot)
  • Need to be usable with minimal, if any, learning
• Appliance research and design considerations

  • Need to design as transient interfaces with short interactions
  • Simple interfaces
  • Consider trade-off between soft and hard controls (For example, use of buttons or keys, dials, or scrolling)
• 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)
• Modeling human conversations


  • People often interrupt each other in a conversation
  • Especially when ordering in a restaurant, rather than let the waiter go through all of the options
  • Speech technology has a similar feature called 'barge-in'
  • Users can choose an option before the system has finished listing all of the options available
• Structuring VUI dialogs


  • Directed dialogs are where the system is in control of the conversation
  • Where it asks specific questions and requires specific responses
  • More flexible systems allow the user to take the initiative: (For example, "I'd like to go to Paris next Monday for two weeks.")
  • But more chance of error, since caller might assume that the system is like a human
  • Guided prompts can help callers back on track (For example, "Sorry I did not get all that. Did you say you wanted to fly next Monday?")
• Voice assistants (e.g., ChatGPT)

  • Have become popular in many homes
  • Allow all to use rather than being single use
  • Support families playing games, interactive storytelling, jokes, and so forth
  • Can encourage social and emotional bonding
  • Young children (under 4), however, find it difficult to be understood by the voice assistants
  • Frustrating for them
• Voice user interface research and design considerations

  • How to design systems that can keep conversation on track
  • Help people navigate efficiently through a menu system
  • Enable them to recover easily from errors
  • Guide those who are vague, or ambiguous in their requests for information or services
  • Type of voice actor (for example, male, female, neutral, or dialect)
  • Do people prefer to listen to and are more patient with a female or male voice? Would accent influence such decision?
• Pen-based devices


  • Enable people to write, draw, select, and move objects at an interface using light pens or styluses
  • Capitalize on the well-honed drawing skills developed from childhood
  • Digital ink, for example, Anoto, use a combination of ordinary ink pen with digital camera that digitally records everything written with the pen on special paper
• Advantages of pen-based devices

  • Allows users to annotate existing documents quickly and easily
  • Can be used to fill in paper-based forms that can readily be converted to a digital record using standard typeface
  • Can be used by remote teams to communicate and work on the same documents
• 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 fingertip actions, for example, swiping, flicking, pinching, pushing, and tapping
  • They do so by registering touches at multiple locations using a grid
  • 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
• 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 fingertip actions, for example, swiping, flicking, pinching, pushing, and tapping
  • They do so by registering touches at multiple locations using a grid
  • 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
• A multi-touch surface
• Research and design considerations for touchscreens

  • Provides fluid and direct styles of interaction involving freehand and pen-based gestures for certain tasks
  • Core design concerns include whether size, orientation, and shape of touch displays effect collaboration
  • Much faster to scroll through wheels, carousels, and bars of thumbnail images or lists of options by finger flicking
  • Gestures need to be learned for multi-touch, so a small set of gestures for common commands is preferable
  • More cumbersome, error-prone, and slower to type using a virtual keyboard on a touch display than using a physical keyboard