Making Great iOS Experiences
0 likes470 views
The document outlines the essential components for creating great iOS experiences, emphasizing the importance of understanding the user, identifying key values, and developing a cohesive design theme. It highlights the need for simplicity, transparency, and depth in interactions while warning against common pitfalls such as feature bloat. The process includes collaborative design and prototyping to ensure all elements support the central key value, resulting in a unified user experience.
Making Great iOS Experiences
- 2. What we will cover • Prerequisites • Process steps • Specific examples • Common pitfalls
- 4. What happens to a user while he or she interacts with your product
- 11. In the case of your iOS product…
- 12. Overall experience will be remembered
- 13. And it is made of all the little experiences
- 15. Simplicity
- 17. Transparency
- 18. Transparency Tell what’s happening and why (creates comfort and trust)
- 19. Depth
- 21. Unity
- 22. Unity (makes each little experience add to the main experience)
- 23. Prerequisites
- 24. Know Your User
- 28. It’s not about - tons of info - unnecessary context
- 29. The point is to really… truly… understand who is using your product and why
- 30. This is an absolute requirement. If you don’t have this, stop everything until you do.
- 31. Knowing your user influences every other aspect of design
- 32. Common pitfalls
- 33. Need some help from…
- 34. App Cat
- 35. This product is for puffy gray cats who like to build apps.
- 36. This product is for puffy gray cats who like to build apps. Let’s rock! I know what to do. I AM the user.
- 37. This product is for middle-aged moms with bilingual children.
- 38. This product is for middle-aged moms with bilingual children. Perfect. Let’s get started. I AM the user!
- 40. I’ve been in this industry for 8 years. I know what the user wants.
- 41. The Team
- 44. Key value: The thing your user gets that is important to them.
- 45. Key values differ from one little experience to the next
- 46. They are often (but not always) things about your product that are unique.
- 47. Key value: Seeing things you said you wanted to read later.
- 48. If you have a clear key value, you can coordinate everything around it.
- 49. The way you describe a key value should be clear and constant.
- 50. Everyone should talk about it the same way.
- 52. A design theme is a concept that sets the overall tone…
- 53. … and also defines how little details are going to work.
- 54. Sounds like it would be a big, detailed thing with lots of specifications and rules
- 55. It’s totally the opposite
- 56. A good design theme can be described in 1 or 2 sentences.
- 58. Safari in iOS 7 design theme: “Floating cards”
- 60. WeaveScape for iPad design theme: “2D landscape with amazing people and interesting locations”
- 61. The design theme sets up a real space… a miniature world in which things make sense together.
- 62. Back to iOS 7 Safari: If it’s a world of floating cards (one for each browser window), then…
- 63. When we are looking at them from a distance, we should be able to see what’s on them.
- 65. Could have been like this
- 67. In this case, choosing a card would require it to “open up” or “flip over”
- 68. If the content is not on the surface, then where is it? On the back? Inside it?
- 69. In the real version, tapping a card makes it flip up and fill our whole view… and that makes sense. We are now looking at a card more closely.
- 70. In addition, we have the parallax effect… looking behind cards or seeing them angle as they roll by.
- 71. That’s why the design theme is “floating cards” and not just “cards”.
- 72. We see a card fly out to the left when we tap the “x” to get rid of it. Very consistent with the design theme!
- 73. If a card just disappeared when I tapped “x”, that wouldn’t make sense. Where did it go? How would the other cards respond to this?
- 74. Process steps
- 75. Make the key value central and sacred
- 76. Goal is to orient all of the little details around the key value. Be in support of it.
- 77. Key value: Finding a good place to eat while out walking through a neighborhood
- 79. Speed of use is probably important.
- 80. Should we ask the user to create an account before we allow them to find a place to eat?
- 81. No! That interferes with the key value. Either they already have an account or they create one later… but not now!
- 82. Use design theme to create depth
- 83. This is where you go beyond the purely functional to create some magic.
- 84. A design theme allows you to brainstorm interesting ways that interactions can take place… that fit with the theme.
- 85. Some actual depth examples in a moment… Still some more steps…
- 87. Anyone.
- 88. Review the design theme together… then talk about the interactions that need to happen between the user and the product.
- 89. You should have already filtered out any interactions that don’t support the key value… so now it’s just the good stuff!
- 91. Should be fun and creative.
- 92. Everyone can participate. Rules are: 1. Support creativity and exploration 2. Everything must make sense with the design theme
- 93. Why do you have to design with someone else, by the way?
- 96. Simplicity and quality Shortcuts Confusing experiences
- 97. Simplicity and quality Shortcuts Confusing experiences Passion & uniqueness
- 98. So now that you are: - Designing with someone else - Creating depth with the design theme - Making key value central and sacred
- 99. You can: 1. Talk 2. Design 3. Prototype 4. Play (very important) 5. Build for keeps
- 100. These steps (plus the prerequisites) should result in a more unified set of experiences.
- 101. Depth techniques
- 102. Waiting states / loading
- 104. I needed 1.2 seconds to load stuff. How can that be tied into the design theme to create depth?
- 105. Screen transitions (no more “cover vertical”)
- 107. UIViewController - presentViewController UITabBarController - setSelectedViewController - setSelectedIndex UINavigationController - pushViewController - popViewController - setViewControllers
- 108. Conform to this protocol: <UIViewControllerAnimatedTransitioning> Methods: - (void) animateTransition: - (NSTimeInterval) transitionDuration: - (void) animationEnded:
- 109. Don’t forget about interaction control! <UIViewControllerInteractiveTransitioning> Handle percent complete, cancellation, and finished transition… all driven by the user’s interaction with the product.
- 110. UICollectionView inserts and deletes (default fade is shallow)
- 111. This situation is particularly relevant. Items are coming in and out of your world… does the animation fit with your design theme?
- 112. Easiest customization is to set layout attributes and let iOS do the tweening: - (UICollectionViewLayoutAttributes*)initialLayoutAttr ibutesForAppearingItemAtIndexPath: - (UICollectionViewLayoutAttributes*)finalLayoutAttri butesForDisappearingItemAtIndexPath:
- 113. Example: Our new photo app. Design theme is “stacks of family pictures”
- 114. CollectionView animation: New pictures fall from above onto the stack. Deleting a picture makes it fall all the way off the bottom of the screen.
- 115. Add some physics with UIKit Dynamics and you’ve got a great experience with depth!
- 116. More pitfalls
- 117. Branding
- 121. Feature defense
- 122. We love the app. It would be cool if it auto-posted to Facebook, though.
- 123. And I’m all about Google Calendar integration. You planning that soon?
- 124. Oh, yeah. Definitely! You’re using the beta. In the full version we got all that.
- 126. Simplicity is hard.
- 127. What you don’t build is as important as what you build. Defend against bloat.
- 128. Feline.io has an awesome interactive tutorial when you open the app.
- 129. And Mice.me has a parallax video on the background of their mobile Website and it knows your location.
- 130. We’ve talked about this a dozen times. Those things are not relevant to our key value. Can we start designing OUR app and stop copying others?
- 132. App Cat took one for the team here.
- 133. Looking around for inspiration and keeping up to date is important.
- 134. But all that really matters – in the end – is delivering your key value in the form of a great experience.
- 135. You won’t find that anywhere except within your own amazing talent.
- 136. What we covered • Prerequisites - Know your user - Understand key value - Have a design theme
- 137. What we covered • Process steps - Make key value center & sacred - Use design theme to make depth - Design with someone else - Talk, design, prototype, play - Then finally build for keeps
- 138. What we covered • Specific examples - Screen transitions - UICollectionView adds / deletes - Wait states & loading stuff
- 139. thx!