SlideShare a Scribd company logo
1 of 155
Download to read offline
Web 2.0 NYC

Design for Tablet Experiences | Workshop | Henrik Olsen
Goals of this workshop

                         Who: For designers that are new to design for
                         web, mobile, and tablet, as well as those who
                         are at an intermediate level.



                         Why we’re doing this: Share a sense of what
                         makes a good tablet experience, and how you
                         can get started as a tablet app designer

We’re all going to learn from each other
 © 2011 Hot Studio, Inc. Proprietary & Confidential                       2
Agenda:

• Who are we
• The hardware and operating systems
• Cool apps: top picks and why
• When & where an app makes sense - exercise #1
• Top 10 design considerations
BREAK
• Use scenarios - exercise #2
• Features & functions & content- exercise #3
• Gestures
• Tools for designers
• Task flows & dashboards - exercise #4
• Project team & ‘a process’
                                                  3
What are you hoping to learn, or
 experience, in this workshop?




                                   4
Who are we?

     Who here has designed a tablet app before?




     Who here is a professional web designer?




                                                  5
Where I come from
(an experience design firm)




 © 2011 Hot Studio, Inc. Proprietary & Confidential   6
7
8
Hot Studio is an experience design company
that creates new ways for people to interact
with products, services, and people




                                               8
© 2010 Hot Studio, Inc. Proprietary & Confidential | 11/03/10 Electronic Arts + Hot Studios
© 2010 Hot Studio, Inc. Proprietary & Confidential
11
© 2011 Hot Studio, Inc. Proprietary & Confidential
13
14
15
16
17
© 2011 Hot Studio, Inc. Proprietary & Confidential
© 2011 Hot Studio, Inc. Proprietary & Confidential
© 2011 Hot Studio, Inc. Proprietary & Confidential
21
22
23
23
23
24
25
25
25
25
Tablets: the hardware and the operating systems
(and important features to exploit!)




 © 2011 Hot Studio, Inc. Proprietary & Confidential   26
Motorola Xoom
                                             Galaxy
 iPad




RIM Playbook                   Kindle Fire

                                                      27
HP TouchPad with Android!
HTC Flyer     (WebOS not totally dead)




Dell Streak

                                          28
HP TouchPad with Android!
HTC Flyer     (WebOS not totally dead)




Dell Streak

                                          28
Smart use of device hardware!   Cameras (front & back)

What are some
                                Accelerometer & Gyroscope
of the ways you
can use these                   Speaker

features?
                                Headphone jack


                                Microphone


                                Multi-touch color display (‘Retina Display’ iPad 3)


                                WiFi & 3G


                                Home & Volume & Locking buttons


                                Cover/stand
                                                                                      29
Smart use of device hardware!   Cameras (front & back)
                                 • Augmented Reality • Photo/Video • Optical recognition
What are some
                                Accelerometer & Gyroscope
of the ways you                  • Orientation • Motion detection • Speed based control

can use these                   Speaker
                                 • Input response • Audio listening • Conferencing
features?
                                Headphone jack
                                 • Private listening • Video conferencing

                                Microphone
                                 • Voice/sound commands • Audio Recording

                                Multi-touch color display (‘Retina Display’ iPad 3)
                                 • System & custom gestures • Custom gestures • Reading

                                WiFi & 3G
                                 • Dynamic content • txt, email, video

                                Home & Volume & Locking buttons
                                 • Dynamic content • txt, email, video

                                Cover/stand
                                 • Sit back experience • Hands free viewing
                                                                                      30
Operating systems - strengths & weaknesses

iOS — Apple




Strengths
                                                      Weaknesses
‣ Quality control, from device thru OS
‣ Industry leader:~68% market share                   ‣ Tightly controlled & restricted
 (9.25M sold just last quarter!)                      ‣ Expensive device
‣ 100K+ apps already available                        ‣ No Flash support
‣ Growing support for developers                      ‣ Apple gets 30% of in app revenue
‣ iOS 5 expected any day!                             ‣ Cocoa developers are hard to find
  © 2011 Hot Studio, Inc. Proprietary & Confidential                                        31
Operating systems - strengths & weaknesses

iOS — Apple
                “Apple and our customers place a high
                value on simple, refined, creative, well
                thought through interfaces. They take
                more work but are worth it... if your UI is
Strengths
        complex device thru OS
                       or less than very good, it may
                                    Weaknesses
‣Quality control, from
                                                            ‣ Tightly controlled & restricted
         be rejected”
‣ Industry leader:~68% market share
 (9.25M sold just last quarter!)                            ‣ Expensive device
                                                      — iTunes App Store review guidelines
‣ 100K+ apps already available                              ‣ No Flash support
                                                        (as noted in ‘From Idea to App’: Shawn Welch)


‣ Growing support for developers                            ‣ Apple gets 30% of in app revenue
‣ iOS 5 expected any day!                                   ‣ Cocoa developers are hard to find
  © 2011 Hot Studio, Inc. Proprietary & Confidential                                                     32
Operating systems - strengths & weaknesses

Android — Google




Motorola Xoom
                                                           Kindle Fire
Strengths                                             Weaknesses
‣ Runner up (~26% market share)                       ‣ True tablet OS still in infancy
‣ Open source                                         ‣ Fewer tablet apps
‣ Available on range of devices & prices              ‣ Fragmented UI and dev standards
‣ Can support Flash


  © 2011 Hot Studio, Inc. Proprietary & Confidential                                       33
Operating systems - strengths & weaknesses

BlackBerry Tablet OS
RIM




Strengths                                             Weaknesses
‣ Credibility of Blackberry                           ‣ So far only 5% of the market
‣ BlackBerry widely adopted in                        ‣ Limited apps
 business world




  © 2011 Hot Studio, Inc. Proprietary & Confidential                                    34
Browser based apps
Safari, Firefox for Android, Opera for Tablets, etc.




Strengths                                                     Weaknesses
‣ Build using html 5. Large developer base!                   ‣ Mostly does not perform as
                                                               fast as native apps
‣ Outside Apple’s app store and it’s revenue sharing
  Control your marketing!                                     ‣ Inconsistent user experience,
                                                               and level of quality
‣ Not required to be within Apple’s design, content & build
  requirements                                                ‣ Can not always use all
                                                               hardware of the device
‣ Works across platforms - most laptops and tablets
‣ Avoids costs of building for multiple platforms
  © 2011 Hot Studio, Inc. Proprietary & Confidential                                      35
Pop Quiz


Who invented touch technology?


A) Sam Hurst

B) E.A. Johnson

C) Johnny Ives

D) Thomas Edison

E) Al Gore



 © 2011 Hot Studio, Inc. Proprietary & Confidential   36
Pop Quiz


Answer....



Wikipedia: The first touch screen was a capacitive touch screen developed by
E.A. Johnson at the Royal Radar Establishment, Malvern, UK. The inventor
briefly described his work in a short article published in 1965[5] and then more
fully - along with photographs and diagrams - in an article published in 1967.[6]
A description of the applicability of the touch technology for air traffic control
was described in an article published in 1968.[7]
Note: Contrary to many accounts,[8] while Dr. Sam Hurst played an important
role in the development of touch technologies, he neither invented the first
touch sensor, nor the first touch screen.



  © 2011 Hot Studio, Inc. Proprietary & Confidential                            37
Cool Apps!
Five apps that kick ass




  © 2011 Hot Studio, Inc. Proprietary & Confidential   38
What is cool?

Impact                       Context                    Craft
• Practical purpose of app   • The geography,           • Design of the UI.
                              situation, & culture in    Presentation & emotional
• Positive impact on          which the app lives        content
 people, society, the
 environment & business      • The relevance of the     • Elegance in language,
                              problem it addresses,      functionality & ease of
                              the timeliness             usability
                                                        • Overall performance




                                                                                  39
Categories of apps

 • Books & magazines
 • Socializing
 • Educational/learning
 • Financial management
 • Health & exercise
 • Games
 • Sports & Entertainment
 • Business
 • Music: listening and composing
 • News and weather
 • Travel
 • Shopping
 • _________?
                                    40
Flipboard    DropList




ABC Player   Zillow
                        41
Discovery Channel   Gilt: JetSetter




                                      42
Google Earth App   ESPN ScoreCenter XL




                                         43
What, where, when, and why an app makes sense
EXERCISE 1: Coming up with your big idea




 © 2011 Hot Studio, Inc. Proprietary & Confidential   44
Finding a need




                 45
Finding a need

• What does a person want/need to do?




                                        45
Finding a need

• What does a person want/need to do?
• Is a tablet app appropriate for the context of the user?
  Away from the o ce, home? (shopping, planning, playing, socializing)




                                                                         45
Finding a need

• What does a person want/need to do?
• Is a tablet app appropriate for the context of the user?
  Away from the o ce, home? (shopping, planning, playing, socializing)

• Content must fit the context
  Can they access content, and data, ‘just at the right time‘




                                                                         45
Finding a need

• What does a person want/need to do?
• Is a tablet app appropriate for the context of the user?
  Away from the o ce, home? (shopping, planning, playing, socializing)

• Content must fit the context
  Can they access content, and data, ‘just at the right time‘

• Is there an even larger opportunity?
  Laptop, TV, mobile, tablet, appliance, as well as physical spaces.
  (a digital eco-system!)




                                                                         45
Finding a need

• What does a person want/need to do?
• Is a tablet app appropriate for the context of the user?
  Away from the o ce, home? (shopping, planning, playing, socializing)

• Content must fit the context
  Can they access content, and data, ‘just at the right time‘

• Is there an even larger opportunity?
  Laptop, TV, mobile, tablet, appliance, as well as physical spaces.
  (a digital eco-system!)

• Can it be useful, engaging, and intuitive... from the very first time!




                                                                          45
Exercise 1: defining a need




                             46
Exercise 1: defining a need

1. What problem does it solve? What is the opportunity?
   (what ‘un-met need’ have you identified)




                                                          46
Exercise 1: defining a need

1. What problem does it solve? What is the opportunity?
   (what ‘un-met need’ have you identified)

2. Who are the people that will use it?




                                                          46
Exercise 1: defining a need

1. What problem does it solve? What is the opportunity?
   (what ‘un-met need’ have you identified)

2. Who are the people that will use it?

3. Where is it used? In home, o ce, shopping, out & about?




                                                             46
Exercise 1: defining a need

1. What problem does it solve? What is the opportunity?
   (what ‘un-met need’ have you identified)

2. Who are the people that will use it?

3. Where is it used? In home, o ce, shopping, out & about?

4. How does it get paid for? What is the business model?




                                                             46
Big idea example:

                    Example: Marathon Coach App
                    1. No great tablet apps that help people improve
                       their running performance.

                      People need a way to track and share their
                      data with coaches and/or friends, get advice
                      about techniques, work-outs, and equipment.
                      Create a training plans and evaluate progress.
                    2. For new and experienced marathon runners,
                       and coaches that have tablet, mobile & laptop
                    3. Home for planning, and at the track for
                       coaching and data capture
                    4. App is free, but charge for training plans,
                       coaching service, and advanced content.




                                                                     47
Big idea example:

                          Example: Marathon Coach App
                          1. No great tablet apps that help people improve
                             their running performance.

                            People need a way to track and share their
                            data with coaches and/or friends, get advice
                            about techniques, work-outs, and equipment.
                            Create a training plans and evaluate progress.
                          2. For new and experienced marathon runners,
                             and coaches that have tablet, mobile & laptop
                          3. Home for planning, and at the track for
                             coaching and data capture
                          4. App is free, but charge for training plans,
                             coaching service, and advanced content.




              You’ve got 10 minutes.... go!
                                                                           47
Top 10 considerations for designing tablet experiences
plus hundreds of others




 © 2011 Hot Studio, Inc. Proprietary & Confidential       48
Consideration: 10


Consistent interactions
Take advantage of what
people already know!
• Established user
 interactions should be
 used... unless, an interaction
 requires something truly
 unique
• Carefully consider when
 conforming or diverging
 from the native iOS UI
 elements




                                  49
Consideration: 10


Consistent interactions
Take advantage of what
people already know!
• Established user
 interactions should be
 used... unless, an interaction
 requires something truly
 unique
• Carefully consider when
 conforming or diverging
 from the native iOS UI
 elements




                                  49
Consideration: 9


Direct manipulation
• Allow users to manipulate
  objects directly on the screen
• Avoid editing palettes — and
  typing
• Don’t overload the user with
  irrelevant options (keep it
  simple: hide anything that
  doesn’t apply)




                                   Image ‘borrowed’ from Ron Peterson
                                                           50
Consideration: 9


Direct manipulation
• Allow users to manipulate
  objects directly on the screen
• Avoid editing palettes — and
  typing
• Don’t overload the user with
  irrelevant options (keep it
  simple: hide anything that
  doesn’t apply)




                                   Image ‘borrowed’ from Ron Peterson
                                                           50
Consideration: 8


A ordances
There are no rollovers on tablets - links,
buttons, and all other controls must have
plenty of a ordance
• Fingertips are larger than mouse
  cursors




                                             51
Consideration: 7


Behaviors & Transitions
User feedback is critical. Tablet UI’s are
expected to be responsive. When a user
does something, the interface should
acknowledge the input.

                transition animation     —   gesture animation




                                                                 52
Consideration: 7


Behaviors & Transitions
User feedback is critical. Tablet UI’s are          These are the little
expected to be responsive. When a user
does something, the interface should              things that make it fun!
acknowledge the input.

                transition animation     —   gesture animation




                                                                        52
Consideration: 7


Behaviors & Transitions

Aspects to consider:
   • How does it start and end?
   • What arc does it follow?
   • What are the levels of opacity?
   • Does it flip?
   • Does it rotate?
   • Does it pulse?
   • Does it wiggle?

                                       53
3. Opening/Closing Stacks




         This direction takes a different approach than the first for stacks. Tapping on a stack...
...makes it appear centered in the screen...
...overshooting....
...and settling back into its final size.
This stack can be closed by tapping the “Back to [courseName]” button in the upper right corner. Here, it is
shown with vertically scrollable content, but the size of the stack window could be made to vary to
accomodate up to a certain number of child objects.
© 2011 Hot Studio, Inc. Proprietary & Confidential
Consideration: 6


Resolution & screen dimension
Accommodating resolution of the device. Plus, how
does it compare to your authoring environment?




                                                    60
Consideration: 6


Resolution & screen dimension
Accommodating resolution of the device. Plus, how
does it compare to your authoring environment?



A few details:

• Your assets will need to be both 163 ppi AND 326ppi for
  retina display. (and 72dpi for desktop displays)
• Need high-resolution versions of bitmaps - or use vectors
  (adding @2x to the ends of your image names)
• Image compression has to be done carefully due to high
  rez screens
• Web based apps should have liquid interfaces to
  accommodate variety of device screen dimensions

                                                              61
Consideration: 6


Resolution & screen dimension
Accommodating resolution of the device. Plus, how
does it compare to your authoring environment?




                                                    62
Consideration: 5


Layout flexibility
Are the functions, and content making the best
use of the device orientation?

• Work mode common in landscape. Lean-back
  read in portrait

• ‘Responsive web’ design (new CSS & JS
   standards support SVG and bitmap)




                                                 63
Consideration: 4


Involve your users!
Understand their needs &
tasks
Spend time showing your concepts
and prototypes to your target users.
• What is the user trying to do?
• Analyze the users tasks and needs
 and keep your design focused




                                       64
Consideration: 3


Audience motivation to learn UI

The casual novice tablet user vs. the
highly motivated tab geek.




                                        65
Consideration: 2


Content delivery
Keep your app alive with fresh content.
You must know the source of the data.
• Is your app connected?
• Does it rely on live download?
• Early on, you must know and secure
 your data source. (Open API, proprietary
 content, partnerships, etc.)




                                            66
Consideration: 1


Backwards compatible
Is your app on supported devices
Does your app require device
hardware that is not available on
earlier versions of the device




                                    67
Break time!

...be back at 10:40 sharp



        10:20am - 10:40am
                            68
Obligatory Dilbert cartoon




                             69
Welcome back!

...letʼs keep working on
          your app


          10:40am
                           70
User scenarios
EXERCISE #2: Thinking through the full context of your app




 © 2011 Hot Studio, Inc. Proprietary & Confidential           71
Storyboard context

App is just part of a bigger
experience.

Storyboarding the scenario:
• Before — During — After — Repeat
• The ‘eco-system’ around your app




                                     72
73
74
75
Exercise 2: Storyboard context
Illustrate, as a storyboard, the full context of a person
using your application. (location, people, situation, etc.)




Consider:
• Where they are in their day?
• With whom they are interacting?
• Are there other devices to sync with?
• Is the data saved or shared or downloaded?


                                                              76
77
You’ve got 10 minutes.... go!




                                77
Who wants to share what
 they’ve come up with?




                          78
Features, Functionality, and Content
EXERCISE #3: The functions and content of your app




 © 2011 Hot Studio, Inc. Proprietary & Confidential   79
Exercise 3:
The core features and
content of your app

• Yellow sticky = a feature
• Orange sticky = a content ‘type’




                                     80
Exercise 3:
The core features and
content of your app

• Yellow sticky = a feature
• Orange sticky = a content ‘type’




You’ve got 12 minutes.... go!




                                     80
Gestures
Rather than mouse or keyboard events, the tablet
experience is based on touch events.
Let’s look at common and un-common ways to navigate.




 © 2011 Hot Studio, Inc. Proprietary & Confidential     81
Core iOS touches ‘gestures’:   Custom gestures:
                               (using the UITapGestureRecognizer)
• Tap
                               • Rotate
• Drag
                               • Bump
• Flick
                               • Long hold/press
• Swipe
                               • Multi-touch
• Double-Tap
• Pinch Open/Close
• Touch & Hold
• Shake




                                                                    82
When to pan or scroll or swipe?

How does information flow and overflow? (carding, scrolling, accordion)




                                                                        83
When to pan or scroll or swipe?

How does information flow and overflow? (carding, scrolling, accordion)




                                                                        83
Annotation of gestures




                         84
Annotation of gestures
Designing for Tablet Experiences (Henrik Olsen)
Annotation of gestures




                         87
Tools for the designer
Digital + Analog




  © 2011 Hot Studio, Inc. Proprietary & Confidential   88
Tools used for designing a tablet experience

Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra e
• Illustrator
• InDesign
Tools used for designing a tablet UI

Experience Design
• Whiteboard & sketch paper
• Visio - from MicroSoft
• OmniGra e
• Illustrator
• InDesign




                                       90
Tools used for designing a tablet UI

Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra e 5
• Illustrator
• InDesign




                                       91
Tools used for designing a tablet UI

Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra e 5
• Illustrator
• InDesign




                                       92
Tools used for designing a tablet UI

Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra e 5
• Illustrator
• InDesign




                                       93
Tools used for designing a tablet UI

Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks




                                       94
Tools used for designing a tablet UI

Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks




                                       95
Tools used for designing a tablet UI

Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks




                                       96
Tools used for designing a tablet UI

Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks




                                       97
Tools used for designing a tablet UI

Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks




                                       98
Why Prototype?




Iterative design process:




             ideas          make   learn validate


                                                    99
Why Prototype?

    • Allows you to fine tune you ideas and interactions
      (Revealing those unexpected gaps)




Iterative design process:




             ideas          make   learn validate


                                                          99
Why Prototype?

    • Allows you to fine tune you ideas and interactions
      (Revealing those unexpected gaps)


    • Bring your ideas to life.... quickly sketching



Iterative design process:




             ideas          make    learn validate


                                                          99
Why Prototype?

    • Allows you to fine tune you ideas and interactions
      (Revealing those unexpected gaps)


    • Bring your ideas to life.... quickly sketching

    • See the choreography of your transitions and screen states

Iterative design process:




             ideas          make    learn validate


                                                               99
Tools for prototyping




GoodReader (PDFs)         Picture Link - iPDF                MinimalFolio




                                +              + ‘Wallaby’

Apple Keynote       Fireworks        Flash        coming
                                    Catalyst      soon:




                                                                            100
Core UI resources are available




                                  101
Resources for visual designers
Core UI graphic assets available: teehanlax.com/blog




                                                       102
Resources for visual designers
Core UI graphic assets available: teehanlax.com/blog




                                                       103
Resources for visual designers
High quality visual interface stock sites:




                                             104
Resources for visual designers
High quality visual interface stock sites:




                                             104
Resources for visual designers
High quality visual interface stock sites:




                                             104
Resources for visual designers
High quality visual interface stock sites:




                                             104
Development - very briefly!




                             Important:

                             Make friends with a developer!



                             Someone who can work with Apple’s
                             Software Development Kit (SDK):

                             Xcode 4 (development environment)
                                   - Interface Builder
                                   - Instruments
                                   - iOS Simulator
                                   - See: developer.apple.com

                                                                105
Annotated wireframes & layered PSDs:




                                       106
Annotated wireframes & layered PSDs:




                                       106
Flows & wireframes
EXERCISE 4: Tablet app interface sketch




 © 2011 Hot Studio, Inc. Proprietary & Confidential   107
User flow




           108
109
110
111
App map
                                      Load
                                   (animation)




           Share Network              Home                   Search
                                    Dashboard            Search for topics
            FB, Twitter, etc.
                                   (timeline view
                                   & select topics)




          Related Article          News Article               Profile
          (text, image, video)   (text, image, video)   Preferences, account
                                                               info.,




                                    Shopping              Partner Sites
                                  related products           additional
                                                              content




                                                                               112
113
Sketching
                     Magazine App for iPad
                                                                                features:
             Help                              Log In

                                                                                - Show new magazine titles
                                                                                - Magazine shop
                                                                                - Library of users
                                                                                  magazines
                              Featured                         User will
                                                             swip through
                                                                                - Show upcoming events -
                              Magazines                        a variety
                                                              of covers
                                                                                  calendar
                           <- Cover shots ->                                    - User generated content
                                                                                  (reviews, comments, etc)
                                                                                - Facebook integration
                                                                                - Twitter stream
                  Your           Full        Facebook
                 Library     Magazine Shop    Twitter        User can post
                                                              to FB if they
   User can                                             like an article or title.
  get to the                                             Or, they can tweet if
magazines they                                             they an interesting
 already own                                                      point
                                                                                                         114
Exercise #4: Features & Functionality mapping



Step A:
Organize the content and functions onto the provided ‘Post-its’—
organize them on the blank sheet(s)


Step B:
With pencil, sketch on the ‘paper iPads’ the ‘main’ screen layouts
— with appropriate functions & content.




                                                                115
Exercise #4: Features & Functionality mapping



Step A:
Organize the content and functions onto the provided ‘Post-its’—
organize them on the blank sheet(s)


Step B:
With pencil, sketch on the ‘paper iPads’ the ‘main’ screen layouts
— with appropriate functions & content.


             You’ve got about 15 minutes.... go!

                                                                115
Who wants to share what
 they’ve come up with?




                          116
Team & Process
More than one way to approach




 © 2011 Hot Studio, Inc. Proprietary & Confidential   117
The team
Collaboration of a   Project Manager
multi-disciplined
team is critical     User Experience


                     Visual Designer



                            Content    Users


                           Engineer


                              Client




                                        118
Process (waterfall)




    User Experience                            Visual Design                         Engineering




                                          Project Management


Discovery                    Strategy                    Design                  Build
• Customer / Market          • Persona development       •   Screen schematics   • Style guide
    Research                 • Content needs analysis    •   Visual design       • Manage dev team
•   Stakeholder interviews   • Feature prioritization    •   User testing        • Collaborate with
                             • Key schematics & IA       •   Design refinement      dev team
•   Existing apps audit
                               Visual design workshop    •   Design extension    • QA & testing
•   Interview target users
                             • Business & technical      •   Development            throughout the
•   Competitive audit                                        planning
                               requirements                                         development
•   Technology discovery     • User concept testing                                 process


                                                                                                      119
Sample of project flow for simple tablet app
 • Conduct a Discovery work session to understand you business and design
   goals for the project

 • Review your content offering and develop a design approach that best
   leverages content

 • Conduct an evaluation of 5-7 competitors and/or other brands

 • Develop an interaction model for the content and high level interaction design

 • Wire frame review over the course of our strategy and design phases

 • Several visual design concepts that reflect a range of approaches

 • Based on the selection of 1 of the visual design directions extend that direction
   across the additional screens and dialogs the application will require.

 • Work with developer during development




                                                                                       120
IF we have time left...
A few basics of getting your app into the app store




  © 2011 Hot Studio, Inc. Proprietary & Confidential   121
A few reasons for rejection from Apple App Store




                                                   122
A few reasons for rejection from Apple App Store
 • Not following Apple’s Interface Guidelines

 • Lack of rights to content or brands presented in your app

 • Insu cient error messaging. Spinning ball does not su ce!

 • Political lampooning

 • App crashing

 • Violating patented UI patterns... coverflow, for example

 • Contests and/or sweepstakes

 • Poor handling of user info

 • Apps that are primarily for serving ads

 • Objectionable content... nudity

 • Transactions outside the app store
                                                               122
Thank you!

Hot Studio Inc.
585 Howard Street
1st Floor
San Francisco, CA 94105
415.284.7250

520 Broadway, 8th Floor
New York NY 10012
212.242.1082



hotstudio.com
hottub.hotstudio.com
twitter.com/hotstudio
facebook.com/hotstudio

