Хорошо ли выглядит наш сайт?

ПРИЛОЖЕНИЕ 5.Эргономические аспекты электронного дизайна

Для того чтобы сделать сайт привлекательным необходимо при его создании придерживаться некоторых неформализованных рекомендаций. Эти рекомендации основаны на факторах психологического восприятия информации с учетом принципов традиционного дизайна:

1. Нельзя перегружать страницы графикой. При этом существенно снижается скорость их загрузки, а, следовательно, и скорость получения нужной информации пользователем.

2. Фактором, влияющим на скорость получения информации, является также и объем исходного кода страницы. Уже становится стандартом ограничение максимального размера страницы в 50 Кбайт. Для сокращения размеров кода страницы рекомендуется использовать каскадные стили и скрипты.

3. Важно придерживаться одного стиля для всех страниц сайта. Стиль должен соответствовать тематике сайта.

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

5. Если используются мелкие элементы дизайна, типа полосок и значков, то они должны быть качественно выполнены, т.е. не портить страницу, а делать ее более выразительной.

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

7. Необходимо учитывать разницу отображения страниц на различных браузерах с различным разрешением экрана. Дизайн не должен нарушаться при 256 цветах, на двух разрешениях экрана (1024´ 768, 1280´ 1024) и пониматься тремя основными браузерами (Internet Explorer, FireFox, Google Chrome).

8. Нет необходимости подписывать каждую страницу сайта. Достаточно указать авторские права снизу первой страницы. Но наличие информации по авторским правам позволит проще решать морально-правовые вопросы.

9. Важно ограничивать объем информации на каждой странице, особенно на первой. Для простоты психологического восприятия желательно, чтобы количество ссылок не превышало 7.

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

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

12. Не рекомендуется смешивать типы шрифтов, главным образом из-за того, что их различие не выделяет нужную информацию, как хотелось бы, зато портит общий вид страницы, когда смешивают рубленый шрифт и шрифт без засечек. Arial, Tahoma, Vardana, Sans-Serif — шрифты без засечек; Times New Roman, Courier New — рубленые шрифты.

13. Необходимо использовать только стандартные шрифты, какими являются: Times New Roman, Arial, Tahoma, Verdana, Sans-Serif, Courier New. В противном случае, у пользователя может не быть указанного шрифта, и броузер будет использовать стандартные: Times New Roman — для Body, Arial — для таблиц.

14. Размеры шрифтов должны соответствовать структуре гипертекстовой страницы.

15. Фон страницы может быть как в виде рисунка, так и монотонным. Естественно, фоны с рисунком загружаются дольше и не обязательно в первую очередь. Наиболее часто для строгого делового стиля используется монотонный. Если используется специальный фон, то необходимо учитывать, что фон должен быть подложкой, на втором плане, а не центром внимания пользователя, поэтому выбирайте не сочные цвета, а близкие к прозрачным. Цвет отдельных объектов, фон страницы, таблиц и ячеек не должны доминировать над информацией, пользователь не должен отвлекаться дизайном страницы.

16. При редактировании HTML-кода старайтесь сохранять структуру программы, смещая более важные теги левее, например, < table> должен быть левее, чем < td>. Все теги должны иметь одинаковое написание (начинаться с заглавной буквы, быть полностью из прописных или строчных букв). Расположение параметров в описании тега также желательно выполнять в соответствии с нотацией языка HTML.

17. Для уменьшения размера получаемого HTML-кода, можно использовать таблицы каскадных стилей CSS. За счет этих таблиц можно избежать многократного повторения описания стилей шрифтов.

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

19. Графические элементы надо проектировать, также принимая во внимание различное разрешение. В частности, все значки должны по-прежнему хорошо смотреться, когда они отображаются при разрешении 100 dpi или больше. Чем больше разрешение, тем меньше становятся размеры графических элементов. Поэтому, чтобы текст, включенный в графику, оставался читаемым, необходимо задавать для него относительно большой размер шрифта. Обычно не рекомендуется включать текст в графические элементы, так как это замедляет процесс передачи и увеличивает объем работы при переводе элементов пользовательского интерфейса на иностранные языки.

