User-Centered Design Week 3 - Iridescent

darkfryingpanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

79 εμφανίσεις



Technovation

User
-
centered Design

Week 3







Check
-
in
: survey


Now you have
survey results from
~20
people



Stand up as a team and share
interesting results from your surveys




Agenda


Topics


Lists and Loops


User
-
Centered Design


Prototyping Lifecycle


Usability Testing


Activities


Usability testing of competitor apps


Paper prototyping





Lots of Circles


What tools did you
use?


Lists


Loops


Randomness


How can you use
these in your app?







Lists


For example:


to
do
list


list of students in the class


In CS:


An
ordered set of values


Can
get to individual items
if you know their
number


Or we can pick a random
item



2


3.

Fr
o
m

t
h
e
Dr
a
w
C
i
r
c
l
e

dr
a
w
e
r
,

d
ra
g

Dr
a
w
C
i
r
c
l
e
.
C
lic
k

ont
o
t
he

pr
oj
e
c
t

a
r
e
a
.

4.

Fi
r
s
t
,

s
et

t
h
e
p
ai
n
t

c
o
l
o
r
.

Fr
o
m

t
h
e
C
an
vas
1
d
r
aw
er
,

d
r
ag

se
t

C
a
n
v
a
s1
.
P
a
i
n
t
C
o
l
o
r

an
d

p
l
u
g

i
n
t
o

Dr
a
w
C
i
r
c
l
e
.
C
l
i
c
k

bl
oc
k
.

Choos
e

a

r
a
ndom

pa
i
nt

c
ol
or

by

us
i
ng
t
he

L
i
s
t
s

f
unc
t
i
on
ca
l
l

p
i
ck

r
a
n
d
o
m

i
t
em

pl
ug
t
ha
t

i
nt
o
se
t

C
a
n
v
a
s1
.
P
a
i
n
t
C
o
l
o
r
.


Un
d
e
r

My
B
l
o
c
k
s
,

o
p
e
n

t
h
e

My

D
e
f
i
n
i
t
i
o
n
s

d
r
a
w
e
r

a
n
d

dr
ag
t
he

gl
obal

c
ol
or
L
i
s
t

bl
oc
k

out
;

pl
ug
i
t

i
n
a
s

t
he

pa
r
a
m
e
t
e
r

t
o
ca
l
l

p
i
ck

r
a
n
d
o
m

i
t
em
.

5.

Th
en

s
et

t
h
e
s
i
z
e
an
d

l
o
c
at
i
o
n

o
f

t
h
e
c
i
r
c
l
e.


Fr
o
m

t
h
e
Ca
nv
a
s
1

dr
a
w
e
r
,

dr
a
g
Ca
nv
a
s
1
.
D
r
a
w
Ci
r
c
l
e

bl
oc
k

in
t
o
t
h
e

Dr
a
w
C
i
r
c
l
e
.
C
lic
k

bl
oc
k
.


6.

No
w

c
h
o
o
s
e

a

r
a
n
d
o
m

l
o
c
a
t
i
o
n

o
n

t
h
e

c
a
n
v
a
s

f
o
r

t
h
e

x

an
d

y
. F
r
o
m
t
h
e

Ma
t
h

dr
a
w
e
r
,

dr
a
g
t
he

ca
l
l

ra
n
d
o
m

i
n
te
g
e
r

bl
oc
k

i
nt
o
t
he

x

a
nd
y
. F
o
r

x
, s
e
t

fr
o
m

to
1

a
n
d

to

to

Ca
nv
a
s
1
.
W
id
t
h

fr
o
m

t
h
e

Ca
nv
a
s
1

dr
a
w
e
r
.

F
or

y
, s
e
t

fr
o
m

to
1

a
n
d

to

to

Ca
nv
a
s
1
.
He
i
g
h
t

fr
o
m

t
h
e

Ca
nv
a
s
1

dr
a
w
e
r
.

7.

No
w

c
h
o
o
s
e

