Collaborative Desktop UI Design

[dduardo]

If you compare the desktop UI concepts presented 20 years ago to modern desktops there hasn't been any radical changes. This got me thinking and i've come up with the idea to improve the state of the desktop UI: Have people collaborate on a revolutionary UI design using an open source model. My goal in this project is to have a very functional, practical and beautiful UI that open source desktop developers would be willing to implement some or all of the elements into practice.

-----------------------------

RULES:

1) The design must be saved in SVG format. I'm using Inkscape which is open source and available on all platforms (http://www.inkscape.org/)

2) Note any modifications you make

3) Explain your design concepts

4) Include your SVG file (source)

------------------------------

Here are some ideas I have to start the creative process:

1) Eliminate the windows paradigm and use some type of tab system. Personally I find windows just plain hard to manage and inefficient. If you look at the top of my design you'll notice that all applications are now tabs. If you click on the down arrow you should get a menu of recent applications used that can be started. You can also use the search to find applications. If you want to see multiple applications at the same time you could use CTRL+CLICK to have the screen split with multiple applications. How this actually works still needs to be developed. Also if there is an idea of how to do the same thing but without using a keyboard binding that would be good.

2) No titlebar buttons. Minimize and Maximize should be obsolete. Everything should either be full screen or be slip in an optimal way. Close should be achieved by yanking the tab of the binding (like removing an item off the OSX dock) or you can use the right mouse click to close.

3) Global search bar. The purpose of this is to blur the line between the desktop and the internet. When you do a search it will use the current application view as the primary search, but it should also search through files on your system and the internet.

4) Under the application tabs are application threads. For example, if you have a bunch of browser windows they will be grouped under the main Web browser tab, but is also split by the pages you are currently visiting.

5) Completely eliminate the menu bar. Everything should be exposed and not hidden in sub dropdown menus. If you decide to use a dropdown it should only have one level. The ribbon idea is decent, but can be cluttered very easily. Try to minimize options for users.

6) No status bar. Intead of showing progress in the status bar, use the url bar like Safari.

7) No popups. They are easily lost behind junk. Put messages within the application.

8) Combine button functionality. In the Web browser example that I have given the "Go" button for the url can become a stop button when it is processing. The refresh button is redundant because it is the same as pressing Go again.

------------

Checkout the starting design. Ignore the color scheme and other pretty factors. Right now I'm after function, efficiency, clarity and ease of use.

osui.zip

Edited January 29, 2006 by dduardo

[dwntwn]

I'll admit that I didn't read any of your post, well some.. however if you look back at the historical screenshots on this and any other linux related desktop site, you will see the human nature to crave eye candy.

A tabbed interface lacks the je ne c'est quoi of shadows under windows, tossing windows around, etc.. if you get the eye candy factor looked after asap, you will see that people will buy in to the idea a whole lot easier..

progammers are not good marketers.. but if you get some marketers to sell the idea, the feedback they can give developers would be imense lol

[dduardo]

I understand the need for eye candy, but that currently isn't my focus. I'm trying to strip down the basic UI into the most needed components and then working my way back up. There is no reason why there couldn't be curved buttons, shadows under tabs or the ability to drag tabs around, but I want to start with a more structured foundation. I want to work on the practical and functional part and then make it look really nice by adding all the eye candy. Just think of my design process like doing a webpage. You have the structural html and then you have the stylesheet. You can change the stylesheet all you want but the basic framework is there.

-------------------------

Fighting with windows to get it the way people want them to look is a pain. Selecting the corner of a window and stretching it requires accurate mouse position and movement. With tabs everything would be more mechanical, so you're not wasting time trying to get your environment just right when the work you do on the computer is more important.

-------------------------

Having to move your mouse all the way to the bottom left of the screen to open a new program is also a pain. That's why my concept has application tabs and a small tab (similar to IE7) that can be used as a dropdown which gives the option for most used applications.

-------------------------

I know there are a lot of great artists at neowin. That's why I posted it here. But I also know people here have differing opinions on how good or bad the Vista UI looks, the OSX UI looks and how the linux UI can look.

-------------------------

**I've attached an image of the svg file for those that don't want to bother opening the svg but do want to comment.**

Edited January 26, 2006 by dduardo

[madd_matt]

Although your tabbed desktop sounds nice in theory, it has some fundamental flaws.

*matt looks at time and realizes he hasn't got enough to write everything he wants to*

What you are suggesting is very similar to having all your windows maximised and switching between them with a panel. Right now i have a firefox window open and maximised, because i'm not doing anything else.

However, what if i'm doing something else. Say, IM. When i'm chatting, i generally have three or more MSN conversations open, xchat, plus xmms and maybe some other stuff. With your tabbed concept, i'd be forced to have all of them "maximised" and using up all my screen, which reduces my ability to multitask.

The UI you are suggesting is suitable for something like an embedded system with a small screen and limited control.

I wish I had time to elaborate more but i've got to run. I'll be back.

[dduardo]

madd_matt you probably didn't read all of my first post because of the time. I mentioned having multiple applications shown at once using a split screen approach. For example, lets say you're doing research on the internet for some paper your writing. You can easily CTRL+Click the Word Processor Tab and the Web Browser Tab and have it go into split screen mode. The default could be vertical split screen, but you could also do horizontal. Another option is to click and hold the application tab and then select "multiselect" from the dropdown. It could be named something else. You could close applications the same way: Click and hold and then select "close."

Also, it is good that the same design can be used for embedded devices. It makes the system very portable, just like the Linux kernel.

People reading this thread should realize that I'm just throwing ideas around. It doesn't have to be tabs if you don't like. I encourage people to edit or create their own SVG layouts if they have another design approach or simply want to tweak a layout they like.

[ichi]

This is how I'd do it (and actually the way I'm working with my E desktop right now):

[1] A button to open the apps men? (aka start button) is absolutely unnecesary, and forces you to move your mouse to wherever the button is.

Solution:

-Menu opens when clicking anywhere on the desktop

-If some app is taking the whole screen, menu is opened through a keybind (eg. the infamous "windows key"), and it's drawn exactly where the cursor is (minimal effort).

[2]> Buttons on the titlebar are sometimes hard to reach.

Solution:

-Move all the minimize/maximize/close functions to keybinds.

-Add a window menu accesible when clicking anywhere on the window (eg. alt+rclick). Menu appears where your mouse pointer is. Every property related to that window should be accesible from that menu.

[3]> The application you're working with should be able to take the whole screen without blocking access to any other apps and desktops elements by doing so.

Solution:

-A clean desktop (that is one with no apps being displayed) should contain no elements that cannot be accesed otherwise. Everything is accessible through keybinds and/or the menu.

-Switching applications can be done through the menu or opening then in different virtual desktops and moving through them with keybinds.

[4]> Application windows should not get in your way when trying to see the information being displayed on another window. Eg. writting a document while looking at other document content shouldn't force you to have the former on top.

Solution:

-The active window doesn't automatically become the window on top.

[5]> Minimizeing windows sometimes takes them a bit too much out of the way if we'll be switching often between several apps' windows.

Solution:

-Provide another level of "minimization": shadeing. The window disappears and only the title bar is visible. Windows can be shaded/unshaded either through a keybind or using the mousewheel on the titlebar.

Just to name a few ideas... you could also add stuff like the possibility of grouping different windows into the same one as tabs (doable on *box window managers IIRC).

[dwntwn]

So I imagine you want to expand on the window manager that has a single screen for one application and split screen for multiple apps open with a tab in the top right to switch called

ratpoison

I knew I saw this idea somewhere else...

[Jarik]

I too have an interest in the UI design, as I took some courses in uni devoted to user experiences.

The most recent example of a well though out UI I have come across is Mezzo, featured on the SymphonyOS system.

It is a well documented approach towards designing a user-centred interface, that breaks away from the norm, yet has features that any computer novice should figure out in no time at all.

[dduardo]

ichi, I have a similar interface but with FVWM. Right click anywhere on the desktop popups a menu of apps. Windows can roll up. Every window is in full screen mode and on its own virtual screen.

soffcore, I actually used ratpoison for some time, but having regular people try to learn the keyboard bindings required to be efficient would be a nightmare. I'm confortable with the concept of keybindings because vim is my choice text editor, but I can't say the same for other people.

Jarik, mezzo looks interesting but still suffers from overlaying problems in full screen mode apps.

------------------------------

Here is idea about how to handle multiple apps at the same time. I'll introduce the concept of inheritence to tabs. This is how it works:

Let's say you open up two text documents and two web browsers. One text document and one browser is on the mayan culture and the other text document and browser is on the aztec culture. What the user should be able to do is click and drag the browser tab on mayan culture and move over the main text document application which then shows all the text document tabs and then continue to drag the tab until it is over the mayan text document tab. This will link the two tabs together and it will put them in vertical split mode. The same procedure can be done with the other topic. Grouped tabs can have a similar color and perhaps a border around the whole group.

This concept allows people to flip between the mayan culture group and the aztec culture group without repositioning the windows when they want to switch between the two topics.

[madd_matt]

Ah, i missed the part about split screen. That would resolve alot of my issues.

Actually i rather like this idea, so long as the ability for "normal" windows is maintained.

But really, this could be accomplised easily with current technology. Just maximise everything by default and remove the max/min button from the titlebar. You could even really remove the title bar already.

run xfce and make your own theme to accomplish what you want.

[dduardo]

Here is sort of the idea with the tab grouping and workspace splitting. The first three tabs are grouped together and the second three tabs are grouped together. When tabs are grouped and selected all the tabs are shown in the group at the same time. When you select another group, the tabs within that group are all shown.

osui2.zip

[madd_matt]

This still feels like a step backwards for me from the "windowed" GUI. I can see why you suggest the things you are, but it just doesn't feel like its an improvement in the long term.

Perhaps you should try ratpoison, or modify it a bit. Its pretty similar to what you're attempting i think.

[dduardo]

This still feels like a step backwards for me from the "windowed" GUI. I can see why you suggest the things you are, but it just doesn't feel like its an improvement in the long term.

Perhaps you should try ratpoison, or modify it a bit. Its pretty similar to what you're attempting i think.

Can you explain why it is a step backwards? Also, didn't you read my previous post. I've used ratpoison before, but what i'm trying to do is design a UI that even non-technical people can use.

[neostyle]

Can you explain why it is a step backwards? Also, didn't you read my previous post. I've used ratpoison before, but what i'm trying to do is design a UI that even non-technical people can use.

whats a non technical user ? even 4/5 old kids can use a use mouse/keyboard to interact with a computer .

the main thing is u can't change that much in the ui design/user experience as long as u use the mouse/keyboard and the windowed gui. the next step will be a voice driven computer with some sort of ai in the computer itself . thats the base that will radically change the way the user interacts with the computer and change the visuals u get from the screen . but we are far away fom that :D

[theotherdave]

neostlye, a non-technical user in this case means someone who can't remeber all the keybindings to manipulate windows in Ratpoison. Something that takes a fair amount of practise.

You certainly woudn't expect a user who has never even seen ratpoison to have any clue about how to get around...

dduardo, I like your concept so far. I like the idea of tiled apps and fullscreen windows, giving you maximum space for the task at hand.

I agree with madd_matt in that you seem to be propsing something like ratpoison, but easier manipulation of windows (ie switching tabs with the mouse, combining them with the mouse), and some eyecandy are desirable extras.

[ichi]

I like the part regarding eliminating popups and displaying the info in the parent window.

[dduardo]

neostyle, by non-technical user I mean someone who doesn't have the means to remember all the keybindings, which is what theotherdave said.

Also, I do understand the limitations of the mouse/keyboard combo, especially in the portable market. That is actually my focus in my senior design project. My project is on motion adaptive UI. Basically I take 3d measurements of the orientation of a portable device and by using that information I can change the way a video is being played. For eample if you have the device tilted so your looking at the screen in portait mode, it would display the video in 4:3 ratio. On the other hand, if you tilt the device and look at the screen in landscape mode it will play back video in 16:9 ratio. The purpose is to optimize screen realestate.

