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

Обновлено: 06.01.2025

Посмотрим на историю развития дизайна – как первые эксперименты и попытки стандартизации привели к возникновению UX/UI.

Период	Признаки периода	Как выглядели сайты	Что появилось
Начало 90-х	Простейшие инструменты и технологии.	Текст одной колонкой, HTML, внутренние ссылки; простое меню, синие ссылки.	Веб-сайты, Mosaic. Первые стандарты.
Середина 90-х	Появилась примитивная верстка; Оптимизация страниц под медленный интернет;	Текст в несколько колонок; Таблицы; Отделение тела сайта от боковой навигации; Система навигации.	Фреймовый метод, бесплатные конструкторы сайтов – Angelfire, GeoCities и Expages.
Конец 90-х	Flash и графические элементы.	Плиточные изображения; Кислотные цвета; 3D-кнопки; Мигающий текст.	Flash, анимированный текст, GIF, профессия веб-дизайнера.
Ранние 2000-е	Расширились возможности верстки; Интуитивное размещение контента; Понятная навигация.	Сайты на CSS – технологии, которая отделила контент веб-страниц от дизайна.	Каскадные таблицы стилей (CSS), принципы юзабилити.
Поздние 2000-е	Переход от «просто дизайна» к UX/UI; Рост количества сайтов и приложений; Цифровизация бизнеса.	WEB 2.0; Широкое использование значков/иконок; Интерактивный контент.	Мультимедийные приложения, поисковые системы, социальные сети, HTML5, UX/UI.

В конце 2000-х появились UX/UI, ключевыми качествами любого продукта стали удобство и функциональность.

Наши дни

Теперь в дизайне используются Data Driven Design и UX/UI.

Data Driven Design – это дизайн на основе данных: исследований, тестов, гипотез, Big Data. В DDD каждое дизайнерское решение основывается на цифрах и конкретных показателях, а не на субъективном заключении дизайнера.

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

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

UX/UI – что это?

UX и UI – термины родственные и взаимосвязанные, но не тождественные. Между ними есть принципиальная разница.

Путь на сайте
Последовательность действий
Мысли и чувства
Общие впечатления.

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

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

UX/UI в цифрах

40% пользователей признались, что не будут пользоваться сайтом, если у него неопрятный вид.
94% посетителей не доверяют сайтам с плохим дизайном.
67% потребителей предпочитают покупать с телефона.
73% топ-менеджеров заявили, что собираются увеличить количество UX-дизайнеров в своей организации в ближайшие пять лет.
Средняя зарплата UX-дизайнера в Москве составляет 91 570 рублей в месяц.

Хорошо, когда UX помогает создать визуальную историю, которая ведет пользователя за собой. Такое визуальное повествование со вступлением, основной частью и заключением сделала компания Upstream на главной странице сайта.

Пользователи могут прокручивать сайт до основной части истории, но кратко все три части представлены в первом экране. Визуальные эффекты и текст рассказывают, зачем помогать людям и компании Upstream. Завершается повествование call-to-action – кнопкой Submit. UX здесь ведет пользователя по истории и подводит к логическому действию: просит присоединиться к программе.

Инструменты

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

Персонажи
Сценарии использования продукта
Customer Journey Map
Карта эмпатии
А/B-тестирование

На бумаге
В специальных программах - Axure Pro, WireframeSketcher, SketchFlow
В графических программах - Photoshop, Illustrator, InDesign

Кнопки
Иконки
Поп-апы
Таблицы
Чекбоксы
Меню
Предупреждения (алерты)
Ярлыки и лейблы
Формы с полями ввода
Уведомления
Переключатели
Галереи
Подсказки
Пагинация
Вкладки и хлебные крошки
Прогресс-бары

В UX все определяют аналитика и прототипы, а в UI – базовые правила юзабилити и UX. В аналитике и сборе данных UX сходен с DDD.

Тренды

Увлечение UX/UI породило несколько трендов, которые влияют и на дизайн, и на дизайнеров:

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

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

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

Появление множества специализированных инструментов для веб-дизайна: Sketch, Figma, Readymag, Framer и другие. Это облегчило и ускорило работу дизайнерам.

