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

WYSIWYG, HTML и CTA — расшифровываем аббревиатуры и изучаем новые термины, чтобы говорить на одном языке с UX/UI-дизайнером.

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

Общие термины

* Предлагаем вам также ознакомиться со словарем UX-дизайнера и изучить терминологию UI-специалиста.

CX

Customer experience — опыт покупателя. Так называют все взаимодействие клиента с компанией, включая UX, рекламу, контакт в социальных сетях, процесс продажи, ценовую политику, обслуживание и поддержку. Позитивный CX должен повысить лояльность к компании и сделать обычного клиента постоянным.

IxD

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

Эвристика

Эвристиками называют набор методов упрощающих решение пользовательских задач. Юзабилити-инженеры Якоб Нильсен и Рольф Молич создали свой метод эвристической оценки для проверки удобства программного обеспечения. Он состоит из 10 правил для создания удобного интерфейса и называется Эвристики Нильсена.

WYSIWYG

«What You See Is What You Get» — «что ты видишь, то и получаешь» или сокращенно WYSIWYG — редакторы, которые позволяют создавать и запускать сайты и приложения без написания кода. К самым популярным визивиг-сервисам относятся Tilda, Webflow, Bubble и Jimdo.

Лендинг

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

Шорткат

Горячие клавиши или Shotcut — это сочетание клавиш, которые выполняют определенную команду в приложении и ускоряют работу дизайнера. Например, комбинация Ctrl + Shift + 4 или Ctrl + G на MacOs позволяет увидеть или скрыть сетку в Figma, Ctrl + Alt + A и Cmd + Option + A на MacOs помогут выбрать все слои в Photoshop.

Эстимирование дизайна

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

Call to Action

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

Типографика

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

• Интерлиньяж: расстояние между строк
• Кегль: размер шрифта
• Гарнитура: набор шрифтов с общими чертами
• Трекинг: равный интервал между всеми символами в слове или предложении
• Кернинг: настройка интервала между конкретными символами
• Рубрикации: деление текста на смысловые блоки.

Организация рабочего процесса

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

* О возможностях для развития UX/UI-дизайнера и инструментах для карьерного роста мы рассказали здесь.

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

Тимлид

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

* Тимлид — это не профессия, а грейд. Подробнее об основных грейдах в IT читайте тут.

Ретроспектива

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

Спринт

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

Дизайн-система

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

Бэклог

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

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

Зеро-код

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

Iterative Design

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

Редизайн

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

• Evolution Site Redesign (ESR): эволюционный подход к разработке дизайна. После реализации сервиса компания регулярно собирает обратную связь пользователей и совершенствует отдельные фрагменты продукта.
• Revolution Site Redesign (RSR): кардинальная и, как правило, единоразовая переработка дизайна.

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

Дедлайн

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

Сториборд и раскадровка

Раскадровкой называется процесс создания сториборда — последовательности иллюстраций, которые отражают пользовательский путь. Составление детальных схем или скетчей в рамках сториборда — не обязательная задача UX/UI-дизайнера, но в некоторых компаниях метод раскадровки используется активно.

Брендбук

Так называют книгу-путеводитель по бренду — маркетинговый документ, содержащий руководство по тому, как использовать фирменный стиль, и описания позиционирования бренда. Брендбук совмещает в себе гайдлайн, описание целевой аудитории бренда, его tone of voice, логотип и прочие полезные материалы для разработки дизайна продуктов, связанных с компанией.

CRO

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

KPI

Key Performance Indicators или ключевыми показателями эффективности называют данные, которые позволяют оценить деятельность компании и полезность продукта или производительность отдельного исполнителя.

IT-термины, которые должен знать дизайнер

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

• Фронтенд: внешняя часть продукта, с которой происходит взаимодействия пользователя. Если UX/UI-дизайнер создает визуальный вид кнопки, ее расположение и продумывает ее функционал, то фронтенд-разработчик — пишет код, чтобы кнопка работала так, как задумал дизайнер.
• Бэкенд: серверная часть сайта или приложения, к которой могут относится базы данных, обработка запросов, генерация страниц, связь с платежными системами. Например, бэкенд отвечает за поиск информации после отправки запроса пользователем в поисковую строку и возврат этой информации.
• HTML или HyperText Markup Language: язык разметки, используемый для создания веб-страниц. HTML-коды с помощью тегов передают браузеру информацию о том, как должна выглядеть структура сайта, где и какие элементы страницы располагаются.
• CSS или Cascading Style Sheets: формальный язык, который описывает то, как должны выглядеть все элементы сайта: какого размера и стиля шрифт, какого цвета кнопки, как реагируют элементы на взаимодействие с ними.
• API или Application programming interface: программный интерфейс приложения, набор протоколов, благодаря которым разные утилиты взаимодействуют друг с другом и обмениваются данными. Например, Google Maps API позволяет интегрировать карты в различные приложения. Благодаря этой функции, пользователь интернет-магазина может выбрать пункт выдачи на карте, не покидая сайта магазина.
• DPI или Dots per inch: единица измерения разрешения изображения. Чем больше пикселей на дюйм, тем более детализированное изображение. Однако для оптимальной работы сайта или приложения DPI не должен быть слишком высок, иначе это повлияет на производительность сервиса.
• Pixel Perfect: метод верстки сайта по макету, при котором веб-разработчик переносит дизайн на веб-страницу или экран с точностью до пикселя.