Состояние ожидания UI, или как ничего не испортить

В докладе поговорим про состояния UI и их значение. Рассмотрим психологию ожидания пользователей и его влияние на продукт, способы нивелирования отрицательного эффекта от ожидания. Посмотрим на техническую реализацию такого варианта в рабочем проекте.

Transcript

1. САМВЕЛ МЕДЖЛУМЯН СОСТОЯНИЕ ОЖИДАНИЯ UI
2. САМВЕЛ МЕДЖЛУМЯН СОСТОЯНИЕ ОЖИДАНИЯ UI
3. САМВЕЛ МЕДЖЛУМЯН СОСТОЯНИЕ ОЖИДАНИЯ UI
4. UI ЛИФТА
5. ПЛАН ДОКЛАДА ▸ Пользовательский интерфейс ▸ Состояния интерфейса ▸ Психология ожидания ▸ Реализация состояния ожидания ▸ 3 рекомендации
6. UI
12. DESIGNING THE USER INTERFACE Offer informative feedback. For every operator action, there should be some system feedback. Всегда отображать состояние интерфейса, сохранять обратную связь.
13. ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
15. СОСТОЯНИЯ ИНТЕРФЕЙСА
17. СОСТОЯНИЯ ИНТЕРФЕЙСА
18. ИГНОР ТОЖЕ ФИДБЭК. Цитата из зала
19. THREE STATE SOLUTION https://basecamp.com/books/Getting%20Real.pdf
21. ПСИХОЛОГИЯ ОЖИДАНИЯ
23. Опыт ожидается в любом деле лишь частично определяется временем ожидания.
24. СОСТОЯНИЕ ОЖИДАНИЯ
25. ИНДИКАТОРЫ ОЖИДАНИЯ ▸ Цикличные ▸ Определённые
26. ЦИКЛИЧНЫЕ
27. ЦИКЛИЧНЫЕ ▸ Дополняйте текстовым сообщением, описывающим, какой процесс обрабатывается ▸ Используйте только для быстрых операций ▸ Выбирайте системную анимацию
29. ОПРЕДЕЛЁННЫЕ ▸ Для всех операций, происходящих больше 5-10 секунд ▸ Показатель никогда не должен уменьшаться ▸ Точность не столь важна ▸ Завершающая часть быстрее
33. «С внедрением индикаторов прогресса мы заставили людей следить за стрелкой часов. В результате время, как и работа приложения, для них стало идти дольше. Мы сконцентрировались на индикаторе, а не на прогрессе, который дает понять, что вы приближаетесь к цели, а не просто ждёте». Люк Вроблевски
34. СКЕЛЕТОН
35. СКЕЛЕТОН
36. СКЕЛЕТОН
37. 3 РЕКОМЕНДАЦИИ 1. Всегда давайте обратную связь пользователю 2. Используйте цикличные загрузчики для операций до 10 секунд 3. Используйте скелетную загрузку для интерфейсов с контентом
38. @SMEJL
39. РЕСУРСЫ ▸ https://vimeo.com/album/4511673/video/ 211085679 ▸ http://mercury.io/blog/the-psychology-of- waiting-loading-animations-and-facebook ▸ http://sketchapp.me/indikatory-progressa-v- mobilnom-ux-dizajne/ ▸ https://vc.ru/14045-bad-ui-tinder