1.
www.trebbble.co

2.
AGENDA
Mobile Ecosystem (rules, constraints & challenges)
Mobile App Lifecycle
Focus on Mobile App Flow
Analysis of Beauty & Creativity Aspects
App Submission & Future Improvements
Practice In Action

3.
UX DOMINATES
WHEN TECHNOLOGY DELIVERS BASIC NEEDS
Donald Norman

4.
MOBILE
KNOW WHAT YOU WORK ON

5.
OS FRAGMENTATION
RESPECT SPECIFIC PLATFORM CHARACTERISTICS
AND, CONSEQUENTLY, THE USERS THEMSELVES

6.
DEVICE FRAGMENTATION
WITHIN THE SAME PLATFORM
18,796
Distinct Android devices
in 2014
240x320 - 1600x2560
Screen Resolution range you
have to compensate
OpenSignal 2014, opensignal.com

7.
DEVICE FRAGMENTATION
WITHIN THE SAME PLATFORM
www.paintcodeapp.com

8.
DEVICE H/W CAPABILITIES
UNIQUE MOBILE CONTEXT
MOTION SENSORS
Accelerometers
Gravity Sensors
Gyroscope
Rotational
ENVIRONMENTAL SENSORS
Air Temperature & Pressure
Illumination
Humidity
Barometers
Photometers
POSITION SENSORS
Orientation Sensors
Magnetometers
macro & micro location
EVEN MORE
Camera (front & rear)
Microphone
Fingerprint
…

9.
MOBILE ECOSYSTEM
IS EVOLVING DAY-BY-DAY

10.
USER BEHAVIOUR
ON-THE-GO & MULTI-TASKING
80%
USE SMARTPHONES ON-THE-GO
64%
USE SMARTPHONES IN COFFEE SHOPS
54%
USE SMARTPHONES WHILE WATCHING TV

11.
MOBILE ECOSYSTEM
OFFERS GREAT CHALLENGES FOR UX
DESIGNERS

12.
MOBILE APP
LIFECYCLE
& THE ROLE OF A UX DESIGNER
Foursquare App - Early visual design explorations

13.
MYTH #31
UX DESIGN IS A STEP IN A PROJECT
uxmyths.com

14.
MOBILE APP LIFECYCLE
THE 3 STAGES
DISCOVERY
UX & VISUAL DESIGN
QUALITY
ASSURANCE
MARKET LAUNCH
SUPPORT &
IMPROVE
PROJECT PLAN
ROADMAP
ENGINEERING
ACQUIRE & ENGAGE

15.
DISCOVERY
WHICH IS YOUR TARGET AUDIENCE

16.
DISCOVERY
WHICH ARE THE BUSINESS GOALS
LOYALTY / SALES / BRAND AWARENESS / INDUSTRY LEADER
necessitate different UX approach

17.
DISCOVERY
WHERE & WHEN EXPERIENCE TAKES PLACE
IN-STORE OR OUTDOOR / DAY OR NIGHT
impose different needs

18.
UX RESEARCH
INDUSTRY ANALYSIS
INDUSTRY TRENDS / COMPETITORS / FIELD INNOVATORS /
SIMILAR APPS / CLIENT WEBSITE

19.
UX RESEARCH
PERSONAS ANALYSIS
CREATE PERSONAS / BUILD SCENARIOS /
UNDERSTAND USERS’ CONTEXT & PSYCHOLOGY

20.
FOCUS ON APP FLOW
START WITH SCREEN TRANSITIONS; VISUAL DESIGN COMES
LATER

21.
APPLICATION FLOW
INITIAL SCREEN FLOW SKETCHING
START WITH A WHITEBOARD;
GOOD FOR TEAM BRAINSTORMING

22.
APPLICATION FLOW
INITIAL SCREEN FLOW SKETCHING
CONTINUE WITH PAPER SKETCHING;
GREATER FOCUS TO HELP IMPROVE APP FLOW

23.
APPLICATION FLOW
LOW-FIDELITY PROTOTYPE
QUICK TESTING TO VERIFY IDEAS, APP FLOW
AND ENSURE USABILITY

24.
APPLICATION FLOW
DIGITIZE IT ;)
VISUAL HIERARCHY / CONTENT GROUPING /
SPACING / POSITIONING

25.
SYNC WITH DEVELOPERS
MAKE SURE THAT YOUR FLOW IS FEASIBLE

26.
APPLICATION FLOW
(FINAL) WIREFRAMES
CONTENT HIERARCHY AND APPLICATION FLOW
— SHARE WITH THE CLIENT; IT WILL SAVE TIME!!! —

27.
APP FLOW TIPS
KEEP THEM ALWAYS IN MIND

28.
PAPER SKETCHING TIPS
BALANCE BUSINESS & DESIGN
EVERY LEFT PAGE IS DEVOTED TO BUSINESS BRAINSTORMING;
EVERY RIGHT PAGE TO SKETCHING DESIGNS

29.
CONTENT HIERARCHY
LESS IS MORE
MORE
IMPORTANT
LESS
IMPORTANT
EMPHASISE ON THE PRIMARY CONTENT
GET RID OF ALL THE EXTRA CLUTTER THAT DOESN’T ADD VALUE

30.
CONTENT HIERARCHY
HOW USERS HOLD MOBILE DEVICES
49% 36% 15%

31.
CONTENT HIERARCHY
HOW USERS HOLD MOBILE DEVICES
90% 10%

32.
NAVIGATION
MAKE IMPORTANT THINGS FAST
ENSURE MINIMUM STEPS
FOR THE CORE FUNCTIONALITY
- IF POSSIBLE, MAKE IT EASILY EXTENDABLE -

33.
NAVIGATION
DON’T IGNORE PLATFORM UX
EPIC FAIL!!!
NO RESPECT TO ANDROID USERS

34.
BEAUTY & CREATIVITY
MAKE IT SEDUCTIVE, MEMORABLE
Workspace of Jeremy Goldberg - UX Designer @Google

35.
FIRST IMPRESSION
MATTERS
THIS IS WHERE YOU WIN A MOBILE USER

36.
YOU NEVER GET A SECOND CHANCE TO
MAKE YOUR FIRST IMPRESSION

37.
THE FIRST IMPRESSION
SPLASH SCREEN
Timehop Directr Artsy KidCam

38.
THE FIRST IMPRESSION
WALKTHROUGHS
USE OF INSPIRATIONAL PHOTOGRAPHY
ALONG WITH APP BENEFITS
Airbnb Application

39.
THE FIRST IMPRESSION
WALKTHROUGHS
SIMPLY INTRODUCE HOW-TO-USE THE APP
Stacks Application

40.
THE FIRST IMPRESSION
WALKTHROUGHS
FUNNY APPROACH
Clique Application

41.
THE FIRST IMPRESSION
SIGN UP FORMS
TriplAgent ChitChat Timehop
SMALL-SIZED FORMS / SIMPLICITY / CREATIVITY

42.
THE FIRST IMPRESSION
ONBOARDING
FULL OF CREATIVITY
Citymapper Application

43.
INSPIRATIONAL PATTERNS
LEARN FROM THE BEST, REAL APPS

44.
MOBILE PATTERNS
EMPHASIS ON PHOTOGRAPHY & SHORT DETAILS
LISTS
Yahoo News Digest Snapguide Sosh - City Guide Day One

45.
MOBILE PATTERNS
LISTS
Gogobot Peek Calendar Hotel Tonight Clear
FLAT APPROACH

46.
MOBILE PATTERNS
NICE ALTERNATIVE TO LISTS
COVER FLOWS
Foodspotting DIY Dcovery Beat

47.
THE FIRST IMPRESSION
PROFILE VIEWS
EVOLUTION OVER TIME
Foursquare Application

48.
MOBILE PATTERNS
CONTENT/VENUE DETAILS
Airbnb Foursquare TriplAgent

49.
THE FIRST IMPRESSION
NAVIGATION - SIDEBARS
EVOLUTION OVER TIME
Rdio Application

50.
MOBILE PATTERNS
NAVIGATION ALTERNATIVES
Storylane Reader Ultravisual Huffington Post LinkedIn Connected

51.
MOBILE PATTERNS
POPOVERS
Two Dots Dots Lootsy Rdio

52.
DETAILS MATTER
NEVER NEGLECT “SECONDARY” SCREENS

53.
MOBILE PATTERNS
GUIDE THE USER
EMPTY DATA
RunKeeper Circa News Potluck iMovie

54.
THE FIRST IMPRESSION
EMPTY DATA
Clique Frontback
BE CREATIVE

55.
THE FIRST IMPRESSION
ERRORS
Timehop WIND My Q
KEEP THE USER (POSITIVELY) SURPRISED

56.
MOBILE PATTERNS
COACH MARKS
Secret MySpace Flink Facebook Paper
HELP USER UNCOVER ALL OPTIONS

