Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> Самосовершенствование

Как улучшить юзабилити сайта? 7 замечательных советов которые вам помогут.


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

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

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

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

    Во время чтения советов, держите эти три общих принципа у себя в голове:

  • содержание и оформление должны быть лёгкими в восприятии и удобны для чтения;
  • всё что будет написано, должно быть понятно при первом же прочтении;
  • исследования показывают, что в лучшем случае, мы читаем лишь 28% текста на веб-странице, это значит общая идея должна быть настолько понятно изложена, что если пользователь решит просмотреть её по диагонали, основный смысл он всё равно поймёт.

Какие простые советы нам нужно выполнить, чтобы достичь эти цели? Читаем дальше чтобы узнать.

    1.Краткое содержание.

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

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

    Эта печальная статистика подкреплена юзабилити исследованием проведённым Якобом Нильсеном. Исследование утверждает, что для того чтобы улучшить юзабилити сайта на 58%, количество материала на странице нужно уменьшить примерно в половину.

    Для того чтобы повысить читаемость, нужно использовать более короткие слова и предложения, всё это влияет как на удобство чтения так и понимания.

Советы:

  • вырежьте всё лишнее из вашего текста, всё что не выражает мысль заголовка;
  • вкладывайте больше смысла в меньшее количество слов, изъясняйтесь понятнее;
  • избегайте длинных абзацев и предложений.

    Экономьте время читателя, пишите "1000 человек", вместо "одна тысяча", это облегчит сканирование документа глазом и понимание того что вы цените время потраченное на вашу страницу. Это увеличит к вам доверие.

    Проверьте вашу страницу на юзабилити с помощью онлайн инструмента The Readability Test Tool. Данный инструмент проверит ваш стиль оформления на читаемость, с помощью формул Flesch Kincaid Reading Ease (Лёгкость чтения) и даст оценку.


 
    2. Используйте подзаголовки чтобы разбить длинную статью.

    Юзабили – исследования, описанные в статье «web content management» экспертом Джерри Макговерном (Gerry McGovern), привели его к выводу, что человек, просматривая страницу, ищет в ней блоки или разделы называемые «блоками чтения».

    То есть, когда мы смотрим на веб-страницу, мы склонны воспринимать её не как единое целое, а скорее как отдельные друг от друга информационные блоки. Это как в блогах, мы склонны не читать всё подряд, а только те статьи которые, как нам кажется совпадают с тем, что мы активно ищем.

    Исследование «An eye-tracking» проведенное Якобом Нильсеном показало как двигаются глаза человека при просмотре интернет-страниц разделённых на блоки, результат показал, на что в первую очередь обращается внимание. Мы проводим глазами слева направо, а затем продолжаем смотреть страницу в F – образной модели, пропуская много текста.


 
    Исходя из данной модели, мы можем уяснить следующие вещи: 

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

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


 
Советы:

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

    3. Где разместить самую главную информацию.

    Исходя из результатов юзабилити-исследования Якоба Нильсена описанных выше, а так же других доказательств подтверждающих что люди, как правило уделяют основное внимание верхней части страницы (целых 47%, по данным исследований, упомянутых выше), для того чтобы сохранить их внимание до конца страницы, можно выстроить логическую лестницу.

    Как это сделать?

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

    Любая страница видимая человеком, подсознательно разбивается на 3 логических блока, сама структура напоминает перевёрнутую пирамиду. Поэтому важную информацию стоит писать вверху.


 
    4. Используйте маркированные списки и форматирование текста.

    В соответствии с исследованием «eye-tracking» по ClickTale, пользователям менее всего нравится сплошной текст, а воспринимаются лучше нумерованные списки, и форматирование текста (например, выделение жирным или курсивом).

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

    Советы:

  • используйте маркированные списки;
  • выделяйте важную информацию жирным или курсивом.

    5. Расстояние между элементами.

    Расстояние между словами, строками и абзацами важно. Это существенно влияет на читабельность и увеличивает скорость чтения.

    В исследовании под названием "Reading Online Text: A Comparison of Four White Space Layouts" было обнаружено, что отступы значительно влияют на восприятие текста.


 
    Советы:

  • оцените типографику вашей веб страницы, разбейте если нужно на отдельные блоки, и с помощью CSS, увеличьте размеры отступов;
  • свойства CSS, которые влияют на расстояние в тексте: margin, padding, line-height, word-spacing, letter-spacing и text-indent.

    6. Используйте состояния для ваших ссылок.

    Одно из преимуществ веб-страницы, это использование гиперссылок. Правильное их использование может облегчить чтение.

    Советы:

  • посещенные ссылки выделяйся отличным от первоначального цвета так, чтобы читатель сразу видел, какие ссылки он уже посетил;
  • используйте атрибут title, чтобы дать гиперссылке текст-описание, пусть пользователи знают, чего ожидать, когда они перейдут по ней.

    Дополнительные советы, читайте здесь >Visualizing Links: 7 Design Guidelines

    7. Используйте графические элементы.

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

    Eye-tracking исследование, проведенное Якобом Нильсеном показывает, что пользователи уделяют пристальное внимание фотографиям или другим изображениям, содержащим соответствующую информацию.

    Однако пользователи могут игнорировать некоторые изображения, особенно фотографии, которые включены толь ради декорации. Другие eye-tracking исследования указывают, что страница запоминается лучше на 34%, если не содержит лишней графики.

Советы:

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях. 


Дата публикации: 31.01.2013
Опубликовал: Сергей Кашурин
Просмотров: 455
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: