cs449/649: human-computer interactioncs449/s19/lecture 13... · 2019-06-05 · site/app flows user...
TRANSCRIPT
![Page 1: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/1.jpg)
CS449/649: Human-Computer Interaction
Spring 2019
Lecture XIII
Anastasia Kuzminykh and Edward Lank
![Page 2: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/2.jpg)
Sketches Mockups Wireframes
Static representations of the product
Visualization
Create Design Ideas
![Page 3: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/3.jpg)
Image: https://brainhub.eu/blog/difference-between-wireframe-mockup-prototype/
![Page 4: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/4.jpg)
Matt Sclarandis’s Weather App Wireframe on Behance
Wireframe Mockup
![Page 5: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/5.jpg)
![Page 6: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/6.jpg)
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
Prototype DesignCreate Design Ideas
![Page 7: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/7.jpg)
Information Architecture - structural design of shared information environments
Prototype DesignCreate Design Ideas
Richard Saul Wurman
Users flow through your product
Catalog user’s information
Presentation of the information
Decision driving function
![Page 8: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/8.jpg)
Knowledge Organisation
Taxonomy Folksonomy Domain Analytics Approach
Prototype DesignCreate Design Ideas
![Page 9: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/9.jpg)
Knowledge Organisation
Taxonomy Folksonomy Domain Analytics Approach
Prototype DesignCreate Design Ideas
Practice of classification based on hierarchical relationship.
Parent-child hierarchies
Practice of classification based on non-hierarchical relationship.
Public tags and their frequencies
Practice of classification based on sociological - epistemological view.
Indexing to fulfill a task by specific group
![Page 10: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/10.jpg)
Open Card Sort:
Participants get a stack of cards
Participants sort cards into groups
Participants label groups
Closed Card Sort:
Participants get a stack of cards
Participants sort cards into groups the researchers created
1 2
1 2 3
![Page 11: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/11.jpg)
![Page 12: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/12.jpg)
Sketches Mockups Wireframes
Static representations of the product
Visualization
Create Design Ideas
![Page 13: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/13.jpg)
Prototype Design
Prototypes - interactive design model of the product
Low-fidelity High-fidelity Sketches Mockups Wireframes
Static representations of the product
Testing and EvaluationVisualization
Create Design Ideas
![Page 14: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/14.jpg)
Prototype Design
Prototypes - interactive design model of the product
Low-fidelity High-fidelity VS
![Page 15: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/15.jpg)
Prototype Design
Prototypes - interactive design model of the product
Low-fidelity High-fidelity
Breadth - number of covered features
Depth - degree of functionality
Appearance - building means
Input methods - device mediation
VS
![Page 16: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/16.jpg)
Prototype Design
Prototypes - interactive design model of the product
Low-fidelity High-fidelity
Tangible & Testable Artifacts
Low-tech High-tech
Partial functionality “Full” functionality Simulated interaction True interaction
![Page 17: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/17.jpg)
Socio-cultural context
Motivation not to use
Motivation to use
Set of beliefs & knowledge
Behavior around the problem
Translating problems
Personas
Speak users language
Exploratory study
Elaborate with your participants
Participatory design
Working around paper prototypes
![Page 18: CS449/649: Human-Computer Interactioncs449/s19/Lecture 13... · 2019-06-05 · Site/App Flows User Flows Goal - to optimize users ability to accomplish a task with the least amount](https://reader034.vdocuments.mx/reader034/viewer/2022042218/5ec3baaee32d5633f8535ae6/html5/thumbnails/18.jpg)
Prototype Design
Paper Prototypes
Early feedback Experiment with alternatives
Lo-fi appearance /
input Interactive
Simulation of a back-end
Hi-fi depth / breadth
Big picture focus