Статья

Основы UX для верстальщиков

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

Виктор Папанек


Лена Шпилевская, Middle Markup Developer & UX Designer компании PioGroup и преподаватель Basic HTML/CSS в Spalah на воркшопе “Основы UX для верстальщиков” рассказала, чем отличается UX от UI, что эти понятия связывает и как основы проектирования делают работу верстальщика эффективнее. А мы записали для вас самое главное. 

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

Определяя понятие User Experience, многие привыкли трактовать его неверно: как опыт взаимодействия пользователя с интерфейсом или работу с дизайном постфактум его создания.

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

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

Эффективный юзер — это юзер, удовлетворяющий цели бизнеса. 

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

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

Как знания UX оптимизируют работу верстальщика 

Я считаю, что сверстать можно все. 

Вопрос лишь в объеме временных затратах. 

В идеальном мире разработки верстальщик должен знать UX, а дизайнер обязан владеть основами верстки.

Ценность совмещения UX & Markup в том, что если верстальщик создает варфреймы, то сверстать их ему точно не составит труда. Ведь он создал архитектуру и четко знаете, как все должно быть построено. 

К сожалению, отдельная специальность “UX Designer” существует исключительно в рамках корпораций в развитых странах. 

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

Разработка варфреймов как основная часть работы UX-дизайнера 

В целом, схема работы UX-дизайнера выглядит следующим образом: 

1. Сбор данных: анализ рынка, конкурентов, создание портретов пользователей. 

2. Прототипирование: разработка скетчей, варфреймов и прототипов.

3. Тестирование и утверждение результатов работы.

4.Передача вайрфреймов или прототипов UI-дизайнеру. 

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

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

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

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

Почему интерфейс нужно тестировать и как в этом помогает UX

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

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

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

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

Подпишись на еженедельный дайджест и получай на почту:

лучшие статьи, видео вебинаров, предстоящие события, интервью с лидерами индустрии

Наши каналы в социальных медиа: