Пермская группа пользователей Linux

Сейчас мы поговорим про активные элементы сайтов: ссылки, псевдоссылки, кнопки, элементы форм.

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

Рассмотрим виды активных элементов:

1. Текстовые ссылки.

Простая текстовая ссылка по умолчанию имеет три состояния: простая, посещённая и при наведении. Все хорошо знакомы с этими видами ссылок.

Рассмотрим пример: http://www.yandex.ru/

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

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

Или другой пример: ссылка на личный кабинет пользователя покрашена в цвета логотипа, подчёркивая принадлежность пользователя к «большой семье Яндекса». Однако при наведении она имеет такой же цвет, как и остальные ссылки — красный.

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

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

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

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

1.1. Текстовые ссылки с иконками.

Иконки у ссылок можно разделить на два типа: одни указывают на расширенную функциональность, а другие — на содержание.

Рассмотрим сайт http://www.hitekgroup.ru/

Примеры функциональных ссылок здесь: «Заказать» с иконкой корзины и «Обратная связь» с окошками.

Ссылка «Заказать» явно даёт нам понять, что кликнув, мы: а) попадём на страницу корзины и б) положим товар в корзину. То есть мы не просто перейдём на другую страницу, а совершим дополнительное действие.

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

На этом же сайте есть пример ссылок с иконками, указывающими на содержание. Во-первых, в меню ссылки «Новогодние подарки» и «Сервисная служба». Во-вторых, в списке товаров. Иконка «NEW» явно указывает на свежесть содержимого. То есть пользователь, впервые зашедший или регулярно посещающий сайт, сразу обратит внимание на эти разделы и товары.

Следует отметить, что иконки могут быть и большими. Вот пример: http://www.gosloto.ru/5x36
Иконки 5х36 и 6х45 (если быть точным, то это не ссылки, а псевдоссылки).

Важно: иконка и текст ссылки должны действовать как единое целое, то есть при наведении курсора мыши на иконку текст должен подсвечиваться.

2. Псевдоссылки.

Псевдоссылка отличается от ссылки тем, что не перекидывает пользователя на другую страницу, а вместо этого совершает какое-то действие на текущей странице. Принято подчёркивать псевдоссылки пунктиром, прерывистой линией. Однако бывают и другие примеры. Например, на сайте http://www.youtube.com/ псевдоссылки «Избранное», «Отправить» и т.п., в отличие от обычных ссылок, не подчеркиваются. У них вместо этого «загораются» иконки.

Или вот пример сайта, на котором особенно активно используются псевдоссылки: http://www.volshebnik.ru/

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

Всё, что мы говорили про ссылки, относится и к псевдоссылкам: они тоже должны подсвечиваться при наведении. Смысл тот же: во-первых, показать, что это активные элементы, а во-вторых, подтолкнуть пользователя, помочь ему кликнуть.

3. Графические ссылки.

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

Еще яркий пример графических ссылок — каталог товаров с фотографиями в интернет-магазине: http://market.yandex.ru/

Часто об этом забывают, но графические ссылки тоже могут и должны реагировать на действия пользователя. Конечно, владельцы интернет-магазинов не будут делать по два варианта каждой фотографии своих товаров, чтобы картинки реагировали на курсор мыши, да это и не нужно. Достаточно подсвечивать текст, который сопровождает фотографию: http://store.apple.com/

А вот в случае со служебными ссылками, как, например, стрелки «влево» и «вправо» в фотогалерее, очень желательно предусмотреть вариант картинки при наведении.

Хороший пример: http://www.gosloto.ru/5x36

Здесь как раз стрелочки «влево» и «вправо» при наведении подсвечиваются.

Важно понимать, для чего это делается. Проведу аналогию с игровыми автоматами. Вы когда-нибудь видели игровые автоматы? Если даже не вживую, то в уж в кино видели наверняка. И наверняка помните, что эти автоматы всегда ярко мигают лампочками и издают громкие звуки. Кто играет — подтвердит, что именно эти мигания и звуки завлекают. Если бы автоматы молча стояли и не светились, то никто бы в них не играл.

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

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

4. Кнопки.

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

Сейчас в современных операционных системах и программах функциональные элементы стали подсвечиваться. Это постепенно приводит к тому, что браузеры начинают подсвечивать элементы форм на сайтах. Впервые, насколько мне известно, это было реализовано в браузере «Опера».

Хороший пример — калькулятор автокредита (смотреть в «Опере»): http://www.vtb24.ru/personal/loans/auto/autostandard/calculator/

Сейчас благодаря возможностям современных браузеров мы можем использовать самодельные элементы форм: http://lego.permlug.org/ (логин leo, пароль leo)

Как видите, все активные элементы здесь подсвечены при наведении. Кроме того, для кнопок предусмотрено состояние неактивности (disabled).

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

5. Текущее состояние.

Есть такой принцип: страница не должна содержать ссылок на саму себя. То есть если у вас в меню сайта есть ссылка «Правила», то на странице с правилами она должна превращаться в подсвеченный текст.

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

Хороший пример правильной подсветки меню на сайте: http://www.volshebnik.ru/about/mission/

Исключением являются ссылки вида «Постоянная ссылка» на новостных сайтах, расположенные на странице с новостью. Пример: http://www.vz.ru/

Подведём итог:
1. Все активные элементы должны реагировать на наведение курсора мыши.
2. Все активные элементы, имеющие несколько состояний, должны своим видом показывать, в каком состоянии они находятся.
3. Элементы, имеющую нестандартную функциональность, должны отличаться от остальных.