English feliratok

← Nick Butcher on Small Screens - UX Design for Mobile Developers

Beágyazókód kérése
5 Languages

Showing Revision 6 created 05/25/2016 by Udacity Robot.

  1. So the final mobile constraint is the small screen. This might seem like
  2. the obvious mobile constraint and it basically means that we can't fit as
  3. much on a really small smartphone
  4. screen, but there's two really awesome techniques
  5. that we can use that will help us optimize for our small UI.
  6. >> Yeah, they're called combination and reflow. And
  7. we're going to talk to an Android designer developer
  8. called Mick Butchard, he's on the Android team,
  9. about how to make this work in your applications.
  10. >> So Andriod is not
  11. a one-size-fits-all OS. It comes in many different sizes
  12. and shapes. From small phones to large tablets, TVs and
  13. beyond. The great news is that Android has been built
  14. from the ground up to embrace this variety and give
  15. you tools in order to deal with it. So, from
  16. the very beginnings, Android has allowed you to scale your
  17. user interface up and down between different devices. The problem
  18. is that scaling approaches will only get you so far.
  19. so, I'm going to take you through some of
  20. the common pitfalls we see with this relying on
  21. scaling approaches, and then I'm going to go through some
  22. alternative ways of dealing with this. So the first
  23. problem we see commonly is one of having excessive
  24. line lengths. So in this application, the text and
  25. images are running the full width of the device's
  26. screen. On a smaller, phone-size device, this might be fine.
  27. But as you get beyond a certain
  28. size this becomes uncomfortable. When you, especially when
  29. you're looking at line lengths of text, you want to be aiming for between 45 and
  30. 75 characters of text in order to maintain
  31. a comfortable reading experience. The user can easily
  32. scan across it. And in this application we
  33. can see that this is clearly exceeding that.
  34. The next problem we commonly see is one
  35. of unbalanced content. So, in this example, we
  36. can see there's a lot of content clustered up in the top left of the screen,
  37. and then leaving huge amounts of white space
  38. across the rest of the screen. This leads
  39. to a very kind of unbalanced feeling, which
  40. makes your application feel completely unoptimized for this
  41. device. And the last problem we commonly see is more
  42. of a missed opportunity almost, of not making the best use
  43. of the real estate available to you. So in this
  44. example we might have an application which shows many photos. As
  45. we can, see they're these tiny little thumbnails all grouped
  46. over to one side. It really is a shame not to
  47. make use of these beautiful big screens, when, all this
  48. extra real estate, when it is available to you. So you
  49. want to be avoiding this. So these are
  50. some of the common pitfalls we see in relying
  51. on scaling approaches, and the answer to dealing with
  52. these problems really is to adopt a responsive mobile
  53. design to respond to the device's characteristics. So here
  54. are three techniques you can use in order to
  55. do this. So the first technique is simply one
  56. of combination. This is if you have extra room,
  57. combining things from different screens onto a single screen in
  58. order to make up, to fill up the space. So
  59. in this example, we've got a typical master detail view
  60. which on a phone would be on two separate screens. So
  61. clicking through from a list item for example might show
  62. subsequent details. On a larger device with sufficient width, we
  63. might show both of these things at once. This will
  64. avoid the problem of having those excessive line lengths and make
  65. better use of the screen real estate. The second
  66. technique is one that we call macro reflow. So this
  67. is taking the major building blocks of your application and
  68. reflowing them or rearranging them on the screen in order
  69. to make better use of the space. So in
  70. this example, we simply move something like a large header
  71. image and body text instead of being vertically stacked above
  72. each other to be horizontally stacked next to each other.
  73. So also gives the image more space to kind of to show off on the,
  74. the larger amounts of screen real estate, as
  75. well as avoiding those excessive line lengths when
  76. it's in a landscape device. So this is
  77. not only useful for different sized devices, you
  78. can also use this kind of trick when
  79. changing on the same device between different orientations.
  80. And the last technique I want to go
  81. through is something we call micro reflow. So
  82. this technique really focuses on the individual blocks
  83. within your design and it delegates responsibility to those
  84. individual blocks to optimize themselves given a certain
  85. amount of space. So, a couple of examples
  86. of doing that. On the left here, we
  87. have a list type application which, given sufficient space,
  88. might lead to those excessive line lengths or very unbalanced
  89. views. So instead of that, each individual list item knows that,
  90. given a certain amount of space, how to draw itself. So
  91. once it gets over a certain size, a certain amount of
  92. width available to the device it'll change its representation. Instead of
  93. being a list item, it might change to say, a grid,
  94. grid representation. So this will allow you to have a, you
  95. know, fill the space better. The second example, is if you
  96. can't, if there's simply no way to introduce
  97. more content you can introduce a margin point
  98. instead. So in this form-type application on the
  99. right when we go for beyond the phone,
  100. past a certain size, when there just isn't
  101. anymore content we can show on screen, we
  102. simply introduce a margin point so it doesn't
  103. end up being excessively long or excessively unbalanced.
  104. >> So Nick just talked to us about some really awesome
  105. UI techniques for small screens. But the small screen affects a lot more
  106. than just the UI. It actually really affects the UX of your M. Yeah,
  107. simply taking a web or desktop app and shrinking it down so that
  108. it fits into a sm, small screen is probably not the way to go.
  109. >> Yeah, you really need to think mobile first and optimize
  110. your flow for the smartphone. So how do we do this? Wireframing.
  111. >> Wireframing.