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

UX/UI-дизайн

Начнем с дизайна пользовательского опыта / пользовательских интерфейсов (User eXperience / User Interface). Эти два направления часто ставят вместе, но некоторая разница между ними все-таки есть. Цель UX-дизайна — развивать взаимодействие пользователя с продуктом так, чтобы росло удовлетворение пользователя, а вместе с ним и его лояльность продукту. Формулировка очень обтекаемая, но она четко выражает суть термина. UX-дизайн применим во всех сферах жизни, в отличие от UI-дизайна, который все-таки относится к цифровым продуктам. UI-дизайн сконцентрирован на самом продукте.

Обладатель премии UX Design Awards 2019 года — бимодальное слуховое решение, управляемое с помощью смартфона 

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

Кстати, сегодня мы как раз запустили новый факультет GeekUniversity — UX/UI-дизайн. Но об этом мы еще напомним — давайте продолжим рассказ о других «полезных» направлениях дизайна.

Промышленный дизайн

Пример интересного индустриального дизайна

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

Веб-дизайн

Когда веб-дизайнер добавляет пространства между элементами

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

Графический дизайн

Примеры логотипов в зависимости от свойств, которые нужно передать

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

Гейм-дизайн

Прекрасный мир Skyrim, созданный гейм-дизайнерами

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

Архитектурный дизайн

Традиционная архитектура в Голландии

Задача архитектора — спроектировать здания, на которые приятно смотреть и в которых удобно жить или работать. Вас вдохновляют масштабные задачи и нравится думать, что ваши творения будут приносить людям пользу десятилетиями, а то и веками? Нравится мысль, что вы будете влиять на облик городов? Интересуетесь урбанистикой и можете оценить каждую деталь архитектурного решения (например, высоту бордюра у тротуара) по практичности, а не только по внешнему виду? Можете не только изобразить здание на бумаге, но и представить его «в жизни», примерив к потребностям каждого из будущих гостей или обитателей? Если такие задачи отзываются желанием взяться за дело — смело развивайтесь в архитектурном дизайне.

Дизайн интерьеров

Когда решил сэкономить на услугах дизайнера

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

Световой дизайн

Световой дизайн фар Audi

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

Вам нравится играть со светом и вы знаете, как с его помощью выгодно подать любой объект? Вы видите магию света всюду — на фотографиях, в кино, в музеях, театрах и ресторанах? Развивайте свой талант в световом дизайне.

Ландшафтный дизайн

Сад камней

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

Экологичный дизайн

Зеленый дизайн в Сиднее

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

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

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

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

Как же избежать подобных ситуаций и не отпугнуть клиентов после их первого контакта с вашим продуктом?

Онбординг — что это и зачем он нужен?

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

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

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

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

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

Инструменты онбординга

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

Всплывающие подсказки (Tooltips) 

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

Первый интерактивный помощник от Microsoft Office

Более современный пример подсказок на сайте:

Подсказки от Facebook

Всплывающие окна (Pop-up) 

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

Интерактивные туры

Тур по продукту — это совокупность сразу нескольких всплывающих подсказок и/или попап-окон, которые появляются по мере продвижения пользователя по сайту и могут переключаться при помощи кнопки «Далее». Обычно, если пользователю не нужна подобная «экскурсия», он может отключить интерактивный тур, нажав на крестик (некоторые сайты используют кнопку «Все понятно!»). Иногда в этот инструмент также входит вступительный видеоролик с пояснениями о функционале интернет-ресурса.

Тур по панели инструментов 

Обучающий видео-ролик, встроенный в попап-окно

Пустые состояния 

Этот неочевидный инструмент буквально представляет собой пустую интернет-страницу: это может быть альбом, в который пока не добавлены фотографии, стена в социальной сети, где еще нет записей, страница ошибки, когда по запросу пользователя не удалось найти ответа. Однако эту пустоту можно выгодно использовать, если заменить ее призывом пользователя к действию: «Упс, здесь пока ничего нет... Создайте свой проект!»

Пример пустого состояния

Шкалы прогресса 

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

Шкала прогресса рекрутингового сайта 

Рассылки (или Lifecycle-рассылки) 

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

Пример обучающего письма от конструктора сайтов

Как настроить онбординг под пользователя?

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

• На какую аудиторию рассчитан продукт?
• Какую проблему пользователя должна решить работа с ним? 
• Какой цели пользователь хочет достичь в итоге?

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

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

Примеры сайтов с хорошим онбордингом пользователей

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

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

Онбординг поверх сайта

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

Здесь есть решение, которое не потребует особых дополнительных затрат — онбординг не в структуре самого сайта, а «поверх» него. Как, например, у Experrto.io —  конструктора интерактивных подсказок, который не требует знаний верстки, дизайна и программирования. 

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

Статистика онбординга в личном кабинете Experrto

Расширение доступно в интернет-магазине Google, и, пока оно находится в стадии открытого тестирования, его можно попробовать бесплатно.

Подведем итоги

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

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

Виталий Асташкин, психолог по образованию, после вуза работал педагогом-организатором. Когда захотел перемен — освоил дизайн интерфейсов в GeekBrains и начал фрилансить. Сейчас у Виталия за плечами несколько проектов для крупных заказчиков, таких как концерн «Калашников», Уральский вагоностроительный завод и правительство Республики Удмуртия.

— Виталий, первый вопрос о том, чем вы сейчас занимаетесь. В каких стартапах и над какими проектами работаете?

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

В одной команде мы создаем виртуальную химическую лабораторию: с помощью VR-очков и контроллера вы можете проводить химические опыты.

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

В другой команде — разрабатываем мобильное приложение для продажи одежды. Пользователь задает параметры: размер, цветотип и другие, — а программа показывает только подходящие модели.

Карточка товара в приложении для подбора одежды FitsMe 

— Расскажите о крупных проектах, в которых участвовали: для концерна «Калашников» и Уральского вагоностроительного завода. 

— Для «Калашникова» я готовил интерфейс AR-приложения, которое показывает на карте мира пути поставок продукции и сведения о заводах концерна. 

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

Экран с информацией о поезде. Проект для Уралвагонзавода

— Где можно посмотреть примеры ваших работ?

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

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

— Сколько времени вам понадобилось, чтобы выйти на профессиональный уровень в дизайне: с момента, когда вы начали целенаправленно этим заниматься, и до оплачиваемого заказа? Насколько легко или трудно было найти первую работу?

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

Где-то с августа 2018 я начал выполнять первые небольшие заказы от друзей и знакомых. К маю 2019 года — взял первый крупный заказ.

Самое сложное — когда кажется, будто ничего не знаешь и не умеешь. Вроде отучился, а открываешь тот же Dribbble, смотришь на все это великолепие и думаешь: «А вот я так не могу». Однако не стоит бояться!

В одном чате для дизайнеров искали желающих сделать интерфейс для AR-приложения. Я собрался с духом и вызвался одним из первых. Так я познакомился с ребятами из BoxGlass — команды, которая как раз готовила приложение для концерна «Калашников». 

С тех пор я с ними сотрудничаю на регулярной основе. Мы реализовали несколько интересных проектов, в том числе приложение для посетителей инвестфорума — по заказу правительства Республики Удмуртия. Через очки виртуальной реальности пользователь осматривает 360-градусную панораму здания, где можно увидеть этапы строительства, почитать инфографику.

Инфографика для панорамы 360°

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

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

Для подготовки иллюстраций, иконок и сложной графики пригодится Adobe Illustrator.

Для работы с растровой графикой — Photoshop. К слову, некоторые заказчики до сих пор просят исходники в формате .psd.

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

Вообще, чем больше у вас знаний в разных областях, тем лучше. Знакомы с HTML хотя бы на самом базовом уровне? Хорошо. Знаете, что такое Native React? Прекрасно. Прочли книги по копирайтингу? Отлично! 

Текст — неотъемлемый элемент дизайна и интерфейсов. При подготовке макетов, чтобы не вставлять «рыбу» текста или фразы вроде «тут будет заголовок», полезно уметь формулировать ключевые мысли. 

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

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

— С чего начался ваш путь в дизайн? Когда вы решили, что это всерьез и нужно получать дополнительное образование? 

— Путь начался еще в старшей школе, когда я делал афиши для мероприятий подросткового клуба. Позднее начал изучать веб и запустил городской портал. Даже делал макеты баннеров для местной лиги КВН. Не обошло меня и создание аватарок для групп «ВКонтакте» :)

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

— Почему выбрали именно UI, а не другие направления?

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

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

— Я окончил МЭИ по специальности «Психология». Еще во время учебы в вузе работал с подростками в молодежном клубе. Вскоре после получения диплома я нашел вакансию педагога в лицее в Звенигороде. Предложение оказалось более привлекательным, чем то, что можно было найти у нас в Краснозаводске, и я переехал. 

Не было такого, чтобы я решил для себя «После вуза стану педагогом!». Это был естественный ход событий. 

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

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

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

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

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

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

Прототипирование приложения для подбора авточехлов

— Какими были ожидания от учебы в GB и насколько они оправдались? Какие приобретенные знания и навыки считаете самыми ценными?

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

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

 — Вам в дизайнерской работе доводилось осознанно, специально применять свои знания в области психологии?

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

Важно помнить, что у каждого своя картина мира: если для одного человека «собачка» — это пекинес, для другого — замок на застежке-молнии. Не надо стесняться задавать наводящие вопросы и уточнять у клиента, что он имеет в виду. Например, он говорит: «Кнопка недостаточно агрессивна». Что это значит? Надо сделать ее более крупной? Изменить ее цвет или форму? Львиную долю вопросов можно снять простым уточнением.

— Как вы себе представляете карьеру в дизайне? Куда собираетесь расти и как развиваться дальше?

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

Планирую углубиться в UX, поведение и паттерны. Главное — не останавливаться.

— Спасибо, что поделились историей, примерами работ, наблюдениями. Успеха вам в профессии и творчестве!

Чему и как будут учить на новом факультете дизайна в GeekUniversity? Кем смогут работать выпускники? На вопросы отвечает Марине Мкртчян, руководитель образовательного направления «Дизайн» в GeekBrains.

— Марине, привет! Чем факультет дизайна в GeekUniversity отличается от профессий по направлению «Дизайн» в GeekBrains?

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

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

— Как построено обучение на факультете?

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

Третий и четвертый этапы — погружение в веб-дизайн. По ходу обучения студенты двигаются от простых задач (создание лендинга) к сложным, требующим погружения в продукт и аналитику (работа над сервисами). На пятом этапе — итоговая работа по заданиям от Delivery Club, Maps.me и других проектов в рамках Mail.ru Group.

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

— Четырнадцать месяцев — срок немалый. Почему именно столько?

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

Как учится человек, если верить таксономии Блума? Сначала ты узнаешь о существовании чего-то, например графического редактора Figma. Это «Знание» — этап, когда ты видишь, что есть вот такой прекрасный редактор с вот таким интерфейсом.

Вторая ступень — «Понимание». Ты знаешь, что именно можно делать в редакторе, и примерно догадываешься как.

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

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

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

— К слову о преподавателях, кто они?

— GeekBrains — часть Mail.ru Group, и преподавателей факультета мы подбирали прежде всего из дизайнеров компании. Декан — Артем Фенелонов — арт-директор Mail.ru Group. Но мы не ограничиваемся опытом одной организации. Чтобы студенты видели мир дизайна со всех сторон, у нас преподают владельцы дизайн-студий, успешные фрилансеры, дизайнеры из небольших компаний.

— Расскажи о «T-модальной системе компетенций», упомянутой на странице факультета. Что это такое и зачем это дизайнеру?

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

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

— Кто может учиться на факультете?

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

Записаться на обучение можно прямо сейчас.

Тексты на сайте должны быть для людей. С этим согласны и разработчики, и читатели. Но почему-то веб-мастера считают, что это правило относится только к контенту сайта, а про тексты интерфейса забывают. Но для пользователей сайт — единое целое, поэтому они хотят видеть вместо «Текущая сессия приостановлена» и «Internal Server Error» человеческие уведомления, которые помогут в работе. Как сделать сайт более дружелюбным, выясним в этой статье.

Пишите естественно

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

Стоп-слова в интерфейсе. Источник

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

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

Упрощайте интерфейс

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

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

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

Уберите дублирование

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

Объясняйте

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

Можно добавить объясняющие подсказки к каждому полю. Они помогут понять, зачем требуется информация. Например, рядом с полем «ФИО» укажите, что товар передается по паспорту. Тогда пользователь будет сам заинтересован указать верные данные. Объясняющие подсказки можно прописать сразу или показывать их, когда посетитель неправильно заполнил форму.

Примеры объясняющих подсказок. Источник

Успокойте пользователя

Отдельный раздел — ошибки и предупреждения. Их тоже пишут в отделе разработки, поэтому в них много технических терминов и фраз на профессиональном языке. Обычному человеку тяжело понять, что означают сообщения «We are currently unable to check for updates» или «Try notifications for only your most important email». Часто предупреждения просто пугают.

