It’s Christmas Eve, everybody making last preparations for great holiday, and I have 2 improvements for today! Why not only one? You’ll see it after the break.

Flicks.First of all I wanted to add some dynamic into device controling process. Button pressing is nice and handy, but it’s slightly boring from time to time. And not so spectacular for audience. If you remember the hype bout the iPhone, you’ll see that first eye-catching thing in it was kinetic scrolling. It’s not super handy, it doesn’t add some new dimension of usability. But it’s fun and spectacular. Same acts for “pinching”. For real, I think it’s one of the crapiest things in iPhone UI, but it entertains the audience.
So what I’ve thought is to make some fresh “flick” implementations. For example you can flick from title fo bottom to minimize application. Or flick from bottom to top to open task switcher.

The second improvement for today is connected with previous and based on flicks and maemo button. Since future UI would be highly adaptive and will give you the ability to use the device with both landscape and portrait orientations, there is the problem with top bar screen space. On the one hand you can’t show both title and statusbar and make them actually usable. And on the other you can’t remove one of them beacause they are important parts of the UI. The solution is pretty simple – let’s make them switchable with the flickafrom maemo button to the right. You don’t need title bar all the time so you can just flick it on when you need. And again, its entertaining and attractive :)

Tomorrow it’s Christmas and I have a really crazy christmas gift for you! Stay tuned!

And as I promissed – second Fremantle wannabe UI improvement!

Maemo Menu.

In current and older Maemo iterations there is UI element called “Sidebar”. It’s pretty handy for quick launching apps and web bookmarks. Also it acts as small task switcher as well. But the bad thing is that it wastes too much screen space, that’s so important on handhelds.

Previously we already got rid of “Web” menu, that we replaced with multifunctional “Rapid access” menu. Maybe you’ve already noticed a small Maemo logo (in fact it’s “maemo.org” logo, which is not exactly Maemo, but whatever, it’s Christmas time :). This button acts same way no matter what application you are using:

It allows you to open instantly applications menu, jump to the Homescreen or open Task Switcher – most wanted functions in the OS. Also it has some extraordinary additional features but we’ll talk bout them tomorrow. Stay tuned!

Hello there.

It’s been a long time since we’ve met last time, and many things happened. But I think most of themes were already discussed in many blogs and forums, so it’s not necessary to mention them here. What I want to do now is to conclude this very productive year with a series of 10 posts that will describe 10 UI innovations that I dream to see in upcoming Maemo 5 or so called Fremantle. Some of them are pretty fresh and outstanding, some of them you maybe have already seen before. So let’s begin our New Year Countdown!

Number 1:  Rapid Web Access.

As n*** series is still remains to be most advanced mobile internet browsing device on the market. I thought to make it even more web-oriented, to provide instant access for most of the web functions for end-user. And critical point of speed is not “desktop quality surfing”. It should be even better.

So my point is to make a hardware button, dedicated to special bottom bar, that will give you instant access for most of the browsing functions. That’s how it can look :

Bottom bar with input field and 4 buttons: bookmarks, search, open, and open in new tab. It should work wherever you are in OS, is it notes, FBReader, Clock or Minesweeper. You can type/paste into the input field any text: if it’s an URL, then you can go right there by clicking one of two right options. If it’s just words – you can search for them localy (in contacts, applications or notes for example, works similar to OS X “Spotlight”) or choose one of the various search engines grom Google to Wikipedia or Lingvo dictionary. It will give user extremly fastaccess to the web, even faster than on the desktop.

And the “bookmarks” acts pretty much as you’d expect it to act: gives you quick access to all your bookmarks and bookmark folders. Also you can open bookmark in new window right from it.

To be continued :)

Hello everyone.

Today I want to make a very small post. it will not be about UI or design. It will be about community. Maybe you heard about Maemo.org logo contest (it’s coming to the deadline soon so post your submissions!) and i’ve submited some logos too. i’ve put very much sense in each, to make maemo.org community deeper and even more sophisticated. One of the ideas is discussion between community members. This is great process that is very attractive for all developers and users, because together they can acheive great goals and create fabulous products. I’ve made this blog not only for posting interesting UI ideas but generaly for discussion! Your opinion is very important for me and for all of us. Please, feel free to express your thoughts about anything you see here. I’ve disabled “registred only” posting so everyone is extremely welcome to express yourself.

Thanks for reading.

Hello.

First of all, I’m very sorry for such a long pause in posting in this blog – I had a lot of work to do. But there are some great news: I’ve participated in two projects. And I want to tell you about one of them today :)

It’s new release of one of the most useful software on NIT — Other Maemo Weather. And I’m very proud to work with such a great talented team. So, let me introduce OMWeather v.0.20 :)I was asked to make new default iconset, instead of”Crystal”. There were some copyright problems so to avoid them OMWeather dev’s decided to replace it and I happily agreed to help them. So I’ve made “Glance” iconset. Hope you’ll like it. other great new features of OMWeather 0.20 — after the break ;)

New unstable version of Other Maemo Weather (version 0.20) is released with exciting new functionality. This version is not stable so please report any bugs you found on it to bug tracker in the OMweathers garage page. You can get this version only from the download section in the OMweathers garage page or extras-devel repository.

Now OMweather can be set to receive weather station location automatically when ever user has an active GPS-connection on the tablet. Idea for this is based on Jussi Kukkonen’s idea Why GeoClue Matters, which is based originally on ideas from Henri Bergius, Tuomas Kuosmanen and Andrew Turner.

To enable GPS-functionality:
Install version 0.20

1. Reboot internet tablet
2. Activate OMweather settings and select “Enable station from GPS:” box in the “Locations” tab
3. Run Maemo Mapper or Map application included in OS2008 and wait for a GPS-fix
4. New weather station can be found on a “Locations” tab after two minutes.

Version 0.20 has now also it’s own help page in the tablet. It can be opened using tablets help application (My selection/Help) or touching small question mark on top right corner of OMweathers settings window. Default icon set is changed to Glance.

Other new features in this version are:

• Added finger friendlier way to change weather station
• Possibility to change weather station order in the settings window
• “Swap hi/low temperature” setting is moved to other tab in settings window
• Confirmation dialog is added for station deletion
• Added new icons to show Moon phase and it’s shown only in the first icon
• Italian translation has been added
• New “Combination” layout added (see picture)

Some bugs have been also fixed:

• Fixed error: while station data xml file is absence, displaying weather data is garbage
• Fixed error while calculate days offset
• Fixed error with last icon displaying, when visible items less then 10
• Fixed error with displaying ‘Feel like’ parameter

But it’s not the end of our collaboration with OMWeather developers team. I shoud say that it’s just the beginning ;) On 25 of April stable version of OMWeather 0.20 wold be released and in may there will be released OMWeather 0.21 – a piece of software that would blow your mind away, I’ll promise ;) And also I’ll raise the curtains on the second project that I was involved in as soon as we’ll be ready to show you quality software. You’ll not be disappointed ;) Stay tuned!

Hello.

Today I want to introduce you my iconset for OMWeather called «Contour»

The main feature of this set is that it looks very familiar with Maemo OS’08 interface. And also it’s 100% readable both on bright and dark backgrounds.

Feel free to post your comments and suggestions here :)

Right now you can download it here but soon it will be available right in your Application Manager.

Want to give many thanks to Vlad Vasiliev for rapid helping me in assembling .deb file :)

Stay tuned.

P.S.: And happy first day of spring :)

Hello.

When you hear the word “Internet” or “Web” you don’t imagine instant messengers or some kind of administration tools or anything else. Your first thought are zillions of sites, that carries zetabytes of information, that is given to you in different ways like text, pictures, animation, flash, music, video and so on. So, if the device is called Internet Tablet — that means that it is profiled to give you easy and handy access to the maximum amount of internet resources. So the heart of that device should o be web browser. We gonna look at Internet Tablet browser and it’s UI closely in this article. Fire your engines!

To begin with I’d proudly like to say that OS2008 Internet Tablet’s web-browser called MicroB (also you can install it as additional engine in OS2007) is one of the best portable experiences of web browsing at all. It totally kicks Windows Mobile “Opera Mobile” and other competitors and easily competes with iPhone’s Safari that is “revolutionary extremely great new awesome and blah-blah” ;-) And it beats UMPC’s (to be fair, to that moment) because of battery life. It handles most of the sites without any render problems or crashes (actually, I haven’t seen such site :-). This is really really great and it approves the name of Internet tablet for 100%.

But nothing is ideal for 100% so after long time of everyday using MicroB I have come to some UI improvements that will help user to access most of the functions easy and quick.

First of all let’s see how it looks and behaves right now:

Right now we have Big Fat Browser Icon in top left which should to be a Mothership for all browser aspects but now it’s somehow used for quick launch of bookmarks. And that’s all. What I want to do with it I’ll describe a bit later, let’s see other items.

Going clockwise, we have a “view options” button. It pops up a menu where you can adjust images visibility and loading priority, activate some browser media add-ons to display (like flash), set zoom amount, toggle “fit to width” mode, when browser tries to reformat web-page… to fit screen’s width :-) and the last you can enable “find on page” menu, which behaves exactly as it said. After short adaptation it becomes very handy. The one thing I wanted to demand is to give user some “media profiles”. For example, while on cellular connection the MicroB will automatically disable flash and images loading to increase speed and save money :-). And while on Wi-Fi it enables all. As for me I’m a bit tired but get used to always switch them with my hands.

Then we can see three absolutely standard buttons for every browser: Go/back/forward. But. While everybody knew it for a long time that tap’n'hold on “go” makes the refresh of the page, in this time almost nobody knew that on tap’n'hold on back/forward they will pop-up the history of opened pages. I was dreaming about this feature and already made mock-ups of interface and so on, and hen I just found it by chance :-) This is very great feature and I’m glad that it’s already made :-)

Now we came to the address bar. For the first sight there must be nothing special and nothing to do. But. Micro, as it’s elder bro Firefox have (actually had) a great feature: you can just type a search request that you need in the address bar and it will be automatically searched in Google. But in OS’08 developers made some very (extremely) strange thing: now it actually searches Google BUT it shows you the page that was the first in Google’s results table (A.K.A. “I’m feeling lucky”). That’s crap. Sorry but it is. Please, bring back standard search results, I think everybody were happy with them :-(

Ok, let’s move on. Then we have an optional RSS button, that appears when RSS feed is available. This is great. You can subscribe to the feed in one click right in the browser. Awesome. You guys got the right steam!

And the last one is “Bookmarks & History” button. It pop-ups a small menu where you can choose, add and organize bookmarks (again), manage and explore your browsing history and quickly jump to your homepage. Ok, we’re done with describing. Let’s see how it works.

You click on the Big Fat Browser Icon and tap “Open new browser window”. Then enter preferred address and you’re there. Or you can just choose a bookmark and new window will automatically open. If you click a bookmark when the window is already opened – then it loads in it. That’s ok. But how can we navigate thru two or more windows? You can click the browser icon in the taskbar and you’ll see a list of opened windows.

Ok, but what should I do when browser taskbar icon is out of sight? Well, almost no problem, just tap bottom-left icon (window manager) and you’ll see… a list of all opened programs. Oook, now we’re gonna find our browser and tap it. In my example there are just four apps opened. But what if I’ve opened 6 browser windows, a few Pidgin chat windows and media player? I need to scroll thru all of them just to find the browser window that I need. Pay attention that Big Fat Browser Icon that is always visible and is staying unused all this time. let’s give it some work!

Here you can see a totally rearranged web-browser menu.

First of all — the number on the icon. It shows you the number of opened windows right now. It helps you to quickly manage your Tablet’s performance. It can handle 2 digit numbers :-) Then. We click on it and see well known two-sided menu that you can see by clicking “applications”. It behaves the same way on overflow. Let’s take a look on that menu. Right after clicking the left menu is standing on the “opened windows” position and shows you a list of opened windows on the right side. You can close them right there. Now I’m gonna tell you some hint/suggestion.

As you can see there are three windows with different favicon (that small square on the globe) properties. Nokia start page have no favicon, NYT have standard 16×16 favicon. But what’s that with Wikipedia? Photoshop? Not really. It helds the advantage of the “iPhonomania”. technically it takes a picture that is dedicated to be taken by the iPhone/iPod Touch. They use a special 57×57 .png file named “apple-touch-icon.png” that is always placed in the site root, to use it in WebClip shortcut. So, why not to use it too? :-) And if there is no such file then we can use “oldskool” favicons.

