1. iOS7
The good, the bad & the changes
Chrissy Welsh
Lead UX - Backbase
@chrissywelsh
2. iOS7
The good, the bad & the changes
Chrissy Welsh
Lead UX - Backbase
@chrissywelsh
3. What we will cover
• Bugs to watch out for
• Design decisions for native apps
& websites + their workarounds
• Gestures
• The new look and feel
• New & removed features
4. Bugs to watch out for...
• Web SQL permissions to increase the default 5MB of
space for an app to the previously permitted 50MB limit no
longer work correctly, and require a workaround.
• “Save to Home Screen” apps are basically broken. Once
more than four apps are saved to home screen, the save
slots are recycled and sometimes duplicated, and the
phone has to be rebooted in order to clear itself.
• If your app uses AppCache and you are managing state via
hash or other mechanisms, the history object will never
update, disabling history.back.
5. Design decisions: Tints
Feature: Tints are selected based on the primary
background colour
Workaround: Select your background colours carefully
6. Design decisions: Navigation
Feature: Bottom navigation is
problematic, in this design it’s
disabled because of the new iOS7
Safari toolbar.
Workaround: 2 user taps will
activate the menu again - or rethink
the UX & navigation.
7. Design decisions: URL bar
Feature: No way to hide the URL bar with javascript, no full screen
mode. Problem if your app relies on absolute positioning.
Workaround: Swiping up will reset to full screen, or asking user to
add app to homescreen
8. Design decisions: Page titles
Feature: Safari now ignores page <title>
Workaround: It will show the URL, so make sure it
makes sense.
9. Design decisions: HTML5
Issue: Animating SVG
with Javascript is a bit hit
or miss with your
performance.
Workaround: Look at
your interactive elements
and slim them down if
possible.
10. Gestures: Up-swipe
Feature: iOS7 now has a control
center visible on a bottom up
swipe.
Workaround: Be careful with
your app or site to suggest an
upwards swipe gesture to the
user.
11. Gestures: left/right-swipe
Feature: Right and left
swipe gestures within
about 10 percent of
display edge are always
grabbed by iOS and
treated as a forward/back
request, and not passed
to the browser.
Workaround: None
12. The new look & feel
Feature: The new OS
icons are 5% bigger in
7.0 that 6.0
Workaround: Update
those bad boys
14. New feature: Sticky position
Feature: Sticky position is a new experimental feature that
allow us to fix an element to the viewport but only when it’s
off the visible area (usually after a scrolling action)
16. New features: Dynamic behaviour
Feature: Dynamic behaviors offer
a way to improve the user
experience of your app by
incorporating real-world behavior
and characteristics, such as
gravity, into your app’s animations.
17. New features: Speech synthesis
Feature: Speech Synthesis api
allows mobile safari to speak.
18. New features: Custom transitions
Feature: Allows you to set up the screen changes in
the UI the way you want it.
19. New features: Smile detection
Feature: If you have a camera
app - or use the camera there are
some playful things you can do.
20. New features: Image filters
Feature: There are now image
filters available as part of the OS.
• CILinearToSRGBToneCurve
• CIPhotoEffectChrome
• CIPhotoEffectFade
• CIPhotoEffectInstant
• CIPhotoEffectMono
• CIPhotoEffectNoir
• CIPhotoEffectProcess
• CIPhotoEffectTonal
• CIPhotoEffectTransfer
• CISRGBToneCurveToLinear
• CIVignetteEffect
21. New features: Motion effects (parallax)
Feature: Phone titling to see
more background, or provide
direction in games.
22. New features: QR code generator
Feature: For all your QR Code
needs. Available as part of the OS.
23. New feature: Touch iD
Feature: Touch iD as
identification - not available for
websites/apps ... yet.
24. New feature: Touch iD
http://www.youtube.com/watch?v=1OFW6Va1m5k
*Just remember to test all those cool new features!
25. What we covered
• Bugs to watch out for
• Design decisions for native apps & websites + their
workarounds
• Gestures
• The new look and feel
• New & removed features