designing elegant ux across devices and platforms

Post on 08-May-2015

1.144 Views

Category:

Design

3 Downloads

Preview:

Click to see full reader

DESCRIPTION

How do you create cross-plat

TRANSCRIPT

Uni

vers

al M

ind™

Uni

vers

al M

ind™

Future Insights LIVEDesigning Elegant UX Across Devices and Platforms

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

:)-Erik Loehfelm

EVP of User Experience, Universal Mind@eloehfelm

erik.loehfelm@universalmind.com

Monday, May 6, 13

Uni

vers

al M

ind™

YourContent

Monday, May 6, 13

Uni

vers

al M

ind™

YourContent

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

AGENDA

Part 1:• User-centered design• Get creative!• Who is your user?• Tools: notebooks, sketches, illustrations

Part 2:• Journey Mapping• Contextual scenarios - day in a life stories of user’s

interacting with design object• Tools: notebooks, sketches, illustrations

Part 3:• Wireframes - sketches and underlying architectural

solution to the design, including the state structure of the application

• Tools: notebooks, markers, sketches, Paper by 53

Monday, May 6, 13

Uni

vers

al M

ind™

AGENDA (CONTINUED)

Part 4:• Deployment decisions - native, hybrid, mobile web• Content / Context design - the organization of content

contextually for the user’s situation• Tools: notebooks, sketches, illustrations

Part 5:• Thematic design - graphic and ui design, patterns,

metaphors, color, applied branding, iconography, typography

• Moodboards• Tools: sketches, Illustrator, Photoshop, Fireworks,

fluidUI, Flash

Part 6:• Prototyping and testing: iterative, user based, testing

of concepts and ideas with capture and adjustment• Tools: sketches, Illustrator, Photoshop, Fireworks,

fluidUI, Flash, FieldTest, TAP by UnitID, Silverback

Monday, May 6, 13

Uni

vers

al M

ind™

d.

bootcamp bootleg

http://dschool.stanford.edu/use-our-methods/

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

1. understand people, content and context

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

2. document their journey

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

3. wireframes

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

4. graphic and interaction design

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

5. prototypes

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

6. test and iterate!

Monday, May 6, 13

Uni

vers

al M

ind™

Get Creative!The Gamemaker...• Create a game with whatever is within your reach• Game must have rules• Game must have a winner and loser(s)• It can be a game of skill or chance• 12 minutes - solo or with a partner

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

1. understand people, content and context

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

empathy.

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

2. document their journey

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Mini-MaperCreate an ad-hoc journey map• With a partner, gather the experience getting here• Document their experience• Focus on ‘seeing’ them • Listen to their ‘thoughts’ as they move through the details• Capture emotion, be very detailed• 10 mins each and switch

Monday, May 6, 13

Uni

vers

al M

ind™

What...?• What did you learn from the last exercise?• What common pitfalls?• What common wins?• What opportunities do you see?• Highlight them now and discuss with your partner• 10 mins

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

empathy.

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

3. wireframes

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

Doug Chiang

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

http://www.youtube.com/watch?feature=player_embedded&v=TuQbzTwYHTA

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Ready, Wireframe!A new travel app• Grab a concept from your journey map• Speak visually to author your idea• Try to leverage design patterns... identify them!• Don’t worry about naming, branding, colors• Try to split your concept: mobile and mobile web• 20 minutes mobile, 20 minutes mobile web

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Category, OUT!Think of something in the category, or you’re out!• I’ll start with a category ie. animals, cars, cereal, baseball teams• When pointed to, yell out something in the category• If you can’t think of one immediately, you’re out• :)

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

delivery options:• Mobile Web vs. Desktop Web• Responsive Web vs. Mobile Web• Web App vs. Native App• Wrapped Web vs. Native App

Monday, May 6, 13

Uni

vers

al M

ind™

rich functionality

basic functionality

chea

pexpensive

Mobile Web

Desktop Web

inflexible flexible

Responsive Web

Web App

Native App

Wrapped Web

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

mobile web how?web to mobile techniques to consider:1. Graceful Degredation...2. Progressive Enhancement...

1. Adaptive Design2. Responsive Design

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

1. graceful degredation• been around for awhile• could work for some instances• many sacrifices (from a CX perspective)• ‘backward’ approach (?)

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

2. progressive enhancement• build up an experience from the baseline• work in an responsive manner• target sizes (and content) not devices*

Monday, May 6, 13

Uni

vers

al M

ind™

http://www.teehanlax.com/blog/

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

mobile≠desktop

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

patterns and content.

Monday, May 6, 13

Uni

vers

al M

ind™

Mostly Fluid

Column Drop

Images courtesy www.lukew.com

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Carousel

Sub sections

Navigation

Carousel Nav

Shopping

Social

Footer

Carousel

Sub sections

Navigation

Carousel Nav

Shopping

Social

Footer

Carousel

Sub sections

Navigation

Carousel Nav

One Product

Social

Footer

Shopping

Monday, May 6, 13

Uni

vers

al M

ind™

