Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Go nuts with CSS3 hover effects

tympanus.net

Post reply on HN
Print view View original

21–30 of 70 posts

Re: Go nuts with CSS3 hover effects

#21

Post by andrewfelix »

_frog wrote: post #13
lell wrote: post #10

Why is everyone shitting on this in the comments? It's a demo: you can't complain that it's hindering usability or enjoyment of the pictures when there is no context in which you might use it or enjoy the pictures. When I saw this I thought it might be nice for the website of a magazine like vogue or something: some sites are about decoration and style, usability can be at the back of the priorities. Just because it…

> Some sites are about decoration and style, usability can be at the back of the priorities. I'm pretty sure this is exactly the problem people had with flash-heavy sites in the first place.

Style, decoration and usability are not mutually exclusive. As with many disciplines they can co-exist beautifully. Frank Lloyd Wright's buildings wouldn't look much chop if he hadn't taken style into consideration.

Re: Go nuts with CSS3 hover effects

#23

Post by billswift »

babuskov wrote: post #3

Usability vs cool UI is always a tough one. The ones who can do both at the same time are geniuses. That's why Apple is always on top.

Only for some people. For others, including myself, usability wins every time. Even for entertainment, I want the controls to fade into the background.

Re: Go nuts with CSS3 hover effects

#24

Post by grovulent »

Xixi wrote: post #11
grovulent wrote: post #4

Earlier quoted context omitted.

Always surprises me that developers let platform makers dictate what they can use and what they can't. If developers chose to use stuff on the basis of what they as developers think should be used - and if that meant iphone users couldn't use them - guess who would ultimately win that battle? Not Apple. IE would have died years ago if developers had adopted that culture en masse.

The hover is not an iPhone vs developer problem, it's a touchscreen problem. Hover feels very natural with a mouse, but there's no logical equivalent on a touchscreen. "on hover" is a side effect of pointing at things with a mouse. With a touch screen you touch things directly with your finger, you don't hover. So you have to design your website/app with that in mind: users will touch whatever they want to interact w…

I never said it was an iphone vs developer problem - I said it was a platform vs developer problem.

If developers choose en masse various interface methods that a particular platform doesn't support - that platform loses.. end of story.

Nor is there anything inherently impossible about hover + touchscreen. Double tap to prevent scrolling (and at least on my nexus S I'd prefer that to zooming which 3/4 times doesn't actually zoom at all). Move finger across screen - stop over element without additional tap. That's hover baby!

Not sure why folks voting me down. What I'm saying is not only right - it's sensible... and it's also preferable. Developers should be deciding UI reality.

Re: Go nuts with CSS3 hover effects

#27

Post by _frog »

andrewfelix wrote: post #21
_frog wrote: post #13

Earlier quoted context omitted.

> Some sites are about decoration and style, usability can be at the back of the priorities. I'm pretty sure this is exactly the problem people had with flash-heavy sites in the first place.

Style, decoration and usability are not mutually exclusive. As with many disciplines they can co-exist beautifully. Frank Lloyd Wright's buildings wouldn't look much chop if he hadn't taken style into consideration.

Agreed, but effects like this are not style, they are a cheap veneer applied to otherwise poorly thought out designs. Fashionable kitsch integrated into otherwise unoriginal, uninspired designs.

Re: Go nuts with CSS3 hover effects

#28

Post by Xixi »

dexen wrote: post #14
Xixi wrote: post #11

Earlier quoted context omitted.

The hover is not an iPhone vs developer problem, it's a touchscreen problem. Hover feels very natural with a mouse, but there's no logical equivalent on a touchscreen. "on hover" is a side effect of pointing at things with a mouse. With a touch screen you touch things directly with your finger, you don't hover. So you have to design your website/app with that in mind: users will touch whatever they want to interact w…

> ...but there's no logical equivalent [to hover] on a touchscreen. There isn't now, but there well could be. Suppose for a moment that you get a good old cursor on iPhone and it follows your fingertip as you move it around the screen. It wouldn't even have to be user-visible. To click, you press a bit stronger, or you raise & lower your finger (`tap' if you will). The hover's back. There's nothing inherent in touch-…

> There isn't now, but there well could be.

Or not.

On touch touchscreen it feels natural to just touch the part of the screen you want to interact with. I hate the word, but it's intuitive. It doesn't feel like something you need to learn and become familiar with. My daughter understood how to use my iPad when she was less that one year old. She just touched the screen and something happened, she was happy. Even my mother-in-law understand how to use a touchscreen.

Neither my daughter nor my mother-in-law can use a mouse: it requires too much dexterity. I've seen people hovering a mouse in front of the screen hoping that something will happen. It's less intuitive, but it's familiar to all of us on hackernews.

What I'm trying to say is that there is something intrinsically natural and easy with a touchscreen: touch - interact. We won't go back from that.

I might be proven wrong, and tomorrow everybody will do on hover with its phone/tablet with the process you describe, or the one described by grovulent, or another one. But my guess is that it will remain mostly unused, except for a few "power users".

Re: Go nuts with CSS3 hover effects

#29

Post by jrubinovitz »

einhverfr wrote: post #16
peng wrote: post #7

Touchscreen issues notwithstanding, hover effects like this are awful for usability. The hover overlay completely obscures the original image, making it impossible to read the snippet and enjoy the image at the same time. The animation effect is more garish than anything, but this is a probably a personal quibble. It takes 200 ms for the hover effects to finish loading. I'd rather have the hover transition instantly,…

There are times when I find hover effects really helpful from a usability perspective. For example, with the right parameters, you can make text preview panes expand to view the entire text panel, and if white space is well used, the hovering doesn't get in the way too much. This said, and while I realize this is a demo to show what can be done with CSS3, and while it is impressive, it gives me a headache. I wonder h…

I agree with the seizure point. I think this is a bit too "nuts." I showed it to my friend who has frequent seizures and she agreed. I would not recommend CSS moving this quickly for general use.

Re: Go nuts with CSS3 hover effects

#30

Post by andrewheins »

dexen wrote: post #14
Xixi wrote: post #11

Earlier quoted context omitted.

The hover is not an iPhone vs developer problem, it's a touchscreen problem. Hover feels very natural with a mouse, but there's no logical equivalent on a touchscreen. "on hover" is a side effect of pointing at things with a mouse. With a touch screen you touch things directly with your finger, you don't hover. So you have to design your website/app with that in mind: users will touch whatever they want to interact w…

> ...but there's no logical equivalent [to hover] on a touchscreen. There isn't now, but there well could be. Suppose for a moment that you get a good old cursor on iPhone and it follows your fingertip as you move it around the screen. It wouldn't even have to be user-visible. To click, you press a bit stronger, or you raise & lower your finger (`tap' if you will). The hover's back. There's nothing inherent in touch-…

It's funny that we get this kind of response after that rant about the future of UI earlier this week

If we think about the future of touch and gesture interfaces, I absolutely think we'll see a hover state be implemented, but it won't be connected to a mouse cursor. That's moving backwards.

There will likely come a point where a touch or gesture interface will be able to tell if your hand or finger is quite literally -hovering- over a touch-enabled element, and will be able to give you context.

It's seems completely intuitive. If you're hovering over an element, you're likely hesitating, so give more context. Preview the next screen, provide info in a tooltip. Why wouldn't you take advantage of this?

Post reply on HN