Haiku GUI - just mucking around

I actually like it very much, except the icons (which doesn't matter since we have our own). The Deskbar is beautiful, and the Tracker concept seems pretty good. It's bright, modern - and the best part, it's still BeOS/Haiku. The tabs are maybe a tad overdone, but all in all it's pretty and simple as it should be.

It's very good, really, I want this to see in Haiku ;)

It is VERY nice. I do however have one reservation, and that's the icons. Just as the yellow tabs are synonymous with BeOS/Haiku so are the 3D-perspective icons. Personally I don't think that either should be sacrificed.

Some thoughts (imho of course):

1) Shadows below windows is too wide and dark. If we keep in mind, that object should look naturally, shadow should be smaller and more transparent.
2) NavBar (Home | Volume > Haiku > Users and so on) have one little problem: "Home" button and navigation chain of buttons looks as one object. It's not good.
3) Icons, glassy backgrounds under buttons, tabs and menu buttons looks MacOSX-stylish. Now i'm on PM G5 and I love this computer, but I don't want to see mac elements in Haiku GUI

P.S. sorry, my english is very bad.

Hey Justin,

Thanks for the update and thanks in general for doing this, I think getting new people with new ideas is always a good thing.

One quick note is I agree that your second mock-up definitely has a Linux feel to it. But I almost wonder if it is possible to NOT look like Linux because both QT and GTK have many themes. So I think the focus should be on creating the best, most usable GUI without too much concern for how unique it looks. Though if you can create something unique without going to odd-ball, that is great too.

Now in regards to your new mock-up, one little nitpick is the "Haiku/BeOS blue" for the desktop is hex 336698 not 006699 which is what you used here. In the grand scheme I suppose you don't need to match exactly, but using that color will definitely remind people of BeOS and Haiku since that is the default desktop color.

To answer your questions:
- Yes I think the loss of the tab is a big deal. It is more than the look, the tabs are actually useful because you can slide them around and build a poor man's tabbed interface with several windows. But I also think it is important that it also instantly reminds people of BeOS. I do like how the title bar looks though, just shrink it back down to a tab ;)
- The shadow on the menu does seem too big to me. But I think it is a good idea to have shadows as it helps things stand out.
- The scrollbar double arrows have pretty much been dropped from Haiku, as have any options for scrollbars that used to be in BeOS. They were deemed superfluous, though I personally don't totally agree with that.
- The look seems pretty modern though uniqueness is hard to say because of all the Linux themes out there.
- I think this fits in better with the icons than shinier themes. If I were to classify the look of the Haiku icons, I would say "crisp", with the bold outlines, gradients and shadows. If your interface could somehow build off of that I think it would fit in well with the icons. For example window and menu shadows should be smaller and crisper, as if they were caused by closer more direct light. Also interface elements should have outlines to mimic the icons, though solid black or bold is a bit too obnoxious. To get an idea of what I mean, the default Ubuntu theme, Human, has outlines on the scrollbars and menus that I have always thought has a crisp look (especially the scrollbars), which fits in well with our icons.

Some general comments:

I think the scrollbars are a bit too wide, though maybe it could be argued they are easier to "grab" being wider. But my gut reaction is they are too wide. I also think there isn't enough difference between the scrollbar "thumb" and the background behind it. It almost looks washed out, and as I said above the icons are crisp, so interface elements should be too.

I don't really like the round Tracker navigation buttons. Again they aren't crisp enough and round buttons seem dated to me.

I like where you are going with the menu, but it seems a bit off. The way the outline is drawn it sort of looks like you were trying to have round corners, but not quite. I think the gradient on the selected menu is pretty good. The gradient on the menu bar background is definitely better than the "shiny" two tone look, as far as fitting in with the icons.

Anyhow, keep up the good work. Writing this has inspired me to do my own mock-ups in the future.

Hello!

I'm always check the new mockups, and i'm very happy if i found a new artwork.

Some comments:
-I like the "icons" in the menu. I hope, i can found this in the R1.
-The rounded corners looks good for me :)
-But yes, the scrollbar is too wide, and the menu is too high. We lose lot of space with this.
-I WANT tabs!! ;)
-Please use the default Haiku/BeOS background and interface colors, because it looks like washed out. Hard to identify the interface elements. I think, the windows with a small border looks better.
-For me the rounded Tracker buttons is not problem, but i better like the original BeOS tracker buttons.
-I like the small dots in the left bottom corner (for resize) in the original Tracker, maybe You can put some...

Then (my oppinion):
-Colors
-Tabs
-Smaller interface elements

Thank You, Justin! Have a nice Day for You!

(Sorry for my bad english :)
[miqlas]

Thank you for taking up this task - I believe that the current Haiku look is just terrible :-)

I think we must save the BeOS interface concepts, they give us an identity; but we can take a bit of modern computers' power to draw them better (we already have better icons).
This can be quite a problem with the current Haiku drawing engine, I think it should get some improvement even for R1 - things like the Z-order of views, or non-rectangular views.

The question is: should we go for a modern look like Vista or OSX and sacrifice some usability, or save the usability with an older look?
Maybe we can have a slider in the Look Preferences where you can set the sharpness of the shades...

I used to like the QNX 6 look - everything is clear and sharp while having gradients - but I feel it outdated now. Also the "Modern" interface from Mozilla SeaMonkey. We can easily make something like those.

I'd slightly disagree with you about the mac part - dock eats quite a lot of space; while big buttons are actually good - they're easier to click. The thing is that GNOME's big buttons are particularly annoying. Camino browser for example; employs big buttons but looks great.

I don't want Haiku to look like a XP's ripoff with the rounded and buttony corners and all... I like it crisp and sharp like R5.

Hi Justin,

I wanted to thank you for all of the work you are putting in on this. So far I've been very impressed.

Regarding your last screen shot, I'm not a fan of the solid bar, please bring the tabs back. For me the second screen shot you posted was my favorite, I would have liked to have seen the curves on the tabs though. One idea might be to model the tabs after those on manila folders, where there is a second curve at the junction with the body; just a thought. Leaflord's post added some screen shots, and I noticed that the old BeOS buttons had a sheen on them as opposed to the tab. There might be something there, a glossy tab with flat buttons, or the other way around.

Beyond that, I'm pretty much entirely in harmony with Ryan's comments. Again, thanks for doing this!

I think the slider bar concept for controlling the degree of eye candy over simplicity is brilliant. It would satisfy the asthetic needs of both crowds.

Only one question: How would it affect system performance? Would it follow a logical sort of, "the more eye candy, the more system resources used," type thing? Or, would it demand the same amount of system resources the whole time no matter how complex the interface?

Its quite amazing that something that simple, yet seemingly obvious, hasn't been implemented in an interface design already. If someone knows of of an example that's already in use, please send me the link, I'd love to check it out.

The performance differences would be minimal unless one area used some special resource intensive operation (like if you used real-time generated alpha blending to create the shiny effect in real-time). Shadows might affects things a little. Of course, I don't really know the issues here, but I doubt it's anything to worry about; also, it depends on how it's implemented from a programming standpoint.

The slider realistically has nothing to do with performance... but mostly just adjusting and picking a style....

I've never seen it done before, anywhere.... However, as I mentioned earlier I did learn something from a PHP script I edited sometime back called RCBlog. It was able to take a small amount of color(s) and generate a wide range of colors to fit in -- and actually look pretty good.

If you think this might be worth pursuing... then there's several things we can do....

Keep making sample images, as that will give us more variations to think of.... Then, maybe over time we can work up a polished and formal proposal for Haiku, but right now, testing more images and variations is still probably a wise idea. So, if you have more ideas, keep 'em coming... as they might bring out various issues that need to be solved... or they might bring up new ideas to include.

BTW, is there any way you could try a textured look just to see how it might look (even if it looks really bad)?

All the icons are now in the Haiku repository here:

http://svn.berlios.de/viewcvs/haiku/haiku/trunk/data/artwork/icons/

Note that they are in native format, and you need the Icon-O-Matic application included in Haiku to open/convert these icons.

If you just want a few icon bitmaps for your mockups, you can grab some from here:

http://bug-no.petterhj.net/iconcontest/visualizer/?set=stippi&size=&res=1

Nice work!

That's definitely an interesting theme, but for me, the small attribute text (application, size, whatever) is too light on contrast for me to read it without having to go out of my way to strain to read it: it's too close in brightness compared to the background.

For grouping of windows, it can become a danger when you've got windows that have on them, nested groups of tabs: there are several applications that do this on various platforms, and it causes quite a bit of user confusion and frustration. A good example of a bad example is BeXL in the window that you select various GUI Views with. Whatever you do, that's something you need to be careful about :)

Justin, I like your concept very much, but to me the tabs look not BeOS-ish enough. Probably it's better to leave them as they are now (angled and bordered). And maybe make the yellow of the tabs a little bit more darker (or more orange), because the contrast is too high in my opinion.

It's getting better and better in here!

Julius!

RE: BLACK THEME WITH MULTITAB http://img213.imageshack.us/my.php?image=haikublackma7.png

This theme is absolutely brilliant. It is intuitive and easy to follow.

Some features for this theme:

Middle click or alt double-click to open a tab would be a great ui enhancement. Shift-middle-click or shift-alt-double-click for new window.

Tab-tear-off to create a new window (remove from tabs). Alt-tab tear off for window copy.

Too many tabs truncates tab name except for highlighted tab (like firefox) NO TAB SCROLLING.

Spatial option (no single window nav).

There is nothing wrong with the 'black', however, theming would be nescessary only as far as a white theme is concerned; ie, white or black.

I have to say, I think this is by far the most clever window system I've seen in a LONG time.

Another novel idea would be to have ability to clone application windows and placing them into different workspaces whilst keeping their content in sync.

This is a non-problem - you could just tell the system that the window exists in those workspaces. Cloning them would be a waste of memory, not to mention the nightmare of keeping them in sync.
But I think such a feature will be a nightmare for regular users.

