Исследуя дизайн Stripe Dashboard для iPhone

[pullquote align=right]

Микаэль Виллар, UI разработчик в Stripe, поделился тем, как они в компании разрабатывают мобильные приложения
[/pullquote]

Из-за особенностей сервиса Stripe он не мог начаться как mobile-first, в отличие от многих нынешних компаний. Ключевой бизнес это API для платежей, который позволяет компаниям начинать принимать платежи за считанные минуты. Веб-панель облегчает команде отслеживание и управление подписками, платежами, потребителями и переводами. Она была разработана для большого экрана и поэтому редко используется в мобайле. После выпуска последней версии Checkout мы решили сфокусироваться на разработке мобильного приложения, начав с iPhone.

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

[highlight]Дизайн любого продукта может казаться неподъемным, но если опираться на необходимые впечатления пользователей, он станет понятным.[/highlight]

Скачать QR-Code

‎Stripe Dashboard

Developer: Stripe, Inc

Price: Free

Видение

Мы тратим много времени на фазу концептуализации. Несмотря на то, что это первый шаг, дизайн продукта никогда не заканчивается по-настоящему и его нужно всегда пересматривать.

Наша первая встреча всегда начинается с чистого листа: мы определяем все ключевые для UX функции. Приложение Dashboard на iPhone мы видели как сопровождающее и сконцентрировались на двух основных способах использования, а не полной версии панели управления:

1. Это приложение, которое вы открываете с утра, чтобы проверить цифры за вчера.
2. Способ быстро просмотреть потребителей, платежи и информацию о трансферах.

Вайрфреймы

После определения функций мы начинаем работать над вайрфреймами. У нас есть дополнительная сложность из-за разницы во времени в 9 часов. Чтобы справиться с этим мы делаем все на бумаге, рисуем картинки и подписываем объяснения. Потом шлем их друг другу и ждем ответа. Вот пример (на французском):

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

Визуальный дизайн

Когда файрфреймы готовы, мы начинаем работать над визуальным дизайном. На начале этой стадии мы близко работаем с тем, чтобы найти правильное направление, которое лучше всего подходит нам. Домашняя страница, например, прошла через много итераций. Мы знали, что нам нужно показать недавнюю активность в центре, но решили, что это не должно быть очень строго. Легко решить, что чем больше данных, тем лучше, но мы выбрали только самое важное: то, что заслуживает отображения на главной.

Когда мы оба соглашаемся на направлении визуального дизайна, Бенджамин начинает финализировать все. Конечно, будет еще много фидбека потом, но в основном здесь всем правит Бенджамин.

Взаимодействия

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

Для приложения Dashboard мы выбрали парадигму карточек. Решили сделать веб-прототип, который оказался до смешного глючным, но убедил нас, что идея стоит того, чтобы ее воплотить.

Сделать так, чтобы этот UI был интуитивным и эффектным, сложно.

• Нужно, чтобы новые карточки открывались так, чтобы пользователям было видно, что ими можно управлять: сбрасывать вбок легким движением — именно так их можно двигать и удалять.
• Нужна дополнительная тень при выборе карточки, чтобы подчеркнуть, что вы работаете именно с ней.
• Нужно, чтобы карточки при сбрасывании верхней продвигались вперед, чтобы было виден прогресс.
• Скорость сбрасывания карточки должна совпадать со скоростью приближения остальных, чтобы было понятно, что это связанные действия.
•  Дальние карточки должны быть темнее, как в реальной жизни

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

Можно переключать отображаемый временной период в графике прибыли/потребителей. То, как мы реализовали эту анимацию, помогает пользователям понять, где предыдущий период находится относительно нового. Если вы присмотритесь, то поймете, что со сменой единиц с дней на недели графики понемногу сглаживаются.

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

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

Мы также добавили анимацию (вдохновились Material Design) при тапе в любом месте приложения. Мы добавили временной лаг в 100 мс перед открытием карточки, потому что: 1) данные нужно загрузить, а показывать пустую карточку бесполезно 2) пользователю нужно время, чтобы понять, куда он нажал.

Реализация UI

Моя стратегия реализации приложения довольно проста: я всегда начинаю с пользовательского интерфейса. UI — самая важная часть приложения и должна быть главным фокусом для разработчиков приложений на iOS. Начав с пользовательского интерфейса без данных или API, вы сможете убедиться, что он настолько гладкий, насколько это возможно. Это также облегчает понимание того, почему производительность падает при добавлении новых функций, и помогает решить эти проблемы быстрее.

Пуш-уведомления

Это одна из моих любимых функций приложения. Мы использовали пуши для нескольких разных вещей (и добавим еще несколько):

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

Несрочные уведомления мы всегда шлем соответственно часовому поясу: никому не нравится просыпаться в середине ночи!

Сегодня команда iOS (Бен и Джек) работают над новыми функциями и улучшениями продукта, который Бенджамин и я решили перевести на новый уровень.

Я много думал, почему у нас с Бенджамином так хорошо получается выпускать новые продукты. Команда, в которой люди дополняют друга друга — вот в чем секрет. Мы начинаем работать над дизайном продукта вместе, потом он концентрируется на визуальном дизайне, а я — на коде. Это отличное сочетание — мы вдвоем можем создавать приложения. Все делается со скоростью молнии, мы тратим меньше времени на встречи и выяснение того, понимаем ли мы друг друга. Конечно, тут важно и то, что мы работаем вместе уже последние пять лет.