VS

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™ Desktop - “Bird’s Eye View” of Adobe content

Products Creative Cloud Photoshop CS6

Navigation/Promotional Image supporting content Content

Monday, May 6, 13

Uni

vers

al M

ind™

Products Creative Cloud Photoshop CS6

Navigation/Promotional Image supporting content Content

Monday, May 6, 13

Uni

vers

al M

ind™

Products Photoshop CS6

Navigation/Promotional Image supporting content Content

Monday, May 6, 13

Uni

vers

al M

ind™

Content eval!Unwrap your company (or personal) site’s content• Do a brief content audit of your site• Create a ‘birds-eye-view’ of your current content• With mobile in mind, create a ‘birds-eye-view’ of mobile• Consider the ‘content’s choreography’ as you design• 30-40 minutes

Monday, May 6, 13

Uni

vers

al M

ind™

M O O D B O A R D

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

MOODBOARD HOOKDESIG

N

Monday, May 6, 13

Uni

vers

al M

ind™

GothamABCDEFGHIJKLMN OPQRSTUVWXYZabcdefghijklmnop qrstuvwxyz1234567890,.!?’”

HelveticaABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz�������������"·µ

I S A A C D A N I E L S /MOODBOARD

Monday, May 6, 13

Uni

vers

al M

ind™

Be Moody!Collect ideas and paste them to a Moodboard• Collect fonts• Capture images • Grab colors• Pinterest board? :)• 30-40 minutes

Monday, May 6, 13

Uni

vers

al M

ind™

01 01

02

03

04

05

01

02

03

02

03

04

05

01 02 03

1/4

The !rst element of the UI is the overall state. This is the launch page the viewer sees when !rst opening the application. It contains a list of the most recent transactions from their bank accounts.

The second element of the UI is the hamburger button, this allows button slides the recent activity to the right to reveal an off canvas state. From that state the user updates their settings to their different accounts.

The third element of the UI is the individual labels. The user can see where they made a transaction, the date it happened, and the amount involved in the transaction.

This leads me to the forth element of the UI which is the carrot. When the user taps the carrot they are brought to a new page where they can see speci!c details about the transaction they selected.

The !fth element of the UI is the tab controller. This bar is !xed at the bottom of the state to allow the user to navigate quickly between the major functions of the application.

This function of the application is where the user manages their bills. When the second option is selected from the tab controller, the user is brought here. From here they can see a list of their upcoming bills. The !rst element is general information about upcoming bills. It gives the name of the bill due and the status of the bill. Although not displayed correctly in this wireframe, the place of the item in the list would update depending on when the bill is due. I.E. The bills that are due soonest will be at the top of the list.

The second item of the UI is an updating countdown until the bill is due. This allows the user to easily see how much time until the payment of a bill is due.

The thrid element is a carrot. This carrot brings the user to a new state where then can then either pay the bill, see information on the users synced with that account, and see a detailed page about the bill.

HIGH-FIDELITY WIRE FRAMES

States Explanations GothamABCDEFGHIJKLMN OPQRSTUVWXYZabcdefghijklmnop qrstuvwxyz1234567890,.!?’”

HelveticaABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz�������������"·µ

I S A A C D A N I E L S /MOODBOARD

1/10A P P L I C AT I O NR END E R I N G S

ISAAC DANIELSINTERACTIVE MEDIAERIK LOEHFELMWEDNESDAY, APRIL 3RD, 2013

+ =

Monday, May 6, 13

Uni

vers

al M

ind™

fluidui.comEXCELLENT on-device wireframe and prototyping tool!

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

Test your ideas!Create a project in FluidUI• Start a wireframe experiment in FluidUI• Add interactive links• Add images and hotspots• 45 minutes

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

6. test and iterate!

Monday, May 6, 13

Uni

vers

al M

ind™

Go Ape Sh!t.Create a user test in Silverback• Try loading up the FluidUI prototype in Silverback• Record someone using your application• 15 minutes

Monday, May 6, 13

Uni

vers

al M

ind™

What...?• What did you learn from watching people with your idea?• What common pitfalls did they stumble upon?• What common wins?• What opportunities do you see to improve your concept?• Highlight them now and discuss with your partner• 5 mins

Monday, May 6, 13

Uni

vers

al M

ind™

Uni

vers

al M

ind™

take aways...

Monday, May 6, 13

Uni

vers

al M

ind™

you practiced...• User-Centered design theory!• Being a design thinker!• Communicating visually!• Focusing on human-values!• Process in a design workflow!• ‘Doing’ over ‘contemplating’!• Ad-hoc collaboration!

Monday, May 6, 13

Uni

vers

al M

ind™

d.

bootcamp bootleg

http://dschool.stanford.edu/use-our-methods/

Monday, May 6, 13

Uni

vers

al M

ind™

Monday, May 6, 13

Uni

vers

al M

ind™

:)-Erik Loehfelm

EVP of User Experience, Universal Mind@eloehfelm

erik.loehfelm@universalmind.com

Monday, May 6, 13

top related