Connect with us

Дизайн и прототипирование

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

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

Анна Уханаева

Опубликовано

/

     
     
[pullquote align=right]

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

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

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

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

Видение

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

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

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

Вайрфреймы

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

1

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

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

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

2

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

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

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

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

3

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

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

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

4

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

5

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

6

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

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

7

Реализация UI

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

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

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

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

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

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

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

 

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
 
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.