When Bears Attack!how a clean mobile interface can save your life
User Experience         Mobile Platforms         Designing for Mobile Priorities         Design Challenge!Deloitte Digital...
User Experience
User Experience is the creation andsynchronization of the elements that affect    users’ experience with a particular  comp...
Visual Information Seeking   Overview   Zoom   Filter   Details on Demand                             Visual	  Informa.on	...
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Complexity Heuristics   Prioritize         Reveal   Surface Patterns   Zoom   Account for        Consider Social   Roles  ...
User Knowledge  Knowledge in the World    Interpretation substitutes for learning    High ease of use on first encounter   ...
Mobile Platforms
Form FactorDeloitte Digital Presentation Name
Platforms                                                       12:00                                     AT&T   12:34 PMD...
Platforms                                                                                  12:00                          ...
Deloitte Digital Presentation Name
navigation barDeloitte Digital Presentation Name
main action barDeloitte Digital Presentation Name
main action bar                                               ITW LogoDeloitte Digital Presentation Name
main action bar                                      ITW                                                  action iconsDelo...
main action bar                                      ITWDeloitte Digital Presentation Name
main action bar                                          ITW                                     Workshops                ...
main action bar                                          ITW                                          Workshops           ...
Workshops                  action bar for          When Bears Attach                navigation and actions.          How a...
Bears                                                     Grid lists are an alternative                                   ...
ITW                                    top action bar              TAB ONE            TAB TWO   TAB THREE                 ...
ITWTAB ONE   TAB TWO   TAB THREE                                fixed tab                                display all items ...
ITW                                     ONE         TWO                                                 ONE   THREE       ...
Deloitte Digital Presentation Name
navigation bar                                              TitleDeloitte Digital Presentation Name
navigation bar                                              ITW                                           ITW LogoDeloitte...
ITW                                      tool barDeloitte Digital Presentation Name
ITW                                      Cancel        Suncadia Resort        Workshops        Keynotes                   ...
ITW         Location         Suncadia         Types of Bears         Grizzly         Polar                        Grouped ...
List        Grid   segmented control shows a                  Silly Bear                                            horizo...
List        Grid   segmented control shows a                  Silly Bear                                            horizo...
List        GridDeloitte Digital Presentation Name
Bears                                     Berry Bonds                                     12 years old                    ...
Common Gestures
TapDeloitte Digital Presentation Name
Double TapDeloitte Digital Presentation Name
Press & HoldDeloitte Digital Presentation Name
ExampleDeloitte Digital Presentation Name
Swipe LeftDeloitte Digital Presentation Name
Swipe RightDeloitte Digital Presentation Name
Swipe Right or LeftDeloitte Digital Presentation Name
Pinch                                     scale downDeloitte Digital Presentation Name
Spread                                     scale upDeloitte Digital Presentation Name
ClearDeloitte Digital Presentation Name
Designing for MobilePriorities
“Mobile users’ priorities change,   but their intents don’t.”                               - Emily Wengert               ...
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context Heuristics    Clearly Identify:       The value proposition       The target user       The target contex...
The Challenge
Deloitte Digital Presentation Name
Web   PhoneDeloitte Digital Presentation Name
ValueDeloitte Digital Presentation Name
Rules & Exercise
outdoorsy   long list of content
shortened list   toolkit
Washington Trails Association
Washington Trails Association          Find a Hike                Volunteer            Hiking Guide              Trail Wor...
Washington Trails Association                         Short List                          Hike Finder with Map            ...
Short List  Type the City, State or ZIP code:            Trail Finder   Trail        Back   Photo Gallery                 ...
Value in Context Heuristics    Clearly Identify:       The value proposition       The target user       The target contex...
Make Magic!
Presented byDANI STORLIE &ANDY FITZGERALD
Upcoming SlideShare
Loading in …5
×

When Bears Attack: How a Clean Mobile Interface Could Save Your Life

1,015 views

Published on

A workshop native mobile design given by visual designer Dani Storlie and me at the AIGA Into the Woods conference in September 2012.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,015
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

