How Can the Turtle Look - On Application Responsiveness: Like a Gazelle
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
On Application Responsiveness:
How Can the Turtle Look
Like a Gazelle
Dana Gilboa
Efrat Ben David
Amichai Nitsan
HP AppPulse Mobile
There is such a thing as bad PR
3 stars apps analysis
Consistent Sporadic
Application average rating is Ratings fall into two distinct categories:
consistent among users. Some of the users really like the
Comments mostly talk about application and rate it with 5 stars.
Poor Functionality Some complain about stability
and missing features and performance and rate
the app as 1 or 2 stars
“90 percent surveyed stopped using an app
due to poor performance”
Attention Span Study, conducted by AppDynamics in partnership with the Institute of
Management Studies (IMS) at Goldsmiths, University of London
About Response time and Responsiveness Nominal Responsiveness User perception of the time it takes the latency application to complete operations.
The problem is not the
problem. The problem is your
attitude about the problem
Capt. Jack Sparrow
Image source: http://upload.wikimedia.org/wikipedia/en/a/a2/Jack_Sparrow_In_Pirates_of_the_Caribbean-_At_World%27s_End.JPG
On Application Responsiveness
Dana Gilboa
Efrat Ben-David
Amichai Nitsan
HP AppPulse Mobile
Application Launch New Screen Loading Screen Transition Action Feedback Spinners And Progress Bars Interactions The Real World
Application
Launch
That Looks Fast
You Never Get A Second Chance
To Make A First Impression
Image source: http://erikmanassy.com/wp-content/uploads/2013/11/hand-holding-iphone.pngLaunch Images (iOS) Are There For A Reason
• Best practice: launch images
should look like a skeleton of
the first screen
• In Android, simulate with an
activitySplash Screens Can Make App Launch Look
Faster
• Spinner
• Animation
• Tips
• Stay with one splashAvoid Splash
Screen On
Fast Launches
With Splash Without SplashHome Screens Can Load Fast
• Prefer static home screens
• More time for loading
• Start with cached content
from last sessionApplication Launch Tips 1. Use launch images 2. On quick launch: Avoid splash 3. On long launch: delay the splash for 2 sec 4. Don’t Switch between launch patterns 5. Prefer static/cached but fast home screen
Fast Loading a New Screen
How To Build a New Screen?
• “Appear” or “Build”?
• Actionable (responsive) or not?
• “Appear” if loading fast
• Responsive if possible
• Back / Cancel button is
top priorityPlace Holders Help Making The Impression
Content Was Already Loaded
1. Use place holders when there are
multiple items to load
2. Prefer progressive images
3. Match real objects size
4. Don’t make place holders look
like an error
5. Prefer content-specific iconsFetch Most
Important
Content First
Random Fetch Important
Order Data FirstScreen Building 3 Don’ts
1. Don’t add unneeded content (?!)
2. Don’t block with overlays
3. Don’t wait for 3rd party servicesScreen Loading Tips 1. “Appear” looks faster for fast loads 2. Responsive “Back” button first 3. Place holders when loading multiple items 4. Fetch Most Important Content First 5. Don’t wait for 3rd party services
Screen Transition That Looks Faster
Prefer
Non-Blocking
Transitions
Blocking Non BlockingBlocking Non Blocking Disappear Nothing to do with current Current screen is still relevant Next screen can be loaded screen and immediately and unable to load the next screen unable to load the next screen
Screen Transitions Tips 1. Prefer non-blocking behavior 2. Disappearing existing screen and loading the new screen in under 2 seconds looks the fastest, naturally
Responsive
Applications
Provide
Immediate
Feedback
Image source http://img.photobucket.com/albums/v483/sago/BigRedButton.jpgAction Feedback
Stating the obvious:
• Provide immediate feedback (ACK)
• Disable further actions on the button to
avoid duplications
1. HTML components having the 300ms delay problem
2. Buttons with “style=custom_button” in Android will
not have default feedbackHow Spinners
Can Make Your
App Feel
Faster… Or
SlowerSpinners And Progress Bars Design I n t e r e s t L e v e l
Spinners And Progress Bars Tips 1. Prefer smaller spinners 2. Wait 0.4 seconds before showing 3. Change spinner states over time 4. Progress bars should progress faster toward the end
How To Make
Interactions
Look
Faster
Image source http://www.nashvilletnwebsites.com/wp-content/uploads/2012/11/hand-pressing-button.jpgInfinite Scroll
• Optimizing “above the fold” content
“Above The Fold” is the portion of
the website that is viewable without
any further action.
• When is the best time to fetch Content
to fetch
additional content?
Network
consumption User
experienceHandling Long Operations
• Some actions will always be too long
• Don’t make the user wait for
completion
• Instead, move to background
1. Notify the user when background
starts and ends
2. Be optimistic when possible!Time Flies When You're Having Fun
• Split a long process into a series of mini-actions
• User perceives this as a faster process
Example: very popular image sharing application:
Select Picture Social Media Picture Is
Select Filters Rotate Picture Add Caption
For Upload Sharing Uploaded
Upload PictureInteractions Tips 1. Move long actions into the background whenever possible 2. Balance the tradeoff between prefetching and network usage 3. Split long process into several mini steps 4. Be optimistic about the success of server operations
How Can You Make Your App Faster In The Real Word?
The Real World
Different Users Experience The Application Differently
VS. 3G
OS Version Form Factor Network Type LocationThe Real World 1. Use tools to test different connection speeds 2. Use device labs to test different models 3. Monitor your apps interactions with real users
Wrap-up • Perceiving an app as fast == $$$ • Time Flies When You're Having Fun • Anticipate long actions and be proactive • There are tricks for almost every problem • Verify recommendations
Further References • Nearly 90 Percent Surveyed Stop Using Apps Due to Poor Performance by Dustin Whittle • Above the Fold Time: Measuring Web Page Performance Visually by Jake Brutlag (Google) • Seven Guidelines For Designing High-Performance Mobile User Experiences by Ivo Weevers • Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations by Harrison et al. • Improving perceived site performance with spinners by Piotr Zalewa • Mobile Design Details: Avoid The Spinner by Luke Wroblewski • Secrets to Lightning Fast Mobile Design by Mike Krieger • Don't Make Me Wait! User Perception of Time & Software Speed by Chris Kiess • An Introduction to Perceived Performance By Matt West • Why Does Your App Only Get a 3-Star Rating? By Michael Gopshtein
Questions?
Dana Gilboa
Efrat Ben-David
Amichai Nitsan
Come and visit us at the
Pronq boothYou can also read
