Hover е мъртъв, да живее hover

Започна с разговор преди три години, когато iPad излезе.

Продуктовият директор на голям онлайн търговец в Обединеното кралство каза: „Разбира се, ще трябва да поправим страницата за избор на продукти. Той разчита на навеждането, за да покаже важни подробности за продукта, потребителите на iPad няма да могат да го видят. '



Използването на курсора на мишката, визуална реплика за указване на възможно взаимодействие или за показване на допълнителна информация, вече не беше подход за iPad и други потребители на сензорен екран.



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

Hover е мъртъв

Превъртане напред към 2013 г. Продажбите на сензорни устройства се увеличиха значително. Те са сега очаква се броят на продажбите на настолни и традиционни преносими компютри да бъде по-голям до 2014 г. .



Windows 8 взе интерфейса на Metro от мобилен телефон. Mac OSX все повече възприема сигналите си от мобилната операционна система iOS. Нито една от операционните системи не е възприела изцяло докосването, но и двете са започнали да се отдалечават от подход на точка и щракване към един от големите цели, базирани на кликване и бутони.

Интерфейсите със сензорен екран задават очакванията. Партизанска ръка или не , има желание за сензорни екрани на устройства .

Превъртането през менютата, придвижването между опциите с клавишите на курсора или чрез гласово управление, интелигентните телевизори, игровите конзоли, Google Glasses и други интернет уреди не разчитат на показалеца на мишката. Hover няма място на този свят.



къде е панелът на търсачката в илюстратора

The тенденцията е ясна ; point and click намалява, кликването (било то с пръст, стилус, клавишна комбинация, дистанционно управление, гласов контрол) се увеличава. Ние като дизайнери вече не можем да разчитаме на използвания показалец. Следователно не можем да разчитаме на вездесъщият хоувър в мрежата.

Използването на курсора на мишката за показване на повече информация за хипервръзка, или за даване на контекст, или за активиране на падащо меню на работния плот е било добра практика в продължение на много години. Устройствата със сензорен екран не се справят добре с навигацията или дори изобщо.

Apple са се опитали приложи курсора на мишката в iOS . Кликнете веднъж, за да активирате курсора на мишката, кликнете отново, за да активирате връзката, но някак не изглежда като най-добрия подход. Или в случая на Android щракнете, вижте поведението при задържане на курсора, докато браузърът зарежда страницата с хипервръзка.

Hover също приема, че използваме мишка, използване: фокус върху курсора на мишката означава, че можем да се обърнем към потребители, които поради причини за достъпност не могат да използват мишка.

Ако разработваме отзивчив уебсайт за дизайн, използването на hover изглежда като анатема. Трябва да развиваме опит, който да работи на всяко устройство, дизайнът трябва да е агностичен.

Да живее ховър

Това е основен дизайн от години. Използването на курсора на мишката за показване на елемент може да се кликне, за бързо разкриване на полезна информация и, разбира се, за задействане на падащото меню за навигация.

Настолните интерфейси, които не се докосват, все още са основен начин за достъп до мрежата поне в САЩ и Европа с 87 процента от използването на мрежата на настолни компютри.

Hover може да се използва за по-голямата част от аудиторията, която през годините са го използвали .

Стандартният подход в продължение на много години при проектирането на падащо меню за навигация е да показва опциите при задържане, за да помогне за откриваемост и да имитира начина, по който менютата се държат в Windows.

Те са често срещано място в уебсайтове като Best Buy, Маркс и Спенсър и други.

колко струва dr fone

Бихме могли да променим подхода. Активиране на падащото меню при щракване, вместо да задържите курсора на мишката. Но това не се чувства правилно, противоречи на откриваемостта, присъща на зависването. Ти попитайте потребител при тестване какво ще се случи, когато щракне върху опция в горното ниво на менюто и те ще кажат, че очакват да бъдат отведени на страницата, съответстваща на тази опция, а не да им се показва падащо меню.

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

Защо да ограбим повечето потребители от метод за взаимодействие, който е толкова полезен и често е очакване?

Какво да прави дизайнер?

В момента сме в повратна точка. Каквото и да правим, ще бъде погрешно в краткосрочен или дългосрочен план.

Гледането в бъдещето и неизползването на курсора на мишката ще причини болка на повечето потребители днес или ще причини болка на нарастващата база потребители на сензорен екран. Предлагане на взаимодействия при задържане само на тези, които използват настолни компютри / лаптопи, които бихме могли да считаме за прогресивно подобрение .

Но какво да кажем за хибридните устройства като Microsoft Surface, които предлагат едновременно докосване и мишка / клавиатура? Можем ли да знаем точно какъв метод на въвеждане се използва?

Простите медийни заявки не са достатъчни, за да се знае какво взаимодействие е възможно. Има предложение за идентифициране дали потребителски агент може да използва курсора на мишката предложена от W3C, но в момента през 2013 г. не можем да сме сигурни дали някой използва мишка или пръст или комбинация от двете.

Итън Маркот в оригиналната си статия за отзивчив дизайн казва, че „ние проектираме работа, предназначена да бъде разглеждана по градиент от различни преживявания.“

