Fakeperformance
 Presentation will be prepared…please wait...
www.facebook.com/marco.klawonn
www.xing.com/profile/Marco_K...
* Be prepared: short can be a fake…
 A short entry…
* Yes, I know its a pet doctor office…
Oh no!
…ok..well…wait again?
The „Waitingroom“-Strategy
Waitingroom
Moving
Doctors Room
AQuestion–KeepBusy
Again Doctor
Ready
Got
Medicine
Moving
Out
The „Waitingroom“-Strategy
Waitingroom
Moving
Doctors Room
AQuestion–KeepBusy
Again Doctor
Ready
Got
Medicine
Moving
Out
W...
Lesson Learned:
1.) The „Feel Good“-Performance is much more important than the actual
performance.
2.) „Being occupied“ l...
Performance in Numbers
57% of the Onlineshopper
waiting less then 3
Seconds
Amazon: 100ms faster =
1% more sales
Mozilla: ...
 What would developers normaly do for these „Good Feeling“?
Specialy in the context of „waiting“…..
 Fakeperformance is no replacement for real performanceoptimization
 Fakeperformance is a process
 Fakeperformance shou...
 Primary at slow Interfaces
 Live prices at the shop (for example out of a ERP)
 Avalibility out of a stock or out of a...
Five Methods for Acting
My agenda for ideas ans examples
1. ) Lazy Loading
4.) Using „the right words“, manipulate Users
3...
Let‘ speed up your „Feeling“
Five Methods for Acting
My agenda for ideas ans examples
1. ) Lazy Loading
Lazy loading is a design pattern commonly used ...
Lazy Loading @ Zalando
Lazy Loading @ Flickr
Placeholders @ Facebook
Placeholders @ Facebook
Placeholders @ Facebook
Five Methods for Acting
My agenda for ideas ans examples
A prediction (Latin præ-, "before," and dicere, "to say")
or fore...
Google Now
Predictive here: User will scroll
Predictive here: User will Search „FMM to STN“
 1.) Normaly: you know what your user will do next
 2.) Everythning else: Edge Cases
Five Methods for Acting
My agenda for ideas ans examples
The term Preloader describes a program part, which is
responsible...
Main methods for preloading
1.) Load. Show something while loading. Show
2.) Load. Show. Wait for interaction. Load again....
 …and can a spinning Wheel be faster?
 …and is a loading Bar faster?
How fast is a spinning Wheel?
„Speed“ of loading
Slow, with steps between.
Fast loading
Creative „Wheel“– „Keep the user busy 0.1“
 Spinning Wheels are endless
 User like to know how long they should wait
 Willingness for waiting will increase
Nobody...
Spinning Wheel vs. Progress Bar
Endless Bar.
Loading Elements.
„Something happens“.
Use sections for your progressbar
Animations inside progressbar
 http://bcove.me/702suste
Up to 11% quicker
Waiting
1 sec.
3 sec.
6 sec.
10 sec.
12 sec.
Willingness for waiting
Reload
Damn, these
shit is
damage
 What if you need more than 3-8 seconds??
Five Methods for Acting
My agenda for ideas ans examples
4.) Using „the right words“, manipulate Users
Bavaria ipsum dolor...
 Manipulate Users with Words - Support:
„Can I help you? Our Live Support will be ready in a
view seconds.“
The right wor...
 Manipulate Users with Words – technic style:
„We need to encrypt your data for your own security,
please wait“
The right...
 Manipulate Users with Words – prefer:
„The best price will be calculated speacialy for you.“
The right words at the righ...
 Manipulate Users with Words – dominate:
„For technical reasons: don‘t close these Window and
wait!“
The right words at t...
Back to our „Waitingroomstrategie“
 Storyboard for Progressbar – Words inside the Progress Bar
 The Right Words: „It wil...
„LieToTheUser“- Storyboarded
„LieAndLoad“ – Flat Lie
TBD example…
https://www.schneier.com/blog/archives/2013/03/security_theate_8.html
Not words but: Lie with images
Radio Bremen 4 Livestream
Five Methods for Acting
My agenda for ideas ans examples
5.) Keep the user busy
Users needs something to do
 What the user can do while waiting:
 Occupation therapy: Anit Usability
 Games: funny Wait...
