agib.dk on Users & Interfaces

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 :(

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:

Items (bikes) that don’t apply to filter settings are shrinking and disappearing while the rest are taking their places through transitory movements in straight lines from start position to end position.

It is pretty hard keeping track of where the different items are going because you loose points of spatial reference.

Try it out for yourself.

Do: Fade down items that don’t apply to filter settings and make items stay put

Something like this is much better :

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.

Above the seat there was an air-fan:

As you can see, there were two icons referring to the air-fan being fully open and fully closed, respectively. Just by looking at the icons what do you think means what? (read on to get the answer)

My proposed icon redesigns

The problem is that icon pair isn't sufficiently easy to distinguish. A better design would have been anything that would help make the distinction more clear.

2 examples of redesigns:

Ensuring consistency in the user interface can be hard! Even the big players are having trouble.

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

Here at UX.Stackexhange.com can be found an interesting case of a redesign of a smartphone app for planning public transportation trips, aptly (or unfortunately) named Pubtran that a Czech developer did. 

Everybody loves before-and-after shots, so below, I have put together a before and after image, showing the restyling and reorganization of information:

As is evident from the image, some of the changes are:

Repositioning of the name of the end station/direction of a public transportation line so it is placed adjacent to the name/number/type of the line

Subtle horizontal hairlines to distinguish each part of the trip

Visually connecting place of departure with place of arrival through an icon

A more prominent heading for each trip

There's no doubt that the redesigned user interface is easier to get an overview of compared to the initial design.