Руководство по дизайну интерфейса смарт-часов
Перевод статьи Авинаша Буссы (Avinash Bussa) Your guide to smartwatch interface design: designing for all.
По результатам опроса, проведенного исследовательским центром Pew Research Center 3–17 июня 2019 года, примерно каждый пятый взрослый в США (21%) говорит, что регулярно носит смарт-часы или фитнес-браслет.
Если мы сравним жизнь до и после объявления пандемии, то увидим, что сейчас люди больше сфокусированы на своем личном здоровье, физической форме и гигиене. Носимые устройства (wearables) помогают людям поддерживать форму. В последние годы появилось множество таких устройств, например фитнес-резинки, смарт-часы, устройства виртуальной реальности, умная одежда, беспроводные наушники и другие аксессуары. Сегодня мы поговорим о смарт-часах.
Эта статья основана исключительно на моем личном опыте и учитывает принципы интерфейсов Android Wear OS, Apple Watch OS и One UI от Samsung.
Содержание
Зачем нужны смарт-часы?
Основные рекомендации
1. Читабельный интерфейс для небольшого экрана
2. Жесты
3. Возврат назад
4. Ограниченное количество действий на экране
5. Избегайте сложных функций и запутанных сценариев
6. Защита от случайных действий
7. Внешние и внутренние отступы
8. Кнопки и действия
9. Типографика
10. Цвета
11. Микровзаимодействия
12. Сенсорные технологии (вибрационная обратная связь)
13. Уведомления
14. Ввод данных
15. Циферблаты
16. Технические характеристики экрана
17. Проверяйте свой дизайн
Зачем нужны смарт-часы?
- Прежде всего: сколько сейчас времени?
- Входящий звонок: хотите узнать, кто звонит?
- Пришло SMS-сообщение: стоит ли на него реагировать?
- Сколько калорий я сегодня сжег?
- «Привет, Siri. Сколько стоит 1 доллар в Индии?»
- Так удобнее, потому что смартфон отвлекает.
И это далеко не всё, что возможно благодаря смарт-часам. Некоторые часы могут даже определять ваш пульс, уровень насыщения крови кислородом (SPO2), кровяное давление и т. д.
Вот руководство по проектированию интерфейса смарт-часов.
Основные рекомендации
Для создания шедевра недостаточно просто идеи — сначала нужно провести серьезную подготовительную работу. Я составил список основных моментов, на которых вы должны сосредоточиться, когда будете готовить свой следующий шедевр. Все пункты списка объединяет то, что они основаны на трех простых принципах: дизайн, доступность, простота в использовании. Давайте посмотрим, как эти принципы помогают спроектировать интерфейс смарт-часов.
1. Читабельный интерфейс для небольшого экрана
Размер экрана у Apple Watch всего 40 мм — это на 40,2% меньше, чем у iPhone 8. Спроектировать читабельный интерфейс для экрана с таким маленьким разрешением — непростая задача для дизайнера. Тем не менее компании по всему миру создают такие интерфейсы, чтобы облегчить людям жизнь (и чтобы заработать деньги, но это тема для отдельной статьи).
2. Жесты
Простой доступ ко всем нужным функциям — единственное, чего ожидает любой пользователь от устройства с таким маленьким экраном. Но как этого добиться?
Когда мы проектируем интерфейсы для смартфонов, мы не думаем о навигации на основе жестов, но это решение может подойти для небольших экранов, как у смарт-часов. Например, вместо кнопки или визуального элемента «Назад» можно с таким же успехом использовать жест от Apple «Смахните вправо, чтобы вернуться» — это позволит сэкономить место на экране.
3. Возврат назад
Как мы уже сказали, жест «Смахните вправо, чтобы вернуться» упрощает работу с интерфейсом и облегчает жизнь пользователям. Команда Android вдохновилась этим решением от Apple и стала использовать его вместо клавиш навигации в нижней части экрана в своей операционной системе. Не совсем понимаете, о чём идет речь? Посмотрите на изображение ниже.
Подобные жесты в интерфейсе смарт-часов помогают с легкостью переключаться между экранами или приложениями. Если на часах есть физические кнопки, пользователь реже на них нажимает.
4. Ограниченное количество действий на экране
После изучения результатов предварительного исследования вам может показаться, что в интерфейсе нужно реализовать множество действий и все они важные. Но для каждого экрана вы должны выделить одно или максимум два основных действия. Это поможет пользователю без суеты и лишних раздумий определиться, что нужно сделать на пути к цели.
У такого небольшого устройства, как смарт-часы, трудно разместить всё на одном экране. Если вы попытаетесь это сделать, пользователь не сможет сосредоточиться на самом важном — в результате он придет в замешательство, будет раздражен и разочарован.
Пользователь никогда не жалуется, если на экране нет того, что он ожидал увидеть. Но он точно сожалеет, если какая-то возможность на экране есть, но она недоступна.
5. Избегайте сложных функций или запутанных сценариев
В структуре интерфейса лучше не создавать иерархии глубже двух или трех уровней. Простая структура продукта позволяет людям быстрее достигать целей в интерфейсе. Если вы добавите больше 2 — 3 уровней информации, это затруднит навигацию: пользователь может не понять, где он находится в данный момент и какое следующее действие на пути к цели нужно сделать.
6. Защита от случайных действий
Поскольку человек носит смарт-часы на руке, он может случайно нажать на экран и сделать то, что делать не собирался. Добавьте в интерфейс защиту от случайных действий на экране. Например, можно просить пользователя подтверждать критически важные действия жестом «Нажать и удерживать». Также вы можете добавить на экран элемент «Отменить» для отмены последнего действия.
7. Внешние и внутренние отступы
Согласно теории близости — одному из принципов группировки в гештальтпсихологии — объекты, расположенные рядом, воспринимаются как связанные.
Группировка помогает пользователям быстрее и эффективнее понять информацию и сориентироваться в ней. В пользовательском интерфейсе этого можно достичь с помощью внешних отступов и внутренних отступов между элементами интерфейса.
Свободное пространство вокруг элементов интерфейса имеет решающее значение для создания эргономичного дизайна, который работает так, как вы задумали.
8. Кнопки и действия
При проектировании кнопок старайтесь обозначать их интерактивность не только с помощью цвета. В WatchOS используют форму закругленного прямоугольника как основной способ показать интерактивность кнопок и списков. Это гарантирует, что пользователи с дальтонизмом будут воспринимать информацию так же, как любые другие пользователи. Стоит учесть, что чем ярче элементы на экране, тем меньше время автономной работы устройства.
9. Типографика
В интерфейсах для смартфонов, веб-сервисов или других платформ вы можете экспериментировать с разными шрифтами. Выбор шрифтов для интерфейса смарт-часов важно тщательно продумать. Если использовать неподходящий шрифт, это может серьезно сказаться на качестве дизайна. Например, в шрифте Montserrat буквы широкие: чем больше пространства занимает текст, тем больше риск, что вся необходимая информация не поместится на одном экране.
Лучше не смотреть в сторону причудливых шрифтов и шрифтов с засечками, потому что набранный ими текст неудобно читать на небольших экранах. Попробуйте шрифты без засечек, например Roboto, SF Text, Helvetica: у вас будет больше свободы при выборе трекинга и размера букв. Эти гарнитуры включают множество стилей, которые подойдут для любых задач.
А вот при работе над интерфейсом циферблата вы можете проявить творческий подход и поэкспериментировать со шрифтами.
10. Цвета
Одна из основных задач интерфейса смарт-часов — дать возможность пользователю быстро просканировать контент на экране. Чтобы при любом освещении информация отображалась хорошо, а текст было удобно читать, рекомендуется использовать яркие цвета, которые легко различимы.
Четко определите цветовую палитру — это не только сделает ваш бренд более узнаваемым, но и позволит создать визуальное единство между разными экранами. Вот три ключевых принципа использования цветов.
- Учитывайте контекст. Убедитесь, что выбранные цвета посылают подходящее сообщение. Например, в приложении для медитации не очень уместно делать фон ярко-красным.
- Учитывайте контраст. Apple рекомендует использовать светлые цвета для текста, потому что так проще добиться нужного контраста и сделать текст удобным для чтения.
- Учитывайте особенности зрения дальтоников. Многим дальтоникам трудно отличить красный цвет от зеленого. Не стоит использовать сочетание этих цветов в качестве единственного способа донести сообщение.
Google использует монохроматические цветовые палитры, чтобы людям было проще различать элементы на экране. По мнению Google, «темные фоны больше подходят для интерфейсов, которые используются в социальной среде, потому что делают экраны менее раздражающими». Также использование темных цветов в интерфейсе продлевает время автономной работы устройств с OLED-дисплеями.
11. Микровзаимодействия
Микровзаимодействия создают более естественный пользовательский опыт, потому что добавляют интерактивному дизайну новый уровень глубины. В интерфейсах используют такие микровзаимодействия, как анимация пиктограмм, анимация переходов между страницами и экранами, анимация кнопок и других интерактивных элементов.
Среди всех элементов интерфейса только микровзаимодействия способны вызывать естественные эмоции через дизайн. В качестве примеров можно привести анимированные пиктограммы «Файлы перенесены в корзину», «Файлы успешно загружены» и т. д. Чем более плавным будет взаимодействие, тем проще обеспечить беспрепятственный опыт использования интерфейса.
Исследователи установили, что оптимальная скорость для анимации интерфейса — от 200 до 500 миллисекунд. Анимация короче 100 миллисекунд слишком быстрая, пользователь не сможет ее распознать.
Если вы думаете, что наличие множества микровзаимодействий может улучшить пользовательский опыт, то вы ошибаетесь. Анимации, или микровзаимодействия, должны быть настолько изящными и ненавязчивыми, чтобы сделать пользовательский опыт бесшовным. Если вам интересен анимационный дизайн, почитайте полезную статью от Adobe.
12. Сенсорные технологии (вибрационная обратная связь)
Микровзаимодействия на экране помогают создать ощущение, что интерфейс бесшовный. Но что, если пользователь дальтоник или если ему нужны специальные возможности для людей с особенными потребностями здоровья? В таких случаях применяются сенсорные технологии, которые обеспечивают индивидуальное тактильное взаимодействие с устройством.
Компания Apple уже создала продуманный набор технологий тактильной обратной связи. Если вы хотите узнать больше о сенсорных технологиях, почитайте мою статью.
Убедитесь, что тактильное поведение не противоречит поведению системы, поскольку пользователь вряд ли хочет услышать неодобрительное «Буу👎» в уведомлении об успехе.
13. Уведомления
У пользователя должна быть возможность управлять уведомлениями из разных приложений. Никто не хочет, чтобы часы жужжали при каждом уведомлении.
Если мы посмотрим на изображение выше, то увидим, что, по мнению Apple, из уведомления нам важнее всего узнать:
- из какого приложения пришло уведомление;
- от кого.
Возможно, из уведомления на смартфоне мы хотели бы узнать больше:
- из какого приложения пришло уведомление;
- от кого;
- когда оно было отправлено;
- что в сообщении;
- что нужно сделать дальше и т. д.
Думаю, что компания Apple всё сделала правильно. Пользователь никогда не откажется получить больше полезной информации, но, если вы напишете только самое важное, он тоже не будет против.
Всегда делайте интерфейс уведомлений настолько простым, насколько это возможно. Важно сфокусировать внимание на контенте, а не на визуальном оформлении уведомлений.
14. Ввод данных
Экран смарт-часов настолько маленький, что сложно набирать текст с помощью встроенной клавиатуры (если она есть). Чтобы пользовательский опыт оставался позитивным, лучше свести к минимуму использование встроенной клавиатуры, а ввод данных реализовать с помощью раскрывающихся списков и множественного выбора.
15. Циферблаты
При проектировании циферблата можно дать волю своей фантазии, но важно ограничить объем данных для отображения на экране. Сосредоточьтесь на том, что пользователь хочет увидеть прежде всего.
Например, вот какая информация отображается на циферблатах смарт-часов от Apple и Google:
- сначала самое очевидное — время и дата;
- количество пропущенных уведомлений;
- элементы управления плеером, если играет музыка;
- частота пульса;
- погода;
- количество сожженных калорий, пройденное расстояние, количество шагов и другие фитнес-показатели;
- возможность подключения к устройствам;
- состояние батареи.
Простое неформальное исследование среди друзей или коллег позволит вам узнать больше о том, чего ожидают пользователи от смарт-часов. Если это не поможет, вы всегда можете вдохновиться опытом Google или Apple, которые уже провели множество исследований.
16. Технические характеристики экрана
Не каждый экран способен точно передать ваш дизайн и цвета. На некоторых устройствах цвета отображаются неправильно, на других — не поддерживается оптимальная частота обновлений экрана. На экране с низкой частотой обновления не будут отображаться те классные анимации, которые вы разработали для своего проекта.
Перед проектированием интерфейса всегда проверяйте возможности устройств — это поможет вам создать дизайн с учетом их технических ограничений.
Проверяйте свой дизайн
Еда на вашей тарелке может выглядеть очень вкусной, но можете ли вы гарантировать, что на вкус она так же хороша?
То же самое и с дизайном. Интерфейс может выглядеть потрясающе в графическом редакторе, но будет не очень удачно отображаться на экране реальных смарт-часов. Всегда проверяйте с помощью инструментов предпросмотра, как выглядит прототип на смарт-часах, или хотя бы просто проверяйте изображения экранов перед тем, как отправить макеты разработчикам.
Рекомендация на основе моего личного опыта
В графическом редакторе при проектировании мы обычно выставляем уровень масштабирования 200% или 300%, это дает нам ложное ощущение, что дизайн выглядит отлично и разборчиво. Поэтому для предварительного просмотра не забывайте устанавливать уровень масштабирования до 100%.
Я знаю, что статья получилась довольно длинной, но здесь я собрал всю важную информацию, чтобы при необходимости вам было легко ее найти. На Medium довольно много статей о дизайне интерфейсов для мобильных приложений, но совсем мало материалов о дизайне интерфейсов для смарт-часов. Эта статья — мой вклад в базу знаний сообщества дизайнеров, и я надеюсь, что она поможет вам проектировать интерфейсы для смарт-часов следующего поколения.
Над переводом работали: Diana Burmistrova, Федор Борецкий и Наталья Шмелева.
Если вам нужно спроектировать интерфейс цифрового продукта, в том числе сайта, приложения, банкомата, умных часов или любого другого — опишите вашу задачу, и мы предложим решение.
