New R2 Deskbar Mockup

Forum thread started by alphaseinor on Thu, 2006-12-07 01:50

First thing, I am looking for criticism, and positive feedback I would like the replies to have a pros and cons section... I don't want to hear "This sucks!" or "this rocks!" unless it really does... and why you feel that way.

As a history on me, I have been in the community for years and years and years (since 1995) so I have a little bit of experience with BeOS, and just wanted to kick it up a notch.

First, this menu by default will be on the bottom of the screen, aligned with the center line of the screen. It will have only the clock, the Haiku, and Disks menu.

Haiku Menu: It will be similar to the normal Haiku menu
Disks Menu: It will have a Zsnake (look it up) menu to track through the file structure
Clock: Double clicking on this will bring up the clock/calendar prefs

Tracker Icon: this may have become depreciated with the new deskbar

As you use the computer, the applications will show up in two different types of icons: Blue means it's running, Red means it's crashed

You can drag and drop an application to make a shortcut (which will be Grey). When you open the application it will transform to one of the above blue or red icons.

The colors should be gradiant, and possibly a transparent red overlay for the crashed application

The mouseover will brighten the blue or red background color, denoting the clickability of the icon.

On any open application, it should show a list of all of the windows (like the current deskbar) with an X to close any window you want, even if they are hidden.

On the crashed application it should show the list of windows, with a red background (or transparent red overlay) on the deskbar selection for that window. This will allow you to quickly identify which window needs to be killed.

The deskbar can be dragged to any edge, or corner. It will expand with the number of applications. When the number of applications expands to a higher level than can be displayed, it will show a scroll bar, and can be scrolled with the mouse wheel

I have a number of other improvements, and I will document them in this thread... Just wanted some feedback...

Please don't be too harsh!

Comments

New R2 Deskbar Mockup

Well since no one else is responding, I'll critique my own work.

This deskbar is everything I liked about three different operating systems. Windows, BeOS, and MacOSX

Windows has the problem of not being able to order the windows on the taskbar. This was solved by MacOSX, but the "Mac on acid" look never really appealed to me. BeOS always had a "start menu" like appearance, and originally in R3 it had a disks folder on the desktop. I think if the disks icon was there with the zsnake menu, it would be easy to navigate.

