Maemo UI improvements blog.

December 24, 2008

New Year Countdown Series: #3 and #4

Filed under: Light UI modifications — Tags: , , , — Andrew Zhilin @ 20:18

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 :)
2

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

Advertisements

3 Comments »

  1. I love your mock ups here, the design and presentation is amazingly crisp :)

    That being said, this sliding motion around screens and over actions brings about its own issues which you see time and time again with interfaces of this type.
    (trying to second guess what the user intended is much more difficult than actually knowing they did something, see os2007 stylus/thumb detection for example)

    It is not the crisp clean swipe that bothers people, and its not the effect itself because when it works its very nice.

    the problem occurs when you miss-swipe and perform unintended actions in the current document.

    Whether it draws random lines on a sketching surface, or if you accidentally send that unfinished mail or any one of innumerable accidental events which occur.

    Look around the web at the number of UIs which *attempt* this sliding motion, and then name the ones which implement it flawlessly without getting in the way of your work.

    We have something similar on desktops with the compositing managers when switching desktops, but when I tried it I found myself being very careful where I started a swipe from and ensuring it was precisely right – exactly the opposite intention of the intended easy flick gesture.

    It would be simpler and more logical to assign a realistic amount of space for the app icon and part of its title giving up most space to the applet icons.
    (as your second mockup shows)

    When clicking the icon or cut down title it could expand smoothly to show the rest of the title (and shrink the applets in the process) before shrinking again after a couple of seconds.

    It would be dynamic, interactive and consistent without ever registering a misclick or jerking :)

    100% working and no need for a swipe.

    Please keep the kinetics and gestures for the places where they make sense, it will complicate matters if we tell people they have to start a swipe in the middle bottom of their screen and upwards, especially when the centre bottom of the screen may have something like a “Delete all” button in certain applications.

    I thought I was the only one mad enough to be hacking away over Christmas, I hope you are having a good time over there and I’m enjoying looking and reading about the ideas and things coming out of your mind :)

    gary (lcuk on #maemo)

    Comment by lcuk — December 25, 2008 @ 22:43

  2. Very nice to see you here, Gary! Thanks for such detailed answer.
    I can tell you about my positive desktop gestures experience. And surprisingly it’s not Mac =) It’s my use of Wacom Tablet with Vista. I can see that developer guys spent lots of time making that thing work perfectly. Flicks forward and back works flawlessly. So I think it’s just a matter of developer’s mind to make things work exactly as they are expected to work, filter and smooth movements, and of course matter of UI designer not to bind Ā«format deviceĀ» to double tap)
    I like your idea about app icon, mmaybe I can develop it into some mockup.
    P.S.: And we have Christmas on Jan.7 here in Russia, so I had simple day today to spend it on some exciting stuff :)

    Comment by Andrew Zhilin — December 26, 2008 @ 01:11

  3. Changing the from portrait to landscape mode (and vice versa) can lead to a slightly different interface without bothering the user much. For example, as a quick hack one could make the bar double as thick. Or the interface can convert web_or_bookmarks/email/start_menu to start_menu -> web_or_bookmarks/email/start_menu (start menu == your very nice AE logo :-). I’m sure there are even better solutions possible these just stirred up quickly in my mind. iPhone has no issue with changing the mode from portrain to landscape (and vice versa), but thats no surprise: their status bar is small and doesn’t contain much information. I don’t think it is even touchable; just informative. That is a design decision. If it is merely informative you cannot use it to for example change WLAN access or go online on IM, but it will allow more size on screen at this expense.

    Carman allows instead of gestures navigation through the device on a number of spots because the user puts their finger there. This includes the 4 corners. This is used to navigate through the application. Very nice done IMO. I will give example of the way I see this mapped in mind after next alinea. Furthermore, the program has no menu in the traditional Hildon sense (top left). On the Linux desktop Compiz allows this too, but its user definable, and here the mouse is used.

    Now, what gives? While your examples are entertaining there is only a limited number of gestures available. You could make some _standard_ gestures which are the same in the whole UI, or you could let each app define its own. What is better I do not know (yet). However, at least they have to be 1) useful 2) allowing the user to explore the application further. See Carman example. Fennec already uses up and down for scrolling. So would not be able to use these for minimizing. This would be a inconsistency; so either you go for standards or you allow the gestures to do special performance acts. IOW, _if_ up/down would be minimize/maximize it’d count for every application. And scrolling is handled differently. (Yes, I know its just an example, but still.)

    The way I see it is that the user has a map in their mind. They are ‘here’ (current screen) and they’re in a dungeon playing a MUD. They can go forward, backward, to the left or to the right. If you dedicate up and down to scrolling already (or minimize/maximize) there are only 2 more definable. This is problematic and therefore you have to 1) provide a traditional UI with menu (not ideal IMO) 2) allow more input like buttons or keyboard (not ideal IMO) 3) provide more single touch gestures 4) do something with multi touch. For point 3 I would say to look at other applications who have advanced in single touch gestures [even when using mouse, but this has to be taken into advance]. The one which pops into my mind is then Opera. Because I’m an Opera user who has normally mouse gestures disabled I’m going to look into this. For point 4 there are many examples available but I think the most popular one is already observed by you. However, if you have a hardware button you can use this as a Fn/Alt/Ctrl button for touch. In other words, if you do a gesture with that button enabled it does something different. Perhaps it is possible to use a touch button on screen combined with a gesture is well. For example, touching in top right following by a left to right gesture is different meaning than normal left to right gesture. This is not multi touch in its pure sense; rather, it is combined single touch. Not sure this is feasable though…

    I gave the example of Compiz and the example of Opera. While I use both these applications I’ve used neither of the 2 features I described very much! Why not? In both applications I accidentally activated their gestures leading to disasters exactly in the way lcuk described. Furthermore, the question is how sensitive do you want it to be? When I tried to get used to Opera Mouse Gestures (don’t know which version) I could not get to draw the perfect arrow which circles against the clock (to reload a page). Only after a few tries. Or the wrong gesture was activated. No feedback was given what was happening in the application (except the browser was downloading content) so this was confusing. At that point I gave up. With Compiz, putting the screen off and accidentally moving your mouse away to make place for a cup of hot java activates something already.

    For ‘X’ button I believe closing application is not sth often used on a mobile device. So it could be made that if there it is clicked, a menu pops up allowing casual touch-based performances like closing the application but also more. Basically, the menu, but with bigger buttons.

    Comment by allnameswereout — December 27, 2008 @ 01:23


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: