ksux / ks-design-guide

Live pattern library for Kuali Student.
http://ksux.github.io/ks-design-guide/
9 stars 1 forks source link

Explore tooltip interaction on touch devices #10

Open basham opened 10 years ago

basham commented 10 years ago

Most desktop-oriented tooltip patterns use hover to activate the tooltip. How does this work for touch devices?

The following Skype conversation captures discussion points.

[11/12/13, 10:38:16 AM] Jae Kim: Question for core - we are looking at this screen http://ux.ks.kuali.org/wireframes/KSAP/Sprint_014/KSAP-137_ContextHelp/index.html

[11/12/13, 10:39:20 AM] Jae Kim: Currently, the help bubble (click on "Credits" for ex.) is persistent until the user makes a second click (pretty much anywhere on the screen), at which time it disappears

[11/12/13, 10:40:14 AM] Oliver Ng: Tooltips are suppose to appear/disappear on entering/leaving the hit zone

[11/12/13, 10:40:45 AM] Oliver Ng: A click assumes that these are navigational links

[11/12/13, 10:40:45 AM] Jae Kim: We were going to suggest a top-right "close" button to provide a clearer interaction - so that is the standard?

[11/12/13, 10:41:44 AM] Jae Kim: It works differently in env6 -

[11/12/13, 10:41:56 AM] Jae Kim: It's a click action not a hover action

[11/12/13, 10:43:06 AM] Kristol Hancock: Oliver - we decided to go with a click interaction instead of hover b/c we were assuming students might want to use a mobile device while accessing these screens and hover would not work for that.

[11/12/13, 10:43:39 AM] Kristol Hancock: so we extended the current functionality in KRAD to include click for certain situations, such as this

[11/12/13, 10:53:34 AM] Oliver Ng: The use of tooltips should really be limited to small subset of the UI - we don't want to clutter the UI with dotted underlines. Items such as Bookmarked Courses, Credits seem obvious to me.

I don't like how we're introducing different interactions of how to launch a tooltip. There are solutions that offer hover on web vs touch on mobile. i.e. http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

We should leave hover for tooltips. Clicks should be reserved for navigational links. [11/12/13, 11:02:01 AM] Jae Kim: Kristol and I agree that there are items in there that are more self-explanatory than others and we are trying to see if we can remove the help texts for them.

[11/12/13, 11:02:46 AM] Jae Kim: I would prefer hover-over for tooltips as well - is your solution compatible with what we can do with KRAD?

[11/12/13, 11:03:04 AM] Kristol Hancock: I'm checking with David P on that.

[11/12/13, 11:03:15 AM] Jae Kim: Thanks

[11/12/13, 11:08:34 AM] Kristol Hancock: David sounds optimistic. We'll submit a jira to get that changed. Thanks for sending us that Oliver. It really helps to have someone with your expertise on the project. :)

[11/12/13, 11:31:15 AM] Erik Rath: As we look towards touch interfaces, however, should On 11/12/13, at 7:53 AM, Oliver Ng wrote:

There are solutions that offer hover on web vs touch on mobile. i.e. http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

We should leave hover for tooltips. Clicks should be reserved for navigational links.

The tooltip we are using for the CO/CL icons currently behaves this way. It is hover-activated on my laptop, but touch activated on my phone.

[11/12/13, 11:32:17 AM] Chris Basham: I agree with Oliver. We shouldn't reduce the experience for desktop for the sake of a lowest common denominator solution. Most mobile browsers will treat :hover as a tap event. However, with CSS-only tooltip solutions, the only way to close the opened tooltip is to shift the focus to another part of the interface (perhaps fiddling with pairing :hover with :active/ :focus/:blur could help things, but I doubt it). Plus, iOS at least doesn't respond to hover-as-tap events unless it's an <a>, I believe.

Therefore, most likely this is going to have to be a CSS-JavaScript solution to make it best for touch and mouse interactions.

Oliver's reference is a good example. http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

So is Bootstrap. http://getbootstrap.com/javascript/#tooltips

[11/12/13, 11:34:21 AM] Kristol Hancock: Erik - where would we go to see that working?

[11/12/13, 11:35:25 AM] Erik Rath: I saw it in ENV2 on the manage CO page for English.

[11/12/13, 11:36:36 AM] Erik Rath: ENGL250 in 201208 is crosslisted, so can be used as an example