- З чого складається скелет сайту: приклади
- Які інструменти використовувати для візуалізації
- Microsoft Visio
- XMind
- висновки
Де в інтернет-магазині Hipsters буде сторінка з футляром для спиннер в формі полуниці? Складно уявити? А пояснити керівникові, дизайнеру, програмісту? Ось для цього і потрібно будувати детальну візуалізацію структури сайту.
Скелет сайту у вигляді графіка потрібен, щоб:
- показати, де знаходиться кожна сторінка;
- показати, як перейти на сторінку;
- визначити рівень вкладеності сторінок;
- визначити структуру URL;
- продумати внутрішню перелинковку сайту.
З чого складається скелет сайту: приклади
Структура сайту має на увазі взаємозв'язок всіх сторінок з дотриманням певної ієрархії. Хороша структура забезпечує як зручність користувачеві, так і пошуковому роботу при скануванні і індексації.
Хороший сайт повинен відповідати очікуванням, а значить, будується на основі семантичного ядра . Зверніть увагу на самі частотні фрази. Саме вони вказують, які розділи важливо сформувати на сайті.
Приклад - варіанти вкладених категорій для розділу з колясками:
Грамотно зібране семантичне ядро дозволяє побудувати ієрархію категорій: які варто підняти вище, а які розмістити нижче. Наприклад, на сайті косметології та хірургії розділ «маммопластика» варто винести з розділу «пластична хірургія». Ця категорія може принести багато трафіку, її не можна ховати глибоко в структурі:
Ділянка скелета сайту повинен виглядати так:
В іншому випадку ускладнюється пошук категорії, а для пошукового робота збільшується час на процедуру індексації сторінки.
Такі ситуації - коли деякі категорії варто розбити на кілька - зустрічаються часто, і тут важливо враховувати кілька нюансів:
- скільки товарів даного типу в наявності у клієнта.
- наскільки клієнт зацікавлений в роботі з цією категорією товарів.
Наприклад, на сайті Hipsters є розділ «Гіроборди». Усередині категорії, крім гіробордов, присутні сігвеї. Але частотність запитів по сігвеях і наявність великої кількості моделей в магазині дозволяють створити додаткову категорію і винести її на один рівень з гіробордамі:
Виділяємо категорію в структурі сайту:
Частотність запитів дозволяє зрозуміти, в яких категоріях варто створювати підрозділи. Наприклад, існує розділ «липофилинг», але зібране семантичне ядро говорить про те, що популярністю користуються процедури «липофилинг губ», «липофилинг сідниць», «липофилинг молочних залоз». У такому випадку варто виділити ці підрозділи рівнем нижче:
Включаємо підкатегорії в скелет сайту:
Також в скелеті сайту повинні бути прописані фільтри . Звідки їх взяти? Знову ж з семантичного ядра: фільтрами можуть стати характеристики товарів.
Наприклад, у нас сайт дитячих товарів і неоптимізований розділ з дитячими колясками. Судячи за запитами, цей розділ потрібно розбити фільтром по бренду (звичайно ж, якщо такий товар є на складі):
Вірно і зворотне: якщо люди не шукають товари або послуги з певної категорії, логічно припустити, що такий розділ не потрібен.
Які інструменти використовувати для візуалізації
таблиці Google
Один з найбільш зручних варіантів. Основний принцип візуалізації в таблицях: стовпці відповідають за рівень вкладеності категорій, рядки - за перерахування розділів одного рівня. У стовпці поруч з рівнем варто вказувати URL планованої або вже існуючої категорії:
Важливо, що результат можна експортувати відразу в кілька форматів:
- xlsx - файл Microsoft Excel;
- csv - файл текстового формату, який представляє розділені комою значення (табличні або рядкові значення);
- ods - файл OpenDocument.
Microsoft Visio
Графічний редактор, пропонує безліч шаблонів діаграм, схем, графіків, які можна використовувати в будь-якій області знання. У тому числі присутній деревоподібна діаграма - ідеальний варіант для візуалізації скелета великого сайту.
Програма підтримує функцію загального доступу до графіків (все легко коментувати з різних гаджетів).
XMind
Відмінний софт для створення структури у вигляді діаграм зв'язків. Можна створювати різні види деревовидних і логічних діаграм, таблиць. Програма проста, все створені графіки легко розшарити. Важлива перевага - функція зміни колірної гами, розмірів і форм елементів, різних значків і графічних компонентів. Все це зробить схему зрозумілою і зручною для сприйняття.
Наприклад, так виглядає структура сайту в організаційній діаграмі:
Для великих сайтів з безліччю категорій зручніше розміщувати категорії у вигляді дерева, вертикально:
Що ще можна в XMind:
- застосовувати стилі до певної групи виділених елементів;
- змінювати зовнішній вигляд діаграми в процесі створення;
- згортати і розгортати вкладені категорії для зручності перегляду;
- вказати URL для нових сторінок за допомогою ярликів:
- використовуючи функцію «резюме», можна визначити фільтри, шаблонні для декількох категорій:
- або оформити їх як вкладені розділи, виділивши при цьому унікальним стилем:
У платній версії XMind Pro можна експортувати проект в Excel і таблиці Google.
висновки
- При формуванні структури сайту необхідно щільно працювати як з семантичним ядром, так і з клієнтом - слід враховувати його інтереси при виділенні тих чи інших категорій, а також наявність товару на складі.
- Під час створення скелета сайту важливо прописувати всі структурні елементи: розділи, підрозділи і фільтри.
- Для невеликих сайтів підійде організаційна діаграма, для великих - деревоподібна.
- При виборі сервісу для візуалізації структури слід враховувати можливість експорту в різні формати, функцію спільної роботи і можливість швидко вносити правки в діаграму. Останнє особливо важливо, тому що інтереси користувачів змінюються, а значить уточнювати і доповнювати скелет сайту потрібно постійно.
А пояснити керівникові, дизайнеру, програмісту?
Звідки їх взяти?
