Содержание: 1. Повествовательные веб-формы 2. Подсказки при вводе 3. Свободный формат 4. Автозаполнение

1. BEST UI DESIGN PRACTICES.
UI PATTERNS. FORMS
Анастасия Шпакова, EPAM Systems
для Rolling Scopes Summer Summit

2. 2
Анастасия Шпакова
ux-дизайнер в EPAM Systems
nastassia.shpakava
nastasja.shpakova@gmail.com

3. Не всегда есть возможность
напрямую общаться
с целевой аудиторией
3

4. Как соответствовать
ожиданиям пользователей?
4

5. Использовать наиболее
общие ментальные модели
5

6. Ментальные модели —
представления пользователей о том,
как что-то должно выглядеть и работать
6

7. как соответствовать ожиданиям пользователей?
7
использовать паттерны

8. Формы
получение данных от
пользователя
8

9. Формы — боль
9
для пользователя

10. Формы — боль
10
для пользователя

11. Mad Libs
Forms
Повествовательные веб-формы
(Natural language forms
Fill-in-the-Blanks
Заполнение пробелов)
11

12. Mad Libs
Forms
это название
придумал
Luke Wroblewski
по аналогии
с американской
игрой
12

13. https://huffduffer.com/ — сайт для обмена музыкой
13

14. Проблема
• обычные формы говорят с
пользователем на языке
бездушных машин
(лейбл + значение)
• формулировки слишком
официальны
• формулировки расплывчаты
14
Mad Libs Forms

15. Решение
• говорить с пользователем
простым языком
• формулировать вопросы в
формате повествования
15
Mad Libs Forms

16. Применение
• вход и регистрация
https://www.okcupid.com/
16
Mad Libs Forms

17. Применение
• вход и регистрация
https://www.okcupid.com/
• фильтрация и поиск
escapeflight.com/
17
Mad Libs Forms

18. Применение
• вход и регистрация
https://www.okcupid.com/
• фильтрация и поиск
escapeflight.com/
• контактные данные
https://prospek.ca/
18
Mad Libs Forms

19. Ограничения
• количество информации
(оптимально 3-5 пунктов)
• стилистика
(задают неофициальный тон)
19
Mad Libs Forms

20. https://www.hioscar.com/
медицинское страхование
функция формы: фильтрация
подбор подходящих тарифов в
зависимости от страховой
котировки
20

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27

28. https://www.airforce.com/
военно-воздушные силы США
функция формы: фильтрация
подбор подходящих вакансий в
зависимости от пола,
образования и мотивации
28

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

35. 35

36. Input Hints
Подсказки при вводе
36

37. Проблема
• не понятно, какие данные
нужно вводить
• не понятно, в каком формате
нужно вводить данные
37
Input Hints

38. Решение
• задать формат (маской)
https://www.tcsbank.ru/
38
Input Hints

39. Решение
• задать формат (маской)
https://www.tcsbank.ru/
eagleadventuretours.de
39
Input Hints

40. Решение
• задать формат (маской)
https://www.tcsbank.ru/
eagleadventuretours.de
• использовать подсказки
https://lk.megafon.ru/login/
40
Input Hints

41. Решение
• задать формат (маской)
https://www.tcsbank.ru/
eagleadventuretours.de
• использовать подсказки
https://lk.megafon.ru/login/
https://www.tinkoff.ru/
41
Input Hints

42. Решение
• задать формат (маской)
https://www.tcsbank.ru/
eagleadventuretours.de
• использовать подсказки
https://lk.megafon.ru/login/
https://www.tinkoff.ru/
• привести примеры
http://www.yelp.com/
42
Input Hints

43. Input Hints
https://www.tinkoffinsurance.ru/
43

44. https://www.tumblr.com/
сеть микроблогов
интересный вариант
использования примеров в
качестве подсказок
44

45. 45

46. 46

47. 47

48. 48

49. 49

50. Input Hints
https://accounts.google.com/ — использование и подсказки, и примера
50

51. Input Hints
http://gorod.mos.ru/ — использование и подсказки, и примера
51

52. Input Hints
http://rabota.ua/ — использование и подсказки, и примера
52

53. Forgiving
Format
Свободный формат
53

54. Задача
• пользователи хотят вводить
данные в удобном для них
формате
54
Forgiving Format

55. Решение
• позвольте пользователям
вводить данные в разных
форматах
• предоставьте интерпретацию
этих данных системе
• используйте подсказки
55
Forgiving Format

56. Forgiving Format
http://www.imdb.com/ — крупнейшая база данных о кино
56

57. Forgiving Format
https://www.yell.com/ — база данных с адресами, телефонами разных
фирм, а также отзывами посетителей о их работе
57

58. Forgiving Format
http://www.yelp.com/ — аналогичный американский сервис
58

59. Forgiving Format
https://soundcloud.com/ — музыкальная соцсеть для общения с
музыкантами, загрузки и поиска музыки
59

60. https://www.airbnb.ru/ — площадка для размещения, поиска и
краткосрочной аренды частного жилья по всему миру.
60

61. Autocomplete
Автозаполнение
61

62. Проблема
• ввод данных требует от
пользователя слишком много
времени или усилий
62
Autocomplete

63. Решение
• предвосхищать возможные
варианты ввода
• опираться на знания системы
о пользователе
• или хотя бы на наиболее
популярные варианты от
других пользователей
63
Autocomplete

64. Советы
• отделяйте вспомогательную
информацию
64
Autocomplete
хорошо
плохо

65. Советы
• отделяйте вспомогательную
информацию
• выделяйте отличия, а не
сходства
65
Autocomplete
хорошо
плохо

66. Советы
• отделяйте вспомогательную
информацию
• выделяйте отличия, а не
сходства
• избегайте скролла
66
Autocomplete
хорошо
плохо

67. Советы
• отделяйте вспомогательную
информацию
• выделяйте отличия, а не
сходства
• избегайте скролла
• показывайте историю поиска
67
Autocomplete
хорошо
хорошо

68. Подведём итоги
• Mad Libs Forms
Повествовательные формы
• Input Hints
Подсказки при вводе
• Forgiving Format
Свободный формат
• Autocomplete
Автозаполнение
68
UI-паттерны для форм

69. 69
СПАСИБО :)
nastassia.shpakava
nastasja.shpakova@gmail.com