Как фокус помогает


    Менеджер и дизайнер заставляют везде убирать аутлайн. Расскажите им, что это плохая идея!

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


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


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


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


    Как происходит такое взаимодействие? Главная кнопка здесь — таб, он передвигается к следующему интерактивному элементу. Шифт-таб переносится к предыдущему — попробуйте сами. Как только вы попали на нужный элемент, дальше уже можно в ним взаимодействовать: энтер, пробел, стрелки или просто буквы с клавиатуры.


    В такой ситуации очень важно знать, какой элемент сейчас активный, чтобы было понятнее, с каким из них вы сейчас взаимодействуете. Когда у вас есть курсор мыши, стилус или просто палец — всегда понятно, куда вы нажимаете. Куда-куда, ну вот прямо сюда! Но когда вы взаимодействуете с клавиатуры — нужен фокус. Без него вы сейчас… нигде.


    Когда элемент в фокусе, у него появляется псевдокласс :focus. По умолчанию браузеры выделяют интерактивные элементы в фокусе с помощью специальных обводок. Они отличаются в разных браузерах и на разных системах: иногда это чёрный пунктир или рамка, иногда голубой контур, иногда что-то ещё. Слишком часто эти контуры пытаются отключить с помощью outline: none, забывая зачем они нужны или считая их неважными.


    Главный аргумент для отключения, мол, некрасиво и нет такого в дизайне. И я даже понимаю тех, кому некрасиво — и правда бывает мимо, хотя обычно в рамках знакомого системного стиля. Но ведь можно не только отключить, можно переназначить! Сделать другой outline, заменить его на border, box-shadow или даже фоновый цвет элемента. Главное, чтобы он недвусмысленно говорил: я сейчас в фокусе.


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


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


    Видеоверсия



    Вопросы можно задавать здесь.

    HTML Academy 181,04
    Интерактивные онлайн-курсы
    Поделиться публикацией

    Вакансии компании HTML Academy

    Комментарии 28
    • +3
      Если заказчик скажет убрать, то уберут.
      • +3

        а если заказчик хочет комик санс вместо шрифта на сайте, то надо так и делать?

        • 0
          А сколько он платит? Ведь можно тогда и не раскрывать авторства.
          • 0
            предупредить о последствиях и, если не изменит мнение, делать
            • 0
              Да, нужно использовать комикс санс. И это нормальный вариант, хуже если заказчик сам не знает чего хочет.
          • 0
            «Как фокус помогает», докладчик Томас Нау.
            • +2

              На этой же самой странице нажимаю Tab, фокус не виден. :)

              • 0
                У меня работает, что я делаю не так?
                • 0
                  У меня тоже фокус виден, но фокус бегает по очень ограниченному перечню элементов (голосовалки / подписка и кнопки в окне редактора).
                  • +1

                    Он отображается не на всех элементах, поэтому я его и не увидел. Тоже ничего хорошего, в общем.

                • +4

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

                  • 0
                    Например, переходя табом с последнего поля формы пользователь может улететь на ссылку в футере вместо переключения обратно к первому полю
                    Представим, что после последнего полня (а лучше submit) пользователь переходит к первому. Но внезапно пользователь решил перейти по какому-либо элементу меню. Что делать?
                    Правда, это не отменяет того, что переключение часто бывает неожиданное — не в том порядке, как ожидаешь.
                  • 0
                    Раздражает такое, не меньше, чем запрет правой кнопки или выделения текста цветом.
                    А из последних модных веяний — как вам скрытие атрибутов поля ввода? Ну то есть чистый белый лист, пока не тыкнешь мышой наугад в конкретную точку, даже курсор не появится, это норм? %)
                    • 0
                      Мало заказчиков и дизайнеров думают о том, как их сайтом потом будут пользоваться. В результате посетители, чаще всего, пользуются функцией закрытия страницы сайта.
                      • 0
                        Мало заказчиков и дизайнеров думают о том, как их сайтом потом будут пользоваться.

                        Я, вот, не заказчик, но и не дизайнер. Может быть, поэтому думаю, как моим сайтом (ну, как моим, сайтом вуза) будут пользоваться. Мне из почему-то всегда жалко, посетителей, особенно абитуру. Абитура и так в стрессе, а тут им сплошь и рядом головоломки предлагаются.
                        офф
                        Вообще, конечно, много еще надо бы сделать — был бы я дизайнером или программистом; а так я — ни то, ни се, в смысле один за всех. Вуз небольшой, провинциальный, хлопот много, денег… а, да ладно, что толку.
                        Но, черт возьми, приятно было услышать от приемной комиссии оценку абитуриентов. «У вас так удобно, зашел — и сразу все понятно. Даже в Питере такого нет.» Уж не знаю, почему Питер, а не Москва, но так мне передали.
                        Стало быть, не зря клаву топтал.
                        • 0
                          Вот такие отзывы от реальных людей — самое приятное, что только можно получить в результате погроминга (да и вообще труда на благо людей). :)
                      • 0
                        А из последних модных веяний — как вам скрытие атрибутов поля ввода? Ну то есть чистый белый лист, пока не тыкнешь мышой наугад в конкретную точку, даже курсор не появится, это норм? %)
                        В яндекс-почте так сделано поле в форме экспресс-ответа. Омерзительно.
                        • 0
                          А теперь и на Ютубе! Причем в практически таком же месте. А раньше там было нормальное многострочное поле, которое можно было мышой раздвинуть… %)
                          Может где-то выпустили какие-то упоротые «гайдлайны» для модных дизигнеров и все кинулись повторять?
                      • 0

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

                        • 0
                          Да на десктопах такая же фигня творится обычно… :)
                          • 0

                            А я думал "я нажал на Tab = я готов вводить следующий текст", "Я нажал на Enter = принимайте набранный мной текст". Мне было бы слегка неинтуитивно после пароля жать Tab — мне не сразу очевидно, что я этим приказал и как комп обязан реагировать.

                          • 0
                            Windows 10 на планшете — при каждом включении на экране пароля есть только поле его ввода. И на него надо тапать, чтобы перевести фокус и начать вводить -_-
                            А вообще, ввод чего-то без фокуса на поле частенько бывает, и выходит, что набранное пропало. Другие ОС тоже такие недружественные?
                            • 0
                              Если б на него не надо было тапать, то любой кот уже б давно заблокировал хозяину его планшет. Вообще это хорошо что нужно ещё какое-то действие перед опасной операции. А то окошки с критической информацией, требующие твоего ответа, почему-то появляются сразу с активными кнопками, а ты, тыкающий во всё подряд по экрану, даже заметить его не успел, как уже продал свою почку.
                            • 0
                              Научились отключать outline и как давай везде отключать… Постоянно сталкиваюсь с этим. Чаще вижу кастомные checkbox и select, которые вообще никак не взаимодействуют с клавиатурой. Печаль.
                              • 0
                                Суть в чем. outline убирать конечно надо. Стандартные браузерные свойства никогда не соответствуют дизайну.
                                Но и сообщать о фокусе тоже, конечно нужно.
                                • 0
                                  Не надо смешивать в одну кучу внешнее представление (аутлайн), события/состояния (фокус) и атрибуты разметки (табиндексы). Не выдавайте мягкое за тёплое.

                                  Когда вы скрываете обводку через «outline: none», это никак не влияет на само событие фокуса и не ломает навигацию. Пользователь по-прежнему может переключаться между элементами табом, запускать ссылки энтером и т.п. Просто ему становится сложнее понять, где находится фокус в данный момент. Но это решается любым альтернативным оформлением элементов с :focus, о чем вы сами же и упоминаете.

                                  Если обводка не ложится в дизайн, без нее можно прекрасно обойтись. Индикатором состояния служит что угодно, причем не только статичные свойства. При желании вы можете заставить элемент под фокусом делать петлю Нестерова, крякать уточкой или пахнуть ландышем :) Весь вопрос в том, готовы ли вы возиться и обеспечивать техническую реализацию с учетом спектра поддерживаемых средств просмотра. И готов ли заказчик оплатить свои капризы.
                                  • 0
                                    Дизайнеры от простого уродования интерфейсов уже перешли к активному вредительству.
                                    • 0
                                      Обычно гуманитарии дизайнер и РМ очень плотно сотрудничают; и если они приходят хором и требуют убрать фокус, то я тихонько его убираю ибо себе дороже.

                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                      Самое читаемое