20. Пустое пространство — активный элемент дизайна.

Позвольте вашему тексту дышать. Использование пустого пространства — это не прихоть отдельного дизайнера и не имеет отношения к чувству прекрасного.

«Ширина колонки должна быть пропорциональна размеру шрифта. Чересчур широкие колонки утомляют глаза и ещё имеют некоторый неблагоприятный психологический эффект. Чересчур сжатые тоже могут мешать, потому что прерывают процесс чтения и фрустрируют читателя, заставляя глаза сменять строку слишком часто».

Использование пустого пространства уменьшает уровень напряжения, так как позволяет проще фокусироваться на главном. Вам не надо заполнять всё окно браузера.

Простое правило: по 10-15 слов в строке (это для английского языка; для русского, где слова в среднем длиннее, стоит взять величину поменьше). Для резиновой вёрстки, при 100% величины шрифта, половина окна для основной колонки будет хорошим решением на большинстве разрешений экрана.

21. Поменяйте высоту строки на удобную для чтения. Вот что говорят специалисты по чтению: Строки текста, расположенные слишком тесно, ухудшают скорость чтения, потому что в таком случае соседние линии считываются одновременно. Глаз не может фокусироваться на чрезмерно близких строках, и … читатель тратит энергию в неправильном месте и утомляется быстрее. Всё то же остаётся правдой и для строк, которые слишком далеко отстоят друг от друга.

Межстрочное расстояние в HTML слишком мало по умолчанию. Если вы увеличите его, текст станет более легко читаемым. 140% будет в самый раз.

22. Используйте контрастные цвета. Об этом даже необязательно говорить. Но если вы используете любую из нижеследующих комбинаций:

· светло-серый текст на тёмно-сером фоне;

· серебряный текст на снежно-белом фоне;

· серый на жёлтом;

· жёлтый на красном;

· зелёный на красном и так далее…

… значит вы не веб-дизайнер, а всего-лишь дизайнер-самодур. Если вы настаиваете на бытии своём веб-дизайнером, то должны знать что никто не сможет прочитать, что написано. Прекратите этот абсурд и позвольте людям прочитать то, что пишете. Заметьте, для экранного дизайна наиболее сильный контраст тоже неидеален, так как буквы начинают мерцать.

23. Нет тексту в изображениях!

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

ПРИЛОЖЕНИЕ 6. Советы по организации пространства главной страницы и ускорению ее загрузки

1. В процессе создания и развития коммерческого сайта главный приоритет — продаваемые продукты/услуги. Не стоит надеяться, что посетитель будет долго рассматривать наш сайт в поисках того, что с него продается. Если потенциальные клиенты не в состоянии быстро найти то, что предлагает сайт, оценить выгоды этого предложения, насколько велики шансы что-то продать?

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

3. Каждая часть сайта должна иметь определенную цель: вести потенциальных клиентов к продуктам и услугам.

4. Многие советуют сделать главную страницу как можно меньше (это не относится к мини-сайтам), но, тем не менее, включить в ее содержание наиболее важные элементы.

5. Левый верхний угол главной страницы — не менее важная ее часть, чем центр. Если там располагается логотип, то в описание изображения должен быть включен тег «alt» именно с ключевыми словами, а не просто произвольным названием картинки. Это один из моментов, которому авторы всех руководств по раскрутке сайтов придают большое значение, потому что это важно для позиционирования сайта в поисковых машинах.

6. Форму для подписки на рассылку желательно расположить как можно выше.

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

8. Скорость загрузки — одна из важнейших вещей для любого сайта (правило тридцати секунд). У владельца сайта есть всего тридцать секунд, в течение которых страница должна загрузиться и намертво «схватить» внимание посетителя. Или тот просто покидает этот сайт навсегда.

9. Идеальным считается вариант, когда главная страница загружается в пределах восьми – десяти или менее секунд при скорости модема 56 Кб. Согласно данным Forrester Research и Gartner Group, коммерческие сайты теряют 1, 1-1, 3 миллиарда долларов в год из-за того, что клиенты уходят с сайтов, так и не дождавшись их загрузки.