b733e4
Научим создавать свои игры, сайты и приложения
Начать учиться

Что такое UX/UI-дизайн

Что такое UX/UI-дизайн
1.4K

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

Что означает UX/UI и кто такой дизайнер интерфейсов

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

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

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

За всё это отвечает особая ветвь разработки — UX/UI-дизайн.

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

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

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

Представьте, что вы хотите купить новую игру в Steam, но нигде не можете найти кнопку корзины. Или нажимаете «Заказать», однако попадаете не на форму оплаты, а на страницу с отзывами. Это путает и раздражает. Чтобы такого не было, разработчики продумывают UX-дизайн.

UI-дизайн (User Interface или интерфейс пользователя) — это создание привлекательного внешнего вида страницы по правилам дизайна и типографики.

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

Так UX и UI, т. е. функционал и визуальная составляющая, работают в команде. Первый отвечает за то, как всё работает, а второй — за то, что мы видим. И именно UX/UI-дизайнер должен следить за балансом между этими двумя ветвями.

6.8K

Что такое интерфейсЧитать →

Открыть диалоговое окно с формой по клику

3 принципа хорошего UX/UI-дизайна

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

Пользователь важнее всего

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

Так, чтобы интерфейс не путал, важно:

  • избегать двусмысленных надписей, например, на кнопках;

  • следить, чтобы все клики вели туда, куда ожидает пользователь;

  • показать пользователю, куда нажимать и т. д.

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

Хороший интерфейс — это смесь психологии и типографики

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

Вот несколько важных правил типографики:

  • элементы интерфейса не должны быть собраны в кучу, между ними должен быть «воздух»;

  • текст должен быть контрастным по отношению к фону;

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

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

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

А теперь представьте, как человек оплачивает товар в интернете, и на его экране появляется окно с просьбой подтвердить заказ. Но кнопка «Подтвердить» красного цвета, а «Отмена» — зелёного. Скорее всего, человек автоматически нажмёт зелёную, потому что мозг воспринимает её как «да». И тогда он случайно отменит заказ и не поймёт, что произошло.

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

Тренды — уместно и без фанатизма

Быть на волне — это здорово, но с трендами стоит быть осторожным. Важно сперва проанализировать, к месту их применять или нет.

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

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

89.4K

Как создать сайт с нуля самостоятельноЧитать →

Получи больше пользы от Skysmart:

Этапы работы UX/UI-дизайнера

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

Этап № 1. Анализ целевой аудитории

Как театр начинается с вешалки, так и любая разработка — с целевой аудитории. ЦА — это люди, на которых рассчитан продукт, что UX/UI-дизайнер собирается представить на страницах.

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

Допустим, мы хотим сделать сайт для группы по скандинавской ходьбе в Карловых Варах. Тогда наша ЦА будет выглядеть примерно так:

Пол: мужской и женский

Возраст: от 45 до 80 лет

Язык: русский, чешский, английский

Род деятельности: пенсионеры и любой другой

География: Чехия, Карловы Вары и близлежащие города

Доход: средний и выше среднего

Семейное положение: холостые, семейные пары

Интересы: туризм, отдых на природе, спорт, оздоровительные процедуры, групповые занятия спортом

Цель на сайте или в приложении:

  • узнать, что такое скандинавская ходьба;

  • посмотреть цену, время и место, где проходит занятие;

  • подобрать подходящую группу;

  • оставить заявку на звонок оператора;

  • оплатить место онлайн;

  • задать дополнительные вопросы о группах.

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

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

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

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

Этап № 2. Изучение конкурентов

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

Этап № 3. Работа с продуктом

На этой стадии UX/UI-дизайнеры пытаются вжиться в роль пользователя и продумать, как именно тот будет взаимодействовать с продуктом. Так они понимают:

  • зачем пользователь пришёл на сайт или открыл приложение;

  • какие функции ему нужны в первую очередь, а какие — не так существенны;

  • может ли пользователь задержаться здесь или ему нужно быстро решить свою задачу;

  • из-за чего пользователь может отказаться от покупки и т. д.

В будущем это позволит составить карту приложения и правильно разместить все блоки на страницах.

Этап № 4. Разработка прототипа

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

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

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

Разработка прототипа сайта

Blue Planet Studio/Shutterstock.com

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

Пример макета страницы

Один из макетов главной страницы онлайн-школы Skysmart

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

Этап № 5. Тестирование

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

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

Этап № 6. Поддержка

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

Этап № 7. Развитие

Это не совсем отдельная стадия — её проводят одновременно с поддержкой готового проекта. В это время разработчики ищут новые пути, которые помогут улучшить UX/UI-дизайн. А затем — тестируют гипотезы, создают и внедряют новые подходы. Это помогает проекту оставаться актуальным.

34K

Как создать мобильное приложениеЧитать →

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

Теперь разберёмся, что нужно знать, чтобы стать дизайнером интерфейсов. Начнём с навыков:

  • насмотренность — чтобы отличать плохой дизайн от хорошего, уметь находить, адаптировать и внедрять тренды;

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

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

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

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

Программы для UX/UI-дизайнеров

Программа

Для чего нужна

Figma или Sketch

Создавать прототипы

Adobe XD

Adobe Photoshop

Обрабатывать фотографии, работать с растровыми изображениями

Adobe After Effects

Создавать анимации элементов интерфейса

Blender

Делать 3D-рисунки

Также советуем освоить приложения для аналитики и работы с данными. Например, MindMeister, Google Таблицы и другие.

Ответы на частые вопросы

Осталось обсудить то, что не вошло в статью, но интересует будущих UX/UI-дизайнеров в интернете.

Какие методы используются в UX-дизайне?

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

Пример метода: A/B-тестирование

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

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

Пример метода: 5-секундный тест

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

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

Пример метода: Eye-tracking

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

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

Пример метода: Сбор обратной связи

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

Каковы перспективы развития UX-дизайна в будущем?

UX/UI-дизайн — востребованная услуга. По данным hh.ru, middle-специалисту в этой сфере в среднем предлагают от 100 000 рублей в месяц. Более опытным — от 150 000 и выше. Это говорит о высоком спросе на хороших дизайнеров.

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

3K

Кто такой веб-разработчикЧитать →

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

Открыть диалоговое окно с формой по клику
Бесплатный вебинар
Бесплатный вебинар
Бесплатный вебинар
Научиться разработке
Подготовиться к ОГЭ/ЕГЭ
Получите план развития в программировании
  • Поможем с выбором IT-профессии
  • Вместе сделаем первый проект
  • Расскажем, как проходят занятия
Шаг 1 из 2
Шаг 1 из 2
Шаг 2 из 2