Смотря на примеры плохого дизайна, которые стоят рядом с примерами хорошего дизайна, становится понятно, что это не только забавно для просмотра, но и отлично демонстрирует важные уроки для дизайнеров.
Они осветляют подводные камни в работе дизайнера для того, чтобы избежать и дать нам понять, как правильно перевести теории дизайна в решения, которые работают в реальном мире. Джаред Спул (Jared Spool), американский писатель, исследователь и эксперт по удобству использования («usability»), однажды сказал: «Хороший дизайн, когда он выполнен правильно, становится невидимым. Только когда он сделан бедно, мы замечаем его». Что же, давайте посмотрим на пять примеров очевидно плохого дизайна и прольем свет на то, как хороший дизайн может работать сам на себя. А также извлечём несколько уроков, как мы все можем создавать прекрасный и невидимый опыт для наших пользователей.
1.Информационная перегрузка
Плохой пример: Дорожные знаки на парковке в Лос Анджелесе (Los Angeles, далее – LA)
Дорожные знаки на парковках LA являются олицетворением информационной перегрузки уже не первое десятилетие. Они всегда были трудны для понимания, потому как правила дорожного движения сами по себе сложны, что в результате приводит к необходимости передачи большого количества информации на маленькой площади. Насколько эти знаки запутаны? Как показывает практика – очень. Можете убедиться в этом, глядя на пример такого знака с 2010 года.
Поскольку такие знаки на парковках ЛА до сих пор существуют, то, пожалуй — это яркий пример.
Представьте на минуту, что Вы – водитель, который едет вдоль дороги во вторник, в 9 утра. Можно ли Вам припарковаться в этом месте? То, что звучит как простой вопрос, требует большого процесса размышления для ответа. Как дизайнеры, мы часто сталкиваемся с ситуациями, где мы должны передать много информации на маленьком пространстве. Знаки на парковках LA могли бы быть крайним случаем, но часто разработка дизайна для мобильных приложений означает столкновение с такой же проблемой. Можно ли найти выход в таких ситуациях: для знаков на парковке и дизайнеров в целом?
Хороший пример: Дорожные знаки Никки Сильянтенга (Nikki Sylianteng)
Разработка знака для отображения всей информации, которая будет легка для понимания, звучит как нереальная задача. Но вот что сделал бруклинский дизайнер Никии Сильянтенг.
Вариант, который предложил Никки, в конечном счете был использован на парковках ЛА в тестовом режиме.
Одна из причин удачного дизайна Никки– это использование в работе принципа, что называется «ориентация на пользователя»: дизайнер дает водителям просто понять, когда они могут парковаться. Ведь всё, что нужно водителям – это ДА или НЕТ, а именно такой знак им в этом легко поможет.
Кроме того, дизайн Никки особенный тем, что вместо текста, она использовала визуализацию для передачи информации. Результат – впечатляюще интуитивный: зеленый для «да», красный для «нет». Этот дизайн доступен также для понимания людям, у которых есть проблема различия цветов, ведь в секторе «нельзя парковаться» мы видим легко определяемые полосы.
Сейчас, когда вы смотрите на знак, вы знаете, что парковка во вторник, в 9 утра не разрешена.
Бары доказывают, как на первый взгляд – всё просто.
Извлеченный урок: лучшая практика
- Необходимо понимать, что именно нужно вашим пользователям, затем разработать дизайн, основанный на этом. Это помогает уменьшить информационную перегрузку.
- У вас много информации для передачи вашим пользователей? Попробуйте визуализацию вместо текса. Изучайте больше про визуализацию данных здесь. https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/data-visualization-for-human-perception
2. Скрытая навигация
Плохой пример: LazorOffice.com
Придуманный в 1998 году Винсентом Фландерсом с компании Web Pages That Suck, термин «скрытая навигация (далее — СМН)» относится к кейсам, когда назначения посыла невидимо, пока пользователь не кликнет на это или не наведет курсор мыши. Термин «скрытое мясо» произошел от ситуации с подачи еды в столовых общеобразовательных американских школ: мясо для учеников подавалось так, что совсем не был понятен его первоначальный вид. Использование в дизайне таких элементов плохо влияет на результат, потому что они снижают понятность навигации в целом. Это добавляет когнитивной нагрузки пользователям, потому что теперь они должны догадаться, как именно передвигаться или какой клик ведет за собой определенное действие.
Пока большинство элементов СМН располагаются на старейших веб-сайтах, они внезапно становятся распространенными в том числе и на современных вебсайтах. Взять к примеру Lazor Office — дизайнерскую фирму, которая создает готовые дома.
На домашней странице LazorOffice.com располагается сетка скрытой тайной навигации. Как вы можете увидеть, эта сетка дает очень мало информации о том, куда нужно двигаться. Вместо этого, вас ждет 9 изображений, который заставляют вас гадать, что делать, а не взаимодействовать с сайтом.
После полосы разделения их домашней страницы, вас ждет сетка миниатюрных изображений. Доступны ли они? Да, доступны. Если вы, конечно, догадаетесь передвинуть курсор вашей мыши на изображение, которое потом сменится на точку. Но что же произойдет, если вы нажмете на картинку?
«Нажать, чтобы узнать» — никогда не было хорошим решением для UX (user experience). Скорее всего, ваши пользователи откажутся от такой навигации и найдут альтернативное решение на сайте ваших конкурентов.
Хороший пример: Карточки курсов на веб-сайте The Interaction Design Foundation.
Слава Богу, проблемы СМН легко решаемые. Ключ к решению — это четкое осознание того, что у вас должны быть предельно ясные метки на ссылки. Простое добавление «Просмотреть проект», что появляется при наведении курсора мыши, намного улучшит удобство пользования страницей Lazor Office.
Наши карточки курсов также НЕ секретны, как и наши ссылки.
Для карточек курсов на сайте Interaction Design Foundation, у нас есть не только «Просмотреть курс» на кнопках для идентификации действия, которое произойдет. Мы также имеем всплывающее окно с текстом «Перейти к курсу». Многие веб-сайты следуют такому же принципу и вы должны тоже, для максимизации удобства пользования вашим веб-сайтом.
Извлеченный урок: лучшие практики
Всегда ставьте метки на ваши ссылки! Поверьте, вам не понравилось бы есть скрытое мясо. Точно так же и вашим пользователям совсем не понравится кликать на скрытые ссылки.
-
Создание дизайна, который добавляет преграды к совершению действий.
Плохой пример: iFly50.com
С особой осторожностью всем дизайнерам необходимо относиться к созданию дизайна, который может добавить несколько преград к совершению действию. Только не в том случае, если этот элемент нужен для отговаривания пользователя от совершения действия. К сожалению, бывают случаи, когда мы можем даже неосознанно добавить некоторые помехи к действиям (в основном из-за эстетики или новизны), которые приводят к пагубному UX.
Ярким примером такого случая есть продукт iFly50.com, который был создан в честь юбилея журнала iFly от KLM. На этом сайте вы сможете увидеть 50 мест для путешествий, используя вертикальную прокрутку, а в некоторых пунктах назначения (как показано на примере ниже) появляется кнопка внизу, которая заставляет пользователя удерживать её несколько секунд при желании просмотреть большее количество фотографий.
Создатели сайта в самом деле ждут, что при каждом желании увидеть больше фотографий, пользователи будут удерживать кнопку несколько секунд.
Добавление, казалось бы, нескольких секунд к каждому действию, всерьез может испортить UX. Можно только представить, насколько неудобным был бы серфинг в интернете, если при каждом переходе по ссылке, вам нужно было удерживать ее несколько секунд. После нескольких щелчков мышью, вам это надоест и вы прекратите все действия в интернете. Сейчас дизайнеры стараются следовать модным трендам и используют в своей работе новые стили и дизайны. В этих случаях очень важно проявлять осторожность, особенно если ваш дизайн добавляет несколько секунд к каждому действию. Чаще всего, проверенные решения (например, обычные клики или привычные щелчки) работают отлично.
Хороший пример: эластичная прокрутка на iOS
Обязательно нужно знать, что если умеренно и разумно добавлять «помехи», то на выходе можно получить восхитительный дизайн.
У корпорации Apple есть отличный продукт, который был разработан для мобильной операционной системы IOS. Этот продукт называется «эластичная прокрутка». Смысл такой прокрутки в том, что когда вы попадаете в определенное место или ситуацию (например, в конец веб-страницы), вам становится труднее прокручивать страницу. То есть, к действию пользователя осознанно и намеренно добавляется помеха.
Вы можете увидеть это в изображении выше, где помеха происходит, когда пользователь прокручивается до конца веб-страницы. Помехи были добавлены, чтобы указать ситуацию, когда прокрутка больше не разрешена. Эффект, полученный от помехи — это интуитивный опыт.
Извлеченный урок: лучшая практика
Избегайте добавления каких-либо помех к действиям пользователя, насколько это возможно, и тщательно внедряйте его, когда у вас нет альтернативы.
-
«Умный» дизайн: когда удобство использования не имеет значения
Плохо: Bolden.nl
Случается, что «умный» дизайн вполне способен навредить UX. Кроме того, сами дизайнеры очень часто делают свой выбор в пользу такого решения, что делает ситуацию еще опасней. Прерогатива «умного» дизайна в том, что это те крошечные графические чудеса, которые приносят нам улыбку. К сожалению, не все люди на планете Земля — дизайнеры. Важно заметить, что часто «умные» дизайны не являются хорошими. Особенно, когда они могут создать сложности с доступностью, удобством использования и открытостью.
Отличный пример вышесказанного – голландский сайт развития и стратегического дизайна Bolden:
Можете ли вы сказать, что именно пытается донести до вас домашняя страница? Скорее всего, нет. Ведь для того, чтобы понять послание и растолковать его правильно – вы должны перевести курсор мыши в один из углов страницы.
Сразу видно, что это «умный» дизайн, ведь так? Да, безусловно. Но также понятно, что это абсолютно плохой дизайн!
Вот вам отличный пример проектирования больше для дизайнера, чем для пользователя: у веб-сайта серьезные проблемы с понятностью его заголовков, которые возникли из-за стремления дизайнеров создать что-то новое. Дизайнер, который проектировал сайт также оставил текст, чтобы сообщить пользователям, что они должны перемещать курсор мыши в углы. Это дает понимание, что открытие заголовков зависит от случайности. В случае, если заголовок таки отображается, мы видим перекрывающийся текст, который создает плохой контраст между текстом и фоном. Все это делает веб-сайт неудобным и непонятным для пользователя.
Хороший пример: CultivatedWit.com
Веб-сайт Cultivated Wit`s – это отличный пример того, как «умный» дизайн не должен влиять на удобство пользования.
Домашняя страница Cultivated Wit отображает изображение совы.
На домашней странице Cultivated Wit вы можете увидеть изображение совы, которое меняется, когда ваша мышь попадает на неё.
Сюрприз! Сова моргает вам, когда вы наводите курсор на неё. Обратите внимание на разумное распределение белого пространства.
Ключевая разница здесь в том, что это не важная часть веб-сайта, поэтому такой вариант не уменьшает удобство пользования, даже если пользователь не заметит этот элемент «умного» дизайна.
Разница между этим дизайном и дизайном Bolden в том, что сова не является важной частью веб-сайта и никак не влияет на UX. То есть, ничего не изменится, если вдруг пользователь не обратит внимание на такой элемент «умного дизайна».
Кроме того, вы можете увидеть четкую стрелку, которая указывает направление вниз. Это помогает интуитивно понять, что внизу вас ожидает еще что-то. И вот, при прокрутке страницы, вы увидите это:
И веб-сайты могут быть «умными» без ущерба UX (user experience).
Копия (четкая, которая выделяется на контрасте) создает смысл остроумия. Но, к сожалению, это не похоже на то, что пытались достичь Bolden, что понесло за собой ухудшение удобства использования. Есть только одна маленькая проблема – это текст «Join our email club». Он, без сомнения, должен быть более видимым, но если брать в целом, то вебсайт Cultivated Wit – это отличный пример использования «умного» дизайна без создания убогого UX.
Извлеченный урок: лучшая практика
«Умные» дизайны должны всегда быть сделаны настолько просто, насколько это возможно и/или протестировано на актуальных пользователях. Иногда «умный» дизайн может навредить удобству использования.
5. Чрезмерная анимация
Плохой пример: Концепция чека от PayPal на Dribbble
Анимация – это ключевой элемент дизайна взаимодействия, но при этом она всегда должна иметь цель. Анимация не может быть сделана просто для слова «ради». К сожалению, дизайнеры очень склонны к использованию анимации, в большинстве своем потому, что это весело. Но иногда они попросту не знают, когда нужно остановиться.
Концепция чека для PayPal, которая была разработала Владиславом Тузиным и размещена на Dribbble – это пример, как плохо можно использовать анимацию:
Анимация – красивая, но её чересчур много. В общей сложности, она отбирает 3,5 секунды чтобы посмотреть детали транзакции. Появление самого чека могло бы быть более изящным: это забирало бы меньше времени и было лучше для пользователя.
Проблема становится всё опасней, ведь дизайнерам никогда не бывает достаточно анимации. С 2016 года разработка Владислава получила больше, чем 500 лайков и 8000 просмотров. Это показывает то, насколько ошибочно дизайнеры оценивают качество анимации. Теперь, понимая тенденции среди дизайнеров выбирать напыщенные эпики, вы сможете хорошенько подумать и предотвратить головную боль. Помните о том, что пользователи приходят на сайт с целью — мы хотим показать им все, что нужно в короткие сроки, а не пускать их в грандиозный тур по галерее.
Хороший пример: Анимация проверки у Stripe
Когда мы делаем анимацию целенаправленно, результат может быть ошеломляющим. Взгляните на анимацию, которая действует во время проверки у Stripe, когда пользователи получают код верификации.
Stripe используют анимацию, чтобы заставить вещи быть быстрее, чем они есть на самом деле: это обеспечивает пользователей своевременной информацией (например, «Отправлено»), даже если они еще не получили смс-сообщение. Это помогает предотвратить чувство фрустрации у пользователя и обеспечивает уверенностью, что смс уже на правильном пути.
Рейчел Наборс, приглашенный эксперт в области веб-анимации в W3C, предлагает 5 принципов, которые необходимо помнить при создании анимации:
- Осознанная анимация: продумайте каждую анимацию, прежде чем создать её.
- Создание анимации несет в себе больше, чем 12 принципов: 12 принципов работы с анимацией от Диснея работает для фильмов, но никак не для веб-сайтов и приложений.
- Польза и необходимость, потом красота: эстетика должна занимать последнее место, когда речь идет об UX.
- Сделай ее в четыре раза быстрее: хорошая анимация обычно ненавязчивая, что означает, что она «бежит» быстро.
- Установите «kill switch» : для больших анимаций, таких как эффект параллакса, создайте кнопку отказа.
Извлеченный урок: лучшая практика:
Всегда делайте вашу анимацию целенаправленной: очень многое может убить UX продукта. Красота должна быть функциональной.
Забери с собой:
Разве это не смешно, смотреть на примеры плохого дизайна? К счастью, это можно рассматривать в качестве обучения. Вот ключевые уроки и лучшие практики с пяти рассмотренных примеров хорошего и плохого дизайна.
- Поймите, что нужно вашим пользователям, потом передайте эту информацию.
- Если у вас много информации, которую нужно передать – попробуйте использовать визуализацию вместо текста.
- Всегда ставьте метки на ваших ссылки! Пользователям не нравятся тайные ссылки.
- Избегайте добавления любых помех к действиям пользователя, если они не должны отговорить от действия.
- Протестируйте ваш «умный» дизайн и используйте его осторожно.
- Анимация как проклятие: если вы будете злоупотреблять ею, то она потеряет свое влияние.
В следующий раз, когда вы хмуритесь на пример плохого дизайна, перестаньте думать: поймите, почему дизайн не сработал, найдите примеры проектов, которые сделали все правильно, и обратите внимание на урок, который вы получили. А потом поделитесь любовью: поделитесь своим уроком с другими дизайнерами на нашем форуме обсуждений!
Добавить комментарий