Mobile Design and User Experience that<br />Doesn’t suck<br />Paul Traniptrani@adobe.comwww.paultrani.com             @pau...
Work<br />Ride<br />Live<br />Love<br />Play<br /><ul><li>Adobe Evangelist
Lynda.com author
Adobe Certified Instructor
Art school graduate</li></ul>Paul Trani<br />
Why should you care?<br />Question<br />
Don’t Get Caught<br />
Keys to Successful Mobile Design<br />Understand the User<br />Create Appropriate Content<br />Use Device Capabilities<br ...
the mobile user<br />Mobile Design/UX<br />
Who is Your Target Audience?<br />Generation Y:  97% have a computer,  94% have a mobile phone.<br />In the next 5 years m...
Where are They?<br />Development<br />Inside<br />Outside<br />(partly cloudy)<br />Outside<br />(sunny)<br />
When Will They Interact?<br />Design for two minute tasks.<br />Make navigation shallow and easy.<br />
How Are They Holding the Device?<br />600x1024<br />?<br />?<br />One hand?  Two hands?  Portrait?  Landscape?  Both?<br />
Why Will They Use it?<br />Fun?  Engaging?  Informational? Helpful?<br />
Content within context<br />Mobile Design/UX<br />
Lack of Context<br />
Create, Don’t Convert<br />
Content<br />
Content<br />(But have a link to the full site)<br />
use device capabilities<br />Mobile Design/UX<br />
Device Capabilities<br />
Using Capabilities<br /><ul><li>Click for more info?
Swipe for additional items?
Pinch to zoom?
GPS for nearby stores?</li></li></ul><li>Using Capabilities<br />
device constraints<br />Mobile Design/UX<br />
=<br /><ul><li>Processing power of a computer 8 years old
Screen 1/3 the size</li></ul>Device Constraints<br />
Graphics<br /><ul><li> Consider bitmaps over vectors
 Keep bitmaps as small as possible
 Minimize number of vectors
 Test your animations with different qualities of Stage</li></ul>Avoid, if possible:<br /><ul><li> Filters
 Blend modes
 Transparency
 Perspective distortion</li></li></ul><li>ActionScript<br /><ul><li> Set frame rate as low as possible
 Dynamically adjust frame rate
 Use enterFrame event when necessary
 Consolidate into a single handler instead of multiple ones</li></ul>Avoid, if possible:<br /><ul><li> High-frequency timers
UpdateAfterEvent</li></li></ul><li>Mobile/Tablet Device Sizes<br />1024x768<br />132ppi<br />1024x600<br />240ppi<br />854...
Dynamically Adjust Graphic Sizes<br />Create a button that’s ½” across three devices:<br />next_btn.width = Capabilities.s...
Don’t Resize. Recreate.<br />Mobile<br />Tablet<br />
Don’t Resize. Recreate.<br />Mobile<br />Tablet<br />
iOS User Experience<br />Back<br />New/Edit<br />Home<br />
Options Menu<br />Android  User Experience<br />Back<br />Home<br />
BlackBerry Playbook  User Experience<br />Context Menu or 2nd Navigation<br />Application <br />Switching <br />Applicatio...
Use Existing User Experience Metaphors<br />
Leverage Real World Metaphors<br />The UK’s Most Popular Handheld <br />
Elements of successful design<br />Layout, Typography, Color<br />
Bad News<br />
Layout<br />Elements of Successful Design<br />
Elements of Successful Design<br />leading the eye<br />
<ul><li>Start with a grid
Layout Design AIR App: www.paultrani.com</li></li></ul><li>One Column? Two?<br />
The Golden Ratio<br /><ul><li>Proportion defined as 1.618
Found in nature, art and architecture
Layout Design AIR App: www.paultrani.com</li></ul>1<br />1.618<br />
Grid Structure<br />Divide the page into a grid<br />The eye naturally follows an “F” shape<br />
42<br />Button Placement<br />Copyright 2009 Adobe Systems Incorporated.  All rights reserved.  Adobe confidential.<br />
Native Keyboard Placement<br />
Design for Real Hand Sizes<br />45x45px<br />15x15px<br /><ul><li>The average fingertip is 3x larger than the hand cursor
Make your buttons 3x larger</li></li></ul><li>Space<br />“Perfection is achieved not when there is nothing left to add,but...
Upcoming SlideShare
Loading in...5
×

Designing for Mobile

1,819

Published on

