Weave The People Chief Technology Creator, Kilton Hopkins, presented "Making Great iOS Experiences" at Mobile+Web DevCon 2014.

1. Making Great
iOS Experiences

2. What we will cover
• Prerequisites
• Process steps
• Specific examples
• Common pitfalls

3. What is an
experience?

4. What happens
to a user while
he or she
interacts with
your product

5. Entire experiences…

8. Small experiences…

11. In the case of your
iOS product…

12. Overall experience
will be remembered

13. And it is made of all
the little experiences

14. What makes an
experience
great?

15. Simplicity

16. Simplicity
(helps with usability)

17. Transparency

18. Transparency
Tell what’s happening and why
(creates comfort and trust)

19. Depth

20. Depth
(makes it lovable)

21. Unity

22. Unity
(makes each little
experience add to
the main experience)

23. Prerequisites

24. Know
Your
User

25. Common Tools
• Personas
• User Stories

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

43. Understand
Key
Value

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.

51. Have a
Design
Theme

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

78. What’s important here?

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…

86. Design with
someone else

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?

94. Simplicity and quality

95. Simplicity and quality
Shortcuts

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!