Ссылки против чайников
Опубликовано 12.11.2007 - В рубриках: Юзабилити
Сегодня расскажу про элементы интра- и экстранавигации, или же человеческим языком — про все то, на чем ми кликаем (:
Ссылки, во всех своих формах и проявлениях, являются элементами управления. Без них любая страничка в интернете смотрелась бы как обыкновенный отсканированный документ.
Большинство сайтов, за исключением «одностраничников», подразумевает за собой наличие основного навигационного меню. Если сайт достаточно большой, то переход по этим ссылкам проводит нас в разные разделы, ну а на более мелких ресурсах — просто позволяет прогуляться между страничками.
К вспомогательным меню относят «подменю» (меню более глубокого уровня вложенности, нежели основное), всевозможные сгруппированные списки (такие как «Последние новости» или «Облако тегов»), а так же своеобразное «содержание» — ссылки с конечными целями на текущей странице, которые ведут на определенную ее часть (смотреть наглядный пример).
Как ни странно, но основное меню не является основным элементов правильно созданных сайтов. Все дело в том, что такие ссылки могут позволить организовать только линейную навигацию по всему ресурсу, а этого не всегда достаточно для полного представления информации.
Давайте начнем с простого — на какие вопросы должны отвечать ссылки?
Если в кратце:
- Где Я сейчас?
- Куда Я могу пойти?
- Где Я уже был?
Мораль:
Ссылки на страницы, на которых посетитель уже был; на той, на которой он сейчас; и на те страницы, на которых он не был, но еще может зайти — должны внешне отличаться друг от друга.
А если подробнее — то читайте замечательную статью на оригинальном английском на сайте web design from scratch! Хотя есть и качественный перевод на русский…
Посмотрите на предыдущий абзац — слишком много ссылок в потоке текста работают не так эффективно, в отличие от одной единственной ссылки в тексте.
Ссылки придают акцент некоторым частям информации, которую мы передаем, по этой причине акцентировать внимание, например, на «читать далее…» — это кощунство (ну не могу подобрать другого слова).
Я б лучше придал эмоциональный акцент словосочетанию «купить сейчас» (:
Важно: ссылки должны быть подчеркнуты, а все, что подчеркнуто — должно быть ссылкой.
Простое правило, которое не всем нравится. Не знаю точно почему, скорее всего это банальная потребность человека выделится среди толпы человечества, но довольно большая часть веб-страниц носит на себе не подчеркнутые ссылки, а ведь как без их выделения можно догадаться, что первых 2 слова этого абзаца на самом деле ссылки, а этот синий — просто синий текст, и на десерт всего лишь подчеркнутое словосочетание?
Исключения из правила могут составить, пожалуй, только те группы ссылок, подчеркивание которых вызовет визуальный шум.
Визуальный шум.
Или же в более редких случаях — заголовки страниц. Но если они являются ссылками, то при наведении на них курсора — подчеркивание обязательно.
Еще несколько слов о символах в ссылках — это просто ужас. Тут простой совет — просто не делайте так!
Так нельзя делать!
Всякие нажималочки и кнопочки — должны быть с надписями, и желательно с глаголами. Т.е. кнопка поиска на странице должна быть с надписью «Найти», а не «Поиск по сайту».
C графикой все сложнее, конечно можно подчеркивать картинки, или что-то подчеркнуть в них (это уже лучше), но в большинстве случаев правильным вариантом бедет добавление текстовых подписей к изображениям, и они уже в паре с графикой будут выступать в роли ссылок.
И под занавес несколько слов о SEO. Текст, который сделали ссылкой, робот поисковой системы проиндексирует как ключевой по отношению к странице, на которую он ссылается.
На человеческом языке это означает, что если вы поставите ссылку «купить розового слона» на некий сайт, то при запросе в поисковой системе «где купить розового слона?» наш некий сайт (на который мы ссылались) с большей долей вероятности появится на первой странице результатов поиска (по крайней мере, его релевантность по отношению к другим сайтам — повыситься однозначно).
Таким образом недавно по запросу «стране капец» в первой строке гугла выводился сайт политической партии БЮТ, хотя на самом сайте БЮТа таких слов не встречалось.
К чему это я? А к тому, что дважды подумайте, что именно сделать ссылкой, что бы получить от этого как можно больше прибыли.
P.S. Оказывается я умею вдохновлять на умные мысли, шесть нулей рассказывают о простоте всего гениального, а Дмитрий Донченко расскрывает секреты увеличения RSS подписчиков. Ну как не вспомнить о Давыдовском полуговнопосте.
Акция! Бесплатно RSS-фиды только до конца месяца!
11 пунктов, которые спасут текст на вашем сайте.
Опубликовано 09.11.2007 - В рубриках: Контент
Рассмотрим основные приемы и правила, которые неопытные «сайтоводы» по какой то причине игнорируют.
Тем не менее, этот набор инструкций поможет сделать чтение текстов на вашем сайте более приятным времяпрепровождением для ваших посетителей.
- Разбивайте весь текст на абзацы, чтобы один абзац можно было прочитать за один вдох. Этот прием не применяется в печатной литературе, и впервые был замечен в интернет-блоговодстве.
- Используйте один размер шрифта, достаточно крупный для удобного чтения и с увеличенным межстрочным интервалом. Очень редко в текстах есть реальная необходимость написать что-то другим размером шрифта. Исключением могут быть сноски и аннотации.
- Выберете один тип шрифта для основного текста. В типографии для потока текста используют шрифты с засечками (Times, Georgia), а вот в вебе все наоборот — для текста применяют шрифты без засечек (Arial, Verdana, Tahoma).
Кончено не все следуют этим правилам, но как показывает моя практика — с экрана монитора удобнее читать как раз шрифты sans-serif (без засечек) - Не разукрашивайте тексты в разные цвета. Изначально определившись с цветовой гаммой для сайта — следуйте ей во всем. Не пишите белым по темно серому, и голубым по синему, текст должен быть темнее фона, и достаточно контрастным и не ярким для легкого чтения.
Я понимаю, что так хочется выделить какой-то очень важный абзац (про роды вашей хомячихи?) но существует много других приемов, кроме заливки текста кислотно-красным цветом. Например, основные моменты можно выделять фоном немного другого цвета. - Выделяйте ключевые словосочетания курсивом, а те, на которых остро необходим акцент — жирным. С этим приемом также необходимо быть крайне осторожным, так как переборщить можно очень легко, и тогда все выделения утратят свой смысл.
- Подружитесь с заголовками. Если текст достаточно большой по объему — есть смысл разбить его на части посредством подзаголовков. Чтобы при необходимости человек мог дочитать до него, сделать перекур, и вернуться к увлекательному чтению.
- Иллюстрируйте свои статьи, ведь графическая информация воспринимается намного быстрее чем текстовая.
- Используйте пустое пространство. Ничего хорошего не будет, если между абзацами будет недостаточное расстояние. Также настоятельно рекомендую прочитать «Теорию близости».
- Списки тоже ваши друзья. Некоторую структурированную информацию лучше всего давать списком, а если это набор инструкций, которые следует делать по порядку — то список должен быть обязательно нумерованным.
- Ссылки помогают экономить место. Если текст включает термины, и вы не уверены, что ваши читатели знают их значение — дайте ссылку на объяснение.
Есть очень хорошая электронная библиотека знаний — Wikipedia, там есть толкование на большинство научно-технических терминов, а если даже именно вашего там не найдется, вам не составит труда создать там собственную статью. - И последнее секретное правило, про которое большинство забывает — пишите интересно! Это правило основное, потому что если ваш текст будет не интересен читателю, то ни один из вышеперечисленных приемов не спасет вашу статью и не заставит прочитать ее до конца (или хотя бы до середины)
Опираясь на этот список, вы сможете сделать тексты на вашем сайте более дружественными по отношению к читателям, что есть очень хорошо (:
P.S. Для тех, кто совсем не разбирается в HTML коде Дмитрий Донченко написал замечательную статью для новичков, а дизайн для мастеров порадовал заметкой про правила юзабилити.
Хочешь опустить свой сайт в рейтингах на последнюю страницу — отдай подписку на RSS своим конкурентам!