Maemo UI improvements blog.

December 29, 2008

New Year Countdown Series: #8

Filed under: Heavy UI improvements — Tags: , , , — Andrew Zhilin @ 23:00

Hello again, hope you’re not bored with my series cause I have 3 more things to show you :) And they would deffinetely be last but not the least.This post would be about my vision of ideal applications menu.

Right now Maemo have too big applications menu. You can ony have 36 items for quick access without scrolling. It was a sacrifice for finger friendliness and there are a lot of peole that don’t really like it. But small stylus-oriented rows are not mainstream now so we have to use another way. We can use icons just like on the desktop, it’s space-wise and nice looking. iPhone, for example uses it. But it’s not best solution cause you have no tools to arrange applications. Just plain list. We can use folders like Symbian and Windows Mobile does, but I have another solution.

Let’s combine best parts of different UI’s. Let’s take tabs part from the Maemo UI and icons part from others. This is what we’ll get for example:

16

Right now we can access 16 different applications in only one tab.  It’s pretty much :) And you can arrange them by simple clicking right context button and drag’n’drop manipulations.

By the way you can notice some more icons that were made by the guidelines, mentioned in my hot previous post. As you can see they can be pretty different!

Now what I want to do with that menu is some obvious tool for detail arrangement. So, here’s “Menu Editor”.

21

I don’t think I should explain how it works :) “Swap hand” is great feature for left-handies, now you can ajust tab orientation as you like, not as you must. You can add any shortcut from installed applications, bookmarks or simple files on your device.

Thanks for reading and stay tuned for two hottest articles in the series, it would be great finish of the year!

Advertisements

