Состояния в UI дизайне: как элементы оживают
Когда элементы оживают и отвечают на наши действия, интерфейс становится понятным и логичным. Понимание этих состояний — основа создания интуитивных, живых интерфейсов, которые работают на нас.
Давайте немного пофантазируем: вот вы пришли в кафе, чтобы выпить свой любимый латте с десертом. Открываете онлайн-меню и ищете заветную кнопку «Заказать». Нажимаете на неё и… ничего. Кнопка не меняет цвет, не мигает — просто не реагирует. Вы растеряны, ведь не понятно, ваш заказ приняли или нет. Начинаете сомневаться — может, стоит попробовать ещё раз? Повторяете попытку, но снова ничего не происходит. Полный ступор гарантирован, ведь так?
Ключ к идеальному взаимодействию
Представим себе ситуацию с приложением Uber, если бы оно имело проблемы с дизайном и работой. Вы открываете приложение и выбираете нужный маршрут. Нажимаете на кнопку «Заказать машину», и… тишина. Никакой реакции, никаких индикаторов загрузки или изменений на кнопке. Вы смотрите на экран, пытаясь понять, что произошло. В голове уже мелькают мысли: «Может, я что-то не так сделал?» Вы нажимаете на кнопку снова и снова, но все остается прежним. А потом в панике думаете: «А не заказал ли я 25 машин пока нажимал эту кнопку?»
Теперь представьте, что вы открываете Uber, выбираете маршрут и нажимаете кнопку «Заказать машину». Кнопка меняет цвет, и появляется индикатор загрузки, который сообщает, что ваша машина уже в пути. Всё работает понятно и быстро, ведь этот дизайнер знает эвристику №1.
Кнопка в приложении Uber меняет цвет при клике
И вот вы спросите: «К чему все эти прелюдии?» А к тому, что очень важно проработать все состояния элементов интерфейса заранее. Когда пользователи видят визуальные подтверждения своих действий, они чувствуют себя уверенно. Конечно, это не может их спасти от всех ошибок, которые они могут допустить. Но мы же помним, что нам говорил usability батя в пятой эвристике: «Лучше предупредить беду, чем потом разгребать её последствия».
Маленькие сигналы больших действий
Элементы интерфейса — кнопки, поля ввода, ссылки — имеют свои состояния, которые помогают пользователям понимать, что происходит в данный момент. Можно сказать, что они как сигналы направляют нас и показывают, правильно ли мы что-то сделали на сайте или в приложении. Давайте рассмотрим, какие состояния существуют и как их правильно использовать!
Обычное состояние
Обычное состояние (или Default State) — это базовое состояние элемента, в котором он отображается, когда еще ничего не происходит. Можно сказать, что элемент ждет взаимодействия и выглядит спокойно, как кот, дремлющий на диване, готовый к действию, пока вы не начнете его тискать.
Пока вы не нажмете на кнопки в LinkedIn, они будут в спокойном синем цвете
Примеры этого состояния можно найти повсюду. Например, давайте заглянем в LinkedIn. Когда вы заходите на чей-то профиль, кнопка «Установить контакт» изначально отображается в спокойном синем цвете. Она, конечно, готова к действию, но только когда вы решите отправить запрос на добавление в контакты.
Состояние наведения
Hover State возникает, когда вы наводите курсор на элемент, но еще не нажали на него. Оно показывает, что элемент интерактивный и готов к вашим действиям. Обычно при наведении может меняться цвет, форма, размер или добавляться тень (о правилах создания которой мы рассказывали в нашем Instagram).
В Dropbox можно увидеть понятный пример состояния наведения
Состояние наведения можно использовать для всех интерактивных элементов. Но важно помнить, что в мобилке никаких состояний ховера НЕТ. «Почему?» спросите вы. Логично, в мобильных интерфейсах нет мышки, а значит, и нет возможности «навести курсор». Вместо этого мы ориентируемся на визуальные изменения при нажатии пальцем, и это позволяет сразу видеть, что элемент активен.
Например, в Dropbox, если навести курсор на любой файл, вокруг него появится выделение, а рядом с именем появятся дополнительные кнопки для управления. Или попробуйте навести курсор на кнопки нашего сайта, и вы увидите, что они тоже имеют этот эффект.
Нажатие/клик
Когда пользователь нажимает на кнопку, она должна показать, что действие действительно произошло. Помните пример с кофе и заказом? Мы нажимали на кнопку, но не получили никакого ответа. Что мы чувствовали? Растерянность, потому что не понимали, все ли сделали верно.
Состояние нажатия или Active State демонстрирует, что ваш клик зафиксирован. Обычно это выражается в изменении цвета, размера или формы кнопки. Таким образом, пользователь видит, согласно первой из десяти эвристик Нильсена, состояние системы и понимает, где он находится.
В Instagram, благодаря анимациям, нам понятно, что мы кликнули на этот элемент
В Instagram, когда вы ставите лайк на пост, иконка сердечка анимировано «взрывается» и меняет цвет на красный, тем самым иллюстрирует действие: «Да, мне понравился этот пост, остыпаю любви!»
Сфокусированное состояние
Фокусное состояние или Focus State — это момент, когда элемент становится активным после того, как его выбрали с помощью клавиатуры или голосового помощника, а не мышкой. Это состояние играет важную роль в разработке инклюзивного дизайна, помогая людям с ограниченными возможностями комфортно взаимодействовать с интерфейсом.
Awwwards предусмотрели сфокусированное состояние в интерфейсе
Это состояние обычно выделяется цветом или рамкой. Например, в Gmail, когда вы переключаетесь между письмами с помощью стрелок на клавиатуре, выбранное письмо обрамляется цветной рамкой, показывая, что именно оно сейчас в фокусе и готово к действиям.
Состояние загрузки
Когда вы нажимаете на кнопку, и требуется время для выполнения действия, на сцену выходит состояние загрузки или Loading State. Это состояние сообщает пользователю, что процесс продолжается, и просто нужно немного подождать. В противном случае можно подумать, что приложение зависло, и нажать кнопку еще раз сто раз. Зачем лишний раз беспокоиться, если система может подсказать, что нужно немного времени?
Состояния загрузки можно увидеть в приложении Uber
Обычно это состояние сопровождается анимацией или индикатором загрузки. Например, в Uber, когда вы заказываете машину, кнопка «Заказать» преобразуется в анимацию загрузки. Она не просто стоит там без дела, а активно демонстрирует, что система ищет водителя. А теперь чтобы создать похожую анимацию загрузки в Figma, не нужно перелопачивать весь интернет в поисках видео, потому что наш пижамный дизайнер Никита уже поделился туториалом на YouTube.
Неактивное состояние
Неактивное состояние или Disabled State — это состояние элемента, который временно недоступен для взаимодействия. Жмите не жмите на него, он работать не будет. Чтобы избежать многократных кликов, элемент выглядит приглушенным или серым, сразу давая понять: «Не трогай, я сейчас не работаю». И хотя это состояние и полезно, злоупотреблять им не стоит. Не очень приятно видеть море элементов, которыми невозможно воспользоваться.
Неактивное состояние вы могли видеть в приложении Spotify
Пример Disabled State можно увидеть в приложении Spotify. Если у вас нет подключения к интернету, кнопка «Скачать» для сохранения песни станет неактивной. Она изменит цвет на серый и перестанет реагировать на нажатия, ясно показывая, что без сети скачивание музыки временно невозможно.
Выбранное состояние
А вот что помогает нам понять, что мы сделали свой выбор? Правильно, это Selected State, или состояние выбора. Это как будто вы ткнули пальцем и сказали: «Вот это мне нужно!». Оно позволяет четко увидеть, какой вариант был выбран среди других, и предотвращает путаницу, особенно когда доступно несколько опций.
На сайте Airbnb выбранные категории выделяются среди других
Selected State активно используется в радиокнопках, чекбоксах, вкладках навигации и фильтрах. Например, на сайте Airbnb, когда вы выбираете фильтры, такие как тип жилья или диапазон цен, выбранные опции выделяются с помощью цветного фона или галочки. Это позволяет сразу понять, что фильтр активен. То же самое можно увидеть и на сайте Пижамной Академии, когда вы фильтруете сайты в раздела Вдохновение. Попробуйте отфильтровать свой запрос и убедитесь в этом сами!
Состояние перемещения
Состояние перемещения, или Drag State, говорит о том, что элемент готов к перемещению или уже перетаскивается. Это как если бы вы взяли что-то с полки и переносите это в другое место — интерфейс должен четко дать понять, что происходит, чтобы избежать ощущения хаоса. Drag State активно используется в ситуациях, где можно перетаскивать объекты, например, в списках задач, канбан-досках или графических редакторах. И, кстати, Drag State присутствует и в нашей Figma!
Когда вы перетаскиваете файлы в Google Drive они плывут за курсором
Элементы, которые вы перемещаете, обычно изменяют внешний вид: могут стать полупрозрачными, слегка приподняться над остальными или обзавестись тенью, чтобы было понятно, что их можно переместить куда-то еще. Например, в Google Drive, когда вы перетаскиваете файл из одной папки в другую, он выделяется рамкой и «плывет» вместе с курсором, пока вы не отпустите его в нужном месте.
Успех
Состояние успеха или Success State — это момент, когда интерфейс сигнализирует вам о том, что ваше действие прошло успешно. Это как виртуальная «пятерка» от приложения, подтверждающая, что всё окей. Обычно это состояние сопровождается зелеными цветами, галочками или специальными уведомлениями, чтобы пользователь чувствовал себя уверенно и знал, что его действие было выполнено.
Состояние успеха в приложении Uber убеждает, что всё прошло успешно
Например, в Uber, когда поездка завершается, на экране появляется подтверждение об успешном завершении вместе с возможностью оставить оценку водителю. Или, когда вы исправляете некорректно введенные данные при регистрации, и галочка в форме говорит вам: «А вот теперь всё правильно». Важная задача Success State — снять с пользователя беспокойство и убедить его, что все задачи выполнены корректно.
Ошибка
Мы уже говорили немного об ошибках в третьей и пятой эвристиках Нильсена, но состояние ошибки обозначает, что что-то в интерфейсе пошло не так. Это как громкий звоночек, который говорит: «Эй, здесь проблема! Обратите внимание!»
Визуально это состояние часто оформляется красным цветом с иконками, такими как восклицательные знаки или крестики, чтобы сразу привлечь ваше внимание. Его задача — четко и понятно сообщить, что действие не было выполнено, и указать на конкретную причину ошибки.
Если вы забыли заполнить важное поле, Google Forms вам это напомнит
Хорошим примером является Google Forms. Если вы забыли заполнить обязательное поле и нажали кнопку «Отправить», появляется сообщение об ошибке с красным текстом, указывающее на поле, которое необходимо заполнить. Пользователь мгновенно понимает, что нужно сделать, чтобы исправить ситуацию.
Пустое состояние
Это состояние отображается, когда элемент или раздел интерфейса не содержит никаких данных или контента. Оно готово к вашим действиям и часто сопровождается поясняющим сообщением, которое помогает пользователю понять, что нужно сделать дальше. Например, «введите ваш пароль» или «ваше имя». Это очень важно, ведь без дополнительных подсказок мы не сможем понять, что именно писать в пустом поле.
В Telegram супер понятно показаны пустые состояния
Работая над проектами важно учитывать и проверять все состояния элементов. «Но как проверить всё и не забыть? Ведь их так много!» — этот вопрос не покидает голову. Пффф… На самом деле это не так сложно как кажется, если вы изучили все секреты эффективной работы в Пижамной Академии. Глубокое погружение во все аспекты, обновленная программа обучения, 300+ часов практики над пятью проектами на нашем обучении Профессия UI UX дизайнера — и ты не узнаешь себя прежнего. А международный сертификат (точнее целых три сертификата) будут тому подтверждением, как и детально проработанное портфолио. И по секрету, лучших студентов мы готовы пригласить к нам, в Пижамную Академию!
Почему они очень важны?
Да потому что состояния элементов в UI-дизайне — это не просто «на всякий случай», а настоящие помощники в взаимодействии с пользователями. Они помогают передавать информацию, направляют действия и, в конечном итоге, делают интерфейсы более живыми и интересными.
А теперь, когда вы вооружены знаниями о состояниях элементов, let’s go, создавать крутые и понятные интерфейсы!
