Проектируя для кончиков пальцев

Маркетинг10 Создание сайтов3 Контекстная реклама5 SEO4 Комплекс услуг2 Дизайн6 Программирование1 SMM1 Digital2 Использование сервиса1 Мобильная разработка1 Юзабилити2 Брендинг3 Менеджмент2 Интернет-маркетинг1 Интранет

ДизайнСтатья

MobileПроектированиеiPhoneAndroidПланшеты

Использование пальцев перевернуло устоявшиеся представления о настольных приложениях. Дизайнер интерактивной среды Джош Кларк объясняет, о чём важно помнить при проектировании интерфейсов для мобильных сенсорных экранов, и сравнивает удобные для пальцев тач-интерфейсы iPhone, iPad и Android.

Josh Clark

17 мая 2012

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

Максим Десятых
Креативный директор redmadrobot

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

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

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

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

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

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

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

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

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

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

Максим Десятых
Креативный директор redmadrobot

Разработчики систем iOS и Android тщательно документируют все рекомендуемые случаи использования нижних и верхних панелей навигации, к ним стоит прислушаться. И правила, которые озвучивает Джош, в них учтены. Так что после прочтения этой статьи переходите к изучению iOS Human Interface Guidelines и Android Design.

Я, Робот

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

Сравните приложение Foursquare для Android (слева) и для iPhone (справа), и вы увидите получившиеся отличия:

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

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

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

Это противоположно тому, как поступают в случае с iPhone, где кнопка «Домой» не создаёт таких проблем для попадания.

Максим Десятых
Креативный директор redmadrobot

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

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

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

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

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

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

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

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

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

Максим Десятых
Креативный директор redmadrobot

Отличное решение Люк предложил.

Казалось бы, «контент – вверху, элементы управления – внизу» – простое правило. Но, как вы могли заметить, следствия его различны в случаях, когда часть пространства отнимают операционные системы или браузеры. Итак, что мы имеем:

Для iPhone: поместите элементы управления приложением в нижней части экрана.
Для Android: поместите элементы управления приложением в верхней части экрана.
Для сайтов: расположите навигацию внизу страницы (альтернатива нижней части экрана).

Эти рекомендации работают для телефонов, что же происходит при работе с более крупными сенсорными экранами? Для iPad правила снова меняются.

Планшеты, к бою!

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

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

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

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

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

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

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

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

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

Максим Десятых
Креативный директор redmadrobot

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

Нижняя линия

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

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

Максим Десятых
Креативный директор redmadrobot

Хорошо подмечено. Основываясь на этих рекомендациях, я бы предложил дизайнерам Apple переделать Videos на iPad — получилось бы лучше.

Итак, верхняя или нижняя часть? Отличия таковы:

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

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

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

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

Так какой размер можно считать достаточно большим, когда речь заходит о целях касания? Что ж, а каков размер кончика пальца? Все платформы предоставляют руководства по этому поводу, но, как всегда, в Apple наиболее категоричны. Компания настаивает на том, что я считаю наилучшим для всех мобильных платформ: делайте цели касания размером минимум 44 пункта, что составляет около ¼ дюйма или 7 мм. Для сайтов также отлично работает минимальное значение в 44 пикселя.

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

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

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

Максим Десятых
Креативный директор redmadrobot

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

И, кстати, пожалуйста, учитывайте, что на retina-дисплеях 44 пикселя превращаются в 88.

Не дави на меня

Ваш покорный слуга провёл немало лет своей юности с тонким ремешком часов-калькулятора Casio на руке, прежде чем избавиться от них в 1985 году. Проблема была не только в их крошечных кнопках или том обескураживающем эффекте, который они оказывали на мои шансы на повышение. Кнопки располагались слишком близко друг к другу. Вы собирались нажать «5», а попадали на «2» или «8», когда как – это было колесо фортуны, а не калькулятор. Другими словами, размер кнопок – не единственный фактор, определяющий точность попадания при нажатии на кнопку. Необходимо также учитывать расстояние между ними.

Фото: Jon Rawlinson

Проектируя для маленьких экранов, вы неизбежно испытаете соблазн решить эту проблему, загромождая интерфейс. «Я лишь подвину их немного ближе друг к другу. Я добавлю всего одну кнопку в эту панель инструментов». Используя популярное выражение времён часов с калькулятором: «Просто скажи нет».

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

Рассмотрим два приложения для интернет-звонков с помощью iPhone: Skype и Call Global App. Оба они располагают клавиши вплотную друг к другу, но компенсируют это, делая их значительно крупнее, чем минимальные 44×44. Несмотря на близкое расположение, кнопки по-прежнему удобны для нажатия.

Что отличает эти приложения, так это нижняя часть экрана. В обоих приложениях кнопки располагаются прямо над вкладками панели навигации, что, как уже обсуждалось выше, далеко не лучший выход. Однако благодаря крупному размеру кнопок в Skype (слева), проблема кажется не такой значительной. В Call Global App кнопки, вплотную прилегающие к верхней границе панели, слишком тонкие, и их тесное прилегание делает вероятными ошибки. Хотя технически их размеры превышают минимальные 44×30, нехватка пространства между кнопками и провоцирующее ошибки расположение создают неудобства. Такая разметка требует более крупных кнопок или более свободного расположения.

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

Максим Десятых
Креативный директор redmadrobot

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

А теперь: iOS Human Interface Guidelines и Android Design.

Оригинал статьи: netmagazine.
Оригинал перевода: justnotes.ru.

Егор Аристакесян
Креативный директор и совладелец в Articul Media Group

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

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

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

Леонид Бугаев
Владелец в Nordic Agency AB

Когда я впервые познакомился с работами ЛюкаW (lukew.com), меня осенило. Затем озеленило, пожелтело — и еще целые сутки я ходил красный, как рак. Все ТАК просто. Как и должно быть. Вообще — принцип KISS — мой излюбленный метод, с которым я знакомлю дизайнеров в своем агентстве перво-наперво. Если вы с этим методом не знакомы — все просто. Погуглите :)

Правило большого пальца в контексте различных устройств работает по-разному. Перещупав последовательно первый iPod, iPod nano, iPod shuffle, iPod nano 3rd, iPod nano 6th gen, iPhone 2, iPhone 3, iPhone 4S, iPad 1, 2, 3 начинаешь интуитивно понимать в чем же закопана разница — и почему кнопку «Купить» не нужно вешать в правом верхнем углу, если ваши потребители заходят на мобильный сайт с новехонького Samsung Galaxy Note (заклинаю вас — не делайте так!)

Джош Кларк добавляет к интуиции логику и холодный разум. Оказывается, как в сказках Кэролла, все увеличивается и уменьшается, переворачивается на ноги и ложится на бок — в зависимости от устройства. iPhone? Большие пальцы вниз. iPad? Верните вверх! И не забывайте убирать руки — заслоняете самое ценное: информацию.

Попытки угадать, где находится цель касания иногда превращается в старую добрую игру ’Mine Sweeper’. Последний раз, промахнувшись при заказе с мобильного телефона и нажав на кнопку ’Process order’ два раза, я тут же получил два sms-сообщения о списании $200. Цена ошибки очевидна: не каждый покупатель выдержит спокойно такую ходьбу по минам.

Концепция экономии времени мне невероятно близка — и поэтому принцип «дайте пользователю то, за чем он пришел — сначала» находит отклик во мне как в человеке, который отвечает за создание мобильных продуктов многих наших клиентов. И определение того, что в первую очередь нужно вашему потребителю является приоритетной задачей. (Помните про keep it short and simple :)

Сюрпризы, как всегда, обнаружатся в конце истории: тогда, когда вы выложите свое приложение в открытый доступ. Любое тестирование окажется незавершенным — и тогда — здравствуй, версия 1.01! Так что готовьтесь — у вас все впереди. Или вверху?

P.S. И не давите на автора: не он это все придумал :)

Владислав Тютюников
Digital AC director в Progression Group

Я очень удивился, когда увидел картинки, подписанные как «Instapaper и Twitter для iPad показывают пример удачного расположения кнопок». У меня сложилось впечатление, что автор никогда не держал iPad в вертикальном положении. Даже если предположить, что некоторые пользователи и держат планшетники таким образом, попробуйте повернуть большие пальцы вниз хотя бы на 30 градусов. У вас не получится закрыть и 25% областей, указанных на картинках. Такой подход более характерен для смартфонов, которые держат двумя руками. Например в играх.

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

По поводу расположения навигации. Я считаю несущественным процесс выбора зоны для главной навигации по разделам приложения/сайта. Для этой задачи есть стандартные механизмы юзабилити. А вот зона функциональной навигации по разделу (кнопки «Вперёд», «Назад», «Пауза», пейджер и т.п.) должна находиться в нижней части экрана. Нахождение этой зоны вверху автоматически влечёт за собой перекрытие ладонью всей контентной зоны на экране.

Ксения Артеменко
Бизнес-аналитик в i-Free Innovations

Отличная статья, рассказывающая об основных ошибках при проектировании мобильных интерфейсов.

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

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

То есть чем раньше будут обнаружены проблемы с интерфейсом — тем дешевле будет стоить их решение.

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

По-моему, всегда стоит дерзать с новыми идеями: кто знает, а вдруг ваше решение — удачнее других и может «выстрелить» на рынке? :-)

Антон Ткачук
Арт-директор в Touch Instinct

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

