experimenting
Here are three experiments for elisa’s top-level menu I’ve been working on during the last week. The first is using the stock elisa-artwork and a layout-mode I call “chain”. The second and third variations both use a “style” I quickly threw together. It uses Tango-icons and a simple background drawn in inkscape. The font used is “MgOpen Cosmetica” (due to the lack of the right hardware in forms of cable and computers with working TV-out, I was not able to test this font on an interlaced display).
The layout-mode in the third example is called “carousel” and inspired by FrontRow to some degree, but it’s better *g* When you make it move faster, which you cannot do in FrontRow by the way, the elements are pulled together more closely to be “able to rotate faster”. This is of course just made up and not needed, but I like to give this thing that “realistic touch”, which reminds one of the experience one would get on a carousel.
There are still issues remaining to be solved for the carousel-mode, so I do not call it done yet. And yes that asian text is coming from an unicode-string (and hopefully correctly translated) and rendered nicely thanks to pango/cairo.
 (click to play back, ogg/theora, ~2.4 MBytes) |
 (click to play back, ogg/theora, ~1.8 MBytes) |
 (click to play back, ogg/theora, ~2.4 MBytes) |
June 29th, 2007 at 1:48 pm
I’m feeling the third one.
Thats how I want it
My reasons well…
The first one: Don’t like the icons, I had those ones on my freevo at one point and decided they are horrific to look at. This is of course irrelevent, the behavior is better in the first than the second and this is why…
The second one: The icons blur out, if that was my home screen I don’t want to squint to try and figure out what it is, if the text was shown blurred slightly etc… then it would probably work better but it still doesn’t excite me.
The third one: ROCKS MY WORLD! The perfect combination of blurring/focussing text is show and blurs out with the image, the images are tango goodness and it seems to have some gravity to the centre when circulating quickly which as you’ve said gives for a much more realistic feal.
Keep up the tremendous work, and I’ll see you soon
June 29th, 2007 at 1:48 pm
I really like the carousel - it feels like a more natural way to "sift" through options. I would expect selecting one of the options to fade to a different layout - I find a clear difference between top level UI and sub UI to be perfectly ok, as long as all the sub level is consistent and easily discoverable. I’m not sure the "chain" way of doing things is entirely "the right thing" - especially the way the selected menu option relocates.
Ultimately though, all three could be options
June 29th, 2007 at 2:00 pm
I prefere the third one too. Because of the same reasons Karl Lattimer pointed out. But the second one could be nice if it’s also rotated, i think there’s no reason why the "DVD" (or anything else) Button should be centered.
June 29th, 2007 at 2:06 pm
The carousel version is by far the best, and I much prefer the Tango artwork over the stock elisa artwork.
June 29th, 2007 at 2:17 pm
@Karl: What I presonally don’t like that much about the first one is the lack of contrast between the icons and the background. But that’s the way it currently is in Elisa and I cannot do much about that. But new skins and themes for elisa will be able to fix that. The blur in the second example is a bit strong perhaps. Probably overdone a bit because I want to brag about the approach I used a bit to much *g* It is even working on OpenGL-hardware without shader-capabilities. Although the third one is not perfect yet I also like that one most right now.
@Jon: Selecting a focused/hightlighted icon in carousel-mode behaves just like in chain-mode, just not shown in the screencast. You are correct about the needed shift about user-focus that needs to happen, when the selected item relocates. That’s not optimal.
@lakerz: The main reason for having the focused/hightlighted icon always at the same spot is to avoid forcing the user to shift his/her attention-focus on the screen. Another thing to take into consideration is that one should avoid moving items off the screen when moving around in the available options. The user should at least see all possible options, if possible (about upto 7). This of course does not work if you have a couple of dozens/hundreds/thousands of options (e.g. music-files).
June 29th, 2007 at 2:58 pm
the third one is really nice (although the effect on the second one looks cool, too). But: the objects don\’t seem to move on a real circle, it more looks as if they were moving in straight lines between endpoints on the circle. It gives the impression, as if the framerate were low or something likewise, it just does not look as perfect as it could be…
June 29th, 2007 at 3:48 pm
Yup…also the 3rd one…I agree with the other guy that it’s the more natural way to sift through choices. In the 2nd one, when the icons disappear, it’s a little disorientating.
June 29th, 2007 at 4:17 pm
Really like the third one. Although I do think that the music icon in the second/third sets should be reduced to just the musical note — the CD behind it looks exactly like the DVD, making the two seem too similar. Plus, it\’s not really about playing CDs, it\’s about playing music. Does Elisa even play CDs? But that\’s a cosmetic thing. If we were to get right down to the semantics of it, the musical note is restrictive, too — it says \
June 29th, 2007 at 5:08 pm
Okay, so when the CAPTCHA fails, it both cuts off your comment, and "escapes" your apostrophes. What I was saying was: the musical note says "music" not "audio" (so which menu do I go to to listen to my audiobooks?). Though most of us do understand it semantically. On the other hand, DVD should frankly be a submenu under "Video" — it is a particular use-case, not a distinct or different task. Still, all told, the carousel looks really slick….
June 29th, 2007 at 6:46 pm
@ Drone: I don’t like the 5 section top-level menu myself. I’d rather go for 4 (Audio, Video, Photos, Services).
June 30th, 2007 at 12:57 am
Fist one: Too much work for my eyes. Eyes only see things when focus, make a simple calculus of the (unconscious but noticeable) work you have to do in a big TV screen for navigating options.
Second: Too work again. Confusing blurry icons.
Third one: Love it, eye movement solved, space illusion with the reflections, and blurry proportional to distance.
Captcha: I have to copy this post, because if I fail to resolve it, is going to remove everything. They are 6 right chars and two diffused. Oh, and people has to get that there is no "o", not so simple as you believe.(a lot of people see 0 between four letters eg ED0A and put EDOA)
If only you changed your captcha, visitors life would be 40% easier
PD: one time rejected by captcha, seems like the less diffused symbol was not the right one.
Sorry if repeated but screen blanked second time(no output)
June 30th, 2007 at 12:10 pm
Vinicius Depizzol did some interesting Elisa mockups some time ago: http://vdepizzol.wordpress.com/2007/06/17/ubuntu-is-going-to-media-center/
Using blur on the unfocused objects seems to help telling what’s the current focused object is a bit apparently.
- Andreas
June 30th, 2007 at 12:30 pm
@ Andreas: Very slick style! Best UI-proposals for Elisa I’ve seen so far. Too bad the fragment-shader framework isn’t hooked up yet in pigment. Otherwise I could implement those proposals in half a a day or so.
February 7th, 2008 at 9:39 pm
Nice things… Even better than new Elisa’s GUI (actually: FrontRow UI).
Elisa now lacks nice UI. Now it sucks…