Дружній інтерфейс: як зробити дизайн сайту зручним


Дружній інтерфейс: як зробити дизайн сайту зручним

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

Що таке дружній інтерфейс?

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

Мета дружнього інтерфейсу

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

Основні принципи дружнього інтерфейсу

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

1. Інтуїтивна ясність

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

2. Передбачуваність

Проаналізуйте свою аудиторію і визначте, якими сайтами вони найчастіше користуються: соцмережами, пошуковими системами. Орієнтуйтеся на інтерфейс цих ресурсів при розробці власного дизайну. Не потрібно бездумно копіювати, просто зробіть так, щоб у відвідувачів спрацювали асоціації.
Наочний приклад - іконки і кнопки. Всі звикли, що вікно з особистими повідомленнями або формою для зворотнього зв'язку відкривається за допомогою іконки у вигляді "конверта". Якщо ви додасте такий візуальний елемент в дизайн інтерфейсу, але додасте йому іншу функцію (наприклад, відкриття сторінки з умовами доставки), це заплутає людини і викличе роздратування, оскільки вона очікує іншого результату від натискання на іконку.
Той же принцип діє з кнопками. Якщо користувач звик, що кнопка повинна бути об'ємною і контрастною, а ви зробили її на догоду дизайну бляклою і не контрастною, він може взагалі не зрозуміти, що вона клікабельна.
Передбачуваність важлива і для контенту сторінок. Прайс-лист повинен лежати в розділі "Ціна", а не в "прикладах робіт", а новини компанії - в розділі "Новини", а не на головній.

3. Мінімалізм

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

4. Швидкість завантаження

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

5. Терпимість до помилок

Зрозуміло, що при ідеальному дизайні інтерфейсу помилок виникати не повинно. Однак якщо розглядати реальні ситуації, невеликий відсоток відвідувачів завжди буде плутатися і натискати "не туди". У цьому випадку важливо зробити так, щоб вони не боялися помилок.
Уявіть ситуацію. Ви зайшли в інтернет-магазин, вибрали товар і вирішили його купити. Заповнюєте довгу форму замовлення: свої контакти, адреса доставки, номер банківської карти. Але в поле для телефону пишете свій номер, наприклад, без приставки "+38". Потім натискаєте кнопку "Замовити" і ... все дані видаляються, а вам висвічується повідомлення про помилку. Сайт вимагає, щоб ви заповнили все заново, а ви просто закриваєте його і їдете в найближчий роздрібний магазин, нехай там і дорожче.
Щоб такого не було, в зручному інтерфейсі повинні бути продумані сценарії помилок користувачів. У цьому допоможуть кнопки для скасування змін і повернення до попередньої теми, повідомлення про наслідки закриття сторінки. Загалом, будь-яка, навіть помилкова, дія відвідувача не повинна бути безповоротною.

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

Поради, як зробити інтерфейс дружнім, а дизайн - зручним

Якщо принципи, описані вище, здалися вам занадто абстрактними і теоретичними, давайте перейдемо до практики.

Не давайте великої свободи вибору

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

Доведіть, що сайт безпечний

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

Заповнення полів має бути простим

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

  • Підказуйте. Якщо заповнюються дані не унікальні (тобто, не електронна пошта, номер телефону, ім'я), підкажіть відвідувачеві, як їх заповнити, за допомогою списку, щоб він не вводив все вручну. Для дати народження підійде віконце з календарем, для іншої інформації - список (вибір міста, статі та ін.)
  • Відразу перевіряйте правильність. Вище ми описали ситуацію, в якій відвідувач помилився при заповненні форми, і у нього пропали всі дані, які він встиг вписати. Щоб такого не сталося, зробіть автоматичну перевірку поруч з кожним полем. Якщо телефон вказаний в невірному форматі, нехай це буде видно відразу, а не коли відвідувач натисне "готово".

Один блок з текстом на сторінці

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

Схоже до схожого

Не розділяйте структуру сайту на безліч схожих розділів, краще об'єднайте їх. Наприклад, в розділ "Контакти" можна додати і схему проїзду, і форму зворотного зв'язку, і графік роботи.

Дублюйте call-to-action

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

Використовуйте контраст

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

Адаптивність

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

Зручний пошук

Якщо у вас на сайті багато інформації - статей, товарів, документів, - додайте на ньому функцію пошуку і зробіть її зручною. Бажано, щоб пошуковий алгоритм міг розпізнавати різні форми слів (відмінки, рід, число) і вибудовувати пріоритетність результатів.

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


Ви можете завантажити і заповнити бриф щоб надати більше інформації розробнику щодо деталей майбутнього ресурсу

Бриф на розробку сайту Бриф на розробку лендінга Бриф на розробку додатку

Наші послуги

Створення сайтів Обслуговування сайтів Просування сайтів Інші послуги

Надіслати повідомлення