More Related Content

What's hot

Mobile & Wearables Games for Health 2014 Tutorial
Mobile & Wearables Games for Health 2014 TutorialMobile & Wearables Games for Health 2014 Tutorial
Mobile & Wearables Games for Health 2014 TutorialGames for Health Project
 
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...Fabien Marry
 
Web and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingWeb and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingTechWell
 
Adobe Max Modern iPhone App Design with Rick Messer
Adobe Max Modern iPhone App Design with Rick MesserAdobe Max Modern iPhone App Design with Rick Messer
Adobe Max Modern iPhone App Design with Rick MesserRick Messer
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success enAcrmnet s.r.l.
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)Mohammad Khalil
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Indiginox
 
Mobile Technologies and Adobe
Mobile Technologies and AdobeMobile Technologies and Adobe
Mobile Technologies and AdobeJoseph Labrecque
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application DevelopmentTharindu Dassanayake
 
MTC 2010 - Android Tablet Development
MTC 2010 - Android Tablet DevelopmentMTC 2010 - Android Tablet Development
MTC 2010 - Android Tablet DevelopmentWolfgang Frank
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?Sura Gonzalez
 
Mobile applications chapter 5
Mobile applications chapter 5Mobile applications chapter 5
Mobile applications chapter 5Akib B. Momin
 
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web AppsMobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web AppsPaul Sons
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App DevelopmentChris Morrell
 
Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013Henny Swan
 
Mobile product - "Build great apps!" at ProductTank Paris #17
Mobile product - "Build great apps!" at ProductTank Paris #17Mobile product - "Build great apps!" at ProductTank Paris #17
Mobile product - "Build great apps!" at ProductTank Paris #17Alexandre Jubien
 
Introduction to Mobile Development
Introduction to Mobile DevelopmentIntroduction to Mobile Development
Introduction to Mobile DevelopmentPragnesh Vaghela
 

What's hot (20)

iOS App Development and Marketing
iOS App Development and MarketingiOS App Development and Marketing
iOS App Development and Marketing
 
Mobile & Wearables Games for Health 2014 Tutorial
Mobile & Wearables Games for Health 2014 TutorialMobile & Wearables Games for Health 2014 Tutorial
Mobile & Wearables Games for Health 2014 Tutorial
 
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
 
Web and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingWeb and Mobile App Accessibility Testing
Web and Mobile App Accessibility Testing
 
Mobile Strategy
Mobile StrategyMobile Strategy
Mobile Strategy
 
Adobe Max Modern iPhone App Design with Rick Messer
Adobe Max Modern iPhone App Design with Rick MesserAdobe Max Modern iPhone App Design with Rick Messer
Adobe Max Modern iPhone App Design with Rick Messer
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
 
Apple WWDC 2018
Apple WWDC 2018Apple WWDC 2018
Apple WWDC 2018
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?
 
Mobile Technologies and Adobe
Mobile Technologies and AdobeMobile Technologies and Adobe
Mobile Technologies and Adobe
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
MTC 2010 - Android Tablet Development
MTC 2010 - Android Tablet DevelopmentMTC 2010 - Android Tablet Development
MTC 2010 - Android Tablet Development
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?
 
Mobile applications chapter 5
Mobile applications chapter 5Mobile applications chapter 5
Mobile applications chapter 5
 
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web AppsMobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web Apps
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013
 
Mobile product - "Build great apps!" at ProductTank Paris #17
Mobile product - "Build great apps!" at ProductTank Paris #17Mobile product - "Build great apps!" at ProductTank Paris #17
Mobile product - "Build great apps!" at ProductTank Paris #17
 
Introduction to Mobile Development
Introduction to Mobile DevelopmentIntroduction to Mobile Development
Introduction to Mobile Development
 

Viewers also liked

Packaging Operations, Singapore, IPT West Tablet Facility
Packaging Operations, Singapore,  IPT West Tablet FacilityPackaging Operations, Singapore,  IPT West Tablet Facility
Packaging Operations, Singapore, IPT West Tablet FacilityMark Stevens
 
Indian patent act 1970
Indian patent act 1970Indian patent act 1970
Indian patent act 1970Akashwani
 
Patent act 1970 with amendment
Patent act 1970 with amendmentPatent act 1970 with amendment
Patent act 1970 with amendmentAminu Kende
 
patent act 1970 ppt by srota dawn
patent act 1970 ppt by srota dawnpatent act 1970 ppt by srota dawn
patent act 1970 ppt by srota dawnSrota Dawn
 
Indian patent act 1970
Indian patent act 1970Indian patent act 1970
Indian patent act 1970Sagar Savale
 
Indian Patent act, 20 feb
Indian Patent act, 20 febIndian Patent act, 20 feb
Indian Patent act, 20 febjyothics
 
Mohit dra patent act amentment ppt
Mohit dra patent act amentment pptMohit dra patent act amentment ppt
Mohit dra patent act amentment pptMOHIT KUMAR VERMA
 
Water supply system
Water supply systemWater supply system
Water supply systemaishah
 
The indian patent act 1970
The indian patent act   1970The indian patent act   1970
The indian patent act 1970Shankar Yelmame
 
Stability studies ICH Q1A-Q1E Guidelines ppt
Stability studies ICH Q1A-Q1E Guidelines pptStability studies ICH Q1A-Q1E Guidelines ppt
Stability studies ICH Q1A-Q1E Guidelines pptAman K Dhamrait
 

Viewers also liked (20)

Packaging Operations, Singapore, IPT West Tablet Facility
Packaging Operations, Singapore,  IPT West Tablet FacilityPackaging Operations, Singapore,  IPT West Tablet Facility
Packaging Operations, Singapore, IPT West Tablet Facility
 
Indian patent act 1970
Indian patent act 1970Indian patent act 1970
Indian patent act 1970
 
Para i iv orange book
Para i iv orange bookPara i iv orange book
Para i iv orange book
 
Patent act
Patent actPatent act
Patent act
 
Patent act 1970 with amendment
Patent act 1970 with amendmentPatent act 1970 with amendment
Patent act 1970 with amendment
 
patent act 1970 ppt by srota dawn
patent act 1970 ppt by srota dawnpatent act 1970 ppt by srota dawn
patent act 1970 ppt by srota dawn
 
Indian patent act 1970
Indian patent act 1970Indian patent act 1970
Indian patent act 1970
 
Patnt act
Patnt actPatnt act
Patnt act
 
Teori Kinetik Gas - Zainal Abidin
Teori Kinetik Gas - Zainal AbidinTeori Kinetik Gas - Zainal Abidin
Teori Kinetik Gas - Zainal Abidin
 
Indian Patent act, 20 feb
Indian Patent act, 20 febIndian Patent act, 20 feb
Indian Patent act, 20 feb
 
Mohit dra patent act amentment ppt
Mohit dra patent act amentment pptMohit dra patent act amentment ppt
Mohit dra patent act amentment ppt
 
Indian Patent act 1970
Indian Patent act 1970Indian Patent act 1970
Indian Patent act 1970
 
WATER SUPPLY SYSTEM
WATER SUPPLY SYSTEM WATER SUPPLY SYSTEM
WATER SUPPLY SYSTEM
 
Patent ppt
Patent pptPatent ppt
Patent ppt
 
Tablets
TabletsTablets
Tablets
 
The patent act
The patent actThe patent act
The patent act
 
Water supply system
Water supply systemWater supply system
Water supply system
 
Indian patent act
Indian patent actIndian patent act
Indian patent act
 
The indian patent act 1970
The indian patent act   1970The indian patent act   1970
The indian patent act 1970
 
Stability studies ICH Q1A-Q1E Guidelines ppt
Stability studies ICH Q1A-Q1E Guidelines pptStability studies ICH Q1A-Q1E Guidelines ppt
Stability studies ICH Q1A-Q1E Guidelines ppt
 

Similar to Designing for Tablet Experiences (Henrik Olsen)

Android : Evolution or Revolution
Android : Evolution or RevolutionAndroid : Evolution or Revolution
Android : Evolution or RevolutionSanjiv Malik
 
Pass the i pad please - 5 Lessons for Creating Great Tablet Experiences
Pass the i pad please - 5 Lessons for Creating Great Tablet ExperiencesPass the i pad please - 5 Lessons for Creating Great Tablet Experiences
Pass the i pad please - 5 Lessons for Creating Great Tablet ExperiencesAnswerLab
 
User Experience Design for Embedded Devices
User Experience Design for Embedded DevicesUser Experience Design for Embedded Devices
User Experience Design for Embedded DevicesICS
 
Extending softwareintomobile 11 28-2012
Extending softwareintomobile 11 28-2012Extending softwareintomobile 11 28-2012
Extending softwareintomobile 11 28-2012CorSource
 
Ibm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsIbm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsMark Roden
 
Addressing Mobile App Testing Challenges
Addressing Mobile App Testing ChallengesAddressing Mobile App Testing Challenges
Addressing Mobile App Testing ChallengesLee Barnes
 
A research on i pad device & experience design
A research on i pad   device & experience designA research on i pad   device & experience design
A research on i pad device & experience designVinny Wu
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseApperian
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPKeyLimeTie
 
RAD Studio XE5 in Action Tech Preview
RAD Studio XE5 in Action Tech PreviewRAD Studio XE5 in Action Tech Preview
RAD Studio XE5 in Action Tech PreviewSoftline
 
Android Oreo - An Introduction
Android Oreo - An Introduction Android Oreo - An Introduction
Android Oreo - An Introduction Somo
 
iOS' Travels in the Enterprise
iOS' Travels in the EnterpriseiOS' Travels in the Enterprise
iOS' Travels in the EnterpriseIan Thain
 
Android application development
Android application developmentAndroid application development
Android application developmentFahad A. Shaikh
 
Exploring the right business strategy for open source mobile platforms
Exploring the right business strategy for open source mobile platformsExploring the right business strategy for open source mobile platforms
Exploring the right business strategy for open source mobile platformsAmanda Lam
 
Mobile apps idea to making money
Mobile apps   idea to making moneyMobile apps   idea to making money
Mobile apps idea to making moneyDavid Bozward
 

Similar to Designing for Tablet Experiences (Henrik Olsen) (20)

Android : Evolution or Revolution
Android : Evolution or RevolutionAndroid : Evolution or Revolution
Android : Evolution or Revolution
 
Pass the i pad please - 5 Lessons for Creating Great Tablet Experiences
Pass the i pad please - 5 Lessons for Creating Great Tablet ExperiencesPass the i pad please - 5 Lessons for Creating Great Tablet Experiences
Pass the i pad please - 5 Lessons for Creating Great Tablet Experiences
 
Win 8 webinar
Win 8 webinarWin 8 webinar
Win 8 webinar
 
User Experience Design for Embedded Devices
User Experience Design for Embedded DevicesUser Experience Design for Embedded Devices
User Experience Design for Embedded Devices
 
Extending softwareintomobile 11 28-2012
Extending softwareintomobile 11 28-2012Extending softwareintomobile 11 28-2012
Extending softwareintomobile 11 28-2012
 
Ibm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsIbm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applications
 
Addressing Mobile App Testing Challenges
Addressing Mobile App Testing ChallengesAddressing Mobile App Testing Challenges
Addressing Mobile App Testing Challenges
 
A research on i pad device & experience design
A research on i pad   device & experience designA research on i pad   device & experience design
A research on i pad device & experience design
 
WWDC 2020
WWDC 2020WWDC 2020
WWDC 2020
 
Mobile Development: Case Studies @ WhiteHedge
Mobile Development: Case Studies @ WhiteHedgeMobile Development: Case Studies @ WhiteHedge
Mobile Development: Case Studies @ WhiteHedge
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
 
RAD Studio XE5 in Action Tech Preview
RAD Studio XE5 in Action Tech PreviewRAD Studio XE5 in Action Tech Preview
RAD Studio XE5 in Action Tech Preview
 
INTEL - Workshop HTML5
INTEL - Workshop HTML5 INTEL - Workshop HTML5
INTEL - Workshop HTML5
 
Android Oreo - An Introduction
Android Oreo - An Introduction Android Oreo - An Introduction
Android Oreo - An Introduction
 
iOS' Travels in the Enterprise
iOS' Travels in the EnterpriseiOS' Travels in the Enterprise
iOS' Travels in the Enterprise
 
Android application development
Android application developmentAndroid application development
Android application development
 
Exploring the right business strategy for open source mobile platforms
Exploring the right business strategy for open source mobile platformsExploring the right business strategy for open source mobile platforms
Exploring the right business strategy for open source mobile platforms
 
Mobile apps idea to making money
Mobile apps   idea to making moneyMobile apps   idea to making money
Mobile apps idea to making money
 

More from Autodesk

Remaking the Making Company
Remaking the Making CompanyRemaking the Making Company
Remaking the Making CompanyAutodesk
 
The Rise of the DEO: Innovation Starts at the Top
The Rise of the DEO: Innovation Starts at the TopThe Rise of the DEO: Innovation Starts at the Top
The Rise of the DEO: Innovation Starts at the TopAutodesk
 
The Rise of the DEO (Maria Giudice)
The Rise of the DEO (Maria Giudice)The Rise of the DEO (Maria Giudice)
The Rise of the DEO (Maria Giudice)Autodesk
 
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)Autodesk
 
Collaboration 2011 (Maria Giudice)
Collaboration 2011 (Maria Giudice)Collaboration 2011 (Maria Giudice)
Collaboration 2011 (Maria Giudice)Autodesk
 
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)Autodesk
 
Thinking Inside the Box: Using Personas to Prioritize Content
Thinking Inside the Box: Using Personas to Prioritize ContentThinking Inside the Box: Using Personas to Prioritize Content
Thinking Inside the Box: Using Personas to Prioritize ContentAutodesk
 
Content Publishing
Content PublishingContent Publishing
Content PublishingAutodesk
 
Designing for the Screen
Designing for the ScreenDesigning for the Screen
Designing for the ScreenAutodesk
 
How to Manage a UX Team (without losing your mind!)
How to Manage a UX Team (without losing your mind!)How to Manage a UX Team (without losing your mind!)
How to Manage a UX Team (without losing your mind!)Autodesk
 
Do You Know Who Your Users Are? The Role of Research in Redesigning sfmoma.org
Do You Know Who Your Users Are? The Role of Research in Redesigning sfmoma.orgDo You Know Who Your Users Are? The Role of Research in Redesigning sfmoma.org
Do You Know Who Your Users Are? The Role of Research in Redesigning sfmoma.orgAutodesk
 
Designing Like We Give a Damn
Designing Like We Give a DamnDesigning Like We Give a Damn
Designing Like We Give a DamnAutodesk
 
Don’t Go It Alone: Using Collaboration to Solve Creative Design Problems
Don’t Go It Alone: Using Collaboration to Solve Creative Design ProblemsDon’t Go It Alone: Using Collaboration to Solve Creative Design Problems
Don’t Go It Alone: Using Collaboration to Solve Creative Design ProblemsAutodesk
 
Mind the Gap: Measuring the Divide Between 'Us' and 'Them'
Mind the Gap: Measuring the Divide Between 'Us' and 'Them'Mind the Gap: Measuring the Divide Between 'Us' and 'Them'
Mind the Gap: Measuring the Divide Between 'Us' and 'Them'Autodesk
 
Hot Studio 1-Hr Design Challenge submission
Hot Studio 1-Hr Design Challenge submissionHot Studio 1-Hr Design Challenge submission
Hot Studio 1-Hr Design Challenge submissionAutodesk
 
Transit 2.0 at BART.gov
Transit 2.0 at BART.govTransit 2.0 at BART.gov
Transit 2.0 at BART.govAutodesk
 
Cause Marketing Kellogg Marketing Conference 090124
Cause Marketing Kellogg Marketing Conference 090124Cause Marketing Kellogg Marketing Conference 090124
Cause Marketing Kellogg Marketing Conference 090124Autodesk
 
Can't we all get along? Human-centered design meets Agile
Can't we all get along? Human-centered design meets AgileCan't we all get along? Human-centered design meets Agile
Can't we all get along? Human-centered design meets AgileAutodesk
 

More from Autodesk (18)

Remaking the Making Company
Remaking the Making CompanyRemaking the Making Company
Remaking the Making Company
 
The Rise of the DEO: Innovation Starts at the Top
The Rise of the DEO: Innovation Starts at the TopThe Rise of the DEO: Innovation Starts at the Top
The Rise of the DEO: Innovation Starts at the Top
 
The Rise of the DEO (Maria Giudice)
The Rise of the DEO (Maria Giudice)The Rise of the DEO (Maria Giudice)
The Rise of the DEO (Maria Giudice)
 
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
 
Collaboration 2011 (Maria Giudice)
Collaboration 2011 (Maria Giudice)Collaboration 2011 (Maria Giudice)
Collaboration 2011 (Maria Giudice)
 
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
 
Thinking Inside the Box: Using Personas to Prioritize Content
Thinking Inside the Box: Using Personas to Prioritize ContentThinking Inside the Box: Using Personas to Prioritize Content
Thinking Inside the Box: Using Personas to Prioritize Content
 
Content Publishing
Content PublishingContent Publishing
Content Publishing
 
Designing for the Screen
Designing for the ScreenDesigning for the Screen
Designing for the Screen
 
How to Manage a UX Team (without losing your mind!)
How to Manage a UX Team (without losing your mind!)How to Manage a UX Team (without losing your mind!)
How to Manage a UX Team (without losing your mind!)
 
Do You Know Who Your Users Are? The Role of Research in Redesigning sfmoma.org
Do You Know Who Your Users Are? The Role of Research in Redesigning sfmoma.orgDo You Know Who Your Users Are? The Role of Research in Redesigning sfmoma.org
Do You Know Who Your Users Are? The Role of Research in Redesigning sfmoma.org
 
Designing Like We Give a Damn
Designing Like We Give a DamnDesigning Like We Give a Damn
Designing Like We Give a Damn
 
Don’t Go It Alone: Using Collaboration to Solve Creative Design Problems
Don’t Go It Alone: Using Collaboration to Solve Creative Design ProblemsDon’t Go It Alone: Using Collaboration to Solve Creative Design Problems
Don’t Go It Alone: Using Collaboration to Solve Creative Design Problems
 
Mind the Gap: Measuring the Divide Between 'Us' and 'Them'
Mind the Gap: Measuring the Divide Between 'Us' and 'Them'Mind the Gap: Measuring the Divide Between 'Us' and 'Them'
Mind the Gap: Measuring the Divide Between 'Us' and 'Them'
 
Hot Studio 1-Hr Design Challenge submission
Hot Studio 1-Hr Design Challenge submissionHot Studio 1-Hr Design Challenge submission
Hot Studio 1-Hr Design Challenge submission
 
Transit 2.0 at BART.gov
Transit 2.0 at BART.govTransit 2.0 at BART.gov
Transit 2.0 at BART.gov
 
Cause Marketing Kellogg Marketing Conference 090124
Cause Marketing Kellogg Marketing Conference 090124Cause Marketing Kellogg Marketing Conference 090124
Cause Marketing Kellogg Marketing Conference 090124
 
Can't we all get along? Human-centered design meets Agile
Can't we all get along? Human-centered design meets AgileCan't we all get along? Human-centered design meets Agile
Can't we all get along? Human-centered design meets Agile
 

Recently uploaded

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Recently uploaded (19)

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

