До слова, дані правила описані на десятках різних ресурсів, і найсумніше, що всі вони здерті з одного джерела. Щоб не плодити одне і теж, я вирішила побудувати статтю трохи інакше, розділивши створення сайту на етапи, і, прописавши кожному етапу свої правила юзабіліті.
Таким чином я хочу систематизувати всі правила. А також приправив все це своїми особистими думками і досвідом.
Отже, створення сайту можна розділити на кілька етапів. І в кожному етапі діють власні правила. Хоча, є правила юзабіліті, які можна віднести до різних етапів створення сайту, але я вирішила, що буду вказувати їх саме там, де вони найбільш необхідні.
Також хочу попередити, що інформація в даному матеріалі не є повною і вичерпною. Існує дуже багато досліджень юзабіліті сайтів, які неможливо вмістити в одній статті.
Етап перший - постановка мети
Отже, приступимо. З чого починається сайт? Ні. З вішалки починається театр :). Сайт починається з ... немає. Навіть не з ідеї. Сайт починається з мети. Які цілі ставить перед собою компанія?
Мета - збільшити клієнтську базу, збільшити продажі або просто заробити. На цьому етапі, коли ми знаємо свою мету, ми можемо визначити, що нам потрібно - маленький сайт-візитка, корпоративний сайт або Інтернет-магазин, а може щось ще ...
Етап другий - визначення цільової аудиторії
Ми визначилися з тим, що нам потрібно, але перш, ніж ми замовимо сайт в студії створення сайтів або почнемо майструвати самостійно, ми просто зобов'язані точно визначити свою цільову аудиторію.
Насправді це, напевно, найважливіший етап в розробці сайту - не помилитися з визначенням цільової аудиторії.
І тут, як не можна до речі, дуже допомагає правило Парето. де говориться, що 20% зусиль дають 80% ефекту.
Тому не потрібно думати, як зробити сайт зрозумілим для всіх. Важливо виділити основні 20% кінцевих споживачів, які дають вам 80% прибутку і орієнтувати свій ресурс на них. Тому нам необхідно провести дослідження, дізнатися більше про нашу аудиторії.
Етап третій - дослідження
Завдання будь-якого сайту, а сайту компанії, що займається наданням послуг або продажем товарів особливо, викликати у споживача довіру, бути зрозумілим для покупця, не викликати сумнівів. Це завдання вирішується із застосуванням правила User-centered design, UCD. яке означає, що у сайту повинен бути дизайн, орієнтований на користувача.
Як це зрозуміти? Думаю, тут без психології і стереотипів не обійтися.
Я вважаю, в розробці сайтів, як і взагалі в будь-якій справі не потрібно винаходити велосипед. Навіть якщо рівень креативу у вас зашкалює, найкращий сайт той, який схожий на всі інші.
У психології це називається синдромом каченяти і успішно застосовується при розробці сайтів. Для користувача самим зрозумілим і зручним буде сайт, який схожий на той, до якого він звик, вивчив його.
Наприклад, до того, як я могла гордо назвати себе просунутим користувачем, я мала пошту на mail.ru, а з пошукових систем користувалася тільки Яндексом. Коли я вперше потрапила на Google, для мене був незрозумілий їх мінімалістичний дизайн, з повною відсутністю всіх звичних для погляду, інформаційних блоків. До слова, в результаті дизайн Google мені подобається більше, особливо зараз, коли вони в черговий раз його поміняли, хоча пошуком я користуюся від Яндекс.
Особливо часто про синдром каченяти забувають розробники сайтів креативних агентств. Намагаючись показати свою креативність, вони забувають, що їхня цільова аудиторія - не конкуренти у видачі, а прості замовники, які навіть не завжди розуміють, що таке корпоративний стиль, не кажучи вже про такі заумні слова, як брендинг, неймінг і іже з ними.
Є з цього приводу і ще одне правило - Physical consistency - перекладається як фізична узгодженість, але в російській інтерпретації його називають правилом логічності.
Дане правило використовують стосовно до зовнішнього вигляду сайту. Ми звикли бачити назву сайту в шапці, при цьому в лівій частині воно сприймається набагато логічніше, ніж в протилежному.
Для нас є нормою наявність меню у вигляді списку посилань, наявність важливої інформації в центрі екрану і т.д. Думаю, до цього правила можна віднести і такі речі, як колірна гамма, зображення і графіка.
На цьому етапі можна переходити до розробки концепції майбутнього сайту.
Подальші правила найбільше використовуються веб-дизайнерами, тому що в першу чергу стосуються саме зовнішнього вигляду сайту.
Етап четвертий - проектування сайту
Стосовно до всього сайту в цілому є таке правило Walk-Up-And-Use Design - інтуїтивно зрозумілий дизайн. Будь-сайт повинен бути зрозумілий користувачеві з першого погляду.
Це правило досить щільно переплітається з правилами User-centered design, UCD (дизайн, спрямований на користувача) і Physical consistency (логічність), озвученими вище. Взагалі багато правил юзабіліті переплітаються між собою, взаємозалежні і, що природно, завжди повторюють одні й ті ж принципи:
- не відходьте від стереотипів,
- робіть зрозумілий чистий дизайн,
- не перевантажуйте зайвими елементами,
- дотримуйтесь порядок і логічність.
Який він, інтуїтивно зрозумілий дизайн? Щоб відповісти на це питання, потрібно дізнатися, які ще правила застосовуються для юзабіліті сайту.
Навігація на сайті
На етапі розробки майбутнього сайту важливо не забути про правило трьох кліків. Структуру і навігацію сайту необхідно обов'язково продумувати, щоб до будь-якого матеріалу на сайті можна було дістатися максимум в три кліка.
І тут навіть сенс не в самих кліки, а в суворій впорядкованості матеріалів, яка і дозволяє домогтися виконання даного правила. Для багатьох сайтів дійсно буває дуже складно продумати хорошу навігацію, багато в чому це залежить від тематики ресурсу, і чим об'ємніше сайт в глибину, тим складніше все систематизувати.
Мені в цій нелегкій справі допомагають метод виключення або метод від часткового до загального або навпаки. Свого часу я неабияк помучитися, щоб згрупувати всі статті на блозі за тематиками, щоб зробити зручне горизонтальне навігаційне меню за рубриками в блозі.
Стосовно до навігації на сайті є таке неоднозначне правило 7 + -2. суть якого зводиться до того, що не можна робити занадто великі навігаційні меню.
Сім пунктів (+ -2) цілком достатньо, щоб не перевантажувати меню і мозок користувача. Неоднозначне, тому що кажуть, що дослідження помилкове і до Інтернету застосувати неможливо. Судити не буду, але особисто я повністю згодна з цим правилом.
Досить часто трапляються сайти, де довгі вертикальні меню з безліччю пунктів.
Зазвичай такі меню на стільки перевантажені, що коли по черзі відвідуєш кожну зі сторінок з цього меню, то вічно губишся, який пункт жати таким. При цьому не рятує навіть підсвічування пункту, в якому зараз перебуваю, тобто якось інтуїтивно очей шукає потрібний пункт або вище або нижче того місця, куди я повинна натиснути, щоб перейти в новий розділ.
На блогах це часто застосовується. На сайтах теж, але в меншому ступені. Я б про це не написала, якби сама особисто не стикалася з цим.
Як вже вище згадувала, в гонитві за неординарністю, зустрічаються сайти, де проігноровано правило Mystery-Meat Navigation, MMN - містична навігація. яке попереджає про те, що не можна придумувати для пунктів меню неочевидні назви, коли незрозуміло, що ховається за цим пунктом. Або, як варіант, робити меню, яке складно ініціювати, як меню.
Дійсно, такі сайти трапляються, і у мене була парочка на прикметі в закладках, збиралася зробити скріни, щоб показати, що так робити не можна. Але у мене зараз проблема з комп'ютером і я статтю пишу з іншого компа і не можу зараз поділитися. Постараюся найближчим часом викласти тут.
Також, нерідко на сайті зустрічається і таке, що посилання ніяк не підсвічуються і не виділяються на тлі основного контенту. У таких випадках говорять про Minesweeping - дослівно перекладається як тралення (пошук і знищення) хв, що означає, що користувачеві доводиться водити мишкою, щоб знайти посилання в тексті. Це вважається порушенням юзабіліті і карається незадоволеністю користувача :).
структура сторінки
Хочу звернути увагу, що мова йде не про структуру сайту, а про структуру саме сторінки, як вона організована. Я не буду детально зупинятися на цьому пункті, тому що всі правила застосовуються і в звичайному графічному дизайні. Серед них є група правил, які будуються на принципах гештальтпсихології. Як каже Вікіпедія - це школа психології початку XX століття.
Відповідно до навчань школи (і це дійсно так), людині властиво групувати, об'єднувати близькі і подібні об'єкти, доповнювати і закінчувати незавершені фігури.
І все це активно застосовується, як в графічному, так і в веб дизайні. Більш докладно про вчення краще почитати у Вікіпедії.
До структури сторінки також можна віднести таке правило, як Granularity. Перекладається, як деталізація. Має на увазі під собою поділ великого обсягу даних на модулі меншого розміру.
В такому випадку краще не розташовувати його суцільним текстом зверху вниз, а розділити на 2-3 колонки. Але, якщо чесно, скільки я не ламала голову, як ще собі уявити реалізацію даного правила, у мене так і не вийшло.
У боротьбі за красу важливо не забути про таку деталь, як екран монітора, і саме дизайнер повинен передбачити різні монітори на предмет, на яке місце на сайті доведеться нижній край вікна браузера - що стосується такого застосовується правило Fold - Згин.
Завдяки різним часто проведеним дослідженням відомо, що велика частка кліків припадає на перший екран монітора. З чого випливає, що найважливіша інформація повинна бути якомога вище.
Але тут є і такий ефект - показуючи користувачеві, шматочок того, що йде нижче, інтригуючи його якимись повідомленнями і стрілками про те, що нижче він отримає якусь інформацію, можна домогтися цікавих результатів і високої кликабельности за межами першого екрану.
У будь-якому випадку, дизайнер, який розробляє майбутній сайт обов'язково повинен передбачити всі можливі варіанти і придумати цікаві рішення.
Застосування різних ефектів для стимуляції користувачів клікнути по стрілці, прокрутити екран обумовлено ефектом невизначеності - ефект Зейгарник.
Було доведено, що люди взагалі не люблять невизначеностей, нам важливо знати тут і зараз. Даний ефект найчастіше використовується в формі діалогу, заданого питання і подальшого відповіді на нього.
Типографіка - шрифти на сайті
Нерозумно говорити про такі очевидні речі, але користувач приходить на сайт в пошуках чого-небудь. І щоб він зрозумів, що він потрапив туди, куди потрібно, має бути дотримано правило Legibility - розбірливість тексту на сайті.
До слова, поява можливості надавати тексту ефект тіні або вдавленности дало ефективний інструмент надавати тексту велику чіткість. І на багатьох сайтах це вже активно застосовується, але при цьому я стала помічати і зворотну ситуацію, коли прагнення скористатися цікавим ефектом навпаки робить текст менш Новомосковскбельним.
Потрібно мати дуже тонким почуттям міри, щоб підібрати ідеальний розмір тіней.
Звичайно, в дизайні сайту існує велика кількість і інших більш дрібних правил, спрямованих на вирішення більш конкретних завдань, але описати все в одній статті неможливо, тому я закруглююся з розробкою дизайну сайту і переходжу до етапу втілення.
Етап п'ятий - створення сайту
На цьому етапі сайт передається на верстку і в роботу програмістам. А ви думали, що юзабіліті займається тільки веб-дизайнер? Виявилося, що ні.
У століття швидкісного Інтернету користувачі не люблять довго чекати, тому в юзабіліті сайтів є правило 2-х секунд. і виконання цього правила безпосередньо залежить від веб-програміста. Тільки він може налаштувати сайт так, щоб сторінки швидко вантажилися, веб-сайт не підвисає і швидко реагував на дії користувача.
Також на плечах розробників лежить відповідальність за дотримання таких двох правил, як Graceful Degradation, Fault-tolerance і Progressive Enhancement, PE.
Перше означає, що незалежно від будь-яких непередбачених проблем, контент сайту, його основний вміст, завжди має відображатися для користувача.
Друге, прогресивне поліпшення. закликає створювати такі сайти, які відображали б основний функціонал користувачам із застарілими браузерами або повільним Інтернет-з'єднанням. При цьому для інших користувачів з сучасними браузерами надавали розширений функціонал і можливості.
Під чуйним контролем веб-дизайнера, але руками верстальника повинні бути зроблені різні підказки на сайті. У юзабіліті ця вимога продиктована правилом Gloss. Підказки є обов'язковим атрибутом будь-якого складного або креативного сайту.
Етап шостий - наповнення сайту
При створенні контенту не варто забувати і про свою аудиторію, а саме, про їхній рівень знань, підготовленості. Не варто вживати складну термінологію, якщо ваші цільові споживачі є початківцями в цій справі. У юзабіліті про це нам нагадує правило Readability - Новомосковскбельность. Саме не в контексті сприйняття шрифту, а в контексті зрозумілості тексту для користувачів з певним рівнем підготовки.
Часто цим грішать початківці блогери, які пишуть для новачків, при цьому вживаючи жаргонні слівця. Ви думаєте, я хочу висміяти початківців блогерів? Ні, просто я сама була такою ж.
Ми вже зовсім близько до завершення роботи над сайтом. Він уже готовий прийняти своїх перших користувачів. І на останньому етапі, але не останньої за важливості повинно стати тестування вашого сайту.
Етап сьомий - тестування сайту
Нам належить з'ясувати, як користувачі сприймають наш сайт, як себе почувають на його сторінках, чи швидко розуміють і знають, куди клікати. Для цього існує таке правило, як Eye-Tracking - відстеження погляду. За допомогою відстеження погляду користувача, можна судити про те, як легко і швидко він сприймає інформацію на сайті.
Є таке цікаве правило, як правило Фітс. В інтернеті воно знайшло застосування завдяки можливості відслідковувати рухи мишки користувача.
З його допомогою можна визначити найбільш ефективне місце для розташування блоку з посиланням на важливу інформацію або ефективно використовувати простір на сайті, групуючи або навпаки розставляючи елементи.
Вінцем всіх наших муки є задоволеність користувача. У юзабіліті придумали навіть таке правило. І тут важливо знати, що, на жаль, користувачі не шукають оптимальних рішень. Вони цілком можуть задовольнитися меншим.
Напевно, саме цим принципом пояснюється те, що найбільша частка кліків припадає на сайти на перших трьох позиціях в пошуковій видачі. Знаходячи цілком прийнятне для себе рішення, вони не йдуть далі шукати краще рішення, а зупиняються на тому, що цілком може згодитися і так.
Тому потрібно бути напоготові і не упускати жодної можливості заволодіти увагою користувачів. А для цього вже потрібно займатися розвитком і просуванням свого ресурсу, і використовувати всі можливі способи просування.
Навігація по публікаціям
Після прочитання думаєш, які очевидні речі, але коли створюєш блог (сайт) чомусь ці очевидні речі в голову не приходять.
Так, в основній масі нічого нового і всіма все використовується. Але при цьому дійсно іноді потрапляєш на сайти і думаєш: якою ногою і точкою тіла це робили :)
До речі, дизайн змінила? 🙂 Непогано вийшло.
Замість того, щоб давати поради, краще б написали, як повинно бути з вашої точки зору. А то я так теж можу ходити по різним блогам і інкогніто поради роздавати. Хоча немає (ні, не так), інкогніто вам зберегти не вдалося.
Great hindsight now
Спасибо большое за теплі слова. Я постараюся не розчарувати.
Привіт, Катерина!
Шукала подібну інфу і дуже рада, що знайшла Вашу статтю, дуже-дуже потрібна інфа.
Але у мене маса сумнівів і непорозумінь, але я абсолютний чайник в цій справі. Чи можна з Вами якось проконсультуватися, якщо Ви не проти.
Буду безмежно вдячна!
Дякую за будь-яку відповідь, Еліна.