UX от А до Я — Ошибки: 14 советов, как справиться с неизбежными ошибками

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

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

Профилактика лучше, чем лечение

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

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

2. Отображение состояния системы
Одна из эвристик юзабилити Neilsen – обеспечить видимость состояния системы. Удобный способ добиться этого с помощью Rich Visual Modeless Feedback (RMVP – богатый визуальный немодальный фидбек) [5]. Богатый с точки зрения предоставления подробного отчета о том, что происходит. Немодальный в отношении того, что пользователю не требуется взаимодействовать с продуктом для получения упомянутого визуального фидбека.

3. Берите за основу знакомые паттерны и компоненты
Использование стереотипных UX-компонентов и иконок, знакомых пользователям, повышает предсказуемость правильной функциональности.

4. Используйте аффордансы
Аффордансы – это характеристики объекта, которые подсказывают, как с ним можно взаимодействовать. Первоначально эта концепция применялась к физическим объектам: классическая дверная ручка «позволяет» пользователю тянуть, а ручка в виде пластины «позволяет» толкать. Этот же принцип применим и к цифровым продуктам.

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

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

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

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

9. Тестируйте, тестируйте, тестируйте
Лучшая форма предотвращения ошибок– это протестировать дизайн.

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

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

12. Проектируйте хорошие сообщения об ошибках
Несмотря на все шаги, описанные выше, все же может возникнуть необходимость добавить сообщения об ошибках. Это само по себе может стать темой для отдельной статьи! Но есть несколько правил высокого уровня, которым нужно следовать.

Источник

Тренды дизайна для брендов на 2021 год

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

Вот какими будут основные тенденции в дизайне бренда этого года:

— Приглушенные цвета
— Минимализм
— Асимметрия
— Визуализация данных
— Плоские иконки и иллюстрации
— Простые и классические шрифты
— Моушн лого
— Перекрывающиеся дизайны
— Геометрические фигуры
— Темный режим
— Доступный дизайн
— Использование слайдов в соц. сетях
— Текстовые видео
— Естественный дизайн
— Аутентичность

В статье о каждой из этих тенденций в дизайне более подробно.

Читать статью: https://design-glory.com/6563/trendy-dizajna-dlya-brendov-na-2021-god

Актуальный лого-2021: десять трендов

1. Минимализм
Казалось, что упрощать логотип Intel больше некуда? Но дизайнеры решили убрать окружавший надпись эллипс и укрупнить шрифт. Этот пример показывает, что минимализм не собирается сдавать позиции. В 2021 году лучше избавиться от лишней графики и других украшений. У такого приема есть бонус: изображение легче адаптировать к цифровым форматам, например, превратить в иконку мобильного приложения или разместить на онлайн-баннере.

2. Необычные шрифты
Отличный способ выделить текстовый логотип. Этот прием особенно подойдет творческим проектам: берите пример с Deep Purple, Swoon Mixers или Tweag. Оригинальные завитки букв, готический шрифт или пиксельное начертание — выбирайте любую типографику, которая передаст характер бизнеса. Но не забывайте: креатив лучше контролировать, чтобы сохранить читаемость надписи.

3. Градиент
Переходы оттенков все так же актуальны, но с некоторыми оговорками. Они становятся более плавными и незаметными, чтобы сделать эмблему живой и объемной. Обратите внимание, как с этой задачей справились Messenger, Avon или Autism Speaks. Еще один вариант — добавить контрастный монохромный цвет, как True Car. Не бойтесь экспериментировать, но помните, что градиент сложно передать при печати, особенно на черно-белых документах.

4. Исчезающие надписи
Этот тренд практически не ограничивает фантазию. Разорвите слово посередине, «забудьте» дописать хвосты букв, уберите перекладину в «А», как сделали Scholar, Sartorius или Sailor. Недосказанность обращает внимание на надпись и заставляет всмотреться внимательнее. Главное — чтобы, несмотря на разрывы, лого оставался разборчивым.

5. Нагромождение элементов
Тренд, который позволяет создать по-настоящему уникальную эмблему, ведь приемы наслоения не ограничены. Дублируйте графику, как Skyeng, попробуйте раздвоить элемент, как GoDaddy, или наложить друг на друга разные фигуры, как Spot. Используйте разные цвета, формы, размеры — и получите нестандартную эмблему, которая точно не останется незамеченной.

6. Отрицательное пространство
Этот прием сделает лого интеллектуальным и уникальным: заложит в него двойной смысл, который привлечет внимание к изображению. Подумайте, как использовать пустое пространство между символами. К примеру, WST изящно вписала человека с бильярдным кием между буквами «S» и «T», а Pollination «закольцевала» надпись, превратив круги в буквы «О».

7. Очень тонкие линии
Еще одна разновидность минимализма: ультратонкие линии, напоминающие карандашный рисунок. Такой логотип выглядит стильно, лаконично и остается разборчивым и на билборде, и на экране мобильного. Чтобы придать эмблеме оригинальности, слегка разорвите буквы, как The Practice, или добавьте немного геометрии, как Yema или Una Europa

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

9. Гармония
Этот тренд словно уравновешивает все сумасшедшие тенденции в дизайне, предлагая создать сдержанный и элегантный лого. Добавьте симметрию в надписях или рисунках, как Autoaibe, Denver Art Museum или Onward. А чтобы изображение не выглядело скучно, используйте необычную типографику или цветовые решения. Такая эмблема останется узнаваемой и при печати, и на экранах компьютеров.

10. Монограммы
К классическому приему добавляются актуальные тенденции. Dolby превратил первую букву в геометрическую фигуру и дублировал ее, Conservative использовал отрицательное пространство, а Gmail нашел новое цветовое решение. Все это — эффективные способы разнообразить обычную монограмму и сделать лого актуальнее.

Источник

10 мобильных UX трендов на 2021 год

1. Рост популярности суперприложений
2. Видео взаимодействия
3. 3D графика функционального назначения.
4. Борьба с фейками и дезинформацией
5. Продвинутый голосовой помощник
6. Фокус на оптимизации кроссплатформенных приложений
7. Полезная визуализация данных
8. Изящные неоморфные детали
9. Новое поколение приложений дополненной реальности
10. Безопасность и конфиденциальность данных

Читать статью: https://ux.pub/10-mobilnyh-ux-trendov-na-2021-god/

​​Надоело мониторить сотни ресурсов в поисках годных мокапов и шрифтов?📝

Сегодня открылся доступ к закрытому дизайн-боту Дизайн-складу, в котором более бесплатных 1000 материалов.

Что внутри бота?

— 200+ шрифтов
— сотни мокапов
— шаблоны и материалы
— полезные ресурсы для дизайнера

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

Подписаться на бота: @design_sklad_bot

Метод поиска отличных идей в работе и жизни

Далее о методе, который регулярно использует автор для поиска идей. У него не было задачи «Найти способ улучшить [продукт]». Он ставит задачу «Найти 10 способов улучшить [продукт]».

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

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

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

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

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

Продолжайте думать.

Источник

Шрифт как голос бренда

Если стиль — это душа вещи, то айдентика — это душа компании.

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

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

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

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

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

Шрифт. Сразу скажем: индивидуальный шрифт держит узнаваемость не хуже остальных элементов. Более того, при грамотном подходе шрифт может идентифицировать бренд вообще без какой-либо поддержки. Тут будет уместна аналогия с голосом: мы узнаем человека, не видя его, а только лишь слыша его речь. Так и со шрифтом: если «выключить» все элементы (ну кроме разве что цвета) и оставить шрифт, бренд будет узнаваем большинством людей совершенно без проблем. Новая айдентика МТС, например, строится именно по этой формуле: шрифт плюс цвет.
Причем узнаваемость — далеко не единственный профит, который может дать фирменный шрифт. Он способен на большее, например вызывать эмоции.

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

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

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

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

Подробнее в статье

С чего начать обучение UX-дизайну и как стать профессионалом

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

UX-дизайнер – изобретатель цифровых продуктов призванных улучшить что-либо в текущей реальности.

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

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

- Чем зажигает UX-дизайн и в чем его ценность
- C чего лучше начать первым делом в UX-дизайне
- Кто может стать UX-дизайнером
- Как начинали в UX-дизайне

- Как начинают в UX-дизайне с дизайнерским бэкграундом

Как начинал в UX-дизайне графический дизайнер: история дизайнера из Google
Как начинал в UX-дизайне промышленный дизайнер: история основателя Airbnb
Как начинал в UX-дизайне креативный директор: история дизайнера и основателя Tilda
Как начинали в UX-дизайне дизайнеры: история дизайнеров из Rambler
Как начинали в UX-дизайне дизайнеры спецпроектов: история дизайнеров из Look At Media

- Как начинают в UX-дизайне с инженерным бэкграундом

Как начинал в UX-дизайне фотограф и инженер: история основателя Photoshop
Как начинал в UX-дизайне специалист по электроизмерительным приборам и информатике: история основателя Amazon

- Как начинают в UX-дизайне не дизайнеры и не программисты

Как начинал в UX-дизайне филолог: история основателя ВКонтакте и Telegram
Как начинал в UX-дизайне менеджер по продажам: история основателя Salesforce
Как начинал в UX-дизайне специалист техподдержки: история специалиста из стартапа, который купил Shopify

- В изучение каких инструментов следует вкладывать время?
- Какими техническими и нетехническими навыками должен обладать UX-дизайнер на старте?
- Над какими UX-проектами можно работать самостоятельно?
- Какие UX ресурсы вы можете порекомендовать
- Вывод: Как учиться UX-дизайну

Читать: https://ux-journal.ru/s_chego_nachat_obuchenie_ux.html

Топ-5 плагинов в Figma для веб-дизайнеров

1. Grid for Tilda Publishing
Так как большую часть своего времени я работаю именно с Тильдой, этот плагин стал моим фаворитом. По клику мышкой тебе выдают 5 разных сеток под каждый тип экрана, которые ты можешь использовать в своем дизайне

2. Remove BG
Это, конечно, не панацея, но иногда спасает! Плагин удаляет фон с картинок в считанные секунды. Делает это не всегда хорошо и периодически ухудшает качество картинки, но если нужно очень быстро что то вырезать, а фотошопа под рукой нет — отличное спасение

3. Content Reel
Этот плагин больше подходит для проектировки интерфейса, чем дизайна сайта, но тем не менее оказывается полезен. Он автоматически вставляет рандомные номера телефонов, адреса, почты, имена и даже аватарки в ваш проект!

4. Image Palette
Не знаю как у вас, но мне иногда отправляют картинки со словами «мне нравятся тут цвета, хочу такие». Вместо того, что бы самостоятельно пытаться выудить цвет, можно воспользоваться плагином. Он вытянет 5 самых используемых цветов из картинки, которые подходят для использования в проектах

5. Map Maker
Этот плагин напоминает Content Reel, но этот генерирует карты. Я использую его не так часто, но иногда он здорово выручает и помогает сделать первоначальный дизайн более «живым» и показать на практике, как будет выглядеть будущий сайт

Источник

​​Ребрендинг Burger King – потрясающий мастер-класс по flat design

Burger King приступил к масштабному ребрендингу всех элементов своего визуального брендинга – работа стала образцовой. Обновление показывает нам, как в цифровую эпоху перейти к подходу «прежде всего дизайн». Как и в случае большинства ребрендингов, Burger King присоединился к адептам flat design, но сделал это в уникальном стиле.

Новые яркие элементы ориентированы на повторение форм из меню BK, создавая ретро-стиль. Новый крутой шрифт вместе с кастомизированной цветовой палитрой напоминает психоделию 1970-х, а улучшенный логотип – это вообще сочетание оригинальной итерации 1969 года и самой последней версии 1999 года.

Ребрендинг, проведенный агентством Jones Knowles Ritchie, – серьезная перестройка, не оставляющая камня на камне. Новая упаковка, дизайн меню, товары, декор, соцсети и вообще все.

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

Новый ребрендинг вызывает правильные чувства – это подтверждает и руководитель международного дизайна Restaurant Brands International Рафаэль Абреу. В своем заявлении он отмечает, что «мы хотели использовать дизайн, чтобы заставить людей испытывать тягу к нашей еде; ее совершенство в приготовлении на огне и, прежде всего, ее вкус».

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

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

Источник

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

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

1. Используйте суперсемейства, когда ищете отличные сочетания шрифтов

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

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

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

3. Задайте вертикальный ритм для заголовков и основного текста

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

4. Старайтесь использовать заглавные буквы только в коротких заголовках

Если вы хотите использовать в заголовках заглавные буквы, убедитесь, что они по возможности короткие, желательно длиной в одну строку. Использовать прописные буквы для длинных текстов – плохая идея.
Хороший пример – Kickers (иногда известные, как Overlines). Это короткие фразы, обычно всего несколько слов, которые можно разместить над заголовком. Для них идеально подходят прописные буквы.
Как и в предыдущем совете, добавление небольшого межбуквенного интервала в заголовки, состоящие из заглавных букв, визуально улучшит их.

5. По возможности делайте заголовки короткими и лаконичными

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

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

7. Выберите подходящий шрифт, чтобы придать дизайну правильный «голос»

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

Источник