Users can also scroll through menus through tilting and simply shake the device for a random song (that would be a good feature for the ipod shuffle).

--------------------

Here is another idea I had. On the main workspace tab I can color the top based on the types of groups within it. Therefore if you working in another workspace and want to go to another group but don't know the name, you can simply look at the color code. Something like this:

[phot0nic]

I'm liking this idea. Please don't give up. There's real potential here.

However, it kinda seems like there wouldn't be as much control over the environment this way. I mean, it's all cut and dry right in front of you. This could be a good thing, and it could be a bad thing. The good part is that I believe you've developed a very user-friendly intuitive idea. However, it might not suit the "power-users" who customize every little thing the way they want it. But, of course, on the other hand, if it was done right the first time, maybe people wouldn't feel a need to change it.

So, once again, keep trying, I like it. Maybe get someone to create a window manager for linux that incorporates this design? I'd definately try it out.

[PrimoTurbo]

Here are some concepts from me. Everything is made from scratch, except the media preview touchstone thing it's from a DVD. It's based a lot on Windows XP.

[dduardo]

Hitchhiker427, thanks for the comments. For power users (and normal users) I would like to incoporate a high level interface with scripting capabilties as well as a standard document model for the UI. This would allows for easy output manipulation as well as being able to drag and drop capabilities from one program to another.

Here is an example of what I mean:

Let's say all program UIs were built on a templated html document model.

<program>
<head><title>Example Program</title></head>
<body>
Hello %user.name%,<br>
This is your schedule for the day of %date.day%<br><br>
Schedule:<br>
%user.schedule(date.day)%
</body>
</program>

The programmer that codes the backend would provide a public interface to all class members and methods. A power user could edit the above code directly and even add advanced features themeselves. But for a normal user, let's say they wanted to be able to search their schedule for a day in the future. All the user would have to do is drag a search box from another program to the schedule table that is built by the user.schedule method. Internally, a program would check the method parameter datatype and automatically generate a form that would do a search on date combinations.

This is a very simplistic look at it, there is much more work involved, but you can see my point.

-----------------

PrimoTurbo, nice effort, but what is the difference between remove window and close? Seems like reduntant functionality. Also, are you right handed or left? I ask this because I never could understand why the titlebar buttons are on the right if you're right handed. Why? Ergonomics. Arms like to move towards the body, not away. Same thing with wrists. Wrists like to move inwards. Right now I have my title buttons on the left, just like the Mac.

If you notice in my design i've put the application selection menu by the tabs (it is the tab stub with a down arrow). I put it there because most people tend to have their mouse located in the upper 1/3 part of the screen. Having the application menu located at the bottom of the screen causes the user to move the mouse excessively. There is also the ergonomics issue. Lay your wrist against your desk and fix it in position. Now move your mouse up and down with your hand only. Don't move your arm. Which way is easier on the hand? Up is easier than down.

The menu bar is not my cup of tea either. It tends to be so far away from the content i'm trying to edit. I would like to see something like a context sensitive mouse menu. Imagine selecting a word in a text document and a bunch of buttons appear automatically that orbit the selection. You could select from formatting to other options. This is in my opinion more convientent and provides the user with less information that could get confusing. Instead of having to look through alot of unrelated context, the buttons that appear are those that only apply to the current context.

Finally, is it possible to post the source? It would allow other people to edit your work.

-----------------

Here are a few more other ideas i've had today:

1) CVS document management. Forget about saving documents, the system will track changes as they are made using regular commits.

2) Automatic File Handling. Don't worry where stuff should be saved to. A background service groups files based on metadata that is automatically generated. For example, if you download a bunch of mp3 files from the net, it will group them all together.

