A gateway that will keep you away

February 2nd, 2010

If you haven’t heard before about Bloat Web & bad usability of Flash web sites, here’s a candidate.

jal.com world gateway screen

jal.com world sites gateway screen

Fly Heavy

Here’s an analysis of the page content:

  • 51,22KB CSS of stylesheets
  • 23,99KB of Scripts
  • 891,39 KB in Flash animation

A total of 972,27 KB… just to choose a local website !

Just hope that you will never need to change your booking in a hurry from your “real internet” mobile phone or your notebook with mobile broadband access.

“Sorry mouse only !”: No tab navigation, no arrays keys. We already know that flash websites are the worst thing for usability.

The “smart” alternative

Page code analysis reveals an alternative to the flash content… linking to an image map menu.

  • 51,22KB CSS of stylesheets
  • 23,99KB of Scripts
  • 157,4 KB in Flash menu screenshot image

Another total of 232KB for 4 links.

The smart keyword in this title is ironic, indeed. The alternative does not trigger when the flash plugin is missing but when javascript is disabled !

<script>
// load flash
</script>
<noscript>
// show image map
</noscript>

Spit on tranlations

October 19th, 2009

Did what ?!?

“MPlayer spit”: Here’s the French translation for “MPlayer crashed” in the multimedia player frontend Smplayer.

mplayercrash

Besides having this wrong translation, let’s focus on the way the alert dialog has been designed:

“Mplayer crashed. See log for more information” “OK” “See log”

Well we have 2 informations “Mplayer crashed” & “See log”, and two actions buttons. The “OK” button is not sufficiently explicit itself to link it to any of the two sentences. You can only guess that “OK” means “Do nothing” because the “See Log” action is another button. Remove the “See Log” button and you’ll never guess if pressing “OK” will bring you to the log, or do something else. The right way is “One Dialog, One Information” and the related actions.

One good solution would be :

ALERT “Mplayer crashed”, then the two buttons, ["Get more information about crash"] ["Resume"].

Don’t mix multiple informations on an event dialog… and check twice your translations !

Select your region, but don’t miss the zone

August 11th, 2009

New website, new frontpage, but still not better than previously reviewed.

You choose, you click, it just doesn’t work

You can’t choose your locale unless you guess you have to click on the second part of the list. Links ? Text ? Same design !

lge main screen

lge main screen

Let’s get back to basics: Links must be identifiable !

The best way is still in keeping the default underlining. (don’t rely on colors because of people’s disabilities).

Gnome invest: GUItime -90%

August 11th, 2009

Gome-Invest is a gnome applet intented to help you tracking your investments. It should retrieve all your listings from the yahoo finance service.

Totally distraught

On start, the first step is to enter stock and share references along with purchase price.

invest0

On clicking “Add”, it lists a line with the “GOOG” code (google’s shares). Clicking on it just hightlights. No contextual menu. Further tries later, I finally find that you need to double-click this default value to be able to modify it.

invest1

Any correct listing appears in a popup list when clicking the applet icon.

invest3

The only other contextual menu only allows to “Refresh” data. Any other actions are toolbar related.

invest4See no problem ?

There’s major misconception problems. First, if you noticed above, you can’t edit your listings after the initial step: There’s no way to access it trough menu. Then if you make a mistake in the share code (like i did), the applet will be totally locked: No code checks on input, no way to edit and an application that no longer goes further than a generic “can’t contact server” error message.

sensors2

The only way to edit or fix a bad quote code was to delete the application preferences file in the .gnome directory. Then go to bugzilla…

Dirty stack

July 15th, 2009

What kind of control do you think it is ?

arcep

no comment...

Find the answer here. Hopefully the action is not labeled “check”.

Testing your icons before release

July 15th, 2009

Usability Methods is a new, but not free, icon evaluation service, supposely based on scientific method.

Just publish your icons through them, send invitations and read the results.

Select the icon that fits best

Copy: Select the icon that fits best

But there’s few annoying things for a website targeting usability: First they show you an icon set on the left, then the text it should mean. Reading left to right, they’re giving the answers before the question… really strange. Then the answer zone looks like a scroll or progression bar. Choose an icon, it fills the beginning of that zone letting you expect that more icons could be added and then that you have multiple choice. Again, quite disturbing.

Currently, they’re running the K3B Oxygens icons evaluation campaign. Running the test myself, it also shows that the evaluation form lacks of free user input. What do you think fits the best for “copy” ? I personally don’t believe that items shown on previous picture are really expressive. Copying is taking one and making two or more. I’d vote for something like this one :

Copy

Copy

Case study: videolan’s volume control

July 13th, 2009

Videolan is a really popular Open Source multimedia player. In it’s most recent versions, the interface has been redesigned with the Qt Toolkit and introduces a new audio volume control.

This control now provides the ability of amplifying sound, which is more than just setting up output levels. It ranges from 0% up to 200% (+3dB). While this might be really useful for some DVD or bad audio tracks, this initial design brings many problems.

VLC volume control with built-in amplification

VLC volume control with built-in amplification

Users can’t set precisely the volume to 100% without applying amplification.

The 100% level is not materialized in any way in the control and the user has the only option to slide volume approximately until it reaches 100%. Aiming at the right level is difficult and going too far triggers amplification.

Volume control’s shape doesn’t provide efficient visual feedback.

