5 UI/UX трендов 2021 года ставящих пользовательский опыт на первое место

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

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

1. Более тщательное поведенческое исследование
2. Доступные ознакомительные инструкции
3. Скевоморфный дизайн
4. Анимации в пользовательском интерфейсе
5. Виртуальные события с эффектом присутствия

Читать статью: https://say-hi.me/design/5-ui-ux-trendov-2021.html

Как создать продуманный дизайн push-уведомлений

Push-уведомления ежедневно нарушают наш рабочий процесс, если вы их специально не отключили. Мы берем телефон, чтобы узнать который час или проверить список дел, и первое, что мы видим – уведомление о 9 полученных сообщениях от 4 разных людей, которые ждут вашего ответа.

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

— Как обстоят дела с уведомлениями?
— Они привлекают наше внимание
— Как прокачать визуалку (UI) и научиться красть как художник
— Как создать иллюстрации, когда не умеешь рисовать
— Профессиональный дизайн формы и элементов формы
— Они мешают нам
— Проблема с красным цветом
— Когнитивная перегрузка
— Бессмысленность и анти-уведомления
— Чем полезны продуманные уведомления?
— Проектирование продуманных уведомлений
— Управление уровнем внимания
— Предоставление контроля пользователям

Читать статью

Топ-10 лучших кириллических шрифтов для твоего проекта

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

01. Neue Machina
02. Ruberoid
03. Igra
04. Resist
05. Kharkiv Tone
06. Geometria
07. Inter
08. Le Murmure
09. Buyan
10. SK Primo

Читать статью

UI-элементы и жесты в мобильных приложениях

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

А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.

Читать: https://habr.com/ru/company/youla/blog/540768/

36 принципов реализации сервисных страниц для интернет-магазина

Общие принципы реализации сервисных страниц

1. Не прячьте страницы с важной для пользователя сервисной информацией
2. Упростите пользователю считывание информации на странице
3. Предоставьте факты, покажите выгоды
4. Сформируйте эмоциональную связь через сторителлинг
5. Подтолкните посетителя к действию
6. Расскажите о вариантах оплаты
7. Предупредите о комиссиях или скидках
8. Прячьте описания подробностей оплаты в раскрывающийся при клике список
9. Направьте посетителя к товарам
10. Покажите географию обслуживания
11. Укажите способы и условия доставки
12. Проверяйте актуальность информации, указанной на сервисных страницах
13. Внедрите калькулятор доставки
14. Указывайте срок хранения заказа и ограничения по доставке
15. Расскажите о возможности самовывоза и сделайте его комфортным
16. Расскажите о дополнительных услугах
17. Ответьте на все вопросы о возврате простым языком
18. Позаботьтесь о возможности вернуть товар с помощью сайта
19. Не дайте перепутать страницу возврата с политикой возврата
20. Избегайте неочевидных названий ссылок и не прячьте их
21. Дайте возможность вернуть товар в офлайн-магазине или точке выдачи
22. Помогите найти раздел «Вопрос-ответ»
23. Узнайте, что волнует покупателей
24. Отвечайте на вопросы покупателей на их языке
25. Правильно форматируйте вопросы и ответы
26. Направляйте посетителя к нужным страницам
27. Используйте визуальную информацию
28. Реализуйте функционал поиска по вопросам
29. Создайте отдельные страницы для объемных вопросов
30. Не прячьте ссылку на страницу «Контакты»
31. Предоставьте максимум способов связи
32. Попросите заполнить форму или направьте пользователей на раздел «Вопрос-ответ»
33. Добавьте СТА (призыв к действию)
34. Заинтересуйте партнеров
35. Развейте опасения пользователей
36. Сделайте страницу 404 информативной

Читать статью: https://vc.ru/design/203754-37-principov-realizacii-servisnyh-stranic-dlya-internet-magazina

Обзор 7 лучших программ для создания прототипа сайта

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

Статья подскажет, для чего поможет каждый инструмент, и сориентирует по плюсам и минусам. Среди инструментов: Figma, InVision Studio, Tilda и другие.

1. Figma — бесплатно (веб-приложение и desktop-приложение)
Figma построена на технологиях electronjs, а значит, вы сможете дизайнить на любой платформе: Windows, Mac, ChromeOS и даже Linux. А еще — приятный бонус: ваши дизайны сохраняются моментально в облаке, а значит, вся работа всегда в сохранности и готова к демонстрации клиентам. 

2. InVision Studio (Windows и Maс)
InVision Studio так же универсальна как Figma, но поддерживает еще и эффектные анимации и интерактив. Этот инструмент отлично работает как самостоятельное решение, а также клево дополняет Figma для создания топового UX. С помощью плагина можно перенести дизайн из Figma в InVision Studio и добавить анимаций, чтобы оживить дизайн и собрать эффектный концепт.

3. Adobe XD — бесплатно или 772,80 руб./мес. (Mac и Windows)
Альтернатива Figma для тех, кто пользуется всей экосистемой Adobe Creative Cloud. Вы сможете обмениваться ресурсами с другими инструментами, например Photoshop или Illustrator.

4. Principle (Только под Mac)
Альтернатива InVision Studio (только в нем нельзя рисовать детальные макеты, дополняет Figma/Sketch, но работает только на Mac). Особенно Principle хорош для создания эффектных шоуриллов и анимированных промостраниц. Для прототипирования взаимодействия такой же крутой, как и InVision Studio. 

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

6. Webflow
Для фанатов резиновых сайтов и ценителей свободы верстки и анимации на сайте. Требует определенных знаний верстки (основы веб-разработки) на старте. В Webflow вы можете собрать горизонтальный скролл, скрыть графику в зависимости от устройства или прокинуть анимацию из After Effects.

7. Тильда и Tilda Zero Block
Почти такой же мощный, как Webflow, но проще для старта, не требует знания верстки. Идеален, если вы готовы мириться с определенными ограничениями в анимации и местами подстроиться под стандартное поведение.

Подробнее о каждой в источнике

Где лучше работать? Дизайн-агентство vs. продуктовая компания

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

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

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

— Как прокачать визуалку (UI) и научиться красть как художник
— Как создать иллюстрации, когда не умеешь рисовать
— Ширина vs. глубина
— Продукт vs. процесс
— Командная динамика
— Встречи
— Графики, дедлайны и приоритеты

Читать статью: https://ux.pub/gde-luchshe-rabotat-dizayn-agentstvo-vs-produktovaya-kompaniya/

Как создать продуманный дизайн push-уведомлений

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

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

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

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

1. Как обстоят дела с уведомлениями?
—Они привлекают наше внимание
—Они мешают нам
—Проблема с красным цветом
—Когнитивная перегрузка
—Бессмысленность и анти-уведомления

2. Чем полезны продуманные уведомления?

3.Проектирование продуманных уведомлений
— Управление уровнем внимания
—Предоставление контроля пользователям


Читать статью: https://ux.pub/kak-sozdat-produmannyy-dizayn-push-uvedomleniya/#Kak_prokacat_vizualku_UI_i_naucitsa_krast_kak_hudoznik

Уже завтра начинается Design Line Workshop⚡️

6 выходных вас будут качать сильнейшие кураторы страны по разным направлениям. С4D, UI/UX, креативность, брендинг, работа с клиентом и карьера дизайнера. 6 новых работ за один месяц. 

Уже более 500 участников ждут старта, а обсуждения дизайна в чате не прекращаются не на минуту. 
🔥Успей купить билет и попасть в последний вагон: https://workshop.dsgnline.ru 

P.S Юзай промокод DSGNLINE, чтобы получить скидку!

7 простых советов, которые помогут улучшить рабочий процесс в Figma

В этой статье несколько простых советов, которые помогут вам ускорить рабочий процесс при работе в Figma.

Большинство из этих советов идеально подойдут, если вы работаете с дизайн-системами или большими файлами дизайна, но, кроме того, они пригодятся при повседневной работе в Figma.

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

1. Используйте функцию «Math» в Инспекторе. Поберегите свои мозги для более важных дел

Не тратьте время, пытаясь вручную подобрать правильные размеры элементов.
Просто используйте функцию «Math» в Инспекторе и сэкономьте время.

2. Используйте панель «Selection Colors», если хотите моментально изменить цвета

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

