—»     —»   Разработка дизайна приложений для устройств, основанных на технологии Touch
  Раздел: Руководства   Комментариев: 2  

Разработка дизайна приложений для устройств, основанных на технологии Touch



Пальцы, а главное – большой палец, перевернули все традиции настольных ПК с ног на голову. Дизайнер, специализирующийся на взаимодействии, Джош Кларк (Josh Clark) рассказывает о том, что нужно учитывать при разработке приложений, предназначенных для мобильных устройств, основанных на технологии Touch и приводит сравнение touch-интерфейсов, задействованных в iPhone, iPad и Android-устройствах.

Разработка дизайна приложений для устройств, основанных на технологии Touch

Отличные дизайны для мобильных девайсов подразумевают не только способность «втиснуться» в маленькие дисплеи, но и так же предполагают возможность удобного управления и навигации посредством пальцев. Физические характеристики портативных устройств, для которых разрабатываются интерфейсы, вынуждают уходить дизайнеров не только вглубь визуального и информативного дизайна, но также переходить на уровень промышленного дизайна. С приходом touch-интерфейсов, все козыри выпали на сторону эргономики. Теперь важно не только то, как выглядит ваша композиция из пикселей, но и то, как она чувствуется в руке.

Правило большого пальца

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

Большие пальцы изумительны. Наши большие пальцы, как и неутолимая жажда новых сплетен о любимых звездах шоу-бизнеса, отличают нас от животных. Но и их возможности ограничены, особенно если речь идет о гибкости. Большой палец среднестатистического человека способен охватить весь экран практически любого мобильного телефона, но существуют модели, где человек способен комфортно достать лишь 3/4.

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

Разработка дизайна приложений для устройств, основанных на технологии Touch

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

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

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

Разработка дизайна приложений для устройств, основанных на технологии Touch

Если глубже изучать данную тенденцию в дизайне приложений, можно также учитывать, что здесь не только комфорт играет роль, кнопки управления были смещены вниз еще и потому, что будь они сверху, пальцы просто загораживали бы экран. Управляя пальцем снизу, вы не закрываете обзор контента. Для того чтобы весь контент был в поле видимости, его стоит располагать над кнопками управления и над навигацией. Вы можете наблюдать подобную структуру интерфейса практически в любом устройстве: мобильных телефонах, плеерах, калькуляторах и остальное можете перечислить сами. Контент – вверху, управление – внизу.

Я, робот

Правда, всё это с появлением Android-устройств осложнилось, так как системные кнопки в данных устройствах также расположены снизу (вплоть до выхода «Honeycomb» на Android 3, у них всегда были физические кнопки; начиная от «Ice Cream Sandwich» на Android 4, эти кнопки превратились в виртуальные). Эти кнопки во всех системах расположены снизу именно по тем причинам, которые мы описывали выше. Расположение кнопок управления в нижней части экрана означает то, что нам нужно располагать панели инструментов поверх друг друга и, увы, это приводит к тому, что наибольшее число промахов по кнопкам возникает именно ввиду этого. В зонах повышенной активности, где большой палец зачастую вынужден задерживаться на время, закрывая при этом экран, стыкование кнопок неизбежно. Данный рабочий стол Android, к примеру, явно способствует промахам:

Разработка дизайна приложений для устройств, основанных на технологии Touch

Стыкования кнопок управления в touch-интерфейсе желательно избегать всегда, особенно в самом низу экрана. К сожалению, это означает то, что в Android-приложениях они должны располагаться вверху экрана во избежание путаницы с системными кнопками. Данный метод тоже не идеален, так как навигация выносится за пределы зоны досягаемости большого пальца. Следовательно, при попытке нажать на кнопку, вы закроете весь обзор экрана. Но это лучше, чем нажимать не на те кнопки, если ваши пальцы чуть больше, чем у мальчика-с-пальчика, не так ли?

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

Разработка дизайна приложений для устройств, основанных на технологии Touch

Интернет: приложение внутри приложения

Правило, подразумевающее избежания стыковки кнопок, порождает проблемы данного типа и при разработке веб-сайтов для мобильных устройств. Конечно же, веб-приложения воспроизводятся в рамках другого приложения – в браузере. Во многих мобильных платформах встроенный браузер имеет собственные кнопки и регуляторы, которые могут поспособствовать возникновению конфликтной ситуации с веб-навигацией. Это означает, что вам следует избегать «фиксации» навигационного меню сайтов в нижней части экрана, так как навигация веб-сайта может смешаться или быть состыкована с меню браузера (данное правило также подкрепляется тем фактом, что position:fixed не всегда поддерживается в мобильных браузерах, что вызывает проблемы со стыковкой панели инструментов к нижней части экрана).

В отличие от ситуации с Android, данное решение не перемещает веб-навигацию в самый верх, а, наоборот, в самый низ всей страницы. Так как браузер Chrome и так съедает достаточно пространства в некоторых мобильных браузерах, первое, что вам не следует делать – продолжать еще дальше нагромождать контент, занимая верхнюю часть страницы навигацией и опциями.

Люк Врублевски (Luke Wroblewski) пишет в своей замечательной книге под названием «Mobile First»: «Слишком много прелестей и причуд в этом мобильном интернете… начните с рассуждений по поводу необходимых пунктов навигации, а уже потом думайте о контенте. Для мобильных пользователей зачастую время – важнейшая ценность, а закачки могут стоить бешенных денег. Поэтому вам остается лишь дать пользователям именно то, за чем они пришли».

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

Разработка дизайна приложений для устройств, основанных на технологии Touch

По мнению Врублевски, данный подход имеет несколько преимуществ:

«Данный дизайн предполагает использование минимального количества элементов навигации (единственная ссылка в самом верху страницы), и дает людям возможность просмотреть весь контент до конца. К тому же, нам не приходится дублировать меню, а для полноценной работы навигации нам нужна всего лишь одна якорная ссылка. Никаких javascript, никаких наложений или разделений навигационного меню – простая анкорная ссылка, ведущая в самый низ страниц. Это примерно как HTML 0».

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

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

Но и эти правила могут отличаться в зависимости от различий телефонов. Чего же ждать от touch-экранов размерами побольше? В случае с iPad, к примеру, правила снова меняются.

Планшеты, занимайте свои углы

К iPad правило большого пальца также применимо, за исключением того, что зона охвата меняется ввиду того, что данное устройство нужно держать совсем иначе. Хват iPad зависит от положения. Если вы стоите, нужно использовать обе руки. Если сидите за столом, то одной рукой вы поддерживаете планшет, а второй производите манипуляции. Сидя на стуле, вы будете удерживать планшет одной рукой, и управлять им – другой. Лёжа или полулёжа люди зачастую упирают устройство в живот, поддерживают его одной рукой, а второй, опять же, производят махинации.

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

Как бы не отличались все эти положения, ко всем им применимо два правила. Первое заключается в том, что все склонны удерживать iPad чуть выше середины для того, чтобы упор был лучше, а это означает, что и большие пальцы будут расположены на 1/3 части устройства, начиная с верха. И второе заключается в том, что большой экран iPad не позволяет нам бегло охватывать все доступное пространство взглядом, как это можно сделать в случае с телефоном. Как и в случае с печатной продукцией, внимание пользователей планшетных ПК изначально падает на верхнюю часть, и это важно учитывать при построении информационной иерархии дизайна. Что касается iPad, глаза и пальцы естественным образом сосредоточены в верхней части устройства (порой нижняя часть устройства даже не попадает в поле зрения, к тому же, если учитывать самые «ленивые» позиции, то в таких случаях нижняя часть экрана вообще теряется в одеяле, свитере и тому подобном).

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

Разработка дизайна приложений для устройств, основанных на технологии Touch
Разработка дизайна приложений для устройств, основанных на технологии Touch

Избегайте размещения управления в центре верхней части экрана, так как это напрямую ведет к тому, что ваша рука заслонит обзор. Управление не должно быть расположено прямо над контентом, поэтому можно «растасовать» его по углам. К примеру, The Daily для iPad в самом верху и по центру предлагает нам ползунок, посредством которого мы можем перемещаться по основным заголовкам. Но когда вы начинаете использовать его, рука закрывает миниатюры, что напрямую ведет к затруднению использования самой этой функции.

Разработка дизайна приложений для устройств, основанных на технологии Touch

Нижняя линия

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

Разработка дизайна приложений для устройств, основанных на технологии Touch

Так верх или все-таки низ? Давайте попробуем рассмотреть разницу:

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

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

Слишком большой, чтобы промахнуться

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

Но как узнать, какой размер для кнопок – идеален? Хм, какой средний размер у кончиков пальцев? Здесь все платформы предлагают различные варианты, но по нашему мнению, Apple как всегда предлагает самое оптимальное решение, где минимальный размер кнопки должен составлять 44 пикселя, что равняется 1/4 дюйма или 7мм в диаметре. Что касается веб-приложений, то здесь минимум в 44 пикселя также подходит отлично.

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

В идеале, все элементы управления должны составлять 44х44 пикселей в размере. В большинстве случаев же это даже больше необходимость, чем прихоть. Даже в iPhone дизайнеры частенько прибегают к правилу 44-х пикселей. Например, в клавиатуре используются клавиши высотой в 44 пикселя, но ширина их составляет всего 30 пикселей. Такую же тенденцию можно наблюдать и при горизонтальном положении устройства: 44 пикселя в ширину и 38 – в высоту. У Apple здесь не такой уж и большой выбор, так как существует необходимость вместить полноценную клавиатуру QWERTY, и будь все кнопки 44х44 пикселя, они бы не уместились. Приходится чем-то жертвовать.

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

Не путайте меня

Наверняка все помнят такие старенькие наручные часы Casio с калькулятором. Там проблема была даже не в том, что кнопки были очень маленькими, а больше в том, что они были расположены невозможно близко друг к другу. Вы целитесь в 5, а попадаете в 2 или 8 – было похоже на колесо фортуны, нежели на калькулятор. Размер кнопок, другими словами, это не единственный фактор, определяющий удобство использования подобных устройств. Важно также учитывать и отступы.

Разработка дизайна приложений для устройств, основанных на технологии Touch

При разработке маленьких экранов, вы всенепременно столкнетесь с проблемой нагромождения интерфейса. Наверное, каждому разработчику знакома мысль: «Я это немного подвину, и тогда у меня влезет еще одна кнопка…». В подобных ситуациях всегда лучше сказать себе «нет»!

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

Разработка дизайна приложений для устройств, основанных на технологии Touch

Эти два приложения имеют отличия лишь в самом низу экрана. В обоих приложениях все кнопки нагромождены прямо в самом верху навигации, что, как уже обсуждалось выше, не очень хорошо. Но ввиду того, что эти кнопки очень большие в Skype (слева), этот недочет становится не таким значимым. В приложении Call Global, тем не менее, кнопки состыкованы в верхней части, и размер их оставляет желать лучшего, здесь точно будет много промахов. Даже несмотря на то, что технически они больше, чем 44х30 пикселей, недостаток отступов и недостаточное внимание, уделенное правилу о нагромождении кнопок в нижней части экрана, ведут к некоторым проблемам. Здесь нужно либо увеличивать кнопки в размере, либо делать отступы между ними.

Давайте выделим ключевой урок: возможно, это покажется совсем не очевидным, но успех интерфейсов, предназначенных для небольших экранов, кроется в больших элементах, больших кнопках и хороших отступах. Экраны могут быть миниатюрными, но наши пальцы ведь не уменьшить. Так что, к дизайну стоит подходить учитывая если не самые большие размеры пальцев, то хотя бы учитывать, что в мире всегда есть люди, чьи пальцы больше ваших.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 8578   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 марта 2012 @ 14:58
Написал: krapan88 — группа: Читатели  
На сайте с: 31.01.2010   |   Публикаций: 0   |   Комментариев: 59
ICQ: --- не указано ---
интересная статья. еще не один раз вернусь к ней.
Комментарий #2: 20 марта 2012 @ 12:07
Написал: LUCH-ART — группа: Читатели  
На сайте с: 21.06.2010   |   Публикаций: 0   |   Комментариев: 19
ICQ: --- не указано ---
Спасибо! Интересная статья!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930