UX/UI-дизайн

Материал из Вики Optimism
Перейти к навигации Перейти к поиску


UX/UI-дизайн это проектирование интерфейса цифрового продукта. UX (user experience) отвечает за сценарии, структуру и логику экранов. UI (user interface) отвечает за видимый слой: сетку, типографику, цвет, иконки, состояния кнопок и полей. Запись через косую черту закрепилась в коммерческих предложениях и сметах, хотя работы за ней стоят разные и результаты у них тоже разные.

Заказчик сайта встречает это слово в смете. Дальше начинается неприятное: строка «UX/UI-дизайн, 120 часов» не говорит ни о том, что приедет, ни о том, как это проверить. Статья разбирает предмет со стороны того, кто платит: из каких артефактов складывается работа дизайнера, зачем нужен каждый и по каким признакам его принимают.

Опора для разбора есть, и она не вкусовая. Процесс проектирования интерактивных систем описан международным стандартом ISO 9241-210, действующая редакция которого вышла в 2019 году второй версией и отменила редакцию 2010 года. В России действует ГОСТ Р ИСО 9241-210-2016, идентичный редакции 2010 года и введённый взамен ГОСТ Р ИСО 9241-210-2012. Стандарт устанавливает виды работ и принципы. Перечня файлов в нём нет, поэтому состав пакета остаётся предметом договора.

Лента из семи артефактов сверху вниз, справа напротив каждого признак приёмки, внизу рост стоимости правки по этапам и перечень мест, где приёмка срывается
Что заказчик получает на руки на каждом этапе и по какому признаку это принимают

Чем отличается от соседних понятий

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

Откуда взялось

Человеко-ориентированное проектирование выросло из эргономики, дисциплины о взаимодействии человека с техникой. Международный стандарт ISO 9241-210 закрепил подход в 2010 году, вторая редакция вышла в 2019 году. Российский ГОСТ Р ИСО 9241-210-2016 утверждён приказом Росстандарта от 2 ноября 2016 года и введён в действие с 1 декабря 2017 года.

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

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

Как это устроено

Что заказчик получает на руки

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

Артефакт Зачем он заказчику Что смотреть при приёмке
Карта пути пользователя шаги человека от первого касания до цели, с каналами и точками отказа. Подробнее: «Путь клиента» сегменты совпадают с реальной целевой аудиторией, а не с придуманной; названы источники данных по каждому шагу; отказы отмечены там, где их видно в веб-аналитике
Список пользовательских задач и требований переводит «хотим современный сайт» в проверяемые формулировки вида «клиент оформляет заказ без звонка» каждая задача сформулирована как действие человека, а не как элемент интерфейса; есть признак завершения
Вайрфрейм чёрно-белый каркас экрана: блоки, их порядок, объём текста, место кнопок. Оценивает структуру, пока графики нет на экране виден ответ на задачу из списка выше; порядок блоков объясним; текст реальный по объёму, без «Lorem ipsum»
Кликабельный прототип собранные вместе экраны, по которым можно пройти сценарий мышью или пальцем сценарий проходится без подсказок дизайнера; ветки ошибок и пустые состояния нарисованы; переходы ведут туда, куда обещают
Макеты под разные экраны вид страниц на конкретных размерах: мобильный, планшет, широкий монитор мобильная версия сделана отдельно, а не сжата из настольной; проверены длинные заголовки, длинные имена, пустые блоки
UI-кит библиотека элементов: кнопки, поля, списки, карточки, со всеми состояниями есть состояния наведения, нажатия, блокировки, ошибки и загрузки; названия совпадают с макетами
Дизайн-система правила, по которым собираются новые экраны без дизайнера: сетка, шкала отступов, типографика, токены цвета сторонний верстальщик собирает по ней экран, которого в макетах не было; правила записаны текстом

Прототип и макет решают разные задачи

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

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

Дизайн-система нужна не всем

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

Где срывается приёмка и чего стоит переделка

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

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

Где нашли дефект Во сколько дороже, чем на этапе требований
требования и архитектурное проектирование 1×
кодирование и модульные тесты 5×
интеграционное и системное тестирование 10×
бета-тест и первая обратная связь пользователей 15×
после выпуска 30×

Сам NIST помечает эту таблицу словами «только пример». Измеренные же исследования дают разброс шире: в работе Боэма 1976 года исправление на этапе анализа стоило 0,2 условной единицы против 15 на приёмочном тестировании, а в исследовании Базюка 1995 года дефект, найденный в эксплуатации, обходился в 470-880 раз дороже найденного на требованиях.

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

