Монетизация мобильного приложения: как получить награду за свой труд?
Previous
выбрать за меня
Facebook улучшил локальный таргетинг
Next
веб-дизайн
Юзабилити

5 убийственных ошибок в интерактивном дизайне

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

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

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

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» нет формы — лишь почтовый и электронный адрес. Очевидно, что представители сайта не озаботились тем, как клиент мог бы с ними быстро и удобно связаться, чтобы, например, нанять эту компанию.

веб-дизайн

Вкладка «Universe» на сайте Maison Margiela ведет на станицу компании в Facebook, что довольно непривычно.

веб-дизайн

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

3. Беспорядок на экране

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

веб-дизайн

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

В поисковой строке значится привлекающий внимание вопрос: «So, what are you wishing for today?». Но вместе с тем дизайн оставляет ощущение чего-то устаревшего и неопрятного.

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

4. Контраст

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

Подходящий пример — Modernthemes.net. В таком дизайне ощущается определенная целостность и последовательность, но фон и кнопки как-то не очень располагают к размещению заказа.

веб-дизайн

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

веб-дизайн

5. Пренебрежение стилем форм

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

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

Эффективные кроссбраузерные решения, подобные JCF, должны уже свести на нет стандартно-уродливые формы и позволить сделать шаг в направлении более иммерсионного опыта взаимодействия.

веб-дизайн

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

веб-дизайн

Для сравнения: главная особенность формы сайта mostlyserious.io — эффект при наведении курсора. А совет «Don’t be shy» вносит элемент юмора.

веб-дизайн

И в заключение…

Не пренебрегайте тестированием, так можно обобщить напутствия Рэнди Дж. Ханта. Ведь насчёт того, что вам кажется важным и ценным, у клиентов может быть своё собственное, противоположное мнение.

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

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

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.
    Твой голос очень важен.
    Мы постоянно пытаемся сделать наш сервис лучше. Опрос займет не более 3х минут. Многие читатели уже с нами поделились, оставь свой голос и ты.