Совет №4: Пальцы против мыши

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

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

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

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

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

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

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

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

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

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

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

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

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

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

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

Обзор

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

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

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

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

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

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

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

Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend

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

Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи как привлечь, удержать и направить внимание пользователя

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

Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн

Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!

Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!