Мобильный интерфейс для одной руки

    В своей книге Designing Mobile Interfaces (2011) дизайнер Стивен Хубер ввел понятие The Thumb Zone («зона большого пальца») — область экрана, наиболее удобная при использовании телефона одной рукой. С года издания книги средний размер смартфона заметно увеличился, и «мертвая зона» — область, которую сложно достать пальцем одной руки, — также стала больше.

    «Зона большого пальца» для 5–4,7-дюймового экрана, если держать телефон в левой и в правой руке, соответственно. Изображение основано на публикации Скотта Хэрффа.
    Изображение. «Зона большого пальца» для 5–4,7-дюймового экрана, если держать телефон в левой и в правой руке, соответственно. Изображение основано на публикации Скотта Хэрффа.

    В «мертвую зону», отмеченную красным, попадают панели инструментов приложений, которые как в Android (App Bar / Primary Toolbar), так и в iOS (Navigation Bar) находятся в верхней части экрана.

    На некоторых Android-телефонах была предпринята попытка решения проблемы «мертвой зоны». Например, Samsung S4 и LG G Pro 2) поддерживают режим One-handed Mode: интерфейс телефона пропорционально уменьшается и прижимается к нижнему углу экрана. Похожая функция появилась в iPhone 6: в режиме Reachability интерфейс смещается вниз экрана, сохраняя свои размеры по ширине.

    Режим One-hand Mode на некоторых Android телефонах и режим Reachability на iPhone 6.
    Изображение. Режим One-hand Mode на некоторых Android телефонах и режим Reachability на iPhone 6.

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

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

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

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

    На телефонах Android в область «мертвой зоны» попадает кнопка вызова бокового меню (Navigation Drawer) — открыть это меню также можно свайпом от левого края телефона.

    Боковое (главное) меню (Navigation Drawer) в Android и функция Navigare with a swipe («Навигация смахиванием») в iOS.
    Изображение. Боковое (главное) меню (Navigation Drawer) в Android и функция Navigare with a swipe («Навигация смахиванием») в iOS.

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

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

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

    Концепция мобильного интерфейса для одной руки. Свайп от края телефона активирует функцию, обозначенную иконкой на панели инструментов с соответствующей стороны телефона. В данном случае — создание нового сообщения в iOS Messages и возвращение назад к списку сообщений.
    Анимация. Концепция мобильного интерфейса для одной руки. Свайп от края телефона активирует функцию, обозначенную иконкой на панели инструментов с соответствующей стороны телефона. В данном случае — создание нового сообщения в iOS Messages и возвращение назад к списку сообщений.

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

    Концепция мобильного интерфейса для одной руки. Свайп от правого края телефона активирует функцию, обозначенную правой иконкой на панели инструментов. В данном случае — контекстное меню письма в Android Gmail.
    Анимация. Концепция мобильного интерфейса для одной руки. Свайп от правого края телефона активирует функцию, обозначенную правой иконкой на панели инструментов. В данном случае — контекстное меню письма в Android Gmail.

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

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

    Концепция мобильного интерфейса для одной руки. Свайп от края телефона активирует функцию, обозначенную иконкой на панели инструментов с соответствующей стороны телефона. В данном случае — поиск по письмам в Android Gmail и возвращение назад к списку писем.
    Анимация. Концепция мобильного интерфейса для одной руки. Свайп от края телефона активирует функцию, обозначенную иконкой на панели инструментов с соответствующей стороны телефона. В данном случае — поиск по письмам в Android Gmail и возвращение назад к списку писем.

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

    Использование свайпа от левого и правого края телефона для активации функций верхней панели инструментов легко применимо как для iOS, так и для Android. Более того, подобный функционал в отношении левой стороны уже частично реализован на обеих платформах. Такое интуитивно-понятное поведение имеет все шансы стать стандартом мобильных интерфейсов.
    i-Free Group
    0,00
    Компания
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +22
      А можно просто перестать увеличивать размеры экранов.
        +2
        Я тоже так думал пока сам не попробовал пожить с большим экраном. Конечно, смотря что считать большим. 5 дюймовые уже перестали быть «большими» и стали скорее «стандартными» — прекрасный размер, но весь верхний бар в мертвой зоне.
          +4
          Интересно, я один считаю, что телефоном/мобильником можно считать только с экраном до 4", Иначе это если не планшент, то что-нибудь другое, противоречащее понятию мобильности, несмотря на идентичный функционал.
            0
            Вы правы. Телефонов и мобильников больше нет — функцию звонить, мне кажется, мы все используем меньше всего. Все это больше не телефоны. Все это — Персональные (с большой буквы) компьютеры.

            Если вы имеете отношение к мобильной разработке и/или интерфейсам рекомендую вам попробовать что-нибудь чуть-чуть побольше в течение пару недель. Для опыта. Не совсем большое, а что-нибудь, что вмещается к карман ваших джинс. Что-нибудь около 5 дюймов. Я раньше был такого же мнения как и вы.
              0
              А при чём тут звонки вообще? Звонили до распространения электронных телефонных аппаратов с дисковых телефонов с огромными трубками, которые можно удобно держать плечом. Карманы разные бывают, это не только здоровенные карманы джинс и курток, в которые некоторые даже семидюймовые планшеты умудряются запихивать, но и нагрудные карманы рубашек, например, да и в большом кармане может лежать что-то ещё. По-настоящему мобильный аппарат можно держать в ладони (не на ладони, рискуя уронить на ходу, а сжав фалангами пальцев), и даже быстро спрятать в рукаве. Зачем лишаться такой возможности? Ради возможности чуть меньше скроллить? Запихивать гуйцы в стиле гигантизма, в которые можно спьяну тыкать сосиской, вместо более удобных и эффективных, но менее легкоосваиваемых способов управления?

              К слову, всё то, что маркетолухи кличут «телефонами», как минимум со второго поколения технически является компьютерами. Потому что GSM/CDMA — сложные цифровые стандарты, которые аналоговые устройства и невычислительные электронные устройства попросту не потянут при вменяемом уровне компактности (и компьютеров в поддерживащих их устройствах как минимум два — один модем, а второй с ним и с пользователем базарит :D). Вот только производители намеренно ограничивают возможности для устройств низкого ценового семейства, чтобы не отпугивать пользователей обилием возможностей и колотить бабло в сервисных центрах даже на таких банальных вещах, как заливка локализации. Хай-энд же доайфоновской эпохи (Maemo, Windows Mobile), даже несмотря на смехотворную что по тем, что и по нынешним временам мощность, является довольно универсальным. Жертвы нынешней эпохи лопатоуравниловки, как ввиду технических характеристик, так и ввиду особенностей API современных мобильных операционных систем, пригодны лишь для узкого круга потребительских задач, остальное делается через костыли и извращения.
          +3
          Можно. Только покупать не будут. Большой экран смартфона == не надо планшет, и он всегда с собой. Карты, кино, сайты, книги — всё это комфортнее читать с большого экрана. Можно держать экран дальше от глаз, глаза меньше устают.
            0
            А куда батарейки спрашивается большие прятать?
              +2
              В интернете скоро будут популярны объявления «Enlarge your finger now!» :-)
                0
                А что, это идея для стартапа: наладить производство увеличительных насадок на большой палец.
                Опыт перенять у секс-индустрии.
              +1
              просто перестать увеличивать размеры экранов

              Зачем? А мне вот не нравятся маленькие экраны, но ведь я не мечтаю о прекращении их продажи.
              Я что хочу сказать: если вам не нравятся телефоны с большими экранами — не покупайте их. Есть полно моделей с маленькими экранами. Да, возможно у них меньше аккумулятор или они слабее, но ведь нужно чем то расплачиваться за компактность.
              Другими словами проблема современных лопат не в их размере, а в плохом интерфейсе или даже в не подходящих правилах построения интерфейса в приложениях. О чем автор статьи по моему мнению и рассказывает.
                0
                Так оно и есть. Айфоны 5s все еще продаются… хотя с текущим курсом удлинить палец как-то даже привлекательнее будет.
                  +2
                  Проблема не в том что не делают.
                  Проблема в том, что толком нет ни одного «флагмана» с небольшим размером экрана. Все эти mini и nano — это откровенно дерьмовые телефоны в похожем на флагман корпусе.
                  То есть: хреновая сборка, глючное ПО, маленькое коммьюнити на XDA (разрозненное по отдельным моделям сообщество) и как следствие — кривые кастомные билды, никаких обновлений до последнего андроида.

                  Я месяц назад искал себе телефон. У старого начал деградировать контроллер батареи, поэтому вариантов не было.
                  Три, всего три требования:
                  -экран от 3.5 до 4.5 дюймов (точнее привязка к габаритам, но по экрану примерно можно судить точные размеры)
                  -не скрипящий корпус
                  -обновление до Android 5 (или обещание обновления)

                  Под это требование подошел всего, черт возьми, один телефон: xperia z1 compact. Еще почти подходил z3 compact, но они почти по всем спекам совпадают (экран больше при таком же корпусе), и мне чисто внешне z1 понравился.
                  Больше ни у кого из производителей нет телефона, который будет нормально обновлен до последней версии андроида, и при этом не будет торчать из кармана.
                  Вообще нет.
                +2
                Всегда удивляли эти дурацкие правила — располагать контролы в неудобных местах (сверху и слева).
                  +2
                  Скорее всего, когда их придумывали, все было гораздо проще: деревья были большими, а экраны — маленькими. )
                    0
                    Костя, ты пользуешься большим экраном сейчас??? если размещать контролы снизу, то ты подушечкой большого пальца вечно нажимаешь случайно на эти контролы. У меня со всеми моими большими андроидами была такая проблема.
                    Кроме того, внизу находится клавиатура, которая тоже реагирует как на свайп, так и на нажатие, если под ней будут контролы — тоже плохо.

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

                  При этом в нужный момент жест не желает распознаваться ни в какую!
                    0
                    Согласен с вами — действие свайпа всегда должно быть очевидным и интуитивно-понятным. Именно поэтому предлагаю такое правило — свайп всегда должен делать только то действие, которое обозначено иконкой с соответствующей стороны панели инструментов. В таком случае для вас не будет сюрпризов. Про корректное распознавание — это проблема конкретной реализации.
                      –5
                      Попользуйтесь iOS, там нет таких детских болячек про разношерстные действия без предупреждения и, уж тем более, «жест не распознался» — век резистивных экранов прошёл :)
                        0
                        Я пользуюсь современными флагманскими телефонами на андроид, вроде htc one. вы считаете это плохим телефоном?
                          0
                          iOS8, Safary. Мультитач жест закрытия приложения и перехода на другое приложение (пятернёй) чаще всего не распознаётся, вместо этого Safary открывает просмотр открытых вкладок. Вот это действительно раздражает сильно.
                            0
                            да, блин!!!
                            Я думал я один дебил криворукий.
                        0
                        Есть альтернативное решение. Можно держать смартфон не обхватив ладонью( как молоток?), а положив его на пальцы таким образом чтобы средний палец был под серединой левой стороны смартфона, даже не выходя за край. При таком удержании можно дотянуться большим пальцем до любой точки на экране. Возможно без опыта такое удержание кажется ненадежным, но при ситуации когда телефон может выпасть большой палец рефлекторно прижмет его к остальным пальцам. Возможно не подходит для моделей со скользкой задней крышкой.

                        Я пользуюсь серией galaxy note с момента ее появления. Значительную часть времени проводил использую его в метро, причем благодаря тому что в Петербургском метро доступен 3G почти во всех тоннелях использование не ограничивалось книгами или фильмами.
                          +2
                          Возможно. Только проще сделать понятный интерфейс, чем учить всех «правильно» держать смартфоны. ;)
                            0
                            Точно не проще. Если вдуматься, конечно
                            0
                            большой палец рефлекторно прижмет его к остальным пальцам
                            Нажав на экран?
                            +2
                            Проблема, которой не существует. Главная картинка поста нарисована исходя из идеи о том, что телефон должен правым нижним углом упираться в ладонь. С чего бы!? Не знаю никого, кто бы держал смартфон именно так. Сам обычно придерживаю низ смартфона мизинцем, а если надо дотянуться до верхнего бара — убираю мизинец и смещаю телефон на трех пальцах вниз. Проблемы нету. Труба — SGN2.
                              +2
                              Проблема общепризнанна на уровене производителей телефонов. Они даже специальные режимы делают: One-hand Mode на некоторых Android телефонах и Reachability на iPhone 6.
                                0
                                То, что кто-то делает что-то, не значит, что это «что-то» кому-то реально нужно. Я использую режим «одной руки» на клавиатуре, что действительно удобнее, чем полноразмерная. С другой стороны, на маленьких клавишах свайп хуже работает, что вынуждает набирать слова заново. Сколько людей, которые пользуются самсунгами, в курсе про такую опцию? Думаю что сказать «меньше половины» будет огромным преувеличением. Сколько людей покупают телефоны с большими экранами, чтобы смотреть потом в половину от размера экрана? Думаю, таких совсем нету. Сколько возрастных людей, чья жизнь прошла параллельно с парадигмой «элемент управления — кнопка или тумблер», воспримут все эти нововведения со взмахами туда-сюда от края экрана или от середины или от 3/4...? Все эти свайпы на данный момент это просто игрушка, с которой хочется поиграть программистам. Тот же гмыло клиент. Можно письмо «смахнуть» влево и вправо из списка. Что произойдет по этим свайпам? Сделай — узнаешь. Есть один простой принцип: одно и то же действие должно всегда вызывать одну и ту же предсказуемую реакцию. Лучший пример — правый клик мыши. В подавляющем большинстве случаев он вызовет контекстное меню где и как бы ты этот клик не сделал.
                                  –1
                                  Я тоже предлагаю одно и то же действие для одного и того же ожидаемого результата: что написано слева на тулбаре, то и делает свайп от левого края. Что написано справа — делает свайп от правого края. Про принятие нововведения: никто не заставляет им пользоваться и не отменять обычного поведения — кнопка на тулбаре по-прежнему нажимается и тоже осуществляет это действие. Кому как проще, то так и будет делать. Предложенное решение никак не навредит тем, кому и так удобно.
                                +1
                                Главная картинка поста нарисована исходя из идеи о том, что телефон должен правым нижним углом упираться в ладонь.

                                А ещё при таком удержании появляется мёртвая зона в этом самом углу, т.к. не получится большой палец на столько согнуть. Хотя там обычно элементов управления не располагают.
                                  0
                                  Я и iphone 5s мизинцем подпираю, как-то удобно так.
                                  +2
                                  создание нового сообщения в iOS Messages и возвращение назад к списку сообщений.

                                  В iOS жест «свайп влево на элементе списка» традиционно показывает кнопку «удалить». Как в вашем режиме удалить сообщение?
                                    –1
                                    Свайп влево по элементу и свайп от левого края телефона — это совершенно разные свайпы, которые на практике трудно перепутать. Попробуйте в iOS Mail в списке сообщений сделать свайп влево по элементу (отметить прочитанным), вправо по элементу (удалить) и свайп от левого края (возвращение в список почтовых ящиков). Соответственно, я предлагаю и правый край тоже задействовать под действие, обозначенной на панели инструментов с правой стороны.
                                      +1
                                      И каждый раз как по минному полю тягать экраны — чтобы письмо случайно в архив не отправить?
                                        0
                                        Вы iOS Mail или Android Gmail пользуетесь? Там свайп по элементу влево/вправо удаляет/отмечает прочитанным элемент, а свайп от левого края возвращает назад (iOS) и открывает главное меню (Android). Не вызывает же проблем, правда?
                                          0
                                          Я пользуюсь iOS Mail, но до вашего комментария о возможности свайпа от края экрана даже не подозревал. Имхо, нажать на кнопку «назад» в заголовке все равно удобнее и надежнее.
                                            0
                                            Если у вас четверка. Если пятерка, то уже не очень удобно. А про шестерку и говорить не стоит. www.apple.com/ru/iphone-6/tips/ — см. блок «Навигация смахиванием». Свайп от края для возвращения назад работает почти во всех приложениях. Попробуйте пару дней, а потом отпишитесь. ;)
                                    +1
                                    Нижний правый угол (для правши) тоже не слишком-то удобен для нажатия (или у меня слишком длинные пальцы?) :-)
                                      0
                                      Картинка зависит о того, как держать телефон. Если взять его выше, то под пальцем тоже появляется мертвая зона. Если держать ниже, то будет как на картинке. Автор картинки основывался на статистике — он наблюдал как держат телефоны пользователи.
                                        0
                                        Я левша, но держу телефон в правой руке (как и мышку). Отмеченную область нажимаю большим пальцев, согнув его во всех суставах.
                                          +3
                                          Так вы взяли картинку для левой руки. Как раз для левой руки на этой картинке зона в левом нижнем углу помечена как wo
                                            +2
                                            Верно, виноват. Снимаю притензии :-).
                                          0
                                          У меня на 5" мертвая зона чуть-чуть вверху в противоположном крае от большого пальца экрана. Если хват неудобный, или телефон надо держать крепко, или рука мокрая или грязная — нажимаю носом.
                                            –1
                                            Мне вставить сюда ролик с примерами интерфейса Sailfish или сами посмотрите? :) Вот реально там во всех нативных приложениях и свайп вниз-вверх и влево-вправо используется. И свайп из-за границы экрана, причем не только слева и справа, но еще и с верху и снизу.
                                              0
                                              Спасибо, это интересный пример. На iOS/Android тоже есть примеры приложений, полностью построенных на свайпах. Эти приложения, как и Sailfish, предлагают что-то координально новое. В посте же предлагается эволюция, которая никак не навредит пользователям, привыкшим к существующим интерфейсам.
                                              0
                                              > приложения от Google для iOS чуть ли ни единственные, которые не поддерживают свайпы для возвращения назад.

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

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

                                              Самое читаемое