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