Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've recently updated my personal portfolio with some CSS3 and jQuery magic. I'm extremely pleased with the results and yes, it's fully responsive. But i have an issue. I've structured my portfolio items so that initially each item box has an overlay on it, when the user hovers over an item, the overlay shoots up and reveals content. This works well on a browser with a mouse.

Now, on an iPhone/iPad, visually the site looks great but obviously the user has no mouse and has no user-friendly hovering state. What is the most user-experienced conventional way to gracefully supply an alternative to "hover to reveal content".

Also, before someone says it, I am aware that the hover effects I have on my site serve no functionality but they just look nice. See here

share|improve this question

6 Answers 6

up vote 13 down vote accepted

There is no hover equivalent on iOS devices. The most conventional gesture to interact with content is 'tap'. You could have the content boxes open a pop-up or overlay on tap (which would work better on iPad than iPhone). Using other gestures which have no strong established convention could just confuse users. But it might just be more graceful and usable to put all of the content in plain sight.

share|improve this answer

Maintaining your current design...

As mentioned there isn't a hover behaviour equivalent on iOS devices. Even if you implemented a 'follow the finger' behaviour, most users will probably be moving their finger off the screen, moving to the target and then touching the screen again.

One approach would be to have small page curls in the bottom corners. This lets users know that there is more information available, and uses a real-world and existing iOS convention. People could peak at the content or fully open it up, and it would stay in place when they move on to the other boxes.

share|improve this answer

Single click (finger tap) is the most appropriate hover alternative on touch devices.

share|improve this answer

As stated, 'tap' is the typical interaction. If your goal is primarily to have this working on iOS, then I'd suggest a tap event and then use the card-flip style to show the text on the 'back' of the card. It's admittedly used a lot, but I'd say it's becoming a standard way to handle 'meta' information on elements on an iOS touch device.

Alternatively, you could just leave it as-is and trigger the text on one tap, then hide it on the next.

share|improve this answer

I believe one way to enable "hover" on a touchscreen would be with a sequential double touch. By this, I mean touch and hold the screen on an inactive part (e.g., not on a link) and then 'tap' (and release) the area with the hover info while maintaining the first touch. The hover info remains visible until the first touch is released.

share|improve this answer

If a user using an iOS device comes across a link with a :hover CSS tag the process is as follows:

  1. First tap: the :hover CSS is activated
  2. Second tap: the link address is followed

Reference SO question and a live demo.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.