Советы по проектированию идеальной панели навигации

Людям нравится использовать панель навигации, поскольку это намного проще, чем меню навигации. По этой причине для простоты использования многие известные приложения начинают отдавать приоритет панели навигации...
Но, если вы будете использовать ее неправильно, это перевернет весь интерфейс с ног на голову.
Поэтому в этой статье я дам вам несколько советов по UI / UX для проектирования более функциональной панели навигации вашего интерфейса.

Читать статью: https://ux.pub/editorial/soviety-po-proiektirovaniiu-idiealnoi-panieli-navighatsii-1od0

Современный UX-дизайн убивает творчество

Чтобы улучшить пользовательский опыт, нужно идти на риск.

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

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

Читать статью: https://ux.pub/editorial/sovriemiennyi-ux-dizain-ubivaiet-tvorchiestvo-4g1o

Что такое интуитивный дизайн и почему это выдумка

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

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

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

Что такое юзабилити-тестирование и как провести его правильно

UX-исследователи с помощью юзабилити-тестирования обнаруживают барьеры и выявляют точки роста в дизайне. Как именно? Давайте разбираться

Иногда возникают возражения по поводу использования фразы “пользовательское тестирование”, так как кажется, что исследователи тестируют пользователей. Но это в корне неверно: мы никогда не тестируем пользователей – только интерфейс. Этот термин о том, что тестирование проводится совместно с пользователями – это важный аспект эмпирических исследований.

Содержание:

Что такое юзабилити-тестирование
В чем ценность юзабилити-тестирования
Что требуется для проведения юзабилити-тестирования
Типы юзабилити-тестирования
Дополнительные ресурсы NNGroup
Вывод и рекомендации

Читать статью: https://ux-journal.ru/chto-takoe-yuzabiliti-testirovanie-i-kak-provesti-ego-pravilno.html

Учимся создавать значки уведомлений: несколько коротких, но действенных советов

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

№ 1 Делайте значки привлекательными за счет ярких цветов «Shop» (слева) использует основной цвет приложения, а приложение «Grab» (справа) использует красный

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

№ 2 Используйте числа и текст, чтобы информировать пользователя «Lyft» (слева) информирует текстом, тогда как «Medium» (справа) использует как значки числа

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

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

Источник: https://design-glory.com/?p=10325

Терминологический хаос. Прошлое/Настоящее/Будущее UX

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

Цель статьи — привести в единый “майндсет” специалистов, которые работают с пользовательским опытом в разных его вариациях. Хочется убрать путаницу в названиях и аббревиатурах, посмотреть на первоначальные ценности и роль UX. Помочь тем специалистам, которые, понимая ценность UX вступают в бессмысленные терминологические дискуссии с коллегами, понимающие под UX что-то своё.

Баталии формулировок затягивают процесс внедрения ценностей UX в компании. Возникает глобальное противостояние между специалистами CX и SD, UX и UX-дизайна, а это точно затягивает проникновение UX-а в процессы компаний, интерфейсы, коммуникации и во всё, что связано с пользователями. Не с пользователями, даже — с людьми, то есть нас с вами.

Существует огромное количество аббревиатур, которые то и дело мелькают в разных статьях (от Сервис Дизайна (SD) и Customer Development (CustDev) до CustomerExperience (CX), и чем дольше я веду свой канал, тем очевиднее становятся расхождения между этими направлениями. Это не может не настораживать. Уже не говорю про то, что постоянно путают UX и UI дизайнерами, точно также, как и UX-исследователей с продуктовыми.
Не буду подробно останавливаться на описании названий и ролей — это большая и интересная тема, но не сегодня.

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

На написание её меня вдохновило выступление Якоба Нильсена на прошедшем World Usability Day (пользуясь случаем — большое спасибо организаторам).

Читать статью: https://habr.com/ru/post/528720/

Руководство по цвету в UX/UI дизайне. Как выбирать, смешивать и сочетать цвета

Цвет – один из основных элементов дизайна интерфейса. Он может сместить первое впечатление о вашем продукте от крутого изысканного до сумасшедшего и дикого. Речь идет не о смешивании красивых цветов, речь идет о создании системы. 

Читать статью: https://ux.pub/editorial/rukovodstvo-po-tsvietu-v-uxui-dizainie-kak-vybirat-smieshivat-i-sochietat-tsvieta-2b87

Узнаваемость или уникальность дизайна — что важнее? Разбираемся на примере логотипов для барбершопов

Дизайнеры Lemon media дали несколько советов, как сделать дизайн логотипов более уникальным, но без потери эффективности.

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

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

Читать статью: https://vc.ru/design/165955-uznavaemost-ili-unikalnost-dizayna-chto-vazhnee-razbiraemsya-na-primere-logotipov-dlya-barbershopov

Улучшая интерфейс: как связаны дизайн и успех продукта

Знаменитый древнеримский инженер и архитектор Витрувий говорил, что архитектура обязательно должна обладать тремя качествами: firmitas (прочность), utilitas (функциональность), venustas (красота). Это верно и для архитектуры пользовательского интерфейса: все мы хотим видеть интерфейс, который работает надежно, решает проблемы пользователей и эстетически привлекателен. О том, как мы решаем эту задачу в Acronis, читайте под катом.

Все мы стремимся к функциональности. И при проектировании продукции Acronis основным источником информации является общение с нашими пользователями. Это позволяет нам понять проблемы, с которыми они сталкиваются каждый день – особенно те, которые не решаются их текущими инструментами.
Такой подход важен, потому что мы работаем в сфере безопасности: плохой дизайн решений не только расстроил бы наших пользователей, но также мог бы увеличить угрозы безопасности. Если интерфейсы продуктов Acronis не будут интуитивно понятными и функциональными, наши пользователи не смогут надежно защищать и восстанавливать критически важные данные. Можно сказать, что в нашей работе цена ошибки действительно велика, и грамотный дизайн оказывается очень важен.

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

Читать: https://habr.com/ru/company/acronis/blog/527254/

10 советов по компонентам Figma

Советы и лучшие практики для работы с компонентами Figma

1. Сочетания клавиш для работы с компонентами
2. Поменять местами компоненты
3. Именование компонентов
4. Создавайте компоненты забавной формы
5. Используйте базовые компоненты
6. Меню быстрой вставки
7. Следуйте принципам атомарного дизайна
8. Используйте компоненты слота
9. Используйте несколько библиотек

Подробнее в статье: https://ux.pub/editorial/10-sovietov-po-komponientam-figma-3717

​​Что, если бы элементы графического интерфейса не были ограничены блоками?

Нестандартное мышление в дизайне графического интерфейса.

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

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

Читать статью: https://ux.pub/editorial/chto-iesli-by-eliemienty-ghrafichieskogho-intierfieisa-nie-byli-oghranichieny-blokami-1m9b

UX-дизайнеры воспринимают себя слишком серьезно

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

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

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

50 примеров дизайн-систем для вдохновения

Что такое дизайн-системы?
Дизайна-система — это набор стандартов, используемых для управления дизайном в масштабе и уменьшения избыточности путем создания общего языка и визуальной согласованности на разных уровнях.

Подробнее об основах дизайн-систем (от NN Group) читайте ниже.

Какова общая структура дизайн-системы?
Обычно дизайн-системы делятся на шесть элементов:

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

Основы: Охватывают основные компоненты, такие как цвет, типографика, иконография, изображения, звук, движение и многое другое.

Компоненты: библиотека повторно используемых компонентов интерфейса с набором правил или рекомендаций, как и когда их следует использовать.

Паттерны дизайна: Паттерны– это передовые методы организации компонентов, решающих проблемы пользователей.

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

Руководство по бренду: это руководство включает в себя ценности бренда, индивидуальность бренда и демонстрацию параметров его использования.
Чему можно научиться у дизайн-систем?

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

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

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

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

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

Авторитетные дизайн-системы
К ним относятся Material Design и Human Interface Guidelines. Во многих отношениях они определили внешний вид дизайн-систем, когда цифровые мобильные операционные системы впервые появились на смартфонах. Благодаря им дизайнеры узнали много полезных методов проектирования, и они до сих пор остаются золотым стандартом дизайн-систем.

Подробнее: https://ux.pub/editorial/50-primierov-dizain-sistiem-dlia-vdokhnovieniia-5h5

Чем продакт-дизайн отличается от UI/UX

Когда мы слышим такие термины, как UI/UX дизайн или продакт-дизайн, единственное, в чем мы точно уверены, – это в том, что речь идет о разработке чего-то для пользователя/покупателя. Того, что он видит и с чем взаимодействует, что бы мы ни предлагали. Тем не менее, эти два термина очень широки с точки зрения бизнеса.

Дизайн пользовательского интерфейса (UI)

UI (дизайн пользовательского интерфейса) – это конкретно дизайн экранов вашего мобильного приложения, сайта и т. д. Он включает в себя высококачественную графику и привлекательные креативы. Говоря коротко, пользовательский интерфейс – это все, что мы видим на конкретном экране, включая все изображения, иконки, шрифты, анимации и эффекты.

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

Дизайн пользовательского опыта (UX)

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

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

UX лучше, чем UI? У вас должен был возникнуть этот вопрос, если вы изучаете возможности в дизайн-индустрии и не уверены, какую сторону выбрать для лучших карьерных перспектив и зарплаты. Я слышал, как многие говорят, что UX лучше, чем UI, потому что это высокооплачиваемая работа. Но, если честно, все зависит от контекста. Если вы хороший UI-дизайнер, вы можете зарабатывать гораздо больше, чем UX-дизайнер, и получить множество возможностей для карьерного роста. С другой стороны, UX – это тоже интересная и творческая работа.

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

Продакт-дизайн

В наши дни, в эпоху многочисленных стартапов, продуктовый дизайн особенно популярен. Объясняя термин одной строчкой, продакт-дизайн – это плюс-минус тот же UI/UX для продукта с учетом бизнес-перспективы. Это означает, что у нас так много бизнес-ограничений с разных точек зрения (вроде продаж, технологий и операций), что это делает дизайн ориентированным и на пользователя и на бизнес одновременно.

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

Источник:  https://design-glory.com/?p=12700

Пять принципов хорошего UX

1. Интерфейс должен быть человечным
Хороший продукт подстраивается под человека с его слабостями и привычками, а не заставляет подстраиваться под себя. Пользователи делают ошибки, меняют мнение, плохо запоминают информацию и не любят считать в уме. Рутинную работу приложение должно сделать за человека: напомнить о регистрации на рейс, подсказать время до вылета, указать на опечатку в имени и восстановить случайно удалённые билеты.

Забота проявляется во всём: нужная кнопка прямо под пальцем, шрифт легко читается, сообщения об ошибке можно понять с первого раза. Тексту важнее быть понятым, чем юридически точным. Это не значит, что нужно писать неточный текст – нужно стремиться к компромиссу. Если пользователь устанет разбираться в формулировках и в итоге сделает неправильно, значит, даже самый корректный текст со своей задачей не справился.

❌ Для оформления полиса страхования ОСАГО необходимо подготовить водительское удостоверение и свидетельство о регистрации транспортного средства
✅ Подготовьте водительские права и свидетельство о регистрации (СТС)

2. Самое важное – не навредить
Человеческие данные — самая большая ценность для любого продукта. Хороший сервис не удаляет их сам и не позволяет им пропасть по случайности. Приложение может зависнуть, уйти в бесконечный цикл, сломаться, но данные обязано сохранить.

❌ Сохранить изменения в документе перед закрытием? Сохранить / Не сохранять / Отмена.
✅ Молча сохраняем результат

❌ Человек случайно удаляет целую страницу из отчёта и не замечает этого до самого последнего шага. Осознаёт ошибку, вздыхает, создаёт страницу заново.
✅ Приложение помнит всё, что было записано, и предлагает восстановить страницу из истории.

3. Следим за контекстом
Хороший сервис понимает, что у человека есть своя жизнь за пределами экрана. Он не разбудит в 2 часа ночи сообщением о скидках и не будет слепить перед сном (поэтому так популярны тёмные темы оформления). Если хорошим приложением пользуются на улице, то его интерфейс будет крупным и контрастным, чтобы считываться в движении на ярком солнце.

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

4. Формируем ожидания
Хороший сервис помогает человеку спланировать время и держит в курсе происходящего. Например, не очищает корзину молча, а предупреждает, что через 30 дней файлы удалятся.

Человек заполняет длинную заявку на кредит и жмёт «Отправить»:

❌ Плохой сервис выдаёт всплывающее окно «Заявка отправлена». У клиента сразу вопросы: Что дальше? Кредит одобрен? Когда ждать решения?
✅ Хороший сервис выдаёт страницу «Спасибо за вашу заявку. Наши специалисты позвонят вам в течение двух часов и сообщат решение». Рядом кнопка «Сообщить по почте».

5. Последовательность и создание привычек

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

Если у клиента банковского приложения 95% операций — переводы, то лучше при следующем запуске показывать страницу переводов. Хорошая электронная книга сразу открывает роман на нужной странице, а не показывает всю библиотеку каждый раз.
Что будет, если следовать этим правилам

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

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

Источник