Вот шаги, на которых приёмка срывается чаще всего.

  1. Пропущен вайрфрейм. Работа начинается с отрисованной главной страницы, структура обсуждается задним числом.
  2. Согласование идёт по скриншотам в мессенджере. Версий становится много, последняя неизвестна никому.
  3. Критериев приёмки нет в договоре. Спор превращается в обмен вкусами, а решает его тот, кто громче.
  4. Новый согласующий появляется на финальном экране. Руководитель, которого не позвали к прототипу, отменяет структуру на макетах.
  5. Мобильная версия оставлена «на потом». Её собирают из настольной после вёрстки, и это худший момент из возможных. Google завершил переход на индексирование по мобильной версии 31 октября 2023 года.
  6. Права на исходники не оговорены. По статье 1296 Гражданского кодекса исключительное право на произведение, созданное по заказу, принадлежит заказчику, если договором не предусмотрено иное. Пункт 2 той же статьи оставляет подрядчику право использовать работу для собственных нужд.

Что делать на практике

  1. Назвать артефакты в техническом задании поимённо, с указанием, что считается сданным. Формулировка «дизайн главной и внутренних страниц» проверке не поддаётся.
  2. Разбить оплату по артефактам. Прототип принят, структура закрыта: возврат к ней идёт отдельной сметой.
  3. Требовать проход по сценарию на прототипе вместо показа экранов. Пройти его самому, без дизайнера рядом.
  4. Посадить за прототип пять человек из целевой аудитории и смотреть молча. Пять это нижняя граница, разбор в конце статьи.
  5. Проверить макеты на длинных данных: заголовок в двенадцать слов, фамилия в двадцать символов, пустая корзина, ошибка оплаты.
  6. Зафиксировать требования доступности, если у организации есть такая обязанность. Ориентиры: ГОСТ Р 52872-2019 на основе WCAG 2.1 и действующая редакция WCAG 2.2.
  7. Получить исходные файлы и права на них при закрытии этапа, до того как через год понадобится правка.
  8. Не смешивать приёмку дизайна с приёмкой скорости загрузки: тяжёлая графика решается на этапе макета, а измеряется уже на вёрстке.

Чем измеряют

Три показателя пригодности использования ГОСТ Р ИСО 9241-210-2016 берёт из стандарта ИСО 9241-11. Они же служат основой приёмки.

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

На практике это разворачивается в измеримые величины.

  • доля участников, завершивших задачу без помощи;
  • время на задачу и число ошибок по пути;
  • оценка по шкале SUS. По сводке Бэнгора, Кортума и Миллера за 2008 год на более чем 2300 анкетах из более чем 200 исследований средняя оценка составила 70,14 при медиане 75;
  • конверсия целевых действий, проверенная A/B-тестом после запуска;
  • соответствие критериям WCAG 2.2: в действующей редакции от 12 декабря 2024 года их 86, распределённых по уровням A, AA и AAA.

Частые ошибки

  • Приёмка по принципу «нравится или нет». Вкус согласующего заменяет задачу пользователя, и спорить с ним нечем.
  • Референсы вместо требований. Подборка чужих сайтов описывает настроение и ничего не говорит о сценариях.
  • Отрисовка только счастливого пути. Пустые состояния, ошибки и отказ оплаты достаются верстальщику.
  • Навигация, собранная из внутренней структуры компании. Человек ищет товар, а меню повторяет отделы. Помогает рабочая структура сайта, собранная под задачи людей.
  • Одна страница вместо системы. Главная сделана внимательно, внутренние собраны по остаточному принципу.

Ограничения и спорные места

Множители стоимости переделки измерены не на дизайне. Таблица NIST помечена как пример. Измеренные источники за ней относятся к дефектам программного обеспечения и телефонного оборудования, а к правкам макета отношения не имеют. Популярная схема «1:10:100», которую приводят в презентациях, восходит к цифрам, приписанным внутреннему учебному центру IBM: Лоран Боссави в разборе 2015 года показал, что опубликованного набора данных за ними нет. Для веб-дизайна публичного замера стоимости правки по этапам нет. Направление роста подтверждено стандартом, конкретные множители нет.

«Пяти пользователей достаточно» верно в среднем и опасно в частном случае. Модель Нильсена и Ландауэра 1993 года описывает обнаружение проблем как процесс Пуассона, откуда и растёт правило пяти. Фолкнер в 2003 году протестировала 60 человек и брала из них случайные пятёрки: одни находили 99% проблем, другие 55%. На десяти участниках худший результат поднялся до 80%, на двадцати до 95%. То есть пять это нижняя граница, а не достаточное число.

«Законы UX» ходят по отраслевым сайтам без ссылок на первоисточники. Проверять стоит, что именно измерял автор. Миллер в 1956 году писал о числе элементов, удерживаемых в кратковременной памяти, а не о длине меню; Коуэн в 2001 году пересмотрел предел до трёх-пяти элементов. Хик в 1952 году измерял время выбора при росте числа альтернатив. Это ближе к меню, но говорит о скорости выбора, не о допустимой длине списка.

Российский стандарт отстаёт от международного на одну редакцию. ГОСТ Р ИСО 9241-210-2016 идентичен ISO 9241-210:2010, тогда как ISO с 2019 года действует во второй редакции. Ссылка на ГОСТ в договоре корректна, но не эквивалентна ссылке на текущий ISO.

Стандартного перечня артефактов не существует. ISO 9241-210 требует видов деятельности. Файлов он не перечисляет. Поэтому состав пакета и названия документов у двух подрядчиков разойдутся, и сверять надо не терминологию, а то, на какой вопрос отвечает каждый файл.

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

Что здесь быстро устаревает

  • Редакции стандартов: ISO 9241-210, ГОСТ Р ИСО 9241-210, WCAG. Проверять номер редакции и дату введения.
  • Число критериев WCAG и распределение по уровням меняется с версией.
  • Требования поисковых систем к мобильной версии и к скорости.
  • Состав инструментов проектирования и их доступность для российских команд.

См. также

Источники

  1. ISO. ISO 9241-210:2019 «Ergonomics of human-system interaction. Part 210: Human-centred design for interactive systems». Вторая редакция, отменяет и заменяет ISO 9241-210:2010. Каталог стандартов, сверено 11.09.2026. https://www.iso.org/standard/77520.html
  2. ГОСТ Р ИСО 9241-210-2016 «Эргономика взаимодействия человек-система. Часть 210. Человеко-ориентированное проектирование интерактивных систем». Утверждён и введён в действие приказом Федерального агентства по техническому регулированию и метрологии от 2 ноября 2016 г. № 1581-ст, дата введения 1 декабря 2017 г., идентичен ИСО 9241-210:2010, введён взамен ГОСТ Р ИСО 9241-210-2012. Текст стандарта, сверено 11.09.2026. https://www.frcds.ru/wp-content/uploads/2024/08/GOST-R-ISO-9241-210-2016.pdf
  3. NIST. Tassey G. The Economic Impacts of Inadequate Infrastructure for Software Testing. Planning Report 02-3, май 2002. Таблица 1-5 (исследования Боэма 1976 и Базюка 1995) и таблица 5-1. https://www.nist.gov/document/report02-3pdf
  4. Bossavit L. The Leprechauns of Software Engineering. Leanpub, 2015. Разбор происхождения кривой стоимости дефекта. https://leanpub.com/leprechauns
  5. Nielsen J., Landauer T. K. A mathematical model of the finding of usability problems // Proceedings of INTERCHI '93. ACM, 1993. С. 206-213. https://dl.acm.org/doi/10.1145/169059.169166
  6. Faulkner L. Beyond the five-user assumption: Benefits of increased sample sizes in usability testing // Behavior Research Methods, Instruments, & Computers. 2003. Т. 35, № 3. С. 379-383. https://link.springer.com/article/10.3758/BF03195514
  7. Miller G. A. The magical number seven, plus or minus two: some limits on our capacity for processing information // Psychological Review. 1956. Т. 63, № 2. С. 81-97. https://psychclassics.yorku.ca/Miller/
  8. Cowan N. The magical number 4 in short-term memory: A reconsideration of mental storage capacity // Behavioral and Brain Sciences. 2001. Т. 24, № 1. С. 87-114. https://www.cambridge.org/core/journals/behavioral-and-brain-sciences/article/abs/magical-number-4-in-shortterm-memory-a-reconsideration-of-mental-storage-capacity/44023F1147D4A1D44BDC0AD226838496
  9. Hick W. E. On the rate of gain of information // Quarterly Journal of Experimental Psychology. 1952. Т. 4, № 1. С. 11-26. https://journals.sagepub.com/doi/10.1080/17470215208416600
  10. Bangor A., Kortum P. T., Miller J. T. An Empirical Evaluation of the System Usability Scale // International Journal of Human-Computer Interaction. 2008. Т. 24, № 6. С. 574-594. https://www.tandfonline.com/doi/abs/10.1080/10447310802205776 Числа сводки приведены по обзору: Orfanou K., Tselios N., Katsanos C. Perceived Usability Evaluation of Learning Management Systems // International Review of Research in Open and Distributed Learning. 2015. Т. 16, № 2. https://files.eric.ed.gov/fulltext/EJ1061142.pdf
  11. W3C. Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation, 12 декабря 2024. https://www.w3.org/TR/WCAG22/
  12. ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности». Утверждён приказом Росстандарта от 29 августа 2019 г., введён в действие с 1 июня 2020 г., разработан на основе WCAG 2.1. Гарант, сверено 11.09.2026. https://base.garant.ru/73664694/
  13. КонсультантПлюс. Гражданский кодекс Российской Федерации, часть четвёртая, статья 1296 «Произведения, созданные по заказу». Сверено 11.09.2026. https://www.consultant.ru/document/cons_doc_LAW_64629/e1a2a66199f94c314b8613a44d2abbad7203f7ee/
  14. Google Search Central. Mobile-first indexing has landed. 31 октября 2023. https://developers.google.com/search/blog/2023/10/mobile-first-is-here


Смотрите также

Источник — https://wiki.optimism.ru/index.php?title=UX/UI-дизайн&oldid=5235