Romain Vuillemot

I’m a big fan of Dexter (the TV series).

I’ve also been doing some research on Email, particularly on usages and user interfaces (UI).

But it actually does not require any strong background in Email, just being a regular Email user, to understand that during Season 6 Episode 9 (S06E09), the scenarists (or whoever is in charge of the set of the series) have down a terrible job in designing the Email interface that Travis Marshall is using to reply to a blog post from “Doomsday Adam”.

Look at the crime scene (image below, click to enlarge). It has been captured at 00:10:30 in the episode. This image may hurt the sensibility of any UI designer.

Find the 7 mistakes!

Before giving my answer, I am just wondering: how is it possible to make so many design mistakes in one single interface? Email clients are widely spread, they exist plenty of those for absolutely any single Operating System. So it’s not difficult to use any (or at least to copy) and it would be a good product placement. And nearly EVERYBODY uses Email, so making a bad copy would be noticed by many (like a fake care or toaster would be noticed).

Anyway, my asnwer..

My top 7 mistakes:

1. Send button is never a double-way arrow. Uusually one way, the other one is on the button to check/receive Emails.
2. Dot web (.web) is not a standard Internet top-level domain extension. Email is not even the web, it is the Internet. Email was created in circa 1971, way before the WWW.
3. From is never a plain text field. But a selection among pre-configured accounts.
4. Size-limited “From:” / “To:” / “CC:” /.. text field. Why making them so small in width? At least make the subject field as large, just for interface consitancy.
5. Limited number of recipient. You can usually add more “cc:” or “to:” which does not seem to be allowed in this case.
6. What about BCC?
7. Missing advanced text formatting. Multiple fonts are provided, but no italic, bold, smiley, or whatever advanced formatting should be there if you allow multiple fonts.

Alternative titles for this blog post:

A question I sent to l’Ordinateur Individuel on how to use the startup folder in Windows 95 #JeTwittEn96.

Looking for a visualization contest? Here is a list of past/upcoming challenges http://t.co/rDCXGPWg #googleviz #dataviz #infovis #opendata
@romsson

The calendar page can be found here.

In the frame of the 2012 French Elections Google dataviz contest, our Bubble-T Twitter experiment (What if Twitter can vote?) made it to the final and has been awarded (we won Samsung tablets and the experiment should appear on the Youtube 2012 French Elections  channel). It was developped with Samuel Huron, Raphaël Velt, Yves-Marie Haussonne (from IRI, Centre Pompidou) and myself. You can follow the discussion (i.e. Buzz) around it on Twitter or around the contest using #googleviz.

Our goal was to design a brand new visualization of Twitter. We were particularly interested in 1) enabling monitoring of live tweets, 2) while also keeping an overview of the previous tweets over a day or a week.

Thus, it became obvious to blend the following things and see what happens:

+

+

I let you see by yourself what Bubble Tea, Angry Birds and M&M’s can do together:  http://dev.fabelier.org/bubble-t/

@bubbleT2012 as an #xkcd comics (sort of http://t.co/9OaRlkYi #googleviz
@romsson

My lessons learned during our two weeks of development were:

• Box2D.js is a great physical engin. It’s an adaptation from a C++ library, so you have lots of example and documentation on the web (not always in JS). Using it is very simple:
1. Set up a physical world and physical properties (gravity, ..).
2. Create balls with an origin and a force vector as initial input.
3. Loop everything to update the rendering (you can parameter the refresh/framerate).
• Animated transitions are difficult between two views (such as the balls and the timeline), since their exact position on the layout can vary and since they can response diffently (different HTML elements, one is Canvas, the other SVG). And as usual, this is the thing you cut when approaching the deadline and expecting something to work
• It is difficult to guaranty a smooth animation because the browser may get busy for some reason and because the physical engine is ressource greedy (especially with many balls and collisions to handle).
• Finally, even if the interface is compatible with mobiles and tablets, it is terribly slow (TODO: benchmark other physical engines) but still fun.

Anway, try it! http://dev.fabelier.org/bubble-t/

It should appear on the Youtube 2012 French Elections  channel soon.

UPDATE 03/01/2011: It is available as a tab on the Youtube 2012 French elections channel.

Here is some feedback about the application:

Two people from my research team have co-authored this Twitter vis of the candidates in the upcoming French election: http://t.co/1BThxXxN
@dr_pi

J’adore ce truc !!! Mais assez flippant ..
http://t.co/IbmD5jF4
@patricksamot

Et si twitter votait? : LE décompte des tweets politik en temps réel : instructif en vu de #2012 http://t.co/3i0jyUHU
@bat_javary

@bubbleT2012 dans le Blog EchosDataviz http://t.co/68Z3Cgia via @LesEchos #googleviz
@romsson

This is a test post from , a fancy photo sharing thing.