Используйте панель «Selection Colors» и настраивайте эти цвета оптом и намного быстрее.

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

Раньше у меня был настоящий хаос на панели «Слои». Были открыты все группы и элементы, что затрудняло поиск нужных элементов.
Используйте сочетание клавиш ALT + L, чтобы время от времени сворачивать все слои, тогда панель будет выглядеть аккуратно, а ваше внимание было сосредоточено на текущем проекте.

4. Используйте поиск, чтобы быстрее находить текстовые стили

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

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

5. Используйте вид «Список» для быстрой навигации по цветовым стилям

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

Мне кажется, что переключение Инспектора с «Сетки» на «Список» всегда помогает быстрее ориентироваться в цветовых стилях, потому что тогда видна метка, а не только образец цвета.

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

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

Используйте сочетания клавиш Enter и Tab, чтобы быстро просматривать элементы на панели «Слои» и быстро находить нужные.

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

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

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

Например, просто выберите иконку на панели «Assets», а затем, удерживая нажатыми клавишы ALT + CMD, перетащите ее на свой дизайн. Вы увидите фиолетовую рамку вокруг существующей иконки, а затем просто поменяйте их местами!

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

Источник

В двух словах о шрифтах, часть вторая

Сегодня затронем аспекты, связанные с буквами, которые могут влиять на выбор шрифта для бренда.

Каллиграфия, леттеринг, шрифт

Наверняка ещё в детстве встречали словосочетание «каллиграфический почерк», что на бытовом уровне значило просто «красивый почерк».

На самом деле почерк и каллиграфия — немного разные вещи. Почерк — просто характерные для любого пишущего детали его рукописного письма. А каллиграфию современное определение относит к искусству (очень древнему).

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

Чем же тогда шрифт отличается от леттеринга? Дело в том, что набором знаков шрифта можно пользоваться бесконечно, в том числе набирая тексты на клавиатуре, и все повторяемые символы будут идентичны. В то время как леттеринг — штучная работа.

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

Что касается каллиграфии — из-за высокой вариативности результата она не так легко применима. Например, если речь идёт о пригласительных на свадьбу, то их число ограничено и позволяет оформлять их каллиграфией, переделывая заново то, что получилось не так хорошо. Но если это какой-то бренд с многотысячными тиражами, то каллиграфия может быть размножена только в виде цифровых копий, что уже позволяет усомниться в том, что это именно она.

Форматы файлов

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

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

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

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

Лицензии на шрифты

Так как шрифт — это программа, то (как в случае со многими другими программами) за её использование чаще всего нужно заплатить. Каждый шрифт охраняется ещё и авторским правом, поскольку, какими бы похожими они вам не казались, все они разные. Автор шрифта запросто может подать на вас в суд, если вы не покупали у него шрифт, но используете его.

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

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

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

Ещё один путь — разработка собственного шрифта. Да, это недёшево. Но если у компании большие тиражи или разные каналы коммуникации — это может стать выгодным вложением.

Источник

Чем отличаются логотипы за 1 млн и 1000 рублей и когда есть смысл платить больше?

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

Классный логотип — это какой?

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

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

Дизайн, как и искусство, субъективен. На «нравится — не нравится» влияет собственный вкус и мода, тренды текущего периода. Для удачного лого нужно, чтобы «сошлись звезды».

Сколько стоит логотип и как формируется его стоимость?

Раз логотипы — дело вкуса и удачного стечения обстоятельств, есть ли смысл платить дорого? Сколько реально стоит логотип?

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

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

1,5-3 тысячи рублей – что сделают, то и берите. За новый сет, возможно, придется еще раз заплатить. Низкая мотивация. Конвейер.

15-25 тысяч рублей – уже появляются варианты логотипа и этапы доработки. Как повезёт.

80-150 тысяч рублей – будет хорошая презентация с описаниями идей. Идеи проработаны. Команда из трех-пяти специалистов. Результат вполне удовлетворительный. Надежно. Компромисс.

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

От 7 миллионов и выше – очень известное агентство. Мощная проработка, разработка стратегий, тесты с организацией фокус-групп и т.п. Это вовлеченность клиента в интересный процесс разработки.

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

Как пример дорогой работы, ребрендинг логотипа Pepsi за 1 миллион долларов в 2009 году: логотип подвергся минималистичному ребрендингу, а его основные элементы получили форму улыбки — попытка сформировать образ дружелюбного и доступного бренда, который обращается к потребителям во всем мире. Стоит отметить, что миллион долларов был оплачен только за дизайнерскую работу, которая длилась пять месяцев.

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

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

Поэтому логотип ― это важная часть маркетинговой коммуникации, но далеко не единственная и не главная.

Источник

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок (примеры в источнике)

В начале этого года автор опубликовал статью о создании компонентов кнопок в Figma с помощью функции Auto Layout. За последние несколько месяцев Figma значительно улучшила Auto Layout. 

ДА! Наконец-то они позволяют индивидуально настраивать интервал!! Для меня это была самая большая проблема этой функции.

Они также представили новейшую функцию – Variants, которая поможет вам привести в порядок ваши компоненты.

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

1. Определите свойства
Кнопка – один из самых сложных компонентов дизайн-системы. У нее так много разных вариантов. Теперь с темной темой нужно удвоить количество компонентов. Число комбинаций может быстро перевалить за 100. Определение всех свойств и их порядка очень важно, и, прежде чем предпринять следующий шаг, вы должны четко понимать, как вы хотите их структурировать.

Когда все свойства внесены в список, я начинаю думать об организации этого компонента в Figma, чтобы он был управляемым и масштабируемым.
Моя идея – разбить его на несколько таблиц:
Один тип кнопки на таблицу
Строки таблицы соответствуют разным состояниям и размерам кнопок.
Столбцы таблицы соответствуют разным формам и стилям.
Затем сгруппируйте таблицы по разным темам.

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

2. Настройте таблицу
После определения всех свойств начните с нового фрейма, создайте таблицы и заполните все свойства заголовков строк и столбцов таблицы.
Совет: примените auto layout к фрейму, чтобы расширить его при добавлении дополнительных свойств.

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

Затем начните с пустого фрейма, назовем его «Button template».

Затем добавьте метку-плейсхолдер и используйте функцию auto-layout, чтобы сохранить внутренние отступы кнопки.

Затем мы можем начать применять к нему несколько цветов.

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

Через время все варианты для различных состояний стиля «Прямоугольник» готовы.

Теперь мы можем, наконец, создать компоненты для нашей кнопки. Перед преобразованием фрейма в компонент убедитесь, что в названии слоя есть все варианты, разделенные «/».

Затем используйте плагин Batch Create Component, чтобы создать все компоненты сразу.

Погодите. Что?!
После того, как мы объединили компоненты в виде вариантов, Figma перемещает все компоненты в новый фрейм, что разбивает нашу таблицу.
Мой обходной путь – аккуратно накладывать вариант поверх таблицы. Помните, когда вы это сделаете, заблокируйте фрейм таблицы. В противном случае варианты попадут во фрейм таблицы!

4. Назовите свойства и значения варианта
Прежде чем создавать дополнительные варианты для разных стилей, давайте удостоверимся в правильности свойств и значений.

Затем нужно создать больше компонентов для разных форм и типов. Выберите все компоненты и нажмите «+» в правом углу кнопки. Затем Figma продублирует все выбранные компоненты, и нам нужно переименовать значение свойства.

Подробнее с примерами в источнике

Ребрендинг = большой риск

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

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

• Структурные перемены в компании. Изменение позиционирования компании, ее миссии и целей, отношений и коммуникации с клиентами.
• Изменение / расширение целевой аудитории. Весь визуал бренда опирается на вкусы целевой аудитории.
• Когда компания выбирает новую аудиторию или пытается расширить уже имеющуюся, приходится меняться.
• Запуск новых продуктов. Их нужно запускать только с новыми посылами, с новой визуальной коммуникацией.

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

Хороший пример — недавний ребрендинг BMW. Автомобильный гигант не менял свой логотип 23 года и вот сейчас компания обновилась. Таким образом компания входит в новую эру электрокаров. Автомобили без ДВС рассчитаны на более молодую аудиторию. И для того чтобы запустить новый продукт, захватить больше ЦА и идти в ногу со временем компания изменяет свое позиционирование, она становится более открытой, буквально прозрачной, как это видно по логотипу, для большего круга людей, для больших возможностей. Этот кейс доказывает, что дизайн — это лишь следствие глобальных перемен бренда. И когда все так разложено по полочкам, то к визуалу очень сложно придраться.