Loading a „loading screen“
Result: Loading a „loading screen“
Click for the truth
Gamificationcapture
Alerts to load data
Example: Checkout needs Customer Id
Result
Customer
Id
Example: Checkout needs Customer Id
Customer
Id
Basket Payment
Result
Customer
Id
ERP
The „normal“ checkout
Basket
Login or
Registrierung
Address
Delivery
Address
Payment
Payment
Data
AGBs Ready Thanks
Login
The „normal“ checkout
Basket
Login or
Registrierung
Address
Delivery
Address
Payment
Payment
Data
AGBs Ready Thanks
Login
...
Basket
Login or
Registrierung
Address
Delivery
Address
Payment
Payment
Data
AGBs Ready Thanks
Login
The „normal“ checkout
Basket
Login or
Registrierung
Address
Delivery
Address
Payment
Payment
Data
AGBs Ready Thanks
Login
The „normal“ checkout
...
Additional time for using a captcha: 30sec
(may incl. intentionally a false)
Double E-Mail, forbidden C&P, States with Main Country in
the middle, strange Password rules
Add up to 4 Minutes (Check Da...
Mandetory Scrolling on AGB, Checkboxes, Typing Name
as a sign under the AGB (no ckeckbox)
Add up to 3 Minutes (Check Data)
The „normal“ checkout
Basket
Login or
Registrierung
Address
Delivery
Address
Payment
Payment
Data
AGBs Ready Thanks
Login
...
 1.) Annoying: its ok. The Result will help you
 2.) Do it: Why not? Everyone is happy with a „white lie“
 3.) Think: H...
Five Methods for Acting
My agenda for ideas ans examples
6.) Surpise your Users, Customers or Audience
Surprise is a brief...
 The feeling for Time:
 Depends on experience
 Time is running faster if you see some completly new!
 Remember your ch...
 A short example…
Thank you
www.facebook.com/marco.klawonn
www.xing.com/profile/Marco_Klawonn
@mklawonn
Fakeperformance
Fakeperformance
Fakeperformance
Fakeperformance
Fakeperformance
Fakeperformance
Fakeperformance
Upcoming SlideShare
Loading in …5
×

Fakeperformance

858 views
721 views

Published on

In complex systems, the bottleneck of the performance is frequently not in the framework or in the programming language used, but in the connected interfaces themselves. The developer has only a small influence on the third party system performance. This talk gives ideas how to deal with this problem in an unconventional way.

Published in: Internet, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
858
On SlideShare
0
From Embeds
0
Number of Embeds
118
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Fakeperformance

  1. 1. Fakeperformance  Presentation will be prepared…please wait... www.facebook.com/marco.klawonn www.xing.com/profile/Marco_Klawonn @mklawonn
  2. 2. * Be prepared: short can be a fake…  A short entry…
  3. 3. * Yes, I know its a pet doctor office… Oh no!
  4. 4. …ok..well…wait again?
  5. 5. The „Waitingroom“-Strategy Waitingroom Moving Doctors Room AQuestion–KeepBusy Again Doctor Ready Got Medicine Moving Out
  6. 6. The „Waitingroom“-Strategy Waitingroom Moving Doctors Room AQuestion–KeepBusy Again Doctor Ready Got Medicine Moving Out WTF?–Butfeelinggood Fall into rage
  7. 7. Lesson Learned: 1.) The „Feel Good“-Performance is much more important than the actual performance. 2.) „Being occupied“ let us feel much better.
  8. 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
  9. 9.  What would developers normaly do for these „Good Feeling“? Specialy in the context of „waiting“…..
  10. 10.  Fakeperformance is no replacement for real performanceoptimization  Fakeperformance is a process  Fakeperformance should increase „felt performance“ But at first: Fakeperformance != Performanceoptimization
  11. 11.  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:
  12. 12. 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
  13. 13. Let‘ speed up your „Feeling“
  14. 14. 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 object 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)
  15. 15. Lazy Loading @ Zalando
  16. 16. Lazy Loading @ Flickr
  17. 17. Placeholders @ Facebook
  18. 18. Placeholders @ Facebook
  19. 19. Placeholders @ Facebook
  20. 20. Five Methods for Acting My agenda for ideas ans examples A prediction (Latin præ-, "before," and dicere, "to say") or 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
  21. 21. Google Now
  22. 22. Predictive here: User will scroll
  23. 23. Predictive here: User will Search „FMM to STN“
  24. 24.  1.) Normaly: you know what your user will do next  2.) Everythning else: Edge Cases
  25. 25. 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
  26. 26. 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“)
  27. 27.  …and can a spinning Wheel be faster?  …and is a loading Bar faster? How fast is a spinning Wheel?
  28. 28. „Speed“ of loading Slow, with steps between. Fast loading
  29. 29. Creative „Wheel“– „Keep the user busy 0.1“
  30. 30.  Spinning Wheels are endless  User like to know how long they should wait  Willingness for waiting will increase Nobody likes to whait endless
  31. 31. Spinning Wheel vs. Progress Bar Endless Bar. Loading Elements. „Something happens“.
  32. 32. Use sections for your progressbar
  33. 33. Animations inside progressbar  http://bcove.me/702suste Up to 11% quicker
  34. 34. Waiting 1 sec. 3 sec. 6 sec. 10 sec. 12 sec. Willingness for waiting Reload Damn, these shit is damage
  35. 35.  What if you need more than 3-8 seconds??
  36. 36. 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.
  37. 37.  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
  38. 38.  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
  39. 39.  Manipulate Users with Words – prefer: „The best price will be calculated speacialy for you.“ The right words at the right time
  40. 40.  Manipulate Users with Words – dominate: „For technical reasons: don‘t close these Window and wait!“ The right words at the right time
  41. 41. Back to our „Waitingroomstrategie“  Storyboard for Progressbar – Words inside the Progress Bar  The Right Words: „It will need some time“ Load SomeInformations Load MoreInformations Special More Special Fast loading EverytingReady! Ready
  42. 42. „LieToTheUser“- Storyboarded
  43. 43. „LieAndLoad“ – Flat Lie
  44. 44. TBD example…
  45. 45. https://www.schneier.com/blog/archives/2013/03/security_theate_8.html
  46. 46. Not words but: Lie with images Radio Bremen 4 Livestream
  47. 47. Five Methods for Acting My agenda for ideas ans examples 5.) Keep the user busy
  48. 48. 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
  49. 49. Loading a „loading screen“
  50. 50. Result: Loading a „loading screen“
  51. 51. Click for the truth
  52. 52. Gamificationcapture
  53. 53. Alerts to load data
  54. 54. Example: Checkout needs Customer Id Result Customer Id
  55. 55. Example: Checkout needs Customer Id Customer Id Basket Payment Result Customer Id ERP
  56. 56. The „normal“ checkout Basket Login or Registrierung Address Delivery Address Payment Payment Data AGBs Ready Thanks Login
  57. 57. 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
  58. 58. Basket Login or Registrierung Address Delivery Address Payment Payment Data AGBs Ready Thanks Login The „normal“ checkout
  59. 59. 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
  60. 60. Additional time for using a captcha: 30sec (may incl. intentionally a false)
  61. 61. Double E-Mail, forbidden C&P, States with Main Country in the middle, strange Password rules Add up to 4 Minutes (Check Data)
  62. 62. Mandetory Scrolling on AGB, Checkboxes, Typing Name as a sign under the AGB (no ckeckbox) Add up to 3 Minutes (Check Data)
  63. 63. 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
  64. 64.  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
  65. 65. 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 of 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 of 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)
  66. 66.  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
  67. 67.  A short example…
  68. 68. Thank you www.facebook.com/marco.klawonn www.xing.com/profile/Marco_Klawonn @mklawonn

×