Designing for Tablet Experiences (Henrik Olsen)

  • 1. Web 2.0 NYC Design for Tablet Experiences | Workshop | Henrik Olsen
  • 2. Goals of this workshop Who: For designers that are new to design for web, mobile, and tablet, as well as those who are at an intermediate level. Why we’re doing this: Share a sense of what makes a good tablet experience, and how you can get started as a tablet app designer We’re all going to learn from each other © 2011 Hot Studio, Inc. Proprietary & Confidential 2
  • 3. Agenda: • Who are we • The hardware and operating systems • Cool apps: top picks and why • When & where an app makes sense - exercise #1 • Top 10 design considerations BREAK • Use scenarios - exercise #2 • Features & functions & content- exercise #3 • Gestures • Tools for designers • Task flows & dashboards - exercise #4 • Project team & ‘a process’ 3
  • 4. What are you hoping to learn, or experience, in this workshop? 4
  • 5. Who are we? Who here has designed a tablet app before? Who here is a professional web designer? 5
  • 6. Where I come from (an experience design firm) © 2011 Hot Studio, Inc. Proprietary & Confidential 6
  • 7. 7
  • 8. 8
  • 9. Hot Studio is an experience design company that creates new ways for people to interact with products, services, and people 8
  • 10. © 2010 Hot Studio, Inc. Proprietary & Confidential | 11/03/10 Electronic Arts + Hot Studios
  • 11. © 2010 Hot Studio, Inc. Proprietary & Confidential
  • 12. 11
  • 13. © 2011 Hot Studio, Inc. Proprietary & Confidential
  • 14. 13
  • 15. 14
  • 16. 15
  • 17. 16
  • 18. 17
  • 19. © 2011 Hot Studio, Inc. Proprietary & Confidential
  • 20. © 2011 Hot Studio, Inc. Proprietary & Confidential
  • 21. © 2011 Hot Studio, Inc. Proprietary & Confidential
  • 22. 21
  • 23. 22
  • 24. 23
  • 25. 23
  • 26. 23
  • 27. 24
  • 28. 25
  • 29. 25
  • 30. 25
  • 31. 25
  • 32. Tablets: the hardware and the operating systems (and important features to exploit!) © 2011 Hot Studio, Inc. Proprietary & Confidential 26
  • 33. Motorola Xoom Galaxy iPad RIM Playbook Kindle Fire 27
  • 34. HP TouchPad with Android! HTC Flyer (WebOS not totally dead) Dell Streak 28
  • 35. HP TouchPad with Android! HTC Flyer (WebOS not totally dead) Dell Streak 28
  • 36. Smart use of device hardware! Cameras (front & back) What are some Accelerometer & Gyroscope of the ways you can use these Speaker features? Headphone jack Microphone Multi-touch color display (‘Retina Display’ iPad 3) WiFi & 3G Home & Volume & Locking buttons Cover/stand 29
  • 37. Smart use of device hardware! Cameras (front & back) • Augmented Reality • Photo/Video • Optical recognition What are some Accelerometer & Gyroscope of the ways you • Orientation • Motion detection • Speed based control can use these Speaker • Input response • Audio listening • Conferencing features? Headphone jack • Private listening • Video conferencing Microphone • Voice/sound commands • Audio Recording Multi-touch color display (‘Retina Display’ iPad 3) • System & custom gestures • Custom gestures • Reading WiFi & 3G • Dynamic content • txt, email, video Home & Volume & Locking buttons • Dynamic content • txt, email, video Cover/stand • Sit back experience • Hands free viewing 30
  • 38. Operating systems - strengths & weaknesses iOS — Apple Strengths Weaknesses ‣ Quality control, from device thru OS ‣ Industry leader:~68% market share ‣ Tightly controlled & restricted (9.25M sold just last quarter!) ‣ Expensive device ‣ 100K+ apps already available ‣ No Flash support ‣ Growing support for developers ‣ Apple gets 30% of in app revenue ‣ iOS 5 expected any day! ‣ Cocoa developers are hard to find © 2011 Hot Studio, Inc. Proprietary & Confidential 31
  • 39. Operating systems - strengths & weaknesses iOS — Apple “Apple and our customers place a high value on simple, refined, creative, well thought through interfaces. They take more work but are worth it... if your UI is Strengths complex device thru OS or less than very good, it may Weaknesses ‣Quality control, from ‣ Tightly controlled & restricted be rejected” ‣ Industry leader:~68% market share (9.25M sold just last quarter!) ‣ Expensive device — iTunes App Store review guidelines ‣ 100K+ apps already available ‣ No Flash support (as noted in ‘From Idea to App’: Shawn Welch) ‣ Growing support for developers ‣ Apple gets 30% of in app revenue ‣ iOS 5 expected any day! ‣ Cocoa developers are hard to find © 2011 Hot Studio, Inc. Proprietary & Confidential 32
  • 40. Operating systems - strengths & weaknesses Android — Google Motorola Xoom Kindle Fire Strengths Weaknesses ‣ Runner up (~26% market share) ‣ True tablet OS still in infancy ‣ Open source ‣ Fewer tablet apps ‣ Available on range of devices & prices ‣ Fragmented UI and dev standards ‣ Can support Flash © 2011 Hot Studio, Inc. Proprietary & Confidential 33
  • 41. Operating systems - strengths & weaknesses BlackBerry Tablet OS RIM Strengths Weaknesses ‣ Credibility of Blackberry ‣ So far only 5% of the market ‣ BlackBerry widely adopted in ‣ Limited apps business world © 2011 Hot Studio, Inc. Proprietary & Confidential 34
  • 42. Browser based apps Safari, Firefox for Android, Opera for Tablets, etc. Strengths Weaknesses ‣ Build using html 5. Large developer base! ‣ Mostly does not perform as fast as native apps ‣ Outside Apple’s app store and it’s revenue sharing Control your marketing! ‣ Inconsistent user experience, and level of quality ‣ Not required to be within Apple’s design, content & build requirements ‣ Can not always use all hardware of the device ‣ Works across platforms - most laptops and tablets ‣ Avoids costs of building for multiple platforms © 2011 Hot Studio, Inc. Proprietary & Confidential 35
  • 43. Pop Quiz Who invented touch technology? A) Sam Hurst B) E.A. Johnson C) Johnny Ives D) Thomas Edison E) Al Gore © 2011 Hot Studio, Inc. Proprietary & Confidential 36
  • 44. Pop Quiz Answer.... Wikipedia: The first touch screen was a capacitive touch screen developed by E.A. Johnson at the Royal Radar Establishment, Malvern, UK. The inventor briefly described his work in a short article published in 1965[5] and then more fully - along with photographs and diagrams - in an article published in 1967.[6] A description of the applicability of the touch technology for air traffic control was described in an article published in 1968.[7] Note: Contrary to many accounts,[8] while Dr. Sam Hurst played an important role in the development of touch technologies, he neither invented the first touch sensor, nor the first touch screen. © 2011 Hot Studio, Inc. Proprietary & Confidential 37
  • 45. Cool Apps! Five apps that kick ass © 2011 Hot Studio, Inc. Proprietary & Confidential 38
  • 46. What is cool? Impact Context Craft • Practical purpose of app • The geography, • Design of the UI. situation, & culture in Presentation & emotional • Positive impact on which the app lives content people, society, the environment & business • The relevance of the • Elegance in language, problem it addresses, functionality & ease of the timeliness usability • Overall performance 39
  • 47. Categories of apps • Books & magazines • Socializing • Educational/learning • Financial management • Health & exercise • Games • Sports & Entertainment • Business • Music: listening and composing • News and weather • Travel • Shopping • _________? 40
  • 48. Flipboard DropList ABC Player Zillow 41
  • 49. Discovery Channel Gilt: JetSetter 42
  • 50. Google Earth App ESPN ScoreCenter XL 43
  • 51. What, where, when, and why an app makes sense EXERCISE 1: Coming up with your big idea © 2011 Hot Studio, Inc. Proprietary & Confidential 44
  • 53. Finding a need • What does a person want/need to do? 45
  • 54. Finding a need • What does a person want/need to do? • Is a tablet app appropriate for the context of the user? Away from the o ce, home? (shopping, planning, playing, socializing) 45
  • 55. Finding a need • What does a person want/need to do? • Is a tablet app appropriate for the context of the user? Away from the o ce, home? (shopping, planning, playing, socializing) • Content must fit the context Can they access content, and data, ‘just at the right time‘ 45
  • 56. Finding a need • What does a person want/need to do? • Is a tablet app appropriate for the context of the user? Away from the o ce, home? (shopping, planning, playing, socializing) • Content must fit the context Can they access content, and data, ‘just at the right time‘ • Is there an even larger opportunity? Laptop, TV, mobile, tablet, appliance, as well as physical spaces. (a digital eco-system!) 45
  • 57. Finding a need • What does a person want/need to do? • Is a tablet app appropriate for the context of the user? Away from the o ce, home? (shopping, planning, playing, socializing) • Content must fit the context Can they access content, and data, ‘just at the right time‘ • Is there an even larger opportunity? Laptop, TV, mobile, tablet, appliance, as well as physical spaces. (a digital eco-system!) • Can it be useful, engaging, and intuitive... from the very first time! 45
  • 59. Exercise 1: defining a need 1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 46
  • 60. Exercise 1: defining a need 1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 2. Who are the people that will use it? 46
  • 61. Exercise 1: defining a need 1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 2. Who are the people that will use it? 3. Where is it used? In home, o ce, shopping, out & about? 46
  • 62. Exercise 1: defining a need 1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 2. Who are the people that will use it? 3. Where is it used? In home, o ce, shopping, out & about? 4. How does it get paid for? What is the business model? 46
  • 63. Big idea example: Example: Marathon Coach App 1. No great tablet apps that help people improve their running performance. People need a way to track and share their data with coaches and/or friends, get advice about techniques, work-outs, and equipment. Create a training plans and evaluate progress. 2. For new and experienced marathon runners, and coaches that have tablet, mobile & laptop 3. Home for planning, and at the track for coaching and data capture 4. App is free, but charge for training plans, coaching service, and advanced content. 47
  • 64. Big idea example: Example: Marathon Coach App 1. No great tablet apps that help people improve their running performance. People need a way to track and share their data with coaches and/or friends, get advice about techniques, work-outs, and equipment. Create a training plans and evaluate progress. 2. For new and experienced marathon runners, and coaches that have tablet, mobile & laptop 3. Home for planning, and at the track for coaching and data capture 4. App is free, but charge for training plans, coaching service, and advanced content. You’ve got 10 minutes.... go! 47
  • 65. Top 10 considerations for designing tablet experiences plus hundreds of others © 2011 Hot Studio, Inc. Proprietary & Confidential 48
  • 66. Consideration: 10 Consistent interactions Take advantage of what people already know! • Established user interactions should be used... unless, an interaction requires something truly unique • Carefully consider when conforming or diverging from the native iOS UI elements 49
  • 67. Consideration: 10 Consistent interactions Take advantage of what people already know! • Established user interactions should be used... unless, an interaction requires something truly unique • Carefully consider when conforming or diverging from the native iOS UI elements 49
  • 68. Consideration: 9 Direct manipulation • Allow users to manipulate objects directly on the screen • Avoid editing palettes — and typing • Don’t overload the user with irrelevant options (keep it simple: hide anything that doesn’t apply) Image ‘borrowed’ from Ron Peterson 50
  • 69. Consideration: 9 Direct manipulation • Allow users to manipulate objects directly on the screen • Avoid editing palettes — and typing • Don’t overload the user with irrelevant options (keep it simple: hide anything that doesn’t apply) Image ‘borrowed’ from Ron Peterson 50
  • 70. Consideration: 8 A ordances There are no rollovers on tablets - links, buttons, and all other controls must have plenty of a ordance • Fingertips are larger than mouse cursors 51
  • 71. Consideration: 7 Behaviors & Transitions User feedback is critical. Tablet UI’s are expected to be responsive. When a user does something, the interface should acknowledge the input. transition animation — gesture animation 52
  • 72. Consideration: 7 Behaviors & Transitions User feedback is critical. Tablet UI’s are These are the little expected to be responsive. When a user does something, the interface should things that make it fun! acknowledge the input. transition animation — gesture animation 52
  • 73. Consideration: 7 Behaviors & Transitions Aspects to consider: • How does it start and end? • What arc does it follow? • What are the levels of opacity? • Does it flip? • Does it rotate? • Does it pulse? • Does it wiggle? 53
  • 74. 3. Opening/Closing Stacks This direction takes a different approach than the first for stacks. Tapping on a stack...
  • 75. ...makes it appear centered in the screen...
  • 77. ...and settling back into its final size.
  • 78. This stack can be closed by tapping the “Back to [courseName]” button in the upper right corner. Here, it is shown with vertically scrollable content, but the size of the stack window could be made to vary to accomodate up to a certain number of child objects.
  • 79. © 2011 Hot Studio, Inc. Proprietary & Confidential
  • 80. Consideration: 6 Resolution & screen dimension Accommodating resolution of the device. Plus, how does it compare to your authoring environment? 60
  • 81. Consideration: 6 Resolution & screen dimension Accommodating resolution of the device. Plus, how does it compare to your authoring environment? A few details: • Your assets will need to be both 163 ppi AND 326ppi for retina display. (and 72dpi for desktop displays) • Need high-resolution versions of bitmaps - or use vectors (adding @2x to the ends of your image names) • Image compression has to be done carefully due to high rez screens • Web based apps should have liquid interfaces to accommodate variety of device screen dimensions 61
  • 82. Consideration: 6 Resolution & screen dimension Accommodating resolution of the device. Plus, how does it compare to your authoring environment? 62
  • 83. Consideration: 5 Layout flexibility Are the functions, and content making the best use of the device orientation? • Work mode common in landscape. Lean-back read in portrait • ‘Responsive web’ design (new CSS & JS standards support SVG and bitmap) 63
  • 84. Consideration: 4 Involve your users! Understand their needs & tasks Spend time showing your concepts and prototypes to your target users. • What is the user trying to do? • Analyze the users tasks and needs and keep your design focused 64
  • 85. Consideration: 3 Audience motivation to learn UI The casual novice tablet user vs. the highly motivated tab geek. 65
  • 86. Consideration: 2 Content delivery Keep your app alive with fresh content. You must know the source of the data. • Is your app connected? • Does it rely on live download? • Early on, you must know and secure your data source. (Open API, proprietary content, partnerships, etc.) 66
  • 87. Consideration: 1 Backwards compatible Is your app on supported devices Does your app require device hardware that is not available on earlier versions of the device 67
  • 88. Break time! ...be back at 10:40 sharp 10:20am - 10:40am 68
  • 90. Welcome back! ...letʼs keep working on your app 10:40am 70
  • 91. User scenarios EXERCISE #2: Thinking through the full context of your app © 2011 Hot Studio, Inc. Proprietary & Confidential 71
  • 92. Storyboard context App is just part of a bigger experience. Storyboarding the scenario: • Before — During — After — Repeat • The ‘eco-system’ around your app 72
  • 93. 73
  • 94. 74
  • 95. 75
  • 96. Exercise 2: Storyboard context Illustrate, as a storyboard, the full context of a person using your application. (location, people, situation, etc.) Consider: • Where they are in their day? • With whom they are interacting? • Are there other devices to sync with? • Is the data saved or shared or downloaded? 76
  • 97. 77
  • 98. You’ve got 10 minutes.... go! 77
  • 99. Who wants to share what they’ve come up with? 78
  • 100. Features, Functionality, and Content EXERCISE #3: The functions and content of your app © 2011 Hot Studio, Inc. Proprietary & Confidential 79
  • 101. Exercise 3: The core features and content of your app • Yellow sticky = a feature • Orange sticky = a content ‘type’ 80
  • 102. Exercise 3: The core features and content of your app • Yellow sticky = a feature • Orange sticky = a content ‘type’ You’ve got 12 minutes.... go! 80
  • 103. Gestures Rather than mouse or keyboard events, the tablet experience is based on touch events. Let’s look at common and un-common ways to navigate. © 2011 Hot Studio, Inc. Proprietary & Confidential 81
  • 104. Core iOS touches ‘gestures’: Custom gestures: (using the UITapGestureRecognizer) • Tap • Rotate • Drag • Bump • Flick • Long hold/press • Swipe • Multi-touch • Double-Tap • Pinch Open/Close • Touch & Hold • Shake 82
  • 105. When to pan or scroll or swipe? How does information flow and overflow? (carding, scrolling, accordion) 83
  • 106. When to pan or scroll or swipe? How does information flow and overflow? (carding, scrolling, accordion) 83
  • 111. Tools for the designer Digital + Analog © 2011 Hot Studio, Inc. Proprietary & Confidential 88
  • 112. Tools used for designing a tablet experience Experience Design • Whiteboard & sketch paper • Visio • OmniGra e • Illustrator • InDesign
  • 113. Tools used for designing a tablet UI Experience Design • Whiteboard & sketch paper • Visio - from MicroSoft • OmniGra e • Illustrator • InDesign 90
  • 114. Tools used for designing a tablet UI Experience Design • Whiteboard & sketch paper • Visio • OmniGra e 5 • Illustrator • InDesign 91
  • 115. Tools used for designing a tablet UI Experience Design • Whiteboard & sketch paper • Visio • OmniGra e 5 • Illustrator • InDesign 92
  • 116. Tools used for designing a tablet UI Experience Design • Whiteboard & sketch paper • Visio • OmniGra e 5 • Illustrator • InDesign 93
  • 117. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 94
  • 118. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 95
  • 119. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 96
  • 120. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 97
  • 121. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 98
  • 122. Why Prototype? Iterative design process: ideas make learn validate 99
  • 123. Why Prototype? • Allows you to fine tune you ideas and interactions (Revealing those unexpected gaps) Iterative design process: ideas make learn validate 99
  • 124. Why Prototype? • Allows you to fine tune you ideas and interactions (Revealing those unexpected gaps) • Bring your ideas to life.... quickly sketching Iterative design process: ideas make learn validate 99
  • 125. Why Prototype? • Allows you to fine tune you ideas and interactions (Revealing those unexpected gaps) • Bring your ideas to life.... quickly sketching • See the choreography of your transitions and screen states Iterative design process: ideas make learn validate 99
  • 126. Tools for prototyping GoodReader (PDFs) Picture Link - iPDF MinimalFolio + + ‘Wallaby’ Apple Keynote Fireworks Flash coming Catalyst soon: 100
  • 127. Core UI resources are available 101
  • 128. Resources for visual designers Core UI graphic assets available: teehanlax.com/blog 102
  • 129. Resources for visual designers Core UI graphic assets available: teehanlax.com/blog 103
  • 130. Resources for visual designers High quality visual interface stock sites: 104
  • 131. Resources for visual designers High quality visual interface stock sites: 104
  • 132. Resources for visual designers High quality visual interface stock sites: 104
  • 133. Resources for visual designers High quality visual interface stock sites: 104
  • 134. Development - very briefly! Important: Make friends with a developer! Someone who can work with Apple’s Software Development Kit (SDK): Xcode 4 (development environment) - Interface Builder - Instruments - iOS Simulator - See: developer.apple.com 105
  • 135. Annotated wireframes & layered PSDs: 106
  • 136. Annotated wireframes & layered PSDs: 106
  • 137. Flows & wireframes EXERCISE 4: Tablet app interface sketch © 2011 Hot Studio, Inc. Proprietary & Confidential 107
  • 138. User flow 108
  • 139. 109
  • 140. 110
  • 141. 111
  • 142. App map Load (animation) Share Network Home Search Dashboard Search for topics FB, Twitter, etc. (timeline view & select topics) Related Article News Article Profile (text, image, video) (text, image, video) Preferences, account info., Shopping Partner Sites related products additional content 112
  • 143. 113
  • 144. Sketching Magazine App for iPad features: Help Log In - Show new magazine titles - Magazine shop - Library of users magazines Featured User will swip through - Show upcoming events - Magazines a variety of covers calendar <- Cover shots -> - User generated content (reviews, comments, etc) - Facebook integration - Twitter stream Your Full Facebook Library Magazine Shop Twitter User can post to FB if they User can like an article or title. get to the Or, they can tweet if magazines they they an interesting already own point 114
  • 145. Exercise #4: Features & Functionality mapping Step A: Organize the content and functions onto the provided ‘Post-its’— organize them on the blank sheet(s) Step B: With pencil, sketch on the ‘paper iPads’ the ‘main’ screen layouts — with appropriate functions & content. 115
  • 146. Exercise #4: Features & Functionality mapping Step A: Organize the content and functions onto the provided ‘Post-its’— organize them on the blank sheet(s) Step B: With pencil, sketch on the ‘paper iPads’ the ‘main’ screen layouts — with appropriate functions & content. You’ve got about 15 minutes.... go! 115
  • 147. Who wants to share what they’ve come up with? 116
  • 148. Team & Process More than one way to approach © 2011 Hot Studio, Inc. Proprietary & Confidential 117
  • 149. The team Collaboration of a Project Manager multi-disciplined team is critical User Experience Visual Designer Content Users Engineer Client 118
  • 150. Process (waterfall) User Experience Visual Design Engineering Project Management Discovery Strategy Design Build • Customer / Market • Persona development • Screen schematics • Style guide Research • Content needs analysis • Visual design • Manage dev team • Stakeholder interviews • Feature prioritization • User testing • Collaborate with • Key schematics & IA • Design refinement dev team • Existing apps audit Visual design workshop • Design extension • QA & testing • Interview target users • Business & technical • Development throughout the • Competitive audit planning requirements development • Technology discovery • User concept testing process 119
  • 151. Sample of project flow for simple tablet app • Conduct a Discovery work session to understand you business and design goals for the project • Review your content offering and develop a design approach that best leverages content • Conduct an evaluation of 5-7 competitors and/or other brands • Develop an interaction model for the content and high level interaction design • Wire frame review over the course of our strategy and design phases • Several visual design concepts that reflect a range of approaches • Based on the selection of 1 of the visual design directions extend that direction across the additional screens and dialogs the application will require. • Work with developer during development 120
  • 152. IF we have time left... A few basics of getting your app into the app store © 2011 Hot Studio, Inc. Proprietary & Confidential 121
  • 153. A few reasons for rejection from Apple App Store 122
  • 154. A few reasons for rejection from Apple App Store • Not following Apple’s Interface Guidelines • Lack of rights to content or brands presented in your app • Insu cient error messaging. Spinning ball does not su ce! • Political lampooning • App crashing • Violating patented UI patterns... coverflow, for example • Contests and/or sweepstakes • Poor handling of user info • Apps that are primarily for serving ads • Objectionable content... nudity • Transactions outside the app store 122
  • 155. Thank you! Hot Studio Inc. 585 Howard Street 1st Floor San Francisco, CA 94105 415.284.7250 520 Broadway, 8th Floor New York NY 10012 212.242.1082 hotstudio.com hottub.hotstudio.com twitter.com/hotstudio facebook.com/hotstudio