Если вы хотите развиваться в сфере дизайна, то конечно же нужно постоянно качать свой скил, быть в курсе трендов и знать современные требования к дизайну, а также специальные термины. Одним из таких терминов является UX/UI дизайн.

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

Начнем с UX. UX это аббревиатура от User Experience , что дословно переводится как «опыт пользователя». То, насколько продуман UX-дизайн, например сайта, настолько удобнее пользователю осуществлять поиск нужной информации или взаимодействия с ним. Иными словами задача UX-дизайна — решение вопросов функциональности и удобства инструмента или ресурса.

Понятие кстати относится не только к сфере IT, но и фактически к любой другой. Можно сказать что UX-дизайн шариковой ручки это то, насколько хорошо она пишет, насколько хватает пишущие пасты, помогает ли она формировать правильный почерк, удобна ли при транспортировке, с защитным колпачком или автоматическая… В общем насколько хорошо продукт решает задачу, для которой предназначен и при этом важно — насколько понятен пользователю.

Пользователю должно быть комфортно и всё понятно

Что же касается UI-дизайна, то в данном случае это сокращение от User Interface , опять же дословно — «пользовательский интерфейс». Данный же вид дизайна определяет цвет, форму размер и расположение элементов, названия и размер шрифтов. То есть UI — это визуальная составляющая, задача которой, если хотите, расставлять акценты и выделять определенные элементы сайта или продукта. То есть сделать продукт или ресурс, приятным для восприятия и интуитивно удобным в использовании. Например, восприятие текста зависит от того, как он разделен на абзацы, размер и тип шрифта, наличие заголовков и иллюстраций, а также пространства окружающего текст.

Отличия UX и UI дизайна

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

Внутренняя структура, иерархия, огромное количество дополнительных сервисов (Директ , Метрика , Вордстат и прочее) – это UX. А вот, например, то что ссылки, по которым вы уже переходили, подсвечиваются другим цветом – это UI. Так же к UI относится то, что сайт имеет чистый белый фон, отступы между результатами поисковой выдачи, достаточные для комфортного восприятия, фавикон, а также возможность в любой момент зайти в почту в правом верхнем углу сайта.

UX-дизайнер продумывает, как пользователь будет взаимодействовать с системой, чтобы это соответствовало его ожиданиям. UI-дизайнер думает над тем, как это должно выглядеть: иконки, картинки, шрифт, цветовая композиция, удобство для восприятия в целом. И довольно часто выполнением этой задачи занимается один и тот же человек, поэтому часто в вакансии дизайнера пишется UI и UX через /.

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

Сферы применения

Как уже было сказано выше термины UI и UX применимы не только к сфере IT. Фактически они появились, как только был создан первый продукт. То есть очень давно. Например, одним из первых прорывов в UX-дизайне можно считать колесо .

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

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

Как понять правильный ли у вас дизайн

Если мы говорим о задаче продавать, то «правильность» UX-дизайна проверяется посредством А/Б тестирования или фокус групп . Это позволяет увидеть насколько пользователю, понятен и удобен интерфейс. Например, перед всеми членами фокус группы ставится задание, найти определённый раздел на сайте или зарегистрироваться. То насколько они быстро справляются с этим и говорит о качестве UX-дизайна.

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

Напишите в комментариях ниже ваше мнение, удалось ли мне раскрыть и если нет, то чем стоит её дополнить.

Дизайн – понятие довольно широкое и неопределенное. Когда кто-то говорит? «Я дизайнер», не сразу понятно, чем он в действительно занимается каждый день. Существуют несколько разных областей, объединенных под понятием «дизайн».

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

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

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

UX-дизайнер (USER EXPERIENCE дизайнер)

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

Пример описания работы experience-дизайнера в Twitter:

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

Результаты работы: макеты изображений на экранах, раскадровки, план сайта.

Инструменты: Photoshop, Sketch, Illustrator, Fireworks, InVision

UI-дизайнер (USER INTERFACE дизайнер)

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

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

Сохранение последовательности во всех визуальных элементах и определение поведения (например, как отображать ошибку или предупреждения) подпадают под компетенцию UI-дизайнера.

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

Инструменты: Photoshop, Sketch, Illustrator, Fireworks

