User experience design android

Полезные советы новичкам в дизайне под Android

Этот пост послужит своеобразным началом серии публикаций на тему «как я учусь дизайну под Android». Никогда не уделял гайдлайнам достаточно внимания, считая их скучными и неинтересными, но все изменилось. Сейчас я начинаю понимать, платформа достигла своей зрелости и предлагает ряд интересных решений.

Кнопка “назад” (The Back Button)

Долгое время back была аппаратной кнопкой Android устройств, не было смысла добавлять программный аналог в пользовательский интерфейс. Сейчас модно использовать кнопку back для навигации внутри приложений. Если говорить о кнопке “назад” пользовательского интерфейса (её называют “up button”), то между хардварной back и up есть небольшая разница. Up производит переход на один экран, в рамках приложения, в то время как back к любому приложению или контенту.

Разрешение

Параметры разрешений под Android немного путают — xhdpi (2x), hdpi (1.5x) и mdpi (1x).

Звучит крайне технически. Когда год назад я начинал работать, никто толком не мог мне объяснить какое соотношение сторон межу ними. После многих расспросов и поисков, оно составило 720×1280, 540×960 и 360×640. Проектируя дизайн макет, не забывайте учитывать хардварные кнопки и статус бар.

От переводчика: На самом деле то, что описано в этом абзаце, не совсем верно. По ссылке и в таблице вы найдете более точное описание.

Начальный набор (Starter Kit)

Джереми Салли, дизайнер из Telly, графически наглядно показал соотношение этих трех разрешений. Вам пригодится Android Action Bar Style Generator для работы с темами по умолчанию. Он позволит задать базовые параметры цвета, стиля и сохранить настройки в Zip файл для всех всех трех разрешений. Лучший способ наглядно поэкспериментировать.

9-slice Scaling

В Android есть своеобразный способ масштабирования графических ресурсов, который не похож на CSS. 9-slicing позволяет вам указать, какую именно часть картинки вы хотите масштабировать. Остальная часть, такая как закругленные углы, остается фиксированного размера даже при масштабировании всего ресурса. Для этого в файле картинки необходимо нарисовать черные линии шириной в 1px в следующих областях:

• Top: область, которая может быть растянута по горизонтали.
• Left: аналогично по вертикали
• Right: Область по вертикали, в которой будет расположено содержимое. Этот параметр может использоваться для задания отступов.
• Bottom: аналогично по вертикали

The Action Bar

В отличие от iPhone, где название обычно находится в середине заголовка, на Android название в левом верхнем углу, рядом с логотипом приложения. Нажатие на логотип обычно вызывает боковое меню или возвращает вас “назад”, к предыдущему экрану.

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

Наконец, если вы серьезно относитесь к гайдлайнам, все элементы управления должны быть в правом верхнем углу. Это относится и к функции обновить (потянуть, чтоб обновить как на iPhone, очень редко используются в Android), поиск, и печально известные кнопки “действия” которые в идеале дожны быть в виде трех точек. Точки используются для тех действий, которые не смог вместить Action Bar.

Шрифты

Шрифты, к сожалению, зависят от специфики устройства, так что будьте готовы к казусам. Не расстраивайтесь если вам придется протестировать дизайн на старом устройстве. Были и куда худшие дни — вспомните IE6. Самый популярный шрифт на данный момент Droid Sans. Впрочем Roboto набирает популярность, так как присутствует на новых устройствах.

Размеры

Начиная с Android 2.x, минимальный размер элемента должен быть: 28px для текста, 96px для меню и заголовка, 116px для нижнего колонтитула. Это немногим больше чем в iOS (24px, 88px и 100px). Если говорить о соотношении 116% Android к iOS.

Просматривайте проектируемый дизайн на Android устройстве

Роман Нурик из Google разработал очень полезный инструмент Android Design Preview. Инструмент поможет дизайнеру посмотреть, как нарисованный в графическом редакторе на компьютере макет приложения будет выглядеть на реальном устройстве.

Программу Android Design Preview можно установить на Windows, Mac OS X или практически любую из операционных систем семейства *nix. Приложение написано на Java и представляет собой обычный JAR-файл. Работает Android Design Preview следующим образом: разработчик подключает смартфон к компьютеру по USB (На ПК должны быть установлены ADT), запускает Design Preview, нажимает «Select Mirror Region» в этой программе и видит перед собой рамку. Эту рамку он устанавливает на макет и видит его на экране смартфона.

Источник

Чеклист по UX из 30 пунктов для мобильных приложений

Эта статья — напминалка о том, что нужно перепроверить в дизайне вашего приложения, прежде чем отсылать его на AppStore/GooglePlay. Список поделен на тематические блоки:

1. Вход / Регистрация
2. Первый опыт
3. Ежедневные взаимодействия
4. Уведомления
5. Параметры аккаунта
6. Лента
7. Поиск
8. AppStore/GooglePlay

Статья переведена при поддержке компании EDISON Software, которая разрабатывает приложения и сайты, а также занимается пользовательскими интерфейсами.

1. Вход / Регистрация

Заставка показывается при запуске приложения. Это первое что видит пользователь, это создает первое впечатление о продукте, еще до начала работы.

Rider Launch Transition by Uber

2. Забыли пароль

Средний человек зарегистрирован в 90 онлайн-сервисах, которые требуют пароль. Поэтому часто пароли «забыватся». Согласно статистике 21% пользователей забываю пароль в течение 2 недель, а 25% забывают один пароль минимум раз в день. Если ваше приложение требует пароль, то позаботьтесь о форме восстановления пароля.

2. Первый опыт

3. Экран с приветствием/инструкция при первом запуске (Onboarding )

