Принципи веб-дизайну

 

Dibusoft.com поєднує приємний дизайн з чіткою структурою. У сайту є 9 головних елементів, які видно неозброєним поглядом. Хоча, можливо, кольори занадто світлі.

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

 
5. Пишіть ефективно.

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

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

Eleven2.com переходить прямо до суті справи. Ніяких ззовні промов, ні завищених тверджень. Замість цього вони відразу вказують ціну - все, що потрібно відвідувачам.

Оптимальне рішення  для ефективного складання тексту:

• використовуйте короткі, лаконічні вирази (щоб дістатися до суті якомога швидше);

• використовуйте "скануючу" розмітку (категоризуйте контент, використовуйте багаторівневі заголовки, візуальні елементи і списки, які розбивають потік текстових блоків);

• використовуйте просту і  об'єктивну мову (промо-тексти не повинні звучати, як реклама; запропонуйте вашим користувачам кілька розумних і об'єктивних причин, чому вони повинні користуватися вашим сервісом або залишатися на вашому веб-сайті).

 
6. Прагніть до простоти.

Принцип "роби простіше" (keep it simple, KIS) повинен бути основною метою дизайну сайту. Користувачі рідко заходять на сайт, щоб просто насолодитися дизайном. Більш того, в більшості випадків вони шукають потрібну інформацію, незважаючи на дизайн. Прагніть до простоти, не ускладнюйте. 
 
У Crcbus простий дизайн. Можливо, ви не зрозумієте про що цей сайт, тому що він на італійському, але ви точно визначите смугу навігації, заголовок, контент і рядок копірайту. Навіть іконки доносять свою частину інформації. Якщо навести на них мишкою, ви побачите додаткову інформацію.

З точки зору відвідувачів, найкращий - самий звичайний текстовий  дизайн, без рекламних блоків або  яких-небудь додаткових посилань "по темі". Це ще одна причина, чому у  веб-сторінок обов'язково повинна бути версія для друку: такі деталі покращують враження користувача від веб-сайту.

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

 
7. Не бійтеся порожнього простору.

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

Складні структури важкі  для читання, сканування, аналізу  і роботи. Якщо ви стоїте перед вибором, розділити два елементи дизайну  видимої лінією або порожнім простором, то краще зробити вибір на користь  другого. Ієрархічна структура знижує складність (Simon's Law): чим краще ви змогли представити користувачам візуальну ієрархію, тим простіше буде сприйматися контент.

 

 

Порожній простір - це добре. Cameron.io використовує порожній простір як головний елемент дизайну. Результатом є легко сканована розмітка, яка виводить контент на заслужений домінуючий рівень. 
 
8. Ефективна комунікація за допомогою контенту.

У своїх роботах про ефективну візуальну подачю інформації Aaron Marcus вказує три фундаментальні принципи використання т.зв. "Візуальної мови" - контенту, який користувачі бачать на екрані.

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

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

• Взаємодія: зовнішній вигляд повинен відповідати фізичним можливостям відвідувачів. Сайт повинен бути зрозумілим, читабельним, з правильною типографікою, придатними кольорами і т.д. Використовуйте не більше 3 шрифтів з 3 різними розмірами, а також не більше 18 слів або 50-80 символів на рядок тексту. 
 
9. Традиції - наші друзі.

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

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

Стів Круг пропонує винаходити щось нове тільки якщо ви впевнені, що ваша ідея дійсно хороша, інакше краще  дотримуватися традиційних рішень.

 

 
10. Тестуйте рано, тестуйте часто.

Цей принцип (TETO, "test early, test often") повинен застосовуватися до кожного веб-проекту, тому тести юзабіліті часто показують всі найбільші проблеми з даними дизайном.

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

Декілька важливих моментів:

• Стів Круг вважає, що тестування з одним користувачем в 100 разів  краще, ніж тестування без участі користувачів взагалі, а тестування з одним користувачем на початку  проекту краще, ніж тестування з 50 користувачами в кінці. У відповідності  з першим законом Боема (Boehm's Law), помилки найчастіше трапляються при початкових етапах проектування і дизайну; чим пізніше вони виправляються, тим дорожче це виходить проекту.

• Тестування - ітераційний  процес. Це працює так: ви щось створюєте, тестуєте, виправляєте і тестуєте знову. Можливо ви знайдете проблеми, які залишилися непоміченими при  першому тестуванні в «смітті» інших  помилок.

• Тести юзабіліті завжди дають корисні результати. Ви або побачите поточні проблеми, або їх відсутність. У будь-якому випадку це корисно для проекту.

• Відповідно до закону Вайнберга (Weinberg's Law), розробники нездатні тестувати свій код. Це можна застосувати і до дизайнерів. Після того, як ви кілька тижнів працювали над сайтом, у вас "замилюється око" і ви більше не можете поглянути на проект по-новому. Ви знаєте, як він улаштований зсередини і як працює насправді - цих знань у незалежних тестерів і ваших користувачів немає.

 

Список використаної літератури ☼

1. Інтернет ресурси:
1. http://habrahabr.ru
2. http://www.designonstop.com