Icons & URLs

[henry_flower]

Маленький урок UI: как делать не нужно.

Что не так на картинке?

Визуально тут определить проблему (которая есть) невозможно. Perception говорит, что это 2 ссылки. Допустим, нас интересует 2-я (с надписью RSS).

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

А дальше происходит следующее. Пользователь тыкает мышкой в иконку, ожидая загрузки xml-файла, но ничего не происходит. Тогда он подводит курсор к тексту "RSS" и убеждается, глядя на изменившийся курсор, что для получения своего xml-файла, ему надо было нажать на текст, а не на иконку.

Кого ебет ота фрустрация длиной 1/3 секунды и чего я приебался?

Теперь представим, что ваш пользователь не tech-savvy, а полуебок обычный гражданин, и шукает он на странице не feed, а ссылочку на itunes. Гражданин (4/6, что это девачька) щелкает на иконке itunes, но ничего не происходит. Следует еще один щелчок, потом еще, а затем поднимается голова и на вас смотрят жалобным кроличьим взглядом. Такая пичалька.

Так что поцаны, не ленитесь, и не пишите:

<ul id="subscribe">
      <li id="itunes">
        <a href="http://itunes.apple.com/us/podcast/blah-blah">iTunes</a>
      </li>
      <li id="rss">
        <a href="http://example.com/rss">RSS</a>
      </li>
</ul>

Чтобы потом в CSS к li долепливать иконку.