Підказки та поради для веб-майстрів – Топ 100 +, HTML, XML, DHTML, Інтернет-технології, статті

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правило: Ніколи не використовуйте атрибути 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 www.protiques.com


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

*

*