View high resolution
In a left menu: A useful marking of the menu hierarchy using coloured vertical bars.
-
View high resolution
-
HTML/CSS3 technique: Rounded tabs with “cutout corners”
Normally I don’t post implementation details on this blog about user experience design.
However, the other day I was playing with HTML and CSS3 to devise a pure CSS3 (no images) solution for matching or “cutout” corners on tabs. So why not share it, since aesthetics undeniably play a part in user experience design.
If you want visually appealing rounded matching tabs like this :) …
…instead of these jagged unmatching ones :(
Check out the HTML/CSS3 code for the sleek “cutout cornered” no-images, pure CSS3 tabs on JSFiddle. -
A very “useful” breadcrumb: Home > Passenger cars > Clio > Clio > Clio > Overview…
-
Reminder: The best UI is no UI →
The people at Cooper keep reminding us, while we keep forgetting: A UI most often caters more to the needs of technology than to the needs of humans.
-
Design of filters: Don’t change position of items
Filtering of items on e.g. an ecommerce website is very useful to find the wanted items. However the interaction design, and more specifically the transitions used, has a big impact on the usability of the filtering mechanisms.
Don’t: Change position of items
As an example of what NOT to do, see what happens when you apply a filter on a bike manufacturer’s site:
Read more -
When icons fail to deliver
Icons are important elements of user interfaces. They can e.g.
- Save space on toolbars and buttons,
- Speed up recognition compared to text once learned (for instance icons based on convention such as a cogwheel for “settings”) and
- Reduce the need for additional textual explanation (e.g. icons representing the result of an action, like the banding of rows in a table editor).
A bus air-fan icon pair not up to the task
However, sometimes icons fail to deliver and I came across such an example while riding the bus.
Read more -
A nice little video with a “live” sketchboard drawing from which Susan Weinschenk talks about return on investment (ROI) on user experience work. Weinschenk is author of the books “Neuro Web Design” and “100 Things Every Designer Needs to Know About People”.
(Source: youtube.com)
-
Ensuring consistency in the user interface can be hard! Even the big players are having trouble.
The image shows a juxtaposition of three dropdowns from the same toolbar in Google Docs. Why does only one of them have a checkmark next to the active setting?
-
A wayfinding sign not following gestalt principles
The gestalt principles or “laws” is a theory of human eagerness to see patterns by “making up” structures and relationships between indvididual parts – even when, strictly speaking – they are not there. Probably the most famous illustration of these principles is the Rubin Vase which can be viewed either as a vase or two faces depending on the viewer’s perspective.
The law of proximity
One of the gestalt principles is the law of proximity. That is, the notion that we perceive objects that are spatially close as belonging to the same group or entity.
When a principle such as this is not followed by designers, things can go terribly wrong. Or if you’re lucky, just annoyingly wrong. Let me give you an example.
A misleading airport sign
In an unfamiliar airport on my quest to finding the metro station I encountered this sign:
Or in a more readable version (the white and orange text is Danish and English respectively):
In my hurry I just quickly scanned the sign. And mentally I connected the Metro text with the arrow pointing down left and thus I went to the left.
As I didn’t find the metro station to the left I returned to the sign to take a picture (the blurry one above) and find out what had gone wrong.
The sign spurs a wrong mental mapping between text and arrow
Can you see the problem with this sign considering the law of proximity?
The designer intended to visually connect the Metro text with the arrow pointing up right, but got it wrong. The proximity of the Metro text and the leftmost arrow so-to-speak trumps the thin horizontal line separating the two disparate rows of information. This way the arrow to the far right is easily missed as in my case.
3 proposals for a sign redesign
So, how could the design of the sign have been improved? Without adding or removing elements but just moving things around lets have a look at 3 proposals.
Proposal 1
Proposal 2
Proposal 3
It’s hard to tell which is better (probably 2 or 3) but I bet that each of the three are superior in terms of usability compared to the original design.
Gestalt principles are useful in user interface design
This was an example of what can go wrong when gestalt principles are not followed on wayfinding signs at the airport. But the usefulness of these principles applies more broadly to user interface design – not least in the software world. For instance, the principles can serve as guide when judging the usability of design proposals and in understanding why test users may have problems navigating interfaces.
Theme: Linear by Peter Vidani — Modified by Andreas G. Ibsen
