cs449/649: human-computer interactioncs449/s19/lecture 13... · 2019-06-05 · site/app flows user...

CS449/649: Human-Computer Interaction

Spring 2019

Lecture XIII

Anastasia Kuzminykh and Edward Lank

Sketches Mockups Wireframes

Static representations of the product

Visualization

Create Design Ideas

Image: https://brainhub.eu/blog/difference-between-wireframe-mockup-prototype/

Matt Sclarandis’s Weather App Wireframe on Behance

Wireframe Mockup

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

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

Knowledge Organisation

Taxonomy Folksonomy Domain Analytics Approach

Prototype DesignCreate Design Ideas

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

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

Sketches Mockups Wireframes

Static representations of the product

Visualization

Create Design Ideas

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

Prototype Design

Prototypes - interactive design model of the product

Low-fidelity High-fidelity VS

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

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

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

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