book-open 1 test
Блиц-курс «17 cекретов UX/UI-дизайнера»

Особенности проектирования тачевых интерфейсов | Секрет 4

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

Предыдущий совет

(Вы читаете перевод профессиональных советов по UX американского автора Джоэла Марша. Если вы тут впервые, то лучше начните сначала)

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

Ты не ослышался, толстячок!

Мышь — это устройство в нашей руке, которое двигает маленькую стрелочку на экране. Тут нужна координация движений и зрения. При помощи курсора можно попасть даже определенный пиксель, но куда приятнее нажимать в зону площадью 8–10 пикселей. Можно кликать, кликать и перетаскивать, тащить и бросать (конечно, речь о drag-and-drop), выбирать область или список пунктов и так далее!

Твой толстый палец прикреплен к твоему телу, и ты чувствуешь все прикосновения. Управление твоим толстым пальцем и рукой — это одна из базовых задач мозга. В зависимости от размера пальца, он может ткнуть в область от 30 до 50 пикселей. Толстый палец может тыкать, тыкать и тащить, тащить и бросать (и снова, drag-and-drop), и даже управлять, вырисовывая всякие загогулины на экране (они называются жестами). При помощи нескольких пальцев можно делать разные жесты: например, pinch или swipe, а также можно перетаскивать что-то, скролить и т.д.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Очевидно, что это разные вещи, и поэтому им нужны разные подходы при проектировании.

Реальные метафоры

Когда мы прикасаемся к тачскрину, между нами и кнопкой на экране нет никакой мышки. Мы в буквальном смысле нажимаем кнопку. А курсор мыши нажимает ее лишь в метафорическом смысле. Как говорит Кеану: “Правда в том, что никакой ложки нет”.

Клик мыши — это действие в два этапа: кликни мышкой = нажми на кнопку = действие. При помощи толстого пальца действие совершается в один этап: нажми на кнопку = действие.

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

Относительное/ реальное расположение

Если выключить экран и пошевелить мышкой, то где же курсор? Понятия не имею. Если выключить экран и пошевелить рукой, то где же палец? Понятное дело. Эта небольшая особенность имеет огромное значение в умственном плане. Если хотите понять, насколько неестественно управлять мышью, разверните ее задом наперед и попробуйте поработать.

Подсказка при наведении курсора

Компьютер всегда знает, где находится курсор. Когда он наведен на кнопку, она зачастую меняет цвет. Это такой цифровой эффект “осязания” кнопки, когда мы “притрагиваемся” к ней мышью (эффект, который ощущается при помощи зрения).

Однако компьютер понятия не имеет, где находится толстый палец, пока им не ткнут в экран. Таким образом, эффект прикосновения становится не нужен, ведь мы итак знаем, что прикасаемся… Мы делаем это своим же пальцем. Поэтому все, что можно нажать, должно быть выделено как-то по-особенному — ведь подсказок при наведении уже не будет.

Обзор

Когда ты тыкаешь в экран, место, в которое ты тыкаешь, закрыто толстым пальцем. Если ты что-то перетаскиваешь, тебе даже не видно что ты перетаскиваешь. Воспользовавшись мышкой, ты будешь прекрасно видеть все, что находится под ней. Попробуй напечатать что-нибудь на iPhone, и увидишь, что буква, которую ты нажимаешь, отображается над соответствующей кнопкой.

Порог действия

Достаточно просто кликнуть куда-то по ошибке. Еще проще задеть что-то по ошибке. Я частенько прикасаюсь лицом к клавиатуре, пока звоню по своему iPhone. Так что, в случает с тач-скрином, функции, вроде “удалить”, “сбросить” или “пожертвовать все на благотворительность”, обязательно должны требовать подтверждения (Вы уверены?).

Само устройство

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

На самом деле твои пальцы может и не толстые. Они красивые. Идеальные. И нормальные. Но любой палец гораздо больше курсора. По маленьким текстовым ссылкам классно переходить при помощи мыши, но для “нормальных” пальцев больше подходят большие и толстые кнопки.

Именно поэтому пальцы и мышь — это разные вещи.

Хорошей недели!

Завтра нас ждет новый UX-совет: Запуск — это эксперимент

А ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов.

Блиц-курс «17 cекретов UX/UI-дизайнера»