design chris north cs3724: hci. quiz what are the 3 steps in producing a ui?
TRANSCRIPT
![Page 1: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/1.jpg)
Design
Chris North
cs3724: HCI
![Page 2: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/2.jpg)
Quiz
• What are the 3 steps in producing a UI?
![Page 3: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/3.jpg)
Process
Design
Evaluate Develop
Many iterations
![Page 4: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/4.jpg)
Homework #0: UI Analysis
• See website
• Pick a movie of your choice
• Task: find a convenient playing time and location
• Use 3 different systems:• 1-800-555-TELL
• www.moviefone.com
• www.hollywood.com/showtimes/
• Write down the time it takes you for each
• Bring your times to class on Thursday
![Page 5: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/5.jpg)
Homework #0
• Qualitative discussion• Usability problems, errors, access, alternate tasks, …
• Quantitative discussion• Data averages, min, max
• Data visualization
• Statistics, t-tests, …
![Page 6: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/6.jpg)
5 UI Metrics
• User performance time
• User error rates
• User learning time
• Users’ retention time
• User subjective satisfaction
Not “user friendly”, “intuitive”
![Page 7: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/7.jpg)
Design Process
1. Understand the problem• Users
• Tasks
2. Sketch solutions• Apply design principles
• Continuously evaluate
• Be creative
![Page 8: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/8.jpg)
Know Thy User
• Age, computer exp, education, handicaps, language, culture, hardware, access
• Frequency of use / expertise
![Page 9: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/9.jpg)
Task Analysis
• 30% Know movie, what time,loc?
• 30% Browse: what movies are out, where, when
• Know time, what movie,loc,duration?
• Know loc, what movie,when
• 5% ratings
![Page 10: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/10.jpg)
Task Profiles
• Tradeoffs between tasks
• Task i: • Frequency of occurance
• User performance time
• Global optimization:• Minimize: tasks freqi*timei
![Page 11: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/11.jpg)
Design Process
1. Understand the problem• Users
• Tasks
2. Sketch solutions• Apply design principles
• Continuously evaluate
• Be creative
![Page 12: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/12.jpg)
Over-arching Principle
Think from the user’s perspective
![Page 13: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/13.jpg)
Shneiderman’s 8 Golden Rules
1. Consistency multi-close Word, PPT
2. Shortcuts for experts Word bold
3. Feedback Wysiwyg
4. Sequences with closure wizards
5. Prevent errors, rapid recovery undo
6. Easy reversal HomeFinder
7. User control ClipIt modal
8. Reduce memory load web nav, phone menu
![Page 14: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/14.jpg)
Nielsen’s 10 Heuristics1. Visibility of status2. Speak user’s language error message
3. User control, freedom4. Consistency5. Error prevention6. Recognition over recall menu or
command
7. Efficient, flexible8. Aesthetic minimalist9. Error recovery10. Help
![Page 15: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/15.jpg)
Speak the User’s Language
![Page 16: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/16.jpg)
The Hard Part
• Balancing Tradeoffs
• Some “tradeoffs” aren’t tradeoffs• Creativity
• “Design is radically transformational”
![Page 17: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/17.jpg)
Homework #1: UI Critique
• See website
• Due: Thursday, Jan 24
• Goal: analyze and critique a UI of your choice
• Pick a UI• Software, or real world
• Not too big
• Not a website
• 2 pages:• Good things
• Bad things, redesign suggestions
![Page 18: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/18.jpg)
Presentations
• 2 / lecture
• 5 minutes, 2-3 slides
• UI critique
• Vote: UI Hall of Fame/Shame
• Tues: mike miller, sean king
• Thurs: brian hostetle, daniel boisson
![Page 19: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/19.jpg)
Fast Food Drive-Thru Menus
• User Tasks:• Get food
• FAST!
• Typically: Not sure what I want
• Sometimes: Know what I want
• Passengers want food too
• Limited budget
![Page 20: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/20.jpg)
The Good
• All in one view
• Organized by categories
• Tabular format: left alligned, prices alligned
• Combo meals (high frequency)
• Get price before proceeding
• Some: feedback on order
Need picture!
![Page 21: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/21.jpg)
The Bad
• See menu too late
• Passengers cant see menu
• Passenger must order thru driver
• Winter: brrrrr…
• Small Redesign ideas:• More menus back in line
• Menu on both sides of car
• Microphone on both sides
• Radical: cell phone, in-car UI
![Page 22: Design Chris North cs3724: HCI. Quiz What are the 3 steps in producing a UI?](https://reader036.vdocument.in/reader036/viewer/2022062806/56649e835503460f94b850e4/html5/thumbnails/22.jpg)
The Ugly
• Can’t understand a word they say
• They cant hear me over my ’87 VW