Будь-який дизайнер по природі своєї цікавий. Хоча б у тій частині, що є предметом його діяльності. Зокрема, це відноситься до його робіт: зробивши сайт, йому цікаво дізнатися — вийшло чи ні? У більшій частині це ставитися до починаючим дизайнерам, бо у професіоналів «проколи» трапляються рідко.

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

Проте, я раджу, перш ніж виносити сайт на обговорення, самому «зацінити» свій сайт. Розумію, це досить складно зробити це об’єктивно, все-таки своє, рідне… Але, щоб вам допомогти, можу навести приблизний список деталей, на які я звертаю увагу при оцінці сайту. На всяк випадок, я наведу розширений список, для «глибокої оцінки», адже краще зробити відразу все в кращому вигляді, ніж потім вислуховувати гнівно-глузливі висловлювання на свою адресу.

Відразу обмовлюся, що все нижче сказане хитко і хистко, і список неповний… Просто прийміть до відома. У більшості випадків, помилки трапляються в «технічної частини», наприклад неполадки з версткою, або помилки з юзабіліті. Своєчасно знайшовши, і виправивши їх можна створити якісний і зручний ресурс. Але, з іншого боку, якщо у вас зовсім немає дизайнерського таланту, то, навіть зробивши тричі грамотний сайт, але «запорів дизайнерську частина» (підбір кольорів, ідея, стиль, виконання графіки), більше ніж на «3», ваш сайт «не потягне».

Шукаємо грубі помилки

  • Не залишилися на сайті сторінки, які відрізняються дизайном від загального стилю?
  • Всі однакові елементи повинні бути виконані в одному кольорі, одним шрифтом і. т. д. Ситуація, коли на одній сторінці меню в синіх тонах, а не інший зелених — неприпустима.
  • Чи немає помилок в скриптах, SSI-директивах? Всі посилання працюють і ведуть на існуючі сторінки?
  • Виправлені всі орфографічні помилки, особливо у важливих елементах, таких як заголовки?
  • Чи виправлені помилки в верстці — блоки різної ширини, «поїхали» заголовки, відсутні зображення, текст поза призначеного для нього місця, загалом, все, що кидається відразу у вічі.
  • Правильно підібрані кольори? Немає нечитаемого тексту, з кольором, близьким до кольору фону? Кольори шрифту тексту повинні бути контрастними.

Помилки у використанні шрифтів і оформленні текстів

  • Контрастний чи шрифт по відношенню до фону? Наприклад, сірий шрифт по чорному тлу абсолютно нечитабелен.
  • Шрифт не задано фіксоване? В принципі, фіксований шрифт має право на існування, але, якщо ви позбавляєте користувача можливості самому вибрати потрібний розмір шрифту, приділіть подвійне увагу підбору оптимального розміру шрифту.
  • Нормально виглядає сторінка при будь-якому розмірі системного шрифту. Деякі користувачі встановлюють у налаштуваннях максимальний розмір шрифту, через поганий дизайн відразу розвалюється. Перевірте свою верстку на міцність при максимальному розмірі шрифту.
  • Коректно сайт друкується? Для інформаційних сайтів є сенс створювати спеціальну версію для друку.
  • Текст виводитися зручною для читання гарнітурою? Чи відповідає дана гарнітура настрою і стилю сайту? Допомагає (або хоча б не заважає?) засвоїти зміст тексту?
  • Розбитий текст на абзаци? Абзаци не повинні бути занадто довгими, в кожному абзаці повинна бути закінчена думка.
  • Немає зайвих ефектів в тексті? Миготливий, яскравий, рухомий текст часто дратує користувача. Використовувати дані ефекту краще тільки в крайніх випадках.
  • Виділяються головні думки курсивом або жирним шрифтом? Виділення істотних моментів дозволяє полегшити сприйняття тексту.
  • Відсутній виділення тексту підкресленням? Підкреслення — це стереотип, що позначає для користувача посилання. Не варто обманювати користувача, краще обійтися іншим методом виділення.
  • Присутні заголовки і підзаголовки? Такий поділ допомагає користувачеві краще орієнтуватися в документі. Причому, поділ слід проводити з допомогою спеціальних тегів.
  • Якщо ви використовуєте темний або чорний фон, встановлено жирне накреслення тексту за замовчуванням (на більшості низькоякісних моніторів, які і становлять більшість, тонкий світлий текст на темному фоні проявляє несведение променів і від цього виглядає сильно розмитим)?

Помилки при використанні графіки

  • Добре оптимізована графіка? Немає зайвих зображень, особливо великих? Графіка істотно збільшує час завантаження сайту. Зазвичай, вага всієї сторінки з графікою, що не повинен перевищувати 50 kb. Інакше користувач може так і не дочекатися повного завантаження і піти.
  • Використовує графіка метафори, відомі користувачеві по звичайному житті? Позбавляєте ви її несуттєвих подробиць, без користі ускладнюють її сприйняття? Взагалі кажучи, немає ніякого сенсу, як в абстрактних піктограмах, так і в піктограмах, інспірованих комп’ютером. Місце зберігання файлів можна позначити зображенням жорсткого диска, але при цьому від користувача буде потрібно знання того, як цей диск виглядає. Що неправильно, тому що від користувача взагалі не можна нічого вимагати. Краще намалювати шафа.
  • Якщо ви використовуєте графіком, що імітує тривимірність, всі тіні падають в одну сторону? Це дуже поширена помилка, сайт на якому всі тіні падають в різні сторони виглядає безглуздо і смішно.
  • За призначенням чи використовується флеш і анімовані зображення? Зайве вовтуження на сторінці ще нікому не принесло користі. Крім того, такі об’єкти зазвичай пристойно «важать».
  • У всіх графічних зображень є відповідний альтернативний текст? Він допоможе розібратися, якщо у користувача в браузері відключена можливість перегляду графіки, крім того, вказівка цих атрибутів є обов’язковим в стандарті HTML 4.0

Помилки в навігації

  • Добре продумана навігація? Розбитий сайт на розділи, якщо це необхідно?
  • Навігація повинна бути присутні на всіх сторінках сайту. На кожній чи сторінці є посилання на головну сторінку?
  • Відображає навігаційна панель поточне місце розташування користувача на сайті? Це може бути виділення поточного пункту меню кольором, або іншим ефектом.
  • Завжди коректно працює кнопка Back браузера? Деякі сторінки, передані за шифрующему протоколу, не можуть бути взяті браузером з кешу і їх потрібно завантажувати заново (в кращому випадку користувачеві потрібно самому натиснути кнопку Refresh, в гіршому — виробляти більш складні і неочевидні дії). При повторному завантаженні таких сторінок може злетіти встановлена у браузері кодування (і весь російський текст перетвориться в тарабарщину). Уникайте робити такі сторінки. Також, якщо у вас є сторінки з формами введення, добийтеся того, щоб повернувся на цю сторінку користувач (не важливо, кнопкою чи Back, або завдяки гіперпосиланням) знайшов її з усіма своїми установками (це дуже економить час, якщо потрібно повернутися і що-небудь поправити).
  • Якщо навігація вашого сайту непрозора, складна, має деревоподібну структуру, доступна карта сайту?

Тестуємо юзабіліті

  • Використані всі можливості для взаємодії з користувачем? Я маю на увазі інтерактивні кнопки, інші елементи, що реагують на дії користувача.
  • Якщо обсяг сайту великий, є можливість текстового пошуку?
  • Завжди доступний архів інформації? Стара інформація не значить непотрібна.
  • Попереджений користувач про можливі неприємні наслідки його дій? Це може бути відкриття нового вікна, запуск аплету, повідомлення про час завантаження сторінки або розмір файлу, доступного для завантаження.
  • Видимі всі зміни в змісті і дизайні, що відбулися з-за дій користувача? Наприклад, якщо користувач встановив якийсь перемикач, то у всіх сторінках, які демонструють результати його дій, повинно бути показано, що цей перемикач встановлений у відповідне положення. Принципом, що послужило основою цього питання, є твердження, що свідчить, що будь-яка дія користувача повинно бути відображено інтерфейсом.
  • Знаходяться важливі дані на початку сторінки? Важлива інформація повинна зацікавити користувача, змусити його прочитати до кінця ваш матеріал.
  • Допомагає альтернативний текст зрозуміти зображення? Є у всіх навігаційних посилань пояснення? Пояснення повинно відповідати на питання, куди потрапить користувач, клацнувши по посиланню.
  • Чи розрізняються кольори у пройдених і непройдених гіперпосилань?
  • Чи відображають заголовків (title) шлях до цієї сторінці?
  • Чи намагаєтеся ви використовувати кнопки з дієсловами, ніж іншими частинами мови, наприклад «Показати» замість «Готово»?
  • Немає на сторінці посилань на саму себе? Це нелогічно, оскільки посилання сама по собі передбачає переміщення.
  • Зображення логотипу має бути посиланням на головну сторінку.
  • Пам’ятайте, що синій підкреслений текст — це стереотип? Так найчастіше позначають посилання. Намагайтеся використовувати і ваше посилання помітять.

Післямова

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

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

Удачі тобі, Дизайнер!