{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u043b\u044e\u043a_\u0432\u0440\u043e\u0431\u043b\u0435\u0432\u0441\u043a\u0438","iphone_6_plus","\u0431\u043e\u043b\u044c\u0448\u0438\u0435_\u044d\u043a\u0440\u0430\u043d\u044b"], "comments": 19, "likes": 13, "favorites": 2, "is_advertisement": false, "section_name": "default", "id": "5541", "is_wide": "1" }
Alexander Lashkov
4 686

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#Интерфейсы #интерфейсы #люк_вроблевски #iPhone_6_Plus #большие_экраны

Статьи по теме
Разработчики не боятся увеличения экрана нового iPhone
Подсказки в интерфейсе: сложность адаптации под различные типы устройств
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } } ]