Are you experienced

Are you experienced?
The user’s guide to user experience
By Royi Benyossef (+royiby)

Are you experienced? by Royi Benyossef (+royiby)
Android developer since 2009.
GDG Herzliya co-founder.
Android speaker and lecturer.
Android Mentor for Google Launchpad.
Android GDE 2013, 2014, 2015.
Developer relations manager @ Stealth
Royi Benyossef

Are you experienced?! by Royi Benyossef (+royiby)
Motivation
(What do we want?!)

Motivation
Great UX

Motivation
Great UX Beautiful graphics

Motivation
Identifiable branding

Motivation
Intuitive UI

Motivation
Intuitive UI
Low “friction”

Motivation
Intuitive UI
Low “friction”
High turnover rate

HOW?

Reduce all the
frictions!

Glossary
(It’s ancient Snobbish for definitions)

Glossary
The funnel

Funnel
Glossary
Representation of user base

Funnel
Glossary
Wide at the top

Funnel
Glossary
Wide at the top
Thin at the bottom
(= less users)

Glossary
Funnel Perforations

Funnel
Glossary
Wide at the top
Thin at the bottom
Each step applies friction

Funnel
Glossary
Wide at the top
Thin at the bottom
Each step applies friction
(=drop-outs)

Glossary
- The funnel
Friction?
?!?

Motivation
- The funnel
Friction?

Motivation
- The funnel
Friction? OK, but i’m
watching
you!

- The funnel
Friction
Motivation
Redundant effort

- The funnel
Friction
Motivation
Redundant effort
Cognitive overhead

Motivation
- The funnel
- Friction
Importance?

Motivation
- The funnel
- Friction
Importance
Agenda
Trust
The dropout triangle

ALL ABOARD!!! by Royi Benyossef (+royiby)
Motivation
- The funnel
- Friction
Importance
# of users
Trust
The dropout triangle

ALL ABOARD!!! by Royi Benyossef (+royiby)
Motivation
- The funnel
- Friction
Importance

Motivation
- The funnel
- Friction
Importance
Agenda
Trust
The dropout triangle*Completely made-up graph

Not sure ifstupid...
Or didn’tmake hispoint yet...

Quoting aslide which isquoting me

Core app quality
checklist
One doc. fits all (apps)

Visual & graphics
(What you see)

Visual & graphics
Design

Visual & graphics
Design System icons

Visual & graphics
Design System icons
(Icon = functionality)

Visual & graphics
- Design
Navigation
“Android” Back button

Visual & graphics
- Design
Navigation
Back from dialogs

Visual & graphics
- Design
Navigation
Back from dialogs
Home is sacred

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications
Persistency

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications
Persistency
(= on-going event)

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications
Persistency
Content

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications
Persistency
Content:
> No adverts!

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications
Persistency
Content:
No adverts!
> Related content

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications
Persistency
Content
Usages

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications
Persistency
Content
Usages:
> Contextual change

Visual & graphics
- Design
- Navigation
Notifications
Stack notifications
Persistency
Content
Usages:
Contextual change
> On-going BG action

Functionality
(What you get)

Functionality
Permissions

Functionality
Permissions Request what you need

Functionality
- Permissions
Install location
Work on SD card if applicable

Functionality
- Permissions
Install location
Work on SD card if applicable
Size > 10MB -> applicable!

Performance
(How it feels)

Performance
Stability

Performance
Stability No:
> Crashes/force closing

Performance
Stability No:
Crashes/force closing
> Freezing/ANRs

Performance
Stability No:
Freezing/ANRs
> Abnormal behaviour

Performance
Stability No:
Freezing/ANRs
Abnormal behaviour
On Any target device!

Performance
- Stability
Responsiveness
Load quickly

Performance
- Stability
Responsiveness
Load quickly (< 2 seconds)

Performance
- Stability
Responsiveness
Load quickly
OR

Performance
- Stability
Responsiveness
Load quickly
OR
Provide feedback

Performance
- Stability
Responsiveness
Load quickly OR
Provide feedback:
> Progress bar

Performance
- Stability
Responsiveness
Load quickly OR
Provide feedback:
Progress bar
> Splash screen

Performance
- Stability
- Responsiveness
Efficiency
No StrictMode red marks

Performance
- Stability
- Responsiveness
Efficiency
No StrictMode red marks
(= When StrictMode is on)

Performance
- Stability
- Responsiveness
- Efficiency
Battery
Where available (6.0+)

Performance
- Stability
- Responsiveness
- Efficiency
Battery
Where available (6.0+):
> + Doze & app standby

Performance
- Stability
- Responsiveness
- Efficiency
Battery
+ Doze & app standby
> Exemptions

Performance
- Stability
- Responsiveness
- Efficiency
Battery
> Exemptions:
- Core func. disrupt

Performance
- Stability
- Responsiveness
- Efficiency
Battery
> Exemptions:
Core func. disrupt
- needs approval

Google Play
(How it is listed)

Google Play
Policies

Google Play
Policies Content legality

Google Play
Policies Content legality:
> Appropriateness

Google Play
Appropriateness
> Intellectual proprietary

Google Play
Appropriateness
Intellectual proprietary
> Matureness

Google Play
- Policies
Details page
Graphics

Google Play
- Policies
Details page
Graphics:
> High quality

Google Play
- Policies
Details page
Graphics:
High quality
> No device images

Google Play
- Policies
Details page
Graphics:
High quality
No device images
> No screenshots

Google Play
- Policies
Details page
Graphics:
High quality
No device images
No screenshots
> No small text

Google Play
- Policies
Details page
Graphics:
High quality
No device images
No screenshots
No small text
> Not an advert

Google Play
- Policies
Details page
Graphics
Screenshots & video

Google Play
- Policies
Details page
Graphics
Screenshots & video:
> No non-Android devices

Google Play
- Policies
Details page
Graphics
Screenshots & video:
No non-Android devices
> Non-misleading

Google Play
- Policies
Details page
Graphics
Screenshots & video
User support

Google Play
- Policies
Details page
Graphics
Screenshots & video
User support:
> Large impact bugs

Google Play
- Policies
Details page
Graphics
Screenshots & video
User support:
> Large impact bugs:
- Popular devices

Google Play
- Policies
Details page
Graphics
Screenshots & video
User support:
> Large impact bugs:
- Popular devices
- Many devices

Google Play
- Policies
Details page
Graphics
Screenshots & video
User support:
Large impact bugs
> Specific bugs

Wear app quality
checklist
Wear it like you mean it

Visual
(What you see 2 - this time it’s wearable)

Visual
Layout

Visual
Layout Formatted for displays

Visual
Layout Formatted for displays:
> Round/square

Visual
Round/square
> Fits physical display

Visual
Round/square
Fits physical display
> Nothing is cut

Visual
Text is legible

Visual
Text is legible
(=Min<16sp)

Visual
- Layout
Launcher
Launcher is app name

Visual
- Layout
Launcher
Launcher is app name
(= Not command)

Visual
- Layout
- Launcher
Notifications
Confirmation animations

Visual
- Layout
- Launcher
Notifications
App icon, top-right on card

Visual
- Layout
- Launcher
Notifications
(-ex. single action card)

Visual
- Layout
- Launcher
Notifications
Color palette

Visual
- Layout
- Launcher
Notifications
Color palette:
> White icon & title

Visual
- Layout
- Launcher
Notifications
Color palette
Photo background

Visual
- Layout
- Launcher
Notifications
Color palette
Photo background:
> Informative

Visual
- Layout
- Launcher
Notifications
Color palette
Photo background:
Informative (!branded)

Visual
- Layout
- Launcher
Notifications
Color palette
Photo background:
Informative
> Resolution - 400x400

Visual
- Layout
- Launcher
- Notifications
Google Play
Includes a wear screenshot

Functional
(What you get 2 - The revenge)

Functional
General

Functional
General Wearable functionality

Functional
Visible to the user

Functional
Visible to the user
As advertised in Google Play

Functional
- General
Packaging
Depended apps = packaged

Functional
- General
- Packaging
Notifications
Wearable specific func.

Functional
- General
- Packaging
Notifications
Wearable specific func.:
> RemoteIntent

