Просторовий дизайн веб-сторінок

 

Просторовий дизайн веб-сторінок

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

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

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

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

Розробляти дизайн веб-сторінки потрібно з урахуванням її просторових розмірів.

 Необхідно уникати горизонтальних лінійок прокручування. Слід також враховувати, що веб-сторінки можуть відображатися на моніторах із роздільною здатністю 800x600 пікселів. Якщо відняти простір, який займають меню браузера та панелі операційної системи, то для показу сайту залишиться область приблизно 760x410 пікселів. Це безпечний розмір сторінки, у разі використання якого сторінка коректно відображатиметься на екранах комп'ютерів більшості відвідувачів.

Є різні способи визначення ширини сторінки та її елементів. Передусім можна задавати кількість пікселів, відведених для різних елементів. Можна визначати загальну ширину елементів сторінки відносно ширини вікна, при цьому решту простору слід заповнити певним кольором. Розміри окремих елементів можна також задавати у відсотках відносно загальної ширини.

Варто продумувати і довжину сторінок.

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

Домашня сторінка

Більшість домашніх сторінок сайтів в Інтернеті мають схожу структуру, а саме:

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

Сторінки сайту

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

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

Новини.

Практично кожен сайт має оновлення, їх варто виносити у відповідний розділ.

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

Контакти.

Важливо надати користувачеві можливість зв’язатись з автором сайта чи з компанією, яка на ньому представлена. Передусім це електронна та поштова адреси, інформація про те, як дістатись.

Питання, що часто задаються.

Поширений тип сторінки, містить перелік найчастіше задаваних питань та відповіді на них.

Розміщення елементів на сторінці

Розміщення елементів на сторінці є дуже важливим для їх сприймання та розуміння. Відносне розташування позначає певне взаємовідношенням між змістом цих елементів.

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

Вирівнювання візуально поєднує кілька елементів. Цей прийом спрацьовує для тексту, зображень, кнопок, гіперпосилань, а також для їх комбінацій. Найсильнішим є вирівнювання по верхньому та лівому краю, оскільки відповідає природному сприйняттю людини. Елементи, що вирівняні за правим та нижнім краєм видаються менш значущими. Осі вирівнювання, що починаються ближче до верхнього лівого кута екрана є вагомішими, ніж розташовані нижче та правіше. Наприклад, http://www.iteach.com.ua/

Охоплення — ще один спосіб створити асоціативні зв’язки між елементами сторінки, або включення одного елемента в інший, наприклад охоплення елементів однією категорією. На сторінці може бути виділена назва групи товарів та кілька позицій з неї. Вони не згруповані між собою, проте чітко відносяться до єдиної групи за рахунок особливого виділення назви групи нагорі, http://www.roshen.com.ua/

Ритм — допомагає пов’язати між собою елементи за рахунок повторення спільних стилістичних особливостей чи розміщення. Наприклад, списки також ґрунтуються на понятті ритму. Ритмом є використання однакового стилю для заголовків одного рівня на всій сторінці — це додає їй цілісності. Може бути так, що на сторінці немає вирівнювання та групування, алеелементи сприймаються як рівнозначні однорівневі категорії за рахунок повторення стилістичних рис. http://www.wikipedia.org/

Баланс — це рівновага зображення, розташування об’єктів та їх візуальна вага у композиції.

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

Пропорція — це співвідношення між різними елементами або між цілим об’єктом та його частинами. Менші елементи майже непомітні, тоді як більші виходять на перший план.

Домінантність визначає візуальну вагу композиції, створює простір та перспективу, і частовказує на місце композиції, яке переглянуть першочергово.

Дизайн інформаційного наповнення веб-сторінки

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

Підготовка текстів

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

1.    Писати менше. Оскільки користувачі не читають, а лише переглядають веб-сторінки, тексту на них має бути небагато. Потрібно писати стисло, лаконічно і тільки найважливіше. Чим чіткіший буде виклад, тим він краще сприйматиметься.

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

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

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

4.