Переосмысление «хорошей» функциональности с сенсорными экранами

Возьмите следующую страницу в качестве примера (возможно, только в Firefox):

firefox plugins hover, in firefox

Когда вы наводите курсор на каждый результат поиска, появляется кнопка «+ Добавить в Firefox».

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

Кнопка всегда может отображаться независимо от зависания. Однако тогда у вас будет длинная строка с идентичными кнопками «+ Добавить в Firefox» вниз по странице.

firefox plugins touch (mockup)

75 голосов | спросил eoinoc 23 32011vEurope/Moscow11bEurope/MoscowWed, 23 Nov 2011 14:52:03 +0400 2011, 14:52:03

7 ответов


49

Люк Вроблевски рассматривает эту тему в своей книге Мобильный первый

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

  

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

Заменить прямыми действиями

  

... принятие действий и информации из наводящих меню и их размещение   прямо на экране может быть правильный подход. Это   решение Twitter использовалось в их оригинальном мобильном веб-интерфейсе.

Здесь он ссылается на то, что Favorite, Retweet и Reply всегда видны с помощью знаковой кнопки вместо кнопки наведения.

Заменить с помощью контекстных меню

  

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

Заменить на отдельной странице

  

Если содержимое внутри зависания является обширным, лучше всего двигаться   что находится внутри меню наведения на отдельный экран на мобильном устройстве. Это   подход, используемый Barnes & Благородный

Здесь он ссылается на панель наведения с информацией о товаре и кнопкой «добавить в корзину», которая перемещается на отдельную страницу на мобильной версии (и которая позволяет добавлять дополнительные опции в процесс).

Удостоверьтесь, что вы накрываете

  

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

ответил Roger Attrill 23 32011vEurope/Moscow11bEurope/MoscowWed, 23 Nov 2011 16:11:42 +0400 2011, 16:11:42
12

Разделите элемент списка. Что-то вроде метки слева и кнопки справа.

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

введите описание изображения здесь

На сенсорных устройствах нет никакой замены наведения. По крайней мере, не для всех типов сенсорных устройств.

ответил Octavian Damiean 23 32011vEurope/Moscow11bEurope/MoscowWed, 23 Nov 2011 15:05:29 +0400 2011, 15:05:29
6

Клиент Twitter, который я использую на Android, называется Plume. Он отлично справляется с заменой наведения:

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

ответил James B 18 J000000Wednesday12 2012, 00:35:22
5

Строго как пользователь, те люди, которые заменили 'hover' на 'long-press', облегчили мне жизнь.

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

ответил atroon 17 J000000Tuesday12 2012, 21:40:58
2

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

Один из способов достижения сенсорной поддержки - подражать тому, что, например, phpMyAdmin делает: выбирает объекты и предоставляет один набор кнопок (по одному для каждого действия):

От www.reg.ca/faq/phpmyadmin8.gif (Действия доступны после текста «С выбранным:». Можно использовать радиокнопки, если можно выбрать только один объект.)

Альтернативным решением является использовать drag'n'drop, так как это работает как с мышкой, так и с сенсорным экраном (с очевидным ограничением взаимодействия с клавиатурой - угадайте, что у вас не может быть всего этого. )

Чтобы сохранить взаимодействие существительное-глагол, существительное (объект) должно быть перетаскиваемым (droppable на глаголе (действие)):

[List item 1]          +-------------------+
[List item 2]          | Drag onto action: |
[List item 3]          | [Install]         |
[List item 4]          | [Other action]    |
[List item 5]          +-------------------+
[List item …]
[List item N]

Целевые показатели («Перетащить на действие») должны сохранять свое положение на странице во время прокрутки (position: fixed). Это почти так, как canv.as реализовала функциональность «наклейки» (noun = sticker, verb = upvote target post ):

От geektechblog.com/wp-content/uploads/2011/03/Stickers.png

ответил jensgram 23 32011vEurope/Moscow11bEurope/MoscowWed, 23 Nov 2011 17:15:26 +0400 2011, 17:15:26
1

Вы можете показать кнопку «+ Добавить в Firefox» светло-серого цвета, а когда вы нажмете ее, покрасьте ее и перейдите на следующую страницу.

Или вы можете работать с двумя кранами. При нажатии на элемент списка (в любом месте в списке) кнопка «+ Добавить в Firefox» получает свой цвет, а затем вы можете вставить его второй раз, чтобы перейти на следующую страницу.

ответил ueberkim 23 32011vEurope/Moscow11bEurope/MoscowWed, 23 Nov 2011 15:14:59 +0400 2011, 15:14:59
0

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

<style>
    a { color: #ffffff; /*Blends into the background for this example*/ }
    a:hover { color: #000000; /*Shows up on Hover*/
</style>

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

@media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)
    {
        a { color: #000000; text-decoration: underline; }
    }

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

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

Для элементов детского меню я всегда делаю вывод, что элементы верхнего уровня переходят на страницу и не являются фиктивными элементами. В этом случае у многих людей возникают проблемы, потому что все они хотят следовать определенной тенденции иметь свои родительские ссылки только заполнители. они использовали для борьбы: hover psuedo для IE6, чтобы заставить их заполнители правильно навестить. Теперь все они должны переосмыслить это. Поэтому просто переместите элементы верхнего уровня на страницы портала, которые пользователь может перейти к детям после их прибытия. Это дополнительная страница для загрузки для пользователя, но если у вас сотни страниц, это может быть ваш единственный вариант.

ответил o_O 3 AM000000120000000731 2012, 00:02:07

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132