Onboarding — это термин UX-дизайна, означающий как понять пользователю что делать с вашим приложением, как в нем ориентироваться, куда нажимать. Хороший онбординг повышает вероятность того, что «вновь пришедшие» станут «постоянные».

Animated onboarding experience by Cuberto

4. Экран с оповещением об успешном подтверждение данных

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

Для этого экрана жизненно важно обеспечить:

• возможность послать еще раз код подтверждения (для телефонов)
• инструкция, как найти сообщение о подтверждении (поискать по заголовку, поискать в спаме и пр) (для почты)

5. Заглушки для «No content yet»

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

Вместо того, чтоб оставлять пустоту, вставьте обучалку или инструкцию что делать дальше.

6. Дефолтная аватарка пользователя

95% по данным Jared M. Spool ) не меняют настройки по умолчанию. Это значит что у пользователей будет та аватарка, которую выбрали для них вы.

Cute default user avatar in Dropbox

3. Ежедневные взаимодействия

7. Экран запросов на разрешение

Когда пользователь открывает новое приложение, меньше всего они хотят увидеть множество всплывающих окон спрашивающих:

• разрешить приложению доступ к вашему местоположению
• разрешить приложению доступ к вашим контактам
• разрешить приложению доступ к вашей камере

Такие запросы негативно влияют на пользовательский опыт, и приводят к тому, что приложение могут в гневе удалить. Such permission requests have a very negative impact on user experience and usually leads to the app abandonment. Поэтому лучше спрашивать разрешения в момент взаимодействия с пользователем.

Notification Permission Dialog by Anton Tkachuk

8. Различные состояния для интерактивных элементов

Кнопки и прочие интерактивные элементы имеют несколько состояний. Очень важно продумать состояния «по умолчанию»/«нажата»/«не доступно» для каждого интерактивного элемента в вашем приложении.

Три состояния кнопки

Material design button by Vadim Gromov

Будет лучше, если ваши иконки будут единого стиля.

Tab bar icons in the Twitter app for iOS

10. Сообщения об ошибке

Лучшее сообщение об ошибке — это то которое не появляется вовсе. Лучше способ не допустить ошибку — это правильно проинструктировать пользователя заранее. Но если всё же ошибка возникла, то грамотное сообщение об ошибке не только учит пользователя как не допускать её в будущем, но и дает понять пользователю что о нем заботятся, а не игнорируют.

Error Interaction by Dwinawan

Вот несколько кейсов, для которых нужно продумать сообщения об ошибках:

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

Тут статья с практическими рекомендациями как делать хорошие сообщения об ошибках.

11. Процесс загрузки

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

Анимированный индикатор «прогресса» является наиболее распространенной формой предоставления системного статуса пользователям, когда что-то происходит или загружается.

Smile loader for AI product design by Gleb Kuznetsov

12. Сообщение о том, что вы всё сделали правильно

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

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

Confirmation screen in Booking.com

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

14. Отменить операцию

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

Undo for Delete item. Image: Sashoto Seeam

Undo for sending email. Image: Tyler Beauchamp

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

Upvote button in different languages. Image: Chier Hu

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

Help and Feedback by Alex Muench

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

4. Уведомления

18. Уведомления в приложении / Push-уведомления

Знаете ли вы, что паршивые уведомления являются основной причиной, по которой пользователи удаляют приложение?

Раздражающие уведомления — причина, по которой люди удаляют мобильные приложения (по мнению 71% респондентов).

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

19. Настройки уведомлений

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

Настройка параметров уведомлений в Slack

5. Параметры аккаунта

20. Инструмент для обрезки фото профиля

Позвольте пользователям не только загружать аватар, но и изменять его в соответствии с их потребностями прямо в вашем приложении.

Редактирование аватара от Scott Thomas

21. Экраны для просмотра/изменения личных данных

Разрешите пользователям редактировать свои личные данные прямо в мобильном приложении. Создавайте экраны для предварительного просмотра информации о доставке/выставлении счетов и внесения этой информации в редактируемый список.

Домашний адрес и адрес офиса доступны для редактирования. Выберите адрес доставки от Dhiraj S. Karki

Если ваше приложение требует логиниться, то и возможность разлогиниться тоже должна быть.

Logout in Facebook for iOS

23. Условия использования

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

24. Настройки конфиденциальности

Позвольте пользователям видеть, какие данные они отсылают вам и дайте им возможность выбирать.

Image: Vitaly Friedman

25. Отправить отзыв

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

Skype для iOS дает пользователям возможность «Оставить отзыв», «Сообщить о проблеме» или «Предложить функцию».

6. Лента

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

Обратите внимание, что область заголовка сворачивается при прокрутке. Craiglist Mobile animation by Aurélien Salomon

Поиск внутри приложения

27. Поведение «по умолчанию»

Ван необходимо решить, какой будет порядок результатов поиска «по умолчанию». Например, если вы разрабатываете страницу результатов поиска для приложения электронной коммерции, вам необходимо решить, следует ли сортировать выходные данные по наилучшему соответствию/цене/времени доставки.

28. Поделиться/Добавить в закладки

Позвольте пользователям делиться и добавлять в закладки то, что они нашли.

Like, Bookmark and Share options in the App AE by Martin Berbesson

29. Пустая формочка для «Нет результатов»

Что увидят пользователи, если они что-то искали, а результатов поиска нет? Экран «Нет результатов» не должен означать конец. Подскажите пользователю, какой нужно сделать следующий шаг.

Приложение Google Flights предлагает пользователям очистить все фильтры, чтобы найти рейс

8. AppStore/GooglePlay

30. Иконка для приложения

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

Источник