Чтобы помочь посетителю, нужно ответить на вопросы «Что произошло?» и «Что делать дальше?». Если сайт завис, напишите: «На сайте возникла ошибка, перезагрузите браузер». Если файл назван некорректно: «Исправьте имя файла. Оно не может начинаться с цифры или символа». Дополнительно стоит рассказать, почему возникла ошибка, что будет дальше и как этого избежать впоследствии. Так вы успокоите посетителя и подскажете, что делать.

Делайте понятным текст на кнопках

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

Шутки и эмоции на кнопках неуместны. Пользователи не ожидают встретить юмор в интерфейсе, поэтому часто не понимают предназначение кнопки. Оставьте просто «Купить» вместо «Стань владельцем этого чуда». Если хотите добавить на сайт эмоций, используйте для этого пространство вокруг кнопок: разместите пояснительный текст или всплывающее окно. Например, «Теперь ты будешь быстрее ветра», когда пользователь кладет в корзину гироскутер.

Шпаргалка

1. Пользователи не разделяют тексты интерфейса и контент на сайте. Для них вся картина выглядит целостно: дружелюбно или нет.
2. Пишите простым человеческим языком. Не используйте в интерфейсах стоп-слова, оставьте их для общения с профессионалами.
3. Не заменяйте спецтермины на синонимы бездумно. Подумайте, зачем эта информация пользователю, и перескажите с его точки зрения.
4. Упрощайте интерфейс, убирайте избыточность. Проектируйте путь пользователя таким образом, чтобы ему пришлось принимать как можно меньше решений.
5. Отойдите от «бабушкиного» интерфейса, особенно если ваша аудитория — продвинутая. Уберите информационный шум в виде поясняющих слов «введите», «нажмите», «выберите» и подобных. Пользователи обычно знают, что нужно делать с чекбоксами, полями и радиокнопками.
6. Объясняйте посетителям, зачем вам данные о них. Так вы избежите негатива и получите нужную информацию.
7. При ошибках и предупреждениях сперва успокойте пользователя. Сразу сообщите, что случилось и как ему действовать дальше. Дополнительно можно рассказать, почему возникла ошибка и как ее избежать в дальнейшем.
8. Уделите внимание кнопкам. Текст на них делайте коротким и понятным. Пишите глаголы в неопределенной форме: купить, заказать. Избегайте эмоций и шуток, чтобы не сбивать с действия.

Статья основана на материалах Максима Ильяхова, размещенных в разделе «Улучшить интерфейс» Советов Главреда.

Один из наших читателей, Александр Морозовас, перевел статью Дженни Гоув “What Makes a Good Mobile Site?”. Предлагаем его перевод вашему вниманию.

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

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

Домашняя страница и навигация по сайту

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

Пользователи должны видеть call-to-action в центре страницы

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

Сделайте меню коротким и удобным

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

Сделайте простым возврат к домашней странице

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

Не позволяйте рекламным баннерам скрывать контент

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

Сделайте поиск по сайту заметным

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

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

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

В примере слева поиск реализован грамотно: показываются только детские вещи (пользователь делает поисковый запрос в интернет-магазине детской одежды). Справа — пример неудачно реализованного поиска: он показывает все, где есть слово «дети».

Разработайте фильтры для простых запросов

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

Покажите пользователям, как правильно делать поисковые запросы

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

Коммерция и конверсия

Поймите, куда хочет попасть и что там найти ваш клиент, и помогите ему в этом.

Позвольте пользователям просматривать сайт до регистрации

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

Создайте для пользователей возможность использовать гостевые аккаунты

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

Используйте существующую информацию о пользователе для его удобства

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

Используйте кнопки с призывом позвонить для комплекса задач

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

Сделайте простым переключение между устройствами

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

Форма ввода

Обеспечьте удобные переходы между формами.

Сделайте ввод информации удобным

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

Упрощайте ввод информации

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

Предложите визуальный календарь для выбора даты

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

Минимизируйте ошибки в формах

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

Повышайте КПД дизайна

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

Юзабилити и форм-фактор

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

Оптимизируйте ваш сайт

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

Не заставляйте пользователей работать с неудобными им масштабированием и прокруткой

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

Добавьте возможность увеличить фотографию продукта

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

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

Подскажите пользователям, какая ориентация экрана лучше подходит для просмотра сайта

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

Пусть у пользователя будет одно окно в браузере

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

Избегайте надписи «Полная версия сайта»

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

Объясните пользователю, почему вам важно знать его местонахождение

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