3

Train and Subway Information Design

Metro style refers to boxing information so that it's easy to digest. Windows 8 uses this, although they failed to make it usable.

Metro Style on the Web

I like the navigation used for the ACM Digital Library Computing Classification System. ACM Digital Library

ACM: Mouse Hovering

When you hover inside a box, part of it turns green. enter image description here

Question

In Jakob Nielsen's Alertbox article, he says the lines surrounding a box are important. They signal where the user can click. In the ACM DL CSS example above, you can hover your mouse inside the box and the text won't turn green and clickable. You must hover closer to the text to make it clickable. Is there a reason for this? Is adding this feature to the design confusing some people, or somehow making the design better?

One possible explanation is that less hover effects distract the user less. I'd like to hear your perspective on this.

Improve this question
6
  • The idea of 'boxed info' has been around long before metro/win 8. I wouldn't call the example shown 'Windows 8 style'
    – DA01
    Nov 25, 2012 at 4:31
  • I'm calling it metro style. It's not Windows 8 style. Metro comes from train and subway information design. Thanks for clarifying DA01.
    – Tyler Langan
    Nov 25, 2012 at 18:22
  • @TylerLangan You should take into account that "Metro" was the very widely publicised name for Windows Phone and Windows 8 styling - and many members of this site will take it with that meaning, reguardless of your assertion that Metro means something different.
    – Bevan
    Nov 27, 2012 at 7:34
  • Thanks Bevan. You're saying "Metro" describes Windows 8 styling. Is that a problem because that could include more than just boxing information? What am I missing here?
    – Tyler Langan
    Nov 27, 2012 at 7:45
  • the reduced area looks like oversight / corner cutting to me, the hovering popup feels against the FKAMetro style (should not covering any other elements, fixed place besides inline or expand the box)
    – peterchen
    May 16, 2013 at 8:10

1 Answer 1

Reset to default
3

I don't think that anyone other than the ACM designers can answer definitively why it is like that. However it looks to me to be more a result of the way they laid out the text as the text area is what has a hover event.

I personally think that this is a poor choice, and as Nielsen suggests, it should be the entire box area. My suspicion is that this wasn't planned to be like this and that it was simply easier to do this way.

Short answer: Use the box area within the borders as the active area, not some smaller area, as there is no visual indicator or clear precedent to show someone that they should only click on the text.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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