Fakeperformance Presentation will be preparedplease wait... - - PowerPoint PPT Presentation

▶
fakeperformance
SMART_READER_LITE
LIVE PREVIEW

Fakeperformance Presentation will be preparedplease wait... - - PowerPoint PPT Presentation

Mar 10, 2023 327 likes •1.09k views

Fakeperformance Presentation will be preparedplease wait... www.facebook.com/marco.klawonn www.xing.com/profile/Marco_Klawonn @mklawonn A short entry * Be prepared: short can be a fake Oh no! * Yes, I know its a pet doctor

slide-1
SLIDE 1

Fakeperformance

 Presentation will be prepared…please wait...

www.facebook.com/marco.klawonn www.xing.com/profile/Marco_Klawonn @mklawonn

slide-2
SLIDE 2

* Be prepared: short can be a fake…

 A short entry…

slide-3
SLIDE 3

* Yes, I know its a pet doctor office…

Oh no!

slide-4
SLIDE 4

…ok..well…wait again?

slide-5
SLIDE 5

The „Waitingroom“-Strategy

Waitingroom Moving Doctors Room A Question – Keep Busy Again Doctor

Ready Got Medicine

Moving Out

slide-6
SLIDE 6

The „Waitingroom“-Strategy

Waitingroom Moving Doctors Room A Question – Keep Busy Again Doctor

Ready Got Medicine

Moving Out

WTF? – But feeling good

Fall into rage

slide-7
SLIDE 7

Lesson Learned:

1.)

The „Feel Good“-Performance is much more important than the actual performance.

2.)

„Being occupied“ let us feel much better.

slide-8
SLIDE 8

Performance in Numbers

57% of the Onlineshopper waiting less then 3 Seconds Amazon: 100ms faster = 1% more sales Mozilla: 2,2s faster=15,4% more downloads

slide-9
SLIDE 9

 What would developers normaly do for these „Good Feeling“?

Specialy in the context of „waiting“…..

slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12

 Fakeperformance is no replacement for real performanceoptimization  Fakeperformance is a process  Fakeperformance should increase „felt performance“

But at first:

Fakeperformance != Performanceoptimization

slide-13
SLIDE 13

 Primary at slow Interfaces

 Live prices at the shop (for example out of a ERP)  Avalibility out of a stock or out of a booking system 

Slow Infrastructur

 Streaming starts delayed

 Processes that needs „Time“

 Calculation of Keys  Waiting for archiving, copying etc.  Generating of „documents“

You‘ll need Fakeperformance:

slide-14
SLIDE 14

Five Methods for Acting

My agenda for ideas ans examples

  • 1. ) Lazy Loading

4.) Using „the right words“, manipulate Users 3.) Preloading and loading animations 5.) Keep the user busy 2.) Be Predictive

slide-15
SLIDE 15

Let‘ speed up your „Feeling“

slide-16
SLIDE 16

Five Methods for Acting

My agenda for ideas ans examples

  • 1. ) Lazy Loading

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an

  • bject until the point at which it is needed. It can

contribute to efficiency in the program's operation if properly and appropriately used. The opposite of lazy loading is eager loading.

(Source: Wikipedia)

slide-17
SLIDE 17

Lazy Loading @ Zalando

slide-18
SLIDE 18
slide-19
SLIDE 19

Lazy Loading @ Flickr

slide-20
SLIDE 20
slide-21
SLIDE 21

Placeholders @ Facebook

slide-22
SLIDE 22

Placeholders @ Facebook

slide-23
SLIDE 23

Placeholders @ Facebook

slide-24
SLIDE 24

Five Methods for Acting

My agenda for ideas ans examples

A prediction (Latin præ-, "before," and dicere, "to say")

  • r forecast is a statement about the way things will

happen in thefuture, often but not always based on experience or knowledge.

(Source: Wikipedia)

2.) Be Predictive

slide-25
SLIDE 25

Google Now

slide-26
SLIDE 26

Predictive here: User will scroll

slide-27
SLIDE 27

Predictive here: User will Search „FMM to STN“

slide-28
SLIDE 28

 1.) Normaly: you know what your user will do next  2.) Everythning else: Edge Cases

slide-29
SLIDE 29

Five Methods for Acting

My agenda for ideas ans examples

The term Preloader describes a program part, which is responsible for the pre-loading of data. One finds Preloader wherever large amounts of data need to be loaded and the loading process will take some time.

(Source: Wikipedia.de via google translate)

3.) Preloading and loading animations

slide-30
SLIDE 30

Main methods for preloading

1.)

  • Load. Show something while loading. Show

2.)

  • Load. Show. Wait for interaction. Load again. Show again. (Mainly

discussed in „Lazy Loading“)

slide-31
SLIDE 31

 …and can a spinning Wheel be faster?  …and is a loading Bar faster?

How fast is a spinning Wheel?

slide-32
SLIDE 32

„Speed“ of loading

Slow, with steps between. Fast loading

slide-33
SLIDE 33

Creative „Wheel“– „Keep the user busy 0.1“

slide-34
SLIDE 34
slide-35
SLIDE 35

 Spinning Wheels are endless  User like to know how long they should wait

 Willingness for waiting will increase

Nobody likes to whait endless

slide-36
SLIDE 36

Spinning Wheel vs. Progress Bar

Endless Bar. Loading Elements. „Something happens“.

slide-37
SLIDE 37

Use sections for your progressbar

slide-38
SLIDE 38

Animations inside progressbar

 http://bcove.me/702suste

Up to 11% quicker

slide-39
SLIDE 39

Waiting

1 sec. 3 sec. 6 sec. 10 sec. 12 sec.

Willingness for waiting Reload Damn, these shit is damage

