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

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

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

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

Реферат

На тему:

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

Виконала:                                                                        Студентка 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-готово!), величезних кнопок, купи ефектів і т.п. Але з точки зору дизайну такі елементи не настільки вже й кепські. Навпаки, такі елементи дуже ефективні, тому вони полегшують перехід користувачів між частинами сайту.

 

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