Maemo UI improvements blog.

March 4, 2008

Chapter III: Home Sweet Home.

Filed under: Design guidelines, Light UI modifications — Tags: , , , , , — Andrew Zhilin @ 15:23

Hi.

Before starting our discussion I want to tell some ideas that will explain the features that I want to suggest now and later. So, let’s begin.

Freedom is a great thing. Freedom allows you to do anything you want whenever or wherever you want. But not all humans can use freedom in the right way. Some of them don’t even know what to do. Let’s take games for example. Imagine that you don’t know the rules of football for example. You’re just standing in the field with the ball. And there are another 21 men that don’t know the rules. There will be no game, until all of you will make some rules, single for everyone. And all will be guided by this rules.

Now let’s return to the software playground. Imagine that there are no design, code or anything else standards and guidelines. People start to create applications in their own unique way. On the one hand it’s nice cause your imagination isn’t limited with any prescriptions. But on the other, end user need to learn how to use every application again and again and again. This is terribly wrong. It’s an anarchy in the software development. So, as in the example football case, people need to sit down and discuss some guidelines for UI designers and coders for regulating software development process. It’s not a harf neither for developer nor end user. More than that, end user is very happy to have similar interfaces in different applications. He can use concepts that he learned in one program (buttons placement or drop-down menu structure) in anothers. And this is great.

So, before start shouting (if you want :) “allow developers do what they want!” or “You’re suggesting jail!” think about end users that will be happy to have consistent UI’s in many programs. If developer don’t want to think about user, then whom he is developing for?

Ok now, let’s move from philosophical gasps to the real things :) Today I want to make some improvements into the Home Screen. The main home headache in OS’08 is of course randomly jumping applets. They are jumping because it’s very (too) easy to move them. They are easily move even by the casual touch in your pocket. This system has replaced older one with “arrange applets mode”. Somehow there was a decision that it was too hard to move applets for the new users. Deep dig in drop-downs etc. So now we have what we have. This system is too easy. So, to cure our ache we need to make some difficulty balance. What I want to suggest is drawn on the screen below.

desktop1.jpg

Let’s add a little spot to the top-left corner of each applet. Maybe it can be invisible but then it will be not so easy to understand what to do for newbie user. So, to move an applet you need to drag this spot. Dragging any other part will do nothing.

So, now it’s extremely difficult to casually move applets with finger or in the pocket but still pretty easy to move it with the stylus.

Let’s move on. As we now have an easy way to arrange applets in the way we like, let’s add some additional elements to assist in arrangement applets into the beautiful set. And also a helping guide for applet creators. I call it “Snap grid”. It’s… a snap grid :) It will appear when you’ll move applets on the home screen, and will help you to arrange them symmetrical or just nicely placed with equal spaces between. Click on any place outside the applets will disable arrangement mode. Standard applet in OS’08 is 300px wide and 100px tall. So, let’s the main measurement uni will be a 100×100 pixels square. But it’s pretty big for detail arrangement, so lets divide it in 4 sub-squares. This will be enough in most cases, but for very fastidious user we can add invisible division of sub-squares into 4 tiny 25×25 squares. Though the are invisible, applet will snap to this invisible border during accurate moving.

So, this grid is giving user a chance to nicely arrange or resize applet into beautiful array. But that’s not all. It also gives applet creators some sort of a standard, that they can use in their development. Let me show the example:

desktop2.jpg

Here is redesigned OMWeather applet that uses 100×100 square as main unit. Looks very nice, isn’t it? :)

if you’re not satisfied with 7 days forecast or that it covers so much space, then you can switch OMWeather into “small icons mode” and you’ll get this:

desktop3.jpg

As you can see, now it’s 50px tall and it uses 300px rectangle to show 4 days in a row. 100% readable and nice.

So, as you see, some limits can be pretty useful for developer and user to create nice and well arranged operating environment. Next time I’ll continue to suggest some guidelines in UI planning. Hope you like it.

Thanks for reading and stay tuned.

Advertisements

4 Comments »

  1. Nice post; let me ask, and this is because I am not familiar with this part of the home screen’s UI: is there not a grid alreddy in play here (but not enforced)?

    Also, that idea for a draggable by stylus only piece of an applet. That idea works great, for those what use their stylus. Should there not be a ‘tap and hold on the main bar of said applet’ kind of UI function for those who want to move their applets, but not pull out the stylus to do so. My guess is that at tap and hold of this area that your same grid would come up, and then a person could move the applet to where they choose.

    You made a comment that complete automony in making apps is a bad thing because it forces the user to learn all over again. Amen and amen. IMO, UI should be such that a person sees the devices, does what they want, and moves on all in as few steps as possible. For example, just learning how to find the settings again and again for different apps is a pet peeve of mine, and something I see on the IT and other mobile platforms a ton.

    Comment by arjwdotcom — March 4, 2008 @ 17:59

  2. Another feature that might be nice for some applets (FM Radio and GPE Summary, just to name a couple) is a very small (just like your “dot”) “lock” icon that actually locks operation of the applet until clicked and “unlocked.” This would serve as a no-move function within applets themselves. Case: Often times I forget to lock my screen — or I think I do, on my N810, but it doesn’t actually lock — and then I put the tablet in my pocket… Often, when I look at my tablet again, GPE Calendar has been launched from GPE Summary… Etc.

    Comment by timsamoff — March 4, 2008 @ 20:25

  3. 2 Arjw : we’ll as I know applets now have no grid or snapping, you can move them by pixel. And it’s pretty difficult to make arranged look without sniper’s or surgerer’s hand :) And talking about thumb moving – there was that system almost as you described in OS’07 and it was dissmissed. Maybe developers or feedback found it too difficult, I actually don’t know :) So I’ve worked out the system that combines simplicity (no menus or tap’n’holds) and difficulity to move applet casualy. But your idea is good to, this depends on the reasons of dissmissing previous system.

    2 Tim: Yes, I totally agree with your «lock» suggestion. Maybe the tap’n’hold on the movement corner can lock the applet?

    Comment by Andrew Zhilin — March 4, 2008 @ 23:02

  4. Yeah, that would work! Either a tap/hold or a double-tap… The movement corner could initially be dark gray for moving — like you have displayed. “Locked” would change it to the same color as the applet skin, but w/ a 1-pixel line outlining the original inner curve — as if the door has been “closed” (hard to explain without pictures!).

    Comment by timsamoff — March 5, 2008 @ 02:15


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

Create a free website or blog at WordPress.com.

%d bloggers like this: