Доступность: искусство дизайна для всех

7 рекомендаций по созданию более инклюзивного интерфейса.

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

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

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

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

Дизайн-система: синдром LEGO-наборов

Обеспечение баланса между согласованностью и вкладом в развитие дизайн-систем должно быть первоочередной задачей дизайнера.

Что произойдет, если 5 дизайнеров будут одновременно создавать текстовое поле?

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

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

Библиотека паттернов может породить синдром наборов LEGO

Без сомнения, собранные наборы конструктора LEGO выглядят великолепно.
Однако, как отмечает доктор философии Дерек Кабрера, взрослые, производящие наборы LEGO, мыслят творчески. Но в итоге дети учатся следовать инструкциям.

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

Такой подход заставляет дизайнеров смотреть на дизайн-систему, как на наборы LEGO.
В результате, когда дизайнеры работают над конкретной проблемой взаимодействия, они думают: «Хорошо, какие из доступных компонентов или паттернов я могу использовать?» И при этом они не оценивают поможет ли компонент эффективно решить проблему.

Я видел это снова и снова. Но результат исследования дизайн-системы, проведенный Seesparkbox, может стать сигналом. 54% респондентов опроса сообщили, что пользователи их дизайн-системы редко вносят вклад в ее развитие или вообще не участвуют в ее развитии.

Я подозреваю, что синдром наборов LEGO – один из факторов, которые не дают нам возможности внести свой вклад.

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

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

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

Мысленное упражнение
— Как часто пользователи системы предоставляют информацию о вашей библиотеке паттернов?
— Как часто пользователи системы предлагают новый компонент или паттерн?
— Если вклад относительно невелик, что им мешает внести свой вклад в развитие системы? Вы думали о создании опыта участия?
— Как бы вы отреагировали на пользователей системы, которые создали новый компонент, не передавая его обратно в дизайн-систему?
—Что пользователи дизайн-системы думают о ней?

Источник

Скрытое 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