a

r
a
n
d
o
m

s
i
z
e

f
o
r

t
h
e

r
. F
r
o
m
t
h
e

Ma
t
h

dr
a
w
e
r
,

dr
a
g
t
he

ca
l
l

r
a
n
d
o
m

i
n
t
eg
er

bl
oc
k

i
nt
o
r.

Set

th
e

fr
o
m

to

5

a
n
d

to

to

3
0
.

8.

Tes
t

o
n

yo
u
r

p
h
o
n
e
t
o

s
ee
i
f

t
h
e
Dr
a
w
C
i
r
c
l
e

but
t
on
w
or
k
s
.


De
f
i
n
e

t
h
e

Dr
a
w
C
i
r
c
l
e
s

b
u
t
t
o
n
.

In
s
t
r
u
c
t
io
n
s

o
n

h
o
w

t
o

d
e
f
in
e

t
h
e

D
r
a
w
C
ir
c
le
s

b
u
t
t
o
n

t
h
a
t

d
r
a
w
s

a

c
ir
c
le

f
o
r

e
a
c
h

c
o
lo
r

in

t
h
e

lis
t

w
it
h

a

r
a
n
d
o
m

c
o
lo
r
,
si
z
e

a
n
d

p
l
a
c
e
m
e
n
t

o
n

t
h
e

c
a
n
v
a
s.

1.

Fr
o
m

t
h
e
Dr
a
w
C
i
r
c
l
e
s

dr
a
w
e
r
,

dr
a
g
Dr
a
w
C
i
r
c
l
e
s
.
C
l
i
c
k

ont
o
t
he

pr
oj
e
c
t

a
r
e
a
.

2.

Fr
o
m

t
he

Bui
l
t
-
in

C
o
n
t
r
o
l

dr
a
w
e
r
,

dr
a
g
t
he

fo
r
e
a
c
h

l
o
o
p

an
d

p
l
u
g

i
t

i
n
t
o

t
h
e
Dr
a
w
C
i
r
c
l
e
s
.
C
l
i
c
k

bl
oc
k
.


No
t
e

th
a
t
th
e

f
o
re
a
c
h

l
o
o
p

h
a
s

a

b
u
i
l
t
-
in
lo
c
a
l v
a
r
ia
b
le
"
v
a
r
"
.


You
m
us
t

pl
ug
co
l
o
r
Li
s
t

in
t
o
t
h
e
b
o
t
t
o
m
o
f
t
h
e

fo
r
e
a
c
h

l
o
o
p
, w
h
e
r
e
i
t
s
a
y
s
"
i
n
l
i
s
t
"
.


Ge
t

co
l
or
L
i
s
t
f
ro
m

th
e

My
B
l
o
c
k
s

My
D
e
f
i
n
t
i
o
n
s

dr
a
w
e
r
.

T
hi
s

s
e
t
s

up
t
he

fo
r

l
o
o
p

s
o

t
h
a
t

e
a
c
h

i
t
e
m

i
n

t
h
e

co
l
o
r
Li
s
t

wi
l
l

g
e
t

b
o
u
n
d

t
o

"
v
a
r
"
,

o
n
e

a
t

a

t
i
m
e
.


3.

Th
e
f
i
r
s
t

c
al
l

i
n
s
i
d
e
t
h
e
fo
r

l
o
op
s
houl
d
be

t
o
s
e
t

t
he

Ca
nv
a
s
1
.
Pai
n
t
C
ol
or

to

"v
a
r".

4.

Co
py

t
he

Ca
nv
a
s
1
.
D
r
a
w
Ci
r
c
l
e

bl
oc
k

t
ha
t

y
ou
w
r
ot
e

i
n
Dr
a
w
C
i
r
c
l
e
B
u
t
t
o
n
.
C
l
i
c
k
.


You
s
houl
d
be

a
bl
e

t
o
se
l
e
c
t

i
t
,

c
o
p
y

i
t
,

t
h
e
n

p
a
st
e

i
t

a
n
d

p
l
u
g

i
t

i
n
t
o

t
h
e

f
o
r
e
a
c
h

l
o
o
p

b
e
l
o
w

t
h
e

se
t

Ca
nv
a
s
1
.
P
a
i
nt
Co
l
o
r

ca
l
l

t
o

lo
o
k
lik
e
t
h
is
.

5.

Tes
t

o
n

yo
u
r

p
h
o
n
e
t
o

s
ee
i
f

t
h
e
Dr
a
w
C
i
r
c
le
s

but
t
on
w
or
k
s
.





Lists


What Hacks have
used lists so far?


Lots of Circles


Crystal Ball


Quiz Me


How can you use lists
in your own app?



2


3.

Fr
o
m

t
h
e
Dr
a
w
C
i
r
c
l
e

dr
a
w
e
r
,

d
ra
g

Dr
a
w
C
i
r
c
l
e
.
C
lic
k

ont
o
t
he

pr
oj
e
c
t

a
r
e
a
.

4.

Fi
r
s
t
,

s
et

t
h
e
p
ai
n
t

c
o
l
o
r
.

Fr
o
m

t
h
e
C
an
vas
1
d
r
aw
er
,

d
r
ag

se
t

C
a
n
v
a
s1
.
P
a
i
n
t
C
o
l
o
r

an
d

p
l
u
g

i
n
t
o

Dr
a
w
C
i
r
c
l
e
.
C
l
i
c
k

bl
oc
k
.

Choos
e

a

r
a
ndom

pa
i
nt

c
ol
or

by

us
i
ng
t
he

L
i
s
t
s

f
unc
t
i
on
ca
l
l

p
i
ck

r
a
n
d
o
m

i
t
em

pl
ug
t
ha
t

i
nt
o
se
t

C
a
n
v
a
s1
.
P
a
i
n
t
C
o
l
o
r
.


Un
d
e
r

My
B
l
o
c
k
s
,

o
p
e
n

t
h
e

My

D
e
f
i
n
i
t
i
o
n
s

d
r
a
w
e
r

a
n
d

dr
ag
t
he

gl
obal

c
ol
or
L
i
s
t

bl
oc
k

out
;

pl
ug
i
t

i
n
a
s

t
he

pa
r
a
m
e
t
e
r

t
o
ca
l
l

p
i
ck

r
a
n
d
o
m

i
t
em
.

5.

Th
en

s
et

t
h
e
s
i
z
e
an
d

l
o
c
at
i
o
n

o
f

t
h
e
c
i
r
c
l
e.


Fr
o
m

t
h
e
Ca
nv
a
s
1

dr
a
w
e
r
,

dr
a
g
Ca
nv
a
s
1
.
D
r
a
w
Ci
r
c
l
e

bl
oc
k

in
t
o
t
h
e

Dr
a
w
C
i
r
c
l
e
.
C
lic
k

bl
oc
k
.


6.

No
w

c
h
o
o
s
e

a

r
a
n
d
o
m

l
o
c
a
t
i
o
n

o
n

t
h
e

c
a
n
v
a
s

f
o
r

t
h
e

x

an
d

y
. F
r
o
m
t
h
e

Ma
t
h

dr
a
w
e
r
,

dr
a
g
t
he

ca
l
l

ra
n
d
o
m

i
n
te
g
e
r

bl
oc
k

i
nt
o
t
he

x

a
nd
y
. F
o
r

x
, s
e
t

fr
o
m

to
1

a
n
d

to

to

Ca
nv
a
s
1
.
W
id
t
h

fr
o
m

t
h
e

Ca
nv
a
s
1

dr
a
w
e
r
.

F
or

y
, s
e
t

fr
o
m

to
1

a
n
d

to

to

Ca
nv
a
s
1
.
He
i
g
h
t

fr
o
m

t
h
e

Ca
nv
a
s
1

dr
a
w
e
r
.

7.

No
w

c
h
o
o
s
e

a

r
a
n
d
o
m

s
i
z
e

f
o
r

t
h
e

r
. F
r
o
m
t
h
e

Ma
t
h

dr
a
w
e
r
,

dr
a
g
t
he

ca
l
l

r
a
n
d
o
m

i
n
t
eg
er

bl
oc
k

i
nt
o
r.

Set

th
e

fr
o
m

to

5

a
n
d

to

to

3
0
.

8.

Tes
t

o
n

yo
u
r

p
h
o
n
e
t
o

s
ee
i
f

t
h
e
Dr
a
w
C
i
r
c
l
e

but
t
on
w
or
k
s
.


De
f
i
n
e

t
h
e

Dr
a
w
C
i
r
c
l
e
s

b
u
t
t
o
n
.

In
s
t
r
u
c
t
io
n
s

o
n

h
o
w

t
o

d
e
f
in
e

t
h
e

D
r
a
w
C
ir
c
le
s

b
u
t
t
o
n

t
h
a
t

d
r
a
w
s

a

c
ir
c
le

f
o
r

e
a
c
h

c
o
lo
r

in

t
h
e

lis
t

w
it
h

a

r
a
n
d
o
m

c
o
lo
r
,
si
z
e

a
n
d

p
l
a
c
e
m
e
n
t

o
n

t
h
e

c
a
n
v
a
s.

1.

Fr
o
m

t
h
e
Dr
a
w
C
i
r
c
l
e
s

dr
a
w
e
r
,

dr
a
g
Dr
a
w
C
i
r
c
l
e
s
.
C
l
i
c
k

ont
o
t
he

pr
oj
e
c
t

a
r
e
a
.

2.

Fr
o
m

t
he

Bui
l
t
-
in

C
o
n
t
r
o
l

dr
a
w
e
r
,

dr
a
g
t
he

fo
r
e
a
c
h

l
o
o
p

an
d

p
l
u
g

i
t

i
n
t
o

t
h
e
Dr
a
w
C
i
r
c
l
e
s
.
C
l
i
c
k

bl
oc
k
.


No
t
e

th
a
t
th
e

f
o
re
a
c
h

l
o
o
p

h
a
s

a

b
u
i
l
t
-
in
lo
c
a
l v
a
r
ia
b
le
"
v
a
r
"
.


You
m
us
t

pl
ug
co
l
o
r
Li
s
t

in
t
o
t
h
e
b
o
t
t
o
m
o
f
t
h
e

fo
r
e
a
c
h

l
o
o
p
, w
h
e
r
e
i
t
s
a
y
s
"
i
n
l
i
s
t
"
.


Ge
t

co
l
or
L
i
s
t
f
ro
m

th
e

My
B
l
o
c
k
s

My
D
e
f
i
n
t
i
o
n
s

dr
a
w
e
r
.

T
hi
s

s
e
t
s

up
t
he

fo
r

l
o
o
p

s
o

t
h
a
t

e
a
c
h

i
t
e
m

i
n

t
h
e

co
l
o
r
Li
s
t

wi
l
l

g
e
t

b
o
u
n
d

t
o

"
v
a
r
"
,

o
n
e

a
t

a

t
i
m
e
.


3.

Th
e
f
i
r
s
t

c
al
l

i
n
s
i
d
e
t
h
e
fo
r

l
o
op
s
houl
d
be

t
o
s
e
t

t
he

Ca
nv
a
s
1
.
Pai
n
t
C
ol
or

to

"v
a
r".

4.

Co
py

t
he

Ca
nv
a
s
1
.
D
r
a
w
Ci
r
c
l
e

bl
oc
k

t
ha
t

y
ou
w
r
ot
e

i
n
Dr
a
w
C
i
r
c
l
e
B
u
t
t
o
n
.
C
l
i
c
k
.


You
s
houl
d
be

a
bl
e

t
o
se
l
e
c
t

i
t
,

