Der Rausch der Geschwindigkeit

Nutzerwahrnehmung aktiv beeinflussen

Elisabeth Engel

@_lizzelo_

10:25

https://unsplash.com/photos/scBTgeG5K5c

schreibt ...

Andrew II

10:25

Werd ich das überleben? 

10:25

Der Vortrag beginnt in 5 Minuten. Ich mach mir echt Sorgen.

wurde abgelenkt

@_lizzelo_

Distanz

Zeit

Geschwindigkeit =

Zeit ist messbar

https://unsplash.com/photos/p3Pj7jOYvnM

die eigene Webseite

@_lizzelo_

Was tun?

Schnell sein

Objektiv

=> Website Performance

@_lizzelo_

Menschen erleben Zeit subjektiv

https://www.flickr.com/photos/blakespot/46706560791

Welcher ist am schnellsten?

Option 1

Option 2

Option 3

Sicher?

Option 3

Option 2

Option 1

Weber-Fechner Gesetz

Just Noticeable Difference: +/- 20%

8 sec

10 sec

12 sec

nicht wahrnehmbar

Steve Seow

@_lizzelo_

Was tun?

Schnell sein

Objektiv

Wahrnehmung

Unterhalten & führen

=> Website Performance

@_lizzelo_

https://unsplash.com/photos/nwWUBsW6ud4

Wartezeit

Aktiv

Richard Larson, MIT

wird um 36 % überschätzt

Passiv

1 Sekunde zum Übergang

Nielson Norman Gruppe

@_lizzelo_

Wie bleiben Nutzer aktiv?

@_lizzelo_

Animierte Transitionen

https://www.pinterest.de/pin/91760911136468054/

erzähl eine Geschichte

https://unsplash.com/photos/9pw4TKvT3po

https://www.giantbomb.com/age-of-empires-ii-the-age-of-kings/3030-2846/

https://www.pugetsystems.com/labs/support-software/How-to-Install-Windows-XP-36/

Fortschritts- anzeigen

versetzt in einen passiven Zustand

@_lizzelo_

Spinner

https://loading.io/spinner/

einfach & ehrlich

http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook

Fortschrittsbalken

http://assets.eli.wtf/talks/perceived-perf-2018/demos/progress.html

Welche fühlt sich am schnellsten an?

Option 1

Option 2

Option 3

Fortschrittsbalken

http://assets.eli.wtf/talks/perceived-perf-2018/demos/progress.html

Carnegie Mellon

Chris Harrison, Zhiquan Yeo, Scott E. Hudson

gefühlt 12 % schneller!

Option 3

Option 2

Option 1

https://www.waitamoment.co.uk/museums-monuments/walt-disney-world/walt-disney-world-crowds

Gegen Ende schneller werden

https://www.codeproject.com/Articles/1185064/Remote-File-System-viewing-and-file-transfer-using

nicht wahrheitsgetreu

https://xkcd.com/612/

The best progress bar is

no progress bar.

Luke Wroblewski

@_lizzelo_

Zeitliche Einordnung

sofort

unmittelbar

kissmetrics

mentaler Kontextwechsel

Freude geht verloren

5 sec

8.25 - 10 sec

1 sec

0.2 sec

Jakob Nielsen

@_lizzelo_

Daumenregeln

3 Sek.

8.25 - 10 Sek.

1 Sek.

Transition

Spinner

Fortschrittsanzeige

?

@_lizzelo_

Im schlimmsten Fall

@_lizzelo_

den Nutzer benachrichtigen wenn die Aktion abgeschlossen ist

Jede ausreichend fortschrittliche Technologie ist von Magie nicht zu unterscheiden.

Arthur C. Clarke

@_lizzelo_

https://vimeo.com/3957551

Präventiver Start

Aktiv

Passiv

Nicht wahr- genommen

vom Nutzer wahrgenommen

@_lizzelo_

Die Zukunft vorhersagen

Klick

Aktion

Mousedown

Hover

Mouse

Deceleration

Die Zukunft vorhersagen

https://github.com/SamKnows/futurelink

Vorzeitige Fertigstellung

Aktiv

Passiv

Nicht wahrgenommen

wahrgenommen

Unbeachtet

🎉

@_lizzelo_

https://www.youtube.com/watch?v=lc_APy75e6o

WYSIWYG...

http://pishpeshuk.co.il/wp-content/uploads/2017/03/instagram-lie-photos-crop-slowlife-chompoo-baritone-fb.jpg

- what you see is what you get - 

In Wahrheit

Normal CSS

Integration per link-Tag

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      [NAVIGATION]
    </header>
    ...

  </body>
</html>
    

Inline CSS

für Inhalte im Sichtfeld

<html>
  <head>
   <style>
      [INLINE CSS]
    </style>
  </head>
  <body>
    <header>
      [NAVIGATION]
    </header>
    ...
    <script>
        [MAGIC SCRIPT TO LOAD FULL CSS]
    </script>
    <noscript>
      <link rel="stylesheet" href="styles.css">
    </noscript>
  </body>
</html>
    

Inline CSS

für Inhalte im Sichtfeld

https://www.sitelocity.com/critical-path-css-generator

Inline CSS

für Inhalte im Sichtfeld

<style>@font-face{font-family:'Lato';src:url(/fonts/LatoLatin-Bold.eot);src:url(/fonts/LatoLatin-Bold.eot?#iefix) format("embedded-opentype"),url(/fonts/LatoLatin-Bold.woff2) format("woff2"),url(/fonts/LatoLatin-Bold.woff) format("woff"),url(/fonts/LatoLatin-Bold.ttf) format("truetype");font-style:normal;font-weight:600;text-rendering:optimizeLegibility}@font-face{font-family:'Lato';src:url(/fonts/LatoLatin-Black.eot);src:url(/fonts/LatoLatin-Black.eot?#iefix) format("embedded-opentype"),url(/fonts/LatoLatin-Black.woff2) format("woff2"),url(/fonts/LatoLatin-Black.woff) format("woff"),url(/fonts/LatoLatin-Black.ttf) format("truetype");font-style:normal;font-weight:900;text-rendering:optimizeLegibility}@font-face{font-family:'Lato';src:url(/fonts/LatoLatin-Regular.eot);src:url(/fonts/LatoLatin-Regular.eot?#iefix) format("embedded-opentype"),url(/fonts/LatoLatin-Regular.woff2) format("woff2"),url(/fonts/LatoLatin-Regular.woff) format("woff"),url(/fonts/LatoLatin-Regular.ttf) format("truetype");font-style:normal;font-weight:400;text-rendering:optimizeLegibility}@font-face{font-family:'Lato';src:url(/fonts/LatoLatin-Italic.eot);src:url(/fonts/LatoLatin-Italic.eot?#iefix) format("embedded-opentype"),url(/fonts/LatoLatin-Italic.woff2) format("woff2"),url(/fonts/LatoLatin-Italic.woff) format("woff"),url(/fonts/LatoLatin-Italic.ttf) format("truetype");font-style:italic;font-weight:400;text-rendering:optimizeLegibility}*{margin:0;padding:0;border:none;outline:none;list-style:none;text-decoration:none;background-repeat:no-repeat;box-sizing:border-box}html{font-size:10px;height:100%}@media only screen and (max-width:800px){html{font-size:8px}}body{font-family:'Lato',sans-serif;line-height:1.5;font-weight:400;background:white;width:100%;height:100%;text-align:center}.app_header{width:100%;height:80px;position:relative;max-width:1280px;margin:0 auto;text-align:left}.app_header .app_logo{display:block;width:200px;position:absolute;left:20px;top:22px}.app_header .app_logo a{width:100%;display:block;width:auto;position:relative;padding-top:11.8%;background-image:url(/assets/logo-c48a8c5d0d50eb87f6b1a99bb53959f3eaf46475e42d3cc236db4a8898a54de6.svg);background-size:100%}@media only screen and (max-width:800px){.app_header .app_logo{left:15px}}.app_header .nav_main{padding-top:20px;font-size:16px;line-height:40px;text-align:center;height:80px;width:100%}.app_header .nav_main ul{width:100%}.app_header .nav_main ul li{display:inline-block;padding:0 8px}.app_header .nav_main ul li a{color:#111;display:block;font-weight:600;border-bottom:4px solid white}.app_header .lang{position:absolute;right:20px;top:20px;background:rgba(0,0,0,.3);border-radius:20px}.app_header .lang li{display:inline-block;border-radius:20px}.app_header .lang li a{color:white}.app_header .lang li.active{background:#28C8FF}.app_header .lang li+li{margin-left:-3px}.app_header .lang a{font-size:14px;font-weight:600;display:block;height:40px;width:40px;line-height:40px;text-align:center;color:#111}@media only screen and (max-width:1070px){.app_header .nav_main{padding-top:60px;padding-left:7px;text-align:left}}@media only screen and (max-width:990px){.app_header{height:80px}.app_header .app_logo{width:160px}}@media only screen and (max-width:800px){.app_header{height:80px}.app_header .lang{top:14px}.app_header .nav_main{font-size:3vw}}main{text-align:center;font-size:1.6rem;padding:40px 0 0 0;min-height:100%;max-width:100%}main h1{font-size:4rem;text-align:center;margin:2rem 0 1rem 0;line-height:1.1;font-family:'Lato',sans-serif;font-weight:900}@media only screen and (max-width:800px){main h1{font-size:3rem;margin-top:2rem}}main h2{font-size:2.8rem;text-align:center;margin:1rem 0 2rem 0;line-height:1.1;font-family:'Lato',sans-serif;font-weight:900}@media only screen and (max-width:800px){main h2{font-size:2rem;margin-top:2rem}}main p.subtitle{text-align:center;font-size:2rem}main section{width:100%;max-width:720px;margin:0 auto;text-align:left;padding:0 20px}main section.section--wider{max-width:800px}main ul,main p{margin-bottom:1em}main strong{font-weight:600}.color.one{color:#28C8FF}ul#service-list{overflow:hidden;background-image:url(/assets/circle-a14b0fcaa734d509df6143b83fc36136d5a7ae91432b8c0565e1f584e645393c.svg);background-position:50% 50%;margin:40px 0 0 0;max-width:800px}ul#service-list li{float:left;width:50%}ul#service-list li h2{margin:0 0 4px 0;white-space:nowrap;font-size:2rem;padding:3px 0 0 0}ul#service-list li:nth-child(1){text-align:right;padding-right:110px}ul#service-list li:nth-child(1) h2{text-align:right}@media only screen and (max-width:800px){ul#service-list{background-position:50% 0;background-size:50% auto;padding-top:50vw;margin-left:10px;margin-right:10px}ul#service-list li{padding:0 10px 0 0!important;text-align:left!important}ul#service-list li h2{text-align:left!important}}.founder-quote{max-width:1040px;margin-bottom:40px;margin-top:80px}.founder-quote:before,.founder-quote:after{background-repeat:no-repeat;background-image:url(/assets/hr-508d753dbaf65d35fdfc0d227e29072b08e4e9ca17cc0e0f2814f79164da34b6.svg);background-size:106px auto;background-position:50% 55%;content:'';display:block;height:60px}.founder-quote__quote{color:#28A2FF;font-size:2.6rem;line-height:1.3;padding:0 16px 32px 16px;margin:0}@media only screen and (max-width:800px){.founder-quote__quote{margin-left:10px;margin-right:10px}.founder-quote__quote br{display:none}}.founder-quote__cite{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.founder-quote__founders{text-align:center;min-width:292px}.founder-quote__team{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;padding:6px 6px 24px 6px}.founder-quote__team--left{text-align:right}.founder-quote__team--right{text-align:left}@media only screen and (max-width:800px){.founder-quote__team{display:none}}.founder-quote__team-member{display:inline-block}.founder-quote__team-member-image{border-radius:35px;width:70px;height:70px;border:1px solid #eee}@media only screen and (max-width:990px){.founder-quote__team-member-image{border-radius:25px;width:50px;height:50px}}.founder-quote__image{background-image:url(/assets/founders-75272c2285fd183b3dd37e6788070d66861b79e3da0208a0bdc960146f5a8049.png);background-size:292px 160px;background-position:50% 0%;height:160px}.founder-quote__signatures{text-indent:-999em;background-image:url(/assets/founders-c34f2eed2664c511b6ab837bce70f01b13dc27931166466185c499daf84d03a5.svg);background-size:292px 47px;background-position:50% 0%;height:47px;margin-top:-16px;margin-bottom:-5px}.founder-quote__position{font-style:italic;font-size:1.2rem}.action_index .app_header{z-index:4}.action_index main{overflow:auto;margin-top:-80px}.action_index main #service-list{margin-bottom:40px;margin-top:20px}.action_index main section:not(.primary){padding:20px 0}</style>
    

Inline CSS

inline.css -> ins HTML kompilieren

@import "logo-inline";
@import "navigation-inline";
@import "searchbar-inline";
@import "top-content-inline";
    

normal.css -> am Ende des HTML laden

@import "[everything-else]";
@import "footer";
    

Inline CSS

für Inhalte im Sichtfeld

https://slides.com/franklin_35/page-speeder#/

Inline CSS

für Inhalte im Sichtfeld

https://slides.com/franklin_35/page-speeder/

https://www.tandemseven.com/blog/how-to-use-disneys-principles-of-animation-to-improve-ux/

https://www.tandemseven.com/blog/how-to-use-disneys-principles-of-animation-to-improve-ux/

https://www.tandemseven.com/blog/how-to-use-disneys-principles-of-animation-to-improve-ux/

Skeleton Loading

HTML

<section>

  <skeleton-content>
    [ SKELETON ]
  </skeleton-content>

  <real-content style="display:none">
    [ REAL CONTENT ]
  </real-content>

</section>
    

Skeleton Loading

CSS


  @keyframes skeletonLoading {
    
    0%   {opacity: 0.5}
    50%  {opacity: 1}
    100% {opacity: 0.5}
  }

  skeleton-content .bar {
    display: block;
    width: 50rem;
    height: 5rem;
    animation: skeletonLoading 2s infinite;
    background-color: lightgrey;
  }

Skeleton Loading

Ergebnis

@_lizzelo_

https://www.youtube.com

Optimistisch Optimieren

https://unsplash.com/photos/Xbh_OGLRfUM

Optimistic UI

nicht wahrheitsgetreues Feedback

@_lizzelo_

Optimistic UI

@_lizzelo_

Der Ball war so schnell, praktisch unsichtbar.

ich - beim Kicker spielen

@_lizzelo_

Veränderungsblindheit

http://www.syntagm.co.uk/design/articles/cb.htm

Vorsicht

Kontext

@_lizzelo_

5 Sekunden zum Hochfahren

https://unsplash.com/photos/tYvUNvcGa-c

Zu langsam

5 Sekunden für ein fertiges Chili con Carne

https://de.wikipedia.org/wiki/Datei:Bowl_of_chili.jpg

Zu schnell

https://www.moneypeach.com/free-use-coin-machines-near-me/

Schnell = Einfach = Günstig

@_lizzelo_

Lange Wartezeiten erzeugen:

 

Erwartungen!

...

hohe

...

@_lizzelo_

TL;DL

Schnell sein

Objektiv

Wahrnehmung

Unterhalten & führen

Erklären

Erwartungshaltung

@_lizzelo_

STL;DL

Geschwindigkeitsempfinden

=

f(Erwartung, Realität, Wahrnehmung)

@_lizzelo_

online

Andrew II

10:25

10:35

Ja klar, keine Sorge.

10:38

Und falls nicht, hast Du meine Nummer.

11:05

Nein, noch besser: genieß den Himmel!

10:25

Werd ich das überleben? 

Der Vortrag beginnt in 5 Minuten. Ich mach mir echt Sorgen.

Wer sind wir?

@_lizzelo_

Wir sind Wegbegleiter

https://unsplash.com/photos/sAabA4Z8OfU

❤️

❤️

F1

Erfahrungen?

Fragen?

Anmerkungen?

Empfehlungen?

Dank ans Team

Folien:

@_lizzelo_

engel@interfacewerk.de

slides.com/elisabethengel/rausch-der-geschwindigkeit

Kontakt:

Inhalt

  • http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
  • https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/
  • http://dev.mobify.com/blog/beginners-guide-to-perceived-performance/
  • http://www.lukew.com/ff/entry.asp?1797
  • http://codepen.io/Mestika/pen/ByNYBa
  • http://codepen.io/basham/pen/cGJjn
  • http://codepen.io/oslego/pen/XdvWmd

Code

Mehr

Credits

interfacewerk GmbH

gutefrage.net GmbH

 

Benjamin Jentsch

Sebastian Ullherr

Der Rausch der Geschwindigkeit - Nutzerwahrnehmung aktiv beeinflussen

By Elisabeth Engel

Der Rausch der Geschwindigkeit - Nutzerwahrnehmung aktiv beeinflussen

Niemand wartet gerne. Schon gar nicht auf einen Server, der mal wieder zu langsam ist. Am wenigsten Ihre Kunden. Doch was können Sie tun, wenn technisch keine Verbesserung in Sicht ist? Könnten Sie Ihre Applikation nicht einfach schneller erscheinen lassen als sie wirklich ist und obendrein die Wartezeit noch geschickt zu Ihren Gunsten nutzen?

  • 1,853