Плохой дизайн VS хороший дизайн: 5 наглядных примеров 

Плохой дизайн VS хороший дизайн: 5 наглядных примеров 

Время чтения: 10 мин.


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


1. Информационная перегрузка


Плохой пример: Парковочный знак в Лос-Анджелесе

Знаки парковки в Лос-Анджелесе (Лос-Анджелес) были воплощением информационной перегрузки на протяжении десятилетий. Их всегда было трудно понять из-за наличия большого к-ва информации в небольшой области.


Насколько непонятны эти знаки? Посмотрите на этот пример с 2010 года:

Представьте, что вы едете по этой дороге во вторник утром в 9. Можете ли вы припарковаться здесь? Вроде простой вопрос, но не так легко на него ответить.


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

Есть ли решение - как для парковочного знака, так и для дизайнеров в целом?


Хороший пример: Парковочный знак Nikki Sylianteng

Проектирование понятного знака со всей информацией звучит как невыполнимая задача. Но это именно то, что сделал дизайнер из Бруклина Nikki Sylianteng.

Отчасти дизайн Nikki на столько хорош благодаря тому, что он ориентирован на пользователя: Никки поняла, что водители просто хотят узнать, могут ли они припарковаться на данном месте. Да или нет - это все, что им нужно было видеть на знаке.


В ее дизайне для передачи информации использовался не только текст, но и визуальные эффекты. Результат вышел невероятно интуитивным: зеленый цвет - для OK, красный - для No Parking. Знак даже предназначен для дальтоников, ведь имеет специальные полоски для No Parking.


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


Извлеченные уроки:

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



2. Загадочная мясная навигация (MMN)


Плохой пример: LazorOffice.com

Придуманная в 1998 году Винсентом Фландерсом в отношении неудачных веб-страниц, Mystery Meat Navigation (MMN) относится к случаям, когда место назначения ссылки не отображается до тех пор, пока пользователь не нажмет или не наведет курсор на нее.


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


Хотя в основном MMN присутствует на более старых веб-сайтах, она, как ни странно, встречается и на современных веб-сайтах тоже. Возьмите Lazor Office, дизайнерскую фирму, которая занимается домами.

На домашней странице LazorOffice.com есть сетка MMN-изображений. Как вы можете видеть, это табло дает очень мало информации о том, куда двигаться дальше. Девять изображений просто там торчат, не давая пользователям нормально взаимодействовать со страницей.


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


Принцип «Нажмите и узнаете!» - явно не лучшее UX-решение. Скорее всего, ваши пользователи уйдут и найдут альтернативное решение у конкурентов.


Хороший пример: Course Cards на сайте Interaction Design Foundation

К счастью, проблемы с MMN легко решить. Просто надо помнить о том, что вы должны четко обозначать ссылки. Просто добавив «View project», который появляется при наведении мыши, вы сделаете пользование страницей Lazor Office более удобным.

Наши course cards так же понятны, как и ссылки.


На нашем сайте есть не только «View Course» внизу каждой карты курса, чтобы указать на действие, которое будет происходить после нажатия, но у нас также есть кнопка «Go to course». Многие веб-сайты используют тот же принцип и вам стоит тоже.


Извлеченный урок:

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


3. Добавление трения


Плохой пример: iFly50.com

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


Один из примеров - iFly50.com, созданный к юбилею журнала iFly от KLM. iFly 50 - это веб-сайт с вертикальным скроллингом, в котором представлены 50 мест для путешествий. В некоторых точках на сайте (например как в представленной ниже) кнопка внизу призывает пользователей нажать на нее и удерживать в течение нескольких секунд, чтобы просмотреть больше фотографий.

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


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


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


Хороший пример: Эластичная прокрутка на iOS

Интересно, что разумное добавление трения может привести к великолепному дизайну. Одно из самых популярных изобретений Apple в их мобильной операционной системе iOS - создание эластичной прокрутки, где в определенных ситуациях (например, в конце веб-страницы) прокрутка становится все труднее.

В эластичной прокрутке iOS в некоторых ситуациях трение добавляется преднамеренно.


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


Извлеченный урок:

Избегайте добавления какого-либо трения к действиям пользователя. Если это невозможно, то тщательно выполняйте его.


4. «Умный» дизайн, который игнорирует юзабилити


Плохой пример: Bolden.nl

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


Возьмите голландский сайт стратегического дизайна и развития студии Вolden, например:

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

Умный ли это дизайн? Да, безусловно. Плохой ли дизайн? Конечно!


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


Хороший пример: CultivatedWit.com

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

На домашней странице Cultivated Wit изображена иллюстрированная сова.

Сюрприз! Сова подмигивает, когда вы наводите на нее курсор. Учтите также хорошее размещение вайтспейса.


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


Кроме того, у них есть четкая стрелка вниз, чтобы дать пользователю понять, что дальше тоже что-то есть. И когда вы прокрутите вниз, увидите следующее:

Веб-сайты могут быть умными, не портя UX.


Единственная небольшая проблема заключается в том, что текст «Join our email club» должен быть более заметным, но, в целом, сайт Cultivated Wit - отличный пример умного дизайна без создания плохого UX.


Извлеченный урок:

Умные дизайны всегда должны быть как можно более foolproof и/или проверенными реальными пользователями. Их неправильное выполнение может привести к неприятным последствиям и нанести ущерб юзабилити.


5. Излишняя анимация


Плохой пример: Концепт чека PayPal на Dribbble

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


Концепт анимации Владислава Тизуна для PayPal email-чека, размещенный на Dribbble, является ярким примером неправильно сделанной анимации:

Анимация красивая, но излишняя. В общей сложности для просмотра деталей транзакции требуется около 3,5 секунд. Простой fade-in квитанции был бы более изящным, и практичным, ибо занимал бы меньше времени пользователя.


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


Хороший пример: Анимация Stripe Checkout

Однако, когда мы делаем анимацию с определенной целью, то результаты могут быть внушающими. Посмотрите на действие Stripe Checkout в то время, как пользователь получает код подтверждения:

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


Рейчел Наборс, приглашенный эксперт по веб-анимации из W3C, советует учитывать при разработке анимации следующие пять принципов:


1. Создавайте анимацию преднамеренно: продумайте каждую анимацию, прежде чем начать ее создавать.

2. Потребуется более 12 принципов: 12 принципов анимации Диснея хоть и применяются для фильмов, но не обязательно подходят для веб-сайтов и приложений.

3. Полезный и необходимый, а только потом красивый: эстетика должна занять заднее сиденье в UX.

4. Двигайтесь в четыре раза быстрее: хорошие анимации ненавязчивы, а это значит, что они двигаются быстро.

5. Установите kill switch: для больших анимаций, таких как parallex эффекты, создайте opt-out кнопку.


Извлеченный урок:

Всегда делайте анимацию целенаправленной: излишество может убить UX продукта. Красота должна подойти на второй план после функциональности.


Take Away

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


1. Поймите, что вам нужно, и лишь затем доносите эту информацию.

2. Если вам нужно донести много информации, попробуйте использовать визуальные эффекты вместо текста.

3. Всегда называйте свои ссылки! Пользователям не нравятся загадочные ссылки.

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

5. Тестируйте свои умные дизайны и включайте их с осторожностью.

6. Анимация похожа на проклятие. Если вы злоупотребляете ей, она теряет все хорошее влияние.


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


Report Page