Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>29 сен 2022</li>

3 <li>0</li>

4 </ul>Объясняем значения девяти слов, которые используют в профессии.

5 Фото: Georgijevic / Getty Images

6 Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.

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

8 Объясняем девять терминов, которые важны в работе UX-дизайнера.

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

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

11 Дверная ручка - интерфейс взаимодействия с дверьюФото: ckbacteria / ShutterstockПедаль - интерфейс взаимодействия со швейной машинкойФото: Kate Fokin / ShutterstockСайт - интерфейс взаимодействия с компьютеромИзображение: Natalya Nikolaeva /<a>Behance</a>Черновой дизайн будущего сайта или приложения. Он выглядит как простой серый макет, в котором показано, где и какие элементы интерфейса должны быть. Дизайнеры его делают, чтобы показать, что будет представлять из себя проект.

12 В варфрейме нет интерактивности, но показана основная группа контента, структура блоков, навигация и базовая визуализация взаимодействия пользователя с интерфейсом.

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

14 Пример варфреймаИзображение: SHINPURU / Лиза Бредня /<a>Behance</a>Пример варфреймаИзображение: SHINPURU / Лиза Бредня /<a>Behance</a>Черновой вариант продукта, который помогает посмотреть на него в целом и заметить ошибки в сценарии использования, если их не получилось учесть на этапе проектирования. Обычно прототип делают с готовым дизайном, либо на основе варфрейма.

15 Раньше прототипы делали программисты. Сейчас это можно сделать прямо в Figma и без разработчиков.

16 Скриншот: Skillbox MediaО том, как делать прототипы в Figma, читайте в нашей серии статей:

17 Структурирование контента на сайте или в приложении. Её используют, чтобы проследить, сможет ли пользователь легко найти нужную информацию.

18 Основные компоненты информационной архитектуры:

19 <ul><li>Система организации - группы или категории, по которым разделена информация.</li>

20 <li>Система маркировки - способы представления данных.</li>

21 <li>Системы навигации - то, как пользователи перемещаются по сайту.</li>

22 <li>Поисковые системы - с помощью чего пользователи будут искать информацию.</li>

23 </ul>Информационная архитектура фитнес-центраИзображение: Vinayag4u ❤ /<a>Behance</a>Обычно информационную архитектуру используют только в больших проектах - где сложно отследить путь пользователя по макету или варфрейму. В небольшом сайте или приложении можно обойтись и без подробного описания этой архитектуры.

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

25 <ul><li>На уровне взаимодействия с продуктом. Например, когда служба поддержки гоняет пользователя от одного специалиста к другому.</li>

26 <li>На уровне пути клиента. Например, когда пользователь заказал товар в интернет-магазине и ему предлагают ждать его три месяца.</li>

27 <li>На уровне отношений. Например, когда клиент заплатил за сервис, чтобы не смотреть рекламу, но её всё равно продолжают ему показывать.</li>

28 </ul>При выборе страны для отпуска у пользователя может возникнуть боль - он не сможет узнать цену за номер без тщательного поиска и изучения отдельных городов. Airbnb решает проблему на карте - показывает средний ценник жилья в городах и регионах на карте мираСкриншот: Skillbox MediaТехнология, которая отслеживает и записывает движение глаз. Для этого используют айтрекер - специальный прибор, который следит за перемещениями глаз. Айтрекер выдаёт видеозапись движения глаз, статистику и визуализации: тепловые карты и графики фиксаций взгляда.

29 Устройства для айтрекингаФото:<a>SR Research Ltd.</a>Устройства для айтрекингаФото: Wikimedia CommonsПримерно в таком виде дизайнер получит результат айтрекингаСкриншот: Skillbox MediaАйтрекинг применяют для UX-исследований сайтов и мобильных приложений, чтобы выявить проблемы пользовательского опыта. Например, в результате такого исследования можно понять, видят ли пользователи ключевые кнопки в интерфейсе и легко ли их найти.

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

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

32 Исследование проводят как в онлайн-режиме, так и офлайн с бумажными карточками.

33 Есть три типа карточек для сортировки:

34 <ul><li>закрытые ― название каждого объекта подписано;</li>

35 <li>открытые ― когда участникам предлагают самим подписать карточки;</li>

36 <li>гибридная ― когда часть карт подписана, а часть нет, или участники исследования могут добавлять свои карточки к уже подписанным.</li>

37 </ul>Фото: Saurav Pandey /<a>UX Design</a>Метод исследования, при котором две версии концепции продукта, веб-страницы или мобильного приложения оценивают разные пользователи, выбранные случайным образом. При этом каждую версию тестирует одинаковое число респондентов. Результаты такого исследования позволяют определить, какой вариант работает лучше. Для сайта это может быть коэффициент конверсии или показатель отказов, для концепции ― оценки привлекательности или релевантности.

38 A/B-тестирование обычно используют на последних этапах разработки, когда есть две основных версии продукта. Если их больше, такое тестирование называют многовариантным.

39 Как мог бы тестироваться стартовый экран приложения BusinessСкриншот: Skillbox MediaТестирование, при котором продуктом или функцией пользуются реальные люди. Это помогает выявить технические ошибки, недочёты, сбои и другие проблемы, которые не удалось обнаружить во время внутреннего тестирования.

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

41 Бета-запуск может быть открытым и закрытым. Открытый - когда продуктом или функцией может пользоваться кто угодно. Закрытый - только по приглашениям. Также закрытый бета-запуск могут называть альфа-запуском.

42 Приложение World Class с бета-версией для города СолнечногоСкриншот: Skillbox MediaПояснения и примечания к элементам макетов интерфейса или связанным с ними взаимодействиям. Вот примеры элементов интерфейса, которым обычно добавляют аннотации:

43 <ul><li>идентификаторы и иконки - на случай, если пользователь не поймёт картинку;</li>

44 <li>иллюстрации и видео - для незрячих людей;</li>

45 <li>правила взаимодействия;</li>

46 <li>направления взаимодействия;</li>

47 <li>правила процессов;</li>

48 <li>сообщения об ошибках.</li>

49 </ul>Аннотации следует формулировать кратко и лаконично, а все пояснения должны быть предельно чёткими и однозначными. Например, в пояснении к чекбоксу может быть написано: "При выборе этого действия будет отображаться домашняя страница". А в пояснении к иконке - "Добавить комментарий":

50 Аннотация с пояснением к иконке в Google DriveСкриншот: Skillbox MediaАннотация с пояснением к волшебной палочке в Adobe PhotoshopСкриншот: Skillbox MediaК аннотациям следует относиться осторожно, потому что люди читают их очень редко. Лучше, если ваш интерфейс понятен пользователю даже без чтения дополнительных пояснений.

51 Больше о дизайне интерфейсов

52 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>