Принципы

    Метод

    Разработка цифровых продуктов в Альфе кардинально отличается от «деланья» сайтов и лендингов, вёрстки журналов и рисования иконок. Мы делаем работающие продукты, которыми пользуются люди. Поэтому при работе над задачами дизайнеры используют проверенный временем метод.

    1. Понять задачу клиента.
    2. Определить метрики.
    3. Сформулировать гипотезы решения.
    4. Определить контекст.
    5. Проверить решение.
    6. Проработать макеты.

    Метод работы над цифровыми продуктами

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

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

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

    Сначала — мобильные

    Писать в очередной раз про стабильный рост мобильного трафика не будем, но игнорировать этот факт, как минимум, недальновидно. Поговорим о более концептуальных моментах.

    Ограничение формата помогает думать только о важных для клиента вещах, в мобильном интерфейсе остаётся только самое ценное. Потом этот контент достаточно просто трансформировать к десктопному виду (по пути дополнив приятными деталями), а при наличии живой дизайн-системы это происходит на автомате.

    Если идти в обратную сторону — от десктопного интерфейса к  обильному, — то может произойти катастрофа.

    • Иногда к мобильной версии не возвращаются вообще, а если и делают, то по остаточному принципу. Возникают вопросы «Как показать столько информации на маленьком экране телефона?», «Как быть с таблицей?», «Как разбить на шаги эту огромную форму, которая достойно выглядела на моей ретине?» и т.д.
    • Разработка идёт без учёта гайдлайнов мобильных платформ. Это приводит к интерфейсным и навигационным конфликтам. Предаются забвению нативные компоненты, играющие важную роль при взаимодействии с пользователем: клавиатуры, «дропдауны», «барабаны», адресная строка браузера и другие.
    • Не учитывается контекст использования мобильного устройства. Использовать стационарный компьютер в метро или битком набитой электричке затруднительно, а вот мобильную ЭВМ в тех же условиях — запросто.

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

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

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

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

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

    • Поддерживаем навигационную модель платформы. Например, кнопка «Назад» ведёт себя по-разному в разных операционных системах.
    • Поддерживаем паттерны поведения платформы. Например, в контекстных меню в iOS используются свайпы, а в Android — лонгтапы.
    • Используем привычные метафоры иконок — share, more button и других.
    • Дизайн диалоговых окон не меняем.