Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Understanding UX & Hacking Perceived Performance

2 042 vues

Publié le

We all care about making pages faster, but *why* do we care? And how fast is fast enough? In this talk at the NY Web Performance Meetup, I shared findings — from user surveys, eyetracking studies, and neuroscientific research — that answer these questions. I also shared some tips for creating the illusion of faster pages.

Some of the questions covered during this session:

• Why do we, as internet users, crave fast online experiences?
• There are a ton of performance metrics, but which one(s) are the best for measuring perceived UX?
• Are users more sensitive to performance issues in some contexts than in others? What are those contexts?
• Do people perceive performance differently on their desktop and mobile devices?
• What are the page-level issues that hurt UX the most?
• What are some tricks you can use to make pages *appear* to render faster?

Publié dans : Internet
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Understanding UX & Hacking Perceived Performance

  1. 1. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 Understanding UX & Hacking Perceived Performance NY Web Performance Meetup • May 2016
  2. 2. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 @tameverts performancebeacon.com WPOstats.com
  3. 3. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 3
  4. 4. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 4 Source: 1&1 Internet
  5. 5. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 5 The average web user believes they waste two days a year waiting for pages to load. Source: 1&1 Internet
  6. 6. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 6 Source: Akamai
  7. 7. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 7 Source: Stoyan Stefanov, The Psychology of Speed
  8. 8. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 8 Source: webperf.io
  9. 9. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 9 “The real thing we are after is to create a user experience that people love and they feel is fast… and so we might be front-end engineers, we might be dev, we might be ops, but what we really are is perception brokers.” Steve Souders
  10. 10. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 10 “Oh… pity the hyper-impatient web generation. Such busy lives with so many important things to do — like post the latest drivel onto their Facebook pages or download the YouTube viral video of the day. Oops, sorry — of the minute.” Reader comment “For Impatient Web Users, An Eye Blink Is Too Long to Wait” The New York Times
  11. 11. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 11 Source: Jakob Nielsen
  12. 12. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 12
  13. 13. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 13 “We want you to be able to flick from one page to another as quickly as you can flick a page on a book. So we’re really aiming very, very high here… at something like 100 milliseconds.” Urs Hölzle Senior Vice President of Technical Infrastructure Google
  14. 14. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 14
  15. 15. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 15
  16. 16. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 16 fast slow
  17. 17. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 17
  18. 18. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 18
  19. 19. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 19
  20. 20. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 20
  21. 21. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 21 “Time is measured objectively but perceived subjectively, and experiences can be engineered to improve perceived performance.” Ilya Grigorik High Performance Browser Networking
  22. 22. Progress indicators
  23. 23. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 23
  24. 24. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 24 A progress indicator on a page that loads in <5 seconds will make that page feel slower. Best case: 10+ seconds
  25. 25. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 25 Progress bars that offer the illusion of a left-moving ripple can improve perceived wait time by up to 10%.
  26. 26. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 26 Progress bars that pulse, and that increase pulsation frequency as the bar progresses, are perceived as being faster.
  27. 27. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 27 Progress bars that speed up are considered more satisfying by users.* *Think back to that colonoscopy research
  28. 28. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 28 But… Use them sparingly.
  29. 29. Images
  30. 30. 30
  31. 31. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 31
  32. 32. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 32
  33. 33. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 33 When do users start to interact with a page?
  34. 34. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 34 Source: Radware, Progressive JPEGs: Good or Evil?
  35. 35. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 35 “When, as with the Progressive JPEG method, image rendition is a two-stage process in which an initially coarse image snaps into sharp focus, cognitive fluency is inhibited and the brain has to work slightly harder to make sense of what is being displayed.” Dr. David Lewis Chair, Mindlab International
  36. 36. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 36
  37. 37. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 37 http://www.oreilly.com/pub/e/3425
  38. 38. Defer
  39. 39. 39 Third-party content can make up >50% of page requests
  40. 40. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 40
  41. 41. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 41 Exposes you to data leakage Generates content security warnings that alarm your visitors and kill your conversions Hurts your Google search rankings (SEO) Makes your site vulnerable to man-in-the-middle security attacks Potential impact of fourth-party calls
  42. 42. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 42
  43. 43. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 43 Original: 3.5s SPOF: 22.7s
  44. 44. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 44
  45. 45. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 45 Popup best practices • Optimize script • Ensure cross-browser functionality • Delay for at least 10 seconds • A/B test for effectiveness
  46. 46. Measure the right stuff
  47. 47. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 47 First Paint is not equal to Start Render! Chrome – “First Paint” True Start Render
  48. 48. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 48 User Timing Interface Allows developers to measure performance of their applications through high-precision timestamps Consists of “marks” and “measures”  PerformanceMark: Timestamp  PerformanceMeasure: Duration between two given marks
  49. 49. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 49 How long does it take to display the main product image on my site?
  50. 50. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 50 Record when an image loads <img src=“image1.gif” onload=“performance.mark(‘image1’)”> For more interesting examples: Measure hero image delay http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/ Measure aggregate times to get an “above fold time” http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user- experience.html
  51. 51. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 51 http://soasta.io/perftimings
  52. 52. Be useful
  53. 53. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 53 A user who was served feature content within the first second of page load spent 20% of his or her time within the feature area. A user who was subjected to an 8-second delay of a page’s feature content spent only 1% of his or her time visually engaging with that area of the page.
  54. 54. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 54 Source: Jakob Nielsen
  55. 55. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 55
  56. 56. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 56 Make the perceived value of your content worth the wait.
  57. 57. Thanks!
  58. 58. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 @tameverts performancebeacon.com WPOstats.com

×