Wiki-учебник по веб-технологиям: Дизайн/СоветыПоПостроениюИнтерфейсов ...

Главная | |

Советы по построению интерфейсов веб-страниц


Оглавление документа

1. Текст


  1. Если вы собрались делать на страничке какой-либо фон: старайтесь подобрать контрастную и одновременно расслабляющую глаза комбинацию шрифта и фона.
  2. Не используйте большого разнообразия шрифтов.
  3. Старайтесь делать блоки текста как можно более узкими. Для большей удобочитаемости, строка должна содержать приблизительно двенадцать слов.
  4. «Ошибки в правописании» – одна из самых главных ошибок в web-дизайне. Пользователи не любят грамматических ошибок, если на вашем сайте множество ошибок, то пользователи могут перестать ходить на ваш сайт.
  5. Текст для Web-а должен отвечать на вопросы пользователей и использовать для этого простой язык без специальных терминов (это также улучшает видимость вашего текст в поисковиках, так как пользователи ищут нужные им документы по своим словам, а не по вашим специфическим терминам).

2. Графика


  1. Не используйте на страничке большие картинки. Если очень надо, лучше порежьте картинку на более мелкие части и вставьте их в таблицу. Этим вы существенно облегчите загрузку графики. Используйте маленькие картинки-ссылки на большие картинки. Если вы помещаете фото на веб-сайт: Оставляйте на эскизе меньше людей, мелких объектов, и выбирайте менее сложные композиции. Осветляйте фон за объектами крупного плана. При изготовлении эскизов пользуйтесь техникой нюанса. Не просто уменьшайте всю фотографию целиком, а выделите в ней важный фрагмент и уменьшите только его.
  2. Если есть возможность, сделайте альтернативу картинкам-ссылкам в виде текстовых ссылок. Пусть на сайте присутствует и то, и то, так как некоторые пользователи отключают в своих браузерах загрузку графики. Пишите в описании картинки ALT-текст.
  3. Не используйте скачанную с бесплатных серверов графику, это касается всяких значков типа E-mail, Welcome, Next и тд. Старайтесь, по возможности, рисовать свою графику, от этого у посетителей вашей странички останется хорошее мнение.
  4. Используйте графические изображения, связанные с материалами сайта, а не просто для украшения.
  5. Не используйте много красок в цветовой гамме своей страничке. Она должна быть выдержана в едином стиле.
  6. Многие web-дизайнеры любят навешать множество тяжеловесных апплетов, анимации, для того чтобы их сайт смотрелся красивей. Этого не стоит делать, так как у многих один апплет зачастую грузится более 1 минуты, и пользователи не будут дожидаться полной загрузки и просто уйдут.

  1. Навигация
    1. Ясно указывайте на странице, что является ссылкой: если это текст, пусть он будет цветным и подчеркнутым (не используйте подчеркивание для обычного текста)
    2. Не скрывайте различие между посещенными и непосещенными ссылками
    3. Объясните пользователям, что они обнаружат, перейдя по ссылке, добавьте хоть немного ключевой информации в текст самой ссылки, чтобы контент можно было легко сканировать человеку и поисковому роботу. Не используйте в ссылке текст «щелкнуть здесь» или другие подобные ничего не говорящие фразы.
    4. В особенности не открывайте страницы в новых окнах (за исключением PDF-файлов и проч.)
    5. Когда посетитель оказывается на странице, которая упоминается в навигационном меню, этот пункт-ссылка в меню должен быть отключен или выделен таким образом, чтобы посетителю было ясно, где он сейчас находится.
    6. Не делайте навигацию слишком запутанной. Доступ к любой странице сайта должен быть с не более чем трех щелчков мыши.
    7. Используйте дублирующую навигацию во всех случаях, когда присутствует логическая вложенность содержания — на новостных сайтах, на выставках, в каталогах, магазинах и т. п.
  2. Построение
    1. Если есть возможность, постарайтесь не использовать на страничке фреймы, это облегчит индексирование вашего сайта в поисковых системах.
    2. Используйте «резиновую» вёрстку страницы, что позволяет пользователям менять размер страницы.
    3. Не применяйте более трех уровней вложенности таблиц. Вы разбиваете большие таблицы на несколько маленьких, каждая таблица отображается в соответствии с порядком их обработки. Это не может ускорить процесс загрузки веб-страницы, но вашим посетителям будет казаться, что загрузка происходит быстрее. Таблицы не отображаются пока все вложенные таблицы не будут обработаны.
  3. Формы. При составлении формы:
    1. Удалите все лишние вопросы. Например, так уж вам нужно знать, как следует обращаться к пользователю: мистер, миссис или мисс?
    2. Сделайте обязательными лишь те поля, которые вам точно нужны.
    3. Поддерживайте функцию автозаполнения в браузере. Для этого выбирайте для полей в html-коде обычные имена (просто name, address и т.п.)
    4. Устанавливайте курсор автоматически на первом поле формы. Так экономится один щелчок мышкой.
    5. Гибко поддерживайте формат телефонных номеров, номеров кредитных карточек и проч. Ведь очень просто запрограммировать компьютер, чтобы он сам удалял лишние скобки и пробелы в номерах. Это особенно важно в случаях с пожилыми людьми, когда сайты требуют от них данные в непривычном для них формате. Зачем терять заказ только из-за того, что покупатель предпочитает красиво группировать цифры по четыре в номере своей кредитной карточки, а не вводить их сплошным потоком из 14 цифр?
    6. Не делайте формы слишком требовательными. Если в вашей форме информация разделена на части, а пользователь привык видеть ее как единое целое, пользователю придется тратить лишнее время на перемещение курсора по полям формы.
  4. Совместимость
    1. Никогда не ориентируйте свою страничку на определенный броузер. От этого вы можете потерять до половины своих посетителей в день. Постарайтесь найти компромисс.