Tinkering with a new interface design - Your 2c welcome
 

Hey guys, had some freetime recently, so I've been doing some tinkering with some interface designs for the NITs, and came up with this new design for the Maemo platform. It combines a bit of the current Maemo design with the iPhone layout. Tell me what you think.

http://forums.raiden.net/files/maemo_new_169.jpg

For an understanding of the two bars at the top, the bar on the right is the "system tray" that is currently used on the NITS. The one on the left is the menu and program list. It holds a "home" button that takes you back to a blank desktop (well, a desktop full of widgits if you have them enabled, otherwise it's blank) as well as replaces the home menu in the home screen. To it's right are the web, email and programs menus currently in use on the NITS. Anything further to the right is additional programs that are running. So essentially it takes what's on the left bar currently and puts it on the top instead.

Gone is the titlebar and close buttons normally added by default at the top (see this image as a reference) and instead those will be added vertically to the left side. I may opt for the right side, but I haven't decided yet. Also gone is the pager, as that's added into the "home" button. Overall, the whole design is somewhat of a consolidation and simplification of the existing interface.

Also, the programs menu (denoted with the plus icon above) has been replaced by the icon slider in the center of the screen. I haven't added labeling yet to the icons, as I'm not sure how that'll work, but in the end, this slider would work very similar to the personal menu currently available to the tablets, but will be able to hold far more, allowing for multiple screens of icons. I'm also looking to integrate groups into the design too, but for now I've only got this in the initial mockup.

For those interested, I don't have a beta of this, or even any code as yet, as I only do the actual design and mockups of interfaces, rather than the actual coding and assembly of them. Plus this mockup is only what I would consider an initial demonstration (a 0.1 alpha of sorts) of the overall design, and does not even remotely demonstrate the final design. I'm still working on that. But since you guys would ultimately be deciding if this design will live or die, I figured to show my initial idea, and then get input from you on improvements and extras. After that, if any developer wants to turn my mockups into reality, they're welcome to. :)

Anyhow, your feedback is welcome. In fact, any feedback is welcome. If you like it, say so. If you think it sucks, I'm fine with that too. I'd rather hear "it sucks! kill it!" right away than put too much work into it and find out nobody likes it. heh. So be as gentle or cruel as you feel necessary.

PS: The desktop is show "with wallpaper" in place. I can show an empty desktop too if someone needs it.

Re: Tinkering with a new interface design - Your 2c welcome
 

"it sucks! kill it!"

NOT

how about "its awesome, let it LIVE!"

Seriously, this is really good. I actually had some ideas about the same thing, mostly borrowing ideas from KDE4 and OSX.

First of all, the current widgets should be like OSX or Compiz. Press an icon, and the screen goes dark and the widgets show up.

The close / minimize icons should still be at the top, because that is "natural" for most computer users.

Then, the "cool" part. Similar to Fennec, if you drag the screen, then the Programs, Email, etc... show up. Maybe this is a bad idea, I don't know.

Also, I think there should be a combination of the current menu based program launcher, and the icon launcher shown here. If there are 20 programs, i don't want 4 home screens with a bunch of icons (a al iPhone). Instead, lets make each icon on the home screen a "category," then when it is clicked, it brings up apps in the category.


I'll make a quick mockup if I have time.

Re: Tinkering with a new interface design - Your 2c welcome
 

I like it

bun

Re: Tinkering with a new interface design - Your 2c welcome
 

Cool. One idea I could do is to have the system tray slide over and allow a BeOS type header with minimize and close it it. The ultimate idea behind this layout was to maximize the horizontal realestate and simplify the interface a bit more to make it more thumb friendly. Another element I was considering was completely ditching the above bars (or changing how they appeared) and creating a popup system tray and program bar instead, further increasing the vertical realestate as well, and further making it thumb friendly. Haven't fully fleshed out those ideas yet, but if enough people like this, I may go that way just to see what others say.

Re: Tinkering with a new interface design - Your 2c welcome
 

I like it (though I'm not sure yet I'd switch). But it made me think about the desktop design. My first thought is that I'd rather NOT have the title bar along the side, unless it were optional (though personally I'd still never use it). As far as I'm concerned, I can do without the title bar altogether. I know if I'm in Xterm or the browser or File Manager without a title bar to tell me. And I hate to give up the real estate.

So that makes me think that the best thing about what you have (for me, who is happy with Personal Menu so cares little about the iPhone-type icon arrangement) is the LACK of a Title bar along the top, and the wise use of that space to put the standard left-side stuff there (MicroB icon, Personal Menu icon, App Menu, open apps).

Even better, what I would like to see in a GUI, and it would suit what you are doing, is, say, a Full-screen-view desktop that has just a little icon superimposed in a corner (I'm talking about when you have an application open and on top), the clicking of which would reveal your (currently shown) two bars. That is, you could go back and forth between Full-screen and non-Full-screen (what's it called, Window View maybe?) without having to press the little hardware button (which, at least on the N800, is a minor nuisance).

Likewise I wouldn't want to lose space to a Close button; rather I'd let that function be carried by the Applications Menu, where there are Close buttons under the standard GUI, but with the Applications Menu being in your (hidden-but-revealable, in my scenario) bar on the top left.

Also, within your scheme of things, I would want you to have an alternative desktop (or a "category) that showed the desktop applets, like Internet Radio, OMWeather, FM Radio (on the N800), etc.

Re: Tinkering with a new interface design - Your 2c welcome
 

I think it would be interesting to you to check this: http://tabletui.wordpress.com/2009/0...the-beginning/

Re: Tinkering with a new interface design - Your 2c welcome
 

Yeah, I had also considered ditching the title bar entirely as well. Just hadn't gotten that far yet. Considering that the NITs really don't need one (where exactly are you going to drag the window anyways?), there's no point in having it.
Wow, I like that idea. I could definitely toss that into some future drafts.
Yeah, that's what "home" does. It reveals the desktop with all the applets just like the home option in the pager does in the current design.

Hey, so far these are some great ideas. Keep them coming guys! I'll tinker with the templates a bit more over the weekend and incorporate some of your ideas.

Re: Tinkering with a new interface design - Your 2c welcome
 

I really like it but is it only a photoshop mockup or have you/are you going to make it?

Re: Tinkering with a new interface design - Your 2c welcome
 

Right now I'm only doing photoshop mockups. Once I get settled on a design, I hand it over to developers who then take it and turn it into the real thing. My job is just as an interface designer, which is like 99% design, 1% coding. heh. But once a mockup is done, it becomes uber easy for a developer to complete the work since they already know everything that needs to be done and have a clear roadmap to completion. I've done this plenty of times before, but this is the first with the NITs.

Re: Tinkering with a new interface design - Your 2c welcome
 

@Lord Raiden

You got emule working on the tablet? Mind to share?

bun

Re: Tinkering with a new interface design - Your 2c welcome
 

Stick application names under the icons, other than that, looks nice

Re: Tinkering with a new interface design - Your 2c welcome
 

Actually, no. That's just there as a filler icon, since this is just a mockup at this point. lol.

Re: Tinkering with a new interface design - Your 2c welcome
 

More mockups. Here's the descriptions that go with the names of the files below:

Shows the desktop with widgets in use

Shows home menu extended

Shows web menu extended to demonstrate menu float

Shows what an open (but not maximized) program would look like. As you may notice, there are no silly edges or titlebar in this picture as those are completely unnecessary on the maemo platform. Also, I added a "close" button at the top in the programs bar in case anyone thought one was needed. Minimize however is not included, since any "minimizing" would just take you back to the desktop or another window. It's not a true "minimize", so why have it?

The previously shown program menu (see first post), but with text this time.

Comments welcome as always. These extra mockups are here to better demonstrate some more of the look and functionality of this theme/interface. I've also incorporated some of your ideas and suggestions into the design. Also, some screenshots were borrowed from here (courtesy of meizirkki and lcuk in the "post your screenshot" thread) and used to help demonstrate how some things would look.

Re: Tinkering with a new interface design - Your 2c welcome
 

nice p-shop the latest image with text wil be fine on the tablet.

Re: Tinkering with a new interface design - Your 2c welcome
 

Anyone else have any feedback on the design? If this is good enough, then I can hand over my designs to any developer interested in converting this to a working interface. Also, for a reference point, here's some demos I did using the mockups to show how it'd appear on a real tablet. Sorry for the darkness and poor quality. I tend to keep the lights down in my room. :)

http://www.raiden.net/share/100_0694.jpg
http://www.raiden.net/share/100_0695.jpg
http://www.raiden.net/share/100_0696.jpg
http://www.raiden.net/share/100_0697.jpg

Re: Tinkering with a new interface design - Your 2c welcome
 

lord raiden,

that first new desktop looks familiar ;)

I made this last night:

http://liqbase.net/liq.20090216_004545.lib.scr.png



the size of elements is unimportant for now, it was just to see if I could mirror things properly.

its fully dynamic (as the rest of my stuff is) and I can even zoom into the live mini desktop on the bottom right!

incase you haven't seen the actual video of the core interface in action, its here http://www.youtube.com/watch?v=iMXp0Dg_UaY

the extra things in place now work in exactly the same way :)


a while ago (over xmas) I did some playing with an app launcher

http://www.internettablettalk.com/fo...d.php?p=257905

it loads in the icons and details from the current menu, I never made it "live" as in flexible, but I put the launch code in there.

I did say back then I would make it as an example widget, I'll show you how it looks properly with your 5*3 layout.

It can then simply be a zoomable widget available on the playground.

what I suspect is that it wont work nicely because you have not designed in anything relating to categorization or grouping.

I'll put them together and try to remember to keep it around.

Re: Tinkering with a new interface design - Your 2c welcome
 

Raiden - we share similar design sensibilities. I love your idea and hope to see it on my tablet in the near future.

Re: Tinkering with a new interface design - Your 2c welcome
 

It all looks very nice! I like your incorporating the Home, Close, and typically left-side icons into the top bars.

I don't see that you've implemented a way to hide and unhide the top bars, which I'd still like for maximizing screen space for the on-top program. If you make a little button for that, I was thinking it would be nice if it could be slid back and forth (or anywhere on the screen, but even in one dimension I think would be adequate) to keep it from obscuring something you need to see or click, and so it should also have a "handle," so that, unlike the standard desktop clock applet, I'm not always activating it when I'm simply trying to move it.

I also would like the user to be able to determine the relative size of the left and right bars. I sometimes get too many icons in the status bar, which results in a drop-down menu for accessing some of them. I'd rather have more room for status-bar icons and have the drop-down menu imposed on the left-bar (your Home/Tasks-Navigator/Apps bar), but I think it would be best if that could be made a user's choice.

It also appears to me that your top bars and icons are larger (taller) than the standard ones (maybe it's an optical illusion?), and even though it looks nice, I know over time I'd mind the loss of program screen-space.

... just my two cents (more than my mother sometimes said I had)

Re: Tinkering with a new interface design - Your 2c welcome
 

Ok, this is my 2C

http://www.youtube.com/watch?v=3_zKDUF6Zic

Basically, it takes lcuk's widgets, Raiden's menu bars, and some nice gesture support.

Obviusly, it is just a quick mock up, and could be a LOT better.


Also, for the menu icons, when you click them, they should be finger friendly. Your render shows them being really tiny. I think they should be like the current menu thingy.

Re: Tinkering with a new interface design - Your 2c welcome
 

Yeah, I liked what you had, so I borrowed it to use in one of my examples since I didn't have a good screenshot with widgits on it. Hope you didn't mind. ^_^;;
Well, if I can find a developer who's willing to take it to the next level, then it'll definitely happen. I normally only do the initial concepting and design, and then hand it off to developers to finish. And you'd be surprised how many developers actually appreciate the work I do, since it gives them a visual image by which to work.
Thanks. It's bugged me to see all that lost realestate on the screen, especially when there's no much of it to begin with. ^_^;;
Ok, I could look into that. The reason I hadn't done it in my layout is that, the current normal/full screen layout already does that for the most part. So it just seems like overkill by making the interface do the same thing in two different ways. But a retractable icon bar would be doable, similar to how the kde taskbar retracts. The only question that remains would be, is it practical?

EDIT: Thesandlord's gestures idea might be the answer you're looking for. I can't think of any way to include that in a mockup image (it's an action, not a static feature), but a developer who followed this thread could easily put that on their "to do" list. :)
heh. Took me a second to digest this suggestion. But yes, since status bar icons can't be paged, but program icons can, that would be a good idea. I was actually going to mention that. The design I had for the two bars was that the status bar would grow to the left as far as it needed to, up to 75% of the screen. The left programs bar would then spill over into a drop down menu of all available icons and/or programs as the bar ran out of room for icons. So if I were to include that in my design, you'd see one of those blue arrows pointing down appear when the list exceeded the available space. Anything extra would then be farmed out into the drop down menu. Let me cook up a demo of it so you can see if you like it.
It's likely either artist error, or an optical illusion. I actually did however use a screenshot from another UI to help me set the proper dimensions. So they should be correct.

