Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)

Beat Signer
October 27, 2023

Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)

This lecture forms part of the course Human-Computer Interaction given at the Vrije Universiteit Brussel.

Beat Signer

October 27, 2023
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

  1. 2 December 2005
    Human-Computer Interaction
    Design Guidelines and Models
    Prof. Beat Signer
    Department of Computer Science
    Vrije Universiteit Brussel
    beatsigner.com

    View full-size slide

  2. Beat Signer - Department of Computer Science - [email protected] 2
    October 27, 2023
    Design Guidelines
    ▪ Design guidelines are based on human psychology: how
    people perceive, learn, reason, remember and convert
    intentions into action
    ▪ Over the last 40 years various guidelines and heuristics
    have been defined and adapted / extended for new
    interface types

    View full-size slide

  3. Beat Signer - Department of Computer Science - [email protected] 3
    October 27, 2023
    Eight Golden Rules of Interface Design
    ▪ Strive for consistency
    ▪ Seek universal usability
    ▪ Offer informative feedback
    ▪ Design dialogues to yield closure
    ▪ Prevent errors
    ▪ Permit easy reversal of actions
    ▪ Keep users in control
    ▪ Reduce short-term memory load
    Ben Shneiderman

    View full-size slide

  4. Beat Signer - Department of Computer Science - [email protected] 4
    October 27, 2023
    Ten Usability Heuristics for UI Design
    ▪ Visibility of system status
    ▪ Match between system and real world
    ▪ User control and freedom
    ▪ Consistency and standards
    ▪ Error prevention
    ▪ Recognition rather than recall
    ▪ Flexibility and efficiency of use
    ▪ Aesthetic and minimalistic design
    ▪ Help users recognise, diagnose and recover from errors
    ▪ Help and documentation
    Jacob Nielsen

    View full-size slide

  5. Beat Signer - Department of Computer Science - [email protected] 5
    October 27, 2023
    Visibility of System Status
    ▪ Keep users informed
    about what is going on
    (system state)
    ▪ feedback after each action
    (as quickly as possible)
    ▪ builds up trust
    ▪ Users learn about the
    outcome of previous
    interaction and can plan
    the next steps

    View full-size slide

  6. Beat Signer - Department of Computer Science - [email protected] 6
    October 27, 2023
    Visibility of System Status …
    ▪ Provide feedback about
    what action has been
    done, allowing users to
    continue with their activity
    ▪ audio, tactile, verbal, visual
    or a combination of this
    feedback

    View full-size slide

  7. Beat Signer - Department of Computer Science - [email protected] 7
    October 27, 2023
    Match Between System and Real World
    ▪ Use words and concepts
    familiar to the users
    ▪ Follow real-world
    conventions
    ▪ natural mapping
    ▪ skeumorphic user interfaces
    - e.g. recycle bin icon

    View full-size slide

  8. Beat Signer - Department of Computer Science - [email protected] 8
    October 27, 2023
    User Control and Freedom
    ▪ Actions often performed
    by mistake
    ▪ need “emergency exit” to
    leave unwanted actions
    ▪ Support undo and redo
    ▪ fosters a sense of freedom
    ▪ Show clear way to exit
    current action
    ▪ e.g. cancel button

    View full-size slide

  9. Beat Signer - Department of Computer Science - [email protected] 9
    October 27, 2023
    Consistency and Standards
    ▪ Internal consistency
    ▪ within a single product
    ▪ External consistency
    ▪ maintain consistency across
    products by for example
    following standards
    ▪ e.g. shopping cart feature on
    e-commerce websites
    ▪ Consistent interfaces are
    easier to learn and use

    View full-size slide

  10. Beat Signer - Department of Computer Science - [email protected] 10
    October 27, 2023
    Consistency and Standards …
    ▪ Place information and controls in consistent locations
    ▪ based / supports on perceptual patterns / frames
    ▪ Internal and external keystroke consistency
    ▪ e.g. CTRL-X and CTRL-V
    ▪ External consistency of gesture-based interfaces?
    J. Johnson, Designing with the Mind in Mind

    View full-size slide

  11. Beat Signer - Department of Computer Science - [email protected] 11
    October 27, 2023
    Error Prevention
    ▪ Two types of errors
    ▪ slips are unconscious errors
    caused by inattention
    ▪ mistakes are conscious
    errors based on mismatch of
    user’s mental model
    - inaccurate or incomplete
    information
    ▪ Design to prevent
    mistakes
    ▪ provide accurate and easy
    understandable information

    View full-size slide

  12. Beat Signer - Department of Computer Science - [email protected] 12
    October 27, 2023
    Error Prevention …
    ▪ Design to prevent slips
    ▪ large click targets
    ▪ put space between targets
    ▪ warn users of incompleteness
    ▪ prompt users to confirm actions
    ▪ e.g. do not place ‘save’ menu entry next to ‘exit’ menu entry
    ▪ …
    ▪ Make risky operations hard to do
    ▪ ‘Delete All’ with confirmation defaulting to ‘Cancel’
    ▪ ask confirmation from multiple users
    ▪ Prevent permanent errors by supporting undo
    ▪ Prevent “high-cost” errors first

    View full-size slide

  13. Beat Signer - Department of Computer Science - [email protected] 13
    October 27, 2023
    Recognition Rather Than Recall
    ▪ Reduce a user’s memory
    load by making elements
    and actions visible
    ▪ limited short-term or working
    memory
    ▪ Seeing / hearing and
    choosing is easier than to
    recall and type
    ▪ Recall
    ▪ reactivating a neural pattern
    when the original stimulus is
    absent

    View full-size slide

  14. Beat Signer - Department of Computer Science - [email protected] 14
    October 27, 2023
    Recognition Rather Than Recall …
    ▪ Use pictures where possible to convey functions
    ▪ e.g. toolbar icons
    ▪ people recognise pictures very quickly
    ▪ We also recognise small versions of the pictures
    ▪ e.g. thumbnails of slides in presentation overview
    ▪ Provide cues to let users know where they are
    ▪ e.g. different screen backgrounds when having multiple screens
    ▪ Simplify authentication
    ▪ e.g. biometric authentication rather than remembering passwords
    ▪ Avoid designs that have modes (or provide visible
    feedback about modes)

    View full-size slide

  15. Beat Signer - Department of Computer Science - [email protected] 15
    October 27, 2023
    Flexibility and Efficiency of Use
    ▪ Offer accelerators like
    keyboard shortcuts and
    touch gestures
    ▪ Support personalisation
    and customisation by
    tailoring content and
    functionality

    View full-size slide

  16. Beat Signer - Department of Computer Science - [email protected] 16
    October 27, 2023
    Aesthetic and Minimalistic Design
    ▪ Interfaces should not
    contain irrelevant
    information
    ▪ focus on the essentials
    ▪ aim for high signal-to-noise
    ratio

    View full-size slide

  17. Beat Signer - Department of Computer Science - [email protected] 17
    October 27, 2023
    Help Users Recognise/Recover From Errors
    ▪ Inform users when error
    occurred (recognise)
    ▪ clear error messages
    ▪ Tell users what went
    wrong (diagnose)
    ▪ Offer users a solution
    (recover)
    ▪ shortcut to solution
    ▪ provide undo function
    - operations within an app or more
    complex transitions (e.g. order in
    online store)

    View full-size slide

  18. Beat Signer - Department of Computer Science - [email protected] 18
    October 27, 2023
    Help and Documentation
    ▪ Ensure that it is easy to
    search for help
    ▪ Present contextual help
    and documentation
    ▪ focused on the user’s task
    ▪ List concrete steps to be
    carried out

    View full-size slide

  19. Beat Signer - Department of Computer Science - [email protected] 19
    October 27, 2023
    Visibility
    ▪ Visible functions ensure
    that a user knows what to
    do next
    ▪ voice mail system vs. marble
    answering machine
    ▪ Non-visible functions might
    be harder to use
    ▪ sensor-enabled faucets
    ▪ sensor-enabled lights
    ▪ …

    View full-size slide

  20. Beat Signer - Department of Computer Science - [email protected] 20
    October 27, 2023
    Simplicity
    ▪ Balance offered features
    vs. ease of use (usability)
    ▪ Do not oversimplify and re-
    move necessary features
    - “users want complexity”
    (Don Norman)
    “In anything at all, perfection
    is finally attained not when
    there is no longer anything to
    add, but when there is no
    longer anything to take
    away.”
    Antoine de Saint Exupéry
    Complex remote controls

    View full-size slide

  21. Beat Signer - Department of Computer Science - [email protected] 21
    October 27, 2023
    Mapping
    ▪ Natural mapping makes it
    easy to understand which
    control performs which
    action
    ▪ “If a design depends upon
    labels, it may be faulty.
    Labels are important and
    often necessary, but the
    appropriate use of natural
    mappings can minimise the
    need for them. Wherever
    labels seem necessary,
    consider another design.”
    Seat adjustment in a Mercedes-Benz
    Kitchen stove with natural mapping on the right

    View full-size slide

  22. Beat Signer - Department of Computer Science - [email protected] 22
    October 27, 2023
    Mapping …
    ▪ What about an alternative
    light switch design making
    use of natural mapping
    (without labels)?
    John Rambow, flikr.com

    View full-size slide

  23. Beat Signer - Department of Computer Science - [email protected] 23
    October 27, 2023
    Gestalt Principles
    ▪ Law of proximity
    ▪ items that are closer together
    appear to be grouped
    ▪ Law of similarity
    ▪ similar-looking items appear
    grouped
    ▪ Law of Continuity
    ▪ visually-aligned items are
    perceived as continuous
    forms
    ▪ …

    View full-size slide

  24. Beat Signer - Department of Computer Science - [email protected] 24
    October 27, 2023
    Information Design
    ▪ Poor information design can disrupt reading
    ▪ uncommon or unfamiliar vocabulary
    - interrupts the reading process, e.g. “Please reauthenticate” vs. “Login again”
    ▪ tiny or fancy fonts
    ▪ text on noisy background
    ▪ contrast of text and background
    ▪ information buried in repetition (noise from text itself)
    - e.g. selection list with the following entries
    • Backlit Keyboard (English) & User’s Guide (English)
    • Backlit Keyboard (Western Spanish) & User’s Guide
    • Backlit Keyboard (French) & User’s Guide
    ▪ centred text
    - eyes are trained to go back to the same horizontal position
    ▪ Don’t disrupt reading – support it!

    View full-size slide

  25. Beat Signer - Department of Computer Science - [email protected] 25
    October 27, 2023
    Guidelines for Using Colours
    ▪ Use distinctive colours
    ▪ users can most easily distinguish colours on the colour-perception
    channels (red-green, yellow-blue and black-white)
    ▪ Separate strong opponent colours
    AVOID THIS!

    View full-size slide

  26. Beat Signer - Department of Computer Science - [email protected] 26
    October 27, 2023
    Guidelines for Using Colours …
    ▪ Distinguish colours by saturation and brightness as well
    as hue
    ▪ avoid subtle colour differences
    ▪ check whether elements are distinguishable in greyscale
    ▪ Avoid colour pairs that colour-blind people cannot
    distinguish
    ▪ Make use of existing tools for selecting (colourblind-
    friendly) palettes
    ▪ e.g. https://coolors.co

    View full-size slide

  27. Beat Signer - Department of Computer Science - [email protected] 27
    October 27, 2023
    Video: Inattentional Blindness

    View full-size slide

  28. Beat Signer - Department of Computer Science - [email protected] 28
    October 27, 2023
    Change Blindness

    View full-size slide

  29. Beat Signer - Department of Computer Science - [email protected] 29
    October 27, 2023
    Change Blindness …

    View full-size slide

  30. Beat Signer - Department of Computer Science - [email protected] 30
    October 27, 2023
    Inattentional / Change Blindness
    ▪ Our goals strongly focus our attention
    ▪ Tendency to only perceive and notice things that match
    our goal
    ▪ “following the sent of information toward the goal”
    ▪ might miss changes at other parts of the screen
    ▪ Our limited peripheral vision might further reduce the
    things we see on a screen
    ▪ show information where users are already looking at
    ▪ use visual features / channels that that popout (e.g. blinking) to
    highlight a change

    View full-size slide

  31. Beat Signer - Department of Computer Science - [email protected] 31
    October 27, 2023
    Affordances
    ▪ Term affordance introduced in 1977 by psychologist
    James J. Gibson in the 'The Theory of Affordances'
    ▪ defined as all possible actions with an object in an environment
    independent of an individual's ability to recognise these actions
    ▪ Don Norman refined the term affordances in the context
    of human-machine interaction
    ▪ only those possible actions with an object that can be recognised
    by an individual
    ▪ an affordance of an object tells us something (gives us a clue)
    about how to use the object
    ▪ good interaction design will take affordances and the related
    discoverability into account
    ▪ screen-based interfaces offer perceived affordances which are
    learned conventions

    View full-size slide

  32. Beat Signer - Department of Computer Science - [email protected] 32
    October 27, 2023
    Video: The Norman Door

    View full-size slide

  33. Beat Signer - Department of Computer Science - [email protected] 33
    October 27, 2023
    Fitts’s Law (1954)
    ▪ Fitts’s Law predicts that the time to point
    at an object using a device (e.g. mouse) is
    a function of the distance from the target
    object and the target object’s size
    𝑇 = 𝑘 log2
    Τ
    𝐷 𝑆 + 1.0
    T = time to move the pointer to the target
    D = distance between the pointer and the target
    S = size of the target k = constant
    ▪ The further away and the smaller the object, the longer
    the time to locate it and point to it
    Paul Fitts

    View full-size slide

  34. Beat Signer - Department of Computer Science - [email protected] 34
    October 27, 2023
    Fitts’s Law (1954) …
    ▪ Make click targets (e.g. buttons, menu items, links) large
    enough that they are quick and easy to hit
    ▪ Checkboxes, radio buttons and toggle switches should
    also accept click on their label to increase the area
    ▪ Place important targets near the edge of the screen
    ▪ “infinite target size“ along screen edges (if not other screen
    connected to that edge)
    ▪ On smartphones consider using menus that people can
    easily reach with their thumb while holding the phone

    View full-size slide

  35. Beat Signer - Department of Computer Science - [email protected] 35
    October 27, 2023
    Design-Pattern Guidelines: Study Guide
    ▪ Additional specific design guidelines for specific interface
    patterns based on the Ten Usability Heuristics for User
    Interface Design
    ▪ input controls
    ▪ forms and wizards
    ▪ tooltips and dialogues
    ▪ icons and indicators
    ▪ menu design
    ▪ navigation elements
    ▪ search
    ▪ https://www.nngroup.com/articles/design-pattern-guidelines/

    View full-size slide

  36. Beat Signer - Department of Computer Science - [email protected] 36
    October 27, 2023
    Material Design
    ▪ Design language
    developed by Google
    ▪ Android-oriented
    ▪ grid-based layouts,
    responsive animations,
    depth effects, …
    ▪ https://m3.material.io/

    View full-size slide

  37. Beat Signer - Department of Computer Science - [email protected] 37
    October 27, 2023
    Apple Human Interface Guidelines
    ▪ Design guidance for
    common actions and
    experiences
    ▪ entering data
    ▪ file management
    ▪ feedback
    ▪ searching
    ▪ undo and redo
    ▪ https://developer.apple.com/
    design/human-interface-
    guidelines/

    View full-size slide

  38. Beat Signer - Department of Computer Science - [email protected] 38
    October 27, 2023
    Exercise 5
    ▪ FIGMA prototyping solution

    View full-size slide

  39. Beat Signer - Department of Computer Science - [email protected] 39
    October 27, 2023
    References
    ▪ Designing the User Interface: Strategies for
    Effective Human-Computer Interaction, Ben
    Shneiderman et al., Pearson (6th edition),
    April 2016, ISBN-13: 978-0134380384
    ▪ Designing with the Mind in Mind: Simple Guide to
    Understanding User Interface Design Guidelines,
    Jeff Johnson, Morgan Kaufmann (3rd edition),
    November 2020, 978-0128182024
    ▪ The Design of Everyday Things, Don Norman,
    Basic Books (revised and expanded edition),
    November 2013, ISBN-13: 978-0465050659

    View full-size slide

  40. Beat Signer - Department of Computer Science - [email protected] 40
    October 27, 2023
    References ...
    ▪ Eight Golden Rules of Interface Design
    ▪ https://www.cs.umd.edu/users/ben/goldenrules.html
    ▪ Ten Usability Heuristics for User Interface Design
    ▪ https://www.nngroup.com/articles/ten-usability-heuristics/
    ▪ Visibility of System Status
    ▪ https://www.youtube.com/watch?v=cTtc90jCULU
    ▪ Match Between System and Real World
    ▪ https://www.youtube.com/watch?v=0TAt9Pln51g
    ▪ User Control and Freedom
    ▪ https://www.youtube.com/watch?v=MXuk-fdbr0A

    View full-size slide

  41. Beat Signer - Department of Computer Science - [email protected] 41
    October 27, 2023
    References ...
    ▪ Consistency and Standards
    ▪ https://www.youtube.com/watch?v=Ibndy9KLOSQ&t=1s
    ▪ Error Prevention
    ▪ https://www.youtube.com/watch?v=imS9s1DUY-I
    ▪ Recognition Rather Than Recall
    ▪ https://www.youtube.com/watch?v=imS9s1DUY-I
    ▪ Flexibility and Efficiency of Use
    ▪ https://www.youtube.com/watch?v=LoTdRTBB8BQ
    ▪ Aesthetic and Minimalistic Design
    ▪ https://www.youtube.com/watch?v=ZgbRmeWDgd0

    View full-size slide

  42. Beat Signer - Department of Computer Science - [email protected] 42
    October 27, 2023
    References ...
    ▪ Help Users Recognise, Diagnose and
    Recover From Errors
    ▪ https://www.youtube.com/watch?v=cCun-ReLTFI
    ▪ Help and Documentation
    ▪ https://www.youtube.com/watch?v=iIQVRzatb50
    ▪ The Norman Door
    ▪ https://www.youtube.com/watch?v=yY96hTb8WgI
    ▪ Colour Palette Generator
    ▪ https://coolors.co
    ▪ Material Design
    ▪ https://m3.material.io

    View full-size slide

  43. Beat Signer - Department of Computer Science - [email protected] 43
    October 27, 2023
    References ...
    ▪ Apple Human Interface Guidelines
    ▪ https://developer.apple.com/design/human-interface-guidelines/
    ▪ Inattentional Blindness
    ▪ https://www.youtube.com/watch?v=IGQmdoK_ZfY
    ▪ Change Blindness
    ▪ https://www.youtube.com/watch?v=VkrrVozZR2c

    View full-size slide

  44. 2 December 2005
    Next Lecture
    Evaluation Methods

    View full-size slide