Hello!

Today i test the new Sharp-E build, and i make a small picture for the Haiku fans, You can check HERE.

This is not the best yet, because i dont have all of the new icons :(

You can take the wallpaper HERE. This is not my work.

I hope, You like it. If You want, i can send the iconpack to You.

Bye!

[miqlas]

I would disaggree on the icons — the current Haiku set should never be paired with a design like that. Its like putting icons from System 7 into OS X.

I agree that organizing windows together into a group would be excellent. Just make sure that a certain key must be used to group/ungroup windows or it becomes an annoyance. The windows key isn't in use, is it? So, use windows key drag in/out of window groups. If windows is taken, ctrl-win would work.

Anyway, if the tabs on combined windows would just shift over next to the tab of the window you were combining to (so that their left edges are flush), that would be neat.

The Haiku Black theme looks really nice. One thing you may want to use if you're trying to be different is a super-clean brushed finish instead of shine. I dislike the rounding of the corners. Straight lines are so much easier to follow and see interfaces in. I would say that one problem with most of these is the overuse of gradients. You could use more subtle gradients (aka. nearly invisible) to distract less.

That's another thing unique to Be: it didn't use gradients. It was straight color with crisp, beveled edges. Styles are expanding to include both the angular and the curved, so there is really no bad area unless you overdo either. I can handle slow curves. Too many rounded edges and I freak out. I'm not sure if I am making the distinction clear enough... Here: Curve lines, not corners. Not that I approve of curves in a UI, just they are easier to include in a design and still maintain functional space.

Remember that this is Human Interface Design, not Graphic Design. Being an Industrial Design major with some experience in graphics, I feel that this is an important thing to remember. Yes, people do like to look at interfaces that are techno-chic. Ultra-gloss and bling are in right now, however simplicity is the key to a well designed interface. Ultimately, the interface should be largely ignoreable. If we can design an interface that is plain and useful, I feel that we will have served users better than by building them a place for eye-candy. The best design possible (IMO, and this post is mostly IMO, by the way) will be beautiful at a glance without being distracting. Let's make a base skin on these principles and let more complex skins be developed later, as an add on. This guy has summarized what I've been saying, and applies it more into computers than I have experience with (I'm no programmer). I just found him in a google search, but he seems to be a smart guy who hangs around with smart guys. http://tantek.com/log/2007/02.html#d19t1813 Apple also has something to say, though I haven't read it all yet as it is VERY late here and I need sleep. http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHI...

I likes my computer experience raw and quick.Linux, Windows, and OSX are all as sloppy and inefficient under the surface as they are in their over-designed, system hogging interfaces. Be wasn't like that.

clickable
R5 is not perfect: one fault is that you can't tell *what* can be clicked (is a button).

A good example of a bad one (as JBT so nicely puts it) is Gobe Productive's gradient / pattern style. You can add more gradients or patterns but how can you know that you have to doubleclick on one? You can't tell by looking at it. You have to read a manual or experiment. I was suprised GP did offer so few patterns but did not sacrifice one with "doubleclick here to add your own". Stupid IMHO.

Another good example of a bad one is Be's Tracker; I never knew that you can click the "items" on the bottom left of a Tracker window, I read it in the manual or betips.net.

It does however make a clutter free GUI, the question is, what do you wish to hide?

The close button IMHO should be a cross eventhough I like it the way it is. That you can't see how you can hide windows is disputeable. It could be seen as an advanced feature but then again how many times I see people use just 5% of a GUI because they don't know or don't want to change. Even less people use drag and drop in Windows.

I like 1 thing the most from your mockups; indicating that a window has focus with a yellow border (in the same colour as the tab) in mockup 2. That is really useful. I get lost by the fact that I can't see immediately without a closer look which tab belongs to which window. Maybe other window things like scroll bars could become yellow too to indicate focus.

The folder tree buttons are handy too. And I'd like a shelf for temporarily holding/displaying items from a clipboard. Shortcuts / most used places / things could be in a shelf handy too. I tend to put things in "My Documents" just because there are shortcut buttons in Windows Explorer.

BeOS supports Favorites but only system wide. I believe every app should have it's own Favorites available at least from its save dialog.

The problem with multiple documents or tabs in one window is that with current implementations you can't see the title of each tab, worse, you get to see the title of the current selected tab in the main window.

The only problem tabbed browsing solves for me is that I can launch websites in the background without stealing my focus.

The computer can never be too fast IMO and I don't want to wait for things to load. So that thing tabbed browsing solves but it makes things more obfuscated.

Don't get me wrong though; I do find a method of grouping windows to be neccessary but windows inside windows is just making things tidier but more obfuscated in the beginning and even more obfuscated when you open a lot of documents / sites again because you don't see any title or reference in say the deskbar or any other taskbar or grouping of (minimized) windows.
I also don't like the grouping in the Windows taskbar; Deskbar in the corners is much better IMO because it gives you a vertical list of windows.

I suggest we write down things we don't like about BeOS R5, that I have not seen in a while, possibly ever.