Let’s go on. Next menu tab is “Bookmarks”. I’ve combined whole bookmark management in there: adding, organizing and choosing — all things thru one simple and easy to access menu. Bookmark groups behaves the same way like the old. On the screenshot there is “Google apps” group displayed.

History behaves exactly the same way like bookmarks: white list — day groups and sub-menus — links. Easy and relative.

Search is a special kind of bookmarks – there you can add your preferred search engines or sites like Wikipedia, Google, Yahoo! and so and so on for instant access.

And the last one is a quick jump to your homepage.

So. As you can see we have made an easy and very handy access to all browsing aspects: quick switching, closing, opening, bookmarking, organizing and searching. And we used only native OS’08 tools that are already (almost) available. In Chapter II we’ll discuss and improve other aspects of MicroB like quick copy/paste, roll over mode, scrollbars and others.

Stay tuned!

Hello.
As I’ve said before, tray is a best way for gathering required info about the device and software status like battery charge, wi-fi connection and instant messaging status. But right now in Maemo it holds not so much info, that it could and even this info is mixed with “thrash” like application title. In the first chapter of this blog we’ve done some work on the applet amount aspect of tray, cleared it from thrash information and finished with brand new wide redesigned tray. Now let’s work on quality aspect.

First of all, let’s take a look at our previous result:

All applets are signed. Clock is just a demonstration of my suggestion about “2 din” applets, that have double-width. It’s non-existent applet for now (pitty). Pidgin applet is not built-in Maemo, so we’ll not analyze it.

Bluetooth.

Bluetooth applet is a holy grail of Maemo, which Maemo team can’t reach till today. Karel Jansens described the problem very clear, so I’ll quote the comment:

“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, what we have right now is the “bluetooth on only visible” icon that have only two states and everybody hates it.

What can we improve here. First of all, lets hear community prays and make it visible even when BT is off. Then, let’s add a bit information to this applet. Right now it’s a bit dumb with two states “Eeeeh, I’m on” and “I’m working”. But when you’re sending or recieving a file or a card – you can’t trace this process. Just have to wait. So, let’s make two states instead of one – “transfering” and “recieving”. It will add clearance to the most of usage cases. That’s pretty good!
The last suggestion is probably a feature request so don’t think about it to complicated =) A special icon for A2DP profile. Actually, you can make icons for every type of devices like handsfree, keyboard, pda or phone.
So, as a result we have quite handy BT icon that completely describes all of BT states and quite user friendly.

Brightness.

To my mind nothing wrong with this applet. It’s pretty handy. But, to my mind the brightness settings in OS 2007 were more comfortable and scaling than 5 positions in OS 2008.

Volume.

Well, as brigtness applet, volume control does it’s work quite easily. I can only sugest some design improvements to remove that crappy red stripe and not so modern looking “wave cone” (thing to the right of the speaker)

I think new icon set fits Maemo UI concepts perfectly without red stripes.

Connection status.

So, what we have now in connection status applet, that is one of the main for the tablets. 4 states, ugly red stripe and not so much info about the connection status.

First of all let’s remove this stripe and make “flight mode” icon the same style as others, when they are in “totally off” mode. But. It looks like “enabled but disconnected” icon in original set. So, lets make some difference for that mode. To my mind the best way to symbolize “disconnected” or “no signal” is just simple white dot with half-transparent “waves”. Easy to understand, easy to quick read. Now it would be great to make icon reflect Wi-Fi signal strength. It’s already designed for it, but somehow it’s still static. So we have 3 states of signal: “weak” (one wave), “normal” (two weaves) and “good (guess it :) ). The last one icon in this set is a bluetooth internet connection through cellphone or other compatible device. Original set have a good and easy readable icon, but it doesn’t fit in whole set design and concept anyway. So, to easy describe bluetooth connection we need just… blue color. Yep, same as bluetooth icon. So, now we’re done and can view our result.

Battery.

Well this icon is totally ok to my mind. I think you need it for simple click on it and view full battery status in drop down menu. So I think it’s schematic gradation into four states is better than good in our case.

USB.

I don’t know what to comment here, simple USB connection indicator :) it does nothing but indicating :)

There can be much more ideas about tray applets optimization so, you’re welcome to discuss all of implementations in comments.

Thanks for reading!

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.