Элементы хорошего дизайна и юзабилити сайта…

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

1. Сетка — очень важный элемент при создании не только сайтов но и многого другого. За правильную сетку вас полюбят даже верстальщики.
Любая страница любого сайта может содержать множество различных элементов. Будь то шапка, контент, места под баннеры, ссылки и какие то элементы типа счетчиков и тп. Важно чтобы все эти штуки удобно располагались и не портили общий вид сайта. То есть все должно быть гармонично вписано в дизайн, и при его создании стоит учитывать места возможного их появления. Тут то как раз и пригождается наша сетка а точнее удобная разметка страницы сайта.
Существует схема классической разметки сайта. и содержит она:

Логотип — название бренда, слоган, вобщем представление компании или сайта. в классической схеме находится в верхнем левом углу.

Меню навигации — верхнее меню в верхней части сайта, и боковое меню слева иногда справа.

Основное содержание, контент — центр страницы с основной информацией сайта.

Боковой блок, блок информации — находится как правило в правой части страницы, в нем обычно располагаются объявления, дополнительные элементы сайта и реклама.

Подвал, футер — как правило не несет никакой информации, кроме правообладателя, либо дублирует основную информацию (дополнительная навигация, контактные данные)

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

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

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

3.Горизонтальная навигация — отлично подходит для несложных и не длинных списков . Отлично располагается и под и над логотипом. Является удобным, заметным и отлично экономит место на странице.

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

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

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

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

8. Подвал (футер) — в последнее время простые маленькие футеры теряют свою актуальностоь и все более популярными становятся футер красивые и несущие определенную пользу. То есть более удобно создавать не пустой маленький футер, а красиво оформленый и имеющий 3-4 блока с различной информацией, те же списки записей, какую то статическую информацию, последние фотографии, кнопки подписок и счетчиков.

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

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

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

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

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

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

15. Коллекции — неважно чего коллекции будь то ваши фотографии, ссылки на друзей, работы портфолио или еще что либо. Но они должны иметь место и быть красиво оформлены. Сетки превью или оформленные списки помогут вам.

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

17. Формы — любые сайты как правило имеют какие то формы для заполнения, будь то отправка комментария или какой то платеж или анкета и тп. Для форм как и для регистрации важна максимальная простота. Крупные формы с видимым названием и подсказками упрощают их заполнение. Желательно разделять этапы заполнения на категории (общая информация, контакты), а так же отображать, на каком этапе заполнения находится пользователь, чтобы он знал сколько осталось до конца.

18. Подписки — почти все сайты желающие чтобы пользователи снова и снова возвращались к ним имеют формы подписок. Таким образом пользователи могут следить за новостями или обновлниями на сайте. Как правило сейчас для подписок используется RSS и Twitter, но пренебрегать email подпиской так же не стоит, потому что некоторым удобнее использовать именно ее, любые другие популярные формы подписок так же приветствуются. Кнопки подписок должны быть заметными что увеличит шансы «подцепить» очередного читателя.

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

Элементов хорошего сайта может быть еще огромное множется, и кроме того они еще и индивидуальны для каждого сайта, но если честно я просто уже устал писать стока многа букав ))))