«Пинч при долгом тапе»: как и зачем команде понимать дизайнера
Привет, Хабр! Меня зовут Ольга Смирнова, я UX-редактор в Lamoda Tech. Работая в продуктовой команде, я наблюдаю, как новые участники сталкиваются с незнакомой терминологией, которую используют дизайнеры. Продакт-менеджер, UX-редактор, исследователь или начинающий дизайнер могут потратить многоо времени, чтобы вникнуть во все понятия.
Чтобы помочь всем, кто сталкивался с подобной ситуацией, я создала небольшой русско-дизайнерский разговорник на основе реального словаря, которым пользуются продуктовые дизайнеры Lamoda. Здесь собраны значения всех ключевых терминов при работе с дизайнерами. Поэтому если вы хотите понимать их с первого раза, эта статья для вас.
Бабл
От английского bubble — пузырь.
Это форма графического элемента со скругленными углами. Бабл пришел в графический дизайн в значении speech bubble — «пузырь речи», то есть округлый графический элемент, в котором в комиксах располагают речь героев. После похожие баблы стали использовать в мессенджерах, чтобы оформить реплики участников чата.
Баттон
От английского button — кнопка.
Кнопка — это элемент интерфейса, который сообщает о действии пользователя. В UX-редактуре мы говорим так: заголовки и подзаголовки — это речь продукта/приложения, а кнопка — реплика пользователя, его решение о действии или его выражение эмоций. Например, кнопки «Добавить в корзину» или «Понятно».
Гайдлайн
От английских guide + line, что в сумме означает «ориентир».
В нашем случае гайдлайн — это ориентир к тому, как правильно использовать фирменный стиль: шрифты, цвета и прочее. Такой документ создают в командах дизайна и маркетинга, используют во внутренней работе и делятся с аутсорсерами, когда выдают им техническое задание.
Дизайн-день
Это особый день, когда дизайнеры занимаются не рутинными задачами «по списку», а пускаются в творчество. Они могут придумать, как улучшить флоу и нарисовать экраны для этого, могут проанализировать целый блок функционала с точки зрения юзабилити и графической консистентности, отметить предложения/замечания и даже провести исследование. Наши ребята в дизайн-день также готовят лекции и мастер-классы, занимаются самообразованием.
Дизайн-система
Design System, или DS — с английского так и переводится, дизайн-система.
На ней основан продуктовый дизайн в компании. Это не теоретический документ, а фундаментальная библиотека, которой дизайнеры пользуются ежедневно. Сюда входят все компоненты дизайна для разных платформ, библиотеки иконок и картинок, токены, интерфейсная редполитика и правила разработки элементов интерфейса.
Дизайн-система — живой организм, она постоянно развивается и дорабатывается командой супергероев.
Задизейблен
От английского disabled — запрещенный, неполноценный.
Это такое состояние графического элемента, когда он не кликабелен, то есть нажать на него не получится. Часто на таком элементе текстом пишем причину, по которой элемент задизейблен. На картинке ниже — корзина, но привычная кнопка «Оформить заказ» задизейблена, потому что ни один товар не выбран для оформления.
Инпут
От английского input — вводить.
Поле для ввода текста. Часто внутри этого поля или над ним есть подсказка, что именно нужно ввести.
Квик вью
QV, guick view переводится с английского как быстрый просмотр.
Тут все просто — означает быстрый просмотр страницы продукта.
Компонент
Это элемент дизайн-системы, характеристики которого обговорены и зафиксированы. У него четко ограничены параметры, цвета и размеры. Компоненты — это баннеры, кнопки, элементы фильтров и прочее. При создании новых макетов компонент просто берут из библиотеки и переиспользуют.
Изменения в компоненте возможны только после обсуждения с командой дизайн-системы. Компонент на картинке — кнопки из сторис Lamoda.
Кор-аудитория
От английского core — основной.
Это основная целевая аудитория продукта. Этот термин чаще используют наши исследователи, но он звучит и в работе дизайнеров.
Лэйаут
От английского layout — план, схема, макет.
Это сетка, по которой расположены элементы на экране с заданными расстояниями и параметрами. Еще есть автолэйаут — это зафиксированная сетка, расположение элементов на которой сохраняется даже при увеличении разрешения.
Навбар
От английского navigation bar — панель навигации.
Графический элемент внизу приложения для перехода между разделами.
Оверлeй
От английского overlay — наложение.
Затемнение графических элементов или всего экрана. Например, когда по середине экрана появляется диалоговое окно, весь остальной экран затемняется, это затемнение и есть оверлей.
Папс
Pups, сокращение от Pick Up Points — это пункты выдачи заказов (ПВЗ).
Пинч
От английского to pinch, что значит ущипнуть. И, кстати, собаки-пинчеры — это «собаки-кусаки», которых выводили для ловли крыс.
Пинч — элемент управления, предполагающий одновременное щипковое движение двумя пальцами по экрану или тачпаду. Так мы увеличиваем и уменьшаем картинки.
Праймери
От английского primary — начальный, первый.
Это такое графическое состояние элемента, когда он ярко выделен и привлекает внимание, потому что содержит целевое действие и должен быть заметен в первую очередь. На картинке ниже «Применить промокод к корзине» — праймери кнопка.
Пэпэ, ПП, PP
Это аббревиатура от английского product page, что значит продуктовая страница, то есть страница товара.
Вы нашли интересный товар в каталоге, нажали на его карточку и теперь находитесь на странице с каруселью фото, информацией о составе, отзывами — вы «на пэпэ». Я тоже сначала думала, что это про правильное питание, но нет.
Редполитика
Редакционная политика — это свод законов о том, как наш продукт говорит и пишет. Здесь все: от tone of voice до размера тире, от правил местной пунктуации до условий написания точек в «ё», от текстов для кнопок до «выканья» и «тыканья». Редакционная политика у нас входит в дизайн-систему, что логично: графические элементы и текст вместе создают макеты — то, как в итоге выглядят экраны продукта.
Саджесты
От английского suggest — предлагать.
Это готовые шаблонные варианты запросов, которые можно выбрать и применить одним прикосновением.
Секондари
От английского secondary — вторичный.
Это такое графическое состояние элемента, когда он выделен не так ярко как праймери и меньше привлекает внимание, потому что содержит второе по популярности и важности действие на этом экране. На картинке ниже «Заменить промокод» — секондари кнопка.
Снекбар/тост
От английского toast — про хлебный тост из тостера, который выскакивает, когда готов.
Всплывающее сообщение, которое через короткое время самостоятельно исчезает.
Таб
Прямой перевод английского слова tab — вкладка. Вкладки нужны для быстрого переключения между разделами «по тапу». А про тап далее есть отдельное пояснение.
Тап
От английского tap — легкий удар.
Элемент управления, одиночное касание экрана или тачпада. А если у вас мышка — речь про клик левой кнопкой. Двойной тап — касание экрана дважды. А еще есть долгий тап — это когда нажали и держим.
Тоггл/cвитч
Слова toggle и switch c английского переводятся примерно одинаково — рычаг, переключатель, выключатель.
В интерфейсе это элемент, который помогает включить/отключить какие-то опции, выбрать один из вариантов.
Токен
Токен в дизайне — это одно из уникальных имен переменной (например, цвета) в дизайн-системе. Используется для того, чтобы не перекрашивать макеты для темной и светлой темы вручную, немного автоматизировать всю систему. Токены меняются автоматически, если меняется та переменная, к которой они все привязаны.
Флоу/флоу пользователя
От английского flow — поток. Здесь используется в значении «движение по пути».
Флоу пользователя — это порядок его действий в приложении от входа и регистрации до выполнения целевого действия. Флоу еще можно назвать сценарием. Вариантов флоу при пользовании приложением множество, и каждый из них должен быть логичен и интуитивно понятен.
Ховер
От английского hover — зависать.
Это такое состояние графического элемента, когда на него уже навели курсор, но еще не нажали. На картинке ниже таб «Детям» сначала показан в обычном положении, а ниже — в состоянии ховера: в следующее мгновение откроется вкладка «Детям».
Чекаут
От английского check out — проверять.
Это часть функциональности, где клиент проверяет и оформляет заказ, выбирает способ и дату доставки, переходит к оплате.
Чекбокс
Checkbox переводится как флажок, иногда этот элемент так и называют.
Дословно check + box это отметить галкой/проверить + коробка/прямоугольник.
Чекбокс — это элемент выбора, с помощью которого можно отметить один или несколько нужных вариантов. Если нужно выбрать только один из предложенных вариантов, чекбокс чаще называют радиобаттоном или радиокнопкой.
Червяки
Это редкое название графического элемента, наши новенькие дизайнеры узнают его только в Lamoda.
Червяки — это графический элемент, который отражает дерево каталога, то есть его разделы. По нажатию на один из червяков мы переходим в выбранный раздел каталога, то есть в приложении происходит активное действие. В целом такой элемент можно было бы назвать кнопкой, но ставить столько кнопок подряд обычно не принято.
На картинке ниже разделы каталога на черном фоне находятся в червяках. Еще у такого элемента может быть название «инлайн-фильтр» и «хот-линк».
Чипсы
От английского chips, что значит фишки.
Чипсы — форма графического элемента. Позволяет двигаться по продукту и выбирать нужный вариант, нажимая на сам текст варианта (а не на элемент рядом). Попасть по целому тексту в мобильном приложении проще, чем расставить мелкие галочки или двигать переключатели. Червяки, которые были описаны выше, находятся в чипсах.
Хлебные крошки
Элемент навигации, отображающий путь, по которому пользователь пришел на ту страницу, где находится.
ЮЭсПи
Это английская аббревиатура от USP, unique selling proposition, то есть «уникальное торговое предложение». То, что должно выгодно отличать предложение нашего продукта от предложений конкурентов. Русский аналог — УТП. Скорее маркетинговый термин, но тоже звучит в дизайнерской тусовке.
