HCI

• 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
• Highlight the main design and research considerations for each of the different interfaces


  Consider which interface is best for a given application or activity
• 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
  • Large overhead to learning set of commands
• Research and design considerations for command 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
• Research and design considerations for GUIs

  • 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
• Research and design considerations for icons


  • 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
• Research and design considerations for multimedia

  • 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 for 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
• Research and design considerations for virtual reality

  • 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
• Research and design considerations for website design

  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)
• Research and design considerations for mobile interfaces

  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
• Research and design considerations for appliances

  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)
• Research and design considerations for voice interfaces


  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
• 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