Поганий дизайн проти хорошого дизайну: 5 прикладів, на яких можна повчитися

Поганий дизайн проти хорошого дизайну: 5 прикладів, на яких можна повчитися

Дивлячись на приклади поганого дизайну, які стоять поряд із прикладами гарного дизайну, стає зрозуміло, що це не тільки кумедно для перегляду, але й чудово демонструє важливі уроки для дизайнерів.

Вони висвітлюють підводні камені в роботі дизайнера для того, щоб уникнути і дати нам зрозуміти, як правильно перевести теорії дизайну в рішення, які працюють у реальному світі. Джаред Спул (Jared Spool), американський письменник, дослідник та експерт із зручності використання («usability»), якось сказав: «Хороший дизайн, коли він виконаний правильно, стає невидимим. Тільки коли його зроблено бідно, ми помічаємо його». Що ж, подивімося на п’ять прикладів поганого дизайну і проллємо світло на те, як хороший дизайн може працювати сам на себе. А також зробимо кілька уроків, як ми всі можемо створювати чудовий та невидимий досвід для наших користувачів.

 

 

 

1.Інформаційне перевантаження

Поганий приклад: Дорожні знаки на парковці в Лос-Анджелесі (Los Angeles, далі – LA)

Дорожні знаки на парковках LA є уособленням інформаційного навантаження не перше десятиліття. Вони завжди були важкі для розуміння, тому що правила дорожнього руху самі по собі складні, що призводить до необхідності передачі великої кількості інформації на маленькій площі. Наскільки ці знаки заплутані? Як показує практика – дуже. Можете переконатись у цьому, дивлячись на приклад такого знака з 2010 року.

Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0

Оскільки такі знаки на парковках LA досі існують, то, мабуть, це яскравий приклад.

Уявіть на хвилину, що Ви водій, який їде вздовж дороги у вівторок, о 9 ранку. Чи можна припаркуватися в цьому місці? Те, що звучить як просте питання, потребує великого процесу роздумів для відповіді. Як дизайнери ми часто стикаємося з ситуаціями, де ми повинні передати багато інформації на маленькому просторі. Знаки на парковках LA можуть бути крайнім випадком, але часто розробка дизайну для мобільних додатків означає зіткнення з тією ж проблемою. Чи можна знайти вихід у таких ситуаціях: для знаків на парковці та дизайнерів загалом?

Хороший приклад: Дорожні знаки Ніккі Сільянтенга (Nikki Sylianteng)

Розробка знака для зображення всієї інформації, яка буде легкою для розуміння, звучить як нереальне завдання. Але ось що зробив бруклінський дизайнер Ніккі Сільянтенг.

Варіант, який запропонував Ніккі, зрештою був використаний на парковках ЛА у тестовому режимі.

Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0

Одна з причин вдалого дизайну Ніккі – це використання в роботі принципу, що називається “орієнтація на користувача”: дизайнер дає водіям просто зрозуміти коли вони можуть паркуватися. Адже все, що потрібне водіям – це ТАК чи НІ, а саме такий знак їм у цьому легко допоможе.

Крім того, дизайн Ніккі особливий тим, що замість тексту вона використовувала візуалізацію для передачі інформації. Результат – вражаюче інтуїтивний: зелений для так, червоний для ні. Цей дизайн доступний також для розуміння людям, які мають проблему відмінності кольорів, адже в секторі «не можна паркуватися» ми бачимо смуги, що легко визначаються.

Зараз, коли ви дивитеся на знак, ви знаєте, що паркування у вівторок о 9-й ранку не дозволено.

Бари доводять, як здавалося б – все просто.

Отриманий урок: найкраща практика

 

2. Прихована навігація

Поганий приклад: LazorOffice.com

Вигаданий у 1998 році Вінсентом Фландерсом з компанії Web Pages That Suck, термін «прихована навігація (далі – СМН)» належить до кейсів, коли призначення посилання невідомо, поки користувач не натисне на це або не наведе курсор миші. Термін «приховане м’ясо» походить від ситуації з подачі їжі до їдалень загальноосвітніх американських шкіл: м’ясо для учнів подавалося так, що зовсім не був зрозумілий його первісний вигляд. Використання у дизайні таких елементів погано впливає на результат, тому що вони знижують зрозумілість навігації загалом. Це додає когнітивного навантаження користувачам, тому що тепер вони повинні здогадатися, як саме пересуватися або який клік веде за собою певну дію.

Поки що більшість елементи СМН розташовуються на найстаріших веб-сайтах, але вони раптово стають поширеними навіть на сучасних вебсайтах. Взяти, наприклад, Lazor Office – дизайнерську фірму, яка створює готові будинки.

На домашній сторінці LazorOffice.com знаходиться сітка прихованої таємної навігації. Як ви можете побачити, ця сітка дає дуже мало інформації про те, куди рухатися. Натомість на вас чекає 9 зображень, який змушують вас гадати, що робити, а не взаємодіяти з сайтом.

Author/Copyright holder:Lazor Office, LLC. Copyright terms and licence: Fair Use

Після смуги поділу їхньої домашньої сторінки, на вас чекає сітка мініатюрних зображень. Чи доступні вони? Так, доступні. Якщо ви, звичайно, здогадаєтеся пересунути курсор вашої миші на зображення, яке потім зміниться на точку. Але що станеться, якщо ви натиснете на картинку?

“Натиснути, щоб дізнатися” – ніколи не було хорошим рішенням для UX (user experience). Швидше за все, ваші користувачі відмовляться від такої навігації та знайдуть альтернативне рішення на сайтах ваших конкурентів.

Хороший приклад: Картки курсів на веб-сайті The Interaction Design Foundation.

Слава Богу, проблеми СМН легко вирішуються. Ключ до рішення – це чітке усвідомлення того, що у вас мають бути гранично ясні мітки на посилання. Просте додавання “Переглянути проєкт”, що з’являється при наведенні курсора миші, набагато покращить зручність користування сторінкою Lazor Office.

Наші картки курсів також не є секретними, як і наші посилання.

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and licence: Fair Use

Для карток курсів на сайті Interaction Design Foundation, у нас є не тільки “Переглянути курс” на кнопках для ідентифікації дії, що відбудеться. Ми також маємо спливаюче вікно з текстом «Перейти до курсу». Багато веб-сайтів дотримуються такого ж принципу і ви повинні також це зробити, для максимізації зручності користування вашим веб-сайтом.

Отриманий урок: найкращі практики

Завжди ставте позначки на ваші посилання! Повірте, вам не сподобалося б їсти приховане м’ясо. Так само і вашим користувачам зовсім не сподобається кликати на приховані посилання.

  1. Створення дизайну, який додає перегради до здійснення дій.

Поганий приклад: iFly50.com

З особливою обережністю всім дизайнерам необхідно ставитись до створення дизайну, який може додати кілька перешкод до дії. Тільки не в тому випадку, якщо цей елемент потрібний для відмовляння користувача від дії. На жаль, трапляються випадки, коли ми можемо навіть несвідомо додати деякі перешкоди до дій (здебільшого через естетику чи новизну), які призводять до згубного UX.

Яскравим прикладом такого випадку є продукт iFly50.com, створений на честь ювілею журналу iFly від KLM. На цьому сайті ви зможете побачити 50 місць для подорожей, використовуючи вертикальне прокручування, а в деяких пунктах призначення (як показано на прикладі нижче) з’являється кнопка внизу, яка змушує користувача утримувати її кілька секунд якщо є бажання переглянути більше фотографій.

Author/Copyright holder: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Copyright terms and licence: Fair Use

Автори сайту дійсно чекають, що при кожному бажанні побачити більше фотографій, користувачі будуть утримувати цю кнопку кілька секунд.

Додавання, здавалося б, кількох секунд до кожної дії, може серйозно зіпсувати UX. Можна тільки уявити, наскільки незручним був би серфінг в інтернеті, якщо при кожному переході за посиланням вам потрібно було утримувати його кілька секунд. Після кількох клацань мишею, вам це набридне і ви припините усі дії в інтернеті. Зараз дизайнери намагаються слідувати модним трендам і використовують у своїй роботі нові стилі та дизайни. У цих випадках дуже важливо виявляти обережність, особливо якщо ваш дизайн додає кілька секунд до кожної дії. Найчастіше перевірені рішення (наприклад, звичайні кліки або звичні клацання) працюють відмінно.

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

Обов’язково потрібно знати, що якщо помірно та з розумом додавати “перешкоди”, то на виході можна отримати чудовий дизайн.

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and licence: Fair Use

Корпорація Apple має чудовий продукт, який був розроблений для мобільної операційної системи IOS. Цей продукт називається “еластична прокрутка”. Сенс такого прокручування у тому, що коли ви потрапляєте у певне місце або ситуацію (наприклад, наприкінці веб-сторінки), вам стає важче прокручувати сторінку. Тобто, до дії користувача усвідомлено та навмисно додається перешкода.

Ви можете побачити це у зображенні вище, де перешкода відбувається, коли користувач прокручується до кінця веб-сторінки. Перешкоди були додані, щоб вказати ситуацію, коли прокручування більше не дозволено. Ефект, отриманий від перешкоди – інтуїтивний досвід.

Отриманий урок: найкраща практика

Уникайте додавання будь-яких перешкод до діям користувача, наскільки це можливо, та впроваджуйте його ретельно, коли у вас вже немає альтернативи.

  1. «Розумний» дизайн: коли зручність використання не має значення

Погано: Bolden.nl

Трапляється, що «розумний» дизайн цілком здатний нашкодити UX. Крім того, самі дизайнери дуже часто роблять свій вибір на користь такого рішення, що робить ситуацію ще небезпечнішою. Прерогатива «розумного» дизайну в тому, що це ті малесенькі графічні чудеса, які приносять нам посмішку. На жаль, не всі люди на планеті Земля – дизайнери. Важливо, що часто «розумні» дизайни не є хорошими. Особливо, коли вони можуть створити складнощі з доступністю, зручністю використання та відкритістю.

Відмінний приклад вищесказаного – голландський сайт розвитку та стратегічного дизайну Bolden:

Author/Copyright holder: Bolden. Copyright terms and licence: Fair Use

Чи можете ви сказати, що саме намагається донести до вас домашня сторінка? Скоріш за все ні. Адже для того, щоб зрозуміти послання та розтлумачити його правильно – ви повинні перевести курсор миші в один із кутів сторінки.

Author/Copyright holder: Bolden. Copyright terms and licence: Fair Use

Одразу видно, що це розумний дизайн, адже так? Так, безумовно. Але зрозуміло, що це абсолютно поганий дизайн!

Ось вам чудовий приклад проєктування більше для дизайнера, ніж для користувача: веб-сайт має серйозні проблеми зі зрозумілістю його заголовків, які виникли через прагнення дизайнерів створити щось новеньке. Дизайнер, який проєктував сайт, також залишив текст, щоб повідомити користувачам, що вони повинні переміщати курсор миші в кути. Це дає розуміння, що відкриття заголовків залежить від випадковості. У тому випадку, якщо заголовок таки відображається, ми бачимо текст, що перекривається, що створює поганий контраст між текстом та фоном. Все це робить веб-сайт незручним та незрозумілим для користувача.

Гарний приклад: CultivatedWit.com

Веб-сайт Cultivated Wit`s – це чудовий приклад того, як «розумний» дизайн не повинен впливати на зручність користування.

Домашня сторінка Cultivated Wit відображає зображення сови.

На домашней странице 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, коли користувачі одержують код верифікації.

Author/Copyright holder: Cultivated Wit. Copyright terms and licence: Fair Use

Stripe використовують анімацію, щоб змусити речі бути швидше, ніж вони є насправді: це забезпечує користувачів своєчасною інформацією (наприклад, «Надіслано»), навіть якщо вони ще не отримали смс-повідомлення. Це допомагає запобігти почуттю фрустрації у користувача та додає впевненості, що смс вже на правильному шляху.

Рейчел Наборс, запрошений експерт з веб-анімації в W3C, пропонує 5 принципів, які необхідно пам’ятати при створенні анімації:

  1. Усвідомлена анімація: продумайте кожну анімацію, як створити її.
  2. Створення анімації несе в собі понад 12 принципів: 12 принципів роботи з анімацією від Діснея добре працює для фільмів, але ніяк не для веб-сайтів та програм.
  3. Користь та необхідність, потім краса: естетика має займати останнє місце, коли йдеться про UX.
  4. Зроби її вчетверо швидше: хороша анімація зазвичай ненав’язлива, що означає, що вона “біжить” швидко.
  5. Встановіть “kill switch”: для великих анімацій, таких як ефект паралакса, створіть кнопку відмови.

Отриманий урок: найкраща практика:

Завжди робіть вашу анімацію цілеспрямованою: дуже багато може вбити UX продукту. Краса має бути функціональною.

 

Забери із собою:

Хіба це не смішно дивитися на приклади поганого дизайну? На щастя, це можна розглядати як навчання. Ось ключові уроки та найкращі практики з п’яти розглянутих прикладів гарного та поганого дизайну.

  1. Зрозумійте, що потрібне вашим користувачам, потім передайте цю інформацію.
  2. Якщо у вас багато інформації, яку потрібно передати, спробуйте використовувати візуалізацію замість тексту.
  3. Завжди ставте мітки на ваші посилання! Користувачам не подобаються потаємні посилання.
  4. Уникайте будь-яких перешкод до дій користувача, якщо вони не повинні відмовитись від дій.
  5. Протестуйте ваш «розумний» дизайн та використовуйте його обережно.
  6. Анімація як прокляття: якщо ви зловживатимете нею, то вона втратить свій вплив.

Наступного разу, коли ви хмуритесь на приклади поганого дизайну, перестаньте думати: зрозумійте, чому дизайн не спрацював, знайдіть приклади проектів, які зробили все правильно, і зверніть увагу на урок, який ви отримали. А потім поділіться порадами: поділіться своїм уроком з іншими дизайнерами на нашому форумі обговорень!

No Comments

Post A Comment