Интерфейсов ux ui. Отличие UX от UI дизайнера

Представляем новую статью серии . В этой части цикла рассмотрим позицию UX/UI дизайнера - специалиста, отвечающего за соответствие внешнего вида и логики продукта.

UX/UI дизайнер - специалист, который занимается проектированием пользовательских интерфейсов.

Типичный рабочий день включает в себя:

• работу над приоритетными задачами (проектирование, отрисовка);
• общение с заказчиком;
• внесение правок.

Преимущества и недостатки

Профессия привлекает дизайнеров возможностью делать мир лучше, а также своей перспективностью и востребованностью на рынке:

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

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

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

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

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

Еще один плюс - возможность работать удаленно ( 20% всех дизайнеров), большой выбор проектов на фрилансе.

Среди минусов профессии дизайнеры называют общение с заказчиками, которые не знают, чего хотят, а также недооцененность коллегами из IT:

«В 80-90% случаев приходится работать без ТЗ с требованиями типа: «Сделай мегакрасиво и мегаконфигурируемо».

«Недостатком профессии считаю отношение к дизайну и дизайнерам в Украине. Почему-то все считают, что если они когда-то открывали Фотошоп, то автоматически могут быть дизайнерами и самостоятельно решать, сколько времени уйдёт на дизайн. Особенно этим грешат неопытные менеджеры и программисты (один менеджер из новичков утверждал, что сделал бы задачу за 30 минут в Пейнте, но у него нет времени на художества)».

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

«Минусы - как и во всем ИТ - сидячая работа, страдающие глаза и иногда заказчик, которому надо сделать белый #ffffff еще белее:)»

Как стать и куда двигаться дальше

Первый и главный навык по части UI - освоить графический редактор. Самый востребованный инструментарий - Adobe Photoshop, Sketch, Principle, Adobe Illustrator, After Effects. Для начала можно попробовать перерисовать скриншоты любого мобильного приложения или сайта. Но не просто скопировать (хотя и это нужно уметь), а заметить какое-то неудобство и предложить решение, как сделать лучше.

Также важно понимать теорию цвета, типографику, композицию, эргономику сайта (принципы юзабилити интерфейсов), а также основы маркетинга, бизнес-анализ, психологию. Для более эффективного общения с разработчиками будут полезны навыки верстки (HTML/CSS) и базовые знания JavaScript и фреймворков.

Изучение UX можно начать со знакомства с методологией, почитав книги Нильсена Нормана, Алана Купера, Джефа Раскина, Стива Круга, Алистера Коберна. Более прикладная литература - «The User Experience Team of One: A Research and Design Survival Guide» Leah Buley.

«В современном мире возможностей для реализации множество. Я покупал и продолжаю покупать онлайн-курсы на таких платформах, как Coursera, Udemy, Edx. Смотрю онлайн-конференции от Adobe, Google, читаю техническую литературу, анализирую работы на Dribbble , Behance , Awwwards ».

«UX/UI дизайнеру надо изучить классику пользовательского интерфейса: „Не заставляйте меня думать“ Стива Круга, „Дизайн привычных вещей“ Нормана, читать Люка Вроблевски. Необходимо постоянно практиковаться, ставить себя на место пользователя. Найти ментора, который будет указывать на ошибки, давать советы и способствовать росту».

Начать карьеру можно с фриланса на различных англоязычных платформах, также будет полезно испытать свои навыки на чемпионатах, например, Dev Challenge . Это поможет наработать портфолио.

UX и UI навыки и компетенции ()

Из личных качеств важны:

• усидчивость;
• упорность;
• креативное мышление;
• перфекционизм;
• желание учиться и развиваться;
• умение слышать критику.

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

Возможные карьерные пути UX/UI дизайнера:

• совершенствоваться как дизайнер, повышать рейт (если фрилансер);
• осваивать смежные направления, развиваясь как дизайнер продукта, VR дизайнер, VFX дизайнер, Game дизайнер;
• дорасти до позиции Арт-директора (Head of Design);
• развиваться как , если хочется переключиться с дизайна на управление продуктом в целом;
• стать , если интересно координировать людей;
• заняться , если больше интересен технический аспект;
• освоить программирование и стать UI-разработчиком;
• попробовать себя в маркетинге или .

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

