SlideShare a Scribd company logo
Module 2 - Week 4
Tablet App Design
“So capable, you won’t
want to put it down.“
Apple website
What we’ll cover today
Independent reading for this week
covers tablet app design
concepts.
Today we’ll talk about:
• Trends in tablet use
• Tablet use
• Best practices for tablet app
design
Why learn about
app design?
Why learn about app design?
• Apps are the close cousin to web design
• They’re really popular
• You may need to do this on the job
• Most important: they’re really cool and fun
Sales growth of tablets
What are tablets used for?
Vs.
The microwave became a staple in practically every
home, because people kept finding new ways
to use this technological wonder.
What are tablets used for?
Vs.
The tablet’s main appeal lies in the approachable
touchscreen interface that just about anybody at any
age can pick up and figure out. A tablet doesn’t need to
do everything that a more powerful PC can.
What are tablets used for?
• 70% play games
• 66% access social media
(33% doing so daily)
• 50% listen to music and watch
videos/TV
• 1 in 4 pay to watch videos
(e.g. Netflix)
• 44% access bank accounts
• 39% purchase physical goods
• clothing and accessories top the
list, followed by books and tickets
What are tablets used for?
http://www.wired.com/2011/03/ipad-usage/
In class survey:
If you have a tablet,
what do you use it for?
Participate now at:
PollEv.com/hipstream594
Designing apps for tablets
• Look at the constraints: things
you have to do and things you
can’t do
• Consider the tradeoffs: the
less-than-ideal choices to live
within the constraints
Constraints can be helpful.
Knowing what they are allows you
focus on what you can do.
Designing for usability means
making good tradeoff decisions.
Why are we studying app design?
Learning to work within constraints is an
essential aspect of online design
App usability best practices
Content
Apps often provide an alternative way to do
something that’s already available on the
web. Why would they use the app?
• An app needs to be enjoyable, fun, clever,
simple, exciting (etc.) to make people want to
download, try and return to it
• Content is the most important part of an app
• everything else - design, navigation - exists
to get users to the content
App usability best practices
Pleasure
Apps often provide an alternative
way to do something that’s
already available on the web. Why
would they use the app?
• An app needs to be enjoyable,
fun, clever, simple, exciting (etc.)
to make people want to download,
try and return to it
Positivity
Surprise (unexpected and new)
Uniqueness (interesting)
Attention (incentives help)
Attraction (make it look good)
Anticipation
Exclusivity
Be responsive (show reaction)
“Shazam is the best way to identify music and TV around you.”
App usability best practices
Goals
…other side of the coin… what do we
want the user to do?
• Is there a call to action? If yes, make it
clear and bold and consistent
• What do we want the user to do? Eg.:
• Register, buy, subscribe…engage
with advertising?
• “In App Purchases”
App usability best practices
Learnability
• How complicated is it?
• Does it have special features
that users will need to master?
• How is help accessed?
• Does it use standard
navigation, terms, icons that
people are already familiar with?
“Paper is the simplest way to express your ideas.
You don’t need to know how to draw. “
App usability best practices
Memorability
• When you’ve returned, will you
remember how to use it?
Good apps are about simplicity
and doing a few things well.
This means you have to be
selective about the functionality you include
and not throw in the kitchen sink.
How to Tips to improve app design
Use familiar design
• Users expect behaviour
based on conventions
and what they see and
use every day
• Use familiar, standard
design features:
• buttons look like
buttons
• links look like links
• form boxes look like
form boxes…etc.
Simple rules!
• Cool features can
add complexity
• Strip the app,
screens and
elements to their
essence
• Remove visual
clutter
• simplicity rules!
Make buttons big enough
• Make targets/buttons big so that
they’re easy for users to tap
• Small touch targets:
• can lead to touch errors
• make users work harder because
they require more accuracy to hit
• How big?
• iOS: 44 pixels wide 44 pixels tall
• Windows: 34px
• Average index finger size:
45 – 57 pixels
Moving back & home
• Ensure there’s a way
to get back to the
home or main
screen
• easily move back
and around in the
app
• Undo or redo
• Quick access to
settings
Consider movement
• Decide if the app
will allow for
rotation
• How will the
layout adapt?
App redesign assignment
In-class Exercise 2:
• Your “client:” Bean House Coffee Co.
• Design brief and assets are in eLearn
• Goal: create a portfolio-worth design
concept for an iPad app
• Demo in class: how to get started

More Related Content

PPTX
Week 3 Lecture: Accessibility
Katherine McCurdy-Lapierre, R.G.D.
 
PPT
SEO through Accessibility- How designing accessible websites leads to automat...
Abhay Rautela
 
PPTX
Empathy training & the accessible web experience
Media Access Australia
 
PPTX
Web accessibility: it’s everyone’s responsibility
Media Access Australia
 
PPTX
Design for Accessibility
qixingz
 
PDF
Design for accessibility
YogeshDaphane
 
PDF
Accessible Design Presentation
Topher Kanyuga
 
PPTX
Mobile-First Design
Katelyn Sessions
 
Week 3 Lecture: Accessibility
Katherine McCurdy-Lapierre, R.G.D.
 
SEO through Accessibility- How designing accessible websites leads to automat...
Abhay Rautela
 
Empathy training & the accessible web experience
Media Access Australia
 
Web accessibility: it’s everyone’s responsibility
Media Access Australia
 
Design for Accessibility
qixingz
 
Design for accessibility
YogeshDaphane
 
Accessible Design Presentation
Topher Kanyuga
 
Mobile-First Design
Katelyn Sessions
 

What's hot (20)

PDF
Website Accessibility
Nishan Bose
 
PPTX
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA International
 
PDF
Don't Panic! How to perform an accessibility evaluation with limited resources
Michael Ryan
 
PPTX
UXPA2019 I am the LAAW! The Lean Accessibility Audit Workshop
UXPA International
 
PPTX
Introduction To Web Accessibility
Steven Swafford
 
PPTX
Designing Websites With a Mobile First Approach
Dan Moriarty
 
PPTX
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
 
ODP
Web Accessibility: A Shared Responsibility
Joseph Dolson
 
PPTX
Mobile First London 13 August
Precedent
 
PPT
Web and mobile accessibility
Henny Swan
 
PPTX
Breaking silos - all bad things must come to an end
Henny Swan
 
PPTX
Usability meets accessibility
Whitney Quesenbery
 
PPT
Back to the Future: Current and Future Trends for Accessibility
Jonathan Hassell
 
PDF
eLearning On Tablets - From Understanding To Execution
Upside Learning Solutions
 
PPTX
6 mobile user interface design bb
Shahid Riaz
 
PPTX
Technology resource app
AnnaPorter21
 
PDF
Rebecca Topps - Mobile Accessibility
FrontEnders
 
PDF
Usability basics
Zdeněk Lanc
 
PDF
How to create accessible websites - WordCamp Boston
Rachel Cherry
 
PPTX
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
UXPA International
 
Website Accessibility
Nishan Bose
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA International
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Michael Ryan
 
UXPA2019 I am the LAAW! The Lean Accessibility Audit Workshop
UXPA International
 
Introduction To Web Accessibility
Steven Swafford
 
Designing Websites With a Mobile First Approach
Dan Moriarty
 
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
 
Web Accessibility: A Shared Responsibility
Joseph Dolson
 
Mobile First London 13 August
Precedent
 
Web and mobile accessibility
Henny Swan
 
Breaking silos - all bad things must come to an end
Henny Swan
 
Usability meets accessibility
Whitney Quesenbery
 
Back to the Future: Current and Future Trends for Accessibility
Jonathan Hassell
 
eLearning On Tablets - From Understanding To Execution
Upside Learning Solutions
 
6 mobile user interface design bb
Shahid Riaz
 
Technology resource app
AnnaPorter21
 
Rebecca Topps - Mobile Accessibility
FrontEnders
 
Usability basics
Zdeněk Lanc
 
How to create accessible websites - WordCamp Boston
Rachel Cherry
 
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
UXPA International
 
Ad

Viewers also liked (7)

PPTX
Interactive Web Design 5 - Week 2 - Introduction
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Week11 Lecture: CSS
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Week 12 CSS Font - size
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Week 12 CSS - Review from last week
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Module 5 - WCM system comparison
Katherine McCurdy-Lapierre, R.G.D.
 
Interactive Web Design 5 - Week 2 - Introduction
Katherine McCurdy-Lapierre, R.G.D.
 
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
Katherine McCurdy-Lapierre, R.G.D.
 
Week 12 CSS Font - size
Katherine McCurdy-Lapierre, R.G.D.
 
Week 12 CSS - Review from last week
Katherine McCurdy-Lapierre, R.G.D.
 
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
Module 5 - WCM system comparison
Katherine McCurdy-Lapierre, R.G.D.
 
Ad

Similar to Week 4 - tablet app design (20)

PDF
Mobile usability workshop - Android-iPhone-Google Glass - Jibo He
Jibo He
 
PDF
UI Design
Ivano Malavolta
 
PDF
UI design for mobile apps
Ivano Malavolta
 
PDF
The Art and Science of App Design_ A Comprehensive Review.pdf
Flora Runyenje
 
PDF
UI design for mobile apps
Ivano Malavolta
 
PDF
Confoo 2012-03-01 - Building mobile experiences that don't suck
Frédéric Harper
 
PDF
Mobile first: A future friendly approach to UX design
InVision App
 
PPTX
Mobile app design
Ashutosh Mane
 
PDF
2014 UX/UI trends for mobile solutions
DMI
 
PDF
Designing for Multiple Devices - Sarit Arora
STC India UX SIG
 
PPTX
Mobile Apps - World Usability Day 2009
Rich Miller
 
PDF
Rich Holdsworth @Didlr Presentation
Lee Stott
 
PPTX
Build better mobile apps and become a better person
Willem Meints
 
PDF
The App Design Handbook 1st Edition Nathan Barry
kurohabannye
 
PDF
Ubercool, pixel perfct & slick design… that just doesn't work
Samuel Bednar
 
PPT
I've got this idea for an app
IWMW
 
PDF
6 Rules to Designing Amazing Mobile Apps (@media 2011)
Brian Fling
 
PDF
Ux Ui Design for Mobile Apps
Vishal Kirti
 
KEY
Design for mobile
Davide Di Cillo
 
PPT
Communication Design for the Mobile Experience
David Drucker
 
Mobile usability workshop - Android-iPhone-Google Glass - Jibo He
Jibo He
 
UI Design
Ivano Malavolta
 
UI design for mobile apps
Ivano Malavolta
 
The Art and Science of App Design_ A Comprehensive Review.pdf
Flora Runyenje
 
UI design for mobile apps
Ivano Malavolta
 
Confoo 2012-03-01 - Building mobile experiences that don't suck
Frédéric Harper
 
Mobile first: A future friendly approach to UX design
InVision App
 
Mobile app design
Ashutosh Mane
 
2014 UX/UI trends for mobile solutions
DMI
 
Designing for Multiple Devices - Sarit Arora
STC India UX SIG
 
Mobile Apps - World Usability Day 2009
Rich Miller
 
Rich Holdsworth @Didlr Presentation
Lee Stott
 
Build better mobile apps and become a better person
Willem Meints
 
The App Design Handbook 1st Edition Nathan Barry
kurohabannye
 
Ubercool, pixel perfct & slick design… that just doesn't work
Samuel Bednar
 
I've got this idea for an app
IWMW
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
Brian Fling
 
Ux Ui Design for Mobile Apps
Vishal Kirti
 
Design for mobile
Davide Di Cillo
 
Communication Design for the Mobile Experience
David Drucker
 

More from Katherine McCurdy-Lapierre, R.G.D. (11)

PPTX
Week 12 CSS Font - family
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Week 4 Lecture Accessibility
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Week 4 Lecture Part 1
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Week 4 Lecture Part 2
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Artistic Web Applications - Week3 - Part 1
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Artistic Web Applications - Week3 - Part 3
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Artistic Web Applications - Week3 - Part 2
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Week2 lecture-whatiswebdesign-part1
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
LecWeek2 lecture-whatiswebdesign-part2
Katherine McCurdy-Lapierre, R.G.D.
 
Week 12 CSS Font - family
Katherine McCurdy-Lapierre, R.G.D.
 
Week 4 Lecture Accessibility
Katherine McCurdy-Lapierre, R.G.D.
 
Week 4 Lecture Part 1
Katherine McCurdy-Lapierre, R.G.D.
 
Week 4 Lecture Part 2
Katherine McCurdy-Lapierre, R.G.D.
 
Artistic Web Applications - Week3 - Part 1
Katherine McCurdy-Lapierre, R.G.D.
 
Artistic Web Applications - Week3 - Part 3
Katherine McCurdy-Lapierre, R.G.D.
 
Artistic Web Applications - Week3 - Part 2
Katherine McCurdy-Lapierre, R.G.D.
 
Week2 lecture-whatiswebdesign-part1
Katherine McCurdy-Lapierre, R.G.D.
 
LecWeek2 lecture-whatiswebdesign-part2
Katherine McCurdy-Lapierre, R.G.D.
 

Recently uploaded (20)

PPTX
CDH. pptx
AneetaSharma15
 
PDF
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
Miraj Khan
 
PPTX
Dakar Framework Education For All- 2000(Act)
santoshmohalik1
 
PPTX
Python-Application-in-Drug-Design by R D Jawarkar.pptx
Rahul Jawarkar
 
PPTX
Introduction to pediatric nursing in 5th Sem..pptx
AneetaSharma15
 
PPTX
Measures_of_location_-_Averages_and__percentiles_by_DR SURYA K.pptx
Surya Ganesh
 
PPTX
Information Texts_Infographic on Forgetting Curve.pptx
Tata Sevilla
 
PDF
What is CFA?? Complete Guide to the Chartered Financial Analyst Program
sp4989653
 
DOCX
Action Plan_ARAL PROGRAM_ STAND ALONE SHS.docx
Levenmartlacuna1
 
PPTX
CARE OF UNCONSCIOUS PATIENTS .pptx
AneetaSharma15
 
PDF
Study Material and notes for Women Empowerment
ComputerScienceSACWC
 
PPTX
An introduction to Dialogue writing.pptx
drsiddhantnagine
 
PPTX
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PoojaSen20
 
PPTX
Tips Management in Odoo 18 POS - Odoo Slides
Celine George
 
PDF
1.Natural-Resources-and-Their-Use.ppt pdf /8th class social science Exploring...
Sandeep Swamy
 
PPTX
How to Close Subscription in Odoo 18 - Odoo Slides
Celine George
 
PDF
2.Reshaping-Indias-Political-Map.ppt/pdf/8th class social science Exploring S...
Sandeep Swamy
 
PPTX
PREVENTIVE PEDIATRIC. pptx
AneetaSharma15
 
PDF
BÀI TẬP TEST BỔ TRỢ THEO TỪNG CHỦ ĐỀ CỦA TỪNG UNIT KÈM BÀI TẬP NGHE - TIẾNG A...
Nguyen Thanh Tu Collection
 
PDF
Review of Related Literature & Studies.pdf
Thelma Villaflores
 
CDH. pptx
AneetaSharma15
 
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
Miraj Khan
 
Dakar Framework Education For All- 2000(Act)
santoshmohalik1
 
Python-Application-in-Drug-Design by R D Jawarkar.pptx
Rahul Jawarkar
 
Introduction to pediatric nursing in 5th Sem..pptx
AneetaSharma15
 
Measures_of_location_-_Averages_and__percentiles_by_DR SURYA K.pptx
Surya Ganesh
 
Information Texts_Infographic on Forgetting Curve.pptx
Tata Sevilla
 
What is CFA?? Complete Guide to the Chartered Financial Analyst Program
sp4989653
 
Action Plan_ARAL PROGRAM_ STAND ALONE SHS.docx
Levenmartlacuna1
 
CARE OF UNCONSCIOUS PATIENTS .pptx
AneetaSharma15
 
Study Material and notes for Women Empowerment
ComputerScienceSACWC
 
An introduction to Dialogue writing.pptx
drsiddhantnagine
 
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PoojaSen20
 
Tips Management in Odoo 18 POS - Odoo Slides
Celine George
 
1.Natural-Resources-and-Their-Use.ppt pdf /8th class social science Exploring...
Sandeep Swamy
 
How to Close Subscription in Odoo 18 - Odoo Slides
Celine George
 
2.Reshaping-Indias-Political-Map.ppt/pdf/8th class social science Exploring S...
Sandeep Swamy
 
PREVENTIVE PEDIATRIC. pptx
AneetaSharma15
 
BÀI TẬP TEST BỔ TRỢ THEO TỪNG CHỦ ĐỀ CỦA TỪNG UNIT KÈM BÀI TẬP NGHE - TIẾNG A...
Nguyen Thanh Tu Collection
 
Review of Related Literature & Studies.pdf
Thelma Villaflores
 

Week 4 - tablet app design

  • 1. Module 2 - Week 4 Tablet App Design “So capable, you won’t want to put it down.“ Apple website
  • 2. What we’ll cover today Independent reading for this week covers tablet app design concepts. Today we’ll talk about: • Trends in tablet use • Tablet use • Best practices for tablet app design
  • 4. Why learn about app design? • Apps are the close cousin to web design • They’re really popular • You may need to do this on the job • Most important: they’re really cool and fun
  • 5. Sales growth of tablets
  • 6. What are tablets used for? Vs. The microwave became a staple in practically every home, because people kept finding new ways to use this technological wonder.
  • 7. What are tablets used for? Vs. The tablet’s main appeal lies in the approachable touchscreen interface that just about anybody at any age can pick up and figure out. A tablet doesn’t need to do everything that a more powerful PC can.
  • 8. What are tablets used for? • 70% play games • 66% access social media (33% doing so daily) • 50% listen to music and watch videos/TV • 1 in 4 pay to watch videos (e.g. Netflix) • 44% access bank accounts • 39% purchase physical goods • clothing and accessories top the list, followed by books and tickets
  • 9. What are tablets used for? http://www.wired.com/2011/03/ipad-usage/
  • 10. In class survey: If you have a tablet, what do you use it for? Participate now at: PollEv.com/hipstream594
  • 11. Designing apps for tablets • Look at the constraints: things you have to do and things you can’t do • Consider the tradeoffs: the less-than-ideal choices to live within the constraints Constraints can be helpful. Knowing what they are allows you focus on what you can do. Designing for usability means making good tradeoff decisions.
  • 12. Why are we studying app design? Learning to work within constraints is an essential aspect of online design
  • 13. App usability best practices Content Apps often provide an alternative way to do something that’s already available on the web. Why would they use the app? • An app needs to be enjoyable, fun, clever, simple, exciting (etc.) to make people want to download, try and return to it • Content is the most important part of an app • everything else - design, navigation - exists to get users to the content
  • 14. App usability best practices Pleasure Apps often provide an alternative way to do something that’s already available on the web. Why would they use the app? • An app needs to be enjoyable, fun, clever, simple, exciting (etc.) to make people want to download, try and return to it Positivity Surprise (unexpected and new) Uniqueness (interesting) Attention (incentives help) Attraction (make it look good) Anticipation Exclusivity Be responsive (show reaction)
  • 15. “Shazam is the best way to identify music and TV around you.”
  • 16. App usability best practices Goals …other side of the coin… what do we want the user to do? • Is there a call to action? If yes, make it clear and bold and consistent • What do we want the user to do? Eg.: • Register, buy, subscribe…engage with advertising? • “In App Purchases”
  • 17. App usability best practices Learnability • How complicated is it? • Does it have special features that users will need to master? • How is help accessed? • Does it use standard navigation, terms, icons that people are already familiar with?
  • 18. “Paper is the simplest way to express your ideas. You don’t need to know how to draw. “
  • 19. App usability best practices Memorability • When you’ve returned, will you remember how to use it?
  • 20. Good apps are about simplicity and doing a few things well. This means you have to be selective about the functionality you include and not throw in the kitchen sink.
  • 21. How to Tips to improve app design
  • 22. Use familiar design • Users expect behaviour based on conventions and what they see and use every day • Use familiar, standard design features: • buttons look like buttons • links look like links • form boxes look like form boxes…etc.
  • 23. Simple rules! • Cool features can add complexity • Strip the app, screens and elements to their essence • Remove visual clutter • simplicity rules!
  • 24. Make buttons big enough • Make targets/buttons big so that they’re easy for users to tap • Small touch targets: • can lead to touch errors • make users work harder because they require more accuracy to hit • How big? • iOS: 44 pixels wide 44 pixels tall • Windows: 34px • Average index finger size: 45 – 57 pixels
  • 25. Moving back & home • Ensure there’s a way to get back to the home or main screen • easily move back and around in the app • Undo or redo • Quick access to settings
  • 26. Consider movement • Decide if the app will allow for rotation • How will the layout adapt?
  • 27. App redesign assignment In-class Exercise 2: • Your “client:” Bean House Coffee Co. • Design brief and assets are in eLearn • Goal: create a portfolio-worth design concept for an iPad app • Demo in class: how to get started