57.
MOBILE PATTERNS
ABOUT
Peek Calendar Harmony Yplan Coco’s Workout World
PROVIDE CONTACT INFO / PROMOTE YOUR BRAND

58.
ANIMATIONS MATTER
SKYROCKET THE EXPERIENCE

59.
ANIMATIONS
IN WALKTHROUGHS
Mark Geyer @dribbble

60.
ANIMATIONS
IN MENU OPTIONS
Karol Ortyl @dribbble

61.
ANIMATIONS
IN MENU OPTIONS
Sergey Valiukh @dribbble

62.
ANIMATIONS
IN LOADING
Cuberto @dribbble

63.
ANIMATIONS
IN LOADING
Jan Semler - Animation

64.
ANIMATIONS
PULL-TO-REFRESH
Dmytro Prudnikov @dribbble

65.
SYNC WITH DEVELOPERS
MAKE SURE THAT YOUR VISUAL APPROACH IS FEASIBLE

66.
VISUAL DESIGN TIPS
KEEP THEM ALWAYS IN MIND

67.
SIMPLIFY UI
ENHANCE BLOCK SPACING
CLEAN UI / COLOUR SPACING / NO LINES OR DIVIDERS
Peek Calendar Application

68.
COLOR SCHEMES
HIGHLIGHT ACTIONS
Lumosity Sosh - City Guide Timehop
ENHANCE FOCUS ON ACTIONS

69.
LAYERED UI
TRANSLUCENT ELEMENTS
ENHANCE CONTENT FOCUS & HIERARCHY
Yahoo Weather Application

70.
BUTTONS
DON'T MIMIC UI ELEMENTS FROM OTHER PLATFORMS

71.
BUTTONS
MULTIPLE STATES
ALWAYS PROVIDE FEEDBACK TO THE USER

72.
BUTTONS
CONSIDER HIDDEN BUTTONS
GESTURES LEAD TO EVEN CLEANER & SIMPLER UI

73.
BRANDING
KEEP IT UNOBTRUSIVE
RECOMMENDED NOT RECOMMENDED
USE SPACE ONLY FOR THE CONTENT USERS CARE ABOUT

74.
TONE OF VOICE
KEEP IT SIMPLE & FRIENDLY

75.
PREPARE UI SPECS
MAKE DEVELOPERS’ (& REST DESIGNERS’) LIFE EASY

76.
CREATE UI ELEMENTS
YOUR FRIEND
QUICKLY EXPORT PSD ELEMENTS
- SUPPORTS RETINA -

77.
SPECIFY UI ELEMENTS
YOUR DEVELOPERS’ FRIEND

78.
MOBILE UI SPECIFICATIONS
DOCUMENTS
FINAL WIREFRAMES
HIGH-FIDELITY MOCKUPS
UI ELEMENTS
All the above should be part of the overall app specifications document

79.
QUALITY ASSURANCE
ENSURE APP QUALITY

80.
QUALITY ASSURANCE
HOW CAN YOU HELP
PARTICIPATE IN UAT SCENARIOS
EXTENSIVE MANUAL TESTING
Focus on both usability & visual aspects

81.
APP SUBMISSION
THE VERY FIRST IMPRESSIONS START HERE
Foursquare App - App Store screenshots

82.
APP SUBMISSION
APP ICON
App Icon inspiration, @dribbble

83.
APP SUBMISSION
APP STORE SCREENSHOTS
Camu iPhone App

84.
APP SUBMISSION
APP STORE SCREENSHOTS
Fuse iPhone App

85.
SUPPORT & IMPROVE
ECOSYSTEM CHANGES EVERY DAY. ADAPT.
Apple Event, Sep 2014

86.
LESSON #1
GET TO KNOW MOBILE CONSTRAINTS & CAPABILITIES

87.
LESSON #2
WORK ALONG WITH DEVELOPERS

88.
LESSON #3
STOP THINKING OF SCREENS AND START THINKING OF TRANSITIONS

89.
LESSON #4
WORK HARD ON INFORMATION ARCHITECTURE

90.
LESSON #5
GOD LIVES IN THE DETAILS

91.
LESSON #6
ANIMATIONS SKYROCKET MOBILE EXPERIENCE

92.
LESSON #7
STUDY & RESPECT OS PATTERNS AND BUILDING BLOCKS

93.
ONE LAST TIP
DOWNLOAD NUMEROUS APPS. DAILY.