Полезные советы по юзабилити (web ресурса)

  1. Доброе время суток...
    Скажем так это не статья, а не большая комнатка для обсуждений !

    Давайте поговорим о не мало важном, о юзабилите веб-ресурса, это может быть (информационный портал, сайт визитка и т.д.)

    Смысл таков, давайте максимально опишем заповеди, которые не желательно совершать на своем сайте...

    И так преступим...

    1. Не какой раздражающей рекламы.
    Не каких всплывающих рекламный баннеров (pop-up ,попандер).
    Pop-up - всплывающий баннер, который вскакивает в середине экрана и мешающий при обзоре сайта.
    Попандер (от англ. Pop-under либо popunder) Всплывающее окно, которое незаметно для пользователя ложится под окна запущенных приложений. Пользователь обнаруживает попандер, только когда закрывает все окна. В большинстве случаев попандер используется как реклама. Владельцы сайтов все чаще ставят попандер наряду с обычной рекламой.

    2. Соблюдать цветовой баланс сайта.
    Так как цвет играет большую роль... не давно начав изучать гармонию цвета и понял что цвет штука сильная...

    Какой смысл ?

    к примеру -

    Красный цвет -
    создает приподнятое настроение, но вместе с тем он неспокойный: раздражает, быстро утомляет нервную систему, снижает трудоспособность. Под его влиянием повышается кровяное давление, ускоряется ритм дыхания. Поэтому он не рекомендуется для жилых помещений.
    Оранжевый цвет - способствует хорошему настроению, создает праздничную атмосферу.
    Желтый цвет - отличается ясностью, свежестью, стимулирует зрение и нервную систему.
    Зеленый - цвет - листьев и травы - настраивает на спокойный лад, склоняет к отдыху. Под его влиянием снижается кровяное давление, повышается восприимчивость слуха. он наиболее благоприятный для человека.
    Голубой цвет - со всеми его оттенками создает впечатление простора, глубины и прохлады. Он успокаивает нервную систему, повышает трудоспособность, больше, чем зеленый, способствует снижению тонуса мышц и кровяного давления. Этот цвет особенно благоприятный для людей с повышенной нервной возбудимостью.
    Фиолетовый цвет - настраивает на меланхолический лад, на раздумья. Однако установлено, что он не столько успокаивает, сколько расслабляет психику и поэтому быстро утомляет человека.

    Сочетание нескольких цветов в одной композиции вызывает более сложные чувства.

    и т.д

    Это вполне научно сопоставимый факт !
    Советую вам глубже окунуться в этот материал, будет очень полезно !

    вводной материал
    - "ссылка"

    3. Быстрота сайта, залог посещаемости!
    Максимально оптимизировать сайт, для быстрой работы !
    Время деньги, если человеку что либо нужно и он ищет конкретный материал, то зайдя на сайт он смотрит доступность его потребности,
    сайт долго грузится предавая затраты времени и нервов, он автоматически закрывает его, переходя на след. сайты !

    3.1. Не хранить большую информацию в ячейки таблицы.
    Если у вас табличное построение, и в вашей ячейки находится большущая по размерам статья о том "Как правильно изготавливать бублики ?", то настоятельно вам советую разбить данную статью по нескольким ячейкам таблицы ! а также использование стилевого свойства tablelayout.

    Почему ?

    -
    Особенность таблиц такова, что пока последнее слово в самом низу таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Но если таблица велика по высоте, может пройти достаточно много времени, прежде чем мы увидим нужную информацию.

    так же и с изображениями...

    Называется это - "interlaced"
    Что такое - "interlaced"

    Обычно изображения на веб-странице загружаются построчно сверху вниз, поэтому последнюю, нижнюю строку мы увидим, когда изображение будет загружено полностью. Однако в формате GIF можно указать способ хранения данных и их загрузки — первый последовательно загружает строки от первой до последней, а второй хранит строки в определенном порядке и так же их выводит в документе. Второй способ получил название — хранение с чередованием строк (interlaced). В этом случае линии изображения размещаются в четыре прохода, при загрузке картинки ее качество последовательно улучшается, пока не становится исходным.

    Порядок записи пикселов в изображении, кодируемом в режиме чередования строк:

    Проход 1: каждый восьмой ряд, начиная с нулевого;
    Проход 2: каждый восьмой ряд, начиная с четвертого;
    Проход 3: каждый четвертый ряд, начиная со второго;
    Проход 4: каждый второй ряд, начиная с первого.


    На рис. 1 показан порядок записи в изображении в случае режима чередования строк.

    [​IMG]
    Рис. 1. Порядок вывода строк рисунка

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

    На рис. 2 приведено изображение в процессе загрузки, а на рис. 3 уже полностью сформированное изображение. Несмотря на размытость первой картинки, вполне можно угадать, что она содержит.

    [​IMG]
    Рис. 2. Частично загруженное изображение с включенным параметром interlaced

    [​IMG]
    Рис. 3. Полностью загруженное изображение

    Вводной материал:
    1. Общие рекомендации при работе с форматом JPEG.
    2. Оптимизация файлов в формате JPEG.
    3. Общие рекомендации при работе с форматом GIF.

    Так же я читал книгу, о рождение форматов изображения и их правильные роли, где и в каком виде, качестве подавать изображения.
    Только позабыл, что за книжечка !

    Ну пока на этом остановимся, будем ждать ответной активности по данной тебе, считаю тему популярной и полезной для всех веб-программеров.

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

    Излишки не грамотной анимации, у пользователя вызывает дискомфорт, после чего так же может покинуть ваше бунгало.

    5. Если у вас портал (варез, музыкальный, видео и т.д), то
    я на личном опыте заметил и проводил опросы, что заходя на сайт пользователи данных ресурсов, особо по сайту не гуляют, они просматривают 2-5 первых страниц, после чего им дальше лень пробираться !
    Значит делаем вывод, отображение новостей на страницу ставим ( не менее 15 )... если конечно ваше скрипт поддерживает данную настройку !

    6. Так же ряд правил..
    6.1. При регистрации, если у вас стоит проверка e-mail'a, то указать пользователю, потому что много сайтов, которые открлючили данную функцию и люди пишут e-mail от балды, по этому чтобы на данном этапе не создать дискомфорт, предупреждаем !

    6.2. Укажите в логотипе ссылку на главную страницу.
    6.3. Так же указывайте меню возврата назад (вернуться обратно).
    6.4. Если ваш скрипт поддерживает функцию, добавление новости в закладку, то есть у профиля есть страница с закладками, где он с легкостью создает/редактирует закладки по вашему ресурсу.
    6.5. Так же часто замечал, заходя на сайт установлен музыкальный плеер и он начинает играть как только открываешь страницу...
    если вы размещаете данный модуль, то не нужно ставить какую нить долбежку, позаботьтесь о пользователе :)
    Укажите, что у вас есть плеер и он сам выбирает что ему нужно и послушает если решит это дело важным.
     
    3 пользователям это понравилось.