Особенности Дизайна Сенсорного Интерфейса

Таким образом, при проектировании интерфейса телефона необходимо адаптировать его под большой палец пользователя.

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

К сожалению, большим пальцем до всего не дотянешься.

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

экрана – его нижняя часть со стороны, противоположной большому пальцу.

Именно в этой области должны располагаться основные элементы сенсорного интерфейса.

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

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

верхнюю часть экрана или окна, а элементы навигации сайта – вверху страниц.

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

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

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

Правши часто и с удовольствием «ходят налево» (иногда доходит до того, что левая рука используется чаще, чем правая), а левши, соответственно, часто меняют левую на правую.

Хотя считается, что среднестатистический пользователь чаще использует правую руку, чем левую, до сих пор не существует достаточно четкой тенденции, позволяющей разработчикам расслабиться и не беспокоиться о том, «правая или левая?!» Наше эмпирическое правило работает независимо от того, в какой руке пользователь держит устройство, и позволяет построить эффективную визуальную иерархию элементов интерфейса.

Наиболее часто используемые кнопки следует размещать внизу экрана, где пользователь может легко их нажимать.

Все остальные элементы управления следует убрать подальше – от греха подальше.

Например, в приложениях для iOS кнопка «Редактировать» обычно размещается в правом верхнем углу, то есть в пределах видимости, но вне прямой досягаемости, чтобы избежать случайных нажатий.

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

Размещая элементы пользовательского интерфейса внизу, ваши руки не блокируют отображаемый контент. Чтобы содержимое разрабатываемого вами приложения было видимым, разместите его над элементами управления.

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

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

Размещение дополнительных элементов управления внизу экрана приводит к захламлению панелей инструментов — и стоит признать, что в таких интерфейсах, к сожалению, пользователь постоянно рискует нажать куда-то не туда.

А на участках экрана, закрытых большим пальцем, избежать подобных ошибок практически невозможно.

Посмотрите на этот домашний экран Android-устройства — он фактически не оставляет пользователю шансов на безошибочное управление.

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

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

Такое расположение далеко от идеала: элементы навигации находятся вне досягаемости большого пальца, а когда пользователь пытается дотянуться до них, его рука закрывает весь экран.

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

На устройствах Android навигация и элементы управления должны располагаться вверху.

Это противоположно принципу, используемому в устройствах iPhone, где кнопка «Домой» не мешает работе с приложениями, как в случае с системными кнопками Android. Сравните приложения Foursquare для Android (слева) и iPhone (справа).

Как вы знаете, все веб-сайты и веб-приложения работают внутри другого приложения — веб-браузера.

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

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

Решение проблемы — не размещать элементы веб-навигации вверху экрана (как в случае с Android-устройствами), а переместить их в низ страницы.

Поскольку немалую часть ресурсов мобильных браузеров «съедают» различные гаджеты, ни в коем случае нельзя заполнять верхнюю часть веб-страницы опциями навигации, полностью вытесняя контент с экрана.

Люк Вроблевски в своей поистине превосходной книге «Mobile First» говорит: «Слишком часто отношения пользователя с мобильными веб-приложениями.

начинаются не с самого контента, а со списка вариантов навигации.

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

При работе с мобильными приложениями контент должен находиться на переднем плане, а основные элементы навигации размещаться внизу и не допускать растекания по всему экрану.

Вроблевски выступает за использование шаблона дизайна, примером которого является мобильный веб-сайт Ad Age: все элементы навигации скрыты и появляются, когда вы нажимаете кнопку «Меню» на панели инструментов в верхней части экрана.

Просто нажмите кнопку, и на экране устройства сразу появятся параметры навигации.

Меню появляется мгновенно, как если бы было наложение, но на самом деле оно работает как якорная ссылка на элементы навигации внизу страницы.

Люк Вроблевски выделяет следующие преимущества этого подхода: «Там используется минимальный набор элементов навигации (единственная ссылка вверху), и пользователи могут сначала спокойно ознакомиться с контентом, а уже потом разбираться с навигацией.

Это меню не является дубликатом какого-либо другого меню, и для его работы требуется только простая якорная ссылка (самая приятная часть).

Правильно, никакого навороченного JavaScript, наложений или отдельных страниц навигации — только ссылка внизу страницы.

Это не может быть проще — это как HTML 0».

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

То, как пользователь держит iPad, напрямую зависит от его позы.

В положении стоя вам придется использовать обе руки.

Сидя за столом, пользователь, скорее всего, будет поддерживать его одной рукой и управлять другой.

Сидя в кресле, он положит планшет себе на колени и будет управлять устройством одной рукой.

А если пользователь лежит или прислонился к чему-то и находится в наклонном положении, то он, скорее всего, положит устройство на живот, поддерживая его одной рукой и управляя другой.

Во всех этих положениях пальцы пользователя оказываются в разных частях экрана устройства.

При этом в каждой позе пользователь держит устройство на определенном расстоянии.

Он будет держать iPad ближе всего, когда стоит, и дальше всего, когда лежит. Из всего этого разнообразия можно вывести два общих принципа.

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

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

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

Другими словами, при работе с iPad и взгляд, и пальцы пользователя оказываются на верхней части устройства (нижняя часть иногда оказывается вне поля зрения: в самом распространенном и, безусловно, наиболее расслабленном положении – лежа или полулежа – нижняя часть передней панели устройства утопает в складках одеял, свитеров и животиков пользователей).

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

, а именно в верхних углах, так как именно здесь расположены большие пальцы пользователя, который берет в руки iPad. Некоторые положительные примеры включают приложения Instapaper и Twitter для iPad.







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

Например, в приложении The Daily для iPad вверху по центру есть инструмент, который позволяет просматривать выпуск постранично, но когда вы пытаетесь его использовать, ваша рука перекрывает миниатюры страниц, что усложняет задачу пользователя.

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

Например, разработчики приложения The Sydney Morning Herald для iPad внедрили в него гениальный инструмент навигации: пользователь может быстро просмотреть все статьи текущего выпуска, просто проведя по индексу номера страницы внизу экрана.

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

Так что же выбрать – верх или низ? Давайте разберемся.

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

Какой размер элементов сенсорного интерфейса является достаточным? Встречный вопрос: какой размер кончика пальца? Каждая платформа имеет свои рекомендации.

Apple, как обычно, самая настойчивая и предлагает лучшие (по мнению автора статьи) и универсальные рекомендации для всех платформ: Элементы сенсорного интерфейса должны быть не менее 44 точек (что соответствует четверти дюйма или 7 мм).

Это ограничение в 44 пикселя также идеально применимо к веб-приложениям.

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

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

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

Даже размер стандартных элементов управления iPhone иногда отклоняется от заявленных 44 пикселей.

Например, размер кнопок клавиатуры составляет 44 пункта в высоту и всего 30 пунктов в ширину.

В альбомной ориентации экрана ширина кнопок составляет 44 пикселя, а высота — 38 пикселей соответственно.

Здесь у разработчиков Apple не так уж много места для маневра: крайне важно, чтобы была видна вся QWERTY-клавиатура, а если задать всем клавишам размер 44 х 44, они не смогут поместиться на одном экране.

Чем-то приходится жертвовать.

Вот хорошее практическое правило при проектировании элементов сенсорного пользовательского интерфейса в ограниченном пространстве.

Их кнопки были просто крохотными, и они же помешали автору стать королем выпускного вечера.

но даже это нельзя назвать их главным недостатком.

Дело в том, что вышеуказанные кнопки были расположены слишком близко.

Вы пытаетесь нажать «5», но в итоге нажимаете «2» или «8» — результат предугадать невозможно, это чистая лотерея, а не калькулятор.

Другими словами, размер кнопок — не единственный определяющий фактор: вам также нужно подумать о расстоянии между кнопками.

Фото предоставлено: Джон Роулинсон При проектировании интерфейсов для устройств с маленькими экранами неизбежно приходится бороться с искушением решить проблему ограниченного пространства за счет упаковки элементов интерфейса вместе.

«Давайте переместим это немного ближе.

Давайте добавим еще одну кнопку на эту панель инструментов.

» Процитируем популярный девиз времен расцвета часов-калькуляторов: «Просто скажи нет».

Чем ближе расположены кнопки, тем крупнее они должны быть.

Давайте рассмотрим пару приложений VoIP-телефонии для iPhone: Skype и Call Global App. В обоих приложениях кнопки клавиатуры расположены довольно близко, но это компенсируется их размером, значительно превышающим упомянутый выше минимум 44 х 44. Так что, несмотря на довольно близкое расположение кнопок, по ним сравнительно легко попасть.

.

Однако эти приложения не во всем идентичны: давайте посмотрим на нижнюю часть экрана.

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

А вот в Skype (слева) внушительный размер кнопок сглаживает недостатки дизайна.

Но в приложении Call Global кнопки над панелью закладок слишком узкие, и их близкое расположение приведет к ошибкам пользователя.

Несмотря на то, что реальный размер этих кнопок превышает заявленный минимум 44 х 30, недостаток места между ними и само их расположение внизу экрана играют свою фатальную роль.

Здесь нужны кнопки большего размера и более свободное расположение элементов интерфейса.

Давайте сделаем вывод. Хотя это может показаться нелогичным, эффективность интерфейсов для устройств с маленькими экранами обеспечивается крупными элементами интерфейса и достаточным пространством между ними.

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

Так что не забывайте при разработке о толстых пальцах.