EDIT: Yeah, ran the image past my current nokia theme and it is off by about 2-3 pixels, which really isn't all *that* bad. heh. So I'll go with artist error on this one. ^_^
Wow, that's a pretty cool concept. :)
Yep, I can easily resize those to make them finger friendly. I had thought about that a bit myself after doing a live interface test with the images. The other thing that might have to get enlarged is the text, as that itself is not finger friendly. Although, to satisfy both camps (stylus vs finger), a simple function allowing text and icon zoom using one of the side keys could be added. That way you just hit the button, and everything is finger friendly. Hit it again, and it's stylus friendly again. :)

Re: Tinkering with a new interface design - Your 2c welcome
 

Meaning with the hardware button (not convenient, at least on the N800) or by some onscreen method I'm overlooking?

That's perfect! I like that better than user's choice.

As a representative of the Stylus Camp, this sounds good, too.

Re: Tinkering with a new interface design - Your 2c welcome
 

http://forums.raiden.net/files/program_overflow_264.jpg

Here's another mockup showing the overflow option for the program bar, and the on the fly resize of the left and right bars based on how many icons are present in the system tray (right bar). In this setup, the system tray is designed to expand left (or contract right) as needed based on the number of icons in the system tray, just like the current one does. Now, obviously I repeated a few things in the system tray in this example, but it's done to show what would happen if you were to ever max out the full allowed width of the system tray, which is 65-70% of the screen. (a full 75% could be gained if slightly smaller icons were used) Once it hits that point, it will go no further. Any system tray icon that can't fit into the tray after that just won't be displayed.

The program bar (left bar) has an option to farm out any excess icons it can't display into a drop down menu, denoted by the blue down arrow. If you are anywhere other than the program menu or the desktop, the red "close" box will still be there. If you're in a program, as displayed in the example, it will appear to the right of the program overflow menu in it's normal place on the programs bar.

The "programs" icon is allowed to spill over into the overflow menu because it's a actually a module so clicking it will merely bring up the scrolling programs screen rather than a traditional menu, thus it doesn't need to be treated special like the remaining 3 items in the bar which are actually menus. Hence why I left them there. They *could* be farmed out, but A) that gets a bit messy, and B) why in God's name would you actually have that many systray items active at one time!?

Comments welcome as usual.

Re: Tinkering with a new interface design - Your 2c welcome
 

Well, I was thinking the hardware button, as that's what I use on my n810. But a more convenient button, or an on screen option could be added for the n800 users if the "full screen" button is difficult to use.

Re: Tinkering with a new interface design - Your 2c welcome
 

Everything in your Post #22 sounds right on to me.

I'm curious as to the Full-Screen button on the N810. On the N800, see the little buttons on the left, top edge of the unit -- three together and then one a little closer to the middle? The Full-Screen button is the middle one of the threesome, and you (OK, I) practically have to aim your (my) finger to press it and not get one of the buttons on either side of it.

Is it the same arrangement on the N810, or did Nokia get a little more ergonomic (and I'm just a klutz)?

Re: Tinkering with a new interface design - Your 2c welcome
 

Nope, on the N810, the full screen button is isolated. Much easier to click than N800.

Re: Tinkering with a new interface design - Your 2c welcome
 

So guys, what's your thoughts on this? Would you say the concept is ready to be handed over to an interested developer and turned into the real thing, or is there something else you might want as a feature or as part of the eyecandy? If it's ready to be turned into the real thing, I'm looking for developers interested in picking up this project, as my part of the work is done. (PM or Email me if you're interested) I really wish I could program interfaces, but alas, since I cannot, I do what little I can, which is UI concepting and design. :)

Re: Tinkering with a new interface design - Your 2c welcome
 

Well, Lord Raiden, you know you can't get the final sign-off from me until there's an onscreen method for hiding/unhiding the bars (or going full-screen/windowed-screen). :)

Also, I came up with an additional idea that fits your overall model and would be very cool/useful ...

We could call the inspiration for this "So many applets, so little screenspace."

My desktop is already crowded with just Internet Search, OMWeather, Internet Radio, FM Radio, and Cairo Clock. Then I see something I like such as the desktop RSS Feed Reader, or Countdown Home Plugin, or other stuff I see on the "Show off your screenshots" thread. But there just isn't enough room! And I don't want to keep checking/unchecking in Select applets ...

So, how about if your GUI offered not just screens of Program Icons but could be toggled to offer whole screens of applets (that is, alternative home screens) that, like your Program Icons, could be paged through with those right- and left-pointing triangles?

(When you -- that is, I -- contribute neither coding nor graphic mock-ups, this is pretty easy! :) )

Re: Tinkering with a new interface design - Your 2c welcome
 

Can I just request a mock-version with the panel on the side. The top panel is nice, but for screen real estate issues, the side is better. Especially because, as previously mentioned you can make icons for programs and system tray go into a menu like formations.

If not, that's okay, but I thought it couldn't hurt to ask at least :D

Re: Tinkering with a new interface design - Your 2c welcome
 

GeraldKo: So in other words, multiple desktops basically. Yeah, that wouldn't be a problem, since that's already a native feature of X. The developers would simply need to implement it in a really easy to use manner.

Neatojones: The goal of this design is to get rid of the sidebar, since we're after horizontal realestate, rather than vertical. Although, I'm sure an adaptation of the design could be made for those wanting more vertical over horizontal.

Re: Tinkering with a new interface design - Your 2c welcome
 

Would it be hard to make it movable... So, one could choose to put it on the side or on top?

Re: Tinkering with a new interface design - Your 2c welcome
 

Nah, I don't see why it couldn't. All the developer would need to do is just add a menu overflow for the system tray just like there is for the program bar, and then make the bars draggable as one. Either way though, there still wouldn't be any title bar, so you'd have to take that into consideration.

Re: Tinkering with a new interface design - Your 2c welcome
 

Hey, have you guys seen the Google Gadgets port to Maemo? Something like that would be really useful. Also, my demo showed some built int gestures, I think there should be a lot more. I'm not sure what the "power" of the tablet really is, and in my book functionality > form, but probably using liqbase or some other fast rendering engine would be awesome.

Re: Tinkering with a new interface design - Your 2c welcome
 

Well, Google Gadgets is open source, and if they've already got gesture support, it would be just a simple matter of porting over the feature from there into Maemo.

EDIT: Silly me. I used the wrong name. ^_^;;

Re: Tinkering with a new interface design - Your 2c welcome
 

Google Gears ≠ Google Gadgets ;)

Re: Tinkering with a new interface design - Your 2c welcome
 

Yeah, I brainfarted. Good call Bundyo. I meant to say Google Gadgets. Not sure why I said gears. Maybe because I'm doing web design right now. lol.

Re: Tinkering with a new interface design - Your 2c welcome
 

As if there weren't already enough reasons for multiple desktops!

Re: Tinkering with a new interface design - Your 2c welcome
 

Well, if Nokia is paying attention to this thread like they are in other parts of the forum, then they might just consider including that with the next tablet. :D Or even possibly this design.

Re: Tinkering with a new interface design - Your 2c welcome
 

Just bumping this to see if any devs were interested in developing this interface. If you need permission to use the idea, then I fully grant it to whoever want to use it. Seriously. Whoever wants to tackle the job of creating this interface is more than welcome to without any restrictions from me. I get more from using such designs than I could ever hope to gain with any other silly licensing or whatnot that others might do. If you have questions or inquirys about the idea, feel free to bug me all you want. I'm really eager to see this design come to fruition. :D

Re: Tinkering with a new interface design - Your 2c welcome
 

Consider joining the artwork component of the Mer project - it's where UI discussions/actual artwork is being done and such happen - wazd is mentoring this area.

Mailing list has just been put up at https://garage.maemo.org/mailman/listinfo/mer-artwork

Re: Tinkering with a new interface design - Your 2c welcome
 

Danke. I'll go check it out. :)