В части про правило большого пальца очень специфично указана «горячая зона» большого пальца для смартфонов. Дизайнер Дастин Кертис, анализируя размеры дисплеев смартфонов, обозначил другие зоны: http://dcurt.is/2011/10/03/3-point-5-inches/. Разумеется, в этом вопросе очень многое зависит не только от анатомии конкретного пользователя, но и от того, как он привык держать устройство: кто-то держит его снизу, кто-то ровно посередине по высоте. В любом случае самая доступная зона для типовых смартфонов: центр экрана и пятно, смещенное в сторону большого пальца. В зависимости от хвата под большим пальцем может появиться «слепое пятно» — зона, ради доступа к которой придется перехватить устройство иным способом.

Еще более удивительны зоны, обозначенные для планшетов. Никогда не видел, чтобы айпэд в портретной ориентации держали сверху. Вообще планшеты пользователи держат еще более непредсказуемо. Можно было бы указать на относительно положительный опыт Apple, которая в iOS 5

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

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

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

Андрей Лебедев
Креативный директор в "ДАЛЕЕ"

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

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

PS. После обоснования различий iOS, Android и мобильного сайта не могу не вспомнить клиента, который требует полной идентичности дизайна для этих платформ, боясь «вредного для брендинга неединообразия».

Александр Киров
Ведущий мобильный дизайнер в Mail.Ru Group

В команде Mail.Ru, работая над дизайном мобильных приложений, мы с особым вниманием подходим к проектированию приложений и тестированию макетов.

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

Все ли элементы удобно расположены?
Достаточно ли удобно до них тянуться пальцем?
Не перекрывает ли важную визуальную область рука, при держании телефона?

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

Роман Павленко
Digital Creative Director в Leo Burnett Group Russia

Позволю себе не согласиться с автором статьи: не такие уж наши пальцы и неуклюжие. Прошу прощения за цитату и поминание всуе имени Стива Джобса, но он считал человеческие пальцы божественным инструментом, способным прекрасно справиться с любым интерфейсом.

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

И еще отмечу, что все правила тем и хороши, что их следует нарушать. Мне, например, было бы скучно работать с приложениями, интерфейсы которых выполнены словно под копирку. Хотя большие кнопки — это, безусловно, хорошо:)

Сергей Денисюк
Генеральный директор в MobileUp

Прекрасная статья, раскрывающая первую особенность дизайна для мобильных: зону физического доступа пальцев. Но тему нужно раскрывать дальше. После понимания, каким устройством мы пользуемся, вторым шагом при дизайне мы думаем, ГДЕ и В КАКОЙ СИТУАЦИИ мы пользуемся приложением. На бегу, или лежа на диване, нужно нам быстро что-то посмотреть или есть время погрузиться в приложение. От этого зависит компановка экрана и размер элементов. И далее — какие у пользователя цели, что ему нужно, как максимально удобно решить его задачу. Это и должно определять интерфейс и схему навигации, в которую «пальцевая доступность» входит как важный фактор. Сейчас правильное размещение элементов управления является must-have и само по себе не сделает интерфейс хорошим, нужно копать глубже.

Иван Козлов
Генеральный директор в CleverPumpkin

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

Что касается данной статьи, я уверен, что большинство разработчиков с уверенностью скажет, что всё, описанное в ней, им известно, что это простые и очевидные истины, которым, безусловно, нужно следовать. Но почему-то далеко не все подтверждают свои слова делом. Почему? У меня нет ответа на этот вопрос. Вполне возможно, что люди строят проекцию своих собственных ощущений на всех пользователей приложения. Т.е. в данном случае работает принцип «я потыкал — мне удобно».

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

Николай Демьянков
Руководитель департамента мобильных решений в AREALIDEA

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

Для каждой из операционных систем есть свой guideline по проектированию интерфейсов: для iOS — одни правила, для Android — другие. Иногда они могут противоречить друг другу, как было отмечено автором о расположении элементов управления. Да и слово «правила» не совсем верно: сами разработчики отмечают, что это скорее рекомендации по проектированию. Как они сами говорят: «если вы знаете как должен выглядеть интерфейс вашего приложения — делайте, если нет — делайте, как написано в нашем guideline».

Хочется отметить, что в guideline для Android-приложений, рекомендуемая область касания составляет 48 пикселей. При этом не обязательно делать иконку именно такого размера: сама она может выглядеть внешне и меньше, но граница реакции у неё должна быть расширена. Вообще говоря, вокруг элемента касания должна быть некоторая область погрешности — буфер ошибки, и если пользователь промахнется по иконке — приложение всё равно поймет, что от него хотят, и поступит должным образом.

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

Константин Мовчан
Руководитель отдела Production в AGIMA

Статья достаточно основательная, есть только ряд моментов, которые хотелось бы отметить:

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