WebDesign.Doc - электронная библиотека веб-мастера: Выпуск 227
WEbDESiGN.doc // №227
Приветствую, дорогие друзья и коллеги!
читайте в этом выпуске:
Мастерская
10 советов по юзабилити для веб-дизайнеров
Смотри и учись!
Лучшие видеокурсы по веб-дизайну
→ рекомендую:"Технические секреты продуктивной работы в онлайн бизнесе" Многие люди сегодня жалуются, что работа забирает всё их время, силы, энергию и поэтому их не хватает на семью, спорт, здоровье, хобби... Но мало кто задумывается над тем, что можно работать эффективнее и выполнять, то же количество дел за меньшее время... Подробнее...
Мастерская
10 советов по юзабилити для веб-дизайнеров
Обычное заблуждение о юзабилити среди веб-компаний в том, что юзабилити обходится дорого. Да, есть транснациональные компании, тратящие тысячи долларов на исследования и тестирование юзабилити, но для обычной компании юзабилити достижимо без знаний экспертов по юзабилити и без дорогостоящего оборудования для тестирования.
Веб-дизайнерам гораздо легче – просто читая статьи о юзабилити, они могут накопить довольно хорошие знания об основах юзабилити и о том, как применить их на веб-сайте.
1. Пишите теглайны
Теглайн – это утверждение или девиз, который представляет философию и миссию компании, или, в нашем случае, сайта. Он должен быть самым ясным элементом на главной странице веб-сайта и должен чётко описывать сайт одной фразой.
Как показывает статистика, посетителю требуется всего 8 секунд, чтобы сайт привлек его внимание и он продолжил просмотр. Без чёткого заголовка веб-сайт вряд ли задержит внимание настолько, чтобы посетитель дошёл до внутренних страниц.
2. Обеспечьте поиск по сайту
Так же как и заголовки, поиск по сайту – очень важный элемент. Когда пользователи что-нибудь ищут, они обычно стараются найти текстовое поле, в которое они могут ввести ключевые слова.
Согласно советам Якоба Нильсена о юзабилити в веб, сделайте поле поиска шириной 27 символов, чтобы хорошо был виден текст и поле было легко использовать. Разместите поле поиска вверху страницы, потому что пользователи обычно просматривают веб-сайт Г-образно, то есть от верхнего левого угла к правому нижнему.
Добавьте кнопку поиска и ясно обозначьте поиск текстом, не используйте такой текст, как «GO» или «Отправить», потому что эти выражения могут ввести посетителей вашего сайта в заблуждение.
3. Не используйте излишнее количество графики
Злоупотребление элементами дизайна и графикой всегда вредит веб-сайту, это просто сбивает с толку посетителей. Используйте дизайн, только чтобы улучшить веб-страницу, а не украсить её. С точки зрения юзабилити, чем проще, тем лучше.
4. Используйте Карту сайта
Карты сайта – сравнительно новые возможности сайтов, улучшающие навигацию по страницам и помогающие поисковой оптимизации (SEO). В сущности, карта сайта – это отображение структуры страниц и архитектуры веб-сайта. Это может быть документ в любой форме или страница, на которой перечислены все страницы сайта, обычно в иерархическо порядке.
Не так давно поисковые системы, такие как Google, Yahoo и MSN начали предлагать протокол Sitemap, который похож на страницу карты сайта, но данные представлены в формате XML. Существуют генераторы Sitemap XML, создающие такие документы для конкретного URL.
5. Не нарушайте последовательность действий
Говоря о последовательности действий, мы имеем в виду любые действия, которые пользователь производит на сайте. Например, заполнение формы, регистрация, навигация по категориям, архивам и т.п. Не нарушайте их последовательности, дайте пользователю возможность отмены любого действия. Непозволяя пользователю отменить действие, мы заставляем пользователя завершить его, даже если он этого не хочет.
Не каждое действие на сайте очевидно для пользователей, укажите им конкретную последовательность действий, показывая им понятные подсказки (например, при заполнении форм). Ссылки с использованием Java Script обычно нарушают процесс, поэтому не рекомендуется использовать их на своём сайте.
Также ошибкой будет отключение изменения цвета посещённых ссылок, это приводит к нарушению структуры навигации. Пусть пользователи знают, где они были и где они сейчас на сайте.
6. Создавайте легкопросматриваемые страницы
Легкочитаемость веб-страницы играет важную роль в поддержании посещаемости, удерживая пользователей на вашем сайте для чтения вашего контента. Тесты юзабилити показывают, что большинство пользователей не читают веб-страницы, они просматривают их в поисках заголовков, выделенного, подчеркнутого текста или списков.
Исследования слежения за взглядом, проведенные Якобом Нильсеном демонстрируют, что пользователи читают содержимое F-образно, то есть чтение начинается с левого верхнего края страницы, после немного переходит вниз и снова начинается слева.
Также Нильсен сформулировал следстствия из этого принципа чтения:
Пользователи не будут читать содержимое веб-страницы слово за словом, они выделят важные абзацы, текст жирным шрифтом и т. д.
На веб-странице существенны первые два абзаца. В них должна быть наиболее важная информация, которую могут искать ваши посетители.
Подзаголовки и списки выделяются по отношению к обычным абзацам. Используйте эти элементы для привлечения внимания пользователей к важной информации.
Один из важных методов, который можно позаимствовать у традиционных печатных изданий — журналисты придумывают броские заголовки и привлекающие внимание первые абзацы, чтобы читатель прочёл всю статью. Они организуют содержимое в формате перевёрнутой пирамиды. Просто представьте себе перевёрнутую пирамиду: широкое основание означает самую важную информацию во всей статье, а верхушка означает наименее важную информацию.
Мы можем использовать этот же формат для организации вэб-контента, помещая самую важную часть информации выше, а менее важную часть ниже, но как узнать какая информация важна, а какая нет? С помощью оценки значимости новостей.
7. Не используйте элементы управления, вводящие в заблуждение
Под элементами управления пользовательского интерфейса (UI) мы подразумеваем элементы веб-страницы, компоненты и виджеты, с которыми пользователь может взаимодействовать (например кнопка, выпадающий список).
Не создавайте графический элемент, который выглядят, как кнопка, но таковой не является. Часто мы видим текст, который подчеркнут снизу и выглядит как ссылка, но по нему не получится сделать щелчок мышью.
При отсутствии реакции, которую ожидал пользователь, он подумает, что на сайте неполадки и в конечном итоге уйдет с него. Еще одино важное правило юзабилити, относящееся к элеметнтам управления – это последовательность (логичность). Убедитесь в том, что ваши элементы управления логичны.
Yahoo, как показано на картинке выше, тоже подает хороший пример логичного дизайна элеметнов управления UI. Каждая вкладка на странице выглядит и работает одинаково, при наведении указателя мыши каждая ссылка подчеркнута снизу, каждая кнопка имеет единый стиль, и т. д.
8. Обеспечьте понятную обратную связь
Понятная обратная связь или отклик важны для сайта. Это канал связи между сайтом и пользователями. С помощью обратной связи мы поясняем пользователям, что происходит на сайте. В случае ошибки на веб-странице нужно не просто написать «Произошла ошибка», а написать понятное сообщение об ошибке, которое объяснит пользователю, что пошло не так и что ему теперь делать.
Обратная связь работает в обе стороны. Когда пользователи заполняют форму, они дают вам важную информацию. Не заставляйте пользователей дважды заполнять одни и ти же данные. Например, если пользователь зарегистрирован на сайте и ему в какой-то момент нужно заполнить форму, не спрашивайте его имя или информацию, которую он уже предоставил, потому что эти данные уже находятся в каком-то файле или в базе данных. Получая эти данные автоматически, мы упрощаем весь процесс.
9. Не злоупотребляйте Javascript’ом
С приходом технологий Javascript и AJAX веб-дизайнеры и разработчики получили возможность создавать интерактивные, прозрачные веб-сайты, но как и с любыми новыми технологиями, издержки. В нашем случае это несовместимость браузеров. Не у каждый пользователь имеет новейший браузер. Также у них может быть по умолчанию отключен Javascript.
Активно используя Javascript на сайте, мы блокируем таких пользователей. Вместо этого используйте Javascript ненавязчиво и умеренно сократите возможности системы без нарушения работоспособности.
10. Не используйте CAPTCHA
Тест CAPTCHA означает полностью автоматизированный публичный тест Тьюринга, проводимый, чтобы отличить компьютер от человека. Даже название кажется сложным. Обычно тест CAPTCHA сделан в виде текста, включённого в изображение для проверки посетителей и отделения пользователей-людей от спам-ботов.
Проблема CAPTCHA в том, что любые методы проверки “на человека” вызывают сложные процессы в мозгу пользователя (например, нужно понять искажённый текст, сложить два числа и т. д.).
Другая проблема CAPTCHA — различие культур. Например, китайские иероглифы и цифры отличаются от большинства западных букв и арабских цифр. У китайцев возникают гораздо больше трудностей при использовании онлайн-форм с CAPTCHA.
Выводы
Всегда используйте заголовки. Они должны быть самыми важными и очевидными элементами веб-страниц
Сделайте поле для поиска по сайту шириной 27 символов и поместите его наверху вашего сайта.
Не используйте долго загружающиеся элементы графики и дизайна
Создайте страницу карты сайта и зарегистрируете в поисковых системах карту сайта в формате XML
Не прерывайте последовательность действий пользователя. Позволяйте отменить любое действие, если это необходимо.
Создавайте легкопросматриваемый веб-контент и размещайте наиболее важную информацию в верхней части страницы.
Не делайте графические элементы похожими на кнопки, если они таковыми не являются.
Сделайте обратную связь с пользователями и не забывайте, что она работает в обоих направлениях.
Используйте ненавязчивый Javascript и сократите возможности сайта, сохранив при этом функциональность.
Не используйте тест CAPTCHA, используйте более удобные методы.
"Профессиональное создание Интернет-магазина под ключ"
Полный и качественный видеокурс по созданию интернет-магазина под ключ для любого уровня подготовленности.
68 уроков полностью раскроют все тонкости и нюансы профессионального создания интернет-магазинов.
"PHP+MySQL для начинающих"
Более 110 видеоуроков общей продолжительностью в 22 часа и 30 минут, которые позволят Вам создавать неповторимые динамические сайты с использованием языка PHP и баз данных MySQL!…
"Как создать прибыльный блог"
Пошаговое руководство для новичков в Интернет-бизнесе 2.1. Видеокурс, представляющий собой бизнес-систему, которая научит зарабатывать от $1000 в месяц в Интернете на блогах. На сегодняшний день бизнес-система Как создать прибыльный блог является самым полным, пошаговым и понятным инструментом для создания бизнеса в Интернете.
"Весь Арсенал Флешера на DVD"
Курс "Арсенал Флешера" предназначен для серьезных людей, кто действительно хочет: получить качественную информацию; создавать флеш-ролики с нуля, с наименьшими временными и финансовыми затратами и применить полученные знания на практике.
Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail:
webmastersoft@mail.ru
