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
PPT
SEO through Accessibility- How designing accessible websites leads to automat...
PPTX
Empathy training & the accessible web experience
PPTX
Web accessibility: it’s everyone’s responsibility
PPTX
Design for Accessibility
PDF
Design for accessibility
PDF
Accessible Design Presentation
PPTX
Mobile-First Design
Week 3 Lecture: Accessibility
SEO through Accessibility- How designing accessible websites leads to automat...
Empathy training & the accessible web experience
Web accessibility: it’s everyone’s responsibility
Design for Accessibility
Design for accessibility
Accessible Design Presentation
Mobile-First Design

What's hot (20)

PDF
Website Accessibility
PPTX
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
PDF
Don't Panic! How to perform an accessibility evaluation with limited resources
PPTX
UXPA2019 I am the LAAW! The Lean Accessibility Audit Workshop
PPTX
Introduction To Web Accessibility
PPTX
Designing Websites With a Mobile First Approach
PPTX
A Web for Everyone: Accessibility as a design challenge
ODP
Web Accessibility: A Shared Responsibility
PPTX
Mobile First London 13 August
PPT
Web and mobile accessibility
PPTX
Breaking silos - all bad things must come to an end
PPTX
Usability meets accessibility
PPT
Back to the Future: Current and Future Trends for Accessibility
PDF
eLearning On Tablets - From Understanding To Execution
PPTX
6 mobile user interface design bb
PPTX
Technology resource app
PDF
Rebecca Topps - Mobile Accessibility
PDF
Usability basics
PDF
How to create accessible websites - WordCamp Boston
PPTX
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
Website Accessibility
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
Don't Panic! How to perform an accessibility evaluation with limited resources
UXPA2019 I am the LAAW! The Lean Accessibility Audit Workshop
Introduction To Web Accessibility
Designing Websites With a Mobile First Approach
A Web for Everyone: Accessibility as a design challenge
Web Accessibility: A Shared Responsibility
Mobile First London 13 August
Web and mobile accessibility
Breaking silos - all bad things must come to an end
Usability meets accessibility
Back to the Future: Current and Future Trends for Accessibility
eLearning On Tablets - From Understanding To Execution
6 mobile user interface design bb
Technology resource app
Rebecca Topps - Mobile Accessibility
Usability basics
How to create accessible websites - WordCamp Boston
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
Ad

Viewers also liked (7)

PPTX
Interactive Web Design 5 - Week 2 - Introduction
PPTX
PPTX
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
PPTX
Week 12 CSS Font - size
PPTX
Week 12 CSS - Review from last week
PPTX
Module 3 - Intro to Bootstrap
PPTX
Module 5 - WCM system comparison
Interactive Web Design 5 - Week 2 - Introduction
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
Week 12 CSS Font - size
Week 12 CSS - Review from last week
Module 3 - Intro to Bootstrap
Module 5 - WCM system comparison
Ad

Similar to Week 4 - tablet app design (20)

PDF
Mobile usability workshop - Android-iPhone-Google Glass - Jibo He
PDF
UI Design
PDF
UI design for mobile apps
PDF
The Art and Science of App Design_ A Comprehensive Review.pdf
PDF
UI design for mobile apps
PDF
Confoo 2012-03-01 - Building mobile experiences that don't suck
PDF
Mobile first: A future friendly approach to UX design
PPTX
Mobile app design
PDF
2014 UX/UI trends for mobile solutions
 
PDF
Designing for Multiple Devices - Sarit Arora
PPTX
Mobile Apps - World Usability Day 2009
PDF
Rich Holdsworth @Didlr Presentation
PPTX
Build better mobile apps and become a better person
PDF
The App Design Handbook 1st Edition Nathan Barry
PDF
Ubercool, pixel perfct & slick design… that just doesn't work
PPT
I've got this idea for an app
PDF
6 Rules to Designing Amazing Mobile Apps (@media 2011)
PDF
Ux Ui Design for Mobile Apps
KEY
Design for mobile
PPT
Communication Design for the Mobile Experience
Mobile usability workshop - Android-iPhone-Google Glass - Jibo He
UI Design
UI design for mobile apps
The Art and Science of App Design_ A Comprehensive Review.pdf
UI design for mobile apps
Confoo 2012-03-01 - Building mobile experiences that don't suck
Mobile first: A future friendly approach to UX design
Mobile app design
2014 UX/UI trends for mobile solutions
 
Designing for Multiple Devices - Sarit Arora
Mobile Apps - World Usability Day 2009
Rich Holdsworth @Didlr Presentation
Build better mobile apps and become a better person
The App Design Handbook 1st Edition Nathan Barry
Ubercool, pixel perfct & slick design… that just doesn't work
I've got this idea for an app
6 Rules to Designing Amazing Mobile Apps (@media 2011)
Ux Ui Design for Mobile Apps
Design for mobile
Communication Design for the Mobile Experience

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

PPTX
Week 12 CSS Font - family
PPTX
Week 4 Lecture Accessibility
PPTX
Week 4 Lecture Part 1
PPTX
Week 4 Lecture Part 2
PPTX
Artistic Web Applications - Week3 - Part 1
PPTX
Artistic Web Applications - Week3 - Part 3
PPTX
Artistic Web Applications - Week3 - Part 2
PPTX
Week2 lecture-whatiswebdesign-part1
PPTX
LecWeek2 lecture-whatiswebdesign-part2
Week 12 CSS Font - family
Week 4 Lecture Accessibility
Week 4 Lecture Part 1
Week 4 Lecture Part 2
Artistic Web Applications - Week3 - Part 1
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 2
Week2 lecture-whatiswebdesign-part1
LecWeek2 lecture-whatiswebdesign-part2

Recently uploaded (20)

PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PDF
Complications of Minimal Access Surgery at WLH
PDF
O7-L3 Supply Chain Operations - ICLT Program
PPTX
master seminar digital applications in india
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PDF
Insiders guide to clinical Medicine.pdf
PDF
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PDF
Basic Mud Logging Guide for educational purpose
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PDF
RMMM.pdf make it easy to upload and study
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PDF
Business Ethics Teaching Materials for college
PDF
Classroom Observation Tools for Teachers
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
PDF
TR - Agricultural Crops Production NC III.pdf
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PPTX
Institutional Correction lecture only . . .
PDF
Anesthesia in Laparoscopic Surgery in India
2.FourierTransform-ShortQuestionswithAnswers.pdf
Complications of Minimal Access Surgery at WLH
O7-L3 Supply Chain Operations - ICLT Program
master seminar digital applications in india
102 student loan defaulters named and shamed – Is someone you know on the list?
Insiders guide to clinical Medicine.pdf
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Module 4: Burden of Disease Tutorial Slides S2 2025
Basic Mud Logging Guide for educational purpose
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
RMMM.pdf make it easy to upload and study
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
Business Ethics Teaching Materials for college
Classroom Observation Tools for Teachers
O5-L3 Freight Transport Ops (International) V1.pdf
TR - Agricultural Crops Production NC III.pdf
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Institutional Correction lecture only . . .
Anesthesia in Laparoscopic Surgery in India

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