Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Mustafa Kurtuldu] Designing for speed and hacking users perception

[Mustafa Kurtuldu] Designing for speed and hacking users perception

Content level: Beginner

In this talk I will go through research completed at Google regarding speed and users perception and how we can hack that to make sites and apps feel faster.

Mustafa Kurtuldu
Google / United Kingdom


Google Developers Group Lviv

October 13, 2018


  1. Designing for speed & Hacking Users Perception Mustafa Kurtuldu @mustafa_x

  2. Speed Why is it important?

  3. Photo by Jay Wen on Unsplash Occupied time Vs Unoccupied

  4. Photo by Saffu on Unsplash Parked the plane further away

    from the terminal, complaints dropped to about zero
  5. #dfua Occupied time vs unoccupied Waiting Walking Occupied Unoccupied 7

  6. Speed The Financial Times

  7. “ By making the site 1 second faster we could

    increase engagement by 5% “ - Cait O’Riordan, The Financial Times
  8. #dfua 53% of mobile site visits are abandoned if pages

    take longer than 3 seconds to load.
  9. #dfua For every 2 extra seconds to load, bounce rates

    go up to 50%.
  10. #dfua Conversions fall by 12% for every extra second it

    takes for page load.
  11. #dfua User behaviour is affected by; State of mind Occupied

    time Intention Importance State of body
  12. #dfua 30% Web visits are triggered by many things... 30%

    29% I was just browsing without a particular purpose or need in mind (34% for Retail sites) I wanted to find out about something that I might do in the future (49% for Travel sites) I wanted to do something then and there (57% for Financial sites) Source: Need for speed research, Google.
  13. #dfua Where do users browse the mobile web? Relaxed Calm

    State of mind Location Home Work 8% Traveling / on the move 82% 7% Elsewhere 3% 74% 76% Source: Need for speed research, Google.
  14. #dfua Sites load faster at home Location Slow page loads

    (4 seconds or more) more likely when out & about Fast page loads (1 second or less) more likely at home At home At work Out & About 27% 36% 37% 27% 56% 17% 40% 43% 17% Source: Need for speed research, Google.
  15. #dfua Users alternate devices throughout the day Desktop Mobile 31%

    69% Time spent 80% 20% Money spent 49% Gap Source: comScore MMX Multi-Platform and e-Commerce & m-Commerce Measurement , Q3 2016
  16. #dfua Load speed is important to people Perceived importance of

    load speed to the mobile web experience: Extremely important 1% Not at all important 4% 20% 35% 40% 3 4 5 6 7 2 1 Source: Need for speed research, Google.
  17. #dfua UX importance hierarchy 75% 66% 61% 58% 24% The

    speed it takes to load a page How easy it is to find what I'm looking for How well the site fits my screen How simple the site is to use How attractive the sites looks Source: Need for speed research, Google.
  18. #dfua Speed is broken up into two pieces, real and

  19. “ We perceive a delay on loading which is 80

    milliseconds more than the reality. “ - @pbakaus
  20. #dfua A third of visits were perceived to be slow

    All visits where page took 4 seconds or less to load 32% Perceived to have loaded fast Not perceived to have loaded fast 68% Source: Need for speed research, Google.
  21. #dfua 70% People under 25 generally perceive load times as

    slower 18-24s 25-34s 35-44s % perceived website / web page to have loaded relatively fast: 50% 71% Source: Need for speed research, Google.
  22. #dfua 75% When on the move, things also feel slower

    52% On the move Sat down Source: Need for speed research, Google.
  23. #dfua Speed matters on the mobile web, but perception of

    speed is just as important.
  24. Photo by Jay Wen on Unsplash Occupied time Vs Unoccupied

  25. #dfua General guide Response times 200 ms 1 s 5

    s 8 s Feels instant Feels it is performing smoothly Part of user flow Lose attention
  26. #dfua Remove the 300-350ms tap delay Add the following in

    the of your page: <meta name='viewport' content='width=device-width'>
  27. #dfua Responsive Touch Feedback

  28. #dfua Progress bars with ripples that animate towards the left

    appear to load 11% loading faster.
  29. #dfua Use animations to start slow and end fast Disguise

    slow loading times in the beginning with delightful animations.
  30. #dfua Use stagger to important transitions. Transitions are embellished with

    a stagger
  31. #dfua Skeleton Screens An animated placeholder UI shows that content

    is loading.
  32. #dfua Blank

  33. #dfua Blank Blank Spinner

  34. #dfua Skeleton Blank Spinner

  35. #dfua Staggered & metadata Skeleton Blank Spinner

  36. #dfua Staggered & metadata Skeleton Blank Spinner

  37. #dfua http://bit.ly/DesignerVsDeveloper

  38. #dfua Mask loading time with transitions Instead of showing a

    spinner, brief animations can mask the loading transition to imply that the system is “progressing” rather than “processing”. Progressing Processing
  39. #dfua Navigation patterns In summary Out of sight, out of

  40. #dfua Top tabs Frequent switching between views Apps with few

    top-level views Using a label AND icon we find works best Source: uxmyths.com/post/715009009/myth-icons-enhance-usability
  41. #dfua Bottom navigation bar Promoting awareness of alternate views Appears

    at the bottom of every screen. Destinations should be of equal importance
  42. #dfua Floating Action Button (FAB) Represents the primary action in

    an application Should perform a constructive action like create, share, or explore Should be relevant to the screen
  43. #dfua App bars: Top Displays information and actions relating to

    the current screen Appears at the top of each screen and can disappear upon scroll Provides a reliable way to guide users through an app
  44. #dfua App bars: Bottom Provide access to a bottom navigation

    drawer and up to four actions, including the FAB Layout and actions change based on the needs of the screen Easy to reach from a handheld position on a mobile device
  45. #dfua Navigation drawer Apps with many top-level views Quick navigation

    between unrelated views Deep navigation structures Reducing visibility of infrequent destinations
  46. #dfua Backdrop drawer Appears behind all other surfaces in an

    app, displaying contextual and actionable content Displays content and controls that relate to the front layer Focuses attention on one layer at a time
  47. #dfua Navigation patterns Which work best?

  48. #dfua Google+ Navigation hidden and lost/overwhelmed users Simpler access core

  49. #dfua Google+ 1.2 million community joins per day And only

    7 thousand event creations per day
  50. #dfua Google+ When someone joins a Community, they are more

    likely to... 3.8x post 6.7x comment 7.3x plus one
  51. #dfua Google+ What happened when we put them in the

    bottom menu? So Collections & Communities are critical for growing engagement.
  52. Collection follows per day grew 3x Remember our strongest indicator

    of who comes back to our app (after their first day) is following a Collection Source: Luke Wroblewski
  53. Community joins per day more than doubled Strongest indicator of

    who comes back three weeks later is joining a Community and when people join Communities, they are much more likely to post, comment, and plus one. Source: Luke Wroblewski
  54. #dfua As we saw a huge impact on critical metrics

    when we added the bottom menu Out of sight really was out of mind
  55. #dfua Bottom navigation has been hugely successful at driving engagement

    with G+ core features * * Step one is knowing what your core features are.
  56. #dfua Facebook An increase in engagement, satisfaction, revenue, speed, perception

    of speed.
  57. #dfua Redbooth Number of user sessions more than doubled! Session

    time increased 70% More customers returned, with a 65% increase in daily active users nearly overnight.
  58. #dfua Spotify Tab bar ended up clicking 9% more in

    general. 30% more on menu items. Reduced number of options to five increased the reach of Spotify’s programmed content.
  59. #dfua The Hunt Improving first-time user engagement with the FAB;

    30% increase in users starting “hunts” relative to non-Material platforms.
  60. #dfua Trello Increasing engagement since the FAB; 10% increase in

    sessions 42% more boards created per session
  61. #dfua Navigation patterns In summary Out of sight, out of

  62. #dfua Summary Avoid blank screen. Show content as soon as

    possible. Bold animations and partial content placeholders makes the app look like it is “progressing”, avoid “processing”. Distract users and fill up their time with fun animations. Put navigation front and center.
  63. Photo by Saffu on Unsplash Park the plane further away

    from the terminal
  64. Much more detail at bit.ly/speedebook

  65. Thank you! Questions? Mustafa Kurtuldu @mustafa_x