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
