С клавиатуры на мышку и обратно


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

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

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

— Взял мышку, поставил курсор в первое поле
— Переключился на клавиатуру, ввёл нужный текст
— Переключился на мышку, поставил курсор во второе поле

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

Продвинутые пользователи для того, чтобы переключаться между полями, используют кнопку табуляции. Порядок, в котором фокус будет переходить с поля на поле, раньше задавался параметром z-index. А сейчас я уже стараюсь не лезть в техническую сторону вопроса 🙂 То есть в зависимости от реализации, курсор будет скакать с первого поля на второе, со второго на третье, с треьего на кнопку отправки, а с кнопки отправки обратно на первое. Но тут всё в руках программистов. Нередко я встречал формы, где табуляция уводила каретку в совершенно непредсказуемое место.

Чтобы переместиться с первого поля на третье, пользователю быстрее два раза нажать на «tab», чем переключаться на мышку и обратно.

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

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

Здесь к месту будет упомянуть и такие решения, которые автоматически уводят курсор в следующее поле, когда предыдущее заполнено и верифицировано (например, ввели номер карты — и автоматом перескочили в поле с именем держателя). Это не связано напрямую с темой поста, но почему бы и нет? 🙂 Такие нюансы тоже редко прописывают в дизайн-макетах и их либо не реализуют, либо инициативу берут в свои руки разработчики.

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

Поэтому я постоянно стремлюсь делиться чем-то авторским и продвинутым. А народ, как я замечаю, плюсует довольно базовые штуки. Или мне это только кажется?


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *