Lectures 14, 15, & 16 Flashcards
What is Interaction design?
Determines what’s on the screen & how people use/interact with those elements
- PART OF UX DESIGN
What is interaction design concerned with?
- The interaction between the user & a system
- Navigation, buttons, links, form fields, & interactions
- Not worried about how the application looks
What is visual design?
Determines how elements look
What are the different methodologies/approaches interaction designers rely on?
- Usability
- 5 dimensions (Words, Visual representation, physical objects or space, time, & behavior)
- 3 laws (Hicks, Fitts, Teslers)
What is usability?
Refers to the quality of a user’s experience when interacting with a product
Why is usability important?
- UX design = creating a better experience for the user
- Better experience = creating something that is usable
What is the dimension “words”?
- Concise, simple language
- Words need to be meaningful & easily understood
- Remove unnecessary words
What is the dimension “Visual representation”?
Anything that is not a word
- Use in moderation
What is the dimension “Physical Objects or space”?
- Physical objects used to interact with the product (mouse, keyboard, fingers on mobile)
- The space user is in when using product (office, standing outside)
What is the dimension “Time”?
- UI elements that change with time (animation, sound)
- Ex. sending a text on your phone (visual and sound feedback)
What is the dimension “behavior”?
- How user performs actions
- How the system provides feedback to user’s actions
What is Hicks law?
- The more choices a person has, the longer it takes
- Simple decisions
- Categorize to make products easier to find
What is Fitts law?
Bigger object = faster a user can point it out
What is Teslers law?
- Every app has complexity
- Keep design simple & easy to navigate, move complexity behind the scenes
What do you include in screen layout?
- Figure out “what” information is necessary for the screens
- “Approach the design as a conversation” between the user & the company
- Ex. multi-step forum
What are the different aspects of screen layout?
- User’s don’t read
- Illuminate the path to completion
- Labels & label placement
-Input fields - Smart Defaults
- Help Text
- Consistency
In screen layout, what does “User’s don’t read” mean, and what does it include?
- Users scan
- Page patterns (Z-pattern & F-pattern)
What is the Z-pattern good for?
- Pages with minimal content
- Pages that aren’t centered on text
What is the F-pattern good for?
- Text heavy pages
In screen layout, what is illuminating the path to completion?
- Tell users where they are (titles)
- Provide a clear scan line
- Progress indications
What are the pros and cons to top-alignment and when do you use top-alignment?
Pros
- Reduces form completion time
- User process this easily
- Less horizontal spacing
- Clear path to completion
- Flexible when text length changes
Cons
- Increased vertical space
When to use
- Reduce completion time
- Flexible with label length
What are the pros and cons to right-alignment and when do you use right-alignment?
Pros
- Reduces form completion time
- Users process this easily
- Less vertical space
Cons
- Ragged edge reduces readability
- Less flexible when text length changes
- Less horizontal space
When to use
- Reduce completion time
- Reduce vertical screen space used
What are the pros and cons to left-alignment and when do you use left-alignment?
Pros
- Easier to scan, readable
- Less vertical space
Cons
- Completion time reduced if field & label are NOT in close proximity
- Less flexible when text length changes
- Less horizontal space
When to use
- Reduces vertical screen space used
- Slows users down to learn what is required
What are the pros and cons to labels within fields and when do you use labels within fields?
Pros
- Good when there isn’t much screen space
- Requires less vertical & horizontal space
Cons
- Context is gone when label disappears
When to use
- To deal with extreme space constraints
What is mixed-alignment?
- Generally not done
- “Harder to use” feeling for users
- Never done on the same page/screen
What is a smart default?
- A selection put into place that will serve most users
- Can reduce the number of options a user needs to make (Hick’s Law)
What are the different kinds of help text?
Next to input field
- Keeps text clear & concise
Automatic inline
- Help presented when user enters the field
User-activated
What is consistency?
- Same layout on all screens
- Same language
- Follow platform conventions
What happens when button is pressed?
Success, failure, or in progress
- Useful attricutre
- Visibility of system status
- Responsive feedback
What to do with errors?
- Design principles
- Include text & a visual cue
- Prevent errors from happening in the first place
- Locate message next to error
- Help User Recover
What are the different design principles with errors?
- Error prevention (Nielson)
- Design prevents errors - Recognize, Diagnose, & Recover from errors
- Message in plain language, indicate problem, suggest solution - Foregiveness
- Mistakes easy to recover
What are the options for locating message next to error & which is preferred?
Top of Form Validation vs Inline Validation
- Inline validation whenever possible to provide direct feedback