When Bears Attack: How a Clean Mobile Interface Could Save Your Life

  1. 1. When Bears Attack!how a clean mobile interface can save your life
  2. 2. User Experience Mobile Platforms Designing for Mobile Priorities Design Challenge!Deloitte Digital Presentation Name
  3. 3. User Experience
  4. 4. User Experience is the creation andsynchronization of the elements that affect users’ experience with a particular company, with the intent of influencing their perceptions and behavior. - Russ Unger & Carolyn Chandler A Project Guide to UX Design
  5. 5. Visual Information Seeking Overview Zoom Filter Details on Demand Visual  Informa.on  Seeking  Mantra,   Ben  Schneiderman  (1996)
  6. 6. Visual Information Seeking
  7. 7. Visual Information Seeking
  8. 8. Visual Information Seeking
  9. 9. Visual Information Seeking
  10. 10. Visual Information Seeking
  11. 11. Complexity Heuristics Prioritize Reveal Surface Patterns Zoom Account for Consider Social Roles Implications Visualize Data No UI at All Adapt to Users Adapted  from  Designing  for  Complexity,   Nadine  Schaeffer  @  IAS12
  12. 12. User Knowledge Knowledge in the World Interpretation substitutes for learning High ease of use on first encounter Efficiency slowed by the need of interpretation Knowledge in the Head Requires learning Low ease of use on first encounter High efficiency Adapted  from  The  Design  of  Everyday  Things,   Donald  Norman    (1988)
  13. 13. Mobile Platforms
  14. 14. Form FactorDeloitte Digital Presentation Name
  15. 15. Platforms 12:00 AT&T 12:34 PMDeloitte Digital Presentation Name
  16. 16. Platforms 12:00 AT&T 12:34 PM TAB ONE TAB TWO TAB THREEDeloitte Digital Presentation Name
  17. 17. Deloitte Digital Presentation Name
  18. 18. navigation barDeloitte Digital Presentation Name
  19. 19. main action barDeloitte Digital Presentation Name
  20. 20. main action bar ITW LogoDeloitte Digital Presentation Name
  21. 21. main action bar ITW action iconsDeloitte Digital Presentation Name
  22. 22. main action bar ITWDeloitte Digital Presentation Name
  23. 23. main action bar ITW Workshops Keynotes spinner Schedule Map of SuncadiaDeloitte Digital Presentation Name
  24. 24. main action bar ITW Workshops Workshops Keynotes Schedule Map of SuncadiaDeloitte Digital Presentation Name
  25. 25. Workshops action bar for When Bears Attach navigation and actions. How a clean mobile interface can save your life! Design Hike Mapping the sensory experi- ence. Getting your Hands Dirty Screen printing techniques to add to your design tool kit. Lists present multiple line LoFi with HiFi Results items in a vertical Find out how to do LiFi Illus- trations with HiFi results. arrangement. They can be Perfecting Your Vision used for data selection as Find out how to set goals and watch your career take off. well as drill down navigation. Sculpture in the Raw Nature provides you with everything you need.Deloitte Digital Presentation Name
  26. 26. Bears Grid lists are an alternative to standard list views. They Silly Bear Angry Bear are best suited for showing data sets that represent themselves through images. Big Bear Curious Bear Frustrated Bear Confused BearDeloitte Digital Presentation Name
  27. 27. ITW top action bar TAB ONE TAB TWO TAB THREE tab bar bottom action barDeloitte Digital Presentation Name
  28. 28. ITWTAB ONE TAB TWO TAB THREE fixed tab display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right.
  29. 29. ITW ONE TWO ONE THREE TWO scroll tab controls can contain a larger number of items. (≈5-7 items)Deloitte Digital Presentation Name
  30. 30. Deloitte Digital Presentation Name
  31. 31. navigation bar TitleDeloitte Digital Presentation Name
  32. 32. navigation bar ITW ITW LogoDeloitte Digital Presentation Name
  33. 33. ITW tool barDeloitte Digital Presentation Name
  34. 34. ITW Cancel Suncadia Resort Workshops Keynotes table view presents Schedule data in a single-column list of multiple rows. Bear Scat Bear HugsDeloitte Digital Presentation Name
  35. 35. ITW Location Suncadia Types of Bears Grizzly Polar Grouped tables display Brown groups of rows that are Workshops inset from the side When Bears Attack edges of the screen. Design Hike Think It, Make ItDeloitte Digital Presentation Name
  36. 36. List Grid segmented control shows a Silly Bear horizontal list of items. Each segment looks like a button. Angry Bear Big Bear Curious Bear Frustrated Bear Confused Bear Baby Bear Bear HugDeloitte Digital Presentation Name
  37. 37. List Grid segmented control shows a Silly Bear horizontal list of items. Each segment looks like a button. Angry Bear Big Bear Curious Bear Frustrated Bear Confused Bear Baby Bear Bear HugDeloitte Digital Presentation Name
  38. 38. List GridDeloitte Digital Presentation Name
  39. 39. Bears Berry Bonds 12 years old California Loves blue berries, honey, scratching his back on redwood trees, and growling at ui and ux designers. In his down time he is a stakeholder on many web and mobile projects. List GridDeloitte Digital Presentation Name
  40. 40. Common Gestures
  41. 41. TapDeloitte Digital Presentation Name
  42. 42. Double TapDeloitte Digital Presentation Name
  43. 43. Press & HoldDeloitte Digital Presentation Name
  44. 44. ExampleDeloitte Digital Presentation Name
  45. 45. Swipe LeftDeloitte Digital Presentation Name
  46. 46. Swipe RightDeloitte Digital Presentation Name
  47. 47. Swipe Right or LeftDeloitte Digital Presentation Name
  48. 48. Pinch scale downDeloitte Digital Presentation Name
  49. 49. Spread scale upDeloitte Digital Presentation Name
  50. 50. ClearDeloitte Digital Presentation Name
  51. 51. Designing for MobilePriorities
  52. 52. “Mobile users’ priorities change, but their intents don’t.” - Emily Wengert Beyond Channels (IAS 2012)
  53. 53. Value in Context
  54. 54. Value in Context
  55. 55. Value in Context
  56. 56. Value in Context
  57. 57. Value in Context
  58. 58. Value in Context
  59. 59. Value in Context
  60. 60. Value in Context
  61. 61. Value in Context
  62. 62. Value in Context
  63. 63. Value in Context
  64. 64. Value in Context
  65. 65. Value in Context Heuristics Clearly Identify: The value proposition The target user The target context Leverage Context Specific Assets Accommodate Context Specific Limitations Purge Unnecessary Features & Content
  66. 66. The Challenge
  67. 67. Deloitte Digital Presentation Name
  68. 68. Web PhoneDeloitte Digital Presentation Name
  69. 69. ValueDeloitte Digital Presentation Name
  70. 70. Rules & Exercise
  71. 71. outdoorsy long list of content
  72. 72. shortened list toolkit
  73. 73. Washington Trails Association
  74. 74. Washington Trails Association Find a Hike Volunteer Hiking Guide Trail Work Parties Hike Finder Map Volunteer Opportunities Trip Report Youth Opportunities Seasonal Hike Who’s Who in Trail Maintenance Hike Resources Hiking Basics Membership Recreational Pass Info Join WTA Ranger Station Info Renew Hiking with Kids Donate Magazine Other Ways to Give Photo Contest Hike-A-Thon Photo Gallery Online Store Update Personal Info Blog
  75. 75. Washington Trails Association Short List Hike Finder with Map Trip Report Photo Gallery
  76. 76. Short List Type the City, State or ZIP code: Trail Finder Trail Back Photo Gallery CancelTrail Name Big Mountain Type of Hike Day Hike Region North Cascades - Mountain Loop Highway What you will see Wildflowers blooming, ripe berries
  77. 77. Value in Context Heuristics Clearly Identify: The value proposition The target user The target context Leverage Context Specific Assets Accommodate Context Specific Limitations Purge Unnecessary Features & Content
  78. 78. Make Magic!
  79. 79. Presented byDANI STORLIE &ANDY FITZGERALD

×