14 Comments »

  1. I’ve many things to say :

    – Why a such title … i read it because lcuk suggest me to read your post … from the title i think it was something about an home applet that count day until the new years… pfff :) (joke inside)

    – Where i can download it ?

    – And seriously, do you know how to make edje interface file ?

    – And in the case of the precedent question was : ‘Gniiééé ? what that ?’ … i just can say one thing. I like it. And maybe we can mount a project on garage to do it ! (but in python)

    Comment by Khertan — December 30, 2008 @ 19:12

  2. Well :)
    – I’ve got many problems because of that title but I’ve realized that long after start of the series. I apologize for that :(

    – You can’t download it, cause it’s just mock-ups, not actual software :(
    – I think it’s a question for Canola team, they are definitely edje-gurus :)
    – If you saw that ‘Gniiééé’ in my ITT thread “ow to make n*** work as additional PC screen” then it was Russian word that I’ve forgot to delete while translating guide :)

    Comment by Andrew Zhilin — December 30, 2008 @ 19:46

  3. About ‘how tol dowload it’ … it wasx a joke.

    and for gniéééé i mean if you don t know how to do things with edje … i can t do it too :) (main reason is that i don t like edje as i can t compile ‘translate to bitecode a ui source’ as i can t be done on an nit)

    But why this comment ? Because i m mainly found your mockup nice. And maybe you have see, i m not a good designer. So … what i can suggest is working together to make your nice ui a great application launcher/menu.

    At this time i m still thinking on which framework to use. I have time to code only in the train (arround 2 or 3 hours by day on my nit, yep i ve create all my apps directly on my n810).
    This why i suggest python … but maybe with pygame.

    Why pygame ? because clutter will not be available for existing device. And for portability purpose.

    So what do you think of my proposition ?

    Are you interested ?

    Comment by Khertan — December 30, 2008 @ 20:31

  4. Yes. Do it. :)

    Comment by timsamoff — December 30, 2008 @ 22:55

  5. In general, nice icons. MPlayer text is hardly readable though. Partly the fault of MPlayer team for their choice of logo but still. It is not clear for a non-MPlayer-aware user what this application does.

    This, I suspect, is also a reason why on iPhone OS there is no 2 applications which serve the same purpose. No text is used to describe the application. So 3 web browsers could be very confusing even though Mozilla Firefox has brand recognition potentially other applications do not.

    I assume top right ‘X’ means cancel but then this icon is the same as the red X used elsewhere in the screen in the icons. Perhaps instead of using the red X use a red – in a round circle. This is more clear to the user.

    Documents is also very vague (like “Documents and Settings”), and would not cover all personal data for/by the user. I guess there should be a user generated mode, where users can sort their Documents, Videos, Pictures, RSS Feeds, Contacts, and other personal information (perhaps even License Keys e.g. Navicore/Wayfinder license or Settings e.g. GConf) allowing them to easily sync this data but also backing it up or keeping it -by using UI- clearly seperate from contents like Applications which can be easily reinstalled without losing personal settings.

    Comment by allnameswereout — December 31, 2008 @ 02:42

  6. I don’t know if nokia would see this and will use that to desing the fremantle UI, but browsing the wiki I’ve found a page that talks about a community distribution. I think that if you develop this “mockuped” UI it culd be a good point for the community ditribution. With this mockup you solve a “big” problem to the daily user, and make all programs more accessible and visible. Good job!!

    Comment by Opengeek — December 31, 2008 @ 14:14

  7. For the top level categories of applications a *lot* of time went into defining this set:

    http://wiki.maemo.org/Task:Package_categories

    Whether the necessary patches and work will go into the Application Manager and Fremantle application menu hasn’t been made clear.

    The mockups are great, but I’ve seen a disconnect between designers & developers before – where a lovely design gets destroyed by developers extending it in ways the designers hadn’t intended, due to a breakdown in communication at the initial stages.

    For example, some practical questions:

    1) What’s the differentation of content between Applications, Communication and System (assuming Web and Documents contain bookmarks and a file navigator, respectively)?

    2) “New shortcut” – to what? Where does the list come from?

    3) Is the complete menu customisable? If so, where do newly installed applications go?

    I actually favour, for the time being at least, a fixed set of top-level menus (which would do well to be displayed as above), with the contents of those categories being movable (perhaps deletable & re-addable) – this then gives applications a sensibly categorised place to install into.

    Comment by Andrew Flegg — December 31, 2008 @ 14:27

  8. The above prototype looks good, but some of us have a lot of applications loaded.

    This is what is working well for me (ASCII simulation of N810 screen)

    * Personal Menu -> approximately 40 items, select with cursor key or stylus — quick to access
    * Web Browser Menu -> as standard
    * Application Menu -> as normal, also lists applications that didn’t make it into the Personal Menu under a really long “Extras” menu.

    I don’t use a “Documents” menu, as I seem to think “task->tool->file” rather than “task->file->file-launch-selects-tool”

    Comment by Alan Peery — December 31, 2008 @ 20:12

  9. v0.00000000000001 ;) http://liqbase.net/liq.20090101_052923.gary.scr.png

    I’ve been playing with some actual data and I wanted to get a feel for it.
    the scaling is wrong and doesn’t work on large menus.

    I think it will work well using the same kinetics that the graffiti wall uses, but auto scrolling to the selected menu item.

    anyway, happy new year.

    Comment by lcuk — January 1, 2009 @ 08:34

  10. v0.00000000000002 :) http://liqbase.net/liq.20090101_131251.gary.scr.png

    Comment by lcuk — January 1, 2009 @ 16:16

  11. one last shot for now.

    i’ve sorted the aspect ratio on the icons and as you can see, scaling is important ;)

    I’ve been looking for how to properly use the image based kinetic physics view in liqbase for a while, actually grabbing the actual icons and contents from the default menu makes a lot of sense.

    Comment by lcuk — January 1, 2009 @ 18:36

  12. I’ll post one more to complete the set :D

    I’ve also started thread about it here.
    http://www.internettablettalk.com/forums/showthread.php?p=253955

    Comment by lcuk — January 2, 2009 @ 04:42

  13. To Lcuk: Wow! That’s super-awesome!

    To Andrew Flegg:
    1) Didn’t know bout that link, thanks a lot! My categories are totally randomly named and doesn’t mean nothing exactly.
    2) New Shortcut to whatever you want, it can be file, installed app or even terminal command (Personal Menu’esque :)
    3) Applications will ask user where he would like to see them installed. It’s the best way cause it will automaticaly show user the location of app shortcut and no need to search thru tabs.

    To Khertan: THe bad thing of python is it’s slow start-up. As it’s user menu, it should appear at hte speed of light and python can’t provide it :( But it’s awesome that my articles inspires developers to some great stuff to work on! Maybe we can collaborate with Andrew “Personal” Olmsted and make another iteration of “Personal Menu”

    Comment by Andrew Zhilin — January 4, 2009 @ 05:18

  14. I’m definitely like how this UI looks.I hope one day Nokia will use something like this as their tablets ui. But please, no damned python! It requires to install ton of crap (python runtime and libs), ates many megabytes of valuable internal flash and then python apps are slow and consume awful amount of RAM! That really sucks, especially on device with limited resources like tablets are. As example take a look on Kilikali – they managed to put decent GUI in some ~100kb of downloads. And it does not requires to download these nasty tons of crappy python stuff ating multiple megabytes on internal flash, after all. I really hate BLOATWARE!

    Comment by n8x0_user — January 5, 2009 @ 00:38


RSS feed for comments on this post. TrackBack URI

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

Blog at WordPress.com.

%d bloggers like this: