Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Банк Москвы: эффективный интернет-банк

Банк Москвы: эффективный интернет-банк

Кейс USABILITYLAB: перепроектирование интернет-банка для Банка Москвы (2014 год)

More Decks by USABILITYLAB — знаем всё о юзабилити интерфейсов

Other Decks in Business

Transcript

  1. Эволюция проекта БАНК МОСКВЫ: эффективный интернет-банк Дмитрий Силаев, коммерческий директор

    USABILITYLAB d.silaev@usabilitylab.net Моб.: +7 (926) 492 05 50 Офис: +7 (495) 933 01 37 #401
  2. Немного о коробках  Главный критерий выбора «коробочных версий» –

    цена и функционал;  «коробка» не заточена на заботу о пользователе;  выход из коробки – важный этап эволюции банка 2
  3. ИБ Банка Москвы: старая версия  существовала с 2003 года;

     стандартная «коробочная» версия от iBank;  оценка 3+ в рейтингах: «Есть необходимые функции, можно пользоваться, но без удовольствия» – информация взята из выступления Елены Фоминой на конференции iFin
  4. Ключевые проблемы* «недружественный» к пользователю интерфейс: – отсутствие важной для

    пользователя информации (сроки следующего платежа по кредиту, разделение карт на кредитные и дебетовые и т.п.); – сложная и запутанная навигация; – отсутствие подсказок; – неоптимальная компоновка экрана для некоторых платежей. *на основе экспертной оценки USABILITYLAB, предшествовавшей проекту по созданию нового интерфейса 4
  5. Пример проблемы: отсутствие важной информации 5 Дебетовые и кредитные карты

    ничем не отличаются. Пользователю приходится вспоминать номер нужной ему карты, чтобы посмотреть по ней информацию Тип счета не указан. В данном случае это депозит. Для пользователя с несколькими счетами и депозитами это будет представлять проблему
  6. Пример проблемы: сложная навигация 6 Через пункт «Оплата квартплаты» в

    разделе «Коммунальные платежи» невозможно оплатить ЕПД. Оплата ЕПД вынесена в отдельный пункт. Это может вызвать трудности у неопытных пользователей: не все знают, что их квитанция называется «ЕПД».
  7. Пример проблемы: нехватка подсказок 7 Нет пояснений, как правильно заполнять

    это поле (оно является проблемным во многих ИБ) Откуда брать и как считать НДС? (и обязательно ли это делать физическому лицу)
  8. Пример проблемы: компоновка экранов 8 Ссылка «выслать пароль по SMS»

    не выглядит кликабельной и плохо заметна. Это вызовет затруднения у неопытных пользователей ИБ. Кнопка приоритетного действия «Отправить в банк» не отделена от других кнопок в пространстве и не отличается от них по оформлению. Ее сложно найти. Пользователь легко может по ошибке нажать на кнопку «отмена» или «редактировать».
  9. Цель проекта  Разработать удобный для пользователей интерфейс нового интернет-банка:

    – обеспечить простоту навигации; – обеспечить простоту выполнения всех задач пользователя; – обеспечить быстрый доступ к наиболее часто востребованным функциям интернет-банка; – сделать его доступным на максимальном количестве устройств (адаптивный дизайн). 9
  10. Ход проекта 10

  11. Методология HCD Определение контекста использования Определение требований и ограничений Разработка

    проектных решений, соответствующих требованиям Оценка продукта на соответствие заявленным требованиям Внедрение 11
  12. Методология HCD Определение контекста использования Определение требований и ограничений Разработка

    проектных решений, соответствующих требованиям Оценка продукта на соответствие заявленным требованиям Внедрение 12 Концептуальное и детальное проектирование, разработка ИА Юзабилити- тестирование Дизайн, передача разработчикам Выработка требований к ИБ: интервью с заказчиком и мозговой штурм
  13. Персонажи и сценарии 13 Основа для персонажей – совместный мозговой

    штурм с представителями банка
  14. Особенность 1: персонажи на основе экспертизы  Не было полноценного

    этапа исследования пользователей  Минусы: – персонажи основаны на экспертном опыте сотрудников USABILITYLAB и представителей банка, поэтому информация об их потребностях и задачах необъективна;  Плюсы: – экономия сроков и бюджета проекта.
  15. Объекты интерфейса 15 Список всех объектов, их атрибутов и действий,

    которые может совершить пользователей Позволит нам не упустить требования к элементам, модулям, страница. Говорит нам о связях с другими объектами Фокусирует проектировщика и дизайнера на ключевых действиях объекта
  16. Информационная архитектура 16 Схема, отображающая структуру всей будущей системы и

    ее иерархию Это навигация по сайту, которая делается с учетом пользовательских сценариев и приоритетов Позволяет не упустить сервисы и разделы Помогает "проверить себя на предмет отсутствия тупиковых страниц Помогает выделить требования к страницам Помогает определить связи с другими разделами и не забыть расставить на страницах все необходимые ссылки
  17. Проектирование 17 Главная страница: концепция Главная страница: детальный прототип

  18. Особенность 2: десктопная и мобильная версии  Для ключевых экранов

    была спроектирована полноэкранная и мобильные версии;  минусы: – увеличение срока и стоимости проекта  плюсы: – обеспечено удобство пользователей, выходящих в мобильный банк со смартфонов; 18
  19. Пример 19 Настольная версия Мобильная версия

  20. Особенность 3: тестирование прототипов  На основе детальных макетов был

    создан кликабельный прототип, который протестировали 17 пользователей  минусы: – увеличение сроков и стоимости проекта;  плюсы: – возможность внести правки в новый интерфейс до начала разработки. 20
  21. Пример правок 21 Вариант до тестирования Итоговый вариант Представление основной

    и дополнительной карты стало древовидным Пункт «Телефон» переименован в «Городской телефон»
  22. Итог: дизайн 22 Главная страница: прототип Главная страница: дизайн

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

  24. Рублевый перевод: проблемы 24 Комиссия не указана Непонятно, как заполнять

    НДС Цифры не разбиваются на группы, велика вероятность ошибки Кнопки «Отмена» и «Далее» расположены слишком близко
  25. Рублевый перевод: решения 25 Подстановка значений полей из истории платежей

    Маска на поле уменьшает количество ошибок при воде Явно указана комиссия Кнопки приоритетного и второстепенного действия разнесены в пространстве и зрительно отличаются Убран шум, затрудняющий восприятие страницы: лишние полоски, серые блоки и т.п. Проектировщики разместили названия полей над полями, а не слева, как было. Страница стала не такая загруженная и читается легче
  26. Работа с кредитной картой: проблемы 26 Непонятные термины «Кредитная линия»,

    «Доступно» Способ переименования карты неочевиден Нет значимой информации о сумме и дате ближайшего платежа для погашения задолженности
  27. Работа с кредитной картой: решений 27 Иконка карандаша рядом с

    названием карты однозначно сигнализирует о возможности переименования Все банковские термины переведены на «человеческий» язык Добавлена информация о ближайшем платеже Добавлено приглашение открыть дополнительную карту
  28. Выводы 28

  29. Коробка или не коробка?  На самом деле, не важно.

    Важно: спроектировать интерфейс системы до начала разработки;  План А: ТЗ, которое уйдет вендорам или разработчикам, должно содержать макеты экранов и требования к пользовательским качествам.  План Б: включайте этап юзабилити-тестирования.  План Ц: используйте готовые исследования. 29
  30. Результаты внедрения будут оценивать пользователи 30

  31. Критерии успешного внедрения ИБ  увеличение числа активных пользователей; 

    рост среднего количества операций на пользователя;  снижение отказов;  снижение нагрузки на саппорт;  высокие пользовательские оценки, полученные в ходе юзабилити-тестирований, опросов и т.п. 31
  32. Специальные гости Ольга Лебедюк Начальник отдела продаж через каналы ДБО

    Екатерина Ключкина Менеджер проекта
  33. СПАСИБО ЗА ВНИМАНИЕ! Выслать презентацию? Обсудить подробнее? Дмитрий Силаев, коммерческий

    директор USABILITYLAB d.silaev@usabilitylab.net Моб.: +7 (926) 492 05 50 Офис: +7 (495) 933 01 37 #401