Но бывают и обратные случаи. К примеру Компания Gap, которая без всяких анонсов, презентаций и каких-либо объяснений своего решения тихонько изменили узнаваемый логотип на новый, кардинально другой. За что получили тысячи недовольных комментариев от фанатов бренда в Facebook и менее чем через неделю компания вернула прежний логотип.И это как раз получился пример из разряда "Хочется что-то новенькое".

И еще один интересный кейс неудачного ребрендинга упаковки сока Tropicana. Случай когда вроде бы и была разработана стратегия, и к работе привлекли самого именитого, на тот момент, арт-директора США, который сделал дизайн точно круче старого. Но ожидаемое чудо обернулось катастрофой и потерей 27 милн долларов за 6 недель продаж.

В последствии было проведено несколько исследований, которые показали пару грубейших ошибок:

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

Вторая ошибка — кардинальная смена визуальных триггеров. Если в старом варианте первым бросалась в глаза пышная контрастная надпись Tropicana, а потом "живой", настоящий апельсин. То в новом дизайне первым в глаза бросается надпись "100% orange" и далеко не сразу понятно что она написана на стакане апельсинового сока. А логотип вообще ушел из поля восприятия из-за того, что расположен боком, написан другим шрифтом, сам по себе стал меньше и имеет менее контрастный зеленый цвет.
В результате этого постоянный потребитель потерял сок на полке. А если и находил, то он уже не вызывал тех чувств и ассоциаций, которые были ранее. И как следствие потребитель выбирал другую упаковку сока на той же полке.

Источник

UX дизайн: эффект превосходства изображения

Статья для начинающих UX/UI дизайнеров, исследователей и аналитиков. В статье рассказывается о том, почему картинки и фотографии лучше текста (с научной точки зрения). Как мозг пользователей кодирует и запоминает контент на сайтах. И как применять эти знания в дизайне сайтов.

1. Изображения на странице товара

В ходе качественного кабинетного тестирования страниц товаров сайта Leroy Merlin, стало ясно, насколько важны фотографии товаров для пользователей. Тестирование показало, что 64% испытуемых первым делом при переходе на страницу продукта начинали изучать фотографии, вместо того, чтобы читать названия товаров, описание или пролистывать страницу вниз, чтобы получить более полный обзор. Это говорит о том, что пользователи, зачастую, полагаются на фотографии товаров как на отправную точку в изучении товаров. Более того, часть пользователей выстраивали своё первое впечатление о товарах исключительно по фотографии товара, а не по текстовому описанию. А некоторые из них даже покидали страницу товара на которой не было фотографий интересуемого товара.

3. Изображения в меню навигации

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

И напротив, если сопроводить текстовые названия разделов меню изображениями, то пользователю станет проще ориентироваться, находить и запоминать интересующие разделы, даже если название раздела пользователю ещё неизвестно. Вот как это реализовано на сайте интернет-магазина мебели ИКЕА.

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

4. Изображения в рекламных баннерах

Эффект превосходства изображения применим и в дизайне рекламных баннеров на сайтах, аналогично рекламным полосам в журнале из эксперимента Перси, Росситера и Донована (выше). Для сравнения, ниже рекламный баннер картриджей для на сайте интернет-магазина pleer.ru, как видно здесь только текст на баннере, что хуже считывается и меньше запоминается.

5. Изображения на страницах сайта

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

Теперь сравните это с тем, как ссылка на мобильное приложение указана на сайте СовКомБанка. Здесь помимо текста есть крупное и красивое изображение смартфона с интерфейсом мобильного банка, по которому сразу можно понять, что речь о мобильном приложении банка, даже при беглом взгляде. А в тексте указаны также преимущества и QR-код для быстрого и удобного скачивания.

Источник

Как UX-исследования избавляют от дорогих ошибок в продуктах

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

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

Формулируем цель и гипотезы
Цель – это ключевой вопрос, на который мы хотим ответить. Он может быть общим, например, пользователи справляются с оформлением страховки через приложение – да/нет. Или частным: оформление не занимает больше 15 минут, пользователи обращают внимание на некое специальное условия и т.д. Цель затем раскладывается на гипотезы, которые мы проверяем по ходу исследования.

Определяем метрики исследования
Успешность выполнения задания. Пользователь справился с заданием практически без проблем – 100%; столкнулся с проблемами, но в итоге справился – 50%; – не справился с заданием – 0%.

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

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

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

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

Чек-лист для старта UX-исследования

Чтобы протестировать UX нового продукта, команде нужна следующая информация:

Описание продукта. Что именно мы будем тестировать?

Цели исследования. На что повлияют его результаты? Какие решения будет принимать команда с полученной информацией?

Сценарий. Какие шаги проходит пользователь на пути к своей цели? Один продукт может включать любое количество сценариев.

Гипотезы и вопросы. Какие сомнения у команды есть? Что хочется прояснить в сценариях? Какие есть предположения о проблемных местах в интерфейсе? Какие важные вопросы сейчас без ответа?

Кто пользователи. Какие пользователи интересны в контексте этого исследования (роль, особенности организации, отрасль, активность в сервисе)? Какие задачи они решают в сервисе? Есть ли лояльные пользователи и их контакты?

Сроки. К какому сроку важно получить информацию, иначе будет поздно?

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

Источник

Советы дизайнерам, не связанные с дизайном

4 способа стать лучшим дизайнером и человеком

1. Вы – это не ваша работа

Работа в UX-дизайне – это так весело! Мне повезло, что я занимаюсь проектированием программного обеспечения, и я не могу вспомнить другую отрасль, в которой хотел бы работать. Она удовлетворяет мою потребность в коммуникации, обучении и работе с умными людьми для решения значимых проблем. Однако, когда работа так интересна, легко погрузиться в нее и упустить из виду самое главное: семью, друзей и сообщество.

Итак, вы – это не ваша работа. Вы человек – уникальный, несовершенный, полный сложностей и противоречий, который просто работает в UX. Не забывайте этого.
На протяжении всей жизни вы, вероятно, будете работать в разных компаниях, отраслях и на разных должностях. Помните, что работа временна, но жизненные события и отношения, которые мы строим, постоянны.
Будь то работа по дому, учеба или семейные дела, если вам нужно делать это – делайте. Работа может и должна подождать. Если работа кажется невыносимой и становится единственным занятием, на которое вы тратите время, сделайте глубокий вдох и подумайте о следующем принципе…

2. У вас есть право сделать перерыв

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

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

4. Более глубокая эмпатия

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

Если вы обратили пристальное внимание на их потребности, вы также заметили, что у них есть жизнь, выходящая за рамки той задачи, которую они пытаются выполнить. И сюрприз! Ваш инструмент или сервис не являются центром их жизни. У них есть семейные обязанности, личные и социальные проблемы. То, что вы проектируете – это крохотная часть их дня, но она часто оказывает огромное влияние на их психическое состояние, когда они возвращаются к личной жизни.
Помимо страданий и неравенства, которые обнажил 2020 год – а их было слишком много – вы почувствовали наше общее человеческое желание построить глубокие любовные связи. Наша потребность оставаться связанными с миром, и друг другом вышла на первый план.

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

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

Источник

11 основных проблем в дизайне мобильных приложений

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

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

Уменьшение беспорядка улучшит понимание.

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

Навигация должна быть четкой и интуитивно понятной.

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

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

4. Низкоконтрастный текст и функциональные элементы
Светлый текст (например, светло-серый) может выглядеть эстетично, но пользователям будет сложно его прочитать. Люди часто взаимодействуют со своими мобильными устройствами далеко не в идеальных условиях. Яркий солнечный свет может сделать элементы на экране плохо различимыми. Но правильный контраст может сделать элементы более заметными.

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

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

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

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

9. Отсутствие визуальной обратной связи
Отсутствие обратной связи может сбить с толку пользователей и заставить их задуматься, работает приложение или нет.

10. Раздражающие уведомления
Раздражающие push-уведомления – одна и главных причин, по которой люди удаляют мобильные приложения.

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

Подробнее