cs449/649: human-computer interactioncs449/s19... · site/app flows user flows goal - to optimize...
TRANSCRIPT
![Page 1: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/1.jpg)
CS449/649: Human-Computer Interaction
Spring 2019
Lecture XII
Anastasia Kuzminykh and Edward Lank
Please sit with your team
![Page 2: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/2.jpg)
![Page 3: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/3.jpg)
Create Ideas Design
Create Design Ideas
![Page 4: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/4.jpg)
Create Ideas Design
Create Design Ideas
![Page 5: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/5.jpg)
Create Design Ideas
Design
Interface - a surface/place where two independent systems, bodies or spaces meet / form a common boundary, and communicate with each other
Interface - a communication channel
Communication - exchanging of information
![Page 6: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/6.jpg)
Create Design Ideas
Signifier - indicators of any type that communicate the action needed so the affordance can take place
Design
Affordance - the possible use for an object when interacting with it
Constraints - restrictions that limit the possible actions available with an object
Feedback - conveys effects of user’s actions
Discoverability - whether it’s possible to figure out how to use an object by interacting with it
Mapping - indication of the relationship between objects
Conceptual Model - user’s understanding of how the system works communicated through the design
![Page 7: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/7.jpg)
Create Ideas Design
Create Design Ideas
![Page 8: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/8.jpg)
Create Ideas
Create Design Ideas
Nature Nurturevs
Generating ideas: memories ordinary extraordinary
Creativity - process of producing a new idea which has value to someone
![Page 9: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/9.jpg)
Create Ideas
Create Design Ideas
Creative process
1. Preparation
2. Provocation
4. Eureka moment
5. Verification
3. Incubation 6. Realization
![Page 10: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/10.jpg)
Create Ideas
Create Design Ideas
1. Preparation Define the constraints: goals, parameters of the challenge, resources, time
Knowledge and understanding around the challenge: both academic and casual
Challenge all the assumptions
![Page 11: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/11.jpg)
Create Ideas
Create Design Ideas
2. Provocation
Overcoming associative limitations
Framing and reframing problems
Design Fixation
Force of habits
![Page 12: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/12.jpg)
Create Ideas
Create Design Ideas
2. Provocation
Overcoming associative limitations
Framing and reframing problems
Practice true randomness
Connect and combine
Change the routine
Design Fixation
Force of habits
![Page 13: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/13.jpg)
Create Ideas
Create Design Ideas
3. Incubation Mindful procrastination can sometimes be helpful
![Page 14: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/14.jpg)
Create Ideas
Create Design Ideas
4. Eureka moment
Always write it down in the moment no matter what
![Page 15: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/15.jpg)
Create Ideas
Create Design Ideas
5. Verification
All ideas are rough when they are first visualized - get through the criticism
Be optimistic, give your crazy ideas a chance
No right answers, only working solutions
![Page 16: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/16.jpg)
Create Ideas
Create Design Ideas
Creative process
1. Preparation
2. Provocation
4. Eureka moment
5. Verification
3. Incubation 6. Realization
![Page 17: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/17.jpg)
Create Design Ideas
Sketches User stories Wireframes
![Page 18: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/18.jpg)
Create Design IdeasSupports brainstorming
Doesn’t have to look good
Fast and simple
Speeds up your work
Supports communication
Tells a story
Sketches - illustration of how the basic
concept works
Image: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
![Page 19: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/19.jpg)
Create Design Ideas
Sketched Wireframes 5 APG Website
![Page 20: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/20.jpg)
Create Design Ideas
Hashlove Friends Invite OnlyJames Wireframe Sketch
![Page 21: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/21.jpg)
Create Design Ideas
Dinosaurs Taykt Wireframe
![Page 22: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/22.jpg)
Create Design Ideas
Sketches - illustration of how the basic
concept worksUser stories
Image: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
Wireframes
![Page 23: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/23.jpg)
Create Design Ideas
As a user / <persona> ,I want / need <action>so that I can <user goal>.
Keep it simpleA
communication tool
Keep breaking them down
Have acceptance
criteria
Keep them visible
Prevent dead-ends
User stories - description of a feature from
an end-user perspective
![Page 24: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/24.jpg)
Create Design Ideas
As a user / <persona> ,I want / need <action>so that I can <user goal>.
Keep it simpleA
communication tool
Keep breaking them down
Have acceptance
criteria
Keep them visible
Prevent dead-ends
“As a user I want to send an email.”
“As a user I need to type in an email address”“As a user I want to type in an email subject”“As a user I want to type in an email text”
User stories - description of a feature from
an end-user perspective
![Page 25: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/25.jpg)
Create Design Ideas
Sketches - illustration of how the basic
concept works
User stories - description of a feature from
an end-user perspective
Image: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
As a user / <persona> ,I want / need <action>so that I can <user goal>.
Wireframes
![Page 26: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/26.jpg)
Create Design IdeasQuick, cheap and easy
Main groups of content
Used as the documentation
Using pixelated widgets
Structure of content
Only basic visualization
Wireframes - static representation of the UI
layout and user flow
Image: https://www.behance.net/gallery/13421913/Wireframes-Restaurant-App
![Page 27: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/27.jpg)
Create Design Ideas
UX Wireframes for Online Grocery Shopping Mobile App Wireframe for Acura’s Subscriber page on Youtube
![Page 28: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/28.jpg)
Create Design Ideas
Sketches - illustration of how the basic
concept works
User stories - description of a feature from
an end-user perspective
Wireframes - static representation of the UI
layout and user flow
Image: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
As a user / <persona> ,I want / need <action>so that I can <user goal>.
Image: https://www.behance.net/gallery/13421913/Wireframes-Restaurant-App
![Page 29: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/29.jpg)
Exercise: time management
Create Design Ideas
![Page 30: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/30.jpg)
Exercise: time management application
Create Design Ideas
Step 1: individual brainstorm
![Page 31: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/31.jpg)
Exercise: time management application
Create Design Ideas
Step 2: team ideation and user stories
As a user / <persona> ,I want / need <action>so that I can <user goal>.
![Page 32: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/32.jpg)
Exercise: time management application
Create Design Ideas
Step 3: crazy eights
![Page 33: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/33.jpg)
Create Design Ideas
Site/App Flows User Flows
Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions
The path a user follows through an application. Does not have to be linear, can branch out
![Page 34: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/34.jpg)
Create Design Ideas
Site/App Flows User Flows
Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions
The path a user follows through an application. Does not have to be linear, can branch out
What pages/screens are needed
Which pages/screens should link to each other
Help to design a navigation experience
![Page 35: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/35.jpg)
Create Design Ideas
Site/App Flows User Flows
Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions
The path a user follows through an application. Does not have to be linear, can branch out
What pages/screens are needed Microinteractions and responses to user’s actions and errors
Which pages/screens should link to each other
Help to design a navigation experience Often attached to personas
Help to analyze the efficiency of a task
![Page 36: CS449/649: Human-Computer Interactioncs449/s19... · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount of steps. Communicates transitions](https://reader034.vdocuments.net/reader034/viewer/2022050217/5f62f48970f2b6662d02d2a1/html5/thumbnails/36.jpg)
Exercise: time management application
Create Design Ideas
Step 4: app flows and user flows