future of mobile london 2012
DESCRIPTION
Presentation from the Future of Web Apps / Future of Mobile 2012 in London http://future-of-mobile.com/london-2012/TRANSCRIPT
Uni
vers
al M
ind™
Future of Mobile LondonDesigning Elegant UX Across Devices and Platforms
Uni
vers
al M
ind™
Uni
vers
al M
ind™
:)-Erik Loehfelm
EVP of User Experience, Universal Mind
Uni
vers
al M
ind™
what is our challenge?
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
YourContent
Uni
vers
al M
ind™
YourContent
Uni
vers
al M
ind™
Uni
vers
al M
ind™
why?Consumers expect content on their terms.In their ‘contexts’!
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
the not-so-obvious issue...This is an EXPERIENCE DESIGN problem, more than a technology challenge.
Uni
vers
al M
ind™
Uni
vers
al M
ind™
how do we solve this?For elegant experience across devices,focus on 2 critical points...
Uni
vers
al M
ind™
focus on people.
Uni
vers
al M
ind™
Uni
vers
al M
ind™
focus on context.
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
how?web techniques to consider:1. Graceful Degredation...2. Progressive Enhancement...
1. Adaptive Design2. Responsive Design
3. ???
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 (?)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
2. progressive enhancement• build up an experience from the baseline• work in an adaptive / responsive manner• target sizes not devices*
Uni
vers
al M
ind™
http://www.teehanlax.com/blog/
Uni
vers
al M
ind™
“Honestly, our team is kind of bored of talking about responsive design. It should no longer be considered a special feature, it’s how any self-respecting website should behave in 2012.”
- Bobby Solomon, TheFoxIsBlack.com and Disney
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Aaron Gustafson: http://www.alistapart.com/articles/understandingprogressiveenhancement/
Uni
vers
al M
ind™
Uni
vers
al M
ind™
content is KEY!contextually relevant content is KEY-ER!!
Uni
vers
al M
ind™
...which points back to people.Understand user’s needs and you’ll understand what they need in their physical context
Uni
vers
al M
ind™
Uni
vers
al M
ind™
sidebar... SoLoMo!The integration of social networks with inherent mobile location features
Uni
vers
al M
ind™
So
Lo Mo
Uni
vers
al M
ind™
3. (Mystery Approach)drumroll please...
Uni
vers
al M
ind™
3. Mobile First... v.2012• Understand your user +• Content focus +• Contextual relevancy +• Progressive enhancement +• Responsive design
as first described by Luke W from back in 2009!
Uni
vers
al M
ind™
Uni
vers
al M
ind™
things to consider with a Mobile First strategy:• research is your friend• analytics are your friend• hardware specific features, might not be your friend• many delivery options
Uni
vers
al M
ind™
Uni
vers
al M
ind™
considerations:• Mobile Web vs. Desktop Web• Responsive Web vs. Mobile Web• Web App vs. Native App• Wrapped Web vs. Native App
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
Uni
vers
al M
ind™
a true story.A global, Mobile First approach in action!
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
• HTML 5• LESS (css)• Backbone (MVC framework)• Twitter Bootstrap• JQuery• iOS Native - Custom UIWebView
technologies...
Uni
vers
al M
ind™
where do I start?
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
1. understand people and context
Uni
vers
al M
ind™
Uni
vers
al M
ind™
2. document their journey
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.”
Uni
vers
al M
ind™
Uni
vers
al M
ind™
3. wireframes
Uni
vers
al M
ind™
Uni
vers
al M
ind™
wireframe techniques
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Doug Chiangmarker techniques
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
4. graphic and interaction design
Uni
vers
al M
ind™
Uni
vers
al M
ind™
5. prototypes
Uni
vers
al M
ind™
fluidui.comEXCELLENT on-device wireframe and prototyping tool!
Uni
vers
al M
ind™
Uni
vers
al M
ind™
screen shots of fluid
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Uni
vers
al M
ind™
6. test and iterate!
Uni
vers
al M
ind™
Uni
vers
al M
ind™
take aways:• Design challenge big... tech challenge not as big• Focus on users• Focus on context• Mobile First• Explore many options in wireframes• Test, test, test!• Consider native, wrapper, or HTML (or combo)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
workshop!• Designing Elegant UX Across Devices and Platforms• 9-5 Wednesday
Uni
vers
al M
ind™
:)-Erik Loehfelm
EVP of User Experience, Universal Mind@eloehfelm