Scribd
Upload
9 views

HCI 05 DesignCycle

Uploaded by

Samuel Themba
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

HCI 05 DesignCycle

Uploaded by

Samuel Themba
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

+

The Design
Process

CSC2002S Melissa Densmore, UCT


+ Design A key HCI concept: Starting with an
initial needs assessment and design,
2

Cycle: you build better prototypes based on


the evaluation of the previous one

Design
Evaluate &
Analysis

Prototype
+ 3

Design: Define the Problem/Goal


Choose the appropriate framing, e.g. “helping cyclists to drink
coffee safely” rather than “design bicycle cup holders”

Avoid inserting a preconceived solution into the problem.


Another example:
(A)problem statement is “Getting data to download books”
(B)problem statement is “Being able to download books in a world
where data bundles are expensive and limited”
Here (A) presumes a solution of getting the data, while (B) labels it as
context, opening up other possible approaches.
+ 4

Understand your users

Where are
they?

What are
their
constraints?

Who are
they?
+ Design: Create Personas 5

 Easier to generalize about


fictional people
 What would Lisa Simpson
do?

 General users have too


many conflicting goals

 Specific personas have


clear, well-articulated
goals.
+ 6

Personas
 One method of analysis is to develop personas that characterize
perspectives of different users.

 What makes a good persona? They need a name (a fictitious one),


so they are relatable, perhaps a catch phrase to help capture what
makes them unique. They need specific goals. And they have
specific characteristics – e.g. what phone they use, how often they
use it, how much data they use regularly, favorite apps, etc. More
details helps you better empathize with the user.

 Why personas? Why not a list of requirements for a general user?


The “general user” is hard to identify with – and can be confusing –
e.g. goals for expert and novice/infrequent users may be quite
different. Personas help to capture those differences and to clarify
your design plan.

 Aim to clearly identify your target user; what are their goals, etc.
+  Stretch mental muscles
 Loosen up with simple games
 Do homework (toy store? expert
videos? chocolate room?)
 Seed with related ideas/objects

 Get physical
Brainstorming  Sketch
 Make models

As an exercise,  Act out

imagine  IDEO rules


brainstorming how to  One conversation at a time
help students and  Stay focused
staff find UCT venues  Encourage wild ideas
 Defer judgment
 Build upon ideas from others

Aim for Quantity & hope for


Quality
Task flow
A series of steps to get a specific job done or achieve a specific goal.
User flows

A user flow is a story, a path the user


follows, including their decision
points. A user flow often involves a
specific personas and scenarios.

A task flow is more focused on a


specific task, and is a linear process,
whereas a user flow is more focused
on a specific user and is seldom linear
as it can have different branches
UX task flows vs. user flows, as demonstrated by
pancakes
https://medium.com/erika-harano/ux-task-flows-versus-user-flows-as-
demonstrated-by-pancakes-896e78a98026
Task flow
Create a
page on
our website
to elevate
the use of
our boxed
mixes
User flow
EMPATHY
+ 16

Activity – do a Crazy Eights Sketch


https://www.youtube.com/watch?v=UXOLJy0E7Pg
+ 17

What Makes a Sketch “sketchy”?

The top left is


clearly a
sketch, but
not the top
right.
A sketch is a
rough
drawing,
showing little
detail, yet
conveying the
idea one has
in mind.
+ Tips for sketching 18

 Don’t stress about quality or if you can draw a straight line, stick figures
are totally fine!

 Use squiggles instead of text, boxes instead of pictures

 Don’t think, just draw (fast) – give yourself a time limit

 You don’t have to finish every picture!

Image credit: https://blog.prototypr.io/everything-you-should-know-to-conduct-a-kickass-user-testing-89977e653123#.4zscrowky


+ 19

Iteration

Christi Hagen, UX Project with Eaton Corporation, http://christihagen.com/Capstone.html


20
+ 21

Prototype

 Build something tangible


so you can get feedback

 Experiment with
alternative designs
(cheaply!)

 Fix problems with concept and


flow before code is written

 Keep the design centered on


the user!
+ 22

Types of Prototypes

low fidelity high fidelity

manual interactive
+ State Transition 23

The figure
below each
sketch
shows how
users
proceed
from screen
to screen.
The screen
in the sketch
above is
shown in
yellow each
time.
+
24

Movie Storyboards
The Graduate (1967)
Katz 1991
25

By s250401
http://www.storyboardthat.com/userboards/s250401/storyboard-android-device
+ 26

Tangible Materials: Lo-Fi


 Heavy white paper (large!)

 Index cards

 Post-it Notes

 Tape, gluestick, correction


tape

 Pens & Markers

 Transparencies, tracing paper

 Playdough, Legos

 Scissors, x-acto knives


The Leimert Phone Co. IML 404: Tactical Media
http://iml-tactical-media.tumblr.com/post/75933707632/week-5-rapid-prototyping-readings-march 27

Melissa Densmore, UCT CSC2002S


+ 28

Constructing the Prototype


 Set a deadline
 Don’t think too long – build it!

 Draw a window frame on large paper


 Draw larger – but keep the same aspect
ratio

 Put different screen regions on cards


 Anything that moves, changes
appears/disappears
 Use squiggles to indicate text if necessary
Miiverse cardboard prototype
Kazuyuki Motoyama
 Ready response for any user action
Nintendo
 Pull-down menus
 Screen transitions https://www.smashingmagazine.co
m/2014/10/the-skeptics-guide-to-
 Use photocopier to make many versions low-fidelity-prototyping/
29

Vivien J. Lim, The CraftFinder: Unconventional Search


http://vivienlim.net/projects/the-craftfinder-unconventional-search/
+ 30

Interactive Digital Prototypes

 InVision

 FIGMA

 Sketch

 Powerpoint/Keynote

 FluidUI

… and many others


+ 31

Why not just Hi-fi?

 DistortPerceptions of User
 Formal representation
indicates “finished” nature
 People comment on color,
fonts, alignment

 Discourages major changes


 Testers don’t want to change a
“finished” design
 Designers don’t want to lose
effort put into the design

You might also like