c
o
p
y

i
t
,

t
h
e
n

p
a
st
e

i
t

a
n
d

p
l
u
g

i
t

i
n
t
o

t
h
e

f
o
r
e
a
c
h

l
o
o
p

b
e
l
o
w

t
h
e

se
t

Ca
nv
a
s
1
.
P
a
i
nt
Co
l
o
r

ca
l
l

t
o

lo
o
k
lik
e
t
h
is
.

5.

Tes
t

o
n

yo
u
r

p
h
o
n
e
t
o

s
ee
i
f

t
h
e
Dr
a
w
C
i
r
c
le
s

but
t
on
w
or
k
s
.





Loops


Tell the computer to
do something many times


For Example: draw 100 circles


The code INSIDE the loop is repeated


For Example: the code to draw 1 circle


There
must be a condition for the loop to
end


For Example: when 100 circles have been
drawn


Or when the user clicks the screen




Real
-
Life Loops


Can you think of some real
-
life
loops that you do?


Washing the Dishes


Definite Loop


Using an umbrella


Indefinite Loop



Foreach

dirty
dish:

Put in soapy
water

Scrub

Rinse


While

still raining:


use umbrella




Definite Loops


You know when the loop is going to end
because there is a definite number of things to
do


Examples:


f
or (100 times) draw circle


foreach

[dirty dish] wash it


foreach

(class period): go to
class


foreach

(shopping list item): get
it



Foreach

(member of a list): do something





Check
-
In: Q&A


Now let’s take a moment to answer
the tutorial questions in your group if
you haven’t already


Who can volunteer their answer for
the first question?






What
is User
-
Centered



Design
?

Designing things with the
user

in mind.


You

are
not

the user.




Think
-
Pair
-
Share
:


How
to design with the user in mind?


Which remote looks easier to use?






Source
: Debra
Lauterbach



Keep it simple!





What
happens when you
do not



design
with the user in mind?


Crash dummies used to only be made in the shape of adult
men


women and children were killed in car
accidents


Although this video is meant to be funny, it illustrates the
fact that users will not always understand what you
intended when you made your design






Source: http://
www.autoexpress.co.uk
/news/
autoexpressnews
/210049/
crash_test_dummies.html






What
is User Interface?


User
Interface:
link
between
the person
and the technology


Includes buttons, screen, keyboard, mouse,
etc
, and the software on the screen






User Interface: Buttons


User Interface Design: designing
technology that makes sense to user


“intuitive” design



User Interface: Touch
Screen, Software,
Buttons




Prototyping
Lifecycle

Have users
test the
prototype and
ask them
questions
about their
experience
with it.
Incorporate
feedback.

Who is
your user?
What do
they
expect?
What do
they want?


What does it need to do?
What is
the goal?


Prototyping. Create
samples.


Source: Debra
Lauterbach





Usability
Testing




Think
-
Pair
-
Share
:


Usability
Testing


Write down any notes after watching
the two Usability Testing videos



Share your thoughts with the person
next to you



Think
-
Pair
-
Share




Activity
: Usability testing of


competitor
apps (15 minutes)


Investigate apps (aim for 5) that are similar in function
to yours or that have the same target customer


Search on App Store for iPhone and Google Play for
Android


What does it do well?


What could it do better?


Make notes about the features/interface


Color scheme, size/layout of buttons, readability,
etc.






Record your ideas in pages 12 of
the
workbook

Fill in the chart on page 13 of the
workbook,
too




So
you have competition




So
what?


You can
make a better product!


Plastic bags can cover you from the
rain…but
aren’t
you glad people invented
raincoats?





Activity
: Create
a paper


prototype
(30
mins
.)





Complete this




activity using
phone template in pages 14
-

17 of the
workbook
,

or
index
cards




Task
List


Finish your paper
prototype and
bring it to class next week


Also, did you collect 20 survey
results?


You can continue to gather survey
responses to make sure you
understand the market for your
app
!