agib.dk on Users & Interfaces

In a left menu: A useful marking of the menu hierarchy using...

Sun, 13 Jan 2013 15:23:36 +0100

In a left menu: A useful marking of the menu hierarchy using coloured vertical bars.

HTML/CSS3 technique: Rounded tabs with "cutout corners"

Mon, 19 Nov 2012 17:40:00 +0100

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...

Mon, 01 Oct 2012 02:03:00 +0200

A very “useful” breadcrumb: Home > Passenger cars > Clio > Clio > Clio > Overview…

Reminder: The best UI is no UI

Tue, 04 Sep 2012 01:02:26 +0200

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

Sun, 24 Jun 2012 21:23:00 +0200

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 :

Try it out here: Demo 1 or Demo 2, NOT Demo 3.

When icons fail to deliver

Sun, 18 Dec 2011 19:31:00 +0100

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:

By the way: In the original design, the full white icon meant fully closed – I think, but I really can’t remember…

A nice little video with a “live” sketchboard...

Sun, 27 Nov 2011 16:54:22 +0100

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”.

Ensuring consistency in the user interface can be hard! Even the...

Tue, 22 Nov 2011 21:13:00 +0100

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

Wed, 16 Nov 2011 23:24:00 +0100

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.

An interesting excerpt from Luke Wroblewski's book on designing UI for mobile first

Tue, 25 Oct 2011 23:03:00 +0200

An interesting excerpt from Luke Wroblewski's book on designing UI for mobile first

We can all forget to write that tooltip text on the gradient...

Fri, 21 Oct 2011 01:04:00 +0200

We can all forget to write that tooltip text on the gradient color stop selector… :)

DesignAday: User Interface Design Trends

Thu, 23 Jun 2011 21:24:00 +0200

DesignAday: User Interface Design Trends:

designaday:

Rob Tannen posted the following question to IxDA.org:

What do you see as the current or emerging trends in user interface design? I don’t mean the big changes like gestural interfaces, mobile devices, social networking, etc—I mean the more specific changes to the information architecture…

An illustrative UI redesign case: Pubtran app

Thu, 09 Jun 2011 21:57:00 +0200

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.

Do you know of any good examples of redesign cases with before and after images then please let me know in the comments?

Cool Proposal For New Desktop Interaction Paradigm

Wed, 04 May 2011 23:05:00 +0200

Cool Proposal For New Desktop Interaction Paradigm:

I’ve seen this video earlier on, but had forgotten how cool it is!

UX Video: Slide presentation artistry

Sat, 30 Apr 2011 19:16:00 +0200

UX Video: Slide presentation artistry:

Fast forward 10 mins into this video to see true slide presentation artistry…

Interesting UI design case

Wed, 27 Apr 2011 23:01:00 +0200

Interesting UI design case

What Touch Devices Lack: Haptic Feedback

Wed, 06 Apr 2011 23:15:00 +0200

What Touch Devices Lack: Haptic Feedback

Trend: Comment Submit Button Bye Bye

Sun, 27 Mar 2011 17:05:00 +0200

A trend not to provide explicit submit buttons in the GUI for committing comments on social websites can be identified. Instead the user submits by pressing the Enter key on the keyboard.

Two site examples

Facebook, for one, has recently removed the submit button, as is evident from this screenshot (the submit button used to be in the lower right corner):

As another example, the Q&A forum for user interface professionals UI.Stackexchange.com has a somewhat confusing combination of an explicit submit button (“Add Comment”) AND a submit-on-Enter action:

Possible implications of removing submit buttons

So, what are the possible implications of the removal of explicit submit buttons in the GUI/the introduction of submit-on-Enter actions?

One possible (and most likely) implication is the premature submitting of comments. As the user unfamiliar with this mode of interaction is hitting Enter to insert a line break/carriage return s/he instead publishes her/his unfinished comment.

This is of course only a concern until the user becomes familiar with the feature. However, re-mapping the primary action of a (very) familiar control may frustrate users. And although Facebook has never been about advanced/heavy formatting, the (apparent) lack of such a basic formatting feature as line break/carriage return, may spur annoyment as well.

To circumvent the situation users may post either longer unedited strings of text or shorter, more fragmented comments.

OR they must become familiar with the hidden shortcut such as holding down Shift while pressing Enter to insert a line break/carriage return instead of submitting the comment.

The “X” still means “Remove” (“Fjern” in Danish)…:

…but has a special feature for a short while after comment submission: To initiate an edit mode where the shortcut to inserting a line break/carriage return is promoted below the text field:

On a side note, if the user wants to delete the comment while in edit mode, all text must be deleted and the Enter key pressed.

Summing up

To sum up, it’s hard to tell whether this is an improvement in terms of usability and user experience. It will most probably frustrate a lot of users as is evident from an opportunity to get back the explicit submit button: http://sumtips.com/2011/03/get-back-old-facebook-comment-button.html

On the other hand, it reduces the amount of perceived GUI “bloat” and perhaps this new approach will encourage people to post just one point per comment (a more positive perspective on the fragmented comments issue) — or to post less characters per comment (which may benefit speed of reading – and of course the storage requirements on the part of the web site owner).

Joel Spolsky on the “power -vs- simplicity” debate

Mon, 28 Feb 2011 16:48:00 +0100

Joel Spolsky on the “power -vs- simplicity” debate

Is User-Driven Design Really Nothing To Aim For?

Sun, 27 Feb 2011 23:32:00 +0100

Is User-Driven Design Really Nothing To Aim For?