Немного о коробках Главный критерий выбора «коробочных версий» – цена и функционал; «коробка» не заточена на заботу о пользователе; выход из коробки – важный этап эволюции банка 2
ИБ Банка Москвы: старая версия существовала с 2003 года; стандартная «коробочная» версия от iBank; оценка 3+ в рейтингах: «Есть необходимые функции, можно пользоваться, но без удовольствия» – информация взята из выступления Елены Фоминой на конференции iFin
Ключевые проблемы* «недружественный» к пользователю интерфейс: – отсутствие важной для пользователя информации (сроки следующего платежа по кредиту, разделение карт на кредитные и дебетовые и т.п.); – сложная и запутанная навигация; – отсутствие подсказок; – неоптимальная компоновка экрана для некоторых платежей. *на основе экспертной оценки USABILITYLAB, предшествовавшей проекту по созданию нового интерфейса 4
Пример проблемы: отсутствие важной информации 5 Дебетовые и кредитные карты ничем не отличаются. Пользователю приходится вспоминать номер нужной ему карты, чтобы посмотреть по ней информацию Тип счета не указан. В данном случае это депозит. Для пользователя с несколькими счетами и депозитами это будет представлять проблему
Пример проблемы: сложная навигация 6 Через пункт «Оплата квартплаты» в разделе «Коммунальные платежи» невозможно оплатить ЕПД. Оплата ЕПД вынесена в отдельный пункт. Это может вызвать трудности у неопытных пользователей: не все знают, что их квитанция называется «ЕПД».
Пример проблемы: нехватка подсказок 7 Нет пояснений, как правильно заполнять это поле (оно является проблемным во многих ИБ) Откуда брать и как считать НДС? (и обязательно ли это делать физическому лицу)
Пример проблемы: компоновка экранов 8 Ссылка «выслать пароль по SMS» не выглядит кликабельной и плохо заметна. Это вызовет затруднения у неопытных пользователей ИБ. Кнопка приоритетного действия «Отправить в банк» не отделена от других кнопок в пространстве и не отличается от них по оформлению. Ее сложно найти. Пользователь легко может по ошибке нажать на кнопку «отмена» или «редактировать».
Цель проекта Разработать удобный для пользователей интерфейс нового интернет-банка: – обеспечить простоту навигации; – обеспечить простоту выполнения всех задач пользователя; – обеспечить быстрый доступ к наиболее часто востребованным функциям интернет-банка; – сделать его доступным на максимальном количестве устройств (адаптивный дизайн). 9
Методология HCD Определение контекста использования Определение требований и ограничений Разработка проектных решений, соответствующих требованиям Оценка продукта на соответствие заявленным требованиям Внедрение 11
Методология HCD Определение контекста использования Определение требований и ограничений Разработка проектных решений, соответствующих требованиям Оценка продукта на соответствие заявленным требованиям Внедрение 12 Концептуальное и детальное проектирование, разработка ИА Юзабилити- тестирование Дизайн, передача разработчикам Выработка требований к ИБ: интервью с заказчиком и мозговой штурм
Особенность 1: персонажи на основе экспертизы Не было полноценного этапа исследования пользователей Минусы: – персонажи основаны на экспертном опыте сотрудников USABILITYLAB и представителей банка, поэтому информация об их потребностях и задачах необъективна; Плюсы: – экономия сроков и бюджета проекта.
Объекты интерфейса 15 Список всех объектов, их атрибутов и действий, которые может совершить пользователей Позволит нам не упустить требования к элементам, модулям, страница. Говорит нам о связях с другими объектами Фокусирует проектировщика и дизайнера на ключевых действиях объекта
Информационная архитектура 16 Схема, отображающая структуру всей будущей системы и ее иерархию Это навигация по сайту, которая делается с учетом пользовательских сценариев и приоритетов Позволяет не упустить сервисы и разделы Помогает "проверить себя на предмет отсутствия тупиковых страниц Помогает выделить требования к страницам Помогает определить связи с другими разделами и не забыть расставить на страницах все необходимые ссылки
Особенность 2: десктопная и мобильная версии Для ключевых экранов была спроектирована полноэкранная и мобильные версии; минусы: – увеличение срока и стоимости проекта плюсы: – обеспечено удобство пользователей, выходящих в мобильный банк со смартфонов; 18
Особенность 3: тестирование прототипов На основе детальных макетов был создан кликабельный прототип, который протестировали 17 пользователей минусы: – увеличение сроков и стоимости проекта; плюсы: – возможность внести правки в новый интерфейс до начала разработки. 20
Пример правок 21 Вариант до тестирования Итоговый вариант Представление основной и дополнительной карты стало древовидным Пункт «Телефон» переименован в «Городской телефон»
Рублевый перевод: проблемы 24 Комиссия не указана Непонятно, как заполнять НДС Цифры не разбиваются на группы, велика вероятность ошибки Кнопки «Отмена» и «Далее» расположены слишком близко
Рублевый перевод: решения 25 Подстановка значений полей из истории платежей Маска на поле уменьшает количество ошибок при воде Явно указана комиссия Кнопки приоритетного и второстепенного действия разнесены в пространстве и зрительно отличаются Убран шум, затрудняющий восприятие страницы: лишние полоски, серые блоки и т.п. Проектировщики разместили названия полей над полями, а не слева, как было. Страница стала не такая загруженная и читается легче
Работа с кредитной картой: проблемы 26 Непонятные термины «Кредитная линия», «Доступно» Способ переименования карты неочевиден Нет значимой информации о сумме и дате ближайшего платежа для погашения задолженности
Работа с кредитной картой: решений 27 Иконка карандаша рядом с названием карты однозначно сигнализирует о возможности переименования Все банковские термины переведены на «человеческий» язык Добавлена информация о ближайшем платеже Добавлено приглашение открыть дополнительную карту
Коробка или не коробка? На самом деле, не важно. Важно: спроектировать интерфейс системы до начала разработки; План А: ТЗ, которое уйдет вендорам или разработчикам, должно содержать макеты экранов и требования к пользовательским качествам. План Б: включайте этап юзабилити-тестирования. План Ц: используйте готовые исследования. 29
Критерии успешного внедрения ИБ увеличение числа активных пользователей; рост среднего количества операций на пользователя; снижение отказов; снижение нагрузки на саппорт; высокие пользовательские оценки, полученные в ходе юзабилити-тестирований, опросов и т.п. 31
usabilitylab
atsyhan
dnode
kadokawaconnected
vuunit
nealle
degas
okitsu
unionnet
lsuzuki
eviryr_recruit
forest_inc
recruitengineers
malarkey
pauljervisheath
searls
kneath
wjessup
hatefulcrawdad
robhawkes
trishagee
quramy
lauravandoore
chriscoyier
orderedlist