designing elegant ux across devices and platforms
DESCRIPTION
How do you create cross-platTRANSCRIPT
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
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™
design patterns.
Uni
vers
al M
ind™
1
2
3
4
5
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™
Uni
vers
al M
ind™
GUI design isn’t pixie dust.
1
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
Monday, May 6, 13