Эволюция проекта БАНК МОСКВЫ:

эффективный интернет-банк

Дмитрий Силаев,

коммерческий директор USABILITYLAB

d.silaev@usabilitylab.net

Моб.: +7 (926) 492 05 50

Офис: +7 (495) 933 01 37 #401

Немного о коробках

Главный критерий выбора «коробочных версий» – цена и функционал;

«коробка» не заточена на заботу о пользователе;

выход из коробки – важный этап эволюции банка

2

ИБ Банка Москвы:

старая версия

существовала с 2003 года;

стандартная «коробочная» версия от iBank;

оценка 3+ в рейтингах: «Есть необходимые

функции, можно пользоваться, но без

удовольствия» – информация взята из выступления Елены Фоминой на конференции

iFin

Ключевые проблемы*

«недружественный» к пользователю интерфейс: – отсутствие важной для пользователя информации (сроки следующего

платежа по кредиту, разделение карт на кредитные и дебетовые и т.п.);

– сложная и запутанная навигация;

– отсутствие подсказок;

– неоптимальная компоновка экрана для некоторых платежей.

*на основе экспертной оценки USABILITYLAB, предшествовавшей проекту по созданию нового

интерфейса

4

Пример проблемы: отсутствие важной информации

5

Дебетовые и кредитные карты

ничем не отличаются.

Пользователю приходится

вспоминать номер нужной ему

карты, чтобы посмотреть по ней

информацию

Тип счета не указан. В данном

случае это депозит. Для

пользователя с несколькими

счетами и депозитами это будет

представлять проблему

Пример проблемы: сложная навигация

6

Через пункт «Оплата

квартплаты» в разделе

«Коммунальные платежи»

невозможно оплатить ЕПД.

Оплата ЕПД вынесена в

отдельный пункт. Это может

вызвать трудности у неопытных

пользователей: не все знают, что

их квитанция называется «ЕПД».

Пример проблемы: нехватка подсказок

7

Нет пояснений, как правильно

заполнять это поле (оно является

проблемным во многих ИБ)

Откуда брать и как считать НДС?

(и обязательно ли это делать

физическому лицу)

Пример проблемы: компоновка экранов

8

Ссылка «выслать пароль по SMS»

не выглядит кликабельной и

плохо заметна. Это вызовет

затруднения у неопытных

пользователей ИБ.

Кнопка приоритетного действия

«Отправить в банк» не отделена

от других кнопок в пространстве

и не отличается от них по

оформлению. Ее сложно найти.

Пользователь легко может по

ошибке нажать на кнопку

«отмена» или «редактировать».

Цель проекта

Разработать удобный для пользователей

интерфейс нового интернет-банка: – обеспечить простоту навигации;

– обеспечить простоту выполнения всех задач пользователя;

– обеспечить быстрый доступ к наиболее часто востребованным

функциям интернет-банка;

– сделать его доступным на максимальном количестве устройств

(адаптивный дизайн).

9

Ход проекта

10

Методология HCD

Определение

контекста

использования

Определение

требований и

ограничений

Разработка проектных

решений,

соответствующих

требованиям

Оценка продукта на

соответствие

заявленным

требованиям

Внедрение

11

Методология HCD

Определение

контекста

использования

Определение

требований и

ограничений

Разработка проектных

решений,

соответствующих

требованиям

Оценка продукта на

соответствие

заявленным

требованиям

Внедрение

12

Концептуальное

и детальное

проектирование,

разработка ИА

Юзабилити-

тестирование

Дизайн, передача

разработчикам

Выработка требований

к ИБ: интервью с

заказчиком и

мозговой штурм

Персонажи и сценарии

13

Основа для персонажей – совместный мозговой

штурм с представителями банка

Особенность 1: персонажи на основе экспертизы

Не было полноценного этапа исследования

пользователей

Минусы: – персонажи основаны на экспертном опыте сотрудников USABILITYLAB

и представителей банка, поэтому информация об их потребностях и

задачах необъективна;

Плюсы: – экономия сроков и бюджета проекта.

Объекты интерфейса

15

Список всех объектов, их атрибутов и действий, которые может совершить пользователей

Позволит нам не упустить

требования к элементам,

модулям, страница.

Говорит нам о связях с

другими объектами Фокусирует

проектировщика и

дизайнера на ключевых

действиях объекта

Информационная архитектура

16

Схема, отображающая структуру всей будущей системы и ее иерархию Это навигация по сайту,

которая делается с учетом пользовательских сценариев и приоритетов

Позволяет не упустить сервисы и разделы

Помогает "проверить себя" на предмет отсутствия тупиковых страниц

Помогает выделить требования к страницам

Помогает определить связи с другими разделами и не забыть расставить на страницах все необходимые ссылки

Проектирование

17

Главная страница:

концепция

Главная страница:

детальный прототип

Особенность 2: десктопная

и мобильная версии

Для ключевых экранов была спроектирована

полноэкранная и мобильные версии;

минусы: – увеличение срока и стоимости проекта

плюсы: – обеспечено удобство пользователей, выходящих в мобильный банк со

смартфонов;

18

Пример

19 Настольная версия

Мо

бильн

ая в

ер

сия

Особенность 3: тестирование

прототипов

На основе детальных макетов был создан

кликабельный прототип, который протестировали

17 пользователей

минусы: – увеличение сроков и стоимости проекта;

плюсы: – возможность внести правки в новый интерфейс до начала разработки.

20

Пример правок

21

Вариант до тестирования Итоговый вариант

Представление основной и дополнительной карты стало древовидным

Пункт «Телефон» переименован в «Городской телефон»

Итог: дизайн

22

Главная страница: прототип Главная страница: дизайн

Примеры решенных проблем

23

Рубл

евы

й п

ере

вод

: пробл

ем

ы

24

Комиссия не указана

Непонятно, как

заполнять НДС

Цифры не разбиваются на

группы, велика

вероятность ошибки

Кнопки «Отмена» и

«Далее» расположены

слишком близко

Рубл

евы

й п

ере

вод

:

реш

ени

я

25

Подстановка

значений полей из

истории платежей

Маска на поле

уменьшает количество

ошибок при воде

Явно указана

комиссия

Кнопки приоритетного и

второстепенного действия

разнесены в пространстве и

зрительно отличаются

Убран шум, затрудняющий

восприятие страницы:

лишние полоски, серые

блоки и т.п.

Проектировщики разместили названия полей над полями, а не слева, как было. Страница стала не такая загруженная и читается легче

Ра

бота

с к

ред

итн

ой

ка

рто

й:

пробл

ем

ы

26

Непонятные термины

«Кредитная линия»,

«Доступно»

Способ

переименования

карты неочевиден

Нет значимой

информации о сумме

и дате ближайшего

платежа для

погашения

задолженности

Ра

бота

с к

ред

итн

ой

ка

рто

й:

реш

ени

й

27

Иконка карандаша рядом с

названием карты

однозначно сигнализирует

о возможности

переименования

Все банковские

термины переведены

на «человеческий» язык

Добавлена

информация о

ближайшем платеже

Добавлено

приглашение открыть

дополнительную карту

Выводы

28

Коробка или не коробка?

На самом деле, не важно. Важно: спроектировать

интерфейс системы до начала разработки;

План А: ТЗ, которое уйдет вендорам или

разработчикам, должно содержать макеты экранов

и требования к пользовательским качествам.

План Б: включайте этап юзабилити-тестирования.

План Ц: используйте готовые исследования.

29

Результаты внедрения

будут оценивать пользователи

30

Критерии успешного внедрения

ИБ

увеличение числа активных пользователей;

рост среднего количества операций на

пользователя;

снижение отказов;

снижение нагрузки на саппорт;

высокие пользовательские оценки, полученные

в ходе юзабилити-тестирований, опросов и т.п.

31

Специальные гости

Ольга Лебедюк Начальник отдела продаж через каналы ДБО

Екатерина Ключкина Менеджер проекта

СПАСИБО ЗА ВНИМАНИЕ! Выслать презентацию? Обсудить подробнее?

Дмитрий Силаев,

коммерческий директор USABILITYLAB

d.silaev@usabilitylab.net

Моб.: +7 (926) 492 05 50

Офис: +7 (495) 933 01 37 #401