The document discusses considerations for transitioning apps to iOS 7. It summarizes Apple's three core iOS 7 principles of deference, clarity and depth. It then outlines Tigerspike's six key considerations for the transition: the new aesthetic, full bleed interfaces, dynamic typography, hierarchy through depth, the physics engine, and enhanced multitasking. The document concludes by recommending a four-point transition strategy of testing on iOS 7, releasing a point update, planning a major release, and iterative updates.
2. Introduction to Tigerspike
10 years at the forefront of mobile technology
Over the past 10 years we have become recognised as the world's leading Personal
Media Company by our competitors, partners and clients
!
NEW YORK
LONDON
DUBAI
SINGAPORE
SYDNEY
MELBOURNE
SAN FRANCISCO
3. Introduction to Tigerspike
Our “difference” is now baked into our DNA
Creative
Strategic User Experience
& Platform Technology
AGENCIES TECH COMPANIES
Technical
(e.g. Ogilvy, Saatchi) (e.g. Accenture, Sapient)
4. Consulting UI & UX Design Multi-platform
Development
Licensing & Support
Introduction to Tigerspike
Our end-to-end personal media technology offering
* sample of clients
5. Apple’s recommendations
Tigerspike’s six key iOS 7 considerations
And if you don’t update?
The four-point transition strategy
Unlock the Power of Personal Media
Agenda
Apple’s three core iOS 7 principles
iOS 7 Overview
8. Unlock the Power of Personal Media
iOS 7 Overview: The end of Skeumorphic design
• What is Skeumorphic design?
• Why did Apple adopt it?
• What does Apple think of it now?
9. We ran out of green
felt and wood
“
Craig Federighi,
Apple's head of software engineering
Unlock the Power of Personal Media
iOS 7 Overview: The end of Skeumorphic design
10. Unlock the Power of Personal Media
Apple’s three core iOS 7 principles
11. Unlock the Power of Personal Media
Apple’s three core iOS 7 principles
Deference.
Content is at the center of the experience.
Clarity.
Text is legible at every size, icons are precise,
adornments are subtle and appropriate.
Depth.
Explore visual layers and realistic motion that
heighten users’ delight and understanding.
12. Unlock the Power of Personal Media
Apple’s three core iOS 7 principles: Deference
iOS 6 iOS 7
13. Unlock the Power of Personal Media
Apple’s three core iOS 7 principles: Clarity
iOS 6 iOS 7
14. Unlock the Power of Personal Media
Apple’s three core iOS 7 principles: Depth
iOS 6 iOS 7
16. By bringing fundamental and pervasive
changes to the iOS experience, iOS7
provides a rare opportunity to revisit the
way apps communicate their core purpose
and functionality to users.
“
Unlock the Power of Personal Media
17. The amount of effort you’ll need to put into your transition strategy is
dependent on what type of app you have:
Unlock the Power of Personal Media
Apple’s recommendations
Effort = min
Standard app
Effort = max
Bespoke app
Effort = med
Visual Hybrid app
18. Does your app need to
support iOS 7?
• iOS users tend to be very quick
to update their devices—it’s so
easy and just works!
• Users expect their favorite apps
to follow suit.
Unlock the Power of Personal Media
Apple’s recommendations
19. Unlock the Power of Personal Media
Tigerspike’s six key
iOS 7 considerations
20. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Tigerspike’s six key iOS 7 considerations
1. The new aesthetic
2. Full bleed interfaces
3. Dynamic typography
4. Hierarchy conveyed through depth
5. Physics engine
6. Enhanced multitasking
21. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #1 The new aesthetic
A sense of calm and tranquility,
focus and efficiency. Navigation
elements are translucent, buttons have
lost their borders, tab bars, nav bars,
search bars—everything is different.
“
22. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #1 The new aesthetic
23. Unlock the Power of Personal Media
• The burden of supporting the two styles
Supporting iOS 6 and 7 is a lot of work.
• Rome wasn’t (re)built in a day!
Don’t try to change everything at one.
Start with a point release, then make major changes later.
Unlock the Power of Personal Media
Six key considerations: #1 The new aesthetic
24. Action plan:
ü Notify your ‘brand guardians’ that they can expect significant
changes to your mobile & tablet guidelines
ü Begin to consider how your brand is best represented
aesthetically within this new ecosystem
ü Download, read and share the Human Interface & UI Transition
Guidelines
ü Organise a point release with updated UI for iOS 7 release,
then iterate towards a major release
You also may need to:
• Redesign your iconography
• Up skill your UI & UX teams
Unlock the Power of Personal Media
Six key considerations: #1 The new aesthetic
25. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #2 Full bleed interfaces
Make your apps more about your
content and less about UI. More of the
screen is available—take advantage of
the increased real-estate.
“
26. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #2 Full bleed interfaces
27. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #2 Full bleed interfaces
• Taking your design full screen
Scrolling now starts from the top of the screen.
Consider how your content looks under a blurred bar.
• Upgrading your custom chrome
Custom chrome is hard to change.
You may need to go back to a simpler design to achieve this.
28. Unlock the Power of Personal Media
Six key considerations: #2 Full bleed interfaces
Action plan:
ü Educate your UI/UX teams about the graphical elements that
allow you to take full advantage of the screen
ü Ensure your new iOS 7 apps do not include borders
ü Understand how the bars at the top and bottom of the screen
should be semi-transparent allowing the content to scroll
below them
29. Unlock the Power of Personal Media
iOS 7 uses a new dynamic type
system designed to improve text
legibility—regardless of the size
it’s rendered at.
Unlock the Power of Personal Media
Six key considerations: #3 Dynamic typography
“
30. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #3 Dynamic typography
31. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #3 Dynamic typography
• A whole new toolset
Apple has given us a whole bunch of tools:
- Text Kit
- Dynamic Type
- Text Styles
- Traits
• Benefits
Global text size rather than bespoke solution.
Improved accessibility.
• Challenges
How does your interface adapts to variable size fonts.
32. Unlock the Power of Personal Media
Six key considerations: #3 Dynamic typography
Action plan:
ü Make a decision on if you will use Helvetica Neue for your
apps (recommended)
ü If not using your own fonts, consider how they will work within
the new, refined aesthetic
ü Notify ‘brand guardians’ of potential changes
33. Unlock the Power of Personal Media
Use transparencies and transitions
to help communicate hierarchical
position—this aids the users ‘mental
model’ helping them to navigate
Unlock the Power of Personal Media
Six key considerations: #4 Hierarchy conveyed
through depth
“
34. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #4 Hierarchy conveyed
through depth
35. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #4 Hierarchy conveyed
through depth
• What did Apple do with the Calendar app?
Timescales were unrelated in iOS 6.
Dates now relate to each other in iOS 7.
• Redesigning your app to focus on its hierarchy
Focus on how your content relates to itself.
Help the customer build a mental model of your content.
36. Action plan:
ü Adopt the translucent interface elements
ü Redesign custom navigation bars
ü Re-imagine your user experience to take advantage of this
new paradigm to keep ahead
Unlock the Power of Personal Media
Six key considerations: #4 Hierarchy conveyed
through depth
37. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #5 Physics engine
38. Unlock the Power of Personal Media
This signifies the move away from
interaction design completely
communicated with chrome and
skeuomorphic design—there is now a
focus on the ‘holistic’ experience
Unlock the Power of Personal Media
Six key considerations: #5 Physics engine
“
39. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #5 Physics engine
• Make your animations and transitions interactive
iOS 6 the animation and transitions were canned, not engaging.
iOS 7 allows interactive animations and transitions, depth.
• You don’t need to be a rocket scientist
Apple has made this really easy.
Driven by simple behaviors.
• “Hybrid” apps are missing out
Lots of work to do this, Apple has made it easy.
Rethink your strategy.
40. Unlock the Power of Personal Media
Six key considerations: #5 Physics engine
Action plan:
ü Analyse your brand / app identity and how real-world
feedback can enhance the user experience
ü Look at how you can enhance your iOS7 apps to create an
immersive, fun and highly engaging experience
ü Utilise the physics engine to create amazing transitions that
help the user navigate your experience while delighting them!
41. iOS 7 multitasking is a new way for
every app to multitask intelligently
—without a huge hit to battery life
or performance.
Unlock the Power of Personal Media
Six key considerations: #6 Enhanced multitasking
“
42. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #6 Enhanced multitasking
43. Unlock the Power of Personal MediaUnlock the Power of Personal Media
Six key considerations: #6 Enhanced multitasking
• Content updating in iOS 6
Spinners, user has to wait & bad when we have no network.
• Background updating in iOS 7
Fetch and remote notifications.
• What does this mean for your users?
Less waiting.
More engaging.
No spinners.
44. Action plan:
ü When you do your major iOS 7 release, ensure you are making
the most out of the new multitasking features
ü Ensure that your Software engineers are well-versed on how to
implement optimised multi-tasking
Unlock the Power of Personal Media
Six key considerations: #6 Enhanced multitasking
45. And if you don’t update?
Unlock the Power of Personal Media
46. Unlock the Power of Personal MediaUnlock the Power of Personal Media
And if you don’t update?
48. Unlock the Power of Personal Media
The four-point transition strategy
1. Compile and test your iOS 6 app(s) on iOS 7 ASAP
2. Get a point release ready with updated iOS 7 UI components
(and any bugs fixed) for when the update arrives ‘in fall’
3. Begin work on your next major release reimaging your
experience to take full advantage of the OS
4. Don’t boil the ocean—release, iterate & release.
49. Unlock the Power of Personal MediaUnlock the Power of Personal Media
New exciting features to keep in mind (1500 APIs!)
50. Thank you!
Upcoming events
!
Round-table session – San Francisco
!
Date Sept-10
Time 8am-10am
Location 875 Howard St, 6th Floor
51. Contact information
Alex Hall, President Tigerspike Americas
alex@tigerspike.com | +1 646 558 3254
Christian Glover Wilson, VP, Technology & Strategy
christian.gloverwilson@tigerspike.com | +1 917 310 5249
Americas
133 W 19th St, 7th Floor
New York NY 10011
+1 646 330 4636
americas@tigerspike.com
EMEA
Level G, 1 & 3
18 Buckingham Gate
London SW1E 6LB
+44 20 7148 6600
emea@tigerspike.com
Asia Pacific
Level 1
28 Richards Avenue, Surry Hills
Sydney NSW 2010
+61 2 9361 5132
asia-pacific@tigerspike.com