3) Object-Relational file management. You need this for automatic file handling to work. Let's say you have the case where your writing a document titled "Nirvana - The Band that Rocked the 90's." You would probably want to link this file with all Nirvana mp3 files as well as with text douments in general. There is where a nice database based file management system works well. It allows you to have this overlap of context.

[PrimoTurbo]

One comment I would like to make this is only a concept and I had a vauge idea of what I wanted to show off, no it's not supposed to be black and white just the elements of it which can be skinned on top after.

dduardo:

I made a quick drawing in mspaint to show the concept. The way I think it should work is that you acctually see 4 buttons close, max/restore and minimize and the last one is the 3 circle one let's call it "split view" for now.

Okay let's say you have a bunch of stuff open, for example your are reorganizing your music collection or whatever. Now it's a pain in the ass to have the overlays and trying to resize them to copy stuff, etc. This is why you have your tabs concepts. So what you do is press the split view button with one click and with your mouse you click all the windows you cant included. These windows will all be grouped together into a split view. Any additional windows you open will have a + sign, you can add them at anytime to the split view. Or you can add from the split view you can also remove windows. A double click of the split view button will take all the open windows and group them together into a split view. In the taskbar you will now have 1 window with all the windows. You won't see + - unless you've already created a split view.

I know it sounds confusing hope this mspaint stuff will make it more understandable.

It makes more sense for me to have the stuff on the right side, maybe because I?m more used to it but I think it also has to do because I am right handed. But yes you have a point, however I think if you have a good mouse and mousepad it's pretty to move either way. Doesn't make much of a difference to be honest.

The selection of text and edit menu is a very good idea, I haven't given it much thought.

I'll attach the PSD file, however it's very dirty sorry but I am messy when I work. Inkscape is very laggy to work with and I really can't be bothered learning it.

Edited January 29, 2006 by PrimoTurbo

[dduardo]

PrimoTurbo, ah, now I understand. The implode/explode into/out of split mode idea is actually good. The same concept could be applied to the tabs idea. Let's say you have a bunch of tabs in a workspace that you want to see at the same time. There should be a way to implode them all into one group. The user should also be able to do the reverse operation. Subgroups could also get this functionality.

[phot0nic]

Hitchhiker427, thanks for the comments. For power users (and normal users) I would like to incoporate a high level interface with scripting capabilties as well as a standard document model for the UI. This would allows for easy output manipulation as well as being able to drag and drop capabilities from one program to another.

...

I'm loving the idea. As far as which side the buttons go, I do like thr right-hand side more. I mean, when I switched from my OLD apple to windows 95 (granted I was young), I actually liked the buttons on the right-hand side more than the left, and still like it that way better. But, to each his/her own. The fact is, which a true "next-gen" UI, the user should be able to choose little things like that, right?

Once more, I'm liking your ideas more than the proposed ones with windows. When windows are used, it may make multi-tasking easier and more intuitive, but doesn't take full advantage of the size of your screen and such. Your ideas with the tabs, does take full advantage of the screen size, AND (unlike most "full-screen" interfaces) would make multitasking easy.

One big qualm I can see however, is having a program open with multiple tab groups. I mean, maybe on the side fo the tab, have a little icon that brings down a drop menu with common features. You could have an item that would "duplicate" the program tab, so this could be easily grouped with another group, and could also be easily rearranced to sit next to the group it it associated with. Also, you could have an entry that makes that program available for ALL groups in the current workspace. Just some thoughts.

[PrimoTurbo]

I think it?s an interesting concept but the problem is that you won?t be able to fit all the options on a full screen while having access to everything else. Imagine what happens when you have 30 windows/applications open (perhaps you will need to make a model that demonstrates what happens under your concept).

I also think very old operating systems started with this concept, sort of like cell phones have a similar interface. It does make it easier but it?s not enough space to fit everything. I can imagine how mass renaming or moving a lot of files will be a big pain in the ass under full screen, even with a split screen concept.

[markwolfe Veteran]

Is anyone other than me wondering why this is located in the "Customizing your *nix Desktop" section? :ermm:

Wouldn't a 'graphical design' type of forum been more appropriate?