The triangle shape gives wrong feedback at extreme values, especially because the control ranges up to 200%. For example, a 50% level which should appear like a quarter of the shape seems really less because of the covered surface difference.

vlc volume level 50%

Volume level use colors depending on arbitrary values

As commonly seen on many mixers controls,the increasing audio level goes from green to red. This is inspired from Vu-Meters and in most of the cases wrong.

analog vu_meter (author lainf, wikimedia commons)
Vu Meter

Traditionals Vu-Meters have a red zone working in combination with a gain button which works in addition to the regular volume level. The reason is that not every soundtrack have the same peak and average audio signal levels. Gain is used to “align” to the upper bound and so “maximizing” the amplitude of those signals. When post-processed it is called “normalizing”. A sound signal using the maximum allowed amplitude gets optimal dynamics.

norm1

Audio level graph. Audio signal does not use full amplitude

Normalized audio

Normalized audio, max peaks reaches the upper level



On recent hardware mixer tables those Vu-Meters are usually replaced with Led Vu-Meters, adding some yellow zone around -3dBa amplification and green for eveything under. This seems the inspiration of this widget.

But you can notice that colors are static and then: 0% is green, volume at 100% is orange and amplified volume is red. While you might not see the problem, this is obviously wrong. Red on Vu-Meters means that the sound peaks are too high: it’s saturated. Those feedback colors can’t be set statically as each audio track has it’s own signal.

+8db amplified audio

+8db amplified audio. Here most of the peaks are "cut"

+20db saturated audio

+20db saturated audio. The whole signal saturates and results in the worst audio quality.



A short and expressive example: Take an audio track with just silence, play it at 200% output (with 2x amplification), you can guess that a 0 will still result in a 0 and won’t get any more amplitude. While this widget would show a “red” saturating level.

Muting audio hides values

When audio is muted, the level switchs to 0%. Unmuting will result in restoring an unknown value. Hope that you don’t mute to take a long phone call in the evening and restore it late at night in the middle of gunfight scene :)

vlc3

Duplicate level feedback from icon’s waves and slider shape.

The speaker icon next to the volume shape has waves dynamically drawn according to the current level. This is duplicate audio level.

Widget redesign clues

sample sliders

sample sliders

First sketches aims at drawing a control providing volume level reference and dynamic amplification feedback.

Refining those ones, the next step is to get rid of the triangle shape to a rectangular one and relocating the amplification ability as an option.

The last sketches is a thought about a two axis control with dynamic signal visualization.

Design your own design through wrong design

June 26th, 2009

Qt Designer is an interface design tool for the Qt framework.
This tool that most Qt interface designers will use also provide a bad UI design experience and example:

The branch selector or the version control tool uses the wrong widgets. Each branch is exclusive and they’re using checkboxes, insuring exclusive selection though code.

Qt creator, Git version control branch selection

Qt creator, Git version control branch selection

Again, exclusive choice is not intended to be checkboxes but radio selectors.

Firefox burns rules

May 16th, 2009

Even firefox can burn UI design rules.

firefoxWhen a javascript script runs for too long, Firefox pauses it and asks the user if he would like to stop or resume it. But on the UI, the developer has reversed the symbols, making any choice really confusing.

- (Red Cross) Resume : This resume the script, allowing it more time to run

- (Curly arrow) Stop the script : This stops the script, and returns to the document.

The error comes obviouly from the fact that this popup appears when the script is condidered as faulty: the ” Resume ” button is considered as cancelling the script supervisor action (which is intended to stop the script), and the “stop the script” button considered as “return to the page and resume browsing” (as the script is blocking the browser).

Some subventions for their UI !

April 30th, 2009

The French Agricultural Ministry decided to give access to the subventions amounts of the European Union program Common Agricultural Policy (CAP). And here comes again from officials another bad example of web user interface. Here’s the search form:

French Common Agricultural Policy subventions lookup

French Common Agricultural Policy subventions lookup

  • No alignment. Every interface designer should keep in mind a web UI form is supposed to be organized like a real paper form: the user will understand it the way a document is structured. If you choose to add some indent some options, it will be read as a sub-paragraph (indexed paragraph) or sub-bullets.
  • Differing syntax between options. Through the different radio options, you’ll encounter totally different syntax: “Feader Subventions (excluding loans)”, “Loans (Feader)”.
  • Radio options are used for optional exclusive choices, but you can’t deselect once selected unless you reset the whole form.
  • Confuse, overlapping choices in the radio selectors.
  • Confuse, overlapping choices in the amount selectors.
  • The most surprising thing is the action buttons in the results zone:

pac3While logically no result zone should appear if there is nothing to display, it might be difficult to guess that the form submit buttons are in the results zone, and harder to notice when customized.

No doubt, this interface has been designed by the code developer

Here’s the root of all these errors : The interface is constructed to match  the way the code works. You can clearly identify this from the amount restriction choices. There’s no logic, except if you bound each radio option to the operator applied in the SQL query.

O - Equal or less -> <= x
O - Greater than -> >= x
O - Between x and y -> x >= AND <= y

A working solution prototype

This solution is a translated one, but you can guess that it has clearer syntax, better logic, resetable exclusive selectors. (Submit button missing).

Example of fixed UI

Prototype of a fixed UI. In real applications, inactive subfields should be grayed