Figma в действии

Вывод

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

С появлением UX/UI работа дизайнера не стала легче. Упростилась только внешняя сторона. Внутри же все гораздо сложнее. UX/UI ввели ряд стандартов и методик, которые можно и нужно брать на вооружение при работе над проектами.

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

150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.

О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».

Алексей Комаров

UX/UI-дизайнер в IBM

светлана третяк

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

Давайте разбираться с самого начала.

Что нужно знать мобильному дизайнеру

Колористика

— искусство сочетания цветов.

Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).

Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.

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

Сервис Coolors позволяет создавать цветовую палитру по фото

Типографика

— умение оформлять текст при помощи набора и вёрстки.

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

Например, уровни заголовков — заголовок 1-го или 2-го уровня — различаются по размеру шрифта и служат навигацией, а также делают материал структурированным.

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

Композиция

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

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

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

⇒ Чем больше мозгу требуется усилий для определения объекта, тем больше мы устаём.

Визуальные нагрузки — усилия для определения объекта на экране по визуальным признакам (круг, небо, кошка) и выделения его среди других.

⇒ Чем больше объектов в интерфейсе, тем больше мы устаём.

Моторные нагрузки — возникают при физическом контакте с интерфейсом: свайп, тап и другие.

⇒ Чем больше жестов управления интерфейсом и чем они сложнее, тем больше мы устаём.

Внешние нагрузки — возникают при взаимодействии пользователя с приложением (собака залаяла, машина проехала, пошёл дождь). Эти нагрузки сложно точно предугадать — можно лишь предположить, в каких условиях будет использоваться приложение чаще всего.

⇒ Чем больше отвлекающих моментов, тем больше мы пытаемся сосредоточиться и быстрее устаём.

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

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

Инструменты

Из графических редакторов сейчас популярны Figma, Sketch или Adobe XD.

Figma

Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой, если нужно видеть все действия команды, а не только за последние 30 дней.

Sketch

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

Adobe XD

Приложение Adobe для проектирования интерфейсов. Плюсы и минусы аналогичны Sketch, кроме того, что в Adobe XD есть возможность создавать голосовые прототипы при помощи Amazon Alexa. XD заметно менее популярен по сравнению с Figma и Sketch.

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

Из других инструментов дизайнера можно отметить:

В этом сервисе удобно делать брейнстормы, обсуждения, прорабатывать гипотезы, проектировать навигацию с помощью mindmap и создавать Customer Journey Map.

Сервисы для создания прототипов

Помимо встроенного прототипирования в Figma, Sketch или Adobe XD дополнительно используют такие решения, как InVision, Marvel, ProtoPie, Flinto, Principle for Mac.

Цели и задачи разработки

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

Приложение — это инструмент бизнеса со своими целями и задачами.

Для примера рассмотрим мобильное приложение банка.

снизить расходы на обслуживание клиентов в отделениях и повысить средний доход на одного клиента.

контролировать свои расходы.

создать дистанционный канал поддержки клиентов и увеличить продажи банковских продуктов.

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

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

Бывает, что ресурсы безрезультатно тратятся не только на бесполезные фичи, но и на приложение.

К слову, если интересуетесь культурой стартапов, в целом (есть утрированные моменты) она хорошо показана в сериале «Кремниевая долина». Его рекомендует к просмотру и Билл Гейтс: «Продюсеры и сценаристы проводят много исследований перед каждым новым сезоном шоу. В прошлом году я был одним из нескольких людей, с которыми они встретились, чтобы поговорить об истории отрасли и рассказать о некоторых своих идеях для пятого сезона».

Гейтс ассоциирует себя с главным героем «Кремниевой долины» Ричардом Хендриксом и говорит, что ситуация в сфере стартапов похожа на показанную в сериале (твит 2018 года, но актуально и сегодня)

Soft skills

Коммуникационные навыки

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

Правильная реакция на критику

Дизайнеров постоянно критикуют, и многие на это обижаются.

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

Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.

Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение ?

К примеру, когда я работал в крупной финансовой компании, менеджер попросила меня сделать кнопки жёлтыми (этот цвет не корпоративный). На мой вопрос, почему именно таким цветом, менеджер пояснила, что на курсах, которые она посещала, сказали, что «жёлтые кнопки привлекают внимание, поэтому, например, в IKEA выходы жёлтые». То, что в IKEA жёлтый — один из корпоративных цветов, которые логично использовали в оформлении магазина, на курсах, видимо, забыли сказать ¯\_(ツ)_/¯

Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.

Это способ изображения процесса общего системного мышления с помощью схем.

Что нужно учитывать при разработке интерфейса

Взаимодействие с пользователями

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

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

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

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

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

Нюансы мобильных платформ

Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).

В создании приложений на платформах Android и iOS есть различия. Например, в паттернах поведения: в iOS меню показывается целиком, а в Android «гамбургерное» меню (три полоски); в разном управлении: в Android три кнопки («назад», «домой» и «последние приложения»), в iOS только «домой».

Грань с каждым обновлением постепенно стирается, но пока ограничения существуют. К примеру, модельный ряд iOS достаточно скромен, а в Android большое количество устройств да ещё и от разных производителей. Из-за этого при разработке на Android тяжелее отлаживать интерфейс — на это уходит много времени.

В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).

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

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

Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).

Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.

Адаптация контента

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

Длинные процессы

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

Профессия

Дизайнер
мобильных приложений

Узнать больше

Сможете самостоятельно разрабатывать дизайн мобильных приложений и руководить созданием интерфейсов мобильных продуктов
Работайте над своим проектом или выберите учебный
Каждый выпускник получает помощь и поддержку Центра развития карьеры Нетологии

Итак, мы разобрали базу для создания визуальной части интерфейса — дизайна. А теперь рассмотрим непосредственно процесс разработки приложений.

Этапы создания мобильного приложения

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

Погружаемся в цели и задачи бизнеса.

Изучаем целевую аудиторию.

Исследования делятся на количественные и качественные.

Количественные исследования отвечают на вопросы «сколько?», «как часто?». Обычно их проводят при помощи опросов, анкетирования, телефонных интервью.

Качественные отвечают на вопросы «кто?», «почему?». Получают информацию в индивидуальных глубинных интервью, групповых дискуссиях (фокус-группах) или прибегая к экспертным оценкам.

Если приложение делается с нуля, то сначала с помощью комбинации методов проводят качественные исследования, потом количественные.

Если приложение уже разработано и его нужно доработать, тогда сначала собирают статистику количественными методами, а потом — качественными.

Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.

Это нужно для правильного позиционирования бизнеса в приложении. У каждого бренда или компании есть свой язык общения с клиентом. Через каналы коммуникации бренд транслирует посылы аудитории. Например, слоган Nike «Just do it» отражается в простом, спортивно-повседневном стиле, в котором оформлены магазины и сайты компании.

Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.

На основе вышеуказанных артефактов дизайнер принимает решения.

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

Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.

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

Если есть выделенные аналитики, то зона ответственности между ними для целей разработки приложения может распределяться следующим образом:

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

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

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

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

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

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

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

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

Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.

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

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

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

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

В то же самое время оба эти элемента имеют решающее значение для конечного результата и не могут существовать друг без друга. В общих чертах, UX Design или User Experience Design — это аналитическая и техническая область разработки, в то время как UI Design или User Interface Design — то, что мы иногда ошибочно называем графическим дизайном. Хотя, на самом деле, все гораздо сложнее.

Представим, что наш будущий продукт — это дом. Фундамент, каркас, опоры и балки в нем — это программный код, который придает ему структуру и не дает развалиться на части. Стены, комнаты, дверные и оконные проемы — это измерение UX, оптимизация пространства для его максимально комфортного использования. И User Interface — это уже отделка стен, ламинат или кафель, все что создает внешний вид нашего дома и его уют для пользователей.

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

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

Вы не замечаете результат работы UX дизайнера, пока все работает хорошо. Но если при работе с продуктом вы начинаете задаваться вопросом “Что же делать дальше, чтобы решить мою задачу?”, то вам попался плохой UX.

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

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

Разберем основные задачи UX дизайнера

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

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

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

В чем на самом деле заключается работа UI-дизайнера?

Аудио перевод статьи

Поищите словосочетание “UI-дизайнер” в Google, и вы будете окончательно сбиты с толку.

Кроме всего прочего, термины UI и UX часто смешивают, из-за чего трудно понять, где заканчивается одна специальность и начинается другая.

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

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

Что такое UI-дизайн?
Визуальный аспект UI-дизайна
Человеческий аспект UI-дизайна
Какими навыками должен обладать UI-дизайнер?
Какие задачи обычно выполняет UI-дизайнер?
Что еще стоит почитать по теме

Итак, чем же на самом деле занимается UI-дизайнер?

1. Суть UI-дизайна в двух словах

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

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

Если, прочитав все о профессии UI-дизайнера, вы поняли, что хотите им стать, обязательно изучите пошаговое руководство старшего UI-дизайнера Эрика Баллера о том, как именно это сделать, или посмотрите видеоурок, представленный ниже, в котором ментор Элиза знакомит вас с миром дизайна пользовательских интерфейсов. Чтобы получить доступ ко всем ее урокам, просто зарегистрируйтесь здесь или подпишитесь на YouTube-канал CareerFoundry.

2. UI-дизайн: визуальный аспект

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

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

3. UI-дизайн: человеческий аспект

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

Вспомните ваше любимое приложение: оно приятное для глаз и простое в использовании, не так ли? Когда вы впервые его установили, то смогли быстро разобраться, как попасть из пункта А в пункт Б, поскольку это было просто очевидно.

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

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

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

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

Проще говоря, UX-дизайнер создает карту, “скелет” приложения или сайта. А UI-дизайнер дополняет ее визуальными, интерактивными точками взаимодействия, которые помогают пользователям перемещаться в интерфейсе настолько легко и быстро, насколько это возможно. Хотите пойти еще дальше? Изучите Zero UI (нулевой UI), который предполагает переход от графических интерфейсов к другим формам взаимодействия.

4. Какими навыками должен обладать UI-дизайнер?

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

Давайте рассмотрим некоторые из основных профессиональных навыков и личных качеств, которыми должен обладать UI-дизайнер:

Личные качества (soft skills)

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

Профессиональные навыки (hard skills)

Даже начинающие UI-дизайнеры должны уверенно владеть хотя бы одним из популярных инструментов для проектирования исоздания прототипов, например, Sketch, Adobe XD и InVision. Как только вы научитесь работать в одной из этих программ, разобраться с другими будет намного проще. Чтобы ознакомиться с полным списком популярных дизайн-инструментов, обратитесь к нашей статье “7 основных инструментов, о которых должен знать каждый начинающий UI-дизайнер”.
UI-дизайнеры должны отлично разбираться в методах, теориях и практических подходах, составляющих основу UI-дизайна. Сюда относятся теория цвета, типографика и дизайн-паттерны, а также фундаментальные концепции, такие как принципы гештальта, которые помогут вам лучше понять, как пользователи воспринимают и интерпретируют элементы интерфейса.

5. Какие задачи обычно выполняет UI-дизайнер?

Итак, задача UI-дизайнера — воплотить в жизнь идею UX-дизайнера. Но как именно он это делает?

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

Командная работа

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

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

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

Дизайн

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

Итак, какие же пункты может увидеть UI-дизайнер в своем списке дел?

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

Задачи дизайнера могут включать разработку вайрфреймов, создание мудбордов и скетчинг идей. В этом случае UI-дизайнер использует такие инструменты, как Photoshop и Sketch.

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

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

Существует 3 типа прототипов:

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

UI-дизайнеры используют различные инструменты для разработки прототипов — все зависит от задачи. Например, такие программы, как InVision, отлично подходят для создания базовых взаимодействий и прототипов с низкой детализацией, тогда как, например, Principle эффективен для демонстрации более сложных переходов и анимаций. Другие популярные инструменты включают Proto.io, Adobe XD и Figma.

Чтобы изучить эту тему подробнее, вы можете прочитать наш пост о значении прототипов в UI-дизайне.

Заключение

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

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

Читайте также: