Головне про зручність вебсайтів

Зручність схожа на магію чи телепатію. Без слів та пояснень, вона дивовижним чином робить річ комфортною у користуванні, привабливою, бажаною.

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

Але коли перед нами постає задача створити, скажімо, новий інтерфейс, очевидність зникає. Що робить річ зручною?

Можливо, простота та зрозумілість? Безумовно, ці якості важливі. Але чимало речей, які є простими й зрозумілими, не сприймаються нами, як зручні. Наприклад, алюмінієві та керамічні чашки однаково прості. Але керамічними користуватись приємніше. Відтак нам хочеться, щоб річ була не лише простою, але й відчувалась приємною. Тобто, була комфортною у використанні.

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

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

  • Ефективність роботи
  • Простота та зрозумілість (інтуїтивність)
  • Комфортність використання
  • Візуальна привабливість
  • Турбота творців сайту про користувачів

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

Складові зручності вебсайту

Ефективність роботи

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

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

Таку ефективність забезпечує відсутність помилок на рівні програмування та наповнення сайту. І мова не лише про помилки на технічному рівні. Будь-які помилки на сайті впливають на його ефективність: помилки в текстах, у використанні невідповідних іконок чи ілюстрацій тощо.

Без забезпечення ефективної роботи сайту повноцінну зручність забезпечити не вийде. Ось чому настільки важливим є етап тестування сайту перед його запуском. Причому тестувати продукт необхідно одночасно на різних пристроях (кросплатформність) та в різних браузерах (кросбраузерність).

Простота та зрозумілість (інтуїтивність)

Друга складова зручності вебсайтів теж дуже важлива. Це зрозумілість (або ж інтуїтивність). На зручному сайті користувач без додаткових пояснень розуміє, як виконати потрібну йому дію.

Насправді створити простий дизайн дуже складно. Адже багато елементів в дизайні ми лише сприймаємо простими.

Наприклад, всі мали справу з формою входу на сайт. На перший погляд, вона складається лише з двох полів — логін та пароль, — та кнопки «Готово!». А що, як у користувача ще немає облікового запису? Необхідно передбачити сценарій на цей випадок і спроєктувати форму реєстрації. Ну, а що робити, якщо користувач має обліковий запис і забув пароль? На цей випадок теж потрібно зробити окремий набір інтерфейсів. І це лише один екран. А в межах вебпроєктів їх можуть бути десятки, навіть, сотні.

Ось чому для забезпечення зрозумілості важливо послідовно пройти три етапи роботи з проєктом:

  • Етап 1: осмислення та проєктування вебсайту
  • Етап 2: створення дизайну з дотриманням семантики
  • Етап 3: аналіз поведінки користувачів.

Розгляньмо їх трохи докладніше.

Етап 1: осмислення та проєктування вебсайту

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

Перш ніж створювати повноцінний макет, корисно створити простий ескіз сторінки й на ньому визначити приблизну композицію, розміри елементів та їх пропорції.

В складніших проєктах дизайнерам також доводиться проєктувати цілі карти взаємодії сайту з користувачем. Їхнє завдання — описати повні ланцюжки взаємодії користувача з вебсайтом для виконання тих чи інших задач. В межах курсу «Основи вебдизайну» ми такі карти створювати не будемо, але обов’язково приділимо їм увагу на курсі «Дизайн взаємодії. Проєктування інтерфейсів».

Етап 2: Створення дизайну з дотриманням семантики

Коли дизайнер створює макет, дуже важливо, щоб він дотримувався семантики. Поки що звучить незрозуміло, але зараз все розтлумачимо.

Сема́нтика — це розділ лінгвістики, що досліджує значення слів. От, наприклад, щоб зрозуміти значення слова «семантика» ми з’ясовуємо, що воно походить з давньогрецької й перекладається «що означає». Розуміння значення слів допомагає нам використовувати їх більш доречно та влучно. З іншого боку, нерозуміння значень слів може зробити текст складним для сприйняття, збити з пантелику чи просто різати слух. Так, наприклад, деякі люди в кафе замовляють каву «експрессо» замість еспресо, бо не знають походження назви та змістовного наповнення слова.

Як не дивно, в контексті вебсайтів семантика також стосується мови та змістовного наповнення. Але не слів, а елементів і їх візуального представлення.

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

Також у вебдизайні вкрай важливо уникати паразитичних змістів. Це таке сприйняття, яке автор не закладав у твір, але через вади втілення аудиторія сприймає його некоректно. Наприклад, чимало меломанів, що слухали пісню «Ten o’clock postman» шведського гурту «Secret Service», часто чули зловіщу фразу «Bring me cholera» замість тої, яку насправді співав соліст — «Bring me her letter».

Паразитичні змісти також трапляються через недбале ставлення до побудови речень. Наприклад, фраза: «Студенти, що не здали залік, будуть повішені на другому поверсі біля деканату о 14:00» насправді означає «Список з іменами студентів, що не здали залік, буде розміщено на дошці оголошень біля деканату о 14:00».

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

Етап 3: Аналіз поведінки користувачів

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

Чим більшим є проєкт, тим більше у ньому дизайнерських гіпотез. І навіть найкращим у світі професіоналам рідко вдається спроєктувати такий дизайн, в якому правильними виявляться усі 100% рішень.

Комфортність використання

Коли ми говоримо «комфортний стілець», «комфортний диван» чи «комфортна температура», одразу зрозуміло, про що йде мова.

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

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

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

Інклюзивність — це така організація дизайну, за якої сайт можуть коректно сприймати люди з фізичними вадами чи обмеженнями. В контексті вебдизайну таку якість сайтів ще називають вебдоступністю. Її забезпечує певний підхід до вибору колірних палітр, шрифтів, візуальних прийомів і технічного втілення.

Досить докладно принципи вебдоступності описані в документі, що має назву «Настанова про забезпечення доступності змісту у вебі» (Web Content Accessibility Guidelines). Ці принципи розроблює Консорціум Всесвітньої павутини (W3C).

Візуальна привабливість

Всі перелічені вище складові зручності є вагомими. Але і його естетичність та сучасність є не менш важливими.

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

Але так само важливі й відчуття стилю, вміння віднаходити актуальне візуальне представлення.

Турбота творців вебсайту про користувачів

Остання і, певно, ключова складова проєктування зручних продуктів — це турбота. Часто створення зручного продукту вимагає чималих зусиль. Що, як ваш перший дизайн виявився незручним для користувачів? Красивим, сучасним, яскравим, але незручним. Турбота змусить вас поставити сприйняття вашого дизайну користувачем вище за творчу візію.

А часом буває, що з технічної точки зору легше зробити менш зручну форму. Наприклад, перевіряти поля не в момент їх заповнення, коли користувачу легше виправити помилку, а після відправлення форми. А втілення функції перевірки на льоту означає додати до проєкту ще 10 годин роботи. Чи воно того варте, якщо форма і без цього працює? Відповіддю буде «Так!», якщо команда проєкту більше турбуватиметься про комфорт користувачів, ніж про власний.

На завершення

Як правило, дизайнер вже на етапі завершення роботи над першою версією продукту розуміє, що в ньому можна і варто було б вдосконалити.

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

Втім, часто вдосконалення — це радше маленькі поступові кроки, ніж великі поодинокі стрибки. І насправді мова не лише про онлайн-сервіси. Вдосконалювати можна будь-що — від простої посадкової сторінки до великого онлайн-порталу.

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

·
4601
·
12
·
goodsuper 81
Наступна стаття
Композиційні засоби зручності для вебсайтів
1668
Головна