Week 8 Interface Types Flashcards
Four (4) Main Categories of Interface Types (FIIP)
Function
* intelligent, adaptive, ambient, smart
Interaction style
* command, graphical, or multimedia
I/O device used
* pen-based, speech-based, or gesture-based
Platform being designed for
* tablet, mobile, PC, or wearable
Command Line Interfaces. Advantages and Disadvantages
Advantages
* Flexible
* Appeals to expert users
* Supports user-defined
scripts/macros
* Fast, if proficient
* Low bandwidth
* Used by visually impaired
Disadvantages
* High cognitive load, recall-memory
* Learnability poor (abbreviations)
* High error rate
* Error messages and help generally
difficult
* Not suitable for non-experts
Command Line Interface Design Guidelines
(Feel free to look at slide after)
- Align with established conventions
- Always use first letter of command
- Include built-in –help
- Keep users informed of progress/status
- Include a visible reaction for every action
- Include human-readable error messages and help, support
skimming - Use sensible defaults, prompt for missing options
- Identify parameters with flags
- Provide easy exit
GUI - WIMP
Windows
* sections of the screen that can be scrolled,
stretched, overlapped, opened, closed, and
moved with mouse
Icons
* clickable pictograms representing applications,
objects, commands, and tools
Menus
* lists of options that can be scrolled and selected
Pointing device
* A mouse/touchpad controls the cursor, enables
clicking
Direct Manipulation
“Direct Manipulation is an interaction style in which
users act on displayed objects of interest using
physical, incremental, reversible actions whose
effects are immediately visible on the screen.”
Direct Manipulation. Advantages and Disadvantages?
Advantages
* Continuous representation of
objects, can see immediate effects/feedback
* Physical actions instead of syntax
(uses recognition memory)
* Reversible, incremental actions
(supports undo)
* Quick to learn (if well designed)
Disadvantages
* Slow
* Repetitive tasks not well
supported
* Can be error-prone (e.g., drag
& drop over long distance)
* Accessibility challenges
Menu Types: List them
Flat list
Drop-down
Pop-up
Contextual
Collapsible
Mega
Menu. Advantages and Disadvantages
Advantages
* Particularly good for
intermittent users
* Affords exploration
* Facilitates error
handling
Disadvantages
* Too many can increase
complexity
* Slow for frequent users
* Less suited for small
displays
Menu Design Guidelines
- Put menus in familiar locations
- Make them look interactive and give enough visual weight
- Tell users where the current screen is within the menu
- Use understandable labels
- Make easy to scan (left-justify, front-load key items)
- Make items easy to select
- Optimize for easy access to frequent commands
Icons
- Mapping between representation and underlying action/object
can be: - Similar (bold B represents bolding)
- Analogical (scissors represent cut)
- Arbitrary (X represents delete)
Icon Design Guidelines
- Follow style guide for platform
- Similar type is most effective
- Actions can be represented with a combination
of objects/symbols if needed - Small icons: text labels can help
- Large icons: use hover text
Mobile (Examples???)
Restaurants to take orders
Car rentals to check in car returns
Supermarkets for checking stock
Streets for multi-user gaming
Education
Medical e-charts
Mobile Characteristics
Form factor
* Feature phone
* Smartphone
* Tablet
Sensors
* Accelerometer, gyroscope,
* Compass, GPS
* Camera, Bluetooth
* Feature phone
* Smartphone
* Tablet
* Enable contextual awareness
Mobile Contexts
Interruptible
Single visible window
One-handed
Multipurpose
Vertical/horizontal orientation
Small Multitouch Displays…Fat fingers
Little room for menu bars, controls
Difficult to precisely select small items, copy/paste
Occlusion
Multitouch gestures
* Tap, press/hold, drag
* Pinch, spread
* flick, swipe, twist
Mobile Design Guidelines (14)
Focus on core features and size
Avoid forms
* If you must, ask only critical info, autofill when possible
Store recent activities for quick access
Allow offline use
Prevent errors
* Nothing harmful triggered by too simple an action
Provide sound/tactile feedback
Design for interruptions
* Tasks can be started, stopped, restarted
Focus on content
Use negative/white space
Clarity
* text legible at every size, icons are precise, adornments are subtle
Take advantage of whole screen
Translucent UI elements hint at content behind
Embrace borderless buttons
Perceptible feedback for every action
Appliances / IoT (Input output technology??) (7)
Everyday devices in home, public, car…
* Washing machines, refrigerators
* Navigation systems, digital camera
* Remotes, printers
Used for short periods
Need to be usable with minimal learning
Consider trade-off between soft and hard controls
Might be screenless or minimal screen
* Washing machines, refrigerators
* Navigation systems, digital camera
* Remotes, printers
Single purpose, time critical, urgent devices
* coffee maker
* toaster
* microwaves
Users have low tolerance for delays
Appliances / IoT Design Guidelines
Keep simple
* Make the first screen useful
* One touch to make something useful happen
Do not rely solely on remote control (e.g., phone)
Safety first
Voice UI (With pros and cons)
Spoken language interaction
Typically for inquiring about specific information
Playing games, storytelling, jokes
Also used for accessibility
Privacy concerns
No/few visual affordances
Multi-user (multi-generational)
Users expect similar interaction to human dialog
* UIs often don’t have enough
context, need clear phraseology
Users form emotional bond with device
Can be frustrating
* Small children, users with heavy accents
Voice UI Design Guidelines (6)
Provide the user with the interaction options
Provide context (today’s weather is cold and rainy)
Do not list more than 3 options for an interaction
Use simple visual feedback to know system is listening
Provide examples of interaction
Provide clear way of exiting
Wearables
Computer on the body that is
* Always on
* Always accessible
* Always connected
Augments/monitors users’ vital signs, actions
Aware of user and surroundings through sensors
Examples
* Jewelry, smart fabrics, shoes, jackets
* Glasses, watches
* Fitness trackers, health monitors
Wearables Constraints/Limits
Limited screen space
Limited battery life
Used while in motion
Privacy concerns
Wearable Design Guidelines (9)
Design for glanceability
Display only most critical info
Make use of context
Lightweight, simple interactions
Include only essential functions
Make use of whitespace
Minimize interruptions/ notifications
Provide settings that the user can change
Opt for privacy
Integrate with other devices
