Область реагирования

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

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

Однако если эта эфемерность реализована плохо — держите стулья, господа, ураган пришел.

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

Область реагирования — это область в интерфейсе, которая в ответ на какое-либо действие пользователя предлагает ему какой-либо результат.

Довольно размыто, не так ли?

Попробуем уточнить. Для улучшения понимания взгляните на иллюстрацию ниже.

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

Это правило выведено именно для того, чтобы интерфейс не мог напугать человека. Ведь если интерфейс никак не реагирует на рабочие действия пользователя — этот самый пользователь подумает, что интерфейс системы сломан. Или он решит, что допустил ошибку во время работы с сайтом. А ведь этот путь ведет к потере клиента, что, скажем, для интернет-магазина весьма критично.

Всё в интерфейсе должно реагировать только благодаря пользователю, но без него должно тихонечко молчать, и не выпендриваться. В общем — правило «сферического коня в вакууме» тут не работает. К сожалению.

С теорией, я надеюсь, немного прояснили. Поэтому теперь стоит пройтись по примерам областей реагирования, чтобы закрепить еще и практикой.

1. Логотип. Встречается данный тип областей реагирования наиболее часто, т.к. количество этих самых логотипов стремится приблизиться к количеству сайтов и интерфейсов. Чаще всего областью реагирования логотипа является прямоугольник, отрезанный и сверстанный точно по краям логотипа.Это не очень хорошо, т.к. при небольших логотипах приходится целиться. Поэтому рекомендую к этому прямоугольнику прибавить по 5-10 пикселей с каждой стороны, и тогда всё будет в самый раз. И логотип не большой (это здорово), и область реагирования не заставляет пользователей получать снайперскую профессию.
   
2. Меню. Не менее важный элемент, чем логотип. А для навигации и удобства путешествия по сайту так и более важный. Очень часто меню состоит из графики и текста, но реагирует только текст, что меня всегда ужасно раздражало. Если меню подчеркнуто графически, то и реагировать должен не только текст, но весь графически-текстовый блок. И тогда всё будет замечательно.Если же меню целиком текстовое — реагировать должен текст, но область реагирования стоит делать несколько больше, чем область текста ограниченная html.
   
3. Текстовые ссылки. В отношении ссылок нужно на время обуздать свое желание «всюду немного увеличить область реагирования». Текстовые ссылки на то и текстовые, что находятся внутри большого массива информации.И делать область реагирования, которая будет наложена уже не только на ссылку — плохой тон. Поэтому текстовая ссылка, которая написана непосредственно в тексте, должна иметь область реагирования, обозначенную сугубо начертанием текста и не более.
   
4. Вкладки. Также очень часто встречающаяся деталь интерфейса. В последнее время в вкладки стало модно прятать не самую полезную информацию с целью экономии места, и для того, чтобы пользователь не отвлекался от главного — контента.Лучше всего областью реагирования вкладок делать не маленький кусочек очерченный текстом, а весь размер вкладки по ширине и высоте. Тогда пользователь уж точно не промахнется, и будет вам благодарен.
   
5. Поля ввода текста. В этом случае мы опять должны ненадолго отдохнуть от «мании увеличивания областей», т.к. лучшей областью реагированию поля является оно само. При этом, я подчеркиваю, что делать поле в каком-то не стандартном виде с кучей эффектов, градиентов и т.п. мишуры — глупо.JavaScript тоже не всесилен, и уж точно не кросс-браузерен (да, есть специальные фреймворки, но результат того не стоит. Поверьте).
   
6. Чекбокс и радиобаттон. Тут стоит рассмотреть два случая употребления чекбоксов и отметкок. Первый: если они расположены «одни, совсем одни», то область реагирования стоит увеличить на 3-4 пикселя. Т.к. сами эти элементы довольно малы — увеличение области позволит избежать превращения пользователя в снайпера, особенно на больших разрешениях экрана.Второй: если они расположены рядом с текстом, который относится непосредственно к ним. Например часто встречается фраза: «вы соглашаетесь с правилами, и вашу душу заберет дьявол». В таком случае областью лучше всего делать сам чекбокс и текст рядом с ним. Не буду повторяться про снайперов.
   
7. Кнопка. И опять нас поджидают два кардинально разных случая. Первый: если вид кнопки отличается от внешнего вида кнопок из операционной системы (графическая кнопка), тогда область стоит увеличить на 3-4 пикселя.Если же кнопка имеет вполне себе стандартный вид, и реализована стандартным образом — тогда область реагирования увеличивать не стоит, потому, как тут вступает в действие сила привычки.
   
8. Форма выбора файла. Её частенько можно видеть на файловых хостингах, специализированных сервисах по хранению файлов, а также на любом форуме, в который нужно загрузить свою аватару и фотографию. Зачастую выбор файла происходит не только при нажатии на кнопку «Обзор», но и при нажатии на поле.Это не очень хорошо, т.к. ограничивает свободу действий пользователей. Разумеется, он обидится, т.к. это решение не даст ему возможности вручную отредактировать путь до файла. Я знаю, что это встречается не часто, но всё-же случается, поэтому лучше избежать негативных эмоций.
   

Теперь, когда мы определились с определением и закрепили это знание практическими примерами стоит рассмотреть также и предполагаемые реакции на некоторые из главных действий. Например: «при наведении», «при нажатии».

Реакции

1. Логотип. Этому элементу положено быть сугубо статическим в большинстве случаев. Это значит, что реагировать на наведение мышки он не должен, но начертание курсора (рука) обязательно должно появлятся. При нажатии в большинстве случаев стоит перенаправлять пользователя на главную страницу сайта.В обратных случаях дизайнеру стоит действовать по собственному усмотрению, т.к. если бы я расписывал все гипотетические ситуации — об этом можно было бы написать очень большую неинтересную книгу.
2. Меню. Чаще всего лучше делать не статичное меню. Обычно в нем находится до десяти пунктов, а это превышает наш внутримозговой «буфер обмена», который может разделить до 7 пунктов к ряду. Следовательно — при наведении пункт должен быть подсвечен.Если меню графическое — то подсвечиваться должна графика. Если текстовое — то текст, и, по желанию, простая подсветка фона. Как должно действовать меню при нажатии, я думаю, объяснять нет нужды.
3. Текстовые ссылки. Обязательно должны реагировать на наведение. Когда я вижу ссылку, которая не выдает никакой реакции мне сразу же приходит на ум аналогия с молчаливым флиртом: не понятно, что происходит и работает ли.Если ссылка подчеркнута (а она должна быть подчеркнута, если находится в тексте), то стоит менять сам цвет ссылки, не убирая подчеркивания. Однако само подчеркивание при наведении не критично, и зависит от дизайна и решения дизайнера.
4. Вкладки. Ситуация та же, что и с меню. Если количество вкладок привышает 7, то стоит задавать какую-либо реакцию при наведении. Чаще всего используется графическая «подсветка» пункта.Теперь, внимание: при нажатии содержимое вкладки стоит подгружать мгновенно (или, на худой конец, аяксом его, аяксом!), а не с перезагрузкой страницы, как это любят делать некоторые разработчики. Делается это для того, чтобы не обманывать ожидания пользователя, который привык к мгновенной загрузке вкладок в операционной системе.
5. Поля. При наведении лучше всего совсем немного увеличивать насыщенность цвета «окантовки» поля. При нажатии же нужно просто и без проблем давать пользователю ввести текст, и не мучать его эффектами, как это иногда любят делать некоторые дизайнеры.
6. Чекбокс и радиобаттон. Реакции при наведении уже должны быть заложены в операционную систему, которая эти элементы и прорисовывает, поэтому с этим проще. С реакцией при нажатии тоже нетрудно — оба этих элемента должны стать «отмеченными».
7. Кнопка. Никаких кардинальных сюрпризов. Если кнопка сделана графически, при наведении желательно менять её цвет, или подсвечивать любым другим образом.Если же кнопка сделана через стандартные html-средства, то и делать ничего не нужно — ваша ОС сделает всё за вас. Действия «При нажатии» описать весьма трудно, т.к. кнопки употребляются в кардинально разных случаях.
8. Форма выбора файла. Тут тоже всё довольно просто. Т.к. мы выяснили, что реагировать должна именно кнопка — она чаще всего сделана через стандартную форму выбора в html.Соответственно действия при наведении заложены в вашей операционной системе. А вот при нажатии обязательно должно открываться диалоговое окно выбора файла и ничего более.

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

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

Тем временем

1. Миша Квакин освещает три диалога о рекламе в блогах.

2. Сергей Чаботько пишет о машине для СЕО оптимизации.

3. Юра Гугнин просит распространять полезную статью о финансовом кризисе. Господа, всё хорошо, успокойтесь.

4. Егор Чернев рассказывает об иллюстрациях к статьям.

• Похожие заметки:

  • Регистрация 2.0
  • Функциональность кнопок
  • Подсказки к полям
  • Идеальное комментирование наносит ответный удар