Ok, you have been asked to go off and research how to design/architect a mobile user experience. After the initial excitement and learning all about mobile UX, you decide to jump head-on and start designing.
Then comes the realization, how are you going to test the designs in context of a mobile device? Do you have to package everything in an app or is there a way to test preliminary designs? What tools are available? Which works for what Mobile OS? When to use a particular tool? Can, we, designers use it without developer help?
In this presentation I have various testing app/methods/tools/services available specifically for Mobile, for which OS, when to best use them during design process, cost associated with some of the tools, and what are pros & cons of each of them.
21. Detail
Design
Blueprint
Blueprint
is
a
mockup
app
for
iPhone
and
iPad
applicaHons.
ì Highlights
ì Pixel
perfect
alignment
ì Import
images
ì ProperHes
for
each
UI
element
ì AcHons
for
each
UI
element
ì Supports
tap
(leM,
right,
up,
down)
ì Support
Swipe
(leM,
right,
up,
down)
ì Highlevel
story
board
ì Dropbox
integraHon
ì Also
Export
to
PDF/PNG
@vijju2k
26. Detail
Design
App
Cooker
App
Cooker
allows
users
to
Design,
Mockup
and
Prototype
mobile
applicaHons
directly
on
your
iPad
ì Highlights
ì Full
blown
graphics
editor
ì Support
upto
200
screens
ì Support
upto
99
icons
ì Supports
export/import
directly
to
Dropbox
ì Supports
both
orientaHons
ì Icon
editor
ì Pricing
esHmates
ì In
future
Appcoker
is
looking
into
ways
where
your
mockup
created
in
Appcooker
can
be
exported
to
xcode
–
COOL
–
if
it
works.
Similar
to
FlashCatalyst
concept
–
bridging
gap
between
designer
and
developer.
@vijju2k
31. Detail
Design
Adobe
Shadow
Adobe
Shadow
is
an
inspecHon
and
preview
tools
that
allows
designers
to
work
faster
and
more
efficiently
by
streamlining
the
preview
process,
making
it
easier
to
customize
websites
for
mobile
devices
ì Highlights
ì MulHple
iOS
and/or
Android
devices
at
once
ì Responsive
web
design
tesHng
ì Support
OrientaHon
ì Support
scrolling
and
zooming
ì Support
private
user
interacHon
with
the
content
(doesnot
affect
other
parts)
ì Works
with
only
Chrome
ì Make
sure
you
are
on
the
Same
network
and
NOT
using
a
VPN
@vijju2k
32. Visual
Design
Live
View
@vijju2k
hJp://www.zambe`.com/projects/liveview/
33. Visual
Design
Live
View
LiveView
is
a
specialized
remote
screen
viewing
applicaHon
intended
as
a
tool
to
help
designers
create
graphics
for
mobile
applicaHons,
it
has
also
proven
to
be
useful
for
creaHng
quick
and
dirty
simulaHons,
demos,
and
experience
prototypes.
ì Highlights
ì InteracHve
mode
–
enables
touch
to
control
the
mouse
on
the
screen
ì 1
device
at
a
Hme
when
different
form
factor
ì MulHple
iPhones
or
iPads
can
be
connected
at
the
same
Hme
ì AnimaHons
are
slow
ì Different
opHons
like
loosless/high
quality/medium
quality/low
quality
ì Ability
to
rotate
the
viewer
window
on
Mac
ì Support
for
reHna
ì Used
successfully
to
do
demo
of
a
clickable
prototype
using
keynote
and
clickable
PDF
–
easy
light
weight
@vijju2k
35. Visual
Design
Bjango
Skala
Skala
Preview
is
the
fastest
way
to
send
pixel
perfect,
color
perfect
design
previews
from
Mac
to
iPhone
or
iPad
ì Highlights
ì Connect
mulHple
iOS
devices
at
once
ì Very
responsive
–
images
changes
in
realHme
as
the
source
file
is
changed
in
Photoshop
ì Also
has
different
modes
to
sent
images
(live
preview,
or
via
clipboard)
ì Color
blindness
test
ì Support
for
Scrolling
and
zooming
on
the
device
ì OrientaHon
support
–
portrait
and
landscape
ì Email/Tweet/Save
to
device
ì You
can
even
open
up
a
previously
saved
photo
and
view
it
@vijju2k
55. Support
Matrix
App/Services
iOS
Android
WinMo
Paper
prototyping
(Stencils/Sketchpad/SHckies/etc)
X
X
X
Blueprint
X
Appcooker
X
Adobe
Device
Central
(pre
CS6)
X
X
X
Adobe
Shadow
(web
based
app)
X
X
LiveView
X
Bjango
Skala
X
got
5
min?
X
X
X
TestFlight
X
NaHve
Android
X
Mods
(Mr.Tappy/Mod
1000/etc)
X
X
X
Tobii
Eye
wear
X
X
X
Looxcie
Cam
X
X
X
UsertesHng.com
X
X
apphance
X
X
X
proto.io
X
X
Responsinator
(web
based
app)
@vijju2k
X
X
