5linxbusinessopppresentation 13017946988405-phpapp02-110829222216-phpapp02
Futureofweb2012post 121106133535-phpapp02
-
Upload
fair-play-ad -
Category
Technology
-
view
157 -
download
0
description
Transcript of Futureofweb2012post 121106133535-phpapp02
![Page 1: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/1.jpg)
Uni
vers
al M
ind™
Future of Mobile LondonDesigning Elegant UX Across Devices and Platforms
Uni
vers
al M
ind™
![Page 2: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/2.jpg)
Uni
vers
al M
ind™
:)-Erik Loehfelm
EVP of User Experience, Universal Mind
![Page 3: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/3.jpg)
Uni
vers
al M
ind™
what is our challenge?
Uni
vers
al M
ind™
![Page 4: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/4.jpg)
Uni
vers
al M
ind™
![Page 5: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/5.jpg)
Uni
vers
al M
ind™
YourContent
![Page 6: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/6.jpg)
Uni
vers
al M
ind™
YourContent
![Page 7: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/7.jpg)
Uni
vers
al M
ind™
![Page 8: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/8.jpg)
Uni
vers
al M
ind™
why?Consumers expect content on their terms.In their ‘contexts’!
Uni
vers
al M
ind™
![Page 9: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/9.jpg)
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.
![Page 10: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/10.jpg)
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...
![Page 11: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/11.jpg)
Uni
vers
al M
ind™
focus on people.
Uni
vers
al M
ind™
![Page 12: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/12.jpg)
Uni
vers
al M
ind™
focus on context.
Uni
vers
al M
ind™
![Page 13: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/13.jpg)
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. ???
![Page 14: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/14.jpg)
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 (?)
![Page 15: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/15.jpg)
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*
![Page 16: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/16.jpg)
Uni
vers
al M
ind™
http://www.teehanlax.com/blog/
![Page 17: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/17.jpg)
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
![Page 18: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/18.jpg)
Uni
vers
al M
ind™
![Page 19: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/19.jpg)
Uni
vers
al M
ind™
Aaron Gustafson: http://www.alistapart.com/articles/understandingprogressiveenhancement/
![Page 20: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/20.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
content is KEY!contextually relevant content is KEY-ER!!
![Page 21: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/21.jpg)
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
![Page 22: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/22.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
sidebar... SoLoMo!The integration of social networks with inherent mobile location features
![Page 23: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/23.jpg)
Uni
vers
al M
ind™
So
Lo Mo
![Page 24: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/24.jpg)
Uni
vers
al M
ind™
3. (Mystery Approach)drumroll please...
![Page 25: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/25.jpg)
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!
![Page 26: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/26.jpg)
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
![Page 27: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/27.jpg)
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
![Page 28: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/28.jpg)
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
![Page 29: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/29.jpg)
Uni
vers
al M
ind™
a true story.A global, Mobile First approach in action!
![Page 30: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/30.jpg)
Uni
vers
al M
ind™
![Page 31: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/31.jpg)
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...
![Page 32: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/32.jpg)
Uni
vers
al M
ind™
where do I start?
Uni
vers
al M
ind™
![Page 33: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/33.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
1. understand people and context
![Page 34: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/34.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
2. document their journey
![Page 35: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/35.jpg)
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.”
![Page 36: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/36.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
3. wireframes
![Page 37: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/37.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
wireframe techniques
![Page 38: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/38.jpg)
Uni
vers
al M
ind™
![Page 39: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/39.jpg)
Uni
vers
al M
ind™
![Page 40: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/40.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
Doug Chiangmarker techniques
![Page 41: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/41.jpg)
Uni
vers
al M
ind™
![Page 42: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/42.jpg)
Uni
vers
al M
ind™
![Page 43: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/43.jpg)
Uni
vers
al M
ind™
![Page 44: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/44.jpg)
Uni
vers
al M
ind™
![Page 45: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/45.jpg)
Uni
vers
al M
ind™
![Page 46: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/46.jpg)
Uni
vers
al M
ind™
![Page 47: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/47.jpg)
Uni
vers
al M
ind™
![Page 48: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/48.jpg)
Uni
vers
al M
ind™
![Page 49: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/49.jpg)
Uni
vers
al M
ind™
![Page 50: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/50.jpg)
Uni
vers
al M
ind™
![Page 51: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/51.jpg)
Uni
vers
al M
ind™
![Page 52: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/52.jpg)
Uni
vers
al M
ind™
![Page 53: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/53.jpg)
Uni
vers
al M
ind™
![Page 54: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/54.jpg)
Uni
vers
al M
ind™
![Page 55: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/55.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
4. graphic and interaction design
![Page 56: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/56.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
5. prototypes
![Page 57: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/57.jpg)
Uni
vers
al M
ind™
fluidui.comEXCELLENT on-device wireframe and prototyping tool!
![Page 58: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/58.jpg)
Uni
vers
al M
ind™
![Page 59: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/59.jpg)
Uni
vers
al M
ind™
screen shots of fluid
![Page 60: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/60.jpg)
Uni
vers
al M
ind™
![Page 61: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/61.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
6. test and iterate!
![Page 62: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/62.jpg)
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)
![Page 63: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/63.jpg)
Uni
vers
al M
ind™
Uni
vers
al M
ind™
workshop!• Designing Elegant UX Across Devices and Platforms• 9-5 Wednesday
![Page 64: Futureofweb2012post 121106133535-phpapp02](https://reader033.fdocuments.in/reader033/viewer/2022060119/558c8d7fd8b42a46678b4718/html5/thumbnails/64.jpg)
Uni
vers
al M
ind™
:)-Erik Loehfelm
EVP of User Experience, Universal Mind@eloehfelm