Усовершенствование взаимодействия с маленькими контролами посредством touch-интерфейса

    Читая обычный сайт с телефона или планшетного компьютера с touch-интерфейсом я постоянно промахиваюсь мимо нужных ссылок и мелких контролов.

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

    На месте разработчиков мобильных интерфейсов я бы сделал следующим образом.

    image

    В основе решения лежат некоторые реализации экранных клавиатур и quad-menu, которые присутствуют во многих редакторах трехмерной графики.

    Всех с наступающим!

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 7 559 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

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

      –5
      Стоп-стоп-стоп. А если я хочу попасть на уже посещённую ссылку? Они же у вас, как я понял, не подсвечиваются? Хотя идея отличная.
        +3
        А в чем разница? Механически берутся любые элементы интерфейса рядом с пальцем, если ссылка была посещенной, то увеличится, сохранив стиль посещенной ссылки.
          +2
          Нестандартное использование ссылки, и все поплыло.
            +1
            Меня смутило то, что на первой картинке у вас 4 ссылки подсвечены примерно так же, как и непосещённые ссылки, поэтому не сразу понял, что вы имели в виду.
          +1
          В тему для дискуссий бы ввел способ удобно увязать контекстное меню нужной ссылки: «открыть в новом окне», «копировать в буфер обмена» и т.д. с таким увеличением.

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

            А еще можно выводить ссылку «контекстное меню» при зажатии пальцем, как у вас:
              0
              Не все люди будут пользоваться такой усложнённой системой (мультитачевой) ради контекстного меню. Просто не смогут (запомнить, привыкнуть и т.п.).
                0
                Разве это так сильно отличается от пкм? Одинарное нажатие — открыть ссылку, одинарное зажатие + тап втором пальцем- КМ. Что здесь сложного-то?
                  0
                  Сильно. Некоторые не могут даже ту пресловутую ПКМ освоить, да. И они пользуются компьютером и никто не вправе им запретить. Вы видели, как некоторые тётечки и дядечки, да что там, молодые парни и девушки пользуются смартфонами и планшетами? Случайное касание запястьем экрана, которое приводит к неожиданному результату, они воспринимают как глюк и просто не понимают, что происходит. Массовый пользователь не гик всё-таки, хотя этого хотелось-бы. Опера делает всё достаточно нативно, к примеру. А ваш метод требует заранее знать комбинацию.
                    +1
                    Как вы тапнете вторым пальцем держа телефон в одной руке, а во второй — поручень автобуса шатающегося во все стороны? Правильный ответ — никак.

                    Компромиссный вариант реализован в браузере Opera Mobile — при тапе на группе мелких ссылок часть экрана с ними зумится до того уровня, пока по ним не будет удобно нажать.
                      0
                      А рядом второй вариант со скриншотом, который избавляет от необходимости второго тапа.
                      Никто ведь не мешает ситуационно пользоваться тем или иным способом.
              +5
              а помоему вполне отличный способ, но по мне — такие вещи должны быть функционалом браузера а не конкретного сайта.
                +1
                Способ плох, потому что пальцем руки ты будешь закрывать это подменю. Особенно сложно будет читать что под пальцем на смартфонах.
                +6
                Посмотрите как сделано у OperaMini для iOS. При клике по ссылке она увеличивает контент до уровня когда можно по любому элементу попасть пальцем.
                  0
                  под андроидом опера мини так же себя ведет
                    0
                    Да, там зум при клике очень удобный в версии под windows mobile весьма нравилось.

                    На всякий случай видео уже под iOS, где показано как реализовано у нее:
                    www.youtube.com/watch?v=_D_ApXR5r0A&feature=fvst
                      0
                      Тоже на ум сразу Опера пришла.
                      +7
                      Opera Mobile — всегда умела подсвечивать соседние элементы, если под пальцем их как бы несколько может быть. То есть при клике она увеличивала немного страницу, и выделяла соседние элементы оранжевой рамкой, чтобы при повторном клике уже точно можно было попасть куда надо. :)
                        +3
                        Автор изобрёл способ увеличивать ссылки, не увеличивая масштаба страницы. Мне почему-то его идея кажется куда более удобной, чем способ Оперы, т.к., если случайно ткнул пальцем в груду ссылок, то последствий никаких. Если в Опере потом попытаться отмасштабировать картинку назад, она вернётся на масштаб по умолчанию, а такой на многих неоптимизированных под телефон сайтах неприемлем, в результате приходится снова его увеличивать. К тому же, иногда порой просто не хочется терять вид страницы в целом, при эффекте приближения могут возникнуть тормоза, и вообще всё такое. Так что я голосую за способ автора :)
                          +1
                          Основной минус этого метода — он показывает только ссылки, а на странице кликабельным и интерактивным может быть вообще любой элемент. Так что масштабирование надёжнее.
                            0
                            текстовые ссылки — только пример, а так выдрать кусок DOM с любым элементом, содержащим хэндлер onclick более чем реально.
                        0
                        Если у сайта есть специальная версия для мобильных, таких проблем не возникает. Поэтому это нужно предлагать не разработчам мобильных интерфейсов, а разработчикам браузеров. По мне, так лучше научить стандартную линзу (я о iOS, не знаю как на android) открывать ссылки.
                          +2
                          а стилусы — это то, от чего мы ушли 5 лет назадИ чего некоторым очень не хватает, особенно в мороз.
                            0
                            Есть для емкостных экранов, но от них в мороз толку еще меньше.
                            +5
                            Не забудь подать патентную заявку.
                              +4
                              Как уже сказали выше — Opera Mobile уже тысячу лет так умеет. (Android)
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  Дык это надо делать не на сервер-сайде, а в клиенте.
                                  Вот опера для андроид начала двигаться в эту сторону. Если тыкнуть где-то между двумя соседними ссылками, то прикосновение рассматривается как неопределенное, после чего страница увеличивается, а ссылки рядом с прикосновением подсвечиваются, тем самым давая возможность тыкнуть более точно по нужной ссылке.
                                    –1
                                    всегда буду читать выше, перед тем как писать…
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        «начала двигаться»? Да у них это чуть ли не с первой мобайл версии, причем не только для андроида.
                                        0
                                        ну эту штуку можно сделать на многих уровнях браузера, обвески браузера или другого мобильного приложения, js/css примочки для мобильной версии сайта. В случае с js потребуется, наверное, еще делать прозрачный элемент с drag-ом, чтобы отследить сдвиг пальца ну или реализовывать с помощью двух кликов.
                                        0
                                        Какое-то время назад тоже думал, как назвать этот тип меню в редакторах, но так и не придумал. Всё-таки между Quad Menu Макса, Marking Menu Маи, Pie Menu Модо, Global Popup Синемы, Radial Menu Интуоса и прочими есть принципиальные отличия, хоть принцип и одинаковый везде (может они патентами какими защищены)
                                          0
                                          При касании ссылка подсвечивается, всё предсказуемо. Если вдруг попали не туда, просто сдвигаем палец. Или это только в сафари так?
                                            0
                                            Ага, подвечивается, но даже на ipad все равно из-под пальца часто какую ни будь кнопку или ссылку из одного слова не разглядеть. Например минус или плюс этому комментарию поставить.
                                            0
                                            Возможна ли такая реализация сабжа?

                                            1. Страничка определяет что загружается на мобильное устройство.
                                            2. Подгружается mobile.css
                                            3. Для списков содержащих ссылки устанавливается «scale» и небольшой «padding» при ":hover"
                                              +1
                                              Только :hover в тач интерфейсах не файрится, или как вы представляете наведение пальца на ссылку?
                                              0
                                              Имхо, лучше не сдвиг а отдельный клик (точнее отдельный тык).

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

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

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

                                                    Хорошая схема, а случается промахиваться при втором нажатии или дважды промахнуться с одной ссылкой?
                                                      0
                                                      Практически никогда не промахивался при втором нажатии, причем на очень мелком тексте.
                                                      Нажимаю подушкой большого пальца особо не целясь т.к. знаю что будет шанс исправить — даже если при втором нажатии промахнешься — выделяется другая ссылка и перехода не происходит. Переход только при втором нажатии на одну и ту же ссылку.
                                                    +4
                                                    Надо сделать прозрачные пальцы нулевой площади.
                                                      +2
                                                      Любое нажатие будет иметь бесконечное давление :(
                                                      0
                                                      Рискну спросить: какой у вас телефон?
                                                        0
                                                        Сейчас motorola droid, был asus p535, плюс ipad на подхвате, так что платформы охвачены хорошо.
                                                          –1
                                                          По личному опыту (Motorola Defy, iPhone 2g, iPhone 4) могу сказзать что на iOS тач реализован как-то более удобнее.
                                                          Т.е даже на минимальном зуме попасть по ссылке нет проблем.
                                                            0
                                                            Странно, я 2 из 3 раз промахиваюсь, хотя жалоб на мелкую моторику пальцев нет.
                                                        +2
                                                        Такой тип ввода будет весьма полезен 1 января утром.
                                                          +1
                                                          Если opera (symbian) не может определить какая именно ссылка была под пальцем, она увеличивает сомнительную область, и выделяет ближайшие к пальцу ссылки (или иконки).
                                                          image

                                                          — более универсальное решение.
                                                            +2
                                                            Помимо универсальности, зум это самое естественное и простое решение.
                                                            0
                                                            Вы предлагаете исправлять не проблему тач-интерфейса, а проблему отсутствия адаптации конкретных сайтов под тач-интерфейсы. И это в корне неверный подход к проблеме.
                                                              0
                                                              Я ничего не говорил про конкретную реализацию. Я описал что я хочу получить.
                                                              Что касается реализации это может быть любой уровень, имеющий доступ к соответствующему api ввода операционной системы:
                                                              1. GUI операционной системы
                                                              2. GUI приложения в т.ч. браузера, но не обязательно.
                                                              3. Движок браузера или любая другая виртуальная среда, в которую был перенаправлен ввод.
                                                              Любое изменение на входе touch проходит много уровней, на многих из которых можно на него отреагировать. Может это быть js библиотека? Да, например из chromium есть нормальный доступ к тачу. Может ли это быть утилита, которая отслеживает активность всего, что реагирует на ввод и осуществляет перехват события? Вполне, зависит от ОС, под WP7 такое можно сделать вполне красиво и работоспособно.
                                                              Реализация вообще может быть без привлечения touch, на нем свет клином не сошелся, работать с точечными кликами и объектами в их радиусе, опять же это можно сделать на любом уровне.

                                                              Но я против адаптации сайтов, даже если технически возможен универсальный js модуль, который вносит такой функционал, он будет недостаточно массовым, чтобы пользование им вошло в привычку. Допустим ctrl+стрелочки в поиске яндекса это очень круто, но решение плохо распространено и надо очень часто посещать yandex, чтобы выучить особую форму взаимодействия, свойственную только этому сайту. Я вообще сторонник того, чтобы веб, не имея веских оснований на обратное, вел себя как w3c сказали.
                                                              0
                                                              Opera, май 2009 года:

                                                              image
                                                                0
                                                                В данном частном случае реализация выглядит даже где-то логичной.
                                                                Но количество неучтенных нюансов сводит на нет весь профит.

                                                                1) Реальная рука и реальный палец НАМНОГО больше.
                                                                2) Короткие ссылки в столбик — слишком частный случай. А что будет со ссылками из 3х и более слов?

                                                                Я согласен с приведенным выше комментарием о том, что автор пытается решить проблему адаптации контента под условия изменением условий. Говорить, что Touch-интерфейс несовершенен по меньшей мере неправильно, потому что нативнее «тычка» пальцем разве что взгляд в нужную область.
                                                                ИМХО сейчас контент еще далеко не приспособлен к touch-интерфейсам в принципе. Слишком силен в сознании классический подход к проектированию и управлению, с метафорическими указателями (мышь, мигающая каретка, клавиши курсора).
                                                                Я не могу рассказать КАК ПРАВИЛЬНО, потому что все еще не отличаюсь от большинства проектировщиков с этим укоренившимся сознанием. Но мне опять же кажется, что те кто станут заниматься интерфейсами через год или те кто только начали сейчас будут уже намного более приближены к истине.

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

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