Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Павел Тайкало: "Optimistic Approach : How to show results instead spinners without breaking your Application"

•
•

The document discusses an optimistic approach to updating the user interface in mobile applications. It proposes showing predicted results to users immediately instead of loading spinners to improve perceived performance. This involves caching data, preloading content, and updating the UI with fake results before the server response arrives. It can improve the user experience but requires handling errors if the prediction does not match the actual response. The approach also needs to account for frequent actions from hyperactive users.

1 of 46
Download to read offline

1

Optimistic Approach How to show results instead spinners without breaking your Application by Paul Taykalo, Stanfy Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 1

2

Optimistic Approach What is it about? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 2

3

Optimistic Approach 4 Speeding up application 4 "Speeding" up application 4 Making user happier 4 It's all about user-friendliness Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 3

4

How mobile application works Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 4

5

How mobile application works 4 Handle user action 4 Send request to the server 4 Get response from the server 4 Update UI Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 5

6

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 6

7

User need to wait Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 7

8

User need to wait But user don't like to wait Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 8

9

User need to wait But user don't like to wait User don't have time to wait Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 9

10

Loading next slide Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 10

11

Solutions? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 11

12

Solutions - Making app faster 4 Decrease sizes 4 Compression 4 Opened connection to the server Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 12

13

Solutions - One step ahead 4 Caching 4 Preload pages 4 Load content in the backround 4 Be prepared Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 13

14

Solutions - Entertain user Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 14

15

Solutions - Entertain the user 4 Animations 4 Push/Pop 4 Spinner 4 Progress 4 Skeleton 4 Partial info Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 15

16

Solutions - Predict the result 4 Precalculate result 4 Show it to user 4 ???? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 16

17

Solutions - Predict the result 4 Precalculate result 4 Show it to user 4 Pray :) Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 17

18

Types of user interactions Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 18

19

Actions and Expectations Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 19

20

Actions and Expectations 4 If I press like I expect that 4 If I edit post I expect that 4 If I follow this guy I expect that 4 If I open a post I expect that 4 If I ask for a radom number I expect that Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 20

21

Predictabevs *elbatciderpnU_ Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 21

22

Predictable Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 22

23

Predictable If I can predict the result, why should I wait for confirmation? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 23

24

Optimistic models Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 24

25

Non optimistic model Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 25

26

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 26

27

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 27

28

Following a person [self.requestManager follow:original result:^(Person *res, NSError *err) { if (err) { // Handling error resultBlock(nik, err); } else { // Updating to the new value resultBlock(res, nil); } }]; Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 28

29

Following a person // Saving original for later usage Person *original = self.person; // Create fake result Person *fake = [self.person copy]; fake.followingStatus = @"Following"; // Updating current object self.person = fake; resultBlock(fake, nil); Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 29

30

Following a person if (error) { // rollback weakSelf.person = original; resultBlock(original, error); } else { // Updating to the new value weakSelf.person = updatedPerson; resultBlock(updatedPerson, nil); } Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 30

31

Following a person // Following a person - (void)follow:(void (^)(Person *person, NSError *error))resultBlock { __weak __typeof(self) weakSelf = self; // Saving original for later usage Person *original = self.person; // Create fake result Person *fake = [self.person copy]; fake.followingStatus = @"Following"; // Updating current object self.person = fake; resultBlock(fake, nil); // Calling request manager [self.requestManager followPerson:original result:^(Person *updatedPerson, NSError *error) { if (error) { // rollback weakSelf.person = original; resultBlock(original, error); } else { // Updating to the new value weakSelf.person = updatedPerson; resultBlock(updatedPerson, nil); } }]; } Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 31

32

What about non-breaking? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 32

33

Correct View Layer MVVM* Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 33

34

Correct View Layer Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 34

35

Correct View Layer Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 35

36

Hiperactive User? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 36

37

Hiperactive User? like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 37

38

State based on multiple updates Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 38

39

State based on multiple updates Take a look at Parse SDK PFObjectEstimatedData.h Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 39

40

Demo?Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 40

41

Recap Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 41

42

Recap 4 It's pretty easy to trick user 4 Show user what he expect 4 Fight for your users, they deserve it 4 Now you can write even cooler apps :) Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 42

43

Last slide :) Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 43

44

Optimistic Approach How to show results instead spinners without breaking your Application by Paul Taykalo, Stanfy Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 44

45

Links 4 http://www.reactnative.com/ 4 https://speakerdeck.com/frantic/react-native- under-the-hood 4 https://medium.com/stanfy-engineering-practices/ do-not-let-your-user-see-spinners-35b824c3ce2f 4 ComponentKit Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 45

46

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 46

More Related Content

Павел Тайкало: "Optimistic Approach : How to show results instead spinners without breaking your Application"

  • 1. Optimistic Approach How to show results instead spinners without breaking your Application by Paul Taykalo, Stanfy Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 1
  • 2. Optimistic Approach What is it about? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 2
  • 3. Optimistic Approach 4 Speeding up application 4 "Speeding" up application 4 Making user happier 4 It's all about user-friendliness Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 3
  • 4. How mobile application works Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 4
  • 5. How mobile application works 4 Handle user action 4 Send request to the server 4 Get response from the server 4 Update UI Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 5
  • 6. Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 6
  • 7. User need to wait Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 7
  • 8. User need to wait But user don't like to wait Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 8
  • 9. User need to wait But user don't like to wait User don't have time to wait Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 9
  • 10. Loading next slide Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 10
  • 11. Solutions? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 11
  • 12. Solutions - Making app faster 4 Decrease sizes 4 Compression 4 Opened connection to the server Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 12
  • 13. Solutions - One step ahead 4 Caching 4 Preload pages 4 Load content in the backround 4 Be prepared Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 13
  • 14. Solutions - Entertain user Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 14
  • 15. Solutions - Entertain the user 4 Animations 4 Push/Pop 4 Spinner 4 Progress 4 Skeleton 4 Partial info Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 15
  • 16. Solutions - Predict the result 4 Precalculate result 4 Show it to user 4 ???? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 16
  • 17. Solutions - Predict the result 4 Precalculate result 4 Show it to user 4 Pray :) Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 17
  • 18. Types of user interactions Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 18
  • 19. Actions and Expectations Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 19
  • 20. Actions and Expectations 4 If I press like I expect that 4 If I edit post I expect that 4 If I follow this guy I expect that 4 If I open a post I expect that 4 If I ask for a radom number I expect that Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 20
  • 21. Predictabevs *elbatciderpnU_ Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 21
  • 22. Predictable Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 22
  • 23. Predictable If I can predict the result, why should I wait for confirmation? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 23
  • 24. Optimistic models Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 24
  • 25. Non optimistic model Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 25
  • 26. Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 26
  • 27. Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 27
  • 28. Following a person [self.requestManager follow:original result:^(Person *res, NSError *err) { if (err) { // Handling error resultBlock(nik, err); } else { // Updating to the new value resultBlock(res, nil); } }]; Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 28
  • 29. Following a person // Saving original for later usage Person *original = self.person; // Create fake result Person *fake = [self.person copy]; fake.followingStatus = @"Following"; // Updating current object self.person = fake; resultBlock(fake, nil); Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 29
  • 30. Following a person if (error) { // rollback weakSelf.person = original; resultBlock(original, error); } else { // Updating to the new value weakSelf.person = updatedPerson; resultBlock(updatedPerson, nil); } Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 30
  • 31. Following a person // Following a person - (void)follow:(void (^)(Person *person, NSError *error))resultBlock { __weak __typeof(self) weakSelf = self; // Saving original for later usage Person *original = self.person; // Create fake result Person *fake = [self.person copy]; fake.followingStatus = @"Following"; // Updating current object self.person = fake; resultBlock(fake, nil); // Calling request manager [self.requestManager followPerson:original result:^(Person *updatedPerson, NSError *error) { if (error) { // rollback weakSelf.person = original; resultBlock(original, error); } else { // Updating to the new value weakSelf.person = updatedPerson; resultBlock(updatedPerson, nil); } }]; } Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 31
  • 32. What about non-breaking? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 32
  • 33. Correct View Layer MVVM* Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 33
  • 34. Correct View Layer Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 34
  • 35. Correct View Layer Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 35
  • 36. Hiperactive User? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 36
  • 37. Hiperactive User? like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 37
  • 38. State based on multiple updates Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 38
  • 39. State based on multiple updates Take a look at Parse SDK PFObjectEstimatedData.h Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 39
  • 40. Demo?Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 40
  • 41. Recap Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 41
  • 42. Recap 4 It's pretty easy to trick user 4 Show user what he expect 4 Fight for your users, they deserve it 4 Now you can write even cooler apps :) Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 42
  • 43. Last slide :) Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 43
  • 44. Optimistic Approach How to show results instead spinners without breaking your Application by Paul Taykalo, Stanfy Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 44
  • 45. Links 4 http://www.reactnative.com/ 4 https://speakerdeck.com/frantic/react-native- under-the-hood 4 https://medium.com/stanfy-engineering-practices/ do-not-let-your-user-see-spinners-35b824c3ce2f 4 ComponentKit Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 45
  • 46. Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 46