Re: [IxDA Discuss] Best Practices for Mouseover Layers
Just out of curiosity: how can you comply to Section 508 if you information provided with mouse-over functions? Do we draw a line between cosmetic feedback (colour change) or if the information provided is additional or vital? Or is a mouse-over a mouse-over and if used, not compliant to Section 508? Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
I actually think we can reach a semi-conclusion here: -Hover is best used for non-essential but useful 'extra' info. (tooltips, next-page previews, link highlights) -Hover can be used for functionality if it is an extension with a good default, or if it has a logical backup. (a second-row drop out menu can be defaulted to visible on a sub page) -Hover items shouldn't be used where doing so will break the system for some users. -Hover items shouldn't be used where they 'gum up the works.' And some facts about hover states: -They hide information from the user. -They require hover ability from the user's physical interface. -They force your interface to be discoverable Will . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Posted from the new ixda.org http://www.ixda.org/discuss?post=35525 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
Hey Jack, 2008/11/13 Jack Moffett [EMAIL PROTECTED]: On Nov 13, 2008, at 8:51 AM, Danny Hope wrote: Arguably, best practice says: don't initiate layers on rollover, but rather to require a click. Danny, I can't agree with you here. Displaying new information on rollover has been a widely used and accepted practice for over 16 years. I suppose tool tips are an example, can you reference other examples please? You could certainly point out situations where it is inappropriate, Here are 3: - where the new layer obscures information or other controls - on devices which do not have a hover state, e.g. touchscreens - where the interface is to be used by someone with visual or motor disabilities but I don't see how you can argue that best practice is to not use this technique. I've only found one source to back up my position (anyone know any others?): http://www.nngroup.com/reports/accessibility/ (p57-64) I'm not saying that Displaying new information on rollover is bad practice. For example, I think that having the browser display the URL of links in it's status bar is good. I am saying that: - rollovers should not be counted as a declaration - the system should not obscure content or interface elements that the user may be trying to see. -- Regards, Danny Hope http://linkedin.com/in/dannyhope 07595 226 792 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
We do a very similar thing, except instead of hiding the buttons completely we dim them. We also use hover to show contextual content for an item in a popup box, and it works very well. You can see these techniques in action at http://opl.bibliocommons.com/collection/show/4922901_emenel/library On Thu, Nov 13, 2008 at 10:18 AM, Todd Zaki Warfel [EMAIL PROTECTED] wrote: On Nov 13, 2008, at 9:12 AM, Jack Moffett wrote: You could certainly point out situations where it is inappropriate, but I don't see how you can argue that best practice is to not use this technique. Exactly. We use the hover technique to reveal additional options like Edit and Delete in most of our webapps. Imagine a list of 30 items on a page. If we had Edit and Delete next to every single one of them, that's a lot of visual noise on the screen. Instead, we only reveal these additional actions on hover — it's conditional and contextual. And besides, you're going to have to target that item w/a mouse anyway to perform the action. So, it works pretty well. Cheers! Todd Zaki Warfel President, Design Researcher Messagefirst | Designing Information. Beautifully. -- Contact Info Voice: (215) 825-7423 Email: [EMAIL PROTECTED] AIM:[EMAIL PROTECTED] Blog: http://toddwarfel.com Twitter:zakiwarfel -- In theory, theory and practice are the same. In practice, they are not. Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help -- Matt Nish-Lapidus -- personal: [EMAIL PROTECTED] twitter: emenel Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
On Nov 13, 2008, at 9:12 AM, Jack Moffett wrote: You could certainly point out situations where it is inappropriate, but I don't see how you can argue that best practice is to not use this technique. Exactly. We use the hover technique to reveal additional options like Edit and Delete in most of our webapps. Imagine a list of 30 items on a page. If we had Edit and Delete next to every single one of them, that's a lot of visual noise on the screen. Instead, we only reveal these additional actions on hover — it's conditional and contextual. And besides, you're going to have to target that item w/a mouse anyway to perform the action. So, it works pretty well. Cheers! Todd Zaki Warfel President, Design Researcher Messagefirst | Designing Information. Beautifully. -- Contact Info Voice: (215) 825-7423 Email: [EMAIL PROTECTED] AIM:[EMAIL PROTECTED] Blog: http://toddwarfel.com Twitter:zakiwarfel -- In theory, theory and practice are the same. In practice, they are not. Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
Danny, Clicking is a declaration, hovering is not. I think there are some cases where we *can* treat hovering as a declaration. In particular, I'm thinking of uses such as Netflix's movie info boxes. When a user places a mouse over an active object, and then pauses without a click, I think it's a reasonable inference that the user is lacking information to move forward. In this circumstance, I think that showing an information box can be appropriate. Jackson Fox UX Designer @ Viget Labs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Posted from the new ixda.org http://www.ixda.org/discuss?post=35525 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
2008/11/13 Jackson Fox [EMAIL PROTECTED]: …Netflix's movie info boxes. Can you give me a URL please? -- Regards, Danny Hope http://linkedin.com/in/dannyhope 07595 226 792 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
On Nov 13, 2008, at 10:36 AM, Danny Hope wrote: I suppose tool tips are an example, can you reference other examples please? I can't spout off URLs and I don't have the time to look any up, but I've seen sites that provide a preview of the page that an external link goes to in a roll-over pop-up. I've used this technique to reveal buttons in a list like Todd suggested. I've seen it used to provide information about an image thumbnail. There are menus that open on hover. Technical illustrations can show labels for individual parts. I've implemented a multi-link in this way, where one link in the content has multiple destinations, so the pop-up is a list of links. The Mac OS used to have bubble help. It's also a good way of providing access to status information. I've used it to provide an explanation as to why a particular button is disabled. (Okay, there are probably several examples here that could be classified as tool tips in a broad sense.) This list could go on... You could certainly point out situations where it is inappropriate, Here are 3: - where the new layer obscures information or other controls I wouldn't consider this to be an inappropriate situation as I meant it, just something that you should avoid. - on devices which do not have a hover state, e.g. touchscreens Agreed. - where the interface is to be used by someone with visual or motor disabilities Also agreed. but I don't see how you can argue that best practice is to not use this technique. I've only found one source to back up my position (anyone know any others?): http://www.nngroup.com/reports/accessibility/ (p57-64) Which is in regards to situations in which accessibility is an issue. This doesn't mean that the technique should never be used. I'm not saying that Displaying new information on rollover is bad practice. For example, I think that having the browser display the URL of links in it's status bar is good. I am saying that: - rollovers should not be counted as a declaration If the user pauses, that can be taken as a declaration. And sometimes, you intentionally want to interfere before the user makes a declaration. - the system should not obscure content or interface elements that the user may be trying to see. Absolutely. Best, Jack Jack L. Moffett Interaction Designer inmedius 412.459.0310 x219 http://www.inmedius.com My goal is to build elegant products. The products that don't make people think when they should be doing, make people think when they should be learning, compel them by relating to them, and simply work. - Josh Viney Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
On 13 Nov 2008, at 09:09, Jackson Fox wrote: [snip] I think there are some cases where we *can* treat hovering as a declaration. In particular, I'm thinking of uses such as Netflix's movie info boxes. When a user places a mouse over an active object, and then pauses without a click, I think it's a reasonable inference that the user is lacking information to move forward. [snip] As ever - it depends :-) If the page has enough content that the user needs to pause to comprehend it, and enough area of the page containing active links, then the chance of accidentally firing off with a hover affect can be quite high. I saw exactly this behaviour this a while back when I did some testing on a site where the content area and side bar contained a number of links that gave a preview of the following page. The user paused to read content - with the pointer over a preview area purely by chance. A couple of seconds later preview-layer appeared. User gets distracted - moves cursor enough to get the preview layer to vanish. User resumes reading - accidentally leaving cursor over _another_ preview link... This sometimes happened two or three times in a row until the user threw the cursor to a screen edge. Fun :-) Adrian Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
Hi Jacqueline, Did you mean something like this page: http://meyerweb.com/eric/css/edge/popups/demo.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Posted from the new ixda.org http://www.ixda.org/discuss?post=35525 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
Flash ads using the hover event to expand the ad are making hovering a declaration as well. I find myself mousing around ads to avoid expanding the ad and thus obscuring content I want to see as Danny put it. Example: hover over the Nature Valley banner at the top of this page: http://skiing.about.com/od/skigear/u/skiequipment.htm Joel Tachau Director of User Experience MFG.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Danny Hope Sent: Thursday, November 13, 2008 10:37 AM To: Jack Moffett Cc: IxDA Discuss Subject: Re: [IxDA Discuss] Best Practices for Mouseover Layers Hey Jack, 2008/11/13 Jack Moffett [EMAIL PROTECTED]: On Nov 13, 2008, at 8:51 AM, Danny Hope wrote: Arguably, best practice says: don't initiate layers on rollover, but rather to require a click. Danny, I can't agree with you here. Displaying new information on rollover has been a widely used and accepted practice for over 16 years. I suppose tool tips are an example, can you reference other examples please? You could certainly point out situations where it is inappropriate, Here are 3: - where the new layer obscures information or other controls - on devices which do not have a hover state, e.g. touchscreens - where the interface is to be used by someone with visual or motor disabilities but I don't see how you can argue that best practice is to not use this technique. I've only found one source to back up my position (anyone know any others?): http://www.nngroup.com/reports/accessibility/ (p57-64) I'm not saying that Displaying new information on rollover is bad practice. For example, I think that having the browser display the URL of links in it's status bar is good. I am saying that: - rollovers should not be counted as a declaration - the system should not obscure content or interface elements that the user may be trying to see. -- Regards, Danny Hope http://linkedin.com/in/dannyhope 07595 226 792 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
http://www.netflix.com/BrowseSelection On Thu, Nov 13, 2008 at 9:36 AM, Danny Hope [EMAIL PROTECTED] wrote: 2008/11/13 Jackson Fox [EMAIL PROTECTED]: …Netflix's movie info boxes. Can you give me a URL please? -- Regards, Danny Hope http://linkedin.com/in/dannyhope 07595 226 792 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help -- -- I'm doing a century ride for the Leukemia Lymphoma society! Help me cure Leukemia Lymphoma By donating directly: http://pages.teamintraining.org/sj/tdps09/cedgeton By buying shirts: http://www.zazzle.com/cedgeton Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
Danny, Visit http://www.netflix.com/ You may actually need to be logged in with a user account to see the flyouts to which Jackson refers. However, at that point, you should receive a number of suggested offerings (for instance). These are thumbnails of the movie box/CD cover, etc...commonly associated with a film. Below that is a red hyperlinked button that reads (Add)-this is for adding selections to you queue. If you scroll over the aforementioned thumbnail and stop, you will see a prominent flyout appear. This box contains general summary information about the film, thus allowing you to scroll a number of recommendations without having to leave this page to navigate to another to obtain basic information about a film. Here, the user is provided with the type of information that original web paradigms would have required a declaration on the part of the user in the form of a click with the mouse to deduce a request for additional information. In this newish paradigm, simply hovering over an object for a short amount of time is inferred as a request (or declaration) for additional information. I think tool tips (which are more omnipresent) serve as similar examples. I hope this helps. John W. Williams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Posted from the new ixda.org http://www.ixda.org/discuss?post=35525 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
Ciao guys, I think that the hover state should ne tested every time you can. It's such a complex interaction and, even though it seems ho ne mode standard recently, the context IW always extremely influent ok it. Do you have any info about your users? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Posted from ixda.org (via iPhone) http://www.ixda.org/discuss?post=35525 Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
[IxDA Discuss] Best Practices for Mouseover Layers
Hello IXDA-ers. Long time lurker. First time poster. I am looking for best practices on incorporating a mouseover layer onto a web page. Here is a description of my interaction: There is a link on the page. On rollover, the user gets a layer that gives the user more information about the item. When the user moves the mouse off of the link, the layer goes away. On click, the user goes to the detail page of the object. We are using a third party site to create our layers. There are a lot of options and limitations for stems, hooking, targets, delays, etc. My typical web search to get to best practices didn't reveal much. What terms do you use to describe this interaction? I know the interaction design always depends but I was hoping someone out there has done some testing to help better inform my decision. I work in an Agile environment and am not in a position to test designs prior to launch. (That certainly is another topic I'd like to follow up with in a separate discussion!!) I'd like to know your thoughts on: 1. Are there any best practices around where the layer should open and how it is tied to the object? (Like should the header of the layer be beneath or to the right of the link? Should the stem be in the side middle? top left? ...) 2. Are there any best practices around delay? (Are there any similarities to the 250ms menu delay?) 3. Are there any best practices on making the layer actionable versus informational? (with links and a close button versus text only and closing on mouse-off?) 4. What else should I be concerned about that I'm not thinking of yet? Thank you so much for your time. Jacqueline -- Jacqueline Stetson http://www.jacquelinestetson.com Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
Re: [IxDA Discuss] Best Practices for Mouseover Layers
On Nov 12, 2008, at 11:11 AM, Jacqueline Stetson wrote: 1. Are there any best practices around where the layer should open and how it is tied to the object? (Like should the header of the layer be beneath or to the right of the link? Should the stem be in the side middle? top left? ...) From observation, I would say that these types of pop-ups typically appear above the active item. However, you need to make your decision based on the design of the rest of your page. Where do you have the most room for it? The goal should be not to have it fall outside of the current window boundaries and not to cover up the active item or anything of importance. Which placement will most likely meet these goals? Also, what are the dimensions of the pop-up? Is it wider than it is tall or vice versa? Placement of the stem would then be based on the placement of the pop-up. 2. Are there any best practices around delay? (Are there any similarities to the 250ms menu delay?) It should be long enough that it won't pop up when the cursor is moving across the screen, but short enough that it is likely to show before the user clicks on the link. 3. Are there any best practices on making the layer actionable versus informational? (with links and a close button versus text only and closing on mouse-off?) Both are valid. It depends on what the purpose of your pop-ups are. As far as closing on mouse-off vs. an explicit close, I base the decision on the amount of content. If there is actionable content, an explicit close is preferable. If there is a significant amount of content, an explicit close is preferable so you don't have to worry about leaving the mouse stationary to read it. Short amounts of content will do fine with an automatic close. Best, Jack Jack L. Moffett Interaction Designer inmedius 412.459.0310 x219 http://www.inmedius.com The details are not the details. They make the design. -Charles Eames Welcome to the Interaction Design Association (IxDA)! To post to this list ... [EMAIL PROTECTED] Unsubscribe http://www.ixda.org/unsubscribe List Guidelines http://www.ixda.org/guidelines List Help .. http://www.ixda.org/help
