Term
|
Definition
Physical
Mental (memory)
Cognitive (comprehension)
Visual |
|
|
Term
|
Definition
Navigational
Skeuomorphic
Modal
Stylistic |
|
|
Term
|
Definition
| Error prompts, confirmation dialogs |
|
|
Term
| Why are confirmation dialogs a poor design choice? |
|
Definition
| Break user flow, modal excise |
|
|
Term
|
Definition
1. Reduce # of places to go
2. Provide signposts
3. Provide overviews
4. Properly map controls to functions
5. Avoid hierarchies
6. Don't replicate mechanical models (skeuomorphism) |
|
|
Term
| One way to eliminate excise |
|
Definition
| Reduce # of places to go (navigational excise): minimize scrolling, often the most difficult navigational technique |
|
|
Term
| Paradigms of conceptual + visual design of UIs (3) |
|
Definition
1. Implementation-Centric
2. Metaphoric
3. Idiomatic |
|
|
Term
|
Definition
Distinct techniques for allowing users to issue commands to an interface. (menus, keyboard accelerators, drop downs etc)
Considerate interfaces have multiple, parallel modalities for invoking. This allows for different user levels to access the same commands. |
|
|
Term
|
Definition
Teach their behavior using inspection.
More visible, less immediate
(Dialogs, Menus) |
|
|
Term
|
Definition
Immediate effect without an intermediary
(Drag handles, sliders, knobs, buttons) |
|
|
Term
|
Definition
Must be memorized.
Follow widely used conventions.
Used extensively by intermediates and experts
(flick up or down to scroll on a touch screen) |
|
|
Term
| Information in the World vs the Head |
|
Definition
World: Doesn't need remembering
(Information kiosk at a tourist location, printed map)
Head: You are responsible for learning. Much faster and easier to use than info in the World.
(Back alley shortcut not shown on a map) |
|
|
Term
|
Definition
| Path for user to learn immediate commands corresponding to pedagogic equivalents. |
|
|
Term
|
Definition
Navigate menus using keyboard
Typically shown using the Alt key to show underlined characters.
(Alt+F to bring up File menu, then S to save) |
|
|
Term
|
Definition
Shortcuts
Noted explicitly on the right side of menu items (acts as memorization vector for invisible modality)
(Ctrl+S) |
|
|
Term
|
Definition
Set of memorized commands and features
(things done frequently) |
|
|
Term
|
Definition
| Subset of functions designers are confident will be frequently accessed by most users. |
|
|
Term
| Handling Dangerous Commands |
|
Definition
Dangerous commands; Erase All, Clear, etc should not have easily accidental or immediate modality.
Keep with the principle (Hide ejector seat levers) |
|
|
Term
| Modalities beyond Minimal Working set |
|
Definition
| While there is a minimal set, additional commands need to be included in keeping with expert user's needs. |
|
|
Term
|
Definition
Provides needed intro to features and behaviors through set of screens or cards
Typically launched during first use. |
|
|
Term
|
Definition
Best suited for simple apps with less pedagogical modality.
Should include means to relaunch
Can be combined with guided tour |
|
|
Term
|
Definition
Grayed text inside an input or content area
(Disappears when focused on) |
|
|
Term
|
Definition
Attempts to guarantee success
Violates - Provide choices rather than ask questions principle (Users who don't know what an IP is still won't know when the wizard asks... better to just set values based on assumptions)
Good to use during initial configuration (setting up an iPhone) |
|
|
Term
Tooltips
(Not tooltip overlay) |
|
Definition
| Effective modeless help for desktop apps, not so for mobile |
|
|
Term
|
Definition
Widely used on mobile apps.
Usually triggered by help button
Typically all show at once rather than each field during hover like a desktop would. |
|
|
Term
|
Definition
Users will search for a solution, it should be out there.
Books are nice but cumbersome to search |
|
|
Term
| Full Text Search (Help Reference) |
|
Definition
Full Text does not support synonyms.
User must enter text exactly as it is written in help |
|
|
Term
| Indexed Search (Help Reference) |
|
Definition
Allows for synonyms when searching.
Arguably as important as help text itself. |
|
|
Term
|
Definition
| Necessary to explain scope, purpose, effect, upside, downside of fundamental concepts in one brief section. |
|
|
Term
|
Definition
Shouldn't be necessary for mobile or simple desktop apps.
Used for complex applications
Integrated into the app (as opposed to online help) |
|
|
Term
|
Definition
Allowing users to customize the look and feel
Makes it more likable
Equatable to putting pictures in office
(Decorating - Not to be confused with Configuring) |
|
|
Term
|
Definition
Turning features on and off
Adding/Removing toolbars
(Different than personalization but there is a gray area) |
|
|
Term
| Idiosyncratically Modal Behavior |
|
Definition
Preference for certain modalities is split between groups
One prefers menus another prefers toolbars
In these cases, both modalities must be included. |
|
|
Term
|
Definition
| Translating an object for particular language or culture |
|
|
Term
|
Definition
Make application as universal as possible
(An X for a checkbox is likely deselection in Japan) |
|
|
Term
|
Definition
| Designing apps for use by people with impairments as well as those without. |
|
|
Term
| Goals for Accessibility (3) |
|
Definition
Users can
1. Understand all instructions and feedback
2. Understand and easily manipulate controls and inputs
3. Navigate easily and be aware of navigational structure. |
|
|
Term
|
Definition
| Interview potential users with disabilities to develop a persona to design around. |
|
|
Term
| Accessibility Guidelines (10) |
|
Definition
1. Leverage OS tools
2. Don't override user-selected system settings
3. Enable standard keyboard access
4. Incorporate display options for those with limited vision
5. Provide visual only and audio only options
6. Don't flash, blink or flicker visual events
7. Use simple, brief language
8. Use response times to support all users
9. Keep layouts and task flows consistent
10. Provide text equivalents for visual elements |
|
|
Term
| Leverage OS Accessibility |
|
Definition
| Don't use accelerators reserver for OS functions |
|
|
Term
| Display options for those with limited vision |
|
Definition
High contrast (min 80%) black and white
Enlarge text size and weight
Color blind friendly
Minimize motion and animation |
|
|
Term
|
Definition
Think about the context in which the app is used
Are users in/using/doing - Large screen, dark room, walking? |
|
|
Term
|
Definition
Shape is the primary way we recognize what an object is.
(Think iDVD vs iTunes... very similar shapes - confusing) |
|
|
Term
|
Definition
Users assume relative importance with an increase in size
(think <-h1->, <-h2->, <-h3->...) |
|
|
Term
|
Definition
Most important is user goals, environment, content, brand.
After which, only think about value, hue, saturation.
Color also indicates importance much like size does. |
|
|
Term
|
Definition
Best used as the secondary communication vector
(Showing downtrending stock in a single visual might be an arrow that is also red) |
|
|
Term
|
Definition
Bevel or drop shadow indicates clickable
Simple use can improve learnability
Typically not used for conveying importance |
|
|
Term
|
Definition
Relative position to other components?
Conveys Order and Quantity
Groups of items interpreted to be similar |
|
|
Term
| Design - Text and Typography |
|
Definition
Recognized primarily by shape
(More distinct shape).equals(easier to read)
Avoid all caps
Principles:
1. Use high contrast
2. Choose appropriate typeface and size (>10)
a) Sans Serif - Readable
b) Readable only on high-res
3. Phrase text succinctly (understandable yet simple) |
|
|
Term
| Design - Information Hierarchy |
|
Definition
Users unconsciously evaluate most important object and relation of other objects
Make this process easy through visual attributes (color, shape, size, contrast, etc) |
|
|
Term
| Visual Interface Design Principles (9) |
|
Definition
1. Convey a tone
2. Lead users through visual hierarchy
3. Provide visual structure and flow
4. Signal what users can do
5. Respond to commands
6. Draw attention to important events
7. Build cohesive visual system for consistency
8. Minimize amount of visual work
9. KISS |
|
|
Term
| Convey a tone (Visual Interface Design Principle) |
|
Definition
| Example: All MS Office product share the same type of layout |
|
|
Term
| Lead the user through visual hierarchy (Visual Interface Design Principle) |
|
Definition
Establish relationships
Squint at it (to see what is fuzzy and what pops out)
Align to a grid
Create a logical path
Balance interface (symmetrical elements give the idea that everything is of equal importance) |
|
|
Term
| Signal what users can to on a screen |
|
Definition
Use icons
Convey the sense of function
Associate visual symbols with objects
Pre-visualize results when possible (when hovering over font, change the font in real time so users can see it without selecting it. i.e. Photoshop preview) |
|
|
Term
|
Definition
| indicate that a command, click etc was accepted or not |
|
|
Term
| Draw attention to important events |
|
Definition
| In essence, don't draw attention to unimportant events which is perceived as rude as it breaks attention from current task |
|
|
Term
|
Definition
Reduce clutter
Reduce embellishments
Avoid animations or at least keep them simple |
|
|
Term
|
Definition
| Take things away until the design breaks, then put that last thing back. |
|
|
Term
|
Definition
Windows
Panes
Menus
Toolbars
Drawers
Etc. |
|
|
Term
|
Definition
Vertically organized
Grid pattern |
|
|
Term
|
Definition
|
|
Term
|
Definition
Often paired with Stack
Think viewing emails - stack shows inbox while pane shows email content. |
|
|
Term
|
Definition
| Think color palette, click an icon and a color palette overlay shows over part of the screen. |
|
|
Term
| Tablet Format - Orientation |
|
Definition
Some apps may alter with altered orientation (toolbars previously on top in portrait may move to the side during landscape).
Some apps fix to one orientation as they require it for best use |
|
|
Term
|
Definition
Single column seems out of proportion
Multi-column |
|
|
Term
|
Definition
vertical grid of carousels
(Think netflix) |
|
|
Term
|
Definition
displayed in vertical lists, grids, carousels or swim lanes.
Chunks of rich content |
|
|
Term
|
Definition
Voice
Auto-complete
Tap-ahead
Recents
Auto-suggest
Categorize suggestions |
|
|
Term
| Mobile - Types of Gestures |
|
Definition
Tap - Should highlight to indicate activity
Tap-and-hold - Falling out of favor (hard to discover)
Drag to scroll
Drag to move
Drage to control - knobs, sliders
Swipe up/down - Scroll with simulated momentum
Swipe Left - Scroll carousel with simulated momentum
Swipe Right - Scroll carousel with simulated momentum
Pinch Zoom - Zoom in and out
Rotate - Rotate objects, views, etc - Awkward to use |
|
|
Term
|
Definition
Address book
Share function
Email |
|
|
Term
|
Definition
Same design adapts to different views
Traditionally design was unique and specific to device size |
|
|
Term
| Web - How to Create Responsive Design |
|
Definition
1. Design for the mobile user first
2. Refine your content down to its essential points
3. Revise non mobile friendly: Flash, hover states
4. Re-assess your API’s for compatibility, performance |
|
|
Term
| Web - Major break points (page width) |
|
Definition
◦ Smartphone <480px
◦ Tablets portrait <768px
◦ Tablets landscape >768px
◦ Desktop >1024px |
|
|
Term
| Device Awareness, Feature Detection |
|
Definition
◦ Process/Render different content based on device type and feature detection
◦ Key items: Device, OS, Browser
◦ Existing frameworks and API simplify the task
◦ Dojo – dojo.has, dojox.mobile.deviceTheme
◦ IBM Worklight - WL.Client.getEnvironment |
|
|
Term
| What're the responsiveness buckets? (4) |
|
Definition
1ms - instantaneous (user in direct control)
1s - responsive (still doesn't impact flow)
1-10s - slow (user's mind starts to wander)
>10s - broke flow (critical to have cancel mechanism) |
|
|
Term
| How should UIs accommodate all 3 user types? |
|
Definition
Keep UI simple and have clear starting points.
Beginners: match mental model, wizards, guided tour
Intermediate/Advanced: progressive disclosure, macros, shortcuts |
|
|
Term
| Describe the UI challenges with a novice. |
|
Definition
1. Doesn't know how to acheive goals; isn't able to realize her mental model.
2. Not interested in learning interface, just wants to get it done.
3. Prone to frustration, confusion, and abandonment. |
|
|
Term
| How does data integrity differ from data immunity? |
|
Definition
Integrity: defensive, sanitization of data, "shakedown"
Immunity: next level, prevent invalid data from ever entering the system, if it does, have smarter system that corrects without halting the experience (e.g. allow user to type "nine" in an int field instead of 9) |
|
|
Term
|
Definition
| Ensuring that bad data never enters the system by putting up barriers. (using three fields for phone number) |
|
|
Term
|
Definition
| Ensuring that bad data does not affect the system negatively by designing smarter applications that can handle all permutations of data. (Using software to parse phone number) |
|
|
Term
| How to Effectively Handle Missing Data |
|
Definition
Provide rich modeless feedback
Don't interrupt the user |
|
|
Term
| What does "Audit don't Edit" mean |
|
Definition
| Don't assume what changes need to be made, quietly, modelessly let the user know there is an issue. |
|
|
Term
| How can an interface help the user with inputting data? |
|
Definition
Handling missing data: RVMF, think of phone number inserting parentheses
Fudgeability: let users do what they want, keep a record of it for later if needed
Auditing over Editing: spellcheck, but don't autocorrect |
|
|
Term
| What can a system do to improve the storage and retrieval of data? |
|
Definition
1. Automatic saving
2. Relational model (as opposed to data soup)
3. Attribute-based retrieval
4. Putting files where user can find them |
|
|
Term
| What can a system do to improve the storage and retrieval of data? |
|
Definition
1. Automatic saving
2. Relational model (as opposed to data soup)
3. Attribute-based retrieval
4. Putting files where user can find them |
|
|
