transition to ipad - no hover - behaviors unclear - ideas?

14 Jun 2010 - 2:13pm
4 years ago
10 replies
2388 reads
Navid
2010

I was getting into the groove designing web-page interactions where there is a button, and then hover over the button reveals a panel for configuration.
This allowed progressive disclosure, and if the users didn't initially find the panel, it was a-ok.   Hover panels are great for layering.
However, with the i-Pad those nice hovers (which are kinda discoverable) don't exist, instead they turn into a tap.   And then activation of the actual button is a double-tap.
mapping this out
non-iPadclick = activate button or tool or follow link hover = expose panel for details of the tool or config
iPadif onmouseover exists tap = expose panel for details of the tool or configdouble tap = activate button or tool or follow link if onmouseover doesn't exist tap = activate button or tool or follow link 
This is ugly!    Depending on the situation the tap either activates a button, but if there is a hover panel, it activates the panel and it would take a double tap to activate the button.
I'm thinking of replacing hover with a small image adjacent the button which floats open the panel (small because the panel is not so important in everyday use).  Has anyone every seen a graphic for this?   It isn't a drop down, but something entirely different....an explode popup.
Ideas?   

Comments

14 Jun 2010 - 10:05pm
elvenmuse
2010

I think that it is important to note (although I'm not 100% sure), that the technology can be used to simulate hovers: getting near (but not "in touch/contact" with) the MT screen can activate a hover animation.

> I was getting into the groove designing web-page interactions where there > is > a button, and then hover over the button reveals a panel for > configuration.This allowed progressive disclosure, and if the users didn't > initially find the panel, it was a-ok.   Hover panels are great for > layering. > > However, with the i-Pad those nice hovers (which are kinda discoverable) > don't exist, instead they turn into a tap.   And then activation of the > actual button is a double-tap. mapping this out ** non-iPad click = > activate button or tool or follow link  hover = expose panel for details > of > the tool or config iPad if onmouseover exists tap = expose panel for > details of the tool or config double tap = activate button or tool or > follow > link  if onmouseover doesn't exist tap = activate button or tool or > follow > link  This is ugly!    Depending on the situation the tap either > activates > a button, but if there is a hover panel, it activates the panel and it > would > take a double tap to activate the button. I'm thinking of /replacing hover > with a small image adjacent the button /which floats open the panel > (small > because the panel is not so important in everyday use).  Has anyone every > seen a graphic for this?   It isn't a drop down, but something entirely > different....an explode popup. Ideas?     > (((Please leave all content

16 Jun 2010 - 6:05am
James Page
2008

With a touch interface if you hold your finger down is that not the same as a hover? While a tap is a click?

or have I got this wrong?

All the best

James

On 15 June 2010 04:29, elvenmuse <vincenzi@lavabit.com> wrote:

I think that it is important to note (although I'm not 100% sure), that
the technology can be used to simulate hovers: getting near (but not "in
touch/contact" with) the MT screen can activate a hover animation.

> I was getting into the groove designing web-page interactions where there
> is
> a button, and then hover over the button reveals a panel for
> configuration.This allowed progressive disclosure, and if the users didn't
> initially find the panel, it was a-ok.   Hover panels are great for
> layering.
>
> However, with the i-Pad those nice hovers (which are kinda discoverable)
> don't exist, instead they turn into a tap.   And then activation of the
> actual button is a double-tap. mapping this out ** /non-iPad/ click =
> activate button or tool or follow link  hover = expose panel for details
> of
> the tool or config /iPad/ if onmouseover exists tap = expose panel for
> details of the tool or config double tap = activate button or tool or
> follow
> link  if onmouseover doesn't exist tap = activate button or tool or
> follow
> link  This is ugly!    Depending on the situation the tap either
> activates
> a button, but if there is a hover panel, it activates the panel and it
> would
> take a double tap to activate the button. I'm thinking of /replacing hover
> with a small image adjacent the button /which floats open the panel
> (small
> because the panel is not so important in everyday use).  Has anyone every
> seen a graphic for this?   It isn't a drop down, but something entirely
> different....an explode popup. Ideas?    
> (((Please leave all content

(((Please leave all content
16 Jun 2010 - 7:05am
Chris Korhonen
2010

In the context of the iPhone, holding the finger down is more a means of selecting something or invoking hidden functionality, like say a right click on the desktop.

On text it brings up a menu to perform actions, like copy/paste. On images, the same thing, actions like saving.

In some cases it's also used to manipulate the object - so holding finger and dragging.

In Safari, the hover event, if present, is triggered by tapping on an element then the second tap becomes a click. If there is no hover event, the first tap is a click.

This is generally the same with a lot of apps which use this metaphor - a tap reveals information as you would normally see with hovering a mouse cursor.

Chris

On Jun 16, 2010, at 7:30, James Page wrote:

> With a touch interface if you hold your finger down is that not the same as a hover? While a tap is a click?or have I got this wrong?All the bestJames > > On 15 June 2010 04:29, elvenmuse wrote: >> I think that it is important to note (although I'm not 100% sure), that >> the technology can be used to simulate hovers: getting near (but not "in >> touch/contact" with) the MT screen can activate a hover animation. >> >> > I was getting into the groove designing web-page interactions where there >> > is >> > a button, and then hover over the button reveals a panel for >> > configuration.This allowed progressive disclosure, and if the users didn't >> >> > initially find the panel, it was a-ok.  Hover panels are great for >> > layering. >> > >> > However, with the i-Pad those nice hovers (which are kinda discoverable) >> >> > don't exist, instead they turn into a tap.  And then activation of the >> > actual button is a double-tap. mapping this out ** /non-iPad/ click = >> >> > activate button or tool or follow link hover = expose panel for details >> > of >> > the tool or config /iPad/ if onmouseover exists tap = expose panel for >> > details of the tool or config double tap = activate button or tool or >> > follow >> >> > link if onmouseover doesn't exist tap = activate button or tool or >> > follow >> > link This is ugly!   Depending on the situation the tap either >> > activates >> > a button, but if there is a hover panel, it activates the panel and it >> > would >> > take a double tap to activate the button. I'm thinking of /replacing hover >> >> > with a small image adjacent the button /which floats open the panel >> > (small >> > because the panel is not so important in everyday use).  Has anyone every >> > seen a graphic for this?  It isn't a drop down, but something entirely >> > different....an explode popup. Ideas?    >> > (((Please leave all content >> >> (((Please leave all content >> > (((Please leav

16 Jun 2010 - 12:10pm
elvenmuse
2010

If we are basing this concepts on intent of the user, it should be registered as hovering.

> With a touch interface if you hold your finger down is that not the same > as a > hover? While a tap is a click?or have I got this wrong?All the bestJames > > On 15 June 2010 04:29, elvenmuse wrote: >>I think that it is important to note (although I'm not 100% sure), that >>the technology can be used to simulate hovers: getting near (but not "in >>touch/contact" with) the MT screen can activate a hover animation. >> >>(...) >>(((Please leave all content >> >

16 Jun 2010 - 6:05pm
Stefan_Wallin
2010

It is equally, if not more, valid to assume a right click instead of a hover, especially for us from the mac world who on the singlebuttonmouses are familiar to the concept of prolonged click bringing up a context menu. Try it on the dock for example


Stefan Wallin - Festiz Webbyrå
=====================================
0709-529 036 || stefan.w@festiz.com
http://festiz.com || http://twitter.com/Stefan_Wallin



On Wed, Jun 16, 2010 at 10:56 PM, elvenmuse <vincenzi@lavabit.com> wrote:

If we are basing this concepts on intent of the user, it should be
registered as hovering.

> With a touch interface if you hold your finger down is that not the same
> as a
> hover? While a tap is a click?or have I got this wrong?All the bestJames
>
> On 15 June 2010 04:29, elvenmuse wrote:
>>I think that it is important to note (although I'm not 100% sure), that
>>the technology can be used to simulate hovers: getting near (but not "in
>>touch/contact" with) the MT screen can activate a hover animation.
>>
>>(...)
>>(((Please leave all content
>>
>

(
16 Jun 2010 - 10:06pm
elvenmuse
2010

I'm not a big fan of the "right click"... and both actions are very similar (a right click being a "sticky" hovering animation with clickable/active elements).

> It is equally, if not more, valid to assume a right click instead of a > hover, > especially for us from the mac world who on the singlebuttonmouses are > familiar to the concept of prolonged click bringing up a context menu. Try > it > on the dock for example > > Stefan Wallin - Festiz Webbyrå > ===================================== > 0709-529 036 || stefan.w@festiz.com [1] > http://festiz.com [2] || http://twitter.com/Stefan_Wallin [3] > > On Wed, Jun 16, 2010 at 10:56 PM, elvenmuse > wrote: > >>If we are basing this concepts on intent of the user, it should be >>registered as hovering. >> >> > With a touch interface if you hold your finger down is that not the >> same >> > as a >> > hover? While a tap is a click?or have I got this wrong?All the >> bestJames >> > >> > On 15 June 2010 04:29, elvenmuse wrote: >> >>I think that it is important to note (although I'm not 100% sure), >> that >> >>the technology can be used to simulate hovers: getting near (but not >> "in >> >>touch/contact" with) the MT screen can activate a hover animation. >> >> >> >>(...) >> >>(((Please leave all content >> >> >> > >> >>( >> > ((

16 Jun 2010 - 5:03pm
Christopher Rider
2009

iOS interprets a long touch or "press" as a request for a context menu (i.e. right-click in windows), while a short touch or "tap" is like a click.

There is a lot of established documentation on this stuff. A good starting point is Luke Wroblewski's recent work: http://www.lukew.com/ff/entry.asp?1071

cheers!

17 Jun 2010 - 5:44pm
fj
2010

Navid wrote:

was getting into the groove designing web-page interactions where there is a button, and then hover over the button reveals a panel for configuration.
This allowed progressive disclosure, and if the users didn't initially find the panel, it was a-ok. Hover panels are great for layering.

Actually, clicking to show a panel will work too, even on iPads. In fact, tapping on a triangle to show a panel, not hover, is one of the oldest forms of progressive disclosure, and well understood.

I am willing to argue that the iPad is doing us a favor by downgrading hover as a behavior in our vocabulary. Hover was introduced and popularized in tooltipsfor buttons in toolbars, trying to make up for the failure of the buttons to be clear about what they did with their tiny cartoon icon, pointing to the fact that icons and text are necessary.

Some time after JavaScript was introduced into web browsers and made this hover behavior available, webpages started using it as a primary communication behavior, not just a secondary tool to add a little. Buttons started losing their decoration, no longer communicating they were pressable, and pages were turned into these complete labyrinths of light-up text and imagery the hapless user had to chance upon moving their pointer to realize they could do something  there. Yes those 3D Motif / Windows bevels made for a fussy page, but some web artisans really took the clean look too far. Now we are offering users whole panels popping up, oblietarting the page they were looking at, up as the result of a small mouse movement a mere hover. I am really not sure how well that would test with, say, silver surfers.

The iPad is taking this channel to communicate affordance badly away from us. A page, an interface, has to show just from plain viewing again what is clickable and what is not, what is interactive and what is static, and what everything does, at first glance and with clarity. No longer do we have the crutch for sloppy action choices and icon design to say "We'll explain it with a tooltip", and no more can we subvert making function clear for beauty and minimalism. We will have to work harder again to make clear what we are offering.

17 Jun 2010 - 9:05pm
elvenmuse
2010

I mostly agree with this post; even if I like hover animations they aren't usable if used too much.

What are "silver surfers"?

> Navid wrote: > >>was getting into the groove designing web-page interactions where there >>is a button, and then hover over the button reveals a panel for >>configuration. >>This allowed progressive disclosure, and if the users >>didn't initially find the panel, it was a-ok. Hover panels are great >>for layering. >> > Actually, clicking to show a panel will work too, even on iPads. In fact, > tapping on a triangle to show a panel, not hover, is one of the oldest > forms > of progressive disclosure, and well understood. > > I am willing to argue that the iPad is doing us a favor by downgrading > hover > as a behavior in our vocabulary. Hover was introduced and popularized in > tooltipsfor buttons in toolbars, trying to make up for the failure of the > buttons to be clear about what they did with their tiny cartoon icon, > pointing to the fact that icons and text are necessary. > > Some time after JavaScript was introduced into web browsers and made this > hover behavior available, webpages started using it as a primary > communication behavior, not just a secondary tool to add a little. Buttons > started losing their decoration, no longer communicating they were > pressable, > and pages were turned into these complete labyrinths of light-up text and > imagery the hapless user had to chance upon moving their pointer to > realize > they could do something  there. Yes those 3D Motif / Windows bevels made > for > a fussy page, but some web artisans really took the clean look too far. > Now > we are offering users whole panels popping up, oblietarting the page they > were looking at, up as the result of a small mouse movement a mere hover. > I > am really not sure how well that would test with, say, silver surfers. > > The iPad is taking this channel to communicate affordance badly away from > us. > A page, an interface, has to show just from plain viewing again what is > clickable and what is not, what is interactive and what is static, and > what > everything does, at first glance and with clarity. No longer do we have > the > crutch for sloppy action choices and icon design to say "We'll explain it > with a tooltip", and no more can we subvert making function clear for > beauty > and minimalism. We will have to work harder again to make clear what we > are > offering. > > ((

17 Jun 2010 - 10:05pm
Navid
2010

FJ,
All good points we agree on - clarity is so important that downgrading behaviors can help constraint possibilities such that the end result may be far better.   I would add two nuances though which argue for hover.
1)   Clicking is much more commitment.  It is subtle but I think cognitively and emotionally true that a click takes more intent and therefore means you really want to do it.   Clicking is not as good for momentary visualization, just checking  something twice, as a well designed panel on hover.   It is also more fearsome to click than to hover.   We are all fearful of commitment are we not?  Especially with scary software that might crash.
2)  Actions and configuration should be bound.   For a lot of things, actions and configuration should be bound much better.  The best way to do that which I have found is to couple them physically.   A button which starts spinning the world is fine on a click, but to configure how quickly you want to spin the globe and how many rotations and whatever whatever, it is better to hover over the button and find a panel.  Once you discover the panel is there on these buttons it is very easy to follow along.   But, I do think that some visual indication that there is a hover panel on a button would be nice.  I still haven't come up with something great on this point, and whatever it is it should be iconic (not pictographic).   In summary, when configuration and action get unbound physically it takes a lot more work to connect them thats why buttons and hover panel configurations can go together.
Few do hover panels well, but for a mainstream example I would point to the gmail interface where you hover over a contact to figure out what to do with it.   It's completely logical - unbinding the actions the objects would take "lifting" by the designer to get right.  
Navid

On Thu, Jun 17, 2010 at 8:54 PM, fj <fj.ixda@exonome.com> wrote:

Navid wrote:

was getting into the groove designing web-page interactions where there
is a button, and then hover over the button reveals a panel for
configuration.
This allowed progressive disclosure, and if the users
didn't initially find the panel, it was a-ok. Hover panels are great
for layering.

I am willing to argue that the iPad is doing us a favor by downgrading hover as a behavior in our vocabulary. Hover was introduced and popularized in tooltipsfor buttons in toolbars, trying to make up for the failure of the buttons to be clear about what they did with their tiny cartoon icon, pointing to the fact that icons and text are necessary.

....{stuff deleted}
(((Please leave all co
Syndicate content Get the feed