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
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
 

Similar to Web2.0 Tablet Experience Design Workshop

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 Web2.0 Tablet Experience Design Workshop (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
 

Recently uploaded

Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfLewis John
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxYaminiDabbara
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufisiyoufihoussam
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 

Recently uploaded (20)

Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptx
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 

Web2.0 Tablet Experience Design Workshop

  • 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
  • 109.
  • 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