Використання сайту: Робота з навігацією

Друзі, і знову вітаються! Раді повідомити, що в нашому TurboBlog'е з'явився ще один гостьовий пост. В цей раз своїми знаннями і спостереженнями в області веб-дизайну ділиться вже відома нам по посаді Мінімалізм в веб-дизайні, або «Doing more with less» — Юлія Солнцева. Читайте з задоволенням, задавайте питання з непідробним цікавістю і просто черпайте корисну для себе інформацію з даного матеріалу :).

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

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

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

Де я можу прочитати твою статтю?
На турбосео.... крапка...
Вже знайшов!

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


2.


3.


Лінійна структура добре підходить для сайтів з невеликим кількістю сторінок і послідовної інформацією. Сайти-визитки — основні представники лінійної логіки. Ця схема відмінно підходить для перегляду однотипной інформації, наприклад, фотографій. Тут немає інформаційної ієрархії, а усi розділи структурно незалежні.

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

Таку навігаційну структуру часто можна зустріти в інтернет-магазинах.

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

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

Поради
Створіть зрозумілу візуальну ієрархію. Як цього досягти?
1. Виділяйте структурні елементи по міру їх значущості.
2. Логічно пов'язані елементи повинні бути пов'язані візуально.
3. Елементи, які є частинами один друга, представляються в вигляді вкладок.

Використовуйте умовності
Усi ми хоч раз читали газету, макетування якої повно умовностей. Ми знаємо, як виглядає сама важлива інформація і її шрифт, ми здатні передбачити найбільш ймовірне її місцерозташування. Усi принципи створення макета сайту були перейняті з газетного досвіду.

Звичайно ж, з розвитком інтернету з'являються нові специфічні позначення, як, наприклад, візок для покупок в інтернет-магазині. Усi вдалі нестандартні рішення дуже швидко перенимаются веб-розробниками і незабаром стають такими ж звичними і самоочевидными.

Ніж ж гарні умовності? Вони допомагають користувачу орієнтуватися в інформації, навіть якщо вона дуже специфічна.

Разделяйте сторінку на області
В цих областях чітко виділяйте місця, куди можна клікнути мишкою. Іноді на сайтах з креативної навігацією не відразу можна зрозуміти, де, власне, кнопка. Або ж навпаки: на сайтах з простий версткой часом неможливо відрізнити кнопку від посилання.

Називайте пункти меню стандартно. Головна, зовнішня, навігація на сайті повинна залишатися незмінною, незалежно від місця знаходження користувача на вашому сайті.


Правило двох кліків мишкою
В інтернеті боротьба йде за кожен клік мишкою, якщо користувач недоволен — він йде до конкурентам. Усi важливе має перебувати не далі двох кліків мишкою. Як цього досягти?

Логотип — це не тільки відмітний знак вашого сайту, але ще і швидкий телепортатор на головну сторінку. Дайте можливість користувачу почати пошук заново.

Залишайте «хлібні крошки». Цей простий інструмент вказівки шляху буде тримати користувача в курсі його маршруту пересування по вашому сайту. Особливо якщо у сайту складна ієрархічна структура.

Виділяйте кольором поточний каталог і усi посилання, на які користувач вже кликав.

Прописывайте ЧПУ (людино-зрозумілі URL). Більшість користувачів потрапляють на сайт через внутрішні сторінки, зрозумілий людині URL набагато полегшить розуміння того, в якому розділі він знаходиться.

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

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

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

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

Порада
Напишіть текст і дайте його прочитати «незалежного человеку», а потім попросіть його переказати прочитане. Цей простий прийом дасть можливість зрозуміти, як оптимізувати текст повідомлення.

Нижче наведені приклади сайтів з простий, очевидною і приємною навігацією:






Отже, підведемо підсумки.
Цікаво чи користувачу, як працює навігація? Немає, поки вона працює добре. Самоочевидная навигация — це більше часу на вивчення вмісту сайту, а не того, як це вміст знайти. Логічно структурированная і естетично стримана інформація економить нервові клітини користувача. Хороша навигация — це як хороша викладка вітрини: на ній і товар здається краще. Якщо ви, подивившись на свій сайт, побачили недоліки навігаційної структури, пам'ятайте, що усвідомлення болезни — це перші кроки до одужанню.