область реагирования Как создать свой сайт > Вебмастеру > Создание своего сайта > Область реагирования в дизайне интерфейсов

Область реагирования в дизайне интерфейсов

За решётками окон 85-го отделения милиции города Санкт-Петербурга
появились первые признаки весны — набухшие почки, щебет птиц, кражи велосипедов.
«Кошмар на улице Стачек», Андрей Кивинов.


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


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

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

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

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

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

    Попробуем уточнить.

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

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

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

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

  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-верстальщиками.

Автор: Ярослав Бирзул.

Комментарии:

T-Rex
Пример с кнопкой «Комментировать» там где область реагирования больше кнопки меня повергла в ступор. Это ж надо еще придумать так чтобы сделать область реагирования больше стандартной кнопки. По-моему пример немного такой надуманный.

Роман Настенко
По поводу подчеркивания при наведении на ссылку. Очень мне не нравится, когда оно исчезает. Что это должно показывать пользователю? ИМХО, это лишняя, бессмысленная реакция, которая только мешает. Как будто ссылка перестает быть ссылкой.

Ярослав Бирзул
T-Rex, да нет. Иногда встречаются вполне себе любопытные примеры: под кнопкой плашка с пастельным цветом, и вся эта плашка является ссылкой.
Это немного бесит.

Ярослав Бирзул
Согласен, Ром, но, увы, у каждого дизайнера свой вкус. Нельзя же вот так взять и запретить «отмену подчеркивания при наведении». Это как-то глупо.

BDSoft
На счёт выбора файла, трудно будет реализовать чтобы было «Хорошо».
Редактировать поле выбора файла запрещено из соображений о безопасности разработчиками браузеров.

Ярослав Бирзул
BDSoft, но область реагирования с поля ввода вполне себе можно убрать.
А если внутри него еще и редактировать ничего нельзя — то это поле вообще в такой форме не нужно.
Достаточно кнопки «Выбор файла».

AlexNote
Чекбоксы, где слой ограничивается самой галочкой, выводят неимоверно. В некоторых сервисах нужно нажать 3-5 чебоксов, при этом они в крайне левом положении, а кнопка подтверждения выбора в крайне правом. Кажется, что тест гаишнику на координацию сдаешь.

Ярослав Бирзул
AlexNote, согласен. Неоднократно обращал на это внимание, даже немного злился :)

monIToringe
Чего ж вы не написали про label для галочек и чекбоксов? Или вы принципиально не описываете техническую реализацию, а лишь поведение?

Миша Абасов
Плохим примером в плане кнопок может выступать «ВКонтакте». Клик по синему фону вокруг его кнопок не дает никакого ммм... реагирирования, что сильно раздражает.

Curly Brace
Ярослав, на сколько я знаю, поле выбора файла — наиболее зависимый от ОС элемент веб-документа, который с трудом поддается корректированию.
А в целом очень хорошо, будем исправляться ;)

Сергей М.
Если уж говорить о лейблах в чекбоксах, то стоит тогда в «полях» заметить, что и блоки «Ваше имя», «e-mail» и прочие поясняющие надписи при полях ввода — также являются областью реагирования. Но статья — отличная.

monIToringe
«поле выбора файла — наиболее зависимый от ОС элемент веб-документа, который с трудом поддается корректированию»
Как показывает практика как только это поле не корректируют. Посмотрите на Народ.Диск, на Файлы@mail.ru, *** и другие файлохранилища.

Curly Brace
monIToringe, да мне и смотреть не надо, я это знаю. Способы есть, но все они от лукавого.

Ярослав Бирзул
> monIToringe
Я, собственно, никогда о технической реализации и не писал — у меня совсем другая специальность.
> Curly Brace
Но сделать его удобнее, даже способами от «лукавого» уж точно неплохо.
> Сергей М.
А зачем? :)

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

Ярослав Бирзул
Да, Сергей, считаю, что делать областью реагирования еще и текст рядом с поля — неправильно. В случае с чекбоксами это понятно, и логично, т. к. сам элемент довольно маленький.
Но поля обычно намного больше чекса.

darchik
Спасибо, очень познавательно для меня. Сам иногда проектирую интерфейсы для сайтов.
А как технически реализовывается эта область реагирования при верстке!?

Ярослав Бирзул
darchik, чаще всего так:
1. Если это текст — через таблицы стилей.
2. Если это текст+изображение — отдельные слои (дивы).
3. Если это просто картинка — то достаточно её правильно порезать при верстке.

pilot34
Насчет файла не согласен. Всегда нажимаю не на кнопку, а на поле файла. Интересно, что по вашему должно происходить при клике на поле?

Ярослав Бирзул
pilot34, для того, чтобы ответить на этот вопрос нужно ответить на вопрос — какую цель выполняют текстовые поля.
— Ввод текста.
— Редактирование введенного текста.
И если нам не дают сделать ни того, ни другого — значит цель не выполняется. Значит нужно убрать поле, или снять с него область реагирования, чтобы оно выполняло свою задачу.
Замечательные решения применили на ***: они запрятали стандартную форму выбора, и дали выбрать файл при клике на область выбора. Все довольны.

СМИ
Мне больше нравится когда подчеркивание делается не линией а точками доттед

Ярослав Бирзул
СМИ, точечное подчеркивание стоит использовать использовать исключительно в случае, если переход по ссылке не перезагрузит страницу, а подгрузит контент на той же странице.
В других случаях это моветон.

Dzhuff
Понравился пример с picamatic. А что касается строки ввода пути, то мне удобнее по ней клацнуть и выбрать файл, было бы идеально, если существовала бы возможность редактирования пути после выбора файла. Многое описанное в статье делаю как-то на подсознательном уровне, все логично, спасибо).

delaf
у ценза в логотипе, область реагирования проверьте!

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

Артем Андреевич
Был кстати где-то инструмент, вроде даже гугловский, который анализирует куда кликают по твоей странице больше и выводит это в виде картинки с разными цветами.

Денис
Полезно, но с 8ым пунктом не согласен. Когда полей для загрузки файлов много — утомительно кликать на «Обзор...»

Ярослав Бирзул
В таких случаях панацея — возможность множественного выбора файлов.
А кликать на поля для загрузки придется в любом случае.

Алексей
Имхо, правильно это. Юзабилити блога или сайта должно быть опрятным и продуманным, если конечно думаешь о своих читателях или посетителях ресурса.
P.S. В посте запомнилось подчеркивание ссылки. Спасибо!

Артём Сапегин
Мне очень нравится, как сделаны поля выбора файлов на маке — там вообще нет поля. Путь отображается справа от кнопки обычным текстом.

Антон
А для чего увеличивать область реагирования, если, скажем из примера, кнопка «комментировать» и так большая, от случайных промахов? Но область и так чуть чуть выходит за края кнопки

elfxf
Как-то банально все, кроме меток над «инпутами». Думается мне, метки для того и придумали, чтобы ими пользоваться, а не чтобы кто-то говорил: я запрещаю вам так делать! =)

mcmimik
Полезная статья, спасибо :)

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

Konstantin
Если честно, то выделять надпись и ставить фон в одной расцветке (синий-голубой и т.д.) это не очень умно. Меня такие приколы почему-то нервируют...

Ярослав Бирзул
Konstantin, вообще-то это показывает размер области реагирования, а не дизайн.

Антон
То есть считаешь, что если поле ввода находится под меткой, то метка не должна быть label’ом?

Мекс
Хм я пользуюсь Nice-FOrms , там по стандарту все задано «как надо». А вообзе хотел поинтнресоваться что за скрипт позволяющий определить «горячие зоны» на сайте? Т.е. где пользователь водит мышкой по сайту, куда кликает? Есть большой портал и нужно проверить поведение пользователя...CTR по баннеру -вотрине у конкурентов 0.5-1.5%, у меня только 0.2%...расстраивает (

B@rmaley.e>
Насчет 8-го пункта: это стандарты браузеров (как ни странно, но у всех они разные) и они плохо поддаются корректировке. В этом плане имхо лучше всех сделано в ВебКите: отображается только кнопка выбора файла, его имя и иконка. И ничего лишнего. Путь к файлу вручную прописывают очень (!) редко.
Множественный выбор файлов вообще прерогатива флеша.
Про стилизацию файл-инпутов можно почитать тут: https://habr.com/post/30560/

Katyuha
Спасибо, очень познавательно для меня!

Слава
Ярослав, а почему больше не пишете в блог?

Ярослав Бирзул
Слава, я обязательно продолжу написание статей чуть позже, с выпуском второй полноценной версии дизайна.
Сразу после этого приступлю к переписыванию всех старых статей. По сути, от старых там мало чего останется, поэтому ждите. Как только разгребусь с личными вопросами и работой — сразу же вернусь.

Андрей
Ну слава богу! случайно сегодня с сайта вебмолота зашел, и не надеялся уже что будут какие-то подвижки. Значит можно возвращать в ридер? )

Ярослав Бирзул
Андрей, его и удалять-то не стоило, пустая подписка ведь не мешала :)
В любом случае никто забрасывать сайт не собирается, просто жизнь она такая, иногда располагает, а иногда совсем нет :)

Родос
А в рекламе можно применять эти методы???

Ярослав Бирзул
В рекламе всё просто — есть баннер, его область реагирования он сам и ничего более.

Ярослав Бирзул
С контекстной рекламой сложнее — ссылкой стоит делать всю ячейку таблицы, в которой находится объявление. Также можно просто делать ссылкой непосредственно весь текст.

Artemich
А! у меня почти все плохо! Паника! Пойду исправлять...

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

Talya
Мне нравится когда ссылка подчеркнута, ее сразу видно и без наведения курсора.

Evfrosin
все отлично)

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

Андрей
Очень класный сайт! В рунете лучший по теме юзабилити! спасиб

Nullmachine
Зря только время потерял на прочтение.

oleg
Интересная информация. Еще бы применительно к расположению рекламы(контекстной) на сайте привязать все это...


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

Заработать на футболе в Интернете Как открыть заблокированные сайты

Ещё материалы по этой теме:

Две системы устройства сайтов GetText Как бесплатно зарегистрировать домен в зоне org.ua? Как писать статьи для сайта «Экстремальный» подход в контексте UI/UX проектирования
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!