Визуальный дизайнер (графический дизайнер)

Визуальный дизайнер – это тот, кто занимается графикой. Если вы спросите кого-то, кто не занимается дизайном, кто такой дизайнер, пожалуй, первым на ум придет как раз-таки графический дизайнер. Графические дизайнеры никак не связаны ни с тем, как экраны сообщаются друг с другом, ни с тем, как кто-то взаимодействует с продуктом. Вместо этого, они сосредоточены на создании красивых иконок, элементов управления и других визуальных элементов и выбирают подходящие шрифты. Графические дизайнеры трудятся над маленькими деталями, которым остальные не придают значения, и часто работают в Photoshop в режиме приближения 4X или 8X.

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

Инструменты: Photoshop, Sketch

Interactive-дизайнер (моушен-дизайнер)

Помните почти незаметную подпрыгивающую анимацию, когда вы обновляете почту на своем iPhone? Это работа моушен-дизайнера. В отличие от графических дизайнеров, которые работают со статичными элементами, моушен-дизайнеры создают анимацию внутри приложений. Они имеют дело с тем, что делает интерфейс, после того, как пользователь к нему прикасается. Например, они решают, каким образом должно развертываться меню, какие эффекты перехода использовать, и как должна реагировать та или иная кнопка. Хорошо выполненный моушен-дизайн становится неотъемлемой частью интерфейса, предлагая визуальные подсказки как использовать продукт.

Описание работы моушен-дизайнера в Apple:

«Высокая квалификация в графическом дизайне, моушен-графике, знания в digital art, хорошее восприятие шрифтов и цвета, общее внимание к материалам и текстурам, а также практическое понимание анимации. Знание iOS, OS X, Photoshop и Illustrator, также знакомство с Director (или аналогом), Quartz Composer (или аналогом), 3D-моделированием, моушен-графикой»

Инструменты: AfterEffects, Core Composer, Flash, Origami

UX Исследователь (Исследователь пользователей)

Цель UX исследователя – ответить на два вопроса: «Кто наш потребитель?» и «Что хочет наш потребитель?» Обычно в обязанности исследователя входит проведение интервью с пользователями, исследование маркетинговых данных и общий сбор аналитики. Дизайн – это процесс постоянного совершенствования. Исследователь может помочь в этом процессе, проводя A/B-тестирование, чтобы выявить, какое дизайнерское решение наиболее полно удовлетворяет потребительские нужды. UX-исследователь обычно – главная опора в больших компаниях, где доступ к огромному количеству информации дает ему достаточно возможностей, чтобы прийти к значимым заключениям.

Описание работы UX-исследователя в Facebook:

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

UX-дизайнеры периодически выполняют обязанности UX-исследователей.

Результаты работы: портрет пользователя, результаты A/B-тестирования, поведенческие исследования пользователей/интервью.

Инструменты: микрофон, бумаги, документы

Внешний разработчик (UI-разработчик)

Внешние разработчики отвечают за функциональное воплощение интерфейса продукта. Обычно, UI-дизайнер передает статичный мок-ап внешнему разработчику, который в дальнейшем трансформирует его в работающий, интерактивный продукт. Внешние разработчики также отвечают за кодирование, верстку интерактивной графики, которую создает моушен-дизайнер.

Инструменты: CSS, HTML, JavaScript

Дизайнер продукта

Продакт-дизайнер – всеобъемлющее понятие, чтобы описать дизайнера, который в общем вовлечен в процесс создание образа и восприятия продукта.

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

Некоторые компании используют «UX-дизайнер» или просто «дизайнер» в качестве всеобъемлющего термина. Прочтение описания вакансии – лучший способ выяснить, что будет входить в вашу компетенцию.

Описание работы продакт-дизайнера для Pinterest

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

Ищу дизайнера

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

Границы между каждым из этих направлений дизайна очень размытые. Предполагается что некоторые UX-дизайнеры также будут работать над взаимодействием с потребителем, а некоторые UI-дизайнеры будут в том числе заниматься графикой. Лучший способ найти дизайнера – детально описать, что вы от него ожидаете в рамках работы на вашу компанию, и выбрать заголовок вакансии, наиболее четко отображающий обязанности дизайнера.

На вопрос, в чем же разница между 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 возник в 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-дизайн тесно взаимосвязаны, второй логически следует за первым, и нередко тем и другим занимается один и тот же человек. Поэтому грань между двумя понятиями размывается, и их указывают вместе.

UX-дизайн — что это? В настоящее время индустрия пользовательского интерфейса растет быстрыми темпами, но UX-дизайн по-прежнему представляет собой совершенно новый мир для большинства руководителей и менеджеров. Данная сфера ставит перед собой задачу повысить удовлетворенность пользователей продуктом, улучшить удобство использования, доступность и взаимодействие. Сочетает в себе традиционный дизайн взаимодействия человека и компьютера и рассматривает все аспекты пользовательского взаимодействия с продуктом или сервисом.

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

Что делает UX Designer?

Дизайнеры UX изучают и оценивают, как пользователи относятся к системе, глядя на такие вещи, как простота использования, восприятие ценности системы, полезность, эффективность в выполнении задач.

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

UX-дизайн — что это? Концепция технологии

Важной концепцией в дизайне UX является процесс, с помощью которого пользователи формируют опыт. Когда потребитель впервые сталкивается с продуктом, формируется мгновенное впечатление, которое меняется со временем. В этом процессе восприятие, действие, мотивация и познание объединяются, чтобы сформировать пользовательский опыт. Этот процесс вызывает эмоциональные реакции, которые в значительной степени определяют, будет ли опыт положительным или отрицательным.

Дизайнеры UX стремятся создать факторы, влияющие на процесс преднамеренно. Для этого разработчик UX рассматривает три категории вопросов: что, почему и как.

Почему — подразумевает мотивацию пользователей к принятию продукта и желанию им обладать.

Что — касается того, что люди могут делать с продуктом и его функциональностью.

Как — относится к дизайну функциональности доступным и эстетически приятным способом.

Дизайн UX начинается с категории «почему», затем определяет, «что» и, наконец, «как», чтобы создавать продукты, с которыми пользователи могут получать значимые впечатления.

Историческая ретроспектива

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

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

исследование потребителя;

дизайн продукта;

тестирование;

реализация.

Рассмотрим каждый из них подробнее.

Исследование потребителя: с чего начать начинающему дизайнеру?

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

вопросники;

обсуждения в фокус-группах;

онлайн-опросы;

анализ задач.

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

Дизайн

Разработка дизайнерской гипотезы включает в себя представление о том, как новые продукт или услуга могут адаптироваться к тому, как клиент уже ведет себя (это выявляется исследованиями пользователей). Дизайн продукта ориентирован на функциональность и удобство использования, а не на то, как он выглядит. На этом этапе используются следующие :

информационная архитектура;

• прототипирование.

Тестирование

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

тестирование a/b;

юзабилити;

дистанционное тестирование пользователей.

Реализация

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



Что такое пользовательский опыт?

Веб-сайты и приложения становятся все более сложными по мере продвижения технологий. То, что раньше было односторонней статической средой, сегодня превратилось в широкий интерактивный опыт.

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

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

Понятие User experience охватывает все аспекты взаимодействия конечного потребителя с компанией, ее услугами и продуктами. Важно отличать общий дизайн проекта от пользовательского интерфейса, хотя User experience является чрезвычайно важной частью дизайна.

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



Профессиональные компетенции

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

лидерство;

• управление проектами;

  эффективное взаимодействие с командой.

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

В чем разница между дизайном UX и UI?

Дизайнеры пользовательского интерфейса (UI) фокусируются на макете и фактическом дизайне каждого элемента, с которым взаимодействует пользователь, тогда как дизайнеры User Experience (UX) сосредотачивают свое внимание на взаимодействиях пользователя с этим элементом, а также на комплексном впечатлении от продукта. Дизайнеры UI и UX часто работают вместе, а также в команде с веб-разработчиками, для создания продукта, который является визуально привлекательным и приятным в использовании.

Что делает на самом деле дизайнер UX?

Дизайнеры UX выполняют различный функционал в зависимости от проекта и этапа разработки. На ранних этапах проекта специалисты проводят предварительные исследования пользовательского опыта, а затем планируют взаимодействие посредством каркаса и прототипирования своих проектов, которые далее проверяются с помощью различных эвристических методик.

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

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



Задачи и методы

Дизайнеры UX выполняют различные задачи в разных точках процесса. Ниже представлен основной перечень:

Оценка текущей системы. Если система уже существует, профессионал UX будет целостно оценивать ее текущее состояние. Выявляются проблемы и предлагаются исправления на основе анализа данных исследований.

A/B TESTING. Специалист может разработать исследование для сравнения эффективности и качества опыта различных пользовательских интерфейсов. Это выполняется путем выдвижения гипотезы (например, «зеленая кнопка более привлекательна, чем красная»). Затем предлагается несколько версий дизайна и в порядке тестирования определяется «лучший опыт» (например, «зеленая кнопка лучше, потому что пользователи щелкали по ней чаще».).

Опросы. Разработчик UX проводит опрос существующих и потенциальных пользователей системы, чтобы получить представление о том, что было самым эффективным дизайнерским решением. Поскольку опыт единичного пользователя является субъективным, лучший способ получить непосредственную информацию - это изучение и взаимодействие с групповым мнением.

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

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

Шаблоны проектирования

Шаблоны обеспечивают согласованность и способ нахождения наиболее эффективного «инструмента» для работы. Например, при разработке шаблонов пользовательского интерфейса выбор правильных элементов (например, вкладки модуля, слайд-шоу) для определенных задач, основанных на их эффективности, приводит к лучшему решению. Разработчики UX не только предлагают шаблоны проектирования, которые используются на других веб-сайтах, но и разрабатывают свои шаблоны для текущего проекта.

Программы

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

Курсы UX-дизайна используют инструменты прототипирования — на начальном этапе их можно выполнить с помощью ручки и бумаги. Этот недорогой и доступный инструмент обучения дизайнера на практике позволяет быстро сформировать прототип и перейти к проектированию.

Некоторые программные средства для создания каркаса и прототипов:




При обучении основам UX-дизайна используется тестирование A/B, также известное как раздельное или многовариантное тестирование. Данный инструмент сравнивает разные версии страницы. Тестирование может быть выполнено с помощью любой из нескольких программ.

В основном программное обеспечение для тестирования A/B разбивает трафик веб-сайта на два равных сегмента. Одна группа видит версию A, а другая — версию B. Статистика, такая как коэффициент конверсии и показатель отказов, отслеживается для каждой версии. Сплит-тестирование определяет, какая версия лучше, и данное решение основано на статистических данных. Одним из самых популярных приложений для тестирования A/B является Website Optimizer Google.

Управление контентом

При обучении UX-дизайну с нуля используется множество методов инвентаризации контента. Использование серверного приложения на месте (для которого вам потребуется доступ к веб-серверу) лучше всего подходит для производственных сайтов. Будучи ближе к источнику, чем программное обеспечение сторонних разработчиков, эти приложения являются более точными и эффективными. С этой целью может использоваться простой инструмент Excel для создания и управления инвентаризацией контента, например, шаблон GetUXIndex ()).

Веб-сайты, созданные с такими системами управления контентом, как WordPress и Drupal, как правило, имеют встроенные инструменты, которые показывают карту существующего веб-сайта.

Опросы и фидбек

Опрос пользователей — еще одна популярная задача дизайна UX. Самый эффективный и экономичный способ сделать это — с помощью приложения для опроса и обратной связи или тестирования удаленного пользователя.

Общие инструменты для проведения опросов, например, PollDaddy, представляют собой гибкие решения, которые также могут использоваться для других задач. Существуют инструменты обратной связи для удобства использования, такие как Usability и удаленные службы тестирования пользователей, такие как юзабилити-хаб, которые администрируют систему тестирования.

Примеры

Пример UX-дизайна — что это? Дизайн пользовательского интерфейса — это процесс создания продуктов, которые предоставляют осмысленный и экспериментальный опыт. Это предполагает тщательный дизайн и удобство использования продукта, эстетическое удовольствие от применения и обширную функциональность.

Таким образом, продукты, обеспечивающие отличный пользовательский интерфейс (например, iPhone является наилучшим примером UX-дизайна), предназначены не только для потребления или использования продукта, но и для всего процесса приобретения, владения и даже устранения неполадок.