Designing Elegant UX Across Devices and Platforms
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Designing Elegant UX Across Devices and Platforms

on

  • 1,474 views

How do you create cross-plat

How do you create cross-plat

Statistics

Views

Total Views
1,474
Views on SlideShare
1,392
Embed Views
82

Actions

Likes
3
Downloads
27
Comments
0

2 Embeds 82

https://twitter.com 81
https://web.tweetdeck.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing Elegant UX Across Devices and Platforms Presentation Transcript

  • 1. UniversalMind™UniversalMind™Future Insights LIVEDesigning Elegant UX Across Devices and PlatformsUniversalMind™Monday, May 6, 13
  • 2. UniversalMind™:)-Erik LoehfelmEVP of User Experience, Universal Mind@eloehfelmerik.loehfelm@universalmind.comMonday, May 6, 13
  • 3. UniversalMind™YourContentMonday, May 6, 13
  • 4. UniversalMind™YourContentMonday, May 6, 13
  • 5. UniversalMind™Monday, May 6, 13
  • 6. UniversalMind™AGENDAPart 1:• User-centered design• Get creative!• Who is your user?• Tools: notebooks, sketches, illustrationsPart 2:• Journey Mapping• Contextual scenarios - day in a life stories of user’sinteracting with design object• Tools: notebooks, sketches, illustrationsPart 3:• Wireframes - sketches and underlying architecturalsolution to the design, including the state structureof the application• Tools: notebooks, markers, sketches, Paper by 53Monday, May 6, 13
  • 7. UniversalMind™AGENDA (CONTINUED)Part 4:• Deployment decisions - native, hybrid, mobile web• Content / Context design - the organization of contentcontextually for the user’s situation• Tools: notebooks, sketches, illustrationsPart 5:• Thematic design - graphic and ui design, patterns,metaphors, color, applied branding, iconography,typography• Moodboards• Tools: sketches, Illustrator, Photoshop, Fireworks,fluidUI, FlashPart 6:• Prototyping and testing: iterative, user based, testingof concepts and ideas with capture and adjustment• Tools: sketches, Illustrator, Photoshop, Fireworks,fluidUI, Flash, FieldTest, TAP by UnitID, SilverbackMonday, May 6, 13
  • 8. UniversalMind™d.bootcampbootleghttp://dschool.stanford.edu/use-our-methods/Monday, May 6, 13
  • 9. UniversalMind™UniversalMind™1. understand people, content and contextMonday, May 6, 13
  • 10. UniversalMind™UniversalMind™2. document their journeyMonday, May 6, 13
  • 11. UniversalMind™UniversalMind™3. wireframesMonday, May 6, 13
  • 12. UniversalMind™UniversalMind™4. graphic and interaction designMonday, May 6, 13
  • 13. UniversalMind™UniversalMind™5. prototypesMonday, May 6, 13
  • 14. UniversalMind™UniversalMind™6. test and iterate!Monday, May 6, 13
  • 15. UniversalMind™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 partnerMonday, May 6, 13
  • 16. UniversalMind™UniversalMind™1. understand people, content and contextMonday, May 6, 13
  • 17. UniversalMind™UniversalMind™empathy.Monday, May 6, 13
  • 18. UniversalMind™UniversalMind™2. document their journeyMonday, May 6, 13
  • 19. UniversalMind™Monday, May 6, 13
  • 20. UniversalMind™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 switchMonday, May 6, 13
  • 21. UniversalMind™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 minsMonday, May 6, 13
  • 22. UniversalMind™UniversalMind™empathy.Monday, May 6, 13
  • 23. UniversalMind™UniversalMind™3. wireframesMonday, May 6, 13
  • 24. UniversalMind™design patterns.UniversalMind™12345Monday, May 6, 13
  • 25. UniversalMind™UniversalMind™Doug ChiangMonday, May 6, 13
  • 26. UniversalMind™Monday, May 6, 13
  • 27. UniversalMind™Monday, May 6, 13
  • 28. UniversalMind™Monday, May 6, 13
  • 29. UniversalMind™http://www.youtube.com/watch?feature=player_embedded&v=TuQbzTwYHTAMonday, May 6, 13
  • 30. UniversalMind™UniversalMind™Monday, May 6, 13
  • 31. UniversalMind™Monday, May 6, 13
  • 32. UniversalMind™Monday, May 6, 13
  • 33. UniversalMind™Monday, May 6, 13
  • 34. UniversalMind™Monday, May 6, 13
  • 35. UniversalMind™Monday, May 6, 13
  • 36. UniversalMind™Monday, May 6, 13
  • 37. UniversalMind™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 webMonday, May 6, 13
  • 38. UniversalMind™Monday, May 6, 13
  • 39. UniversalMind™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
  • 40. UniversalMind™UniversalMind™delivery options:• Mobile Web vs. Desktop Web• Responsive Web vs. Mobile Web• Web App vs. Native App• Wrapped Web vs. Native AppMonday, May 6, 13
  • 41. UniversalMind™rich functionalitybasic functionalitycheapexpensiveMobile WebDesktop Webinflexible flexibleResponsive WebWeb AppNative AppWrapped WebMonday, May 6, 13
  • 42. UniversalMind™UniversalMind™mobile web how?web to mobile techniques to consider:1. Graceful Degredation...2. Progressive Enhancement...1. Adaptive Design2. Responsive DesignMonday, May 6, 13
  • 43. UniversalMind™UniversalMind™1. graceful degredation• been around for awhile• could work for some instances• many sacrifices (from a CX perspective)• ‘backward’ approach (?)Monday, May 6, 13
  • 44. UniversalMind™UniversalMind™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
  • 45. UniversalMind™http://www.teehanlax.com/blog/Monday, May 6, 13
  • 46. UniversalMind™Monday, May 6, 13
  • 47. UniversalMind™mobile≠desktopMonday, May 6, 13
  • 48. UniversalMind™UniversalMind™patterns and content.Monday, May 6, 13
  • 49. UniversalMind™Mostly FluidColumn DropImages courtesy www.lukew.comMonday, May 6, 13
  • 50. UniversalMind™Monday, May 6, 13
  • 51. UniversalMind™CarouselSub sectionsNavigationCarousel NavShoppingSocialFooterCarouselSub sectionsNavigationCarousel NavShoppingSocialFooterCarouselSub sectionsNavigationCarousel NavOne ProductSocialFooterShoppingMonday, May 6, 13
  • 52. UniversalMind™VSMonday, May 6, 13
  • 53. UniversalMind™Monday, May 6, 13
  • 54. UniversalMind™Desktop - “Bird’s Eye View” of Adobe contentProducts Creative Cloud Photoshop CS6Navigation/Promotional Image supporting content ContentMonday, May 6, 13
  • 55. UniversalMind™Products Creative Cloud Photoshop CS6Navigation/Promotional Image supporting content ContentMonday, May 6, 13
  • 56. UniversalMind™ProductsPhotoshop CS6Navigation/Promotional Image supporting content ContentMonday, May 6, 13
  • 57. UniversalMind™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 minutesMonday, May 6, 13
  • 58. UniversalMind™UniversalMind™GUI design isn’t pixie dust.1Monday, May 6, 13
  • 59. UniversalMind™M O O D B O A R DMonday, May 6, 13
  • 60. UniversalMind™Monday, May 6, 13
  • 61. UniversalMind™MOODBOARD HOOKDESIGNMonday, May 6, 13
  • 62. UniversalMind™GothamABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890,.!?’”HelveticaABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzI S A A C D A N I E L S /MOODBOARDMonday, May 6, 13
  • 63. UniversalMind™Be Moody!Collect ideas and paste them to a Moodboard• Collect fonts• Capture images• Grab colors• Pinterest board? :)• 30-40 minutesMonday, May 6, 13
  • 64. UniversalMind™01 01020304050102030203040501 02 031/4The first element of the UI is the overall state.This is the launch page the viewer sees whenfirst opening the application. It contains a listof the most recent transactions from theirbank accounts.The second element of the UI is the hamburgerbutton, this allows button slides the recentactivity to the right to reveal an off canvasstate. From that state the user updates theirsettings 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 involvedin the transaction.This leads me to the forth element of the UI whichis the carrot. When the user taps the carrotthey are brought to a new page where they cansee specific details about the transactionthey selected.The fifth element of the UI is the tab controller.This bar is fixed at the bottom of the state toallow the user to navigate quickly between themajor functions of the application.This function of the application is where the usermanages their bills. When the second optionis selected from the tab controller, the user isbrought here. From here they can see a listof their upcoming bills. The first element isgeneral information about upcoming bills. Itgives the name of the bill due and the statusof the bill. Although not displayed correctly inthis wireframe, the place of the item in the listwould update depending on when the bill isdue. I.E. The bills that are due soonest will be atthe top of the list.The second item of the UI is an updatingcountdown until the bill is due. This allowsthe user to easily see how much time until thepayment of a bill is due.The thrid element is a carrot. This carrot bringsthe user to a new state where then can theneither pay the bill, see information on the userssynced with that account, and see a detailedpage about the bill.HIGH-FIDELITYWIRE FRAMESStates Explanations GothamABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890,.!?’”HelveticaABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzI S A A C D A N I E L S /MOODBOARDA P P L I C AT I O NR E N D E R I N G SISAAC DANIELSINTERACTIVE MEDIAERIK LOEHFELMWEDNESDAY, APRIL 3RD, 2013+ =Monday, May 6, 13
  • 65. UniversalMind™fluidui.comEXCELLENT on-device wireframe and prototyping tool!Monday, May 6, 13
  • 66. UniversalMind™Monday, May 6, 13
  • 67. UniversalMind™Test your ideas!Create a project in FluidUI• Start a wireframe experiment in FluidUI• Add interactive links• Add images and hotspots• 45 minutesMonday, May 6, 13
  • 68. UniversalMind™UniversalMind™6. test and iterate!Monday, May 6, 13
  • 69. UniversalMind™Go Ape Sh!t.Create a user test in Silverback• Try loading up the FluidUI prototype in Silverback• Record someone using your application• 15 minutesMonday, May 6, 13
  • 70. UniversalMind™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 minsMonday, May 6, 13
  • 71. UniversalMind™UniversalMind™take aways...Monday, May 6, 13
  • 72. UniversalMind™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
  • 73. UniversalMind™d.bootcampbootleghttp://dschool.stanford.edu/use-our-methods/Monday, May 6, 13
  • 74. UniversalMind™Monday, May 6, 13
  • 75. UniversalMind™:)-Erik LoehfelmEVP of User Experience, Universal Mind@eloehfelmerik.loehfelm@universalmind.comMonday, May 6, 13