Підказки та поради для веб-майстрів – Топ 100 +

Peter de Pradines, пров. Олександр Клімов
AKWProject

Теорія і практика навігації по сайту

Правило: Використовуйте прості і запам'ятовуються URL,
щоб поліпшити навігацію.

Правило: Не приховуйте URL – складний він, або простий –
якщо тільки Ви не хочете, щоб люди не могли
посилатися безпосередньо.

Правило: Використовуйте
несуперечливі і ясні мітки дозволяють
відрізняти одну сторінку від іншого.

Правило: Слова типу назви
установи або логотип повинні завжди повертати
відвідувача на головну сторінку сайту.

Пропозиція: Стан кнопок повинно
розглядатися як додаткова форма
мітки сторінки. Кнопка у натиснутому стані
повинна завжди бути втиснула, а не опуклою.

Пропозиція: При використанні кольоровий
маркування для вказівки розташування на сайті,
переконайтеся, що використані кольори сильно
відрізняються один від одного.

Пропозиція: Не намагайтеся повторювати в посиланнях
механізм історії броузера.

Правило: Уникніть посилань, названих просто
"Назад". Завжди явно вкажіть, куди буде йти
зворотній зв'язок.

Правило: Уникайте створювати сторінки, на
які не можна повернутися використанням
кнопки броузера "Назад".

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

Пропозиція: Уникайте розміщувати основну
навігацію в самому правому краю екрана.

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

Правило: Розміщення навігації повинно бути
постійно в межах макета сторінки.

Правило: Навігація повинна бути постійна, і
елементи сторінки повинні розташовуватися в
однаковому порядку.

Пропозиція: Орієнтовані на навігацію
сторінки повинні поміщатися по вертикалі на один
екран коли це тільки можливо, те ж саме
повинно виконуватися для основної навігації під
всіх інших типах сторінок.

Пропозиція: Мінімізуйте відстань між
кнопками основної навігації вашого сайту і
кнопкою "Назад".

Пропозиція: Завжди намагайтеся обмежувати
переміщення миші між послідовними
елементами навігації.

Пропозиція: Уникайте використовувати фрейми для
створення структури сторінки. Використовуйте їх для
навігації.

Пропозиція: При використанні фреймів, зробіть
в меншому фреймі управління великим.

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

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

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

Посилання: Текст, Кнопки, Іконки та Графіка

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

Пропозиція: При використанні карт зображення
(Image maps), завжди забезпечуйте додаткову
текстову навігацію.

Правило: Ніколи повністю не видаляйте індикацію
відвіданих посилань.

Правило: Уникайте змінювати кольори посилань.

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

Пропозиція: Уникайте вимикати підкреслення
посилань. Якщо ж Ви це робите, то придумайте
іншу форму позначення посилань.

Пропозиція: Графічні кнопки повинні мати як
мінімум невибране і вибране стан.
Стан з наведеною на кнопку мишею і натискання
стан мають розглядатися окремо.

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

Пропозиція: Вказуйте, чи веде посилання до
переходу в межах сторінки, в межах сайту,
або на інший сайт. Не ховайте URL, відвідувач
може отримати з нього відповідь на це питання.

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

Пропозиція: Використовуйте іконки або символи, або
діалог попередження перед засланням.

Пропозиція: Уникайте зміни кольору
відвіданих посилань.

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

Пропозиція: Використовуйте попередження, або
очевидні позначення.

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

Правило: Невірні посилання, повинні
розглядатися, як катастрофа.

Пропозиція: Уникайте автоматичної
переадресації при помилку 404.

Пошук і Дизайн

Правило: Використовуйте досвід поcетітеля в роботі з
пошуковими системами. Використовуйте таке ж
розміщення і позначення, як і в засобах
локального пошуку на комп'ютері, але уникайте
наслідувати механізмам пошуку на відомих сайтах.

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

Правило: Якщо сайт складається з однаково
оформлених даних, складних для пошуку, або
містить більше 100 сторінок, створіть механізм
пошуку на сайті.

Правило: Якщо ви хочете, щоб відвідувачі часто
поверталися на ваш сайт, забезпечте кошти
пошуку на сайті.

Пропозиція: Якщо сайт має пошуковим
механізмом, увімкніть кнопку пошуку в усі
сторінки.

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

Правило: Пошукова форма повинна відповідати
змісту того, що відвідувач може шукати
на сайті.

Пропозиція: Основні текстові поля форми
пошуку повинні бути в два рази більше ніж
додаткові.

Пропозиція: Краще обмежити пошук темою,
категорією, або ідеєю, ніж розділом сайту.

Правило: Просунуті пошукові механізми
повинні мати інструкції з використання та
приклади.

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

Правило: Формат результатів пошуку повинен
включати повернуті пошуковим механізмом
дані.

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

Типи сторінок і Макети

Правило: Вибирайте розмір сторінок таким, щоб їх
зміст завжди було під рукою.

Правило: Уникайте широких сторінок, особливо з
горизонтальною прокруткою.

Правило: Намагайтеся розмістити важливі елементи,
наприклад основну панель навігації, на першому
екрані.

Пропозиція: Визначте, що міститься в
видиму на екрані частину сторінки, і пробуйте
натякнути на зміст сторінки поза першою
екрану.

Правило: Якщо є можливість, уникайте
обмежувати дозвіл сайту.

Правило: При створенні сторінок для WebTV,
створюйте сторінки з жорсткою структурою
шириною 544 пікселя.

Пропозиція: При створенні дизайну для
певних розмірів екрану, залиште
вільними 10 відсотків від доступного місця.

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

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

Пропозиція: Уникайте використовувати
розтягуються конструкції з невеликим
кількістю змісту.

Пропозиція: Якщо це можливо, намагайтеся
уміщати зміст сторінки в межах 3-5
екранів по вертикалі.

Пропозиція: Керуйте полями сторінки з
деяким коефіцієнтом.

Пропозиція: Забезпечуйте явну посилання, щоб
можна було швидко пропустити сторінку з
заставкою.

Правило: Основна сторінка повинна задавати
візуальний і навігаційний тон сайту.

Правило: Основна сторінка повинна грузиться
швидко, але бути досить цікавою, щоб
залучати відвідувачів.

Правило: Основна сторінка повинна ясно вказувати
на утримання сайту.

Пропозиція: Основна сторінка повинна
забезпечувати основну інформацію про сайт і
інформацію про зміни на сайті.

Пропозиція: Якщо окрема сторінка є
важливою або служить початком розділу, то
виділіть її візуально.

Правило: Сторінки сайту повинні слідувати стилю і
навігаційній системі головної сторінки, по
принаймні за духом.

Пропозиція: Робіть ЧАСТО ЗАДАЮТЬСЯ
однієї легко друкованої сторінкою, якщо вони мають
розумну довжину.

Пропозиція: Забезпечуйте посилання для
повернення до початку документа або до списку
питань після кожної відповіді.

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

Пропозиція: Вказуйте на сторінках дату
останньої зміни.

Правило: Якщо на сайті збирається персональна
інформація, забезпечте легкодоступні, зрозумілі
правила і умови збереження
конфіденційності.

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

Пропозиція: Попередьте відвідувачів, що
надруковані сторінки будуть відрізнятися від того,
що видно на екрані, або вкажіть версію для
друку.

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

Пропозиція: Вказуйте на PDF-файли за допомогою
тексту та іконки, і забезпечте інформацію про
використанні цього файлу.

Правило: Створюйте заключну сторінку для
кожного розділу.

Пропозиція: Забезпечте посилання для повернення до
основній сторінці сайту зі сторінки виходу.

Правило: Відпускайте відвідувача зі світом.
Уникайте фраз типу "будь ласка не йдіть
"Або спливаючих вікон.

Пропозиція: При використанні текстового
дизайну, передбачайте навігаційну панель
нарівні з контекстними цим посиланням.

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

Пропозиція: Уникайте використовувати
метафоричний дизайн на сайтах для досвідчених
відвідувачів або для активно відвідуваних.

Пропозиція: Уникайте нетрадиційних
інтерфейсів на часто відвідуваних сайтах.

Пропозиція: Використовуйте верхні і нижні
колонтитули для сайтів, орієнтованих на
надання великого обсягу інформації.

Правило: У веб-дизайні прагнете завжди бути
послідовним, але оригінальним.

Текст

Правило: Збільшуйте розмір тексту, щоб
поліпшити його читабельність.

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

Правило: Окремі деталі в дизайні сайту можуть
сильно впливати на його сприйняття.

Пропозиція: Уникайте використовувати згладжування
в написах, зроблених дрібним шрифтом.

Пропозиція: Використовуйте три шрифту в дизайні
сторінки: один для заголовків, один для основного
тексту, і один для елементів навігації.

Правило: Текст у стовпцях тексту на
веб-сторінках ніколи не повинен переноситися з
низу одного стовпця на верх іншого.

Правило: Навігаційні сторінки сторінки
вимагають меншої кількості вільного
простору в тексті, ніж сторінки
інформаційні.

Пропозиція: Будьте уважні при
використанні слів, які мають
альтернативні значення в мережі.

Кольори, Зображення та Фони

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

Пропозиція: Щоб безпечно використовувати більш
216 кольорів, використовуйте так звані гібридні
кольору.

Пропозиція: Через погану сумісність
браузерів уникайте використовувати тег <BASEFONT>
для установки шрифту в документі – особливо, якщо
йде робота з квітами.

Правило: Завжди зберігайте зображення в окремому
каталозі.

Правило: Називайте зображення значущими
іменами, групуючи їх за метою використання.

Правило: Ви не можете використовувати тег <IMG> без
атрибуту SRC.

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

Правило: Завжди використовуйте атрибути WIDTH і HEIGHT в
тегу <IMG>.

Правило: Ніколи не використовуйте атрибути WIDTH і
HEIGHT для зміни розмірів зображень в HTML. Якщо
необхідно зображення меншого розміру,
створіть окрему меншу версію.

Правило: Завжди встановлюйте атрибут BORDER
рівним нулю, якщо тільки у Вас немає причини робити
інакше, і пам'ятайте, що зображення всередині
посилання без нульового атрибута BORDER будуть по
замовчуванням мати кольорову кордон.

Пропозиція: Обмежтеся форматами JPEG і GIF до
тих пір, поки інші не стануть
загальновживаними.

Пропозиція: Не покладайтеся виключно на
колір в посиланнях та інформаційної графіку.

Правило: При створенні макета сторінки з
нарізаними зображеннями, поміщеними в
таблицю, переконайтеся, що атрибути WIDTH і HEIGHT у
зображень і елементів таблиці збігаються.

Правило: Для коректного розташування
порізаного зображення в осередках таблиці
встановіть атрибути таблиці CELLPADDING і CELLSPACING
рівними нулю.

Пропозиція: Не робіть фонове зображення
дуже маленьким (наприклад 1-2 пікселя), оскільки
це може дратувати очей.

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

Це я Вам обіцяю:)


Переклад виконаний на
основі права Ексклюзивне використання статті Олександром Клімовим.
Передрук в будь-якій формі заборонено.


Peter de Pradines is owner and webmaster of
the HiperNet Group. An honours degree graduate in Computer Science with 30 years hands-on
experience, Peter lectures in Europe and holds winter workshops in the beautiful
Mediterranean island of Mallorca. Specializing in web design and promotion he may be
contacted at: mailto: hipernet@apdo.com or http://www.protiques.com


Peter de Pradines власник і
веб-майстер компанії HiperNet Group. Peter володіючи наукового
ступенем і маючи за плечима 30-ти річний досвід,
читає лекції в Європі і проводить зимові заняття
на прекрасних островах Мальорки. З приводу
питань веб-дизайну та розкрутки сайтів можна
звертатися: mailto: hipernet@apdo.com
або http://www.protiques.com


Схожі статті:


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

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*