thahnk you mcyknds sadjad.
Every once in a while I remember some functionality of CSS that we have had access too for ages yet is rarely taken advantage of in creative ways. The last time I really wrote about this is when I had discovered a way to make other menu items change when you hovered on just one of them, as you can see here in the Advanced CSS Menu Trick article.
Sometimes rediscovering these capabilities are valuable for creating new ways to add creative touches, such as the parallax scrolling effect. Other times they can greatly improve the usability and user experience of our sites. In some cases they do both.
I was recently reading through "The Elements of User Experience
," which opens with a compelling story describing why things going wrong in your day could be the fault of poor design in regards to usability. Interestingly enough one of the points covered in this section is the use of feedback as a way to notify a user that something has occurred.
In the case in the book they mention a coffee pot beeping so you know that it was switched on. This same principal of offering a user basic feedback applies to the web, yet we rarely see it used in all instances it can.
We have had the ability to style a links :active pseudo selector since CSS1, yet when was the last time you actually used it? I will admit that I am a grand offender as well, as I couldn't tell you. However the value of such a subtle detail can have large benefits to a users experience of the site. Not to mention it does give another avenue to enrich the interactivity of our interfaces.
If you have ever done any usability studies you will have probably run into a situation where things that seem incredibly simple end up taking significant amount of time. One of the most basic of these situations is that of clicking on a simple link. I have many times in my "behavior observing" career seen a user who thinks they have click on a link, despite having missed it slightly.
What follows is a long pause while they wait for the page to change, before getting frustrated and either blaming the internet, the site, or swirling the mouse to ensure the computer hasn't locked up.
This could all be solved by simply giving the user feedback when a button is clicked. Interestingly enough flash based websites have done a better job through out history of accomplishing this than most HTML sites, done so by adding a subtle "clicking" noise as a link is clicked.
Of course I am not advocating the use of sound (as it fails on several accessibility levels among other issues), however it wouldn't be hard to give the user some feedback to let them know the link was successfully clicked on.
By using the :active selector in CSS we can give the user some feedback that a link has in fact been clicked. This way if there is any sort of delay the user knows that it is successful loading and they don't have to reclick the link. This will make the site more usable and as more developers and designers begin to adopt this process the web itself will become more usable.
Additionally it opens up a new area for us designers to work our creativity. We can now think about what subtle design elements we can give links and buttons to indicate to the user that they have been clicked. In my example, a beveled button appears to be pushed inward.
Despite the fact that it is a dramatic improvement over not having any feedback and it does give us more room to express our creativity, the functionality isn't perfect. You may notice in the demo that if you click on a button quickly it changes so fast you might not even notice. You may not realize that there is even an effect giving you feedback.
Regardless, using :active will still enhance the user experience. Even if only 10% of your users notice it is worth the time and effort put into it. Additionally users who are less familiar with computers and the internet will be more likely to hold the mouse button down longer and thus notice the effect.
I really advocate the adoption of it as normal standards based markup. If it becomes a convention than users will expect some sort of notification that a link was clicked and even it happens to fast on the pages that load right away, they know to look for it.
Have some feedback? Leave a commentthahnk you mcyknds sadjad.
thank you for the post
it’s not suppot to many browser
Exactly Chris, it is a nice touch isn’t it? Even though it is subtle and you might miss it.
Using javascript to slow down the interaction might be a great venue to take, and you can always fall back on the CSS.
Cheers
-Ross
I always liked how apple.com did this except I think they use javascript instead of css.
Not sure why they would say that, it is in the CSS 2.1 spec http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#dynamic-pseudo-classes
But I agree it is good for usability, I don’t expect that they will drop it =)
Someone told me that :active wasn’t supported anymore. I always still use it though, because like you say it’s great for usability.
Play Free Online Games, sports games, massive multiplayer games, action games, puzzle games, flash games and more, casual games.
Exactly Luke, and that is a great example of how such a small simple effect (such as dimming a link) could give the user clear feedback for clicked links.
Thanks for the comment.
When I first opened this article I coul.dn’t remember what :active was! It was on the tip of my tongue as they say, but I definitely know now haha. I definitely agree, a big part ouf usability is giving feedback to the user, even for the little things.
Even a sitewide property such as:
a:active { opacity: .75; }
would probably go down quite well. Might try that myself, thanks 
on September 28, 2009
aa thank