Джуны, именно поэтому вас не берут на работу, 2 часть
В рамках набора кандидатов на джуниор дизайнера в нашу студию, мы посмотрели более 30 решений тестового задания. Большинство содержат одни и те же ошибки. В этой статье я разберу построение навигации в интерфейсе, что такое консистентность и случаи использования разного вида кнопок. Давайте разберем на конкретных примерах.
Всем привет! Меня зовут Катя, я UX/UI-дизайнер в дизайн студии интерфейсов UXART. За 8 месяцев поиска работы я сделала больше 10 тестовых в разные компании от Сбера до «Иванских хинкалей». И ошибок было допущено немерено. Чтобы показать, как делать задания классно, в конце прошлого года сняла видео с обзором на решение, после которого меня взяли в UXART.
В продолжение к видео написала первую часть статьи с разбором причин, из-за которых отказывают джунам. Обсудили как подходить к анализу задания, делать качественный UI и оформлять макет.
В последнее время мы активно расширяем штат сотрудников и изучаем сотни портфолио ежедневно. И практически в каждом находим одинаковые ошибки, которые портят впечатление о дизайнерах. В этой статье собрали топ-7 самых популярных ошибок: начиная от отсутствия решения из ТЗ и заканчивая неуважением к проверяющему.
Эта статья будет продолжением топа частых ошибок в тестовых UX/UI дизайнеров. В некоторых блоках статьи оставила ссылки на полезные материалы, с которыми советую ознакомиться. Они помогут вам прокачать hard скиллы, поэтому не пропускаем полезности! А в конце заглядывайте в файл с реальными макетами, которые можно изучить и применить на практике.
В решении не показано мышление кандидата
Индустрия кратно растёт ежегодно, рынок джуниор UX/UI дизайнеров порождает еще большую конкуренцию. Чтобы выделиться на фоне большинства, даже самым маленьким специалистам нужно не только умение двигать пиксели, но и решать задачи бизнеса. Для качественной работы необходимо погружаться в контекст, анализировать ТЗ шире его формулировки, знать основы дизайн-процесса и понимать ценность каждого шага.
- Объясните логику, по которой вы выбираете именно такой дизайн. Например, когда делаете анализ конкурентов, распишите по пунктам плюсы и минусы, а не просто сложите скрины интерфейса в файл. Это кстати, часть тестового в одну крупную студию. Могу его обнародовать! Ссылка на тестовое решение.
- Поясните неочевидные решения в макете. Например, напишите стикеры с описанием механики и добавьте скрин с ссылкой на аналогичное решение у авторитетной компании на рынке.
- Покажите моменты, которые противоречат или дополняют ТЗ, чтобы подчеркнуть свою проактивность и включенность в работу. Вы не просто сделали как написано, вы подумали и придумали.
Пояснения — это шанс показать не только глубину вашего решения, но и умение мыслить как дизайнер, решающий задачи бизнеса. В своём посте я разобрала пошаговый процесс оформления макетов даже для самых требовательных клиентов. Подробнее — в моём телеграм-канале. Ссылка на пост.
Навигация алкоголика в «интерфейсе»
Многие кандидаты не понимают базовые гайдлайны проектирования мобилки и веба, в результате чего в макетах полная неразбериха. Поясню некоторые принципы, которые чаще всего игнорировались:
2.1 Интерфейс всегда зонируется. Каждая зона — группа объектов, объединённая по смыслу или функции. Зачастую зонирование имеет очень природный характер: “как гайдлайны 5 лет назад сказали, так сейчас и делаем”. Если более маленькие паттерны отмирают, то высокоуровневая навигация сквозь года неизменна.
Например, меню чаще всего находится сверху, если это сайт или инструмент типа ворда или экселя. Или реализуется в виде бокового меню, если это сервис, по типу яндекс музыки или того же телеграмма.
Внутри каждой зоны действует то же правило: определяем группы объектов и располагаем их в соответствии с иерархией. Взглянем на атрибутный состав блока треков в Звуке. Обратите внимание на выбор начертания, размера и цвета элементов. Дизайнеру важно расставлять акценты в соответствии с иерархией, чтобы облегчать поиск нужной информации. Вы по сути управляете вниманием и предопределяете, что для пользователя наиболее важно увидеть первым.
2.2 UI линий навигации.
- Есть первая, вторая, третья линия навигации, которая выделяется определенным образом. Например, часто 1 линия навигации — вкладки с линией, а вторая — табы в плашке.
Важно в начале пути посвятить несколько дней подробного изучения гайдлайнов Human Interface Guidelines & Material Design. Это крупнейшие дизайн-библиотеки и основоположники принципов построения дизайна. Необязательно читать мануалы, можно найти видеоролики с разбором этих дизайн-библиотек. А если хочется капнуть глубже, можно проанализировать отечественные дизайн-библиотеки.
Подкрепляю этот пункт цитатой из книги Алана Купера «Интерфейс». Тут же мы видим еще один пример с зонированием.
Непонимание разницы между видами кнопок и случаями их использования
- Функция: Существуют primary, secondary и tertiary кнопки. Они различаются заливкой, которая определяет их акцентность, а соответственно и приоритетность действия в интерфейсе.
- Primary кнопка на экране зачастую одна, чтобы интерфейс управлял вниманием пользователя, говоря “приоритетное действие здесь только одно”. Исключением могут являться карточки товаров в каталоге, где кнопка “В корзину” или “Купить” встречается на каждой карточке.
- А есть текстовые кнопки, которые используются для ссылок, нейтральных действий.
- У кнопки может быть иконка. Обычно она располагается справа или слева — в зависимости от семантики.
- Но порой кнопка может состоять из одной иконки. Она может располагаться на плашке или без нее, в зависимости от приоритета действия.
— Кнопка может быть красной, в случае, если это негативное действие в системе, например «удалить»;
— Желтой, если это предупреждение;
— Зеленой, если действие позитивное.
Бывают и исключения из правил, когда у бренда акцентный цвет красный. В таком случае Primary окрашивается либо в цвет бренда, либо в белый/черный
Задание: В качестве практики использования кнопок, можно посмотреть дизайн системы бигтеха, а после открыть приложение и проанализировать использование кнопок из ДС. Также можно почитать гайдлайны крупных компаний, например, помимо открытой дизайн-системы Mail.ru, есть Контур.Гайд.
Консистентность в дизайне интерфейсов
Консистентность в дизайне — это принцип, который предполагает единообразие и согласованность элементов дизайна в рамках одной системы, продукта или интерфейса. Если говорить просто, этот термин можно заменить словами «последовательность» и «повторение». Консистентность условно делится на визуальную и функциональную.
4.1 Визуальная консистеность подразумевает, что
- Для типографики выстроена иерархия размеров, начертаний и интерлиньяжа. В этом деле может помочь сайт TypeScale
- Заведены стили для каждого используемого цвета в интерфейсе. По построению палитры в интерфейсе есть отличная видеолекция у школы Formfactor. Ссылка на видео
- Настроены переменные со значениями спейсингов и скруглений в интерфейсе. Либо они прописаны текстом в UI-ките. Ну или хотя бы просто соблюдаются в макетах без документации.
- Иконки и иллюстрации выполнены в ��динаковом стиле, используется одинаковая толщина линии и заливка
- Состояния Default Hover Pressed Disabled отображаются одинаково для большинства элементов
- Кнопки, переключатели, поля ввода и другие элементы должны выглядеть и работать одинаково на всех экранах. Нельзя просто взять и использовать разные виды инпутов в рамках одного интерфейса, потому что это вызывает замешательство у пользователя, порождает лишние вопросы.
Интерфейс должен решать задачи, а не быть задачей
4.2 Функциональная консистеность подразумевает, что одни и те же элементы, действия пользователя и функции в интерфейсе работают одинаково.
Например, если поиск по всему сайту реализован определенным образом, то поиск внутри каталога должен быть реализован по аналогии.
Очень важно сохранять структуру и логику построения интерфейса и повторять установленные в рамках проекта правила. Зачем? Так более предсказуемо. Хороший интерфейс незаметен. Цель дизайнера — экономить калорию пользователя, которую он потенциально может потратить на обдумывания любого шага на своём пути.
Важно уточнить, что советы имеют рекомендательный характер при первом знакомстве с профессией. По мере роста в грейде, решения могут быть более уникальными и сложными. На первых порах работодатель ожидает дизайн соответствующий стандартам проектирования. К нему не будет претензий, он понесёт меньше рисков для проекта и покажет, что вы владеете базовыми знаниями.
Если хотите увидеть продолжение, то обязательно лайкайте и комментируйте эту статью. С вами была Катя из UXART.
И, конечно же, не забывайте подписываться на наш тг-канал, в котором мы рассказываем про дизайн, делимся внутрянкой и просто хорошо проводим время