Maemo UI improvements blog.

January 17, 2008

Chapter I: the Tray.

Filed under: Light UI modifications — Tags: , , , — Andrew Zhilin @ 21:50

Tray is a great feature of Maemo. It really helps you to access all “everysecond” info like battery and connection status, volume and brightness control and some others, instead of digging deep the control panel. Also third-party software can place it’s status icon to the tray, that will help you to interact in some way. For example, Pidgin adds it’s account status to the tray and you can easily access Buddy list by simply clicking on it. On the home screen, tray looks very slick and tasty.

Looking on that thing from designer’s point of view, right now we have one row, that caries two width-equal blocks. And of course “minimize” and “close” buttons. The first block is “Window title”. Let’s take a look on it. As you can see on the picture, only applications name is making sense in whole 280 pixels wide block. “Media player – Now play…” or “Web – General – Internet Tabl…” – lots of info are held in phrases after applications name. :) Generally, window title was created for “big” OS’s just for arranging… windows. To help you navigate thru tens of opened windows of one program. Here’s the example.


As you can see, I can easily locate the window of Firefox with YouTube just by reading first symbols of page’s full name. It’s easy. But it makes absolutely no sense, when you have only one page on the screen, like we have in Maemo.
The second block is “Tray”, described previously. It’s 280 pixels wide too and can carry 7 applets in a row. If it’s required to show more than 7 applets (and it’s pretty easy to make, not even specially for showcase, but in real environment), than “tray” makes a second row with the rest of applets. It looks pretty crappy.

The solution is simple. To make “Tray” 400 pixels wide, that it can carry 10 applets without making second row.

Much better, isn’t it? Well, let’s go further. Why do we need a name of the application? What is it for? The name helps us to distinguish applications. It’s useful in a list of running processes or software for example. But definitely, it’s useless in case of Maemo. Cause you don’t need to know the name of application, that you have previously selected from sidebar menu. And even if you need to, you can click home or just tap’n’hold on the small sidebar icon and the name will appear. In Maemo title makes very important Hildon function — it’s a dropdown menu which contains all options of the software. So, we can’t totaly remove it. The easiest way would be to remove title but leave the “dropdown” icon. Some art work and here it is:
What we have now, is gorgeous wide tray, that can carry up to 14 applets. But all these icons will make some mess around and we need some arrangement tool to make small groups of icons for example “system status”, “messaging” and “other”. The simpliest arrangement tool that was ever invented is a space :) So, it fits to our needs perfectly.
To finish with tray, I’d like to suggest a “2 din” (stolen from car stereo terminology :) ) applets, that are 80 pixels wide combined with “1 din” applets that are 40. It’s irreplaceable feature for kind of applets, that should hold more info than the standard one or need to be just more visible. For example clock (on the illustration above) or weather forecast.
Thanks for reading.



  1. My first tray-related remark is about the mess that is the Bluetooth icon.

    A bit of history: Back in the days of yore, when Nokia first came out with the now-forgotten Internet Tablet 770, there was no Bluetooth icon; Nokia didn’t think users should have access to BT functionality, other than by pairing their phone to the tablet, which had to be done from the Control Panel.

    But some hackers thought differently, and they wrote a Bluetooth applet, complete with icon for the tray. This icon had the interesting property that it was persistent: If Bluetooth was “on”, it was — well, blue. Obviously. But if the user disabled Bluetooth, the icon would not go away, but rather turn grey, thus making Bluetooth on/off a one-click operation from the tray.

    Enter the geniuses at Nokia. When they discovered that everybody loved this extended Bluetooth functionality, they naturally (I’d like to think they thanked the hackers who made the original version, but I’m sceptic) incorporated it in subsequent releases of the operating system, but — and this is rapidly becoming exemplary of Nokia — they completely ignored the user-friendliness of the blue-grey icon and decided that, if the user turned Bluetooth off (which one tends to do, you know, to conserve some gogo juice), the BT icon would disappear from the tray, requiring the user to open Control Panel, go to the Connectivity section and turn Bluetooth back on, a needlessly tedious and time consuming operation.

    There have been bug reports, angry posts, even incantations to Satan ever since that stupidity first surfaced and yet, even in ITOS2008 it hasn’t been fixed.

    So, in conclusion, I wouldn’t hold my hopes up for Nokia to do anything with what’s going to be suugested here. Sadly.

    Comment by Karel Jansens — January 19, 2008 @ 23:26

  2. I’m not sure about totally getting rid of the application name: I can see 2 issues here:
    1. Consistency with Home screen: If we resign from text in applications, we should get rid of the “Home” text. But on the home screen menu icon is on the dark background, so it is hard to notice. (I think menu interface and menu icon in maemo can be good subject of your next blog entry :)
    2. If we resign from active application name, we might have possible security issue: User will not be sure, which application is on top and asking for data entry.
    From aesthetic point of view I think that leaving just the menu icon makes the top part of the screen not “balanced” – dark line with just one bright point spot for the menu icon…

    Comment by Jakub Danecki — January 20, 2008 @ 01:20

  3. 1) Yes, the problem of bluetooth applet still is on the IT’s. Well, I can uderstand developers, they’ve made it “temporary visible” because they thought that you won’t need it when you’re offline. And when you enable BT phone connection it appears. But they’ve missed the point of file transfer and of course A2DP. I think with my tray space soluion they don’t need to make space for some more often using icons. Now they can even place some useless icons with BT )))
    2) I think that problems with not so clear spotting and “balance” is easily solves by making menu icon the same proportions and as thick as “minimize” or “close buttons. Then it will be more visible =)
    P.S.: I’m really happy and appreciate your activity! So glad that this theme is interesting for the Community! Thanks for discussion, keep it up!

    Comment by tabletui — January 20, 2008 @ 10:08

  4. The obvious solution would have been to make the connectivity icon a true connectivity icon, instead of just a WiFi icon. I can enable and disable WiFi from that icon, it changes according to the WiFi status and it never disappears. So why does Bluetooth need a different icon, why not simply give the “antenna” different colours of “waves” depending on what wireless services are on/off? Just a few extra lines in the icon’s menu, a few pointers to scripts is all it would take.

    If Nokia can’t get a simple, obvious, time-saving and user-friendly detail like this right…

    Comment by Karel Jansens — January 20, 2008 @ 12:07

  5. Well, the same icon for the wifi and BT makes some mess :) For example, how you would show Wi-Fi and BT connection same time? :) I think 2 separate “always visible” icons will be the best choice to make easy to read and handy tray :)
    I’ll post a new chapter, describing my vision of tray icons behaving — this theme have many details to discuss. Stay tuned! :)

    Comment by tabletui — January 20, 2008 @ 12:24

  6. Solution for connectivity icon is quite simple: it can be just double (showing status of both BT and WiFi at the same time – 2 smaller icons for example, and both can change colors from red-offline, white-online, blue/green-connected). Much more interesting subject is to define functionality (offline/online mode switch here would be much more user friendly, that the one in Power button menu).
    But until we have Bluetooth PAN and A2DP we cannot do it effectively, but we can imagine something list of entries like: offline/online mode (I see no point in turning on/off BT and WiFi separately), list of favorite (3-4 max) devices/conections, 2 sub menus for BT deivices/connections and WiFi networks (only defined) and then access to BT pairing and configuration app/interface and WiFi network management.

    Comment by Jakub Danecki — January 20, 2008 @ 13:02

  7. Different icons for “WiFi on”, “Bluetooth on”, “WiFi and Bluetooth on” and “everything off” is all it takes. Drop the antenna, use a red bar for WiFi, a blue bar for BT and grey for nothing and you’re done. It’s not as if this is an icon the user is going to consult every five seconds…

    Comment by Karel Jansens — January 20, 2008 @ 13:03

  8. Let’s leave the icon theme for the next chapter — I’m already working on it. Will be released in hour or two. It’s very complicated problem — how to make icons user friendly and informative the same way. There’s a lot to discuss :)

    Comment by tabletui — January 20, 2008 @ 13:16

  9. I agree with your statements, but there is no need to make the design fixed at one style. Simply have a control panel selector which chooses 7,10 or 14 icons.

    The window name could then be added to the top of the drop down menu, and if a number of windows (such as MicroB) were open in the same application there would be a list of names to allow the window to be selected.

    I assume you’re going to be addressing the drop down menu in another post, but if your going to have a drop down menu make it the full height of the screen to allow as many options as possible – why on earth is it not possible to select a bookmark from the MicroB menu other than througgh a separate application? (the address bar also needs to pop up when the menu button is pressed in full screen – but that’s a different issue).

    Comment by PJE — January 20, 2008 @ 15:40

  10. “It’s very complicated problem — how to make icons user friendly and informative the same way.”

    Actually, it’s rather simple: Icons are never user friendly and informative on their own; in that they’re not that different from keyboard shortcuts. The user still has to learn what an icon means. The advantage of icons is that they work better with our pattern-recognition skills and — obviously — that they’re there to be seen. The trick in icon development is to make them different enough from each other and at the same time try to provide some visual clue as to what they’re doing. The reasoning behind the clues needs to be the same for all icons, but it’s not really a problem if they seem somewhat arcane at first sight. Remember, it’s the pattern recognition that counts most, not the information the icons provide.

    I once, in a forum long ago and far away, tried to break a lance for a Natural Language User Interface (NLUI), which basically is telling the computer in your own words what you want done. This would do away with the whole mess of desktops, icons, pointers and whatnot, as you could simply type, write or speak your mind and the computer would understand you.

    The problem is that this requires a hefty lot of AI on the computer’s side, which tends to be a bummer. Still, being able to type: “Find all photos between march 2005 and december 2006 and move the ones that have ‘pr0n’ in their name to a new folder on the USB stick. Name that folder ‘hubba’. Then unmount the stick.” and have a computer actually do this still appeals to me.

    Comment by Karel Jansens — January 20, 2008 @ 15:56

  11. An addendum to my previous post: If you want to see an early embryo of what a NLUI might become, you’d have (as usual!) to find a Newton MessagePad and try out its “Assist” function.

    Prepare to be amazed how even a stupid, nearly braindead AI implementation can appear to understand the meaning of your words.

    Comment by Karel Jansens — January 20, 2008 @ 18:07

  12. I always thought that the icons for battery, brightness and sound are a waste of precious space, so as i mentioned on the ITT, my proposal is this:

    Comment by Bundyo — January 20, 2008 @ 18:56

  13. Nice, but unless the icons in the tray can be sub-divided you’re going to need an awful lot of bitmaps to cover all possibilities. :)

    Comment by Karel Jansens — January 20, 2008 @ 19:37

  14. Yes, that’s also true :)

    Comment by Bundyo — January 20, 2008 @ 19:46

  15. Well, pretty handy idea, need to try it on real device. Will it be readable on the sunlight or just in “quicklook”?

    Comment by tabletui — January 20, 2008 @ 19:54

  16. You’re very welcome to read and discuss Chapter II: the Tray Strikes Back :)

    Comment by tabletui — January 20, 2008 @ 20:28

  17. The tray should be variable length. New applet – more tray. Applet is removed – application name can claim the space.

    Comment by Ville — January 21, 2008 @ 16:42

  18. I like the suggestions put forth in this post towards utilizing the space much better. I especially like the idea of taking away the program name but leaving that notation for a menu-dropdown. Slick, simple, and just nice.

    I would argue that if that ‘din’ measurement is used, that it should be used throughout the OS. Scrollbars, menu items, and even pen/finger items should be based off that measurement and that would certainly clean up a lot of what we all notice.

    Comment by arjwdotcom — January 22, 2008 @ 15:46

  19. Am on my tablet now and needed to minimize the screens to see the time. It would be great to at least see a new clock applet developed that does what is described here.

    The other thing I see in this article that I didn’t see before was that idea of making those things that are system level like properties and program statuses into easilly readable icons in that status are. Doing so would give a ‘desktop appliance’ feel to the IT, but could also lead it into use in other areas where the UI could play more different roles.

    Comment by arjwdotcom — January 28, 2008 @ 04:14

  20. I love the idea, as I hate having to have the second level status bar. I attempted to modify my current theme to allow for a wider statusbar area but it still creates the second level and the little “expand” icon:

    Looking into the source code for the hildon status bar it appears that a max of 7 items is hardcoded into the code. Is there any way to easily rebuild the status bar piece of the OS?

    Comment by fuzzcheck — February 24, 2008 @ 22:17

  21. First time WordPress user, my img tags got stripped:

    Comment by fuzzcheck — February 24, 2008 @ 22:19

  22. Sourcecode:

    #define HSB_MAX_NO_OF_ITEMS 30 /* maximum number of items */
    #define HSB_VISIBLE_ITEMS_IN_ROW 7 /* max num of visible items in one row */
    #define HSB_VISIBLE_ITEMS_IN_1ROW_EXTENSION 12 /* max num of visible items in */
    #define HSB_VISIBLE_ITEMS_IN_2ROW_EXTENSION 18 /* window panel extension */

    /* FIXME: check the true marging */
    #define HSB_MARGIN_DEFAULT 6
    /* FIXME: Fetched from matchbox theme, should be asked from the panel */
    #define HSB_ITEM_HEIGHT 50
    #define HSB_ITEM_WIDTH 40

    Comment by fuzzcheck — February 24, 2008 @ 22:30

  23. Wow! Great attempt, Fuzz! looks really interesting. Maybe I’ll ask this question at the maemo developers mailing list, if anybody knows anything bout it.

    Comment by Andrew Zhilin — February 29, 2008 @ 18:00

  24. […] that stuff required space, that we could get only on statusbar area. But I’ve remembered my very first post in this blog, where I was talking bout statusbar modifications. There I got rid of title and that […]

    Pingback by Mer UI: the Beginning « Maemo UI improvements blog. — January 18, 2009 @ 03:01

  25. […] that stuff required space, that we could get only on statusbar area. But I’ve remembered my very first post in this blog, where I was talking bout statusbar modifications. There I got rid of title and that […]

    Pingback by Mer UI: the Beginning « maemo blog — September 2, 2009 @ 13:59

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at

%d bloggers like this: