1. 3 проблемы каналов ДБО,
отталкивающие ваших клиентов
1 из 44

2. 3 канала ДБО:
интернет-банк, мобильные приложения, банкоматы.
Интерфейс разный, проблемы общие.
2 из 44

3. 3 самые проблемные
области:
навигация;
подсказки и
сообщения об
ошибке;
ввод данных.
3 из 44

4. Навигация
4 из 44

5. Почему это важно
Хорошая навигация
демонстрирует
возможности системы
(«что тут есть»);
побуждает к
исследованию
системы;
дает возможность
быстро и
безошибочно
выполнить свою
задачу.
5 из 44

6. Главные проблемы
Непонятные
названия разделов;
нелогичная
структура разделов;
недостаточная или
избыточная ширина
«дерева» навигации;
неочевидное
расположение
элементов управления.
6 из 44

7. Нелогичное размещение элементов управления:
кнопка «отменить платеж» находится в правом верхнем углу
экрана и плохо заметна для пользователей
7 из 44

8. Неочевидная
навигация в
мобильном
приложении:
кнопка «перевести»
расположена в
необычном месте, ее
не замечают.
8 из 44

9. Другой пример
нелогичного
размещения
элементов
управления:
кнопка «да»
незаметна;
кнопка «нет»
автоматически
воспринимается
как единственный
верный ответ.
9 из 44

10. Слишком широкое дерево навигации.
Пользователи теряются, увидев такое количество пунктов.
Верхнее меню также перегружено.
10 из 44

11. Еще один пример перегруженного меню.
11 из 44

12. Слишком узкая и
запутанная навигация:
«Заявка на кредит» в
колонке «Быстрое
снятие наличных»;
непонятный пункт
«другая сумма»;
много разнородных
пунктов в разделе
«другие операции».
Вверху – главный экран,
12
внизу – экран «другие операции»из 44

13. Нелогичное название кнопки:
кнопка «Нажмите для возврата в меню» ведет на
следующий экран, а не в меню.
13 из 44

14. Нелогичное расположение разделов:
«Перевод с карты на карту» есть только на «внешнем»
экране приложения, а пользователи ищут его «внутри».
14 из 44

15. Нелогичное расположение разделов и кнопок
в интернет-банке: «История платежей» в разделе
«Оплатить услуги»;
Кнопка «Оплачивать услуги периодически» незаметна
для пользователей;
пользователи ищут эту возможность непосредственно
на странице платежа.
15 из 44

16. Что делать
Проверка навигации:
– карточная сортировка;
– юзабилити-тестирование.
Создание навигации:
– карточная сортировка;
– продумывание сценариев
работы пользователей в
системе.
Расположение кнопок на
экране:
– порядок восприятия:
сверху вниз, слева
направо..
16 из 44

17. Ввод данных
17 из 44

18. Почему это важно
Минимизация ошибок
пользователя,
совершенных по
невнимательности или
неловкости;
уменьшение времени
на совершение одной
операции;
снижение порога
вхождения в систему.
18 из 44

19. Главные проблемы
Неудобные элементы
управления;
отсутствие
группировки длинных
цепочек цифр;
нелогичный
порядок полей.
19 из 44

20. Распространенная
среди мобильных
приложений
проблема:
клавиатура
перекрывает кнопку
«Продолжить»;
возможность
перехода на другое
поле/экран при
помощи клавиши
«Ввод» есть не всегда.
20 из 44

21. Неудачная виртуальная клавиатура:
мелкие кнопки, буквы сливаются с фоном
21 из 44

22. Проблема, характерная для многих систем ДБО:
длинные цепочки цифр не разбиваются на группы
22 из 44

23. Нелогичная последовательность шагов: сначала требуется
указать куда, а потом – откуда осуществляется перевод.
Естественная последовательность действий – обратная
(откуда-куда).
23 из 44

