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

Міністерство освіти і  науки, молоді та спорту України

Київський національний торговельно-економічний  університет

Кафедра економічної кібернетики  та економічних систем

Реферат

На тему:

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

Виконала:                                                                        Студентка 1 курсу, 6 групи

                                                                                           Терещенко К.В.

Викладач:                                                                          Цензура М.О.

Київ 2013

 

Зміст

Розділ 1. Основні відомості про веб-дизайн. ☼

Розділ 2. 10 принципів ефективного веб-дизайну. ☼

1. Про що думають користувачі. ☼
2. Сутність кожного принципу. ☼

Використана література. ☼

 

Розділ 1.        Основні відомості про веб-дизайн. ☼

Веб-дизайн (web page design) - це процес проектування, планування, моделювання та реалізації доставки електронного вмісту через мережу Веб з використанням технологій (на основі мов розмітки), придатних для інтерпретації та візуалізації веб-браузером або іншим графічним веб-інтерфейсом користувача.

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

 

Основними аспектами веб-дизайну (в першу чергу для комерційних веб-сайтів) є наступні:

• Вміст. Інформаційне наповнення повинне  бути релевантним тематиці сайту  та орієнтованим на цільову аудиторію  сайту.

• Зручність у використанні (usability). Сайт повинен мати дружній користувальницький інтерфейс з простою і надійною навігацією.

• Зовнішній вигляд. Графіка і  текст повинні бути виконані в  одному стилі і узгоджені на всіх сторінках сайту. Стиль оформлення повинен демонструвати професіоналізм, привабливість і релевантність.

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

 

По-суті, веб-сайт - це інформаційна система, яка містить два основні компоненти:

• Компонент представлення (front-end). Видимий вміст (розмітка сторінок, графіка, аудіо та текст).

• Компонент реалізації (back-end). Пов'язаний з організацією та ефективною реалізацією вихідних кодів. Включає в себе невідображені сценарії, серверні компоненти, що є основою для компоненти вистави.

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

 

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

 

Розробка веб-сайту включає в  себе наступні етапи:

 

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

 

Для дизайну веб-сайту та розробки веб-додатків є широкий спектр інструментальних засобів. Компанія Майкрософт має вже давню традицію створення WYSIWYG-інструментів такого роду. Серед таких інструментів можна назвати, зокрема Microsoft Visual Studio. NET і Microsoft Expression Web.

Розділ 2. 10 принципів ефективного феб-дизайну ☼

Саме зручність використання (юзабіліті) і практичність, а не візуальний дизайн, визначають успіх чи провал будь-якого веб-сайту. Так як саме користувач - єдиний, хто клікає мишкою і, таким чином, приймає всі рішення, то одним із стандартних підходів для створення успішних і прибуткових веб-дизайнів став «дизайн, орієнтований на користувача» (user-centric design). Зрештою, якщо користувач не вміє користуватися тією чи іншою функцією, нею можна легко знехтувати.

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

 

2.1.  Про що ж думають користувачі? ☼

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

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

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

 
2. Користувачі не читають, вони «сканують». Аналізуючи веб-сторінку, користувачі шукають фіксовані точки, "якори", які будуть направляти їх по вмісту на сторінці.

 

Зверніть увагу на уривчасті "гарячі" точки посеред пропозицій. Це властиво процесу сканування.

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

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

 

 
Обидві картинки показують, що послідовне сканування не працює в  вебі.

5. Користувачі діють інтуїтивно. Найчастіше користувачі просто дивляться, а не читають уважно те, що запропонував їм дизайнер. На думку Стіва Круга (Steve Krug), головна причина в тому, що користувачам байдуже. "Якщо ми знайдемо щось, що працює, ми будемо цим користуватися. Нам не цікаво, як це все працює, головне щоб працювало правильно. Якщо ваша аудиторія сприймає зроблене вами як дошку оголошень, тоді створюйте якісний дизайн дошки оголошень. "

6. Користувачі хочуть контролювати. Користувачам важливо контролювати браузер і покладатися на правильну передачу даних через сайт. Наприклад, вони не хочуть несподівано відкриваючих pop-up вікон, і вони хочуть бути в змозі повернуться на попередню сторінку, натиснувши кнопку "назад". Звідси, необхідно слідувати однією з найважливіших практик - ніколи не відкривати посилання в новому вікні браузера.

2.2. Сутність кожного принципу ефективного  веб-дизайну. ☼

 
1. Не змушуйте користувачів думати.

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

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

 
Яскравий приклад - Beyondis.co.uk, які заявляють, що вони "beyond channels, beyond products, beyond distribution". Що це означає? Так як користувачі схильні до вивчення веб-сайтів відповідно "F-моделі" ("F-pattern"), вищевказані твердження будуть першим елементом, який користувачі побачать при завантаженні сайту.

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

ExpressionEngine використовує таку ж структуру, що і Beyondis, але уникає непотрібних запитань. Більш того, слоган несе свою функцію, пропонуючи користувачам зробити вибір: спробувати їх сервіс або завантажити безкоштовну версію.

 

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

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

Як говорить Ryan Singer, один з розробників команди 37Signals, користувачі будуть раді надати свою адресу email, якщо у них його попросять після того, як вони побачать, як же сервіс працює насправді. Іншими словами, користувачі будуть розуміти, що вони отримають "натомість" свого email.

 

 

Чудовим прикладом такого підходу є Stikkit и Mite. Для реєстрації в Stikkit практично нічого не потрібно - це досить зручно і просто. І саме так ви хочете, щоб користувачі відчували себе на вашому сайті. Mite вимагає більше інформації при реєстрації. Однак сама реєстрація вимагає менше 30 секунд - тому що форма розташована горизонтально, користувачеві навіть не прийдется скроллить сторінку.

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

 
3. Концентруйте увагу користувачів.

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

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

 

Humanized.com ідеально використовує принцип фокусування. Єдиний елемент моментально видимий для користувачів - слово "free" ("безкоштовно"), яке відразу привертає, але і є абсолютно неінформативним.

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

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

 
4. Прагніть показати найбільш значущі речі.

Сучасні веб-дизайни часто піддаються критиці за свій підхід у використанні "кроків" (те саме що 1-2-3-готово!), величезних кнопок, купи ефектів і т.п. Але з точки зору дизайну такі елементи не настільки вже й кепські. Навпаки, такі елементи дуже ефективні, тому вони полегшують перехід користувачів між частинами сайту.