Что означает UX/UI и кто такой дизайнер интерфейсов
Вы сталкиваетесь с этим постоянно — когда заказываете еду через приложение, вызываете такси или покупаете что-то в интернет-магазине. Нажимаете кнопку с изображением корзины. Кликаете по баннеру со скидкой. Вводите свои данные в форму обратной связи. Всё это — детали графического интерфейса.
Графический интерфейс — это совокупность элементов во внешнем виде сайта или приложения, с которыми может взаимодействовать пользователь.
Парадокс, но хороший интерфейс — это не тот, что заставляет о нём думать. Наоборот: его задача — быть незаметным. Настолько, чтобы пользователь не отвлекался от своей цели, а быстро и без труда достиг её. А ещё лучше — заинтересовался чем-то ещё.
За всё это отвечает особая ветвь разработки — UX/UI-дизайн.
UX/UI-дизайн — это процесс, при котором специалист продумывает и создаёт удобный для пользователя, стильный и функциональный интерфейс.
Эти специалисты — и есть UX/UI-дизайнеры. У них важная задача — создать такой интерфейс, который понравится пользователю и внешне, и функционально. Поэтому их работу можно разделить на две сферы: UX и UI.
UX-дизайн (User Experience или пользовательский опыт) — это проработка грамотной навигации внутри сайта и добавление всех нужных функций именно там, где их ждёт пользователь.
Представьте, что вы хотите купить новую игру в Steam, но нигде не можете найти кнопку корзины. Или нажимаете «Заказать», однако попадаете не на форму оплаты, а на страницу с отзывами. Это путает и раздражает. Чтобы такого не было, разработчики продумывают UX-дизайн.
UI-дизайн (User Interface или интерфейс пользователя) — это создание привлекательного внешнего вида страницы по правилам дизайна и типографики.
Интерфейс должен быть приятен глазу. Даже если все кнопки на сайте ведут куда надо, пользователь всё равно может уйти с него из-за обилия элементов, нечитаемых шрифтов или ярких оттенков.
Так UX и UI, т. е. функционал и визуальная составляющая, работают в команде. Первый отвечает за то, как всё работает, а второй — за то, что мы видим. И именно UX/UI-дизайнер должен следить за балансом между этими двумя ветвями.
Что такое интерфейс
3 принципа хорошего UX/UI-дизайна
Теперь — подробнее о том, что можно считать хорошим интерфейсом, а что — нет. На самом деле здесь больше нюансов, но мы выделим три основных кита. Их важно знать каждому будущему UX/UI-дизайнеру.
Пользователь важнее всего
Как бы сильно разработчик ни хотел показать себя, он должен помнить, для кого делает интерфейс. Нажимать кнопки и заполнять формы будет пользователь. А значит, важно сделать сайт или приложение так, чтобы с ним было удобно взаимодействовать. Это не поле для экспериментов. Здесь важно угодить.
Так, чтобы интерфейс не путал, важно:
избегать двусмысленных надписей, например, на кнопках;
следить, чтобы все клики вели туда, куда ожидает пользователь;
показать пользователю, куда нажимать и т. д.
Конечно, не всегда разработчик может предугадать, как поведёт себя пользователь. Это и не нужно — для такого интерфейс тестируют на фокус-группе. Но об этом — позже.
Хороший интерфейс — это смесь психологии и типографики
Чтобы добиться качественного результата, не нужно изобретать велосипед. Правила, как создать удобный и приятный интерфейс, давно придуманы — ими пользовались ещё при вёрстке бумажных газет. В них было просто найти глазами нужную колонку или раздел, что и есть главная задача крутого интерфейса.
Вот несколько важных правил типографики:
элементы интерфейса не должны быть собраны в кучу, между ними должен быть «воздух»;
текст должен быть контрастным по отношению к фону;
шрифты должны быть приятны глазу и достаточного размера, чтобы между буквами и строками удерживалось правильное расстояние;
элементы должны располагаться ровно по отношению друг к другу, создавать композицию и т. д.
При этом стоит помнить, что у мозга человека тоже есть свои ожидания, которые важно оправдать. Например, красный цвет мы ассоциируем с отказом и агрессией. В то же время синий и зелёный — с согласием и принятием.
А теперь представьте, как человек оплачивает товар в интернете, и на его экране появляется окно с просьбой подтвердить заказ. Но кнопка «Подтвердить» красного цвета, а «Отмена» — зелёного. Скорее всего, человек автоматически нажмёт зелёную, потому что мозг воспринимает её как «да». И тогда он случайно отменит заказ и не поймёт, что произошло.
Чтобы такого не случалось, UX/UI-дизайнеры изучают поведение людей и их реакцию на разные элементы.
Тренды — уместно и без фанатизма
Быть на волне — это здорово, но с трендами стоит быть осторожным. Важно сперва проанализировать, к месту их применять или нет.
Представьте ситуацию: вы создаёте интерфейс для сайта крупной инвестиционной компании и хотите сделать трендовый дизайн. Например, сочные оттенки, крафтовые иллюстрации или весёлые микроанимации на кнопках. В итоге заказчик недоволен работой, потому что это не вяжется с его брендом. Такой подход был бы в тему магазина одежды или кафе, но здесь это неуместно.
Другая некрасивая сторона трендов — то, как быстро они распространяются. Как только кто-то найдёт свежее решение, будьте уверены — скоро многие подхватят его. И тогда интернет наполнится почти одинаковыми проектами. Поэтому сперва важно проанализировать всё и понять, стоит ли оно того.
Как создать сайт с нуля самостоятельно
Получи больше пользы от Skysmart:
-
Научись программировать на курсах разработки.
-
Выбирай из 130+ наставников по программированию.
Записывайся на бесплатные курсы для детей.
Этапы работы 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-дизайн. А затем — тестируют гипотезы, создают и внедряют новые подходы. Это помогает проекту оставаться актуальным.
Как создать мобильное приложение
Какими навыками должен обладать UX/UI-дизайнер
Теперь разберёмся, что нужно знать, чтобы стать дизайнером интерфейсов. Начнём с навыков:
насмотренность — чтобы отличать плохой дизайн от хорошего, уметь находить, адаптировать и внедрять тренды;
знание правил типографики — чтобы верстать приятные глазу прототипы, создавать композиции и делать интерфейс понятным на интуитивном уровне;
базовая психология — чтобы понимать, что может оттолкнуть или привлечь пользователя; выяснить, на что он обратит внимание в первую очередь и т. д.;
знания о маркетинге — чтобы анализировать продукт и сферу в целом, работать с ЦА и т. д.
Также специалисту важно уметь работать в программах для веб-дизайнеров. В таблице ниже оставляем самые популярные, без которых не обойтись даже на первых этапах карьеры.
|
Программы для UX/UI-дизайнеров |
|
|---|---|
|
Программа |
Для чего нужна |
|
Создавать прототипы |
|
|
Обрабатывать фотографии, работать с растровыми изображениями |
|
|
Создавать анимации элементов интерфейса |
|
|
Делать 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-технологии, хоть они и не так перспективны.
Кто такой веб-разработчик
Здорово, если эта статья помогла вам узнать больше о том, что такое UX и UI-дизайн. Если вы хотите развивать свой интерес к этой сфере, советуем заранее тренировать полезные навыки. В будущем это поможет быстрее освоить профессию.