Благодарю за помощь в написании статьи Юлию Бондаренко , Максима Паливоду , Марину Поповиченко и 25 других украинских дизайнеров, которые рассказали DOU о своей должности. Приведенные в статье цитаты взяты из их рассказов.

На вопрос, в чем же разница между 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.

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

Кстати

Эта статья уже вторая в серии «чем один веб-специалист отличается от другого». Что подтолкнуло нас к идее сделать справочник всех профессий от веба, с разными вариантами их названий. Чтобы клиенту (да и всем нам, чего уж) стало понятнее жить.

29.09.2017

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

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

Что такое User Experience (UX)?

UX расшифровывается как “user experience (опыт взаимодействия)”. Опыт взаимодействия – это то, как люди взаимодействуют с продуктом.

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

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

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

• Получил ли я пользу от этого продукта?
• Легко ли его использовать?
• Приятно ли его использовать?

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

Элементы UX

Дон Норман (Don Norman), соучредитель Nielsen Norman Group , был первым, кто ввел понятие “user experience” в 90-ые годы, сказав “Опыт взаимодействия охватывает все аспекты взаимодействия пользователя с компанией, ее услугами и продуктами”.

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

В этом видео Дон Норман делится своим мнением об истоках термина UX.

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

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

UX дизайн (UX design )

User Experience Design в переводе означает «опыт взаимодействия» и включает в себя различные UX -компоненты: информационную архитектуру, проектирование взаимодействия, графический дизайн и контент.

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

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

Основные вопросы, решаемые UX дизайном:

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

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

UI дизайн (UI design)

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

1. Организованность элементов интерфейса. Это означает, что они должны быть логически структурированы и взаимосвязаны.
2. Группировка элементов интерфейса. Подразумевает объединение в группы логически связанных элементов (меню, формы).
3. Выравнивание элементов интерфейса . Сложно представить, что плохо выровненный интерфейс может быть для кого-то удобным!
4. Единый стиль элементов интерфейса. Стилевое оформление играет не последнюю роль, ведь именно оно сохраняется в памяти пользователя.
5. Наличие свободного пространства. Это позволяет разграничивать информационные блоки, сосредотачивая внимание на чем-то одном.

Разработанный по все правилам пользовательский интерфейс значительно повышает эффективность ресурса и дает ему конкурентные преимущества.

Информационная архитектура (ИА)

Отдельно хотелось бы сказать пару слов об Information Architecture (IA ) . Ее деятельность сфокусирована на организации данных, то есть насколько информация является структурированной с точки зрения пользователя, а не технических или системных правил. Она определяет размещение элементов на странице, связь самих страниц. Компетенция ИА - это скорее меню и навигация и их грамотное внедрение.

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

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

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

Кто такой UX-дизайнер, чем он занимается

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

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

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

Кто может стать UX-дизайнером

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

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

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

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

С чего начать

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

Процесс работы над продуктом состоит из нескольких этапов. На каждом из них UX-дизайнер занимается разными вещами. Чтобы понять, какие знания необходимы для работы, нужно рассмотреть каждый из этапов подробно:

• исследование,
• анализ данных,
• проектирование,
• дизайн,
• анализ метрик.

Исследование

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

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

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

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

Анализ данных

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

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

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

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

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

Проектирование

На этом этапе визуализируют все собранные данные. Строят структуру приложения, располагают элементы для каждого экрана.

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

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

Этап проектирования помогает значительно сэкономить время. Быстрее показать набросок пользователю и спросить его мнение, чем рисовать и программировать продукт с нуля и затем устранять недочеты.

Дизайн

Созданием окончательного варианта занимается UI-дизайнер. Но часто рисовать окончательный вариант приходится самостоятельно. Поэтому полезно получить основные навыки и научиться UI-дизайну.

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

Для этого подходят графические редакторы, в которых работают дизайнеры:

• Adobe Photoshop,
• Adobe XD,
• Sketch,
• Figma.

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

Анализ метрик

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

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

Как учиться UX-дизайну

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

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

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