Making Great iOS Experiences

Making Great iOS Experiences

What we will cover

•  Prerequisites •  Process steps •  Specific examples •  Common pitfalls

What is an

experience?

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

Entire experiences…

Small experiences…

In the case of your iOS product…

Overall experience will be remembered

And it is made of all the little experiences

What makes an experience

great?

Simplicity

Simplicity (helps with usability)

Transparency

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

Depth

Depth (makes it lovable)

Unity

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

Prerequisites

Know Your User

Common Tools

•  Personas

•  User Stories

It’s not about - tons of info - unnecessary context

The point is to really… truly…

understand who is using your

product and why

This is an absolute requirement. If you don’t have this, stop everything until you do.

Knowing your user influences every other aspect of design

Common pitfalls

Need some help from…

App Cat

This product is for puffy gray cats who like to build apps.

This product is for puffy gray cats who like to build apps.

Let’s rock! I know what to do. I AM the user.

This product is for middle-aged moms with bilingual children.

This product is for middle-aged moms with bilingual children.

Perfect. Let’s get started. I AM the user!

I’ve been in this industry for 8 years. I know what the user wants.

The Team

Understand Key Value

Key value: The thing your user gets that is important to them.

Key values differ from one little experience to the next

They are often (but not always) things about your product that are unique.

Key value: Seeing things you said you wanted to read later.

If you have a clear key value, you can coordinate everything around it.

The way you describe a key value should be clear and constant.

Everyone should talk about it the same way.

Have a Design Theme

A design theme is a concept that sets the overall tone…

… and also defines how little details are going to work.

Sounds like it would be a big, detailed thing with lots of specifications and rules

It’s totally the opposite

A good design theme can be described in 1 or 2 sentences.

Safari in iOS 7 design theme: “Floating cards”

WeaveScape for iPad design theme: “2D landscape with amazing people and interesting locations”

The design theme sets up a real space… a miniature world in which things make sense together.

Back to iOS 7 Safari: If it’s a world of floating cards (one for each browser window), then…

When we are looking at them from a distance, we should be able to see what’s on them.

Could have been like this

In this case, choosing a card would require it to “open up” or “flip over”

If the content is not on the surface, then where is it? On the back? Inside it?

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.

In addition, we have the parallax effect… looking behind cards or seeing them angle as they roll by.

That’s why the design theme is “floating cards” and not just “cards”.

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!

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?

Process steps

Make the key value central and sacred

Goal is to orient all of the little details around the key value. Be in support of it.

Key value: Finding a good place to eat while out walking through a neighborhood

What’s important here?

Speed of use is probably important.

Should we ask the user to create an account before we allow them to find a place to eat?

No! That interferes with the key value. Either they already have an account or they create one later… but not now!

Use design theme to create depth

This is where you go beyond the purely functional to create some magic.

A design theme allows you to brainstorm interesting ways that interactions can take place… that fit with the theme.

Some actual depth examples in a moment… Still some more steps…

Design with someone else

Anyone.

Review the design theme together… then talk about the interactions that need to happen between the user and the product.

You should have already filtered out any interactions that don’t support the key value… so now it’s just the good stuff!

Should be fun and creative.

Everyone can participate. Rules are: 1. Support creativity and exploration 2. Everything must make sense with the design theme

Why do you have to design with someone else, by the way?

Simplicity and quality

Simplicity and quality

Shortcuts

Simplicity and quality

Shortcuts

Confusing experiences

Simplicity and quality

Shortcuts

Confusing experiences

Passion & uniqueness

So now that you are: - Designing with someone else - Creating depth with the design theme - Making key value central and sacred

You can: 1. Talk 2. Design 3. Prototype 4. Play (very important) 5. Build for keeps

These steps (plus the prerequisites) should result in a more unified set of experiences.

Depth techniques

Waiting states / loading

I needed 1.2 seconds to load stuff. How can that be tied into the design theme to create depth?

Screen transitions (no more “cover vertical”)

UIViewController - presentViewController UITabBarController - setSelectedViewController - setSelectedIndex UINavigationController - pushViewController - popViewController - setViewControllers

Conform to this protocol: <UIViewControllerAnimatedTransitioning> Methods: - (void) animateTransition: - (NSTimeInterval) transitionDuration: - (void) animationEnded:

Don’t forget about interaction control! <UIViewControllerInteractiveTransitioning> Handle percent complete, cancellation, and finished transition… all driven by the user’s interaction with the product.

UICollectionView inserts and deletes (default fade is shallow)

This situation is particularly relevant. Items are coming in and out of your world… does the animation fit with your design theme?

Easiest customization is to set layout attributes and let iOS do the tweening: - (UICollectionViewLayoutAttributes*)initialLayoutAttributesForAppearingItemAtIndexPath: -(UICollectionViewLayoutAttributes*)finalLayoutAttributesForDisappearingItemAtIndexPath:

Example: Our new photo app. Design theme is “stacks of family pictures”

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.

Add some physics with UIKit Dynamics and you’ve got a great experience with depth!

More pitfalls

Branding

Feature defense

We love the app. It would be cool if it auto-posted to Facebook, though.

And I’m all about Google Calendar integration. You planning that soon?

Oh, yeah. Definitely! You’re using the beta. In the full version we got all that.

Simplicity is hard.

What you don’t build is as important as what you build. Defend against bloat.

Feline.io has an awesome interactive tutorial when you open the app.

And Mice.me has a parallax video on the background of their mobile Website and it knows your location.

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?

App Cat took one for the team here.

Looking around for inspiration and keeping up to date is important.

But all that really matters – in the end – is delivering your key value in the form of a great experience.

You won’t find that anywhere except within your own amazing talent.

What we covered

•  Prerequisites -  Know your user -  Understand key value -  Have a design theme

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

What we covered

•  Specific examples -  Screen transitions -  UICollectionView adds / deletes -  Wait states & loading stuff

thx!