Core Principles and Guidelines for Interactive Digital Design
Types of Digital interfaces
Human-to-Computer Interaction (HCI)
- how users engage with computational devices.
- focuses on graphical user interfaces (GUIs), where visual elements guide the interaction.
Human-to-Human Interaction (HHI) through Technology
- how technology mediates human interaction
- social media platforms, collaboration tools
Multi-Modal Interaction
- multiple methods of interaction
- voice, touch, gesture, and more
- phones, Virtual Reality (VR)
Conversational Interaction
- interactions through natural language
- voice assistants and chatbots
History of Digital interfaces in Computing
- Batch processing
- Time-sharing
- Networking
- Graphical displays
- WIMP – windows, icons, menus and pointers
- metaphors
- direct manipulation
- WYSIWYG – What You See Is What You Get
- Microprocessors
- The web
- Ubiquitous Computing
User Design
UI design focuses on the visual and interactive aspects of a product’s interface, including layout, typography, colours, and visual elements.
UX design uses all aspects of the user’s interaction with a product or service, aiming to provide a meaningful and satisfying experience.
Interaction design focuses on designing the behavior and response of digital systems, emphasizing the quality of the interaction between users and technology.
Usability Motivations
There is a diverse range of users. Many interfaces are poorly designed and this is true across domains
Life critical systems
- air traffic control
- nuclear reactors
- power utilities
- emergency services
- military
- high costs
- reliability
- effectiveness
- lengthy training
- motivated users therefore subject satisfaction is less of an issue
Industrial & commercial use
- banking
- insurance
- production
- travel
- utility billing
- point-of-sales systems
- costs
- ease of learning
- languages
- speed and error rates
- frequency of use
- 10% off transaction time means 10% reduction in …,
Office, home & entertainment
- word processing
- electronic mail
- computer conferencing
- video game systems
- educational packages
- search engines
- mobile device, etc
- ease of learning
- low error rates
- subjective satisfaction
- competitive market – so design is critical
- Infrequent use of some applications means interfaces must be intuitive
- functionality is difficult
- wide range of both novice & expert users
- competitiveness requires low cost
- example: games & gaming devices
- Nintendo Wii
- tradeoffs functionality vs low cost
- novice simple set of actions required
- experienced user
- user wants more functionality layers, levels
- example
- search engines
- have basic & advanced interfaces
Explorative, creative & cooperative systems
- web browsing
- search engines
- artist toolkits
- architectural design
- software development
- music composition
- scientific modeling systems
- highly motivated users
- different usage, frequent to rare use
- the functionality should be transparent so the user can focus on their task domain
- can be collaborative
Social-Technical
- social networks
- Teams, Zoom, Slack
- Udemy, Coursera
- complex systems
- health, crime
- trust, privacy, responsibility & security are all issues
- many people use over a long time
- verifiable sources & status feedback are important
- voting systems – was the vote recorded?
- ease of learning for novices & feedback to build trust
- different usage, different levels of expertise of the user
Usability Goals
- get feedback early
- trade-offs in design options frequently occur
- low errors vs speed sacrificed
- design alternatives can be evaluated by
- designers & users via prototypes
- requirement analysis
- ascertain the user’s needs
- ensure reliability
- promote standardization, integration, consistency & portability
- complete projects on schedule & within budget
Evaluation
time to learn – how long does it take to learn relevant tasks?
speed of performance – how long does it take to perform relevant benchmarks?
rate of errors by users – how many & what kind of errors are made during benchmark tasks?
retention over time – frequency of use and ease of learning help make for better user retention
subjective satisfaction – allow for user feedback via interviews, comments & satisfaction scales
Usability Impact
Amazon
- Users can navigate between product categories or sections quickly using tabs.
- Streamlined interface reduces the time needed to browse and locate desired products.
- Tabs allow for easy comparison between similar products within the same category.
- One-Click Ordering simplifies the checkout process
BBC news
- Text resizing options and high contrast mode cater to users with visual impairments.
- Screen reader compatibility and descriptive alt text for images ensure accessibility for users with disabilities.
- Simplified navigation and clear layout make content more accessible to all users.
- Users can quickly find relevant information with minimal effort.
- Fast load times and streamlined interface reduce the time needed to perform searches.
- Auto-suggestions and predictive search help users refine their queries efficiently
Spotify
- Personalized playlists and recommendations capture user attention and engagement.
- Push notifications for new releases and concerts keep users informed and involved.
- Dynamic content updates and curated playlists maintain user interest over time.
Airbnb
- Visually appealing interface with high-quality images enhances user satisfaction.
- Easy-to-use booking process and personalized recommendations improve overall experience.
- Transparent reviews and ratings build trust and confidence in the platform.
Trello
- Use of cards and lists for organizing tasks improves user organization and productivity.
- Clear visual hierarchy and drag-and-drop functionality enhance usability.
- Collaborative features allow teams to efficiently manage projects and tasks.
8 Golden Rules of Design
- Strive for consistency
- Cater to universal usability
- Offer informative feedback
- Design dialogs to yield closure
- Prevent errors
- Permit easy reversal of actions
- Support internal locus of control
- Reduce short term memory load
Strive for consistency
- consistent sequences of actions
- identical terminology
- consistent color, layout, fonts, etc.
- exceptions
- e.g. confirm delete, no password echo
- limited & comprehensible
Cater to universal usability
- design for diverse use (plasticity) & diverse users (universal)
- plasticity facilitates content transformation
- novice to expert
- explanations
- features for experts e.g. shortcuts
- age ranges
- disabilities
Offer informative feedback
- action – feedback
- usual action – modest feedback
- rare action – substantial feedback
Design dialogs to yield closure
- beginning, middle , end (closure)
- e.g. confirmation page
Prevent errors
- prevent users making (serious) errors
- validation
- grey out unavailable options
- selection rather than freestyle typing
Permit easy reversal of actions
- easy recovery
- reversible actions
- options of reversing a single or a group of actions
Support internal locus of control
- user is in control
- ‘in charge’ feeling
- no surprises
- dislikes:
- tedious data-entry sequences
- difficulty in obtaining necessary information
- inability to produce their desired result
Reduce short term memory load
- 4 +/- 1 chunks of information (not 7 +/- 2)
- users have short-term memory limits
Know Your Users
Determine user’s skill levels
Design begins with the understanding of intended users
- age
- gender
- physical and cognitive abilities
- ⚬education
- ⚬cultural or ethnic background
- training
- motivation
- goals
- personality
Other considerations:
- location e.g. rural
- economic profile
- disabilities
- attitude to technology
- interface familiarity and domain knowledge, also
- multiple users in a community
- nurses, doctors, students
Design to user’s skill levels
Multi-layer designs
- novice learns the minimal subset, advanced levels offered
- apply to interface, manuals, help screens etc.
Speed
- offer slower interaction for new users, faster for frequent users
Personalization
- users can personalize menus
Control
- users can control information feedback
- novice
- knowledgeable
- expert
Novice or first time users
- literally first time e.g. Granddad sends his first e-mail
- familiar with the domain but new user
- users of similar or previous system
- may feel anxiety
- restrict vocabulary to familiar, constantly used concept terms
- low amount of required actions
- builds confidence
- information feedback
- provide error messages and easy correction
Knowledgeable intermittent users
- broad knowledge
- not regular use
- don’t retain knowledge of menu structure etc.
- recognition not recall
- consistent sequences
- content-dependent help
- allow user to try potential routes without fear of failure
Expert frequent users
- familiar with system, require speed
- rapid response times
- brief, unintruding feedback
- shortcuts
- macro creation (multiple / common actions)
- accelerators e.g. abbreviations, menu shortcuts
Ease of Use - Design for the Task
Identify the task
- Task Analysis usually involve long hours observing and interviewing users
- Determine which tasks to support
- include all possible actions V simplicity
- ruthlessly limited functionality
- Decomposition of high level tasks
- set of atomic actions
- too large – need specific actions to perform exactly what is needed
- too small – need to many actions to perform what is needed
- Relative task frequencies
- frequent tasks simple and quick to complete
- friends and family on speed dial numbers
- Create a matrix of users and tasks
Source: unknown
Choose an interactive style
- Direct Manipulation
- familiar objects
- desktop metaphor
- e.g. drag and drop
- novices / frequent users
- Menu selection
- select from a list
- understandable, distinct
- need careful task analysis
- use interface-building tools
- novices / frequent users
- Form filling
- understandable field labels
- know permissible values
- respond correctly to error messages
- frequent users
- Command language
- user in control
- difficult to support, diverse systems
- frequent users / expert users
- Natural language
Source: unknown
Design Theories
Design By Level
Foley and Van Dam four-level approach
Conceptual level
- user’s mental model
- e.g. drawing program that operates on objects
Semantic level
- the meanings conveyed by the user’s input & computer’s output
- e.g. delete object, undo
Syntactic level
- how actions are assembled to instruct the computer to perform a task
- e.g. drag an object to the trash can & confirmation dialog box
Lexical level
- device mechanisms
- e.g. mouse double-click within 0.2 seconds
- software now concentrates on the conceptual level
- e.g. direct manipulation not the command prompt
- User’s learn semantics and syntax
- e.g. moving / dragging objects
- e.g. recovering deleted files from the trash can
GOMS
- goals
- operators
- methods
- selection rules
- decompose goals into actions (operators)
- actions into methods
- selection of methods to achieve the goal
- GOMS goal for expert / frequent users
- designers can design with a clear definition of high-level objects and action / goals
Stages of Action
Norman’s seven stages of action
- Forming the goal
- Forming the intention
- Specifying the action
- Executing the action
- Perceiving the system state
- Interpreting the system state
- Evaluating the outcome
Norman’s contributions
- Context of cycles of action and evaluation
Gulf of execution
- mismatch between the user’s intentions and the allowable actions
Gulf of evaluation
- mismatch between the system’s representation and the user’s expectations
Norman’s four principles of design
- State and the action alternatives should be visible
- Should be a good conceptual model with a consistent system image
- Interface should include good mappings that reveal the relationships between stages
- User should receive continuous feedback
Example of stages of action model:
- sign-in
- shipping & payment
- gift-wrap
- place order
- users can move backwards to make changes
User’s failure can occur (Polson and Lewis 1990)
- inadequate goals
- objects not labelled correctly
- user does not know how to perform an action
- bad feedback
Consistency
Consistent user interface goal
- Definition is elusive – multiple levels sometimes in conflict
- Sometimes advantageous to be inconsistent.
- consistent = car pedals
- inconsistent = car placement of indicators
Consistent
delete/insert character
delete/insert word
delete/insert line
delete/insert paragraph
Inconsistent #1
delete/insert character
remove/bring word
destroy/create line
kill/birth paragraph
Inconsistent #2
delete/insert character
remove/insert word
delete/insert line
delete/insert paragraph
Inconsistent action verbs
- Take longer to learn
- Cause more errors
- slow down users
- harder for users to remember
Consistent user interface
- Color
- layout
- icons
- fonts
- font sizes
- button sizes, etc
Inconsistent elements – slow users by 5-10 %
Inconsistent terminology – slow users by 20-25 %
Return to the course page at: Introduction to Digital Interaction Design and Development