Скрытое vs Неактивное состояние

Когда следует использовать скрытые/неактивное состояние?

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

Неактивное состояние

Преимущества отображения кнопки в неактивном состоянии:

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

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

Недостатки отображения кнопки в неактивном состоянии:

Это увеличивает когнитивную нагрузку: оставленные неактивные кнопки заставляют пользователей лишний раз думать. Вид неактивной кнопки вызывает у них замешательство: почему она недоступна и как ее активировать? Согласно «Не заставляйте меня думать» Стива Круга, мы должны удалить элементы, которые заставляют пользователя думать.

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

Доступность: их трудно увидеть – Руководство по обеспечению доступности веб-контента не требует достаточных коэффициентов контрастности для неактивных кнопок. Они также не дают никакого фидбека пользователям.

Скрытое состояние

Преимущества скрытия кнопки:

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

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

Недостатки скрытия кнопки:

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

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

Какой способ использовать?

Прежде чем решить, какое состояние использовать, попытайтесь ответить на следующие вопросы: Что нужно знать пользователю на этом этапе? Что пользователю нужно сделать на этом этапе? Узнает ли пользователь об этой функции? Будет ли пользователь тратить много времени на ее поиски?

Ответы на вышеуказанные вопросы могут помочь нам выяснить, какое состояния использовать.

Выбирайте неактивное состояние, когда:

Кнопка временно неактивна или требует от пользователя каких-то действий для изменения ее статуса. В этом случае было бы полезно добавить пузыри-подсказки/всплывающие подсказки/кнопки раскрытия подробностей, объясняющие критерии использования и информирующие пользователей о том, какие действия они могут предпринять, чтобы активировать кнопку.

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

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

Выбирайте скрытое состояние, когда:

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

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

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

Источник

Градиенты и как их правильно использовать в UI-дизайне

Уже довольно давно градиенты плотно обосновались в UI-дизайне. Но что они такое и как они выглядят? В чем разница между линейными, радиальными и угловыми градиентами? И как правильно использовать градиенты в вашем UI?

Градиент – это постепенный переход от одного цвета к другому или нескольким цветам. В современном UI-дизайне градиенты очень популярны. Сегодня я объясню, зачем использовать градиенты, покажу, как их создавать, как выбирать для них цвета.

Содержание статьи

Что такое градиент с научной точки зрения?
Что такое градиент на человеческом языке?
Еще одна причина использовать градиенты

Типы градиентов
— Линейный градиент
— Радиальный градиент
— Угловой градиент
— Сетчатые градиенты

Выбор цветов для градиентов
— Для плавности градиентов выбирайте цвета похожих оттенков
— Избегайте сероватых цветов в центре
— Родственные цвета
— Изображение-тизер

Читать: https://design-glory.com/?p=10651

Пошаговый план. Как вернуть творческую работу в нужное русло после большой паузы

Художница и дизайнер Колин Байк рассказывает, как сделать набор слайдов «Что дальше?»

Как вернутся к проекту, который слишком долго лежал на полке? Это так сложно: вы берете его в руки, и вам хочется снова начать над ним работать. Но вы не можете заставить себя, потому что даже не знаете, с чего начать. Этому и посвящена сегодняшняя статья Колин Байк. Она учит нас, как сделать набор слайдов «Что дальше?», который поможет вам восстановить контекст для вашей творческой работы и подобрать проект, который вы так долго держали на полке.

Когда в марте прошлого года в Нью-Йорке разразилась пандемия, я отложила анимационный фильм, над которым тогда работала. Фактически, я перестала творить.

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

После президентских выборов в США в 2020 году и начала вакцинации я почувствовала, что выхожу из спячки. Были небольшие сигналы, подобные покалыванию нервов, когда конечность снова обретает чувствительность: я поймала себя на мысли, что снова думаю о своей анимационной короткометражке, которую давно отложила в сторону. Я захотела закончить ее, показать миру, начать что-то еще.
После почти года незапланированной паузы я проделала следующее упражнение, чтобы вернуться в нормальное состояние. Я создала набор слайдов, посвященных невероятно непоэтичным и приземленным вещам.

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

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

Я методично начала с вопросов и провокаций. Чтобы систематизировать свои мысли, я использовала Keynote – приложение, с помощью которого я изучала истории продуктов и создавала быстрые и грубые прототипы, работая дизайнером в Twitter много лет назад. Это универсальный инструмент с мощными возможностями перехода и обработки растровых изображений.

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

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

Читать: https://ux.pub/poshagovyy-plan-kak-vernut-tvorcheskuyu-rabotu-v-nuzhnoe-ruslo-posle-bolshoy-pauzy/

3 рекомендации по проектированию пустых состояний в сложных приложениях

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

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

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

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

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

Когда приложение состоит из различных рабочих пространств или дашбордов, но пользователь не добавил контент в эти области.

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

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

Пустые состояния, которые были созданы намеренно, а не оставлены на потом, могут быть использованы для:

Сообщения пользователю статуса системы

Помощи пользователям в обнаружении неиспользуемых функций и повышения легкости освоения приложения

Обеспечения путей для начала выполнения ключевых задач.

Читать полностью: https://ux.pub/3-rekomendatsii-po-proektirovaniyu-pustyh-sostoyaniy-v-slozhnyh-prilozheniyah/

7 вредных советов дизайнеру

1. Все-все делай в одиночку
Хорошего дизайнера отличает то, что он никого не отвлекает и может выполнить все самостоятельно. Он знает все технические аспекты проекта, бизнес-логику заказчика, все паттерны проектирования. Сам напишет все тексты, нарисует все иконки. Исследования в одиночку будут, конечно же, объективными. Не важно, насколько профессионально все будет выполнено или сколько лишних часов будет потрачено, главное, что сам!

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

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

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

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

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

4. Правки — это плохо
Если кто-то делает замечание по поводу твоих макетов – воспринимай это как личное оскорбление, ведь дизайнер тут ты! Ты всегда знаешь, как лучше. Заказчик ведь совсем не разбирается в дизайне.

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

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

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

6. Используй конференции по дизайну для обучения
Очень важно ходить на конференции, сидеть с тетрадкой и записывать все слова спикеров. Конечно, не нужно знакомиться и общаться с участниками конференции. Это будет отвлекать тебя от усвоения новой информации.

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

7. Прокачивай только хард скиллы
Как и в совете выше, не стоит распыляться на что-то, кроме изучения дизайна и инструментов. Если ты отлично проектируешь интерфейс, знаешь наизусть гайдлайны Android и iOS – все двери тебе открыты. Дизайнеру не обязательно уметь искать общий язык с разработчиками и заказчиками.

P.S. Прокачивая навыки в инструментах, типографике, не забывай учиться договариваться и понимать людей, с которыми ты работаешь. Разберись немного в психологии. Это также поможет тебе понимать пользователей и их цели, и ты будешь эффективнее защищать свои решения.

Источник

Автоматизируй это! Как дизайнеру меньше работать и больше творить

Рассказывает арт-директор digital-интегратора DD Planet Александр Обанин.

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

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

Содержание статьи:

— Что такое генеративный дизайн
— Зачем автоматизировать дизайн
— Практика: реальные примеры
- Генераторы картинок для SMM
- Генератор презентаций
- Генератор визиток
— Больше возможностей
— Выводы
— Интересное по теме

Читать: https://vc.ru/design/166061-avtomatiziruy-eto-kak-dizayneru-menshe-rabotat-i-bolshe-tvorit

10 лучших практик Figma, которые улучшат ваш рабочий процесс в 10 раз

Лучшие примеры отрасли, которые позволяют проектировать в Figma как senior-дизайнер.

Содержание статьи 
1. Используйте базовые компоненты для наборов вариантов
2. Добавьте обложку к файлу Figma
3. Используйте стили для всего
4. Организуйте наборы вариантов с помощью функции auto-layout
5. Используйте auto-layout с умом
6. Создавайте схемы юзерфлоу из своих экранов
7. Используйте ограничения
8. Создавайте шаблоны для компонентов
9. Организуйте компоненты
10. Используйте Loom

Читать: https://ux.pub/10-luchshih-praktik-figma-kotorye-uluchshat-vash-rabochiy-protsess-v-10-raz/

Аргументы против тепловых карт в ux-дизайне

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

Тепловые карты стали стандартной частью набора инструментов по оптимизации веб-сайтов. Они входят в пакеты Full Story, Hotjar, Crazy Egg и многих других инструментов оптимизации UX. Их очень легко использовать. Вы устанавливаете скрипт на свой сайт, проверяете его через несколько дней и … готово!

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

Читать: https://ux.pub/argumenty-protiv-teplovyh-kart-v-ux-dizayne/