24. Перевод с рублевого счета на валютный.
Достаточно заполнить только одно поле «сумма»,
но пользователи пытаются заполнить оба и ошибаются.
24 из 44

25. Перевод юридическому лицу.
Название полностью вводится вручную,
никаких автоподстановок нет.
Юзабилити-тестирование показало, что пользователи
часто делают ошибки в этом поле.
25 из 44

26. При клике на поле курсор встает в место клика,
а не в начало поля. Пользователи этого не замечают
и делают ошибки.
26 из 44

27. Что делать
Подставлять данные
автоматически там, где это
возможно;
группировать длинные
цепочки цифр;
соблюдать естественную
логику выполнения задачи;
исследовать
поведение пользователей
(юзабилити-тестирование).
27 из 44

28. Подсказки и
сообщения об ошибках
28 из 44

29. Почему это важно
Минимизация ошибок
пользователя,
совершенных по
незнанию;
повышение уверенности
пользователя в
правильности
выполняемых действий.
29 из 44

30. Главные проблемы
• отсутствие;
• неудачное
расположение;
• низкая степень
информативности.
30 из 44

31. Пример отсутствия
подсказки в
мобильном
приложении:
неизвестно, в каком
формате указывать
оплачиваемый период
31 из 44

32. Неудачное расположение подсказки:
• желтый фон,
• слишком большая длина
(даже на скриншот не поместилось);
• слишком далеко от поля.
Из-за этого текст не выглядит как подсказка, пользователи
его не читают.
32 из 44

33. Пример неполной подсказки: валюта перевода указана, а
ограничение по сумме – нет.
33 из 44

34. Оплата ЖКХ.
Нет пояснений, что указывать в поле «Дата оплаты»:
– в квитанции указан только месяц и год;
– при выборе будущей даты списание все равно
происходит немедленно
34 из 44

35. Пример слишком длинной подсказки:
чтобы ее понять, надо прочитать полностью;
в условиях дефицита времени это может быть критично.
35 из 44

36. Типичный пример
неудачного
расположения
сообщения об
ошибке:
внимание
пользователя
сосредоточено внизу,
а сообщение –
наверху.
Это особенно
критично на длинных
страницах.
36 из 44

37. Это же сообщение как показательный пример
неинфомативности: невозможно понять, в чем проблема
(опечатка в номере счета).
37 из 44

38. Сообщение, которое отображается при любой ошибке, со
стороны как пользователя, так и системы.
38 из 44

39. Плохо, когда
сообщения об ошибке
нет совсем.
Пользователь оплатил
не того оператора.
На чеке ничего
настораживающего.
У банкомата –
технические
ограничения, но эта
же проблема
характерна для других
каналов ДБО.
39 из 44

40. Что делать
считать все очевидное
неочевидным;
считать пользователей
глупее, чем они есть на
самом деле;
не лениться писать разные
сообщения об ошибках;
тестировать заметность и
достаточность подсказок на
реальных пользователях
– возможно с применением
eye-tracking
40 из 44

41. О чем еще
можно подумать
41 из 44

42. термины (банковские
или «понятные»);
выписки: полнота
информации и ее
доступность для
понимания;
способы
подтверждения
платежа;
обратная связь
об успешности
проведения
операции.
42 из 44

43. Чем мы можем вам
помочь?
Исследования
юзабилити-тестирование
юзабилити-аудит
карточная сортировка
исследование пользователей
Проектирование
веб-сайты
настольные приложения
мобильные приложения
Повышение конверсии
настройка GA и Яндекс.Метрики
A/B тестирование
«юзабилити-поддержка»
43 из 44

44. Будем рады
сотрудничеству!
Куколева Олеся
ведущий специалист
USABILITYLAB
Тел.: +7 (495) 933-01-37
o.kukoleva@usabilitylab.net
www.usabilitylab.ru
Специалист на проекте и автор презентации:
Мария Новикова, ведущий специалист USABILITYLAB
m.novikova@usabilitylab.net
44 из 44