Предлагането на различни стилове на взаимодействие в зависимост от устройството изглежда като тъмните дни на насочването на браузъра. Искаме нашите проекти да бъдат агностични за устройства. Ако изградим уебсайт, искаме да направим минимума, за да се уверим, че работи на всяко устройство. Ние можем ощипвам дизайни в различни размери, за да отговори на нуждите, но промяната на стила на взаимодействие по устройство изглежда като старомодно мислене.

Алтернативни дизайнерски модели

Ние като дизайнери трябва да търсим алтернативни дизайнерски подходи.

как да нарисувате котка, използвайки думата котка

Брад Фрост обсъди възможни навигационни модели, които бихме могли да използваме в отзивчив дизайн . Но, както казва Фрост, много от тях са не само сложни, но и нови начини за взаимодействие, изискващи от потребителите да научат нов начин за правене на нещата.

Всяка предложена опция отговаря на различен набор от елементи от менюто и аудитория. Препоръчването на един подход, тъй като бъдещето на уеб менюто не е възможно. Меню за плъзгане от ляво на Facebook работи в контекста на уебсайта, където основният фокус на потребителя е потокът от публикации в центъра на екрана. Придвижването до друга страница е вторично действие. Този подход не би работил за богат на съдържание сайт като вестник, който изисква взаимодействие с меню за намиране на търсената статия. Въпреки че предложената нова Редизайн на Ню Йорк Тайм намалява фокуса върху навигацията.

Разумен подход би бил да се изберат най-малко две алтернативи, които отговарят и да се проведат проучвания на потребителите за всяка, като се избере тази, която работи най-добре за аудиторията. Многовалентно или A | B тестване също може да се използва, за да помогне за избора на най-добрия подход.

Както при уеб навигацията, няма един модел, който да работи във всички ситуации. Изберете 2 до 3 опции, след това проектирайте, проучете и усъвършенствайте.

Използването на курсора на мишката за разкриване на контроли не изисква толкова драматична промяна в подхода. Активиране на тези контроли с едно щракване ще работи на сензорни устройства, но не е очевидно веднага, че едно щракване ще покаже повече информация, а не просто отвеждане на потребителя на друга страница.

Трябва да гарантираме, че елементът има нещо, което показва, че дадено действие е възможно. Всеки елемент се нуждае от пари. Свикнали сме да правим това за връзки, подчертаване или различен цвят, но за разкриване въз основа на кликване нямаме общ визуален подход.

Има опции като използване на икона. Разработването на икона, която предава съобщението, щраквайки тук, ще ви покаже по-голям брой опции е предизвикателство. Бихме могли да използваме по-абстрактни икони като зъбно колело, но това също не носи смисъл. Можем да опитаме да дефинираме икона, която показва, че щракването ще разкрие още действия, но ще трябва да обучим потребителите си за функцията зад тази икона.

как да нарисувате върху изображение в илюстратор

Това е изпробвано с Споделя това икона. Иконата има много сайтове, но разбирането за нейното значение все още е относително ниско.

HTML има етикет, който можем да използваме, за да определим значението на затворено съкращение или съкращение. Не е използвано достатъчно, за да може пунктираното подчертаване на резултатите да бъде широко разбираемо от потребителите.

Какъвто и подход да използваме, за да посочим контроли за щракване за разкриване, ще отнеме време, преди да бъде широко разбран. Както наскоро каза Брандън Харис от Уикипедия, когато говори за редизайн „Можем ли да си позволим да обучим половин милиард потребители?“

Ние също се нуждаем от алтернативни начини за прогресивно разкриване на информация . Вече не можем да сме сигурни, че ако задържите курсора на мишката върху връзка, ще се покажат допълнителни подробности. За щастие тук имаме съществуващи подходи за предлагане на пари.

Показването на разширената информация въз основа на щракване, като се използват различни визуални сигнали, като например дясната карета или иконата плюс, за да се покаже, че разширяването е изпробвано и тествано. Щракнете и преминете към раздел на страница, както се вижда в Bootstrap уеб рамката е алтернатива. Бихме могли да използваме икона за информация „базирана на i“, но прекаленото използване може да доведе до излишен визуален шум.

Да живееш в интересни времена

Като Тим Кук на Apple каза миналата година :

„През последното тримесечие, трябва да кажа, което е само две години след като изпратихме първоначалния iPad, продадохме 67 милиона. И за да го поставим в някакъв контекст, отне ни 24 години, за да продадем толкова много Mac, и пет години за толкова много iPod-и и повече от три години за толкова много iPhone. '

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

Ще се радвам да споделите своя опит и мисли в коментарите. Какво трябва да правим ние дизайнерите?

Възстановяващ се невролог, Джо започнаха UX кариера преди 10 години. Като директор за потребителски опит Джо ръководи екип от UX консултанти. Той е специализиран в проектирането на всеки аспект на потребителския опит от първоначалните изследвания до разработването на онлайн стратегии за производство на телени рамки и управление на дизайнерски екип. www.cxpartners.co.uk/

Хареса ли ви това? Прочетете тези!