Ирен Перейа, главный специалист по стратегиям и опыту взаимодействия дизайнерского агентства Fantasy Interactive, дает 10 полезных советов, которые помогут вам в создании потрясающего интерактивного интерфейса для пользователей

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

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

1. Без шуток: творите для пользователей

Раньше, когда технологии онлайн взаимодействия находились в зачаточном состоянии и мы уделяли не слишком много внимания тем, для кого мы работаем, пользователям приходилось тратить не мало времени на изучение интерфейса, чтобы в итоге найти то, что нужно. Когда посетители оказывались в затруднительном положении, они думали, что просто не до конца разбираются в технологиях и том, как осуществлять навигацию в Интернете. Но теперь, когда число сайтов постоянно растет, а мобильные устройства и планшетные компьютеры используются повсеместно, пользователи не слишком расположены к «обучению». Большинство из них быстро теряют интерес и даже сердятся, если чувствуют, что продукт, приложение или веб-сайт выполнены некачественно – и это справедливо.

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

Именно стратегия «создавать для пользователей» руководила каждым нашим решением при работе над Civil War 150. Наибольшую сложность представлял невероятный объем исторических фактов и статистических данных, связанных с Гражданской Войной. Дабы сделать сайт интересным и читабельным, мы использовали яркую инфографику как путеводитель по 150 главным темам Гражданской Войны, включая такие как «Кем они были», «Оружие войны», «Как они умирали», «5 смертельнейших сражений», «Расплата за войну» и «Воины Вест-Пойнт». Дав пользователям то, что они хотят, мы сделали изучение Гражданской Войны увлекательным, информативным и интересным как для тех, кто глубоко интересуется этим периодом, так и для семиклассников, проходящих его в школе.

2. Проводите дополнительную работу

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

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

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

3. Будьте на стороне посетителя

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

4. Забудьте о Нэнси, думайте о пользовательских типах

Понятие «персоны» в веб-дизайне жизненно важно, когда вопрос заходит о структурировании контента. Рассматривайте его как единое целое и всегда думайте о том, чего хотят люди. Это помогает выстроить содержимое по приоритетам и конструировать сайт вокруг целей пользователя. Однако традиционное представление о персоне – «Зовут Нэнси, ей 28-35 лет, водит авто эконом-класса, есть компьютер четырехлетней давности, который она использует главным образом для электронной переписки, зарабатывает $30 – 50 тыс. в год и ищет магазин дешевых авиабилетов, чтобы слетать к маме во Флориду» – дает крайне слабое представление о фактическом поведении пользователя.

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

5. Чем меньше, тем лучше

Вы можете подумать, что это слишком очевидно и не требует дальнейших объяснений. Однако большинство сайтов и приложений по-прежнему истолковывают это неверно. Суть в том, чтобы сократить количество операций, требуемых от пользователя, до минимума. Я не устаю это подчеркивать. Избавьтесь от всего излишнего и беспорядочного, что не приносит пользы или, что еще хуже, лишь отвлекает и сбивает пользователей с толку. Знайте наверняка, как пользователи должны перемещаться по вашему сайту или приложению и ведите их по этому маршруту, как если бы вы держали их за руку все это время. Повторюсь, пользователи хотят простоты, понятности и максимально возможной быстроты. Если они будут знать, что произойдет дальше еще до того как нажмут на что-нибудь, они будут счастливы.

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

6. Представьте, что работаете на Fisher Price

Наш гендиректор Дэвид Мартин любит говорить одну вещь – и в этом я с ним полностью согласна – «Интерактивность должна быть такой же, как у Fisher Price”. Другими словами, когда вы делаете элементы управления крупными и громоздкими (точно детские игрушки) и разрабатываете дизайн для «толстых» пальцев, вы автоматически делаете его более простым. Как нам следует это истолковать с точки зрения дизайна и интерактивного пользовательского взаимодействия?

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

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

Когда в начале этого года на Японию обрушилось землетрясение в 9.0 баллов, предложения помощи и слова поддержки сыпались со всего света. Совместно с Google мы разработали глобальную платформу для обмена информацией и отправки сообщений в Японию. Воспользовавшись примером Fisher Price, мы сделали для сайта большие кнопки для перенаправления сообщений по группам «Любовь» и «Надежда», а также гигантские поля ввода, предлагавшие посетителям «Оставить сообщение» и «Сделать пожертвование».

7. Берите пример с планшетных компьютеров

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

Те же вопросы мы задавали себе, когда объединились с CBSNews.com в работе над элегантным и визуально богатым новостным онлайн-сервисом для зрителей американской программы новостей №1, «60 минут».

8. Интерфейс требует дизайна

Заполнение «рыбой» (lorem ipsum) пустого пространства между серыми прямоугольниками и рядами ссылок – это еще не дизайн. Визуальная иерархия, группирование контента, расстановка интервалов, позиционирование и масштабирование – все это должно быть сделано в самом начале работы над проектом, еще до того, как за дело возьмется визуальный дизайнер. Если ширина каркаса, над которым вы собираетесь работать, соответствует задуманной ширине сайта или приложения, а текст высотой 12px в шаблоне соответствует 12 пикселям в конечном дизайне, вы можете приступать.

9. Общайтесь со всеми

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

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

10. Не оценивайте собственную работу

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

Материал предоставлен сайтов CMSmagazine.ru.