Лого vc.ru

Принципы создания интерфейсов для больших экранов от дизайнера Google

Принципы создания интерфейсов для больших экранов от дизайнера Google

Предприниматель, UX-эксперт и дизайнер Google Люк Вроблевски опубликовал в своем блоге материал о принципах дизайна для смартфонов с большими экранами.

Поделиться

Дизайн для больших пальцев


В ходе исследования, включавшего анализ использования смартфонов 1 333 пользователями, UX-эксперт Стивен Хубер выяснил, что 75% людей взаимодействуют с приложениями при помощи больших пальцев рук, а 49% из них держат устройство одной рукой. В случае большого смартфона (дисплей больше 4 дюймов) пользователям приходится чересчур сильно тянуться пальцем к нужному элементу в верхней его части.

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

Решения на уровне операционной системы

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

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

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

Прокрутка на боковой части экрана

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

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

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

Элементы управления внизу экрана

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

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

Всплывающие кнопки действий

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

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

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

Статьи по теме
Разработчики не боятся увеличения экрана нового iPhone16 мая 2014, 18:37
Подсказки в интерфейсе: сложность адаптации под различные типы устройств20 августа 2014, 16:42
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

Консультанты, делавшие техзадание, и впоследствии разработчики, отговорили от нижней полоски с иконками, в пользу раскрывающегося меню, ибо:
1) Значок меню слева вверху - де-факто стандарт для солидных приложений))) Все привыкли. А чтобы меню было заметнее, кроме стандартных трех полосок, разместить там иконку самого приложения - у нас это бешеная (зачеркнуто) Умная пчелка)))
2) Да, свайпом вправо выдвигать меню - это удобно, поэтому это должно уже стать стандартом для приложений с меню
3) Одной рукой работать не получится в приложениях, где нужно вводить цифры и писать тексты (а возможность оставить себе на память комментарий к заполненным в поля циферкам - это хороший тон) - поэтому однорукий аргумент не всегда проходит
4) Нижняя полоска отнимает пространство экрана, особенно в маленьких и дешевых аппаратах, поэтому прокручивать придется больше (все равно больше движений);
5) Меню позволяет полноценно написать названия, иконки не всегда четко передают смысл разделов и действий, что усложнит работу (и, значит, отворотит от приложения часть пользователей)...

Приложение только для Android? Есть тонкий момент, Apple на WWDC высказывались категорически против "бутерброда". По факту он заставляет людей совершать в два раза больше действий. ("меню -> выбор -> меню -> выбор" против "выбор -> выбор" в таб баре)

Про много места на экране - правильное замечание. Но есть хорошие решения, когда скрывают верхний тайтл при скролле. Пример такой реализации - facebook.

0

Интересно, а есть ссылка где об этом (Эппл против меню) можно подробнее почитать?

И почему "бутерброд"? У меня меню не поверх экрана вываливается, а сдвигает экран вправо так, что его часть остается видна...

0

Да, конечно. Но скорее всего понадобится девелоперский аккаунт, можете попросить у ваших разработчиков. Это видео с WWDC'14, называется Designing Intuitive User Experience, примерно 34 минута.(developer.apple.com/videos/wwdc/2014/)

На западе этот контроллер иногда называют "Hamburger Menu Controller", за внешнее сходство иконки :) У нас прослыл бутербродом.

0

Если кратко - они не будут публиковать приложения с меню?

0

Если кратко - конечно будут, не беспокойтесь :) Просто их рекомендация.

0

Уф, у меня чуть не рухнуло полмира... (зачеркнуто) проекта...)))

0

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

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

Так что, прежде, чем что-то рекомендовать тем более ультимативно, нужно смотреть конкретно на приложение, аудиторию и другие детали.

0

у меня на самсунге образовалась протертость на экране от большого пальца :D

0

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

Кажется, что это классический trade-off между простотой использования и функциональностью.

0

То есть плевать на владельцев фаблетов?
Я думаю, они тоже люди и о них надо думать

0

А зачем они их себе покупают, а потом мучаются?

0

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

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

0

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

Это каким феерическим тормозом нужно быть, что-бы не уложиться в таймаут?!

0

Это скорее для дизайнеров, нежели для разработчиков. Однако, имхо, не может быть единого UX даже для одной линейки устройств (киваю на iPhone), чего уж говорить об Android-устройствах, а значит как не крути, но каждая часть юзеров будет по-своему использовать возможности экранов.

0

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

Сейчас обсуждают
Vsevolod Volchansky
Chat Helpdesk

Ему про Фому, он про Ерему))

«Тинькофф банк» анонсировал открытие сети центров разработки
0
FrostBite
ProGamer.ru

Всем. Я за нацию технологий и творчества.

Власти России намерены снизить беспошлинный порог для ввоза интернет-посылок до 500 евро с середины 2018 года
0
Alex Samoylenko

Кандидатам на лучшую мобильную игру в Минске передает привет лучшая мобильная игра в Минске) шучу) Андрей, Ксения, вы молодцы! Игра крутая.

Mushroom Wars 2: рассказ российских разработчиков о том, какой путь прошла игра от концепта до релиза
0
reggaejunkiejew

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

Дом, который построил Питер Тиль
0
Anton Kuchumov
WorkOut

Спасибо, из всего списка как раз хотел начать с неё.

Лучшие книги 2016 года — выбор Билла Гейтса
0
Показать еще