UX-дизайн – подробное руководство. Семь вопросов о работе UX-дизайнера: разбираемся в профессии

О том, как стать дизайнером.

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

Вот как у меня все это происходило, шаг за шагом:

1. Поймите все направления Дизайна

Есть визуальные дизайнеры, дизайнеры взаимодействий, дизайнеры пользовательского опыта (UX), дизайнеры интерфейсов (UI), продуктовые дизайнеры, графические и так далее. Есть и универсалы, которые знают всего понемногу. Начините с того, что бы выяснить, какая специализация вас интересует.

2. Читайте статьи по UX/UI дизайну по пути на работу

4. Сделайте перерыв, когда столкнетесь с трудностями

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

Я с улыбкой вспоминаю день, когда я смущенно призналась своему другу, что понятия не имею, как работать инструментом “перо” (вам будет смешно через несколько месяцев). Мой друг и я получили работу в одной компании год спустя и до сих пор улыбаемся, вспоминая день, когда в буквальном смысле потратили 8 часов, рисуя фигуры в Photoshop.

5. Читайте хорошие книги.

6. Найдите дизайнера, который знает как делать и спрашивайте его иногда

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

7. Вдохновлятесь

Слушайте Матиаса Дуарте, вице-президента по дизайну Android, и его рассказы о материальном дизайне .

Смотрите работы на Dribbble, The Best Designs и Awwwards. Сделайте вдохновение приоритетной задачей. Оно поможет вам понять UX шаблоны, визуальный дизайн и придаст вам сил.

8. Работайте над несуществующими проектами

Если ваша цель – стажер или позиция начального уровня в UI/UX дизайне, то вам нужно что-то показать работодателю. Это самый сложный шаг, это как спрыгнуть со скалы. Вряд ли вы будете готовы начать работу над проектом, но сделайте это, так или иначе. Попытайтесь создать порфтолио в Sketch или Illustrator, начните с пользовательских потоков, вайрфреймов, взаимодействий и, наконец, полноценного мокапа. После этого переделайте сайт, которому это просто необходимо. Создайте собственное приложение со списком задач. Создайте приложение по доставке. Продолжайте создавать то, что волнует вас.

9. Подпишитесь на Sidebar

Они рассылают 5 ссылок по дизайну каждый день.

10. Запишите эту цитату на вашем столе

Никто никогда не говорит об этом начинающим. А я бы хотел, чтобы кто-то в свое время сказал об этом мне: все, каждый из нас, чья работа требует творчества, обладает хорошим вкусом. Но мы все мгновенно оказываемся на краю пропасти: в течение первых нескольких лет пока мы творим, невозможно не заметить, что то, что мы делаем не так хорошо, как хотелось бы. Мы отчетливо видим, что ничего хорошего так и не сделали. Мы бы хотели, чтобы было хорошо, мы стремимся к этому, но каждый раз получаем не то, что хотели…

И только вкус, то самое заветное, что изначально влекло вас к творчеству, ваш вкус просто великолепен! Он настолько хорош, что вы и сами признаете, что то, что вы делаете, это сплошное расстройство. Многие не могут пройти этот этап. И многие бросают свое занятие.

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

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

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

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

Однако за недавнее время появилось множество новых дизайн-профессий, сфокусированных на разработке интерфейсов для разного вида экранов. Вакансии, озаглавленные 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-дизайнеры будут в том числе заниматься графикой. Лучший способ найти дизайнера – детально описать, что вы от него ожидаете в рамках работы на вашу компанию, и выбрать заголовок вакансии, наиболее четко отображающий обязанности дизайнера.

С интерфейсами любому современному человеку приходится сталкиваться постоянно. Иногда эти столкновения проходят совершенно безболезненно: несколько нажатий нужных кнопок - и вот вы уже общаетесь с друзьями в своей любимой социальной сети. Еще несколько кликов - и вы заказываете пиццу в офис, откладываете талончик к дантисту или ищете в Сети новый смартфон, потому что старый… достал своей «тупостью»! Да, иногда столкновения с интерфейсами напоминают попытки пробить стену головой. Найти нужные настройки в «мобильнике» - проблема! Заказать билет на самолет или поезд - слишком сложно (бум головой, бум-бум)! Заплатить по счетам, пользуясь интернет-банкингом - бум-бум-бум!

Кто и зачем заставляет нас продираться сквозь множество непонятных форм, задает кучу лишних вопросов и требует ненужных подтверждений?! Кто прячет от нас нужные кнопки и опции, мешает нам свободно реализовывать свои потребности и спокойно наслаждаться жизнью?!

Интерфейс - это всегда взаимодействие. Взаимодействие какой-то системы (это необязательно должна быть компьютерная система) и человека (пользователя). И если взаимодействие затруднено, начинаются проблемы. Можно ли их избежать?

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

Зато можно научиться создавать удобные интерфейсы, о существовании которых пользователю даже не придется задумываться! Именно этой проблематикой и занимается такое направление в ИТ, как UI/UX Design .

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

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

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

«Хорошо, - воскликнете вы, - я хочу стать проектировщиком интерфейсов! Что дальше?»

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

Но есть более надежный и эффективный вариант - живое общение с Мастером своего дела и приобретение практического опыта под его руководством. Это как раз то, что предлагаем мы - добро пожаловать в Образовательный центр ПВТ на курс «Проектирование интерфейсов» (UI/UX Specialist) !

Материал подготовили: Вадим ЗЕЛЕНКОВ, Эрика ГРИЩЕНКО.

| 18.08.2015

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

Что такое UI

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

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

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

Что такое UX

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

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

Выводы

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

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