Разработка алгоритмов взаимодействия никогда не была задачей из простых, так как это предполагает анализ пользовательского поведения, тщательное планирование и т.п. Появление новых инструментов и шаблонов проектирования несколько упростило задачу, но ненамного.
Сегодня сложно кого-то удивить глянцевыми изображениями, плавными эффектами при наведении курсора и неожиданной анимацией. Поэтому главный вопрос остается прежним: как разработать опыт взаимодействия, который бы гарантировал конверсию, и попутно улыбки пользователей.
Тот, кто знаком с распространенными дизайнерскими просчетами, с меньшей вероятностью допустит их сам. Чтобы упростить процесс разработки взаимодействий — и дать почувствовать, что вы не одиноки в некоторых своих ошибочных представлениях — ниже представлены ошибки интерактивного дизайна, которые часто встречаются в современных сайтах.
1. Сайты, отягощенные инновациями
Дизайнеры — люди креативные. Они не только стремятся к самовыражению в своей работе, но и зачастую прибегают к инновациям, чтобы их дизайн отличался от того, что делает большинство конкурентов.
Однако в IxD инновации не всегда бывают уместны и даже могут навредить сайту. Пользователи всегда довольно консервативны. Рэнди Дж. Хант, креативный директор Etsy’s и автор «Product Design for the Web», призывает разработчиков «не мудрствовать лукаво» с разными новшествами. В своей статье, озаглавленной «Hey, Designers: Stop Trying To Be So Damned Clever», он исчерпывающе объясняет, почему важно не переусердствовать. Веб-дизайн должен быть не столько эффектен, сколько эффективен, — настаивает Хант. Поэтому лучше избегать излишнего энтузиазма в том, что касается дизайнерских инноваций».
Наглядной иллюстрацией этих предостережений служит сайт Iotorama: внешне все красиво, душевная музыка, но вот задумка дизайнеров с двигающимися шарами не до конца понятна. Не поймите превратно, проект фантастический и сверхкреативен. Удачно реализована идея геймификации, но вот интерфейс трудно назвать интуитивно-понятным.
Другой пример — проект Safety on the Slopes. Его разработчики представили лаконичную интерактивную веб-графику, которая информирует пользователей об опасностях, связанных с зимними видами спорта. Занятный сайт, помимо инноваций он вполне понятен и определенно создает эффект присутствия.
2. Сложная навигация
Совет главного креативщика Etsy’s избегать «излишнего мудрствования», очевидно, касается и навигации. Многие дизайнеры пытаются экспериментировать с эклектическими названиями для страниц, но желаемый эффект достигается не всегда.
Сайт Chijoff заставляет посетителей задаться вопросом о том, что, собственно, предлагает эта компания и как ее нанять. Требуется несколько кликов, чтобы догадаться, что страница «Co-Create» — это эквивалент «Services» (услуги). И даже по прочтении целой страницы остаются сомнения относительно того, что необходимо делать дальше… в подвале страницы присутствует небольшая форма подписки на новости и советы.
На странице «Contact» нет формы — лишь почтовый и электронный адрес. Очевидно, что представители uxguide.ru не озаботились тем, как клиент мог бы с ними быстро и удобно связаться, чтобы, например, нанять эту компанию.
Вкладка «Universe» на сайте Maison Margiela ведет на станицу компании в Facebook, что довольно непривычно.
Такое видение разительно контрастирует с идеей разработчиков legworkstudio: заметна оригинальность и творческий подход, вкупе с понятной и недвусмысленной навигацией, так что посетители не заблудятся.
3. Беспорядок на экране
Когда-то было популярно размещать максимально возможный объем контента на сайте выше линии сгиба. Сейчас эта тенденция сошла на нет, но некоторые все еще допускают такую ошибку.
Дизайнер этого интернет-ресурса, очевидно, старался не выходить за рамки простой цветовой схемы, но для многих блоков, логотипов и шрифтов на этой странице почему-то решил выбрать другие цвета, что сделало общее оформление несколько аляповатым.
В поисковой строке значится привлекающий внимание вопрос: «So, what are you wishing for today?». Но вместе с тем дизайн оставляет ощущение чего-то устаревшего и неопрятного.
Другое дело — EBay. Сайт крупного онлайн-ритейлера мог бы быть переполнен множеством изображений товаров, промоакциями и бесчисленными CTA-кнопками, однако вместо этого веб-дизайн достаточно прост, в нем нет ничего лишнего. С акцентом на элементах, которые клиенты, согласно замыслу представителей компании, должны увидеть первыми. Четкие указания относительно дальнейших шагов пользователей.
4. Контраст
Это одно из самых эффективных средств для того, чтобы установить визуальную иерархию и привлечь внимание пользователя к отдельным элементам. В веб-дизайне для обеспечения контраста используется не только цвет, но и масштаб, форма и место.
Подходящий пример — Modernthemes.net. В таком дизайне ощущается определенная целостность и последовательность, но фон и кнопки как-то не очень располагают к размещению заказа.
Сайт rflx.bjornborg.com выступает как антипод предыдущей веб-страницы. Цветовая схема весьма скудна, но итоговый результат радикально отличается от modernthemes. К тому же креативный эффект скроллинга чрезвычайно уместен в контексте описания и демонстрации любопытной особенности товара — отражающего материала.
5. Пренебрежение стилем форм
Дизайн формуляров и регистрационных форм — одна из фундаментальных основ опыта взаимодействия. У каждого веб-uxguide.ru есть определенная цель — будь то лидогенерация, прямые продажи товаров или информативность.
К сожалению, существует множество веб-ресурсов с глянцевыми домашними страницами и уже набившими оскомину длинными формулярами, дополненными усложненными «капчами». Пользователи, не имеющие твердой мотивации, попросту закроют вкладку с этим сайтом.
Эффективные кроссбраузерные решения, подобные JCF, должны уже свести на нет стандартно-уродливые формы и позволить сделать шаг в направлении более иммерсионного опыта взаимодействия.
Еще один раздражающий момент — излишне требовательный или плохо протестированный формуляр. Регистрационная форма на сайте sketchybusiness.io подчеркивает все пустые поля, даже если они необязательны для заполнения.
Для сравнения: главная особенность формы uxguide.ru mostlyserious.io — эффект при наведении курсора. А совет «Don’t be shy» вносит элемент юмора.
И в заключение…
Не пренебрегайте тестированием, так можно обобщить напутствия Рэнди Дж. Ханта. Ведь насчёт того, что вам кажется важным и ценным, у клиентов может быть своё собственное, противоположное мнение.
Важно определить, в чем именно загвоздка: в навигации, вычурных параллакс-эффектах или медленной загрузке видео.
Один из главных плюсов тестирования состоит в том, что оно позволяет увидеть веб-дизайн глазами пользователя, учесть их интересы и внести исправления.
Вовсе необязательно сдерживать творческие порывы, просто учитывайте, что определенные аспекты могут быть лишними и затруднять взаимодействие с сайтом.
Источник: rusability.ru
