Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
UX/UI-дизайн - это эффективные инструменты проектирования любого вида пользовательского интерфейса, где наличествует два основных критерия: удобство взаимодействия и внешний вид. Основная задача инструментов состоит в том, чтобы продать потенциальному клиенту товар или услугу через пользовательский интерфейс. Поэтому его визуальная часть должна располагать к себе человека, а механизм работы должен быть интуитивно понятен, с наличием определенных инструкций и подсказок к дальнейшим действиям.
UX-/UI-дизайн: что это такое
Несмотря на то, что основная задача у них одинаковая, - повысить эффективность работы веб-ресурса в целом и уровень продаж товаров и услуг в частности, это разные понятия с отличными друг от друга функциями. В то же время они тесно связаны и редко применяются по отдельности. Чтобы разобраться, что же значат и какие способы применения имеют данные инструменты, необходимо узнать, для чего предназначен каждый из них, его возможности и способы применения.
UI-дизайн и его виды
Начать следует с UI. Он представляет собой интерфейс, предназначенный для обеспечения передачи максимально полной информации: от программных компонентов сайта до пользователя-человека. Проще говоря, интерфейс пользователя - это связующее звено, посредством которого аудитория веб-ресурса контактирует с программным обеспечением.
UI служит для достижения нескольких задач: во-первых, для создания интерактивных элементов управления, где посетитель сайта может самостоятельно управлять системой, нажимая на кнопки, переходя в разделы и т.д. Во-вторых, для отдачи на действия пользователя, то есть демонстрации системы того, что осуществляемые действия находят корректный и быстрый способ реализации.
Именно для этих целей служит UI-дизайн: его главная задача состоит в реализации удобных условий взаимодействия человека с системой, создавая интуитивно понятную и эффективную модель. Примером идеального решения считается вариант, при котором человеку нужно совершить минимальное количество усилий, будь то клики, ввод текста или переходы по разделам. Желаемый результат при этом получается в кратчайшее время. Существует множество различных типов. Однако основная часть представлена в следующих видах:
- Графическая оболочка управления (ГОУ). Здесь человек имеет доступ ко всем видимым на мониторе элементам с целью управления ими. Осуществляется это посредством устройства ввода: клавиатура или мышь.
- Совокупность веб-страниц. Через них происходит взаимодействие с веб-ресурсом. Они могут выполняться на основе программ, программных платформ или языков программирования.
- Сенсорные экраны. Это специальные экранные устройства для ввода информации при помощи пальцев или стилуса.
При разработке UI ориентируются на следующие параметры:
- Самые главные элементы помещаются на видном месте и отмечаются крупным, красивым шрифтом.
- Минимизация направляющих элементов, а также их выравнивание (по краю или центру), чтобы интерфейс был более приятен для визуального восприятия.
UI - это работа по внедрению простых, удобных и в то же время эффективных способов взаимодействия целевой аудитории с конечным продуктом. Важная часть работы здесь заключается в наблюдении, сборе и анализе данных поведения посетителей сайта, на основе которых в дальнейшем принимаются ответственные решения. Важным инструментами специалистов по пользовательскому интерфейсу являются такие программы, как Photoshop , Adobe Illustrator , Cinema 4D и прочие виды графических редакторов.
Что такое UX-дизайн
Данный раздел проектирования представляет собой многогранную концепцию, которая вбирает в себя огромное множество различных дисциплин: от интерактивного и визуального оформления до usability, то есть способности веб-ресурса быть понимаемым и привлекательным для пользователя в заданных условиях. Основы UX-дизайна как опыта взаимодействия человека с системой носят исключительно субъективный характер, поскольку он связан, прежде всего, с индивидуальными предпочтениями огромного количества людей. Из-за этого тенденции в данной сфере постоянно меняются. Главными аспектами разработки качественного продукта являются:
- Usability, то есть удобство пользования и эргономичность. Здесь необходимо минимизировать количество шагов, которые человек должен совершить для получения желаемого результата.
- Характеристика среднестатистического пользователя. Необходимо знать свою аудиторию и цели, для которых используется веб-ресурс.
- Формы и функции. Если стоит выбор: сделать красивую схему или верстку, но пожертвовать функциональностью либо отдать предпочтение функции в ущерб внешнему виду, всегда отдается предпочтение второму варианту - функциональность играет здесь главную роль.
- Интуитивно понятный интерфейс. Люди в интернете не любят, когда им предлагают слишком запутанный в использовании продукт. UX-дизайн должен расшифровывать человеку алгоритм действий, который он должен выполнить.
Создание UX начинается с анализа и выработки единой характеристики среднестатистического пользователя. На основе полученной информации разработчик может создать индивидуальные требования к проекту. На следующем этапе специалисты занимаются созданием, организацией и оформлением информационной архитектуры таким образом, чтобы человек мог сразу понять принцип работы интерфейса и отличить, где главные компоненты, а где - второстепенные. Далее идет процесс предопределения будущего интерфейса ресурса и удобство его использования. Как правило, данный этап проводится еще до написания кода.
Основные отличия UX- и UI-дизайна
Как уже отмечалось, на практике довольно трудно отличить эти два понятия - в разработке web-ресурса они довольно тесно связаны. Очень часто пользовательский интерфейс и опыт выступают в качестве элементов, которые входят друг друга. В максимально упрощенной схеме их отличия выражаются в следующем: UX - это внешний вид объекта, а UI - то, как он функционирует. На практике отличить одно от другого можно по следующим примерам UX- и UI-дизайна:
- Если человек видит хорошо выстроенную внутреннюю структуру, оформление информации и построение иерархии элементов таким, чтобы посетитель сайта мог легко определить, где главное, а где второстепенное - это UX.
- Когда подсвечиваются ссылки, по которым уже был осуществлен переход, результаты выдачи в поисковой строке расположены через отступ по отношению друг к другу, а возможность открыть раздел «Корзина» в интернет-магазине доступна на любой странице - это UI.
В первом случае главная цель специалиста состоит в том, чтобы обеспечить комфортное взаимодействие аудитории сайта с программным обеспечением, второй вариант подразумевает, чтобы иконки, кнопки, надписи, картинки и общий стиль оформления были максимально удобны и визуально приятны.
Полезные книги по UX- и UI-дизайну
Стать хорошим специалистом в данной сфере очень тяжело: необходимо иметь теоретические знания, практические навыки и постоянно быть в курсе последних тенденций и изменений рынка. У профессионалов есть собственные способы изучения предмета - книги известных дизайнеров. Список полезной литературы довольно широк. Но чтобы получить базовые знания, необходимо прочитать:
«100 главных принципов дизайна. Как удержать внимание» автора Сьюзан Уэйншенк. Это набор нескучных и эффективных правил.
«Smashing UX Design». Несмотря на то, что книга по UX-дизайну предназначена для специалистов, они многому научит новичков. В частности, здесь представлены принципы организации рабочих процессов.
На вопрос, в чем же разница между UX-дизайнером и UI-дизайнером, любят отвечать через отрицание. Знаете, такой литературный прием. Вроде «UX - это не про интерфейс, не про графический дизайн, это не юзабилити, не аналитика, не прототип». Сегодня коротко показываем разницу, рассказываем историю появления терминов и объясняем, почему два понятия даже спустя столько лет с такой охотой сливают в одно - UX/UI.
Коротко про разницу
UI-дизайнер (user interface) - это дизайнер интерфейсов в идеальной среде, который рисует кнопочки, иконочки, формы, подбирает шрифты и делает из всего гармоничный и красивый макет. Сайта, приложения, хоть чего, с чем будет взаимодействовать пользователь - хоть экрана вокзального терминала. И больше ни о чем не думает.
UX-дизайнер (user experience) - это не дизайнер, а проектировщик (просто в английском слово designer имеет как раз второе значение). Он изучает потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на живых людях, пишет ТЗ на дизайн. Другими словами, это такой инженер-маркетолог: на входе аналитика, на выходе принципы создания интерфейса, логика работы, компоновка, контент. Рисования как такового он не касается.
Вот и всё.
Зачем нужно было всё усложнять
Как было раньше: дизайнеру поступало задание «нарисовать сайт». Все сайты были более-менее одинаковыми: главная, о компании, каталог, далее по списку. Дизайнер спрашивал: «а когда нам контент дадут?». Никогда, товарищ дух, это армия.
И дизайнер назывался просто «дизайнер». Без заморских приставок.
Как стало потом: агентства захотели получать больше денег, а мир постепенно начал переход от «просто сайтов» к сложным веб-сервисам. А сервис - это не только уникальный интерфейс, это еще и стоящий за ним особый бизнес-процесс. Например, вспомните сайт Airbnb - без глубокого изучения предмета ни один графдизайнер не смог бы сходу сделать интерфейс.
Раз работы стало больше, возникла надобность разделить одну профессию на несколько. Теперь UX-специалист (будем называть его так, чтобы не было путаницы) исследовал и проектировал информационную архитектуру, прототипист делал функциональную часть, а графический (UI) дизайнер создавал конечный продукт: современный и приятный глазу.
То же самое уже было в отрасли. Например, просто «программистов» разделили на «фронтенд» и «бэкенд». А фронтендеров на истинных фронтендеров и «просто верстальщиков». Кстати, .
Причина всегда одна: одного человека не хватает на большой процесс. Едем дальше.
Кто такой UX/UI-дизайнер
Что весело: в вакансиях часто мелькают должности UX/UI дизайнера, именно так, через слэш. Даже Тинькофф ищет такого кккомбо-специалиста:
С другой стороны баррикад, дизайнеры все поголовно стали именовать себя именно как UX/UI. Потому что быть просто дизайнром - фу, немодно.
Кто такой UX/UI в идеальном мире? Сверхчеловек, который проводит весь цикл работ UX, а потом еще успевает отрисовать всё с несколькими итерациями правочек (сделать UI).
Кем является на самом деле UX/UI? Просто хорошим дизайнером. Тем, кто считает своим долгом не просто «фигачить макеты», а подходить к каждому проекту индивидуально, начинать с анализа, вопросов, уточнений, набросков, схем и т.д. Это не полноценная UX-экспертиза, но, как правило, для поддержки уже готового сервиса или разработки «просто сайта», ее достаточно.
Так что, если видите удивительного мутанта UX/UI, знайте, что:
- Это дизайнер, который подходит к проекту с головой, а не просто щелкает мышкой и клювом.
- Это хлыщ, который начитался умных слов и теперь называет себя UX/UI.
Проверяется элементарно: попросите дизайнера рассказать, почему он выбрал именно такое расположение элементов, такую последовательность экранов и т.д. У хорошего дизайнера ни одно интерфейсное решение не делается просто так - всему есть логичное обоснование.
Как запомнить, где UX, а где UI
Предлагаем две простые запоминалки.
Для тех, кто знает английский:
Для тех, кто не знает:
Кстати
Эта статья уже вторая в серии «чем один веб-специалист отличается от другого». Что подтолкнуло нас к идее сделать справочник всех профессий от веба, с разными вариантами их названий. Чтобы клиенту (да и всем нам, чего уж) стало понятнее жить.
Термин UX возник в 1993 году в недрах корпорации Apple, расшифровка звучит как User eXperience. С ростом популярности мобильных устройств это понятие вошло в моду и стало использоваться повсеместно. Но даже сейчас не все могут ответить с уверенностью, что же такое UX-дизайн, чем он отличается от UI-дизайна и почему эти вещи часто упоминаются в связке. Мы поможем разобраться.
Что такое UX-дизайн
По-русски UX-дизайн - это дизайн пользовательского опыта. Он является одной из первых ступеней в создании продукта и служит для того, чтобы приложение было логичным, удобным и полезным. и сайтов определяет, какие впечатления получит человек от их использования, как именно он будет пользоваться данными продуктами.
Где лучше разместить вход в личный кабинет? Сколько шагов должен пройти пользователь, чтобы подписаться на рассылку или сделать заказ? Как он поймет, что операция прошла успешно? Именно такие вопросы решает UX-дизайнер.
UX-дизайн включает в себя разные компоненты:
- информационную архитектуру;
- интерактивный дизайн;
- юзабилити (показатель простоты, удобства и эффективности продукта в глазах пользователей).
UX-дизайнер разбирается в психологии и эмоциях пользователей, анализирует их ожидания от продукта и ставит цель, которую нужно достичь. Далее он выбирает подходящие инструменты и придумывает структуру приложения или сайта, которая соответствует всем необходимым параметрам.
Сырая идея сайта или приложения похожа на разобранный пазл в нашем офисе. Волей UX-дизайнера из этих кусочков складывается понятная структура
У UX-дизайнера не бывает однообразных задач, поэтому для разных проектов нередко требуются люди с навыками из различных областей. Существуют целые лаборатории с мощным техническим оснащением, в которых над исследованиями работает команда из нескольких человек. В таких лабораториях есть приборы, фиксирующие психофизические реакции пользователей (например, движения взгляда и сердцебиение), там проводят опросы, наблюдают за юзерами при помощи включенного и невключенного метода и .
UX-дизайнерам важно уметь:
- проводить исследования пользователей;
- создавать вайрфреймы и прототипы сайтов и приложений. Это поможет оценить, в каком направлении развивать приложение или сайт. Причём умение рисовать совсем не обязательный навык для современного UX-дизайнера. Существует множество инструментов для прототипирования, где с помощью готовых элементов можно создать грамотную визуализацию интерфейса (например Axure, Balsamiq или UXPin);
- проектировать взаимодействие, то есть представлять, как именно человек будет пользоваться продуктом. Для этого создаются карты маршрутов пользователей по экранам приложения, интерактивные каркасы сайтов и приложений с разными вариантами дизайна;
- тестировать продукт;
- заниматься аналитикой. Использование различных метрик (например Webvisor, Hotjar, Mixpanel, UXcam, или Appsee) поможет понять, насколько эффективно работает дизайн, и дорабатывать продукт, основываясь на реальных данных.
Подробнее о принципах и основах UX-дизайна интерфейсов можно почитать в .
Что такое UI-дизайн
Дизайн пользовательских интерфейсов или UI-дизайн - это визуальное воплощение UX-дизайна. Его задача — сделать приложение, сайт или другой продукт интуитивно понятным, привлекательным и максимально простым в использовании с помощью определенных графических решений.
UI-дизайнер отвечает за то, как будет выглядеть каждый отдельный экран или страница. Сфера его ответственности — графические элементы управления, такие как кнопки и чекбоксы, шрифты, цветовые схемы и различные визуальные образы.
Как должна выглядеть кнопка, чтобы на неё было удобно нажимать? Какой размер шрифта выбрать, чтобы текст хорошо читался? Как оформить сообщение об ошибке, чтобы оно привлекало внимание, но не раздражало? Ответы на эти вопросы помогает найти UI-дизайн интерфейсов.
UI-дизайнер использует в работе разные графические редакторы: Photoshop, Illustrator, Sketch, Fireworks, Adobe XD, Gravit Designer, Affinity Designer, Figma
Работая над тем, как приложение будет выглядеть на экране гаджета, UI-дизайнер ориентируется на гайдлайны мобильных платформ — наборы рекомендаций от Apple и Google, благодаря которым приложения сторонних разработчиков выглядят единообразно и органично встраиваются в общую концепцию.
Если провести совсем простую аналогию из жизни, то UX-дизайн — это планировка квартиры и коммуникаций, а UI — выбор обоев и напольного покрытия. Однако на практике UX- и UI-дизайн тесно взаимосвязаны, второй логически следует за первым, и нередко тем и другим занимается один и тот же человек. Поэтому грань между двумя понятиями размывается, и их указывают вместе.