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

Nancy Pong
Aug 29, 2014 · 5 min read

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

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

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


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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Все 557+ статей по дизайну читайте на сайте ux-journal.ru


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

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

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

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

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

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

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

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

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

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

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

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

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

Обзор

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

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

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

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

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


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

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

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

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

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

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

Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.


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

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

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

Скачать приложение в Appstore

Профессиональные секреты UX: UX ProTips

Изначально эти советы создавались автором для своих коллег, клиентов и менеджеров проектов. Затем он опубликовал их в своем блоге, а мы перевели на русский. Приятного чтения!

    Nancy Pong

    Written by

    Ольга Жолудова. Копирайтер и переводчик. Про копирайтинг: https://vk.com/copywriter.blog Про жизнь: https://www.instagram.com/nancypong4/

    Профессиональные секреты UX: UX ProTips

    Изначально эти советы создавались автором для своих коллег, клиентов и менеджеров проектов. Затем он опубликовал их в своем блоге, а мы перевели на русский. Приятного чтения!

    More From Medium

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade