SLIDE 1
Me Menus nus and nd Navigation
- Prof. Lydia Chilton
COMS 4170 12 February 2018 No screens
Say your name
Me Menus nus and nd Navigation No screens Say your name Prof. - - PowerPoint PPT Presentation
Me Menus nus and nd Navigation No screens Say your name Prof. - - PowerPoint PPT Presentation
Me Menus nus and nd Navigation No screens Say your name Prof. Lydia Chilton COMS 4170 12 February 2018 Users cant focus on everything at once. They have a spotlight of attention. 1 2 3 The design must guide users attention .
SLIDE 2
SLIDE 3
Visual Hierarchy: Conceptual Grouping
You are cordially invited to Robert and Alexandra’s delectable after dinner party. Wine and nibbles will be served. When: February 20th, 2018 at 9:30pm. Where: the pad. If you need directions, ping us. Kindly let us know if you will be attending by February 1st. You are cordially invited to Robert and Alexandra’s delectable after dinner party. Wine and nibbles will be served. When: February 20th, 2018 at 9:30pm. Where: the pad. If you need directions, ping us. Kindly let us know if you will be attending by February 1st.
SLIDE 4
Eye Tracking Data
SLIDE 5
But for complex tasks, the information doesn’t fit in one screen.
Buying a book on Amazon:
- Search for the book
- Select the edition
- See the reviews
- Look at the index
- How many pages does it have?
- Put it in your cart
- Shop around for other things
- Select a payment method
- Enter payment method information
- Enter shipping information
- Go back and put something else in the cart
- Change to rush delivery
- Remove something from the cart
SLIDE 6
For complex tasks, guide users attention by breaking the task into states, options, and transition to new states.
SLIDE 7
Examples of States, Options and Transitions
SLIDE 8
Am Amazon: n: What is this state? Am Amazon: What are the options in this state?
SLIDE 9
Am Amazon: n: What are the options in this state?
SLIDE 10
Am Amazon: n: What are the options in this state?
SLIDE 11
Am Amazon: n: What are the options in this state?
SLIDE 12
Bob Ross 1234123412341234 1234
Am Amazon: n: What are the options in this state?
SLIDE 13
Am Amazon: n: What are the options in this state?
SLIDE 14
Am Amazon: n: Why are we in this state?
SLIDE 15
Ub Uber er: What is this state? Ub Uber er: What are the options in this state?
SLIDE 16
Ub Uber er: What are the options in this state?
SLIDE 17
Ub Uber er: What are the options in this state?
SLIDE 18
What are the states, options, and transitions of
cha hang nging ng the he font in n MS MS Word?
SLIDE 19
Ch Change font: What state are we in? Ch Change font: What are the options in this state?
SLIDE 20
Ch Change font: What are the options in this state?
SLIDE 21
Ch Change font: What are the options in this state?
SLIDE 22
DDR DDR: What state are we in? DDR DDR: What are the options in this state?
SLIDE 23
DDR DDR: What are the options in this state?
SLIDE 24
DDR DDR: What are the options in this state?
SLIDE 25
DDR: Why are we in song selection mode?
SLIDE 26
When you have too much information for one screen, de desig ign n states, optio tions ns and and tr trans ansitio itions ns for the user to navigate through to complete their goal.
SLIDE 27
In a state, how many options are there?
SLIDE 28
Am Amazon n se search: How many options are there?
SLIDE 29
Am Amazon n Resul sults: s: How many options are there?
SLIDE 30
Am Amazon n Depa partments: How many options are
there?
SLIDE 31
When displaying ~10
~10 options, how do you display
them to suit the needs and abilities of people? List
SLIDE 32
When displaying ~100
~100 options, how do you display
them to suit the needs and abilities of people? A tree
SLIDE 33
When displaying ~1000
~1000 options, how do you display
them to suit the needs and abilities of people? Search
SLIDE 34
Ya Yahoo 1995: What interaction style is this?
SLIDE 35
Bo Books s 1200: 1200: What interaction style is this?
SLIDE 36
1000 items
SLIDE 37
When displaying options, the number of
- ptions determines the interaction style.
~10 items = list ~100 items = tree ~1000 items = search
SLIDE 38
Designing Menu Options
SLIDE 39
What happens when you have too many
- ptions?
SLIDE 40
Why is this first?
SLIDE 41
Why is this 10 menu items deep?
SLIDE 42
Pe People have limited time.
Make frequently used options easier to access Make rarely used options harder to access
SLIDE 43
What happens when there are ir
irrele elevan ant
- ptions?
SLIDE 44
TITANIUM WHITE
SLIDE 45
CADMIUM YELLOW
SLIDE 46
SAP GREEN
SLIDE 47
PHTHALO BLUE
SLIDE 48
ELECTRIC PINK
Why not do this?
SLIDE 49
Irrelevant options create distractions Users will expend energy to focus. OR make mistakes
SLIDE 50
Gm Gmail ail Reply ly Mode:
What options/information is at hand?
SLIDE 51
Gm Gmail ail Compose Interface ace:
What options are hand?
SLIDE 52
Summary
SLIDE 53
Users can’t focus on everything at once. They have a spotlight of attention.
1 2 3
The design must guide users’ attention.
SLIDE 54
For complex tasks, guide users attention by breaking the task into:
st states, options, and transitions to new states.
SLIDE 55
When displaying options, the number of
- ptions determines the interaction style.
~10 items = list ~100 items = tree ~1000 items = search
SLIDE 56
Pe People have limited time.
Make frequently used options easier to access Make rarely used options harder to access
SLIDE 57