Сайты, приложения и довольные пользователи: что такое UI- и UX-дизайн

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

• UI/UX: разбираемся с понятиями
• Как создать интерфейс
• Что нужно пользователю
• Делаем наброски
• Внешний вид
• Все проверяем
• Почему UI и UX иногда разделяют
• «Я у мамы дизигнер»: С чего начать

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

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

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

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

Рассудите сами: у какого сервиса вы заказали бы еду: у того, где пять минут не получается подтвердить адрес доставки или у исправно работающего? 

За все эти задачи и отвечает UI/UX-специалист. О функционале и этапах работы над продуктом расскажем далее. 

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

UI/UX: разбираемся с понятиями

• UX (User experience, англ. «пользовательский опыт») — отвечает за удобство пользования сайтом. UX-специалист изучает пожелания целевой аудитории и смотрит на решения конкурентов.
• UI (User interface, англ. «пользовательский интерфейс») — отвечает за визуальную составляющую сайта или приложения. Дизайнер работает с цветами и их сочетаниями, шрифтами, кнопками и т. д.

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

Как создать интерфейс

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

Что нужно пользователю

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

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

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

Еще на этапе подготовки необходимо ввести метрики эффективности будущего дизайна — например, количество скачиваний.

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

Делаем наброски

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

На этом этапе можно потихоньку отправлять макеты разработчикам, чтобы они оценили, получится ли это реализовать или нет.

Детализация увеличивается постепенно — через согласование с заказчиком и параллельное тестирование с отделом разработки. 

Внешний вид

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

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

Все проверяем

Когда все собрано и вроде бы работает, приходит время тестирований. 

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

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

Почему UI и UX иногда разделяют

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

В случае разделения труда процесс работы будет выглядеть примерно так:

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

UI-дизайнер доводит работу до конца и занимается оформлением. 

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

«Я у мамы дизигнер»: С чего начать

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

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

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

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

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

Много работайте в Figma; этот сервис — хлеб и соль любого профессионального дизайнера. Если хотите достичь минимальных результатов, игнорировать Figma не стоит. 

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

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

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

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

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

Оформите вклад «Зимний доход с Халвой» на выгодных условиях, чтобы у вас всегда были деньги про запас. 

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

Не стоит пренебрегать опытом других людей. Подпишитесь на каналы известных UI/UX-дизайнеров. Например, один из работников студии Артемия Лебедева, Кирилл Олейниченко рассказывает о суровых буднях UX-дизайнера в своем телеграм-канале. 

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

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