Embed Size (px)
DESCRIPTION
Let's face it, not everyone has the luxury of starting their app from scratch and being able to build it for the multiple devices and contexts that it needs to be in, to successfully reach their users. Most companies have found themselves having to step back and look at how they can turn their desktop designed experience into a mobile application. Erik Loehfelm discusses his experiences in turning desktop apps into mobile magic. He will also review the options out there for peeling back the layers of complexity built into desktop-based services, and how to successfully transition those into a mobile experiences.
Citation preview
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Future Insights LIVEGrowing Up a Desktop App in a Mobile World
Monday, May 6, 13
Uni
vers
al M
ind™
:)-Erik Loehfelm
EVP of User Experience, Universal Mind
www.universalmind.com
Monday, May 6, 13
Uni
vers
al M
ind™
Let’s talk about apps...
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™
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
how to catch up?
Monday, May 6, 13
Uni
vers
al M
ind™
people.
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
focus on context.
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
focus on context.
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
focus on content.
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
content is KEY!contextually relevant content is KEY-ER!!
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
...which brings us back to people.Understand user’s needs and you’ll understand what they need in their individual context
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
sidebar... SoLoMo!The integration of social networks with inherent mobile location features
Monday, May 6, 13
Uni
vers
al M
ind™
So
Lo Mo
Monday, May 6, 13
Uni
vers
al M
ind™
where do I start?
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
start with people.
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
watch and learn.
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
quietly observe.
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
macro / micro
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
macro (forest).
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™
bullshit... kinda’!• Agile UX could / should be the goal but...• ‘Don’t fly a plane without wings.’• Opportunity for ‘cornering’ and ‘redo’ is great at this stage• “Any fidelity wireframe is the right fidelity wireframe.”• Communication tool
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
wireframe techniques
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™
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™
Monday, May 6, 13
Uni
vers
al M
ind™
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™
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™
Monday, May 6, 13
Uni
vers
al M
ind™
screen shots of fluid
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™
Uni
vers
al M
ind™
things to consider with this macro perspective:• research is your friend• analytics are your friend• hardware specific features, might not be your friend• many delivery options
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™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
micro (tree).
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
stories about people
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
content for mobilityMUST be contextually relevant!
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™
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• popular based on needs• ‘backward’ approach (?)• work in a responsive manner
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™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Responsive inside-out:patterns, content and art direction.
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Francisco InchausteCreative Director, Universal Mindhttp://www.getfinch.com/@iamfinchSmashing Magazine
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
navigation patterns
Monday, May 6, 13
Uni
vers
al M
ind™
accordion nav
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
sliding nav
Monday, May 6, 13
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
section nav
Monday, May 6, 13
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
off-canvas nav
Monday, May 6, 13
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
content patterns
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™
Monday, May 6, 13
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
content evaluation
Monday, May 6, 13
Uni
vers
al M
ind™
1
2
3
5
4
6
7
8
9
10
11
12
1314
15
2 3 5 64
7 8
9 10
11 12 13
15
14
1
2
Monday, May 6, 13
Uni
vers
al M
ind™
2 3 5 64
7 8
9 10
11 12 13
15
14
1
21
15
2
7-10
11
812
13
Monday, May 6, 13
Uni
vers
al M
ind™
2 3 5 64
7 8
9 10
11 12 13
15
14
1
21
15
2-6
7
14
11
8
12
9
13
10
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™
Uni
vers
al M
ind™
art direction
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™
Uni
vers
al M
ind™
take aways:• Web to mobile content is not one-to-one• Web to mobile art direction is not one-to-one• Define and leverage design patterns
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™
Uni
vers
al M
ind™
Monday, May 6, 13
Uni
vers
al M
ind™
Uni
vers
al M
ind™
take aways:• Design challenge is big... tech challenge not as big• Focus on users• Focus on context• Focus on content• Responsive from the inside out• Test, and iterate!
Monday, May 6, 13
Uni
vers
al M
ind™
:)-Erik Loehfelm
Exec VP of User Experience, Universal Mind
www.universalmind.com
Monday, May 6, 13
Uni
vers
al M
ind™
We just won a Webby!
Monday, May 6, 13