Functional
- General
- Packaging
Notifications
Wearable specific func.:
RemoteIntent
> WearableExtender

Functional
- General
- Packaging
Notifications
Reply

Functional
- General
- Packaging
Notifications
Reply:
> Voice

Functional
- General
- Packaging
Notifications
Reply:
Voice
> Quick responses

Functional
- General
- Packaging
Notifications
Reply
Notification stack

Functional
- General
- Packaging
- Notifications
Gestures
Fullscreen activities

Functional
- General
- Packaging
- Notifications
Gestures
Fullscreen activities:
> Long press = quit

Functional
- General
- Packaging
- Notifications
Gestures
Fullscreen activities:
Long press = quit
> No swipe to dismiss?
= long press to dismiss

Functional
- General
- Packaging
- Notifications
- Gestures
Watch face
Official watch face API

Tablet app quality
checklist
Here we go again...

General
Basic Target API levels

General
Specify HW dependencies

General
Declare tested screen sizes

General
Use the entire screens

General
Use the entire screens
Tablet screenshots on Play

General
- Basic
Layouts
Custom layout.xml(s)

General
- Basic
Layouts
Dynamic screen size (+Min)

General
- Basic
Layouts
Dimens

General
- Basic
Layouts
Dimens
Font size

General
- Basic
Layouts
Dimens
Font size
Padding (48p, 16p grid)

TV app quality
checklist
As seen on TV

Auto app quality
checklist
The Auto-rity (wow that’s terrible)

Design guidelines
Material-ize

Animation
(Meaningful and authentic)

Animation
Motion Authentic mass and weight

Natural accel./decel.
Animation

(= Avoid linear)
Animation

Entrances and exits
Animation

Entrances and exits
- Constant speed =
less attention
Animation

- Motion
Interaction
Animation
Responsive

- Motion
Interaction
Animation
Responsive
Tangible

- Motion
Interaction
Animation
Responsive
Tangible
(= As If there’s no glass)

- Motion
Interaction
Animation
Responsive
Tangible
Instant visual confirmation

- Motion
Interaction
Animation
Responsive
Tangible
Instant visual confirmation
At point of contact

- Motion
- Interaction
Transitions
Animation
Types

- Motion
- Interaction
Transitions
Animation
Types:
> Incoming

- Motion
- Interaction
Transitions
Animation
Types:
> Incoming
(= New items)

- Motion
- Interaction
Transitions
Animation
Types:
Incoming
> Outgoing

- Motion
- Interaction
Transitions
Animation
Types:
Incoming
> Outgoing
(= Contextually non-relevant)

- Motion
- Interaction
Transitions
Animation
Types:
Incoming
Outgoing
> Shared

- Motion
- Interaction
Transitions
Animation
Types:
Incoming
Outgoing
> Shared
(= Constant)

- Motion
- Interaction
Transitions
Animation
Types
Tips

- Motion
- Interaction
Transitions
Animation
Types
Tips:
> Direct user attention

- Motion
- Interaction
Transitions
Animation
Types
Tips:
Direct user attention
> Connect visually

- Motion
- Interaction
Transitions
Animation
Types
Tips:
Direct user attention
Connect visually
> Precision

Layout
(Fab paper)

Layout
Paper Seams

Layout
Paper Seams:
> 2 joined pieces of paper

Layout
Paper Seams:
- 2 joined pieces of paper
(= Move together)

Layout
Paper Seams
Steps

Layout
Paper Seams
Steps:
- 2 overlapping pieces

Layout
Paper Seams
Steps:
- 2 overlapping pieces
(= Have depth)

Layout
- Paper
FAB
It’s a button

Layout
- Paper
FAB
It’s a button
(= Use it correctly)

With a little help from my libs by Royi Benyossef (+royiby)
Summary
(What did we have here?)

Android * checklists
Summery

- Android * checklists
Google * design guidelines
Summery

“We should be building great
things. Things that Don’t yet
exist”

I Hope You Liked It
Thank you for listening
By Royi Benyossef (+royiby)

Are you experienced

Recommended

Recommended

More Related Content

Similar to Are you experienced

Similar to Are you experienced (10)

Recently uploaded

Recently uploaded (20)

Are you experienced