User Experience
User Interface
Overview
- A system is only as good as the interface it provides to users
- Symptoms of poor usability:
- Failure to attract, retain market share (users give up in disgust)
- Users fail to find or misinterpret important information
- System can be operated in an unsafe manner (example: 737 MAX)
- Usability aspects that improve system effectiveness:
- Appropriate functionality
- Easy navigation
- Fast response times
- Elegant, organized design
- Supporting users is more than a cosmetic flourish
- Developing good UI takes skill and time
Terminology
- User Interface (UI)
- Look and behavior of system’s controls
- User experience (UX)
- All factors that contribute to usability of computing system
- Encompass entire usage lifecycle, from discovery to accomplishing goals
- Focus on user satisfaction
- Human-Computer Interaction (HCI)
- Academic discipline studying how people interact with computers
- Many courses and research programs in Information Science and
- Communications departments
Usability requirements and evaluation tools
- Client’s opinions
- Competitive analysis
- Expert opinion
- Focus groups
- Observing users
- Measurements
Focus group
- Group interview – helps generate ideas that would not have occurred individually
- Participants: 5-12 potential users with similar viewpoints
- Interviewer
- Ask a structured set of questions
- Encourage group discussions
- May show mock-ups
- Summarize conclusions
- Recorder takes notes
- Repeat with contrasting user groups
Internal project users
- Internal projects are code review tools; users are software developers
- Your classmates are candidate users!
- Not including your team members
- Not including teams working on the same feature
- Recruit classmates for focus groups, user testing
- Can coordinate on Ed Discussion
- May be easiest to pair teams
- Documentation of user studies will be expected in future report
Accessibility
- Users have varying ability to interact with computer interfaces
- Color blindness (1/12 men, 1/200 women)
- Poor or no vision
- Lack of hearing
- Poor manual dexterity
- Limited language skills, domain vocabulary
- Sensitivity to flashing light, motion sickness
- Accessibility requirements constrain the user interface
- Many systems have a legal requirement to support users with disabilities
- Example: Compliance with Section 508 of US Rehabilitation Act https://www.section508.gov/
- Some technologies may not be suitable
- Examples: Flash, untagged PDF, immature widget toolkits
Equipment requirements
- Software runs on wide variety of devices, with diverse configurations, in many environments
- Screen size
- Graphics performance
- Network bandwidth, latency, stability
- Peripheral hotplugging
- Be explicit about equipment assumptions/requirements
- Be explicit about failure handling
- Test on variety of equipment (including extremes)
Dark patterns
- Many of our experiences with UI are in a marketing context
- Goal is to maximize engagement and manipulate user decisions
- Being commonplace and effective in marketing goals does not make a design pattern good
- Avoid simply aping features of slick websites (even if libraries make it easy to do so)
- User-centric design
- Interface should facilitate, not redirect, users’ objectives
- https://cacm.acm.org/magazines/2020/9/246937-dark-patterns/fulltext
- Analyze/design/build/evaluate loop
- Development of user interface is always iterative
Development processes
- Written requirements poor fit
- Requirements benefit from sketches, comparison with existing systems
- Designs should include graphical elements, benefit from prototypes
- UI must be tested with users; expect requirements and design changes
- Schedules must include time for testing and time to make changes
UI prototypes
- Preliminary version used to iterate rapidly between requirements and design
- Minimize polishing effort to maximize iteration speed
- Paper sketches
- Lowest effort, so amenable to major changes
- Wireframe
- Mock-up
- Graphic designs with detailed layout, color
- Operational prototype
User experience
Overview
- Many of our experiences with UI are in a marketing context
- Goal is to maximize engagement and manipulate user decisions
- Being commonplace and effective in marketing goals does not make a design pattern good
- Avoid simply aping features of slick websites (even if libraries make it easy to do so)
- User-centric design
- Interface should facilitate, not redirect, users’ objectives
Development processes
- Written requirements poor fit
- Requirements benefit from sketches, comparison with existing systems
- Designs should include graphical elements, benefit from prototypes
- Don’t try to capture everything, but consider capturing justifications when client gives feedback or chooses between options
- UI must be tested with users; expect requirements and design changes
- Schedules must include time for testing and time to make changes
UI prototypes
- Preliminary version used to iterate rapidly between requirements and design
- Minimize polishing effort to maximize iteration speed
- Paper sketches
- Lowest effort, so amenable to major changes
- Wireframe
- Mock-up
- Graphic designs with detailed layout, color
- Operational prototype
- Enables interaction and navigation
Interactive prototypes
-
Clickable - responds in limited ways to user interactions - Illustrate time-dependent design
- Navigate between pages, dialogs
- Not production code
- Does not update model data, trigger external events
- Make sure client understands limitations
- Collaborative tools:
- Figma
- Adobe XD
- (many others)
Models: Relating user and system models
Mental model
- User’s view of system and the UX it provides
- May include physical metaphors for digital interactions
- Examples:
- Pieces on a game board
- File folders and desks
Program model
- Data, relationships, and functions making up the system
- Examples:
- Object identity & coordinates, rules constraining movement
- Tree of data units with metadata
Model mismatches: Model-view-controller (as a “model”)
Layer 0: Computer systems and networks
- Performance, reliability, predictability of systems have a large impact on user experience
- Interfaces may be designed for specific hardware capabilities and constraints
- Screen sizes, input devices, sensors, graphics/multimedia processing
- Later: Adapting to constraints of web browsers and smartphones
Layer 1: Model
- Provides all functionality of program except for user interaction
- Program logic, services
- Data structures, file systems
- Content (text, graphics, audio, metadata, etc.)
- Beware: easy for clients, designers to specify new behavior that is not supported by existing model
Separation of content from view
Layer 2: Control (navigation)
- Controller manages flow of application
- Controls navigation between various “displays”
- Web pages, window forms, pop-up dialogs, app screens
- Updates model, view in response to user interaction
- Controller role varies between implementations
Layer 3: View (user interface)
- Appearance of displays and facilities for interaction
- Graphical elements (fonts, colors, icons, images, animations)
- Control widgets (text boxes, menus, buttons, sliders)
- User input (touchscreen, gamepad, keyboard & mouse, buttons & knobs)
- For a quality user interface, teams need someone skilled in graphic design
Design principles
UI design principles
- UI design is partly an art, but some general principles apply:
- Consistency (in appearance, interaction, function)
- Feedback (what is the system doing? why does the user see what they do? what is about to happen?)
- Ability to interrupt or reverse actions
- Comprehensible and non-destructive error handling
- The user should feel in control (not like they’re being controlled)
Example considerations: navigation menus
- Advantages
- Easy for users to learn and use
- Avoids certain categories of error
- Challenges
- How to handle large number of choices?
- Scrolling menu (e.g. lists of countries or states)
- Hierarchical
- Filtered based on typing
- Users typically prefer menu systems that are broad and shallow (rather than deep)
Design choices: text vs. graphics
Text
- Precise, unambiguous (hopefully)
- Fast to compute, transmit
Graphics
- Quick to comprehend, learn
- But icons may be difficult to recognize
- Variations can show different cases
Command line interfaces
- Limitations of GUIs
- Only suitable for human users (difficult to automate)
- Awkward to control complex interactions (difficult to compose)
- Command line interfaces (CLI)
- User interacts with system by typing commands
- Composable
- Scriptable
- Can be adapted for users with disabilities
- Amenable to formal specification
- Usually requires learning or training
Web and mobile interfaces
Device-aware interfaces
- How does a laptop computer differ from a desktop?
- What is special about a smartphone?
Web and mobile apps
- Must consider network
- Transfers may need to be asynchronous to hide latency
- Need visual feedback that operation is in progress
- Should support cancellation
- Connections may be unreliable
- Should be robust to duplication
Leverage simulation
- App development environments (e.g. Xcode, Android Studio) allow you to simulate screen sizes, touch events
- Web browser developer tools allow you to simulate screen sizes, network speed
Responsive design
- Automatically adjust user interface based on size of screen (or other device properties)
- Beyond simple layout scaling – can completely change layout to accommodate device
- Use CSS media queries to select different style rules in different situations