Принципы

Единый UX в продуктах

На данном этапе развития приложений наша основная задача — привести все приложения к единой стилистике и создать базу паттернов, которые можно переиспользовать, которые привычны и понятны клиентам.

Это достигается за счет нескольких вещей:

1. Единая стилистика приложений на всех платформах
2. Общие паттерны и поведение компонентов

Общие сущности оформляются и тестируются перед тем, как попасть в список примеров и рекомендаций. Необходимо избегать отступлений от этих решений и использовать их без изменений настолько, насколько это возможно.

Единый UI на iOS и Android

Дизайн выполняется в стилистике Альфа-Банка, с учетом особенностей операционных систем. Для этого необходима стилизация стандартных системных компонентов. В небольших проектах их кастомизация зачастую нецелесообразна из-за падения скорости разработки. В больших продуктах такой прием позволяет улучшить и унифицировать пользовательский опыт в разных продуктах и отделиться от конкурентов.

Среди основных преимуществ:

• Обучаемость пользователей. Нет необходимости заново привыкать к приложению: если уже пользовался веб-приложением или приложением на другой ОС, то всё сразу понятно.
• Переиспользование паттернов: если пользователь в розничном приложении уже научился выполнять какие-то функции, он гораздо быстрее сможет воспроизвести их и в корпоративном приложении.
• Переиспользование графики: ускорение в разработке макетов и прототипов.
• Удешевление тестирования: достаточно протестировать паттерны/поведение на одном прототипе и масштабировать результаты для обеих основных ОС.
• Информационная/рекламная поддержка: узнаваемые, похожие интерфейсы удобно демонстрировать в информационных материалах (пользователь узнаёт интерфейс с рекламы в своем телефоне — формирование доверия).
• Переиспользование кода: одни и те же решения/наработки могут быть разработаны сначала в корпоративном приложении, затем переиспользованы в розничном, и наоборот (в том числе это справедливо и для других приложений).
• Поддержка: независимо от ОС пользователя, сотрудники поддержки банка, его родные/друзья смогут подсказать, какую кнопку нажать, где она находится и как она выглядит.
• Укрепление визуальной составляющей бренда Альфа-Банка.

От чего отказываемся

• Floating Action Button — http://take.ms/H4Xo7, http://take.ms/HdUt7 Компонент привычен пользователям Android, хотя от приложения к приложению ведет себя по-разному. И не так очевиден пользователям iOS.

Что соблюдаем

• Паттерны поведения: например, свайпы для контекстных меню в iOS, лонгтапы для Android.
• Привычные матфоры иконок: share, more button...
• Дизайн диалоговых окон не кастомизируем.