Словарь UX/UI-дизайнера

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

UX-дизайнер

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

UX является аббревиатурой и расшифровывается, как user experience, то есть опыт пользователя. Формулировка отражает опыт взаимодействия простого юзера с сайтом или приложением, то, насколько удобным он находит интерфейс. В сфере IT востребованность дизайнеров такого рода очень велика. Здесь происходит взаимодействие между программистами и дизайнерами, которые вместе работают над итоговым продуктом для пользователя. Дизайнер помогает сделать обертку для продукта, продумать удобство и красоту итогового результата.

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

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

Задачи UX-дизайнера

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

Навыки, которыми должен обладать UX-дизайнер

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

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

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

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

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

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

UI-дизайнер

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

Задачи UI-дизайнера

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

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

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

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

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

Что должен уметь UI-дизайнер

В работе UI-дизайнера, впрочем, как и в работе UX, важны личностные навыки или soft skills. Это, к примеру, коммуникабельность, внимательность, ведь нельзя упускать детали. Также пригодятся хорошие аналитические способности, креативность и опыт работы в команде, а еще очень важно умение спокойно и адекватно реагировать на критику и работать с правками.

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

• Понимание основ брендинга.
• Знания в области типографики.
• Высокий уровень владения графическими редакторами.

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

Сферы работы UX и UI-дизайнеров

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

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

Терминология UX-дизайна

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

Ползунок (Slider Controls) ― помогает пользователю менять те или иные значения. Элемент страницы, за который можно потянуть, чтобы изменить что-либо, например, яркость экрана.

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

Путь ― маршрут пользователя по сайту или приложению.

Метки ― кнопки или другие элементы, предназначение которых заключается в навигации по вашему продукту.

Система управления контентом ― программа, которая позволяет редактировать и создавать контент вместе с другими специалистами.

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

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

Интерфейс (Interface) ― это непосредственное пространство, где пользователь будет взаимодействовать с вашим продуктом.

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

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

Гипотеза ― так называют некое предположение, требующее доказательства. Они бывают совершенно разного объема и размера. Гипотезу можно выдвинуть, например, относительно заметности конверсионного элемента в приложении или же относительно продукта в целом ― в таком случае, это будет масштабная гипотеза. Одним из самых популярных методов проверки гипотез можно назвать HADI-цикл.

HADI-цикл ― является методом проверки гипотез. Такая проверка состоит из четырех этапов: формирование самой гипотезы (Hypothesis), проверка этой гипотезы (Action), получение результата, который можно измерить (Data) и выводы, с помощью которых можно сформировать дальнейшие гипотезы (Insights).

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

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

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

Z-паттерн ― это траектория пользовательского сканирования контента, которая выполняется в форме буквы Z ― слева направо и сверху вниз. Это паттерн поведения, основанный на паттерне чтения книг у европейцев.

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

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

Респондент ― опрашиваемый участник исследования.

Вебвизор ― этот инструмент поможет записать и проанализировать действия пользователей.

Фокус-группа ― собрание потенциальных пользователей для тестирования и получения обратной связи.

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

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

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

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

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

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

Информационная архитектура (Information Architecture, IA, ИА) ― это структура всех элементов контента приложения или сайта. В нее включают системы маркировки, навигации, поиска и организации.

Interaction Design (Интерактивный дизайн) ― это разработка цифровых интерактивных продуктов, с прогнозом взаимодействия пользователя с ними.

Iterative Design — тоже проектирование, но в нем нет четкого начала и завершения. В процесс входит создание прототипа, планирование и реализация. И, наконец, тестирование, процесс цикличен. В итоге выбирается наиболее подходящий дизайн.

MVP или минимально жизнеспособный продукт (minimum viable product) — это набор самых основных минимальных функций, с которыми может быть запущен продукт. Элементы из этого набора могут развиваться и дорабатываться.

Adaptive design (Адаптивный дизайн) ― важный термин, означающий разные версии продукта, адаптированные под разные устройства. Иными словами это то, как будет выглядеть продукт на смартфоне, планшете или ПК. На сегодняшний день пользователь крайне часто пользуется сайтами с телефона, поэтому важной задачей для дизайнера является продумывание интерфейса для разных устройств уже на первых этапах разработки.

Responsive design (Отзывчивый веб-дизайн) ― похожий термин, но адаптивный дизайн ― это набор разных макетов под каждое конкретное устройство, а отзывчивый веб-дизайн означает единый макет, который сам может адаптироваться под разные устройства.

Breadcrumbs (Хлебные крошки) ― цепочка навигации, помощник для пользователя. Такая цепочка помогает пользователю вернуться к предыдущему шагу, показывая все этапы навигации.

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

Айтрекинг (Eye-tracking) ― это интересная технология, помогающая отслеживать движение глаз. Эту технологию применяют для выявления проблем взаимодействия пользователя с продуктом. Айтрекер записывает движение глаз и статистику.

Шкала загрузки, прогресс-бар (Progress bar) ― индикатор загрузки контента. Это может быть «ползучая линия» или постепенно заполняющийся круг. Этот элемент показывает подробный процесс выполнения задачи. Нельзя путать этот термин с «индикатором загрузки». Этот элемент тоже показывает процесс загрузки, но не так подробно.

Индикатор загрузки, индикатор активности, крутилка (Progress indicator) ― по функциям идентичен прогресс-бару, индикатор тоже предназначен для отображения загрузки какого-нибудь процесса. Разница состоит в том, что прогресс-бар показывает подробный прогресс выполнения задачи, а индикатор загрузки ― нет. Такой индикатор подойдет, если система не может точно определить точку завершения процесса. К примеру, если она зависла или идет настройка стороннего устройства.

Пагинация (Pagination) ― это разделение контента на сайте на отдельные страницы.

Болевые точки или боль пользователя (Pain Point) ― это слабые места проекта, предполагаемые проблемы, с которыми может столкнуться пользователь при взаимодействии с продуктом на всех уровнях.

Карточная сортировка (Card Sort) ― это способ исследования, помогающий создать структуру информационного продукта с помощью пользователей. В ходе исследования участникам предлагают карточки с некоторой информацией и просят разложить их на разные группы по разным критериям: от релевантности до частоты использования. Исследование также помогает сделать сайт более удобным, так как позволяет  узнать о пользовательских ассоциациях. Подобные исследования могут проходить как в онлайн, так и в офлайн режиме (в таком случае используются обычные бумажные карточки).

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

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

Аннотации (Annotations) ― это примечания к элементам макетов интерфейса или к взаимодействиям, связанным с ними. Аннотации можно добавить, например, к идентификаторам и иконкам, если пользователь вдруг не поймет картинку. Также для слабовидящих могут быть добавлены видео и иллюстрации. Помимо этого, к аннотациям можно отнести правила взаимодействия, направления взаимодействия, правила процессов или сообщения об ошибках. Чтобы грамотно сделать аннотацию, необходимо помнить о том, что она должна быть сформулирована четко и однозначно. К примеру, для пояснения к иконке подойдет четкая формулировка: «добавить комментарий».

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

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

Формы ― это элемент на основе полей текста. Например, существует форма регистрации, оформления заказа или форма обратной связи. Иными словами, форма ― это помощник пользователя.

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

CTA (Call to Action) ― так называется специальный графический элемент, который помогает призвать посетителя сайта или приложения завершить конкретное действие, например, купить продукт или скачать контент. Как правило, этот элемент представляет собой кнопку с различными визуальными элементами, привлекающими внимание пользователя.

First-click test ― один из методов юзабилити-тестирования. Его проводят при помощи различных сервисов, например Optimal Workshop и VWO. Алгоритм исследования следующий: на сервис загружается макет в формате png/jpeg и задается определенный вопрос, чтобы пользователь мог ответить на него кликом. Вы прослеживаете, куда кликнул пользователь, и на основе ответа получаете своеобразную карту, которая поможет разработать продукт наиболее эффективно. Рекомендованное количество пользователей для тестирования ― 6–10 человек.

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

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

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

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

Сценарий использования (use case) ― это описание процесса использования продукта, которое помогает понять, как продукт будет использоваться в реальной жизни. Помогает спрогнозировать действия пользователя и возможные проблемы при использовании продукта.

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

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

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

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

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

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

Экспертная юзабилити оценка ― это метод проверки удобства использования продукта, при котором эксперты в области UX/UI-дизайна анализируют продукт и выносят свое мнение о его удобстве использования и возможных проблемах.

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

Wireflow ― это диаграмма, которая показывает, как пользователь будет взаимодействовать с интерфейсом приложения или веб-сайта. Она объединяет в себе элементы wireframe и flowchart, чтобы показать не только расположение элементов, но и последовательность действий пользователя.

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

Терминология UI-дизайна

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

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

Шрифт ― в дизайне шрифт обозначает определенный набор символов, связанных с помощью единообразного оформления.

Гарнитура ― группа шрифтов, которые похожи по своему стилю, однако отличаются по начертанию. К типам начертания можно отнести: курсив, жирный, широкий или узкий. В качестве примера можно вспомнить популярный Times New Roman. Он представляет собой гарнитуру, в которой есть шрифты с различным начертанием: Times New Roman Regular, Times New Roman Italic, Times New Roman Bold.

Brand Identity (Фирменный стиль) ― это отражение содержания и ценностей компании. Сюда входят логотипы, визитки, мерч и т. п.

Кнопки ― они помогают пользователю взаимодействовать с формами на сайте или в приложении.

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

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

Пустое пространство ― область на странице, которая ничем не заполнена.

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

Фавикон ― небольшая иконка, размером 16х16 пикселей, реже 32х32 пикселя. Показывается на вкладке возле названия сайта.

Mood board (Доска настроения) ― все материалы для вдохновения. Сюда могут входить любые элементы брендинга. Такая доска используется, чтобы визуализировать представление о будущем продукте. Тут дизайнер проявляет полную свободу творчества, подбирает различные источники для вдохновения, которые пригодятся в работе.

Storyboard — визуализация опыта пользователя. Его взаимодействия с итоговым результатом. Иными словами, это раскадровка, которая помогает пошагово спрогнозировать действия юзера.

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

Лейаут ― это макет, который помогает определить расположение всех функциональных элементов на странице. Иными словами, это визуальная основа страницы без каких-либо декоративных элементов.

Grid System (Сетка) ― это система для организации лейаута. Таким образом, можно назвать сетку базовой структурой в дизайне интерфейсов любых продуктов. Она помогает не только сделать элементы более упорядоченными, но и улучшить пользовательский опыт взаимодействия благодаря повышению читабельности, уточнения информационной архитектуры и создания основы для отзывчивого дизайна. Существует шесть типов сеток:

1. Колоночная ― одна из самых популярных сеток. При ее применении страницу разбивают на несколько вертикальных полей, по которым и будут выравниваться объекты. Подобные сетки часто используются в газетах и журналах.
2. Модульная ― это сетка, где к столбцам добавляются еще и строки. Благодаря пересечению строк и столбцов появляются «модули», которые дизайнеры и используют для организации элементов. Чаще всего такие сетки можно встретить в различных журналах и отчетах.
3. Сетка из базовых линий ― такая сетка является довольно плотной и состоит из равномерно расположенных горизонтальных линий, которые определяют расположение будущего текста. Часто подобный вид сеток применяют в сочетании с колоночными, потому что такое сочетание дает возможность равномерно выровнять строки в столбцах по всему развороту. Например, базовой сеткой можно назвать линованную бумагу, которую каждый видел в школе.
4. Манускриптная ― так называют одноколоночную сетку, которая определяет расположение текста на странице. Такую сетку часто можно встретить в книгах классической печати.
5. Пиксельная ― сетка, состоящая из пикселей. Позволяет редактировать изображение более детально ― попиксельно.
6. Иерархическая ― так называют любую нерегулярную сетку, которая отражает специфику контента. Она может быть кастомной или же в составе двух сеток, наложенных друг на друга, а также других дополнительных элементов. Это наиболее новый вариант решения организации пространства, сегодня его используют многие сайты, чтобы отойти от стандартных решений и выделиться на фоне других.

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

Рассмотрим подробнее

Flat design или плоский дизайн ― это тренд в мире дизайна. Его суть в том, что объекты изображаются без всякого объема. Плоский дизайн стал популярен приблизительно в 2013 году и до сих пор используется многими компаниями. В основе такого дизайна лежат лаконичные, порой даже схематичные изображения, не содержащие лишних деталей. Среди принципов плоского дизайна можно выделить основные: двухмерные изображения, лежащие в одной плоскости, отсутствие лишних эффектов, отсутствие теней, бликов, лишнего объема; понятные, схематичные изображения; насыщенность цвета и контраст. В плоском дизайне делается акцент на тексте, шрифте и типографике в целом. Такой вид дизайна хорошо подходит для мобильных приложений, кроме того, он ускоряет работу приложений, потому что его элементы имеют небольшой вес.

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

Material Design (Материальный дизайн) ― так называют дизайн-библиотеку, разработанную компанией Google. Благодаря ей у дизайнеров есть возможность создавать различные продукты: приложения, сайты и т. д. В ней находится очень большой объем полезной информации. Там можно найти иконки, типографику и множество учебных материалов. Библиотека очень хорошо структурирована и поможет любому специалисту: от новичка до профессионала с многолетним опытом.

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

Scale (Масштаб) ― это то, что характеризует изменение размера объекта с сохранением форм и пропорций. Маленький масштаб, к примеру, позволяет создавать мелкие детали.

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

Пиксель — так называют отдельную точку изображения. Если посмотреть на экран ПК, то пиксель будет выглядеть, как маленький квадрат. Любой пиксель имеет свой цвет, а все пиксели составляют целое изображение.

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

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

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

К характеристикам цвета можно отнести следующие элементы:

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

Насыщенность ― это отличия хроматической и ахроматической группы цветов.

Светлота ― это значение близости к одному из цветов ахроматического ряда. Чем выше яркость, тем светлее будет цвет.

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

Теплые цвета ― это спектр цветов, которые вызывают ассоциации с теплом и уютом. Например, красный, оранжевый, желтый и все их оттенки.

Градиент ― это постепенное цветовое изменение от тона к тону.

Прозрачность ― это степень прозрачности элемента, чем ниже этот показатель, тем прозрачнее элемент.

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

Контраст ― так называют разницу между двумя элементами, которые расположены рядом. Самые узнаваемые контрастные характеристики это, например, темный/светлый, толстый/тонкий, цветной/черно-белый и т. п.

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

Анимация ― моделирование движения с помощью быстрого появления изображений в определенной последовательности.

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

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

HTML (HyperText Markup Language, язык гипертекстовой разметки) ― это язык разметки веб-страниц. Для того, чтобы сообщать браузерам о том, каким именно образом должна выглядеть веб-страница, используют HTML. С его помощью можно обозначить, где именно должны располагаться основные элементы сайта: текст, изображения или видео. Также через HTML указывают источник стилей для элементов и скриптов, если это требуется. Этот язык является базовой технологией для создания сайтов, именно поэтому с ним знакомят любого начинающего веб-дизайнера. На сегодняшний день HTML-разметку использует абсолютно любой сайт.

CSS (Cascading Style Sheets, каскадные таблицы стилей) ― это языковое описание внешнего вида страницы. Его используют для того, чтобы указать, как именно должен выглядеть сайт на пользовательском экране: какого размера нужен шрифт, картинки, как будут выглядеть кнопки, какая будет анимация, каким образом продукт будет отображен на разных устройствах. От знания СSS зависит управление внешним видом сайта, поэтому дизайнеру нужно знать, как это работает.

WYSIWYG (Визивиг, «что вижу, то и получаю») ― такое название носят различные конструкторы сайтов. Одним из самых известных таких конструкторов является Tilda. Такие инструменты помогают пользователям создавать сайты самостоятельно, без применения каких-то специализированных знаний типа программирования. На таких сервисах просто есть специальные блоки, из которых можно сконструировать собственный сайт. Подходят для небольших проектов.

Google Analytics и Яндекс. Метрика ― это инструменты веб-аналитики, которые помогают получать наглядные отчеты, видеозаписи пользовательских действий, получать информацию об источниках трафика, его количественных показателях. Также эти сервисы помогают отслеживать и оценивать эффективность онлайн и офлайн рекламы.

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

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

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

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

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

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

API (Application Programming Interface) ― интерфейс программирования приложений. Он представляет собой набор инструкций и протоколов, которые позволяют программистам создавать приложения, которые могут взаимодействовать с другими приложениями и сервисами.

Lorem Ipsum (Текст рыба) ― это стандартный текст-заполнитель, который используется в дизайне и верстке для заполнения макетов, когда окончательный текст еще не готов. Он состоит из латинских слов и имеет случайное расположение, чтобы не отвлекать внимание от макета.

Microcopy (Микрокопия) ― это короткие текстовые сообщения, которые используются в интерфейсе приложения или веб-сайта для направления пользователя или предоставления информации. Они могут быть использованы для объяснения функций, подсказок, ошибок или любой другой информации, которая может быть полезна для пользователя.

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