The ZSnake needs to have a delay of about 1/2 second where if you are "off the mark" and where the menu is not that it will default back to the previous menu, and the previous one after that... etc... This will allow you to make a mistake in mousing, without having to start over (we've all done the hunt down the VESA script file, and accidentally got stuck in some other folder)

The menu itself should be done with a scalable vecor graphic, so the size is always the same no matter what resolution you are running. This would look much more professional, and allow less experienced people to enjoy high resolution more... not to mention reduce the number of calls to the helpdesk about "why are my icons/text/whatever so small".

the deskbar handle has two functions, Zooming the deskbar (making it larger, smaller) and moving the deskbar to a corner, to the middle top, middle side, it can be oriented in any way thinkable, even movable in the middle of the screen (like a dockable window). Zooming occurs with right clicking, moving with left clicking

I personally like the idea (but then again... it is mine)

New R2 Deskbar Mockup

I'd have to see this thing in action before I could criticize. But I really like the idea of a disks zsnake in it.

New R2 Deskbar Mockup

Thanks Iso,

I will make a more complete mockup of the look/feel sometime this weekend. Unfortunately, I don't really code anymore, it's been like 2-3 years since I did anything with Win4Be...

New R2 Deskbar Mockup

Here's a little of what I described above... I'm trying to keep the icon size small, for space sake... this is designed to be resizable on the fly, make it as large or as small as you want (to a certain extent of course... I think the icons should not be smaller than 16 pixels on the screen for geeks, and as large as 128 for visually impaired persons). It is resized by grabbing the handle on the left of the H button with the right mouse button, and dragging away from the menu to enlarge (it should be proportional to the mouse drag) or towards the menu to shrink.

The font of course is user selectable... so the font below is not a feature of this mockup...

New R2 Deskbar Mockup

You can click and drag the icon to anywhere you want it on the deskbar between the haiku menu and the clock (although, why not let them drag it anywhere?)

the above would look like this... after you have clicked and dragged the application to the new location.

New R2 Deskbar Mockup

seriously... there are enough views on this that there should be more than just one comment... don't be shy... comment away... I'm one of the few people who actually made money off of BeOS... and I'm willing to make haiku a winner.

New R2 Deskbar Mockup

I think people are afraid of your "rough" mockup... looks like it was done in Paint, no offense.

Aesthetics aside, I really like the concept. Maybe pass it by the Glass Elevator guys?

New R2 Deskbar Mockup

Thanks for the feedback j_freeman, I'll see if I can link up with the glass elevator guys and see what they think...

It actually was done in paint... good eye...

This is a mockup... not final by any means, just to get the basic look/feel down, nothing out of the ordinary... The reasoning behind this is that you wouldn't do a movie without a rough sketch, and you wouldn't present an incomplete idea in photorealistic detail...

This is an incomplete idea, and the point is to only serve as a basic understanding of the flow of the deskbar, and improve before I get to programming again...

New R2 Deskbar Mockup

The 'hide', 'show', 'close' and 'kill' symbols bring too much visual clutter and seem to be a big step backwards... both BeOS and Mac OSX have none of this. In Mac, symbols like 'x', '-' and '+' only show up when you hover their round stylized 'aqua' dots (at least in my setup)....in BeOS you just remember which shape does what and those shapes didn't escape from an alphabet or relate to what you can find on your keyboard....proving there's no need for that.
Another thing is BeOS's clever co-operation between tab height and deskbar which makes the top-right corner the ideal place for it. Pity to throw that away, IMHO.

New R2 Deskbar Mockup

no i don't think buttons belong on a menu.
that's #1

New R2 Deskbar Mockup

arielb Can I get some explanation to the reasoning behind not wanting buttons on the menu? The reason for the buttons on the menu are for if you have a window that is crashed, or one that is hidden that you want to close (or unhide). What would you change about this?

Meanwhile The button size can be configured, also if you look at the first illustration, it does go into the corner, like the current deskbar you can drag it around. The Icon size can be changed to fit like the current haiku menu does.

New R2 Deskbar Mockup

With a current tab height of 20 pixels, a 16x16 icon has only two pixels of margin at the top and two at he bottom.

When you take that into account, I think colouring the background in different colours is a bit too much...things could become not so clear and obvious as you'd want.

(A true-sized illustration would make it easier for others -and myself- to see if that's the case.)

Also, I think an icon deserves not more than a set background colour, either chosen by the user (menu background, menu selected background, desktop background) or just defined by default: grey (menu background), blue (menu selected background), another blue (desktop background) and white (file-background in a window).

Why? Maybe out of respect for the icon's creator, because (your) new changing surrounding colours affect the icons a lot.

New R2 Deskbar Mockup

Well, look at the items in blue to see the problem. Those buttons are too close together and people will click on the wrong one by mistake.

New R2 Deskbar Mockup

I'll make a new mockup later this week... I've got some really good suggestions coming in, and I want to incorporate them...

New R2 Deskbar Mockup

This is a more graphical version of what I am talking about... I haven't had a chance to reduce the number of colors in the png files... so later on they will be changed.

I have changed the running icon from blue to white,
The link to a program or document is on the bar with no border.

This would be the maximum size (I would hope!), and all of these were done with SVG (a.k.a autocad), exported to png, then edited in paint. the icons won't have an actual size since they have the new "HVIF" icon format. I tried to make it more realistic looking instead of shrinking sizes down. You will find some graphic artifacts in there, but it should be crisp and clean when the final version is done.

The clock is even in scalable vector graphics, and I would like to be able to scale the text up and down as well.

And this would be the vertical version.

New R2 Deskbar Mockup

I think I get it now. merging quicklaunch with the taskbar to use windows terminology. So right now in xp I have 2 firefox icons-one in the quicklaunch and 1 in the taskbar. we can get that down to 1.

So in your example, if i click on bemail, it would turn white. Let's say there was another link to the right of bemail. so does that mean bemail moves to be with all the other white icons?

For the menus, i really do like XP here (I set to grouping but it's not as consistent as BeOS) . just right click on each item so that you could close, minimize,etc on each window.

And of course, if there was only one window, just one click should open it. When I used BeOS I had to click 2 times!

New R2 Deskbar Mockup

also, what's the folder in the clock?
and that a thin scrollbar under the bar? I don't think that's such a good idea. to hard to click on

now the crashed apps...i'm not so sure this should be in the UI. the OS should handle this and just kill the app automatically. Of course, there should be session saver for every app.

New R2 Deskbar Mockup

The folder under the clock is just a deskbar tray icon (think the speaker for volume control).

The thin scrollbar (is actually, in this case not supposed to be there) is so you can see all of your applications that are on the deskbar (like in this scenario, where it's so freaking huge, if you have more than a four or five things on there... you would be off of the deskbar). I'm used to putting about 20 things at once, so there needs to be a scrollbar to find what you want, BTW you can also hover over and use the scrollwheel to find what you want)

The Icon, when you run it stays where it is, there are no classes of applications, you can place it anywhere on the bar you want. you can group things, or not.

The idea is if you only have one window open, then you should only have to left click on it to switch to it. not click on it, then click on the only item in the list.

arielb I think you have this UI down, It's quite natural isn't it?
I'm working on the other mockups later this weekend after I fix my Golf TDI...

New R2 Deskbar Mockup

I guess a simple way of describing the scrollbar is if you have too many items to display on screen, it will show up (It only shows up when there are too many to display, and it should be obvious to the user when it does)

New R2 Deskbar Mockup

arielb wrote:
the OS should handle this and just kill the app automatically.

I can just hear it now... "I try to open this application, and then it disappears" calls to the company helpdesk...

New R2 Deskbar Mockup

alphaseinor wrote:
arielb wrote:
the OS should handle this and just kill the app automatically.

I can just hear it now... "I try to open this application, and then it disappears" calls to the company helpdesk...

There should always be feedback for this type of problem. Crashed apps should not be a common occurrence - and the OS should NOT just remove them automatically. If anything, a crashed app should be an extremely visible problem, with a lot of feedback to the user (maybe with an option to "leave me alone if this happens again") - this encourages users to contact application developers to report the problem and get it fixed.

New R2 Deskbar Mockup

Is there really a need for descriptions below the icons?
They'll get illegible soon when you start scaling down.

Also, in the vertical layout, relatively long descriptions like 'Workspaces' turn squares into rectangles, making the total not lined up...a bit messy.
Simply using textfields that appear when hovering an icon would be a better way, IMHO.

And the time-digits remind me of the ugly Linux ones. If you want to suggest a digital clock, just try the dotted, rounded version (like what you often see on modern car stereo displays).

I like the white on grey!

New R2 Deskbar Mockup

I'm never going to see this scrollbar. I think it's better to have a left and right arrow at the edge-sort of like how firefox 2 handles lots of tabs

I think there should be a dialog for crashed apps. maybe a talkback so that you send the crash info. Then when you click ok, the app will go away.

I just don't see a need to indicate this on the deskbar. Nobody will know that pink means it crashed since it shouldn't be so common!

http://code.google.com/p/airbag/ open source talkback

New R2 Deskbar Mockup

I reckon the best thing when a user has many apps open at the same time would be for your 'deskbar' to scale down the icons.

New R2 Deskbar Mockup

How about allowing any file to be dragged in, not just applications?

Directories could present a drill-down menu when clicked, with an option to open in Tracker from the right-click menu. This way the user would be free to add icons for Disks, Desktop, Apps - anything that can be accessed from a directory.

By dragging in saved queries you can have things like Unread mail, Resent files, Favorite music. The only limitation is the user's ability to come up with creative query definitions.

New R2 Deskbar Mockup

bogomipz wrote:
How about allowing any file to be dragged in, not just applications?

Directories could present a drill-down menu when clicked, with an option to open in Tracker from the right-click menu. This way the user would be free to add icons for Disks, Desktop, Apps - anything that can be accessed from a directory.

By dragging in saved queries you can have things like Unread mail, Resent files, Favorite music. The only limitation is the user's ability to come up with creative query definitions.

yes...

New R2 Deskbar Mockup

I think the deskbar today is the right way, all we have to do, is to modernize it a little bit.
One idea I have, is semi-transparent deskbar. Once it gets focus, it gradually goes to non-transparent state. Other idea is something like dock on Mac, but with BeOS flavour - not so big, no unnessesary bells-whistles like growing icons. It has Haiku menu at left and clock on the right end. In the middle there-s running apps list like Deskbar today has, except it has dynamic size depending how many windows are open. And it should have some kind of transparency so ti wouldn't hide other programs when it's on top.

New R2 Deskbar Mockup

vootele wrote:
I think the deskbar today is the right way, all we have to do, is to modernize it a little bit.
One idea I have, is semi-transparent deskbar. Once it gets focus, it gradually goes to non-transparent state.

I agree to a certain extent. Nice things about Deskbar are that it has a distinct feel compared to most OS's taskbars (unless you run it in "win95-emulation mode"), it fits nicely with the fact that the upper right corner of the screen is always accessible due to tabbed titlebars, and each new app or window takes up minimal space because they are laid out vertically rather than horizontally.

I'm not so sure transparency is such a good way to improve it, though. Most of the time, this kind of effects only add eye candy at the cost of computing power. Very seldom does it actually contribute to usability.

Something that always bothered me about the R5 deskbar was that unless you opted for expanded apps, any window was two clicks away instead of one. Also, left- and right clicking did the exact same thing. I think an improvement would be to send all windows of an app to the front/back when left-clicking, and present a menu only when right-clicking. This kind of simple usability improvements are far more sane than adding special effects, in my opinion.

What I would looove to see, by the way, is the above mentioned deskbar change coupled with "tabbed frames" as done by certain X11 window managers. This just makes *so* perfect sense for Haiku in my eyes. Go read the first paragraph of the about section for PWM to see what this is about.

vootele wrote:
Other idea is something like dock on Mac, but with BeOS flavour - not so big, no unnessesary bells-whistles like growing icons. It has Haiku menu at left and clock on the right end. In the middle there-s running apps list like Deskbar today has, except it has dynamic size depending how many windows are open. And it should have some kind of transparency so ti wouldn't hide other programs when it's on top.

Isn't this more or less what alphaseinor's design is about? There will always be details that can be discussed, of course, but his basic idea is to use the "dock" concept - to combine launch icons with running apps management.

New R2 Deskbar Mockup

right click should bring up the context menu. windows xp taskbar does this correctly

Re: New R2 Deskbar Mockup

Wow,

This is like Windows 7 a year before Vista!

Re: New R2 Deskbar Mockup

Thanks! Glad I got *some* credit... no thanks to M$

Wonder when their concept was originated...

Re: New R2 Deskbar Mockup

So in your example, if i click on bemail, it would turn white. Let's say there was another link to the right of bemail. so does that mean bemail moves to be with all the other white icons?

Yes it would turn white, however it would always stay in one place, unless you drag it one way or another

And of course, if there was only one window, just one click should open it. When I used BeOS I had to click 2 times!

of course, that's one of the things I didn't like in BeOS

and that a thin scrollbar under the bar? I don't think that's such a good idea. to hard to click on

I agree, however it's not supposed to be a scrollbar, it's supposed to scroll with the mouse wheel

now the crashed apps...i'm not so sure this should be in the UI. the OS should handle this and just kill the app automatically. Of course, there should be session saver for every app.

I disagree, any notification should gradient between white and red (animation?) I'm not a big fan of that jumping Jack Russel terrier thing on MacOSX

Is there really a need for descriptions below the icons?

No, it should be able to be turned off, I'm just not a big fan of hieroglyphics

Also, in the vertical layout, relatively long descriptions like 'Workspaces' turn squares into rectangles, making the total not lined up...a bit messy

I can always use a “…” or just widen it a little... how does the deskbar do it now?

And the time-digits remind me of the ugly Linux ones. If you want to suggest a digital clock, just try the dotted, rounded version (like what you often see on modern car stereo displays).

Fonts are drawn in paint, and should only be criticized in bikeshed mode... much later than concept...

I like the white on grey!

Thanks!

I'm never going to see this scrollbar. I think it's better to have a left and right arrow at the edge-sort of like how firefox 2 handles lots of tabs

It won't show unless you have a boatload of apps or links, or queries, or folders or whatever else you want to link here... technically you can put your inbox there if you want...

I think there should be a dialog for crashed apps. maybe a talkback so that you send the crash info. Then when you click ok, the app will go away.

Notifications are the recent solution... I like how WebOS did it... not a big fan of Android's... maybe put the notifications where the clock is?

I just don't see a need to indicate this on the deskbar. Nobody will know that pink means it crashed since it shouldn't be so common!

Ahh... but it's not just pink, it's any color between white and red... it gradiates slowly up and down to show you something has crashed... not just the application, but any application window... it's a multi threaded OS after all...

Re: New R2 Deskbar Mockup

Check out OS/2 Warp 4 deskbar too (from one of the better GUI around some years ago), but the "modernization" we need is clearly represented by SkyOS (which is dead, hopefully Robert Szeleny can "donate" it to the open source community):

Them we could "grab something" (or, better, get inspiration) from Sharp Enviro:

http://www.allwelike.com/2010/07/sharpenviro/

...a mix-up of these two could be *MUTCH* attractive for users ! ;)

Re: New R2 Deskbar Mockup

:-) please not

i think the gui is in haiku nice. From Desing side need we a Designer Team and a coder Team!

i like a css like theming engine and all color can have a texture.

But this idear need some Brainstorming ...

Re: New R2 Deskbar Mockup

I actually like what Palm did with webOS (yes I'm a lover of more than one os)

They made it so every part of the OS would be code-able through CSS JS and HTML5. If Be would have been funded properly to pursue BeIA, it would have eventually become something like WebOS.

Might be interesting to make a window manager based on webkit, so you would just need to make a web application to make an application, of course you would be dumb to not also be able to make a Haiku C++ Application as well.

Re: New R2 Deskbar Mockup

Oh ye gods, a browser-based desktop is the last thing we need. Part of what's neat about Haiku is how light and responsive the OS is; good luck maintaining that when you have to slather a Javascript interpreter and CSS/HTML renderer on top of it just to draw windows. There are far simpler and lighter ways to introduce window styling.

(And allowing "web applications" into a desktop environment is only going to result in a lot of poorly-developed JS applets flooding the system like it's 1997 and someone wanted to put spinning text around the mouse cursor on their GeoCities page. Yeesh.)

Re: New R2 Deskbar Mockup

I'll be working on this again this weekend, more like the practical application part, but I will be adding an option to run this code...

Re: New R2 Deskbar Mockup

Hi,

Is it possible to have menu and window design with colour gradient like this ?

https://picasaweb.google.com/104993266275382970728/HaikuDesign02?authkey...