Девушка держит в руках планшет
Обновлено: 07.07.2024
Где руки и пальцы соприкасаются с устройством? Этот вопрос является основным для каждого форм-фактора. Ответив на него, мы сможем понять, как создать интерфейс, юзабилити которого будет удобным и эффективным. Так как смартфоны, планшеты и ноутбуки сильно отличаются друг от друга, то не удивительно, что для каждого из этих типов устройств существуют индивидуальные требования к интерфейсу.
Но эти устройства имеют много общего, особенно это касается важной функции больших пальцев. Этот факт помогает нам установить общие принципы для разных устройств. В этой статье описываются основные « правила большого пальца » исходя из того, как мы держим в руках устройства различных размеров.
Как мы держим смартфон
В 2013 году исследователь Стивен Хубер провел исследование юзабилити сайтов. Он изучал, как люди взаимодействуют со своими смартфонами. Ученый выяснил, что пользователи держат аппараты одним из трех способов. 49% держат смартфон одной рукой; 36% держат его одной рукой и нажимают на экран пальцем другой; остальные 15% держат двумя руками, нажимая на экран большими пальцами обеих рук. На рисунке показаны три различных способа удерживания смартфонов:
Часто мы меняем способ, в зависимости от того, как удобнее работать с различным контентом. Хубер установил, что две трети людей, держащих смартфон одной рукой, делают это правой, и многие из нас предпочитают держать устройство не «основной» рукой.
Хотя все мы держим смартфон по-разному, прослеживается четкое предпочтение. Это использование больших пальцев. Когда мы держим телефон одной рукой, большой палец является единственным, с помощью которого удобно что-то нажимать на экране. Даже когда мы используем обе руки, многие из нас предпочитают водить по экрану большим пальцем.
Во время аудита юзабилити Хубер установил, что даже те, кто держит смартфон в одной руке, а нажимают на экран другой, часто используют большой палец. Просуммируйте это все, и вы поймете, что большой палец используется в 75% всех взаимодействий:
Зона большого пальца для смартфона
Большой палец может дотянуться до большей части поверхности экрана, но только на трети экрана мы можем взаимодействовать ним комфортно: внизу с противоположной от пальца стороны. Например, если вы держите смартфон в правой руке, большой палец может дотянуться до элементов интерфейса внутри « дуги », начинающейся в нижнем левом углу экрана.
То же самое касается, когда мы держим телефон двумя руками. Но при этом размеры дуги увеличивается, потому что большой палец приобретает большую свободу для движения.
Что насчет левшей? Для них зона расположена слева направо. Но различие левой и правой сторон не особенно важно, так как большинство из нас могут спокойно переложить аппарат из одной руки в другую. Тем не менее, оптимизируя размещение элементов под одну руку, мы неизбежно жертвуем другой. Лучшее решение заключается в том, чтобы разместить основные функции посередине экрана, там, где пересекаются зоны правого и левого больших пальцев.
В конце концов, компоновка элементов сверху или снизу более важна, чем справа или слева. Независимо от того, какой рукой вы пользуетесь, нижняя часть экрана является не очень удобной, а в верхнюю часть нужно тянуться пальцем. Это правило справедливо для всех экранов смартфонов, но когда смартфоны увеличиваются до гигантских размеров, эти удобные зоны разрываются.
Огромные планшетофоны
К середине 2014 года треть всех мобильных устройств обладала большими экранами под семь дюймов:
Несмотря на гигантские габариты планшетофонов, люди обычно держат их так же, как смартфоны, и три основных способа остаются в силе. Но в отличие от небольших смартфонов, пользователи планшетофонов гораздо чаще меняют способ захвата, чтобы охватить весь экран двумя руками. В другом исследовании Хубер и Патти Шэнк выяснили, что владельцы планшетофонов используют обе руки 70% времени.
Самый популярный из способов заключается в том, чтобы держать планшетофон в одной руке, а указательным пальцем другой нажимать на экран. Но большой палец остается основным: 60% времени владельцы планшетофонов взаимодействуют с элементами либо одним большим пальцем, либо обоими:
Зоны большого пальца для планшетофонов
Для планшетофонов чаще используются два больших пальца, что объясняет наличие пары зеркальных перекрывающихся зон большого пальца в нижней части экрана с полосой труднодоступного пространства в верхней части.
Несмотря на то, что зона большого пальца используется довольно часто, это не единственная область, которую нужно оптимизировать. Мы держим планшетофоны одной рукой только 25% времени, но способ работы с помощью одного большого пальца является важным для дизайнеров, потому что он имеет наименьший диапазон охвата пространства экрана.
Это подводит нас к первому правилу большого пальца для всех форм-факторов: всегда учитывайте способ удерживания с наименьшим диапазоном охвата, чтобы люди могли работать с интерфейсом независимо от того, как они держат устройство. Для планшетофонов это означает, что при тестировании юзабилити дизайнеры должны учитывать способ удерживания одной рукой и работы одним большим пальцем.
Зона одного большого пальца для планшетофонов меньше, чем для смартфонов. По мере увеличения размера телефонов, зона большого пальца сохраняет примерно ту же форму и положение ( привязанное к нижней части экрана ) пока размер не достигнет критической точки. Тогда захват изменяется, чтобы человеку было удобнее удерживать планшетофон. При этом способе большинство людей перемещает мизинец под аппарат, чтобы удержать его, но из-за этого уменьшается диапазон охвата большого пальца:
Область в верхней части экрана планшетофона недоступна для большого пальца, но некоторые люди предпочитают держать устройство сбоку одной рукой, прижимая палец к экрану при перемещении. На планшетофонах этот захват дает пользователям возможность расширить диапазон охвата по сравнению с обычным способом удерживания в нижней части.
Чем выше мы захватываем планшетофон одной рукой, тем выше мы можем дотянуться большим пальцем, но тем большей становится недосягаемая зона в нижней части экрана.
Планшеты: больший экран означает больше захватов
Больший экран означает больше способов его удерживать, и работа с устройством становится менее предсказуемой. Правила юзабилити большого пальца все еще применимо, но зона большого пальца не соответствует даже для отдельных устройств; она изменяется в зависимости от позиции и даже позы человека.
Чтобы работать с большим планшетом вроде IPad стоя, мы используем две руки, при этом держа его посередине каждой из сторон. Но если мы возьмемся немного ближе к низу, все меняется. Некоторые охватывают планшет рукой, как скрепкой, и нажимают на экран другой рукой. Но чаще мы работаем с планшетом сидя.
По мере того, как устройства становятся больше, они также становятся тяжелее, и мы часто вообще кладем их. При юзабилити анализе сайтов Хубер и Шэнк выяснили, что люди кладут большие планшеты на какую-нибудь поверхность в двух из трех случаев. Мы кладем их на горизонтальную поверхность ( стол или колени ) 40% времени и опираем на вертикальную поверхность 22% времени.
Зона большого пальца для планшета
Когда мы берем планшет, он оказывается слишком большим, чтобы держать его и нажимать на экран одной рукой, поэтому мы задействуем обе руки. И здесь снова важны большие пальцы. Мы захватываем планшет по сторонам, прижимая ладонями, а большими пальцами мы можем манипулировать в верхней трети экрана. При этом захвате самыми удобными зонами для рук являются соседние боковые стороны и углы экрана.
До верхнего и нижнего краев экрана планшета нам тяжело дотянуться. Низ является особенно неудобной областью, так как достать до него пальцами еще труднее, а иногда эта часть экрана вообще нам не видна. При самой наиболее распространенной позе работы с планшетом ( лежа ) нижняя часть устройства скрывается в одеяле, свитере:
Мы также часто нажимаем элементы в центре экрана. И чем больше размер экрана, тем дальше нам нужно тянуться руками. Но для того, чтобы дотянуться до центра экрана планшета, нам нужно привести в действие всю руку до самого плеча. И это требует усилий. Интерфейс не должен требовать большого количества физических движений: группируйте наиболее часто используемые элементы управления в пределах удобной досягаемости больших пальцев. Никому не понравится, если придется совершать много движений всей рукой при работе с планшетом.
Гибриды и ноутбуки: добавьте к ним еще и клавиатуру
Наши позы, а также положение рук и кистей изменяются, чтобы было удобнее работать с клавиатурой. До недавнего времени гибридная комбинация сенсорного экрана и клавиатуры встречалась довольно редко. Но затем вышла Windows 8 .
Гибриды требуют от нас, чтобы мы перемещали руки между клавиатурой и сенсорным экраном. До появления гибридов, многие высказывали мнение, что с точки зрения эргономики эта концепция является несостоятельной: движение руками взад и вперед требовало бы слишком больших усилий, в результате руки чего руки быстро устают.
Но подобные опасения оказались напрасными. В результате исследования обнаружилось, что люди быстро переходят на использование сенсорных компонентов этих устройств, уделяя 77% времени именно им, а не мышке или клавиатуре. Несмотря на доступность и точность традиционного курсора, люди считают, что сенсорный экран более удобен.
Немного отходя от темы, сенсорный экран не является полной заменой мыши, а скорее удобным ее дополнением. С помощью этих гибридных устройств люди могут легко переключаться на использование сенсорного экрана, клавиатуры, мыши или трекпада в зависимости от того, что им удобнее.
Почему руки у людей не устают? Оказывается, они быстро приспосабливаются к тому, как работать с сенсорным экраном, не отрывая рук. Во время исследования выяснилось, что, когда используем сенсорный экран ноутбука, мы держимся за нижние углы экрана, и руки отдыхают, оторвавшись от клавиатуры.
Зона большого пальца для гибридных устройств
Позиция с руками на углах монитора определяет зону большого пальца для гибридов. Размещая сенсорные элементы интерфейса в пределах удобной досягаемости больших пальцев, мы облегчаем работу пользователей: в этом случае им не нужно отрывать руки от монитора:
Но не все используют такой захват. Другие пользователи ( особенно новички ) вообще не держатся за устройство, водя по экрану указательным пальцем. Таким образом, в зону удобной досягаемости попадает практически все пространство экрана. Для дизайнеров это добавляет головной боли. Комфортная зона для указательного пальца зеркально противоположна зоне большого пальца. Указательными пальцами легко дотянуться до центра экрана, а вот до углов сложнее.
Оптимизация под большие пальцы означает меньше удобства для указательных пальцев, и наоборот. Приходится выбирать один из этих подходов, хотя исследования говорят, что предпочтение должно отдаваться большим пальцам. После непродолжительного периода работы с устройством пользователи гибридов учатся использовать большие пальцы, держась руками за углы монитора, что позволяет рукам отдыхать:
Для всех форм-факторов, которые мы рассмотрели, остаются справедливы одни и те же принципы: большие пальцы являются основными, независимо от того, насколько большой экран устройства. С помощью большого пальца мы можем дотянуться до наиболее обширной части экрана. Это было установлено исследовательским центром Bell , как и многими другими промышленными дизайнерами. Именно ее они пытаются воплощать во всех своих устройствах. Эти правила юзабилити дизайна также должны определять шаблоны ваших цифровых интерфейсов.
Бизнесмен, держащий смартфон с шаблоном рамки пустой экран для добавления рекламы и текста.
Творческий фон, мужская рука с телефоном
Набор рук, держащих смартфон и планшет с пустым экраном на белом фоне
Рука касаясь планшета с рентгеновским изображением
Макет цифрового планшета на столе с цветами
3d графический дизайнер с мужским персонажем, держащим перо
Планшет с наушниками рисованной наброски каракули значок. слушайте музыку на цифровом устройстве и концепции плеера
Женская рука держит телефон с пустым экраном на желтой поверхности
Вид сверху мужской руки, пишущей на ноутбуке на рабочем месте с макетом планшета
Сенсорный экран жесты плоской цветной значок серии со стрелками, указывающими направление
Экран планшета с рукой, держащей стилус ad
Рука с планшетом
Бизнесмен, работающий с таблеткой
Технологический макет с ручным показом планшета
Мужская рука держит планшет с пустым экраном на синем
Набор онлайн-заказа, дизайнер создает идею на графическом планшете, рейтинг или отзывы клиентов с пятью звездами на экране ноутбука, рабочий процесс.
Рука держит пустой планшет с пространством для дизайна
Женщина сидит на диване с планшетом в руке через плечо выстрел
Набор гаджетов с функцией тачскрина
Рука с помощью планшета, устройство на виде сверху, пустой экран с copyspace, минималистичный стиль. технологии, модерн, маркетинг. негативное пространство для рекламы. коралловый цвет на стене. стильно, модно.
Крупным планом бизнесмен с цифровым планшетом
Мужская рука держит планшет с пустым экраном на сером
Закройте мужские руки с помощью планшета с пустым экраном, copyspace.
Руки, держащие смартфон с учителем и учеником на экране смартфона
Руки держат смартфон с видео онлайн. телефон, планшет, кино плоские векторные иллюстрации. дизайн веб-сайта или целевая веб-страница с концепцией развлечений и цифровых технологий
Полный портрет счастливого прыгающего человека с гаджетами, изолированными на желтом
Бизнес на рабочем месте с ноутбуком
Крупным планом деловая женщина, руки, набрав на клавиатуре ноутбука с т
Рука с помощью гаджетов, устройство сверху, пустой экран с copyspace, минималистичный стиль. технологии, модерн, маркетинг. негативное пространство для рекламы, флаера. желтый цвет на стене. стильно, модно.
Дизайнер человек с графическим планшетом и милая маленькая девочка с книгой
Руки с предметами. руки держат устройства и инструменты. рука и объект, рука инструмента устройства, рука оборудования
Руки держат смартфон с другим ребенком на экране смартфона
Женщина на диване с лекарствами
Ipad с диаграммой
Графический дизайнерский макет сверху с ноутбуком
Бизнесмен с таблетки после закрытия сделки
Рука с помощью гаджетов, ноутбук на виде сверху, пустой экран с copyspace, минималистичный стиль. технологии, модерн, маркетинг. негативное пространство для рекламы, флаера. желтый цвет на фоне. стильно, модно.
Читайте также: