Головна мета сайту – дати користувачеві можливість швидко і ефективно знайти потрібну інформацію або зробити потрібну дію (наприклад, зробити покупку). З цього випливає, що суть якісного веб-дизайну зводиться до того, щоб гармонійно поєднувати візуальне оформлення сайту з його функціональністю. Пам’ятай, в кінцевому підсумку зручність використання є одним із вирішальних факторів, які визначають, чи твій сайт успішним і конкурентоспроможним. Щоб створити по-справжньому якісний дизайн, рекомендуємо скористатися методами, які на самому початку допоможуть тобі закласти міцний фундамент сайту, а потім дозволять протестувати і оцінити те, що вийшло. Рекомендую замовити послугу розробка сайтів в веб студії Seo-Design
Прототипування
Перший крок – це проектування майбутнього дизайну сайту. На цій стадії ти повинен відповісти собі на питання: як буде виглядати твій сайт і які дії на ньому можна буде виконувати?
Якісний і зручний дизайн найпростіше продумувати ще на стадії розробки – помилки, допущені на ранніх стадіях створення сайту, складніше всього (і, відповідно, дорожче) виправити. Щоб звести до мінімуму число майбутніх виправлень, потрібно приділити належну увагу проектування сайту, тобто його опису мети, функціональних можливостей і дизайну. Мета в першу чергу перегукується з тим, для якої аудиторії (тобто групи людей, що володіє схожими характеристиками) призначений даний сайт. Щоб визначити мету, потрібно відповісти собі на питання: навіщо і для кого я створюю цей сайт? Щоб визначитися з функціональністю, потрібно продумати, які дії відвідувачі захочуть зробити на сайті – іншими словами, як сайт буде працювати, і як буде організовано його взаємодію з користувачем. Що ж стосується дизайну, метод, який часто використовується на початкових стадіях його розробки, називається прототипированием – цей спосіб, як зрозуміло з терміна, полягає у створенні графічного прототипу, тобто схеми дизайну сайту (найчастіше спрощеної). По суті це просто зображення того, як має виглядати майбутній сайт, створене в графічному редакторі (InDesign, Photoshop, Illustrator і т. д) або в спеціальному додатку для прототипування, наприклад, Axure RP Pro або Balsamiq Mockups.
Axure RP Pro позвляет створити прототип сайту в візуальному режимі, а потім завантажити його в форматі HTML, щоб переглянути у браузері. При цьому можна отримати досить детальні й якісні прототипи, які надалі можна зручно використовувати для розробки дизайну. Balsamiq Mockups також надає користувачам можливість створити графічний прототип сайту, але політика цього кошти прототипування дещо відрізняється від Axure RP Pro. Balsamiq Mockups робить акцент саме на швидкість створення прототипів, не приділяючи великої уваги опрацювання деталей – тому з допомогою Balsamiq Mockups особливо зручно швидко створювати ескізи сторінок майбутнього сайту. Для порівняння також потрібно зауважити, що Balsamiq Mockups набагато дешевше, ніж Axure RP Pro. Використання першого обійдеться в 79 доларів, у той час як Axure RP Pro коштує від $289 до $589 (в залежності від обраної ліцензії).
Маючи таке готове зображення або начерк, розробники можуть швидше і простіше зверстати сайт (тобто написати його HTML і CSS-код) так, щоб відкривається в браузері сторінка виглядала так само, як її графічний прототип. Тут дійсно доречний принцип “краще один раз побачити, ніж сто разів почути”.
Кросбраузерність
Отже, основа майбутнього дизайну покладена. Однак перш, ніж дизайн буде готовий, на твоєму шляху встане ще кілька завдань, від успішного вирішення яких залежить якість і зручність використання твого сайту.
Припустимо, у нас є макет майбутнього сайту, і залишається тільки його зверстати, тобто перевести в код, зрозумілий браузеру. Однак тут ми стикаємося з важливою проблемою: інтернет-користувачі можуть використовувати різні браузери для перегляду твого сайту – Chrome, Firefox, Internet Explorer, Opera, Safari або навіть щось більш екзотичне начебто SeaMonkey. Швидше за все у кожному із цих браузерів сайт буде виглядати трохи по різному через відрізняються алгоритмів обробки HTML і каскадних таблиць стилів CSS. Іноді навіть невеликого спотворення досить, щоб зіпсувати задуманий дизайн або навіть зробити сайт незручним у використанні – тому краще відразу перевірити, як твій сайт виглядає в різних браузерах. Для цього можна, звичайно, встановити у себе на комп’ютері версії всіх найбільш популярних браузерів або знайти такі комп’ютери, на яких вони встановлені, однак є спосіб більш швидко і ефективно справитися з завданням. Для тестування кросбраузерності сайту існують різні спеціалізовані програми; одна з таких програм, яка користується великою популярністю – це Browsershots, безкоштовний ресурс, що дозволяє протестувати сайт в різних браузерах, використовуючи різні операційні системи – Windows, Linux або Mac.
web-site-overview-browsershots_1219937760291.png
Щоб провести тестування, досить ввести в програму адресу сайту і вибрати параметри тестування у яких сайтах або системах потрібно перевірити сайт. Потім програма повідомить, скільки часу доведеться чекати на результат.
BrowserShots Test Your-Website.png
Преміум користувачі отримують готові скріншоти сайту протягом всього декількох хвилин, простим користувачам доведеться почекати трохи довше, але в результаті і ті і інші отримають .zip архів зі скріншотами сайту в різних браузерах.
Ще один корисний сервіс для тестування кросбраузерності сайтів – BrowserStack. З допомогою даного ресурсу можна протестровать сайт в різних браузерах та операційних системах і на різних пристроях в режимі реального часу – BrowserStack використовує віртуальні машини, розташовані в хмарі, таким чином даючи користувачеві можливість відкривати браузери в браузері. Перевага BrowserStack в тому, що цей сервіс дозволяє проводити тестування як з допомогою скріншотів, так і безпосередньо, відкриваючи сторінки в різних браузерах, що дозволяє не тільки візуально оцінити, правильно відкриваються сторінки, але і заглянути глибше, перевірити чи коректно працюють всі посилання, текстові поля та інші елементи, які неможливо перевірити з допомогою скріншотів. Більш того, у випадку, якщо були виявлені проблеми, можна провести налагодження роботи JavaScript, CSS, Flash або Ajax прямо в BrowserStack.
Capture.PNG
Адаптивний дизайн
Той факт, що люди використовують різні браузери – далеко не єдина проблема сучасного веб-дизайну. Ще один камінь спотикання – розмір екрану. Так як відвідувачі твого сайту будуть використовувати різні пристрої – настільні комп’ютери, лаптопи, планшети або смартфони – деяким з них, можливо, доведеться прокручувати екран вбік, т. к. розмір сторінки не вкладається в розмір екрану або, наприклад, буде важко натиснути на посилання, тому що вона занадто мала на екрані мобільного телефону. Щоб уникнути такого роду незручностей, існує метод створення “тягнеться” або “гумового” сайту, який сам підлаштовується під розміри вікна браузера. Це називається адаптивний чи “чуйний” веб-дизайн (від англ. responsive design). Коли сайт “розтягується” за розміром вікна, його стає зручно переглядати як з ноутбука, так і з планшета або смартфона. Оскільки продовжує зростати кількість людей, які віддають перевагу використовувати мобільні пристрої для виходу в інтернет, останнім часом адаптивний дизайн здобув велику популярність. Можна сказати, що адаптивний принцип починає витісняти окремі мобільні версії сайтів, створення і зміст яких пов’язане з великими витратами часу і ресурсів.
З’ясувати, чи правильно працює сайт на різних видах пристроїв, можна з допомогою міжплатформового тестування. Як і у випадку з кроссбраузерным тестуванням, цю перевірку можна швидко і ефективно здійснити за допомогою різних онлайн-сервісів, таких як вищезгадані Browsershots і BrowserStack або вузькоспеціалізованих інструментів начебто Viewlike.us або TestSize.
Юзабіліті-тестування та оцінка результатів
Незручна навігація, невдале розташування різних елементів сторінки, занадто велика завантаженість сайту графікою або рекламою – всі ці помилки можна виявити, якщо провести юзабіліті-тестування. Така перевірка включає в себе:
1. Візуальний аналіз – оцінку того, чи раціонально розташовані текстові блоки та інші елементи і скільки місця вони займають;
2. Моделювання поведінки користувача – перевірку шляхів, за якими він може піти, виконуючи будь-яку з можливих дій на сайті.
3. Аналіз шляху конверсії – наскільки зручно користувачеві здійснювати цільові дії на сайті.
Суть юзабіліті-тестування в тому, щоб зробити навігацію сайту зрозуміліше, дизайн – практичніше, життя відвідувачів сайту – простіше, а конверсії та продажу, відповідно, вище.
Існують компанії, які займаються юзабіліті-тестування і можуть надати фахову оцінку сайту, а також рекомендації для поліпшення його роботи. Але є також багато безкоштовних альтернатив, таких як, наприклад, сервіс Яндекс.Метрика, який для дослідження юзабіліті використовують статистичний аналіз, або онлайн сервіс UsabilityHub, який видає результати тестування за допомогою аналізу скріншотів сайту.
Яндекс.Метрика – це повністю безкоштовний інструмент, з допомогою якого можна оцінити юзабіліті сайту, грунтуючись на результатах статистичного тестування. Яндекс.Метрика фіксує кількість кліків в різних частинах сайту і на основі цих даних складає карту кліків, яка показує, які розділи користувачам більш за все цікаві, а куди вони майже ніколи не заходять. Одна з різновидів карти кліків – це т. зв. теплова карта, на якій різними кольорами показана інтенсивність, з якою користувачі клікали по тим чи іншим елементам.