slide-40
SLIDE 40

 What if you need more than 3-8 seconds??

slide-41
SLIDE 41

Five Methods for Acting

My agenda for ideas ans examples

4.) Using „the right words“, manipulate Users Bavaria ipsum dolor sit amet Weißwiaschd gfreit mi hoggd Ewig und drei Dog Bradwurschtsemmal Gschicht des wiad a Mordsgaudi Schdarmbeaga See. Schmankal Enzian Sauakraud obacht Edlweiss Hemad weida Spezi Zidern: A bravs hawadere midananda am acht’n Tag schuf Gott des Bia umananda, de heid gfoids ma sagrisch guad Schdeckalfisch. Am acht’n Tag schuf Gott des Bia Griasnoggalsubbm Guglhupf do legst di nieda, ded dei.

slide-42
SLIDE 42

 Manipulate Users with Words - Support:

„Can I help you? Our Live Support will be ready in a view seconds.“

The right words at the right time

slide-43
SLIDE 43

 Manipulate Users with Words – technic style:

„We need to encrypt your data for your own security, please wait“

The right words at the right time

slide-44
SLIDE 44

 Manipulate Users with Words – prefer:

„The best price will be calculated speacialy for you.“

The right words at the right time

slide-45
SLIDE 45

 Manipulate Users with Words – dominate:

„For technical reasons: don‘t close these Window and wait!“

The right words at the right time

slide-46
SLIDE 46

Back to our „Waitingroomstrategie“

 Storyboard for Progressbar – Words inside the Progress Bar  The Right Words: „It will need some time“

Load Some Informations Load More Informations Special More Special Fast loading Everyting Ready! Ready

slide-47
SLIDE 47

„LieToTheUser“- Storyboarded

slide-48
SLIDE 48

„LieAndLoad“ – Flat Lie

slide-49
SLIDE 49

TBD example…

slide-50
SLIDE 50

https://www.schneier.com/blog/archives/2013/03/security_theate_8.html

slide-51
SLIDE 51
slide-52
SLIDE 52

Not words but: Lie with images

Radio Bremen 4 Livestream

slide-53
SLIDE 53

Five Methods for Acting

My agenda for ideas ans examples

5.) Keep the user busy

slide-54
SLIDE 54

Users needs something to do

 What the user can do while waiting:

 Occupation therapy: Anit Usability  Games: funny Waiting  Get on the nerves: They will hate u, but it works

slide-55
SLIDE 55

Loading a „loading screen“

slide-56
SLIDE 56

Result: Loading a „loading screen“

slide-57
SLIDE 57

Click for the truth

slide-58
SLIDE 58

Gamificationcapture

slide-59
SLIDE 59

Alerts to load data

slide-60
SLIDE 60

Example: Checkout needs Customer Id

Result Customer Id

slide-61
SLIDE 61

Example: Checkout needs Customer Id

Customer Id Basket Payment Result Customer Id ERP

slide-62
SLIDE 62

The „normal“ checkout

Basket Login or Registrierung Address Delivery Address Payment Payment Data AGBs Ready Thanks Login

slide-63
SLIDE 63

The „normal“ checkout

Basket Login or Registrierung Address Delivery Address Payment Payment Data AGBs Ready Thanks Login

 Example Requirements:

 Stock availability 40 seconds  Payment feedback needs 30 seconds

slide-64
SLIDE 64

Basket Login or Registrierung Address Delivery Address Payment Payment Data AGBs Ready Thanks Login

The „normal“ checkout

slide-65
SLIDE 65

Basket Login or Registrierung Address Delivery Address Payment Payment Data AGBs Ready Thanks Login

The „normal“ checkout

1-4 Minuten 0-4 Minuten 2 Minuten 15 Sekunden

slide-66
SLIDE 66
slide-67
SLIDE 67

Additional time for using a captcha: 30sec (may incl. intentionally a false)

slide-68
SLIDE 68

Double E-Mail, forbidden C&P, States with Main Country in the middle, strange Password rules Add up to 4 Minutes (Check Data)

slide-69
SLIDE 69

Mandetory Scrolling on AGB, Checkboxes, Typing Name as a sign under the AGB (no ckeckbox) Add up to 3 Minutes (Check Data)

slide-70
SLIDE 70

The „normal“ checkout

Basket Login or Registrierung Address Delivery Address Payment Payment Data AGBs Ready Thanks Login 2-4 Minutes (Check Data) 0-2 Minutes 2 Minutes With Captcha 1 Min. (incl intentionally false) 30 Sec. Scroll- mandatory 10 Sec. tipping Name

Annoying– but you‘ll need the time

slide-71
SLIDE 71

 1.) Annoying: its ok. The Result will help you  2.) Do it: Why not? Everyone is happy with a „white lie“  3.) Think: How can waiting be much more acceptable

slide-72
SLIDE 72

Five Methods for Acting

My agenda for ideas ans examples

6.) Surpise your Users, Customers or Audience Surprise is a brief mental and physiological state, a startle response experienced animals and humans as the result

  • f an unexpected event. Surprise can have any valence;

that is, it can be neutral/moderate, pleasant, unpleasant, positive, or negative. Surprise can occur in varying levels

  • f intensity ranging from very-surprised, which may

induce the fight-or-flight response, or little-surprise that elicits a less intense response to the stimuli.

(Source: Wikipedia.de via google translate)

slide-73
SLIDE 73

 The feeling for Time:

 Depends on experience

 Time is running faster if you see some completly new!

 Remember your childhood and youth

Human Brain needs input

slide-74
SLIDE 74

 A short example…

slide-75
SLIDE 75

Thank you

www.facebook.com/marco.klawonn www.xing.com/profile/Marco_Klawonn @mklawonn