Hello there.
Today I’m starting new series of posts, dedicated to my work in Mer project. It became more complex and interesting so I think you’d like to see the UI developing process in details. In past few days I’ve done some nice stuff so let’s begin.
The concept.
All our team, guys from all over the world, chats on #maemo IRC channel and the developing is going literally real-time. That’s quite convenien, especially for me cause I can get a feedback on my ideas and mockups in seconds.
So, the first main idea of UI was simple – to throw away Maemo’s sidebar and give user more space to work without fullscreen mode. That sounded good but the problem was pretty obvious: sidebar contained lots of critical functions so we can’t just disable it. There is app-menu, quick switcher and notifications/task switcher and all of it is pretty “must-have” for the user. And all of 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 gave me lots of space to use. So, after hot debates about “why the hell we need title there” we finaly said “goodbye” to it. And “hello” to extended quick switcher, which now had 7 slots to show opened items. Overflow worked same way as in applets area so everything looked perfect.For 30 seconds.
Now, as we removed title we have nothing to trigger “hildon menu” or simply “title menu”. But we had some space on the left, where sidebar was before. So I’ve made a button with “mer” logo that theoreticaly should trigger it. Not so obvious as it thought to be but whatever. Everything went well for one more minute.
Then we’ve tried to figure out how user will open large task switcher. I’ve used “Rambo-style” and just added it’s icon in the beginning of quick switcher. Whatever :)
Now we only had one problem – how to launch applications. We had no exits out of current layouts so I had to rework it. I settled down and started to think again, right from the start. What do we need: no sidebar, all functions, flexibility (since Mer now even can be loaded on x86 pc) finger friendliness, realism :) And I came up with this.
So what we have now: “Mer” button launches some kind of standard maemo tabbed applications menu, but instead of words it uses icons for categories. And bottom category became the task switcher, that looks totally the same as maemo one. Then we have nice quickswitcher with 7 slots for apps so now you’ll use large switcher way rarely :) Then goes “title menu” button, that signed same way as maemo title, to ease functionality recognition. And after that we have common applets area and minimize/close area. All notifications are shown there now, as it’s goddamn status bar :) More than that, our new “Mer” menu is square shaped, that means that it’s screen rotation-friendly. Also current layout is totally scalable. And the last remarkable thing is – that you can adjust apps/applets show ratio from 7/7 to whatever you like. You can even disable quickswitcher and see only 14 applets in a row :) And that’s not all I want to tell you today :)
Rescue menu
My second UI improvement was pretty small but nice. And it works already in current Mer builds.
Mer’s rescue menu is a special device mode, which boots before OS itself and allows you to rescue device in different ways if something bad happened. Now you’ll wish that “bad” to happen because from “hello 80’s” style rescue menu became this:
Well, it’s all for now, hope you enjoyed this long article. Keep an eye on Mer cause more great features are waiting to be released!
Maemo UI improvements blog. 
I didn’t see how to switch/scroll categories if I have more than 5.
How about the app/title menu next to the Mer menu or before the minimize and close buttons; and lastly, can the quickswitcher and common applets be together? after all they look like running apps.
Just my humble opinion.
Greetings.
Comment by Art.M — January 18, 2009 @ 18:18
Hello there :)
1) Well, I see same way as maemo uses now, replacing one category with “arrow_down” button. And taskswitcher will be visible at the bottom anyway.
2) It’s definitely possible to place app menu button wherever you like, since the UI is pretty scalable now, but I think center position is the best and I can explain why. Placed there it works as visual divider between running apps and applets. Also it’s equal easy to reach with both left and right hands. And last thing is that if we will place it on the left – it can mess with “mer” button, causing unwanted triggers. Same to the right, or even worse, cause there are “minimize/close” button, and unwanted minimize is very frustrating. It’s much wiser to place different UI “hotspots” in different places to allow user tap them less precisely.
3) Well, I think it’s better to have them separated cause though they look the same way – they have totally different functionality, so the goal is to help user quickly define what icons he needs.
And of course I appreciate any criticism, it really helps to make end products better.
Comment by Andrew Zhilin — January 18, 2009 @ 18:45
I absolutely love the look and feel of mer! Kudos guys. I also like that you ditched the title bar. It serves absolutely no purpose. Having a text stating the name of file manager (or alike) is absolutely unnecessary. Also, the menu as a strict button that looks the same all over the place is great. Anyway, keep up the great work guys!
Ups, almost forgot. PLease make the task starter to be a grid and not that horrific 4 item menu that the default n810/n800 has. List has to go and grid has to come. I suppose you have it covered, Just want to make sure ;)
Comment by Urho Konttori — January 18, 2009 @ 18:48
after some thinking back and forth, i have come to the conclusion that its interesting.
Comment by turn.self.off — January 18, 2009 @ 21:27
I’m concerned that this could end up looking cluttered with just icons everywhere and no good indication of what they are (no mouse over tooltips on a touch screen).
In defense of displaying the window title:
1. Its a large click target for a some what common task of accessing the apps menu
2. Its a reminder of what will be displayed in the task list. This won’t make much difference with a file manager but if you are on several web pages from a site you will subtly be reminded about the title before hand which could help in switching back to the correct window.
So if I’m complaining about an idea, I guess I need to come up with an alternative. These are what I came up while mulling over this.
An idea I had for switching apps comes from a long time ago where it seemed like with Englightenment, the virtual desktops were really stacked layers. You could pull a bar down and see the desktop below it. So let’s consider each app a layer instead of a desktop. Mer would keep the app name. Clicking it will display a menu like normal. If it was dragged down instead you’ll see all of the title bars of the open apps with home at top and current app at bottom. This will give easy access and provide a large click area for the app name and the close button.
Maybe we could even throw jump lists in there. Imagine dragging down the current app, seeing all the open apps, click to open menu rather than change app, and you can change songs or whatever without having to bring the app to the front.
As for app launchers, why not use home screen applets for that? We have a physical button to take us to the home screen already. The app switching idea I mentioned also provides a way to the home screen. We could then take a page from Android/iPhone and have multiple widget layouts for the home screen that you slide between. I’ve not used any of hte launcher applets but I would think having a setting for them to specify if the launcher is for all apps or only a category, you could then theme the different spaces in the home screen by task or whatever the user chooses.
Comment by Ed Page — January 19, 2009 @ 05:11
In my opinion the menu of the app is in the correct place in the actual hildon. If you let the menu in the same place the superior bar can act as a Dock. I will replace the icon of the menu with the real icon of the app and put the background in another color (maybe grey like in the actual maemo). To switch to an app of the dock you only have touch the other icon and it will swap with the previous app (maybe it con be done with finger gestures too).
I’ve tried to do a mockup of your mockup but me and gimp are not too friends.
Comment by mmauri — January 19, 2009 @ 15:39
the boot menu looks nice. would it be technically possible to support touch interaction in addition to keyboard selection in this early boot stage or do we lack drivers/touchscreen initialization there?
regarding the first screenshot in this post: maybe instead of leaving free space below the “return to home” button, you could expand each of these buttons to fill more screen space which makes the buttons even easier to click.
also, making the “x” look more like a button could also help. and closing an app there should have some kind of animation where the remaining items fill the freed screen space. currently, closing an app via the “x” in this list makes the item above the closed one go down to the exact same spot as the closed one, so one could accidentally close two items.
Comment by thp — January 19, 2009 @ 16:24
2 Ed Page:
1) Title bar is actually too large to click. It wastes space for it’s functionality.
2) When you open task switcher, current task is highlighted so you can easily locate it.
The main problem of your idea is that it’s too sophisticated. Don’t think that matchbox would support that magic with gestures. Designer’s goal is not only to make things eye-catching and comfy to use, but to find proper ratio between coolness and difficulity to make. In your idea dev’s should throw away window manager, take another, fit it into Mer. And all that stuff just to keep window’s title =)
Talking bout apps on the homescreen, we have some ideas about adding shortcuts (and not only apps but bookmarks and files too) to the homescreen, but to have them all there, like on the iphone for example is a bit overkill, cause we wanted to keep widgets along with shortcuts.
2 mmauri: Actually I haven’t understood your idea, sorry :( If you’ll provide a picture – it would be great.
2 thp:
I think it’s better to load as less drivers as possible on the rescue menu.
Bout resize: It’s not very intuitive cause user will have to check, where are item’s borders now, evey time.
Comment by Andrew Zhilin — January 19, 2009 @ 17:20
I’m opengeekv2 on the maemo IRC
Comment by mmauri — January 19, 2009 @ 17:30
@Andrew
If all task switching happened through the task switcher, it would make sense as a way to know the apps title. A user would open the task switcher, they would see the title to know what they are switching from and then they could go to another app to know what they came from. Since not all task switching happens that way a user would have to open the task switcher just to know where they came from.
Sorry, I guess I gave the wrong impression by saying I wanted to find something to defend the title bar as is. My idea was more so born over feeling uncomfortable with the ideas presented in general and contemplating other possibilities.
I have to preface this with the fact that I have not looked at the window manager source code, I’ve only really done app development on Maemo so I am not familiar with what matchbox can and cannot do. Since we don’t have window movement I would think it would be easy to add at least down drag but maybe even ordinal direction drag of the title bar. The new task switcher could be implemented as a hidden home screen that it switches to. That would make it so we don’t need any hackery for displaying the home title at top and then we can just use regular list that is screen width for the rest.
Also another thought I had recently that might just be specific my usage Couldn’t we buy more space with making the task switcher quick to access and removing minimize? Without overlapping windows, the only use case for minimize would be quick app switching but the user has to maintain a mental stack of what app is underneath. The only other alternative idea I have is to have it mean go straight to the Home screen, but we have a hardware button for that.
Comment by Ed Page — January 19, 2009 @ 18:04
To mmauri: aah, ok… guards! :P
To Ed Page: first of all I want to clarify that Mer is built not only for nokia tablets, but for all possible devices, including netbooks. So some of them doesn’t have «home» button. So you can’t bind important functionality to this button.
Again, task switcher clearly shows an app that you’re switching from, so there’s no such problem.
Bout minimize: I was thinking bout it’s removal, but decided to keep it for now. But I’d prefer to make «close» button wider, than to add task switcher near close, cause it would be uber-frustrating to click close instead of task manager. Or if we will move everything to the right and insert task manager in the beginning of «quick switcher» then it will slightly mess with neighbor blocks. And since we have extended quick switcher now, I don’t think that large task switcher would be used so often to provide 1 click access to it, sacrificing space.
Comment by Andrew Zhilin — January 19, 2009 @ 19:07
I’ve done some mockups of your mockups XD, i think you will see what i’m trying to say in the IRC i don’t know if my desings will solve the problem but at least the porblem is identified and the experts (you) willl know how to solve it.
Comment by mmauri — January 20, 2009 @ 00:53
sorry the URL opengeek.wordpress.com
Comment by mmauri — January 20, 2009 @ 00:56
Really awesome work indeed.
I had a small query with the rescue menu. Its generally natural human tendency to just ‘move ahead’ by pressing the default key (usually return, in this case its the center button). So what would you say about the default mer boot icon being at the centre rather than at the extreme left ? The default boot Mer icon is also the cutest and the most awesome among the 5 – so maybe you could consider keeping that at the centre of attraction.
Comment by rkirti — June 6, 2009 @ 14:31
Good point rkirti, but this is just illustration showing random item selected in the menu, it real life first item is selected initialy :) So it’s 100% natural human tendency compatible :D
Comment by Andrew Zhilin — June 9, 2009 @ 18:55
Hi friends,
That is really a nice job you guys done i just see the pictures good job..
Comment by Bryan- Logo Design — December 21, 2009 @ 16:21
You have done a nice job.Keep it up
Hughesnet Broadband
Comment by mike neilson — July 22, 2010 @ 15:21
Thanks for sharing such a useful and informative stuff,thanks for sharing the post.
Comment by Bob - Dial up Internet Services — August 10, 2010 @ 12:59
That is really a nice job you guys done i just see the pictures good job,thanks for sharing the post.
Comment by Bob - Dial up Internet Services — August 27, 2010 @ 11:47
Pic are good with very nice gradients and icons. Keep up guys. Thanks for posting
Stacy
Comment by Stacy - logo design usa — April 2, 2012 @ 16:48