Skip to content
July 1, 2011 / Danii Oliver

Prototyping Tools (in brief)

Mobile UX

by: Director of UX at Oglivy and Mather

Benefits of UX

still evoking

 

Interaction Designer – has IA skills but more for creative

Information Architect – more back end and transitional

Usability – Testers (changing how to test)

Content Strategy – Not make new but how to migrate existing content to a new platform(growing field)

 

Last 10% were mobile

Currently 20 -25% growth but not saturated

Next year the plan will be 50%, tools will changes and processes will change

Mobile is the priority

 

Moible web

smaller factor

different info

limited time

limited connectivity

less browsing  (section landing pages needed more)

search is crucial (must be quick)

 

-Mobile is less clutter,

-more direct

-less options

-gesture is important (better to be prototyped on device than paper)

 

Mobile aApp

-more interaction

self contained

– more dynamic

-more platform dependant

-more function and tool specific

– usage of sensors (accelerometer, cameraa, compass, gps)

apps are more direct more focus no browsing just that area ESPN has many many apps for specific areas which reduces the need to browse on the go.

 

WEB DEV

id content functionality strategy requirement

sketch flow interace

wireframe / build specs(hopefullly)

test

design

build

 

MOBILE DEV

id content functionality strategy requirement

sketch flow interace

Prototype

TEST

wireframe / build specs(hopefullly)

test

design

build

 

WHYUX

design can’t stand on it’s own

app sites need to be functional

people return to good experiences (the balance between design and function is the sweet spot to to creating a great experience)

think idea through using wireframes, prototypes with design has the most success

IA(Must think about input, calculation, error messages )

 

TOOLS

Axure (makes an HTML prototype can use phone gap to wrap into an app) (own program $500 drag and drop functionality)(Sketchiness makes it look rough and less like the “DESIGN” the cleanness may confuse the client) can customize spec notes then it builds an spec document for you will all sketches and notes as a standard technical doc with table of contents.

can add interactions as widget property : Case editor

It also generates an html interaction prototype so clients can read docs but see interaction immediately.

PROTOTYPE IS TO SELL CONCEPT DONT GET STUCK DEBUGGING IT

Cuts down presentation time b/c there is less to imagine.

Accounts Jobs to talk to clients about specs of what should and shouldn’t be done.

Can publish and share to share.axure.com so anyone can view not need to print out reports.

 

 

 

Keynote -Iwork.com to share, publish and store keynote documents

Notes can be added (great for the routing process)

 

Visio (PC) (to diagram flow charts)/

Omigraffle (MAC) (comes with stencils)

Illustrator / InDesign

 

Wireframe

illustration and notes on side

 

WHY PROTOTYPE

To get the feel

not sitting at your desk at computer

we are outside walking driving (users are not sitting down don’t test as if they are LOL get up shake tilt, move, multitask)

 

HOW TO

header, content, footer

Nav, modules

media, place holder content

MuSt document your wireframes

 

HYBRID APPS

HTML/CSS /Javascript based code

Complied to run on different platforms (Andriod iphone blackberry (this is empowering b/c you can sell it not just save a link on the home page of the device))

Access to Sensors ()

 

PHONE GAP

Allows you to access all sensors by 6 platforms (limitations are specified in Phone gap chart)

 

xCode

icon

launch image

drag azure code into xcode www folder

 

DreamWeaver

site/mobile applications/build and emulate

easy install for android sdk

can put on site for user download

makes more of a native app feel

 

get jQuery mobile script

 

can solve 80% of app needs.

Not really for games but content it is great for.

 

Game Salad

 

Flash Catalyst more for widget/ in app app like color picker areas the HTML is not enough

 

New York times is a good desktop to tablet interface more gesture interface changes less design and flow

 

HYPE $29 on mac app store

more like Flash 1.0

drag and drop time line animation

export code

or to dropbox

 

 

 

 

 

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: