«Пинч при долгом тапе»: как и зачем команде понимать дизайнера

Привет, VC! Меня зовут Ольга Смирнова, я UX-редактор в Lamoda Tech. Сегодня поговорим о языковом барьере между дизайнерами и другими специалистами — такой феномен часто встречается в продуктовых командах. Когда новый «игрок» присоединяется к команде — будь то продакт-менеджер, UX-редактор, исследователь или даже начинающий дизайнер — он может столкнуться с непонятной терминологией. Фразы вроде «Вот тут червяки странно смотрятся» способны поставить в тупик любого.

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

От английского bubble — пузырь. Это форма графического элемента со скругленными углами.

Бабл пришел в графический дизайн в значении speech bubble — «пузырь речи», то есть округлый графический элемент, в котором в комиксах располагают речь героев. После похожие баблы стали использовать в мессенджерах, чтобы оформить реплики участников чата.

С английского button — кнопка.

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

От английских guide + line, что в сумме означает «ориентир».

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

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

Design System, или DS — с английского так и переводится, «дизайн-система».

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

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

От английского disabled — запрещенный, неполноценный.

Это такое состояние графического элемента, когда он не кликабелен, то есть нажать на него не получится. Часто на таком элементе текстом пишем причину, по которой элемент задизейблен. На картинке ниже — корзина, но привычная кнопка «Оформить заказ» задизейблена, потому что ни один товар не выбран для оформления.

От английского input — вводить.

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

Quick view происходит от английского «быстрый просмотр».

Тут все просто — означает быстрый просмотр страницы продукта.

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

Изменения в компоненте возможны только после обсуждения с командой дизайн-системы. Компонент на картинке — кнопки из сторис Lamoda.

От английского core — «основной».

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

От английского layout — план, схема, макет.

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

От английского navigation bar — панель навигации.

Графический элемент внизу приложения для перехода между разделами.

От английского overlay — наложение.

Затемнение графических элементов или всего экрана. Например, когда по середине экрана появляется диалоговое окно, весь остальной экран затемняется, это затемнение и есть оверлей.

Pups — это пункты выдачи заказов (ПВЗ). Сокращение от Pick Up Points.

От английского to pinch, что значит «ущипнуть». И, кстати, собаки-пинчеры — это «собаки-кусаки», которых выводили для ловли крыс.

Пинч — элемент управления, предполагающий одновременное щипковое движение двумя пальцами по экрану или тачпаду. Это то, как мы увеличиваем и уменьшаем картинки.

От английского primary — начальный, первый.

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

Это аббревиатура от английского product page, что значит «продуктовая страница», то есть страница товара.

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

Я тоже думала, что это про правильное питание, но нет.

Редакционная политика — это свод законов о том, как наш продукт говорит и пишет. Здесь все: от Tone of voice до размера тире, от правил местной пунктуации до условий написания точек в «ё», от текстов для кнопок до «выканья» и «тыканья». Редакционная политика у нас входит в дизайн-систему, что логично: графические элементы и текст вместе создают макеты — то, как в итоге выглядят экраны продукта.

С английского suggest — предлагать.

Это готовые шаблонные варианты запросов, которые можно выбрать и применить одним прикосновением.

От английского secondary — вторичный.

Это такое графическое состояние элемента, когда он выделен не так ярко как праймери и меньше привлекает внимание, потому что содержит второе по популярности и важности действие на этом экране. На картинке ниже «Заменить промокод» — секондари кнопка.

От английского toast — про хлебный тост из тостера, который выскакивает, когда готов.

Всплывающее сообщение, которое через короткое время самостоятельно исчезает.

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

От английского tap — «легкий удар».

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

Слова toggle и switch c английского переводятся примерно одинаково — рычаг, переключатель, выключатель.

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

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

От английского flow — поток. Здесь используется в значении «движение по пути».

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

От английского hover — зависать.

Это такое состояние графического элемента, когда на него уже навели курсор, но еще не нажали. На картинке ниже таб «Детям» сначала показан в обычном положении, а ниже — в состоянии ховера: в следующее мгновение откроется вкладка «Детям».

С английского check out — «проверять».

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

Checkbox переводится как «флажок», иногда этот элемент так и называют.

Дословно check+box = отметить галкой/проверить + коробка/прямоугольник.Чекбокс — это элемент выбора, с помощью которого можно отметить один или несколько нужных вариантов. Если нужно выбрать только один из предложенных вариантов, чекбокс чаще называют радиобаттоном или радиокнопкой.

Это редкое название графического элемента, наши новенькие дизайнеры узнают его только в Lamoda.

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

На картинке ниже разделы каталога на черном фоне находятся в червяках. Еще у такого элемента может быть название «инлайн-фильтр» и «хот-линк».

От английского chips, что значит «фишки».

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

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

Это английская аббревиатура от unique selling proposition, то есть «уникальное торговое предложение». То, что должно выгодно отличать предложение нашего продукта от предложений конкурентов. Русский аналог — УТП. Скорее маркетинговый термин, но тоже звучит в дизайнерской тусовке.