Fundamentals of design and UX for mobile.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,819
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
67
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • http://www.useit.com/alertbox/reading_pattern.html
  • Each section of an index finger, from the tip to the base of the wrist, is larger than the preceding one by about 1.618, fitting the Fibonacci numbers 2, 3, 5 and 8.The Fibonacci numbers and golden section are widely found in the plant kingdom. In nearly all flowers, the number of petals is a Fibonacci number. For instance, lilies have 3 petals, buttercups have 5, many delphiniums have 8, marigolds have 13, asters have 21, and daisies commonly have 13, 21, 34, 55 or 89. http://davidpratt.info/pattern1.htm
  • http://www.useit.com/alertbox/reading_pattern.html
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called &quot;white space,&quot; is good. Embrace it. Use it. Often, the more space you don&apos;t use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called &quot;white space,&quot; is good. Embrace it. Use it. Often, the more space you don&apos;t use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called &quot;white space,&quot; is good. Embrace it. Use it. Often, the more space you don&apos;t use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called &quot;white space,&quot; is good. Embrace it. Use it. Often, the more space you don&apos;t use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called &quot;white space,&quot; is good. Embrace it. Use it. Often, the more space you don&apos;t use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  • http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  • http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  • http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  • Using an elegant font does not make a site elegant.
  • The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer&apos;s eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  • The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer&apos;s eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  • The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer&apos;s eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  • Designing for Mobile

    1. 1. Mobile Design and User Experience that<br />Doesn’t suck<br />Paul Traniptrani@adobe.comwww.paultrani.com @paultrani<br />
    2. 2. Work<br />Ride<br />Live<br />Love<br />Play<br /><ul><li>Adobe Evangelist
    3. 3. Lynda.com author
    4. 4. Adobe Certified Instructor
    5. 5. Art school graduate</li></ul>Paul Trani<br />
    6. 6. Why should you care?<br />Question<br />
    7. 7. Don’t Get Caught<br />
    8. 8. Keys to Successful Mobile Design<br />Understand the User<br />Create Appropriate Content<br />Use Device Capabilities<br />Design for Device Constraints<br />Understand Design Fundamentals <br />
    9. 9. the mobile user<br />Mobile Design/UX<br />
    10. 10. Who is Your Target Audience?<br />Generation Y: 97% have a computer, 94% have a mobile phone.<br />In the next 5 years more transactions will happen on devices over desktops.<br />
    11. 11. Where are They?<br />Development<br />Inside<br />Outside<br />(partly cloudy)<br />Outside<br />(sunny)<br />
    12. 12. When Will They Interact?<br />Design for two minute tasks.<br />Make navigation shallow and easy.<br />
    13. 13. How Are They Holding the Device?<br />600x1024<br />?<br />?<br />One hand? Two hands? Portrait? Landscape? Both?<br />
    14. 14. Why Will They Use it?<br />Fun? Engaging? Informational? Helpful?<br />
    15. 15. Content within context<br />Mobile Design/UX<br />
    16. 16. Lack of Context<br />
    17. 17. Create, Don’t Convert<br />
    18. 18. Content<br />
    19. 19. Content<br />(But have a link to the full site)<br />
    20. 20. use device capabilities<br />Mobile Design/UX<br />
    21. 21. Device Capabilities<br />
    22. 22. Using Capabilities<br /><ul><li>Click for more info?
    23. 23. Swipe for additional items?
    24. 24. Pinch to zoom?
    25. 25. GPS for nearby stores?</li></li></ul><li>Using Capabilities<br />
    26. 26. device constraints<br />Mobile Design/UX<br />
    27. 27. =<br /><ul><li>Processing power of a computer 8 years old
    28. 28. Screen 1/3 the size</li></ul>Device Constraints<br />
    29. 29. Graphics<br /><ul><li> Consider bitmaps over vectors
    30. 30. Keep bitmaps as small as possible
    31. 31. Minimize number of vectors
    32. 32. Test your animations with different qualities of Stage</li></ul>Avoid, if possible:<br /><ul><li> Filters
    33. 33. Blend modes
    34. 34. Transparency
    35. 35. Perspective distortion</li></li></ul><li>ActionScript<br /><ul><li> Set frame rate as low as possible
    36. 36. Dynamically adjust frame rate
    37. 37. Use enterFrame event when necessary
    38. 38. Consolidate into a single handler instead of multiple ones</li></ul>Avoid, if possible:<br /><ul><li> High-frequency timers
    39. 39. UpdateAfterEvent</li></li></ul><li>Mobile/Tablet Device Sizes<br />1024x768<br />132ppi<br />1024x600<br />240ppi<br />854x480<br />240ppi<br />800x480<br />240ppi<br />480x320<br />163ppi<br />960x640<br />326ppi<br />120 ppi (low), 160 ppi (mid) or 240 ppi (high)<br />
    40. 40. Dynamically Adjust Graphic Sizes<br />Create a button that’s ½” across three devices:<br />next_btn.width = Capabilities.screenDPI * .5;<br />
    41. 41. Don’t Resize. Recreate.<br />Mobile<br />Tablet<br />
    42. 42. Don’t Resize. Recreate.<br />Mobile<br />Tablet<br />
    43. 43. iOS User Experience<br />Back<br />New/Edit<br />Home<br />
    44. 44. Options Menu<br />Android User Experience<br />Back<br />Home<br />
    45. 45. BlackBerry Playbook User Experience<br />Context Menu or 2nd Navigation<br />Application <br />Switching <br />Application <br />Switching <br />Minimize Application<br />Bring up Keyboard<br />Orientation <br />Change<br />
    46. 46. Use Existing User Experience Metaphors<br />
    47. 47. Leverage Real World Metaphors<br />The UK’s Most Popular Handheld <br />
    48. 48. Elements of successful design<br />Layout, Typography, Color<br />
    49. 49. Bad News<br />
    50. 50. Layout<br />Elements of Successful Design<br />
    51. 51. Elements of Successful Design<br />leading the eye<br />
    52. 52. <ul><li>Start with a grid
    53. 53. Layout Design AIR App: www.paultrani.com</li></li></ul><li>One Column? Two?<br />
    54. 54. The Golden Ratio<br /><ul><li>Proportion defined as 1.618
    55. 55. Found in nature, art and architecture
    56. 56. Layout Design AIR App: www.paultrani.com</li></ul>1<br />1.618<br />
    57. 57. Grid Structure<br />Divide the page into a grid<br />The eye naturally follows an “F” shape<br />
    58. 58. 42<br />Button Placement<br />Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.<br />
    59. 59. Native Keyboard Placement<br />
    60. 60. Design for Real Hand Sizes<br />45x45px<br />15x15px<br /><ul><li>The average fingertip is 3x larger than the hand cursor
    61. 61. Make your buttons 3x larger</li></li></ul><li>Space<br />“Perfection is achieved not when there is nothing left to add,but when there is nothing left to take away” <br />Antoine de Saint-Exupery<br /><ul><li>Implies importance, elegance, and professionalism.
    62. 62. Don’t try to be great, try to be invisible.</li></li></ul><li>Space<br />Ross<br />Kenneth Cole<br />
    63. 63. Google<br />
    64. 64. Examples<br />
    65. 65. typography<br />Elements of Successful Design<br />
    66. 66. Typography<br />“Typography has one plain duty before it and that’s to convey information in writing.” <br />Emil Ruder, Founder of Basel School of Design<br />Choose a font that fits the subject<br />Don’t use more than three<br />Font size around 24pt<br />
    67. 67. Choosing a Font<br />San-serif lack Serifs and are considered modern<br />Understand type anatomy<br />Understand type measurements<br />
    68. 68. Contrast<br />Size<br />Hierarchy <br />Focus on Clarity<br />
    69. 69. Examples<br />
    70. 70. Color Theory<br />Elements of Successful Design<br />
    71. 71. Color<br />“Use color to emphasize importance, not decorate a page.” <br />Alexander White<br />Use color to create hierarchy, dominance, and balance<br />Consistent use of a few colors makes a more cohesive design<br />
    72. 72. Color<br />Choose colors using The Color Wheel<br />Warm colors bring elements forward<br />Cool colors move elements back <br />Find contemporary colors using Kuler<br />
    73. 73. Example<br />
    74. 74. Application of the fundamentals<br />Application<br />
    75. 75. Etsy<br />
    76. 76. Example<br />We want to sell you stuff you don’t need.<br />
    77. 77. Product<br />
    78. 78. Thank You<br /><ul><li>http://www.patterntap.com
    79. 79. http://www.webdesignerdepot.com
    80. 80. http://www.alistapart.com
    81. 81. www.paultrani.com
    82. 82. http://www.designmeltdown.com
    83. 83. http://www.smashingmagazine.com
    84. 84. http://www.uxbooth.com
    85. 85. http://www.colourlovers.com
    86. 86. http://www.webdesignerwall.com
    87. 87. http://thinkvitamin.com
    88. 88. http://www.noupe.com</li></ul>Paul Traniptrani@adobe.comwww.paultrani.com<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×