Рекомендации по проектированию интерфейса смарт-часов

Зачем вообще нужны смарт-часы?

Чтобы получить ответы на следующие вопросы:

• Во-первых, сколько сейчас времени?
• Входящий звонок, хотите знать кто звонит?
• Пришло сообщение; его стоит открывать?
• Сколько калорий я сегодня сжег?
• «Привет, Сири. Сколько стоит 1 доллар в Индии? “

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

Давайте теперь перейдем к рекомендациям по проектированию интерфейса смарт-часов.

Рекомендации

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

1. Полезное пространство экрана и макет

Размер экрана Apple Watch 40 мм, что на 40,2% меньше, чем дисплей iPhone8. Проектирование для такого небольшого разрешения и обеспечение четкости изображения критически важная задача для любого дизайнера. Тем не менее, компании по всему миру используют эту возможность, чтобы облегчить людям жизнь (и заработать на этом деньги, но это отдельная тема).

2. Жесты

Единственное, чего все ожидают от такого маленького экрана – это «легкий доступ», но как нам этого добиться?

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

Apple

3. Действие «Назад»

Как было сказано выше, «Смахните, чтобы вернуться» – это решение, облегчающее жизнь пользователя. Вдохновившись жестом Apple для возврата назад, Android реализовал этот жест как замену программным клавишам в нижней части интерфейса своей ОС. Не понимаете, о чем я говорю? Посмотрите на изображение ниже.

Наличие похожих жестов на смарт-часах может помочь легко переключаться между страницами или приложениями. Это также сократит количество физических нажатий кнопок (если они есть).

4. Ограниченные действия на экране

Необходимо выделить одно или два основных действия. Это поможет пользователю без суеты выбрать нужную вещь в нужный момент.

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

«Пользователь не будет жаловаться, если отображаемая на экране информация не соответствует его ожиданиям, но ему определенно будет жаль, если какая-то информация есть, но она недоступна».

5. Избегайте сложных функций или юзерфлоу

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

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. Характеристики экрана

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

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

Протестируйте свой дизайн

Еда на вашей тарелке может выглядеть восхитительно, но можете ли вы гарантировать ее вкус?

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

Исходя из личного опыта рекомендую вам следующее. В инструменте дизайна всегда старайтесь поддерживать уровень масштабирования 100%. Это связано с тем, что при проектировании мы сохраняем масштаб окна на уровне 200% или 300%, из-за чего нам кажется, что все, что мы проектируем, разборчиво и прекрасно выглядит, но это не так.

Перевод статьи uxdesign.cc