Haiku UI Mockup

Forum thread started by iindigo on Sat, 2008-11-08 21:07

Over the past day or two I've been looking at some of the mockups posted in this section. While I think that some of them were nice, none of them really felt quite right to me, so I decided to see what I could cook up in Photoshop. After some amount of time and effort, here is the result:

It's not quite perfect (a few things are a couple pixels off, for example), but it's a fair representation of how I think the Haiku UI should look. Instead of reinventing the wheel or "stealing" UI elements and appearances from the "big guys", I've tried to focus on simply improving what was already present in R5 and bringing it up to current standards (alpha blending, shadows, HQ text antialiasing, etc).

I have another mockup that contains more UI elements in the works, but I figured I might try to get some opinions on what I already have done. What do you guys think?

Comments

Re: Haiku UI Mockup

I'm late to the party on this one, but...wow! Love the curved title bar and menus. Curves are great, as long as they're not overdone.
And, of course, a nice background picture always helps the presentation.

Re: Haiku UI Mockup

Hey guys, this is the original poster! I came back thanks to a message from leavengood. I had been checking on this thread once every few months but nobody had posted until now...

I'll do anything I can to help out, including vectorizing this design. It might come a little more slowly, as I am no longer working on solely my own schedule (I was in between high school and college when this was originally posted!), but it can still be squeezed in.

As for the wallpaper used in this screenshot, well... it's nice for the mockup, but not really suitable for inclusion with Haiku. You can find it here: http://www.animepaper.net/art/25745/pursuit-of-knowledge

Its colors are perfect for a nice haiku-themed desktop, though.

Re: Haiku UI Mockup

Thanks so much for starting this post...

firstly, I just wanted to say, your designs are insightful, creative, and will open up a whole new venue for Haiku. I know a lot of developers will bash most posts that suggest a change in the Haiku GUI, but the pictures which you attach are not much of a divergent from the original theme, just an updated, sexy look.

Secondly and please, I don't want to argue with anyone on this matter, but perhaps Haiku will implement a theme changer, which will feature one or two (and the original) themes for the user to choose from... I for one would not argue with that. Of course such an element will take time to implement, but it's not impossible - perhaps impractical - but not impossible. People like change, and I don't think that everyone will want to use the Haiku standard GUI forever. I for one, LOVE the haiku user interface, and I personally don't think it should NOT change, but I'm not saying a big fat NO to the idea of a few themes and a theme manager for other users to choose from..

Thirdly, I have always been fascinated with GUI design, so I guess I'm just saying, 'I really like the work you've done, keep it up, and I cannot wait to see some more mockups with your user-interface ideas'....

Cheers!

-el.tigre.20

Re: Haiku UI Mockup

I've been reading older "Haiku Mock Up" threads in the forum, and like the many posters on this thread, I like this mockup the most. While right now not everything in this mock-up can be implemented in Haiku, I think eventually much could be, and I think this gives Haiku a nice, clean modern look which rivals other systems.

But it has been a while since this was posted, and I'm not sure if the original poster is still around. If so, could you reply here?

If you have moved on that is fine, but if that is the case I intend to recreate this mock-up as best I can (probably in Inkscape as an SVG) so it can be tweaked and used for future Haiku design discussions. On that note if anyone knows what the wallpaper used in this is, that would be great, since I really like it and I think it helps make the design look nice.

Re: Haiku UI Mockup

I like this as well; it looks a little bit fresher without going into self-indulgent glitz.

Re: Haiku UI Mockup

Is the Glass Elevator project still kick'n these days?

Re: Haiku UI Mockup

Haiku have a nice GUI, some Layouting and Fonting need rework. Some Color need a litle tweak.

Other a re Desing the GUI need a GUI Designer!

Re: Haiku UI Mockup

Hey guys, original poster here. Figured I'd drop in and see how things were going.

To answer some questions:

- Why did you put the scroll arrows together (OS X style)?
Because at least in my head, it makes more sense as far as efficiency goes. Assuming the user doesn't have a scroll wheel on his mouse (why else would he be using the arrows) isn't it a bit of an inconvenience for the user to have to bob their cursor up and down over 75% or more of their screen's height time and time again during the course of browsing a document? I would certainly say so. Simply moving the cursor a few pixels up or down is much more efficient.

- Why the drop shadows?
Simply put, when used correctly, drop shadows give a very obvious and natural cue as to the strata level of a window or UI element. It's a godsend when working with a window manager that's not centered around maximizing all your windows (a good contrast of this is seen between Windows and Mac OS). It allows the user to pick the active window, nearly regardless of its size, out of a huge pile of other windows in an instant instead of it blending in and making the user actively look for what they need. As mentioned before, they also have a bonus modernizing effect.

- Rounded corners are silly!
Depends on who you ask. Personally, I find that they have a nice way of softening what may appear harsh (especially to new users). Additionally, they give a more modern look (when used correctly) while still working very nicely with a minimalist feel. I find that larger corners lend to oversoftening or "playfulness" of what they're applied to while making them too small lends a feel that's almost harder than plain sharp corners. A good middleground of 3/4-5/6px tends to work best in most situations.

Re: Haiku UI Mockup

When you scroll by dragging the bar, you normally move away from at least one arrow and towards another.

For example: assuming we have a standard layout (ala Windows, BeOS, RISC, Amiga, etc.), when you drag the bar downwards you will typically move towards the downwards arrow. The arrows offer a fine adjustment and this especially noticeable when scrolling through large documents. Consequently, when you have dragged 'nearly enough', the corresponding arrow is the next closest GUI object.

That could be a utilitarian defense for having the arrows separate. However, design is not just about utility and great designs grab attention before the onlooker even knows what the thing does..

I'm not sure where arrows 'should be' to achieve the best emotional effect :)

Humn... have you considered adding a slight curve to the top and bottom of the adjustable bar inside the scrollbar widget? :)

Re: Haiku UI Mockup

The original mockup is the best until now

Up!

Re: Haiku UI Mockup

What about a scroll bar that can be enlargened to change the zoom level. I have this on Adobe Audition. To move along, one drags the scroll bar from the centre, and to zoom on the waveform, the edges can be grabbed and moved to enlargen or diminish the size of the scoll bar itself.

Re: Haiku UI Mockup

I like the last image posted. One thing I'd say would be the top right corner of the menu drop down list should be straight.

Re: Haiku UI Mockup

Just use what's already there :D

Re: Haiku UI Mockup

all this fascination with rounded corners. i don't get it...

i like my books and letter and documents to be printed on paper with CORNERS.
my LCD-screen and desktop have NO round corners. I had rounded corners when I used CRT monitor. It sucked.

i like rounded corners when i buy a CHILDRENS books.

this looks like Bluecurve theme from old Redhat, only in yellow. Bluecurve sucks.

please stop the rounded-corners-madness.

please.

Re: Haiku UI Mockup

It's a double-edged sword.

Round corners can create an updated feel precisely because PC pixel arrangements are square. For example, achieving seamless curves consumes more resources, demands clever anti-aliasing, and is generally all about breaking the constraints of PC architecture.

The weakness is that all curves need to be world-best because if users perceive the square pixels then the GUI immediately looks outdated (my emphasis). User perception is driven by their expectation rather than their ability. Competition between all vendors means that curves are always improving. It will be a challenge to beat Microsoft and Apple in this respect, and rewarding too.

On corners:

High resolutions make pixel arrangement look smaller and the old BeOS window borders are looking stretched. That is OK because the human brain automatically generates continuing lines. However, in order for the brain to produce its imagined lines effortlessly, the brain requires a starting point and direction. I see you have darkened the outermost pixels and this helps a lot, provided the user does not select a dark desktop image!

The natural starting points are the window corners. Consequently, I would like to see some innovation in the design of window corners. Microsoft, for example, use a combination of highlighting and shadow throughout the full length of the borders to achieve visual recognition. I do not advocate copying but I do feel that something new is needed to emphasise the corners.

On something else:

Horizontal spacing between the buttons (menu items) could clarify their atomicity and help prevent a tired human brain from accidentally scanning over the menu option that it is actually looking for.

On colours:

Colours can add to the work and perhaps more importantly, biological brains 'add colours' only after rendering geometric forms.

However, colour can make distinction between areas and that is why we highlight menu items. Why not use mouse over highlighting for scroll bar? I tentatively suggest trying this because the effect could add to the sense of functionality, without detracting from the minimalist appearance that some others have asked for. Note that adding outlines to the knobs on scrollbars is not minimalism ;)

On something amazing:

Haiku inherits BeOS tab-like forms and these remain nice. There have been some major inovations in tab design since BeOS R5 was released. For example, please take a look at the expanding tabs used in Opera web browser and tell me what you think :)

Re: Haiku UI Mockup

No, there shouldn't be any colored details other than the title tab. It will just be distracting for the user. It might look fine in the simple mockup above, but imagine your typical screen with 5, 10 or even 20 scrollbars, buttons and whatnot.

Colors should be used to attract attention to certain areas, like the blue hover-effect on menu entries, and the title tab on the *active* window.

Re: Haiku UI Mockup

I'm not so keen on the new scrollbar arrows-the BeOS ones were unique, and much less protruding. I feel that the yellow gradients are rendered too dark-it's just a little grim.

I've made a few little edits, how do I attach them (sorry to sound stupid)?

Re: Haiku UI Mockup

I miss the original BeOS knob marks on the scroll bar - see a screenshot here (knob style): http://www.guidebookgallery.org/pics/gui/settings/appearance/beos5-2-1.png.

Re: Haiku UI Mockup

The arrows weren't quite right so I switched to more traditional style arrows with school-bus yellow background on the top and bottom of the scroll bar. Also added a more high-contrast scroll bar background. Comments?

Re: Haiku UI Mockup

I also like the last mockup! Should be a R2 theme :-)

Re: Haiku UI Mockup

Man, this design is PERFECT. Kudos to you! How can I get this onto my Haiku install?

Re: Haiku UI Mockup yellow scrollbar

I added some school-bus yellow to the scroll bars and arrows and put a drop shadow around the window. What do you think?

Re: Haiku UI Mockup yellow scrollbar

I quite like the school bus yellow because it adds interest to the window, but did you notice the original mock-up already had drop-shadow?

There is many people (including me) who think that OSX's over-the-top style of drop shadow is ugly and gives the UI a very cheap feel. The only good thing about having that OSX style drop-shadow is to make the very flat style window "pop" so you can see the window easier as there is no titlebar to identify the location of Windows.

Keep the drop-shadow modest.

Re: Haiku UI Mockup yellow scrollbar

Personally I like the Mac OS X style drop shadow but that is just a personal preference. I did not notice the drop shadow in the original image.

Make the drop shadow gratuitous.

Re: Haiku UI Mockup

Has anyone tried taking a look at Enlightenment? Not for global design adivce per se...but IMHO it has some of the best UI design out there. I could really see some awesome things happening with haiku if there was some sort of union with the EFL (Enlightenment Foundation Libraries) project.

Re: Haiku UI Mockup

Well, I recently posted some ideas in this 3ad @ Syllable forum.

I believe that an horizontal compact & clean upper dock could be an innovation for Haiku too.
Here's an example: http://www.antagonism.eu/_priv/files/other/new_dock.png

It's a SkyOS, Litestep and SharpE ideas/graphics mixup.

There are also other interesting ideas about windows/colors in this post.

Hope that inspires !

Re: Haiku UI Mockup

leavengood wrote:

If you have ideas for a nice, simple, streamlined "Haiku style" web browser interface, I'm open to suggestions

For the web browser, I think instead of the UI implementing tabs, the Stack functionality of Stack and Tile should be finished up and implemented into mainline Haiku.

The end result would be modern and similar to how Google Chrome handles tabs on Windows, only more consistent and useful as it would be completely built into the OS.

Re: Haiku UI Mockup

halo wrote:

For the web browser, I think instead of the UI implementing tabs, the Stack functionality of Stack and Tile should be finished up and implemented into mainline Haiku.

The end result would be modern and similar to how Google Chrome handles tabs on Windows, only more consistent and useful as it would be completely built into the OS.

At first I was resistant to this idea, but the more I think about it the more it makes sense. My only concern is some of the niceties present in web browser tab interfaces, such as favicons (at least in Chrome), right click menus, and just the general ability to customize such code. I could probably hack the app_server decorator code to allow for favicons and other customizing, but in general this will need to be experimented with a bit before I can say for sure it is a good idea. But I will definitely give it a try.

It also allows for "simulating" the Chrome multi-process tabs since it is easy to have windows in different applications, and the grouping would just happen because of the stacking.

We'll see how this goes in a few weeks maybe.

Re: Haiku UI Mockup

halo wrote:
leavengood wrote:

If you have ideas for a nice, simple, streamlined "Haiku style" web browser interface, I'm open to suggestions

For the web browser, I think instead of the UI implementing tabs, the Stack functionality of Stack and Tile should be finished up and implemented into mainline Haiku.

+10000000

I really hope to see this implemented.

Re: Haiku UI Mockup

As you wish, also made some other little changes and added comments to those i already made before:

Re: Haiku UI Mockup

Ship it

Re: Haiku UI Mockup

I personally like the modesty of the original design more. Call attention only when needed: to the active title bar. Also, is anyone else in favor of eliminating drop shadows altogether in the name of performance and minimalist design?

Re: Haiku UI Mockup

That looks a lot better. But do you think widgets like the scrollbar could stand out more? I've always liked how macos 9 widgets were able to stand out even without all the fancy effects we have today.

Re: Haiku UI Mockup

That looks a lot better. Now, what would it look like if the the scroll arrows were filled in with black?

Re: Haiku UI Mockup

arielb wrote:

That looks a lot better. Now, what would it look like if the the scroll arrows were filled in with black?

It seems that the black-filled arrows look much worse. Maybe light gray filling will be better?

Anyway, last mockup version looks very pretty and much better than current Haiku UI. I'll vote for it! +1

UPD:

Quote:

1. Right-top menu corner no longer rounded

How about context menu? It will be looks little bit strange.

Re: Haiku UI Mockup

I keep having the feeling that the scrollbar is lacking contrast so i edited your mockup a bit (i hope you don't mind) to add that.

It's not perfect, just for the idea.

Re: Haiku UI Mockup

I left out important feature in my previous rant:
- window snapping (in Windows I'm using app called DisplayFusion to do this task because it also gives me different wallpapers for my 2 monitors, but window snapping should be integrated in any decent desktop environment; theres also a app called allSnap that does a decent job.)

PS. BeOS R5 had one of the best UIs (if not THE best) in his time and IMHO even today when it comes to clarity, functionality, KISS -rule etc so I really hope that people who decide what is the Haiku R1 official look really dwell little into UI-design before they make their choice. Linuxae and all the teens skinning them is today nothing to take after. IMHO most Linuxae have crap UI-s and have to be heavily tweaked before they become usable. If You look at the desktop of full-day linux-user (who isn't into UI-tweaking per se) then You'd most probably see none of the official or most 'popular' skins of that distribution. Usually there's some heavily toned-down clear and crisp, even minimalistic UI theme. Most linux UI skins are crap made by amateurs and thats why there are so many of them around.

my 0,02€

Re: Haiku UI Mockup

I am calling for this UI to be implemented, Haiku's Retro look is holding it back. (also a inbuilt package manager but thats a different issue) i am very willing to help make this reality but i cant do this alone....

Re: Haiku UI Mockup

Actually haiku has already implemented most of this ... It does not yet have rounded windows but I believe this is a planned feature it may get pushed to R2 however

When you are getting things done the UI appearance matters little. However the Haiku UI has been recently updated with gradients and a generally smooth uncomplicated appearance that many people like. As features are added to Haiku the UI will change and improve to reflect those changes as long as they allow the system to remain lean and fast. I think that is the general sentiment of the developers and long time users besides you kind of get attached to a cool different UI like BeOS/Haiku's after awhile.

Re: Haiku UI Mockup

i am more than happy to help out with the UI while you work on core stuff, if you need me im there. Also im not saying i dont like how Haiku looks heck BeOS is what got me into computing as a passion in the first place! you dont need to lose what makes the UI great, just update it with some nice new desktop effects (vector stuff, shadowing, rounding etc). i talk about haiku all the time to any one who i happen to be talking about computing with! (ok not that many) but when they say things like "id give it another year tops" or "whats the point of developing Haiku?! stick with linux!" it sadens me :( please let me help prove the nay sayers wrong, and move the os into and beyond the 21st century!
P.S Sorry for that passionate outburst, HAIKU has become quite the hobby for me outside of my day to day OS

Re: Haiku UI Mockup

sabianadmin wrote:

P.S Sorry for that passionate outburst, HAIKU has become quite the hobby for me outside of my day to day OS

It's OK, a lot of us are passionate about Haiku :)

I think for now the UI of Haiku won't be changing much. Given the capabilities of Haiku I think we are doing pretty well. Thinks like non-rectangular windows, shadows, and transparency will come eventually. But if we incorporate those things they will be done to improve the usability, and not just for looks. I like a cool looking system as much as anyone, but we must not forget our primary purpose is to help the user get things done.

In the meantime sabianadmin I think there are plenty of graphical and UI-related things you could do:

1. Read the Icon Guidelines, learn how to use Icon-O-Matic and make some Haiku vector icons. We still need a few in Haiku itself, though I'm working on some of those at the moment (Touchpad preferences icon for example.) But even icons for the web-site which are in the Haiku style are useful.

2. Use Haiku and suggest UI improvements for the system itself and for the included applications (not just looks but usability.) Any obvious bugs and even suggestions for improvement (enhancements) can be logged at the Haiku bug tracker.

3. If you have ideas for a nice, simple, streamlined "Haiku style" web browser interface, I'm open to suggestions. I'm developing a new browser for Haiku that will use WebKit and I want it to be top notch. I like to fancy myself a good UI designer (and I'm getting ideas from other browsers of course), but I'm always open to suggestions. I'd especially enjoy looking at mock-ups.

Re: Haiku UI Mockup

I like it -- very modern, still I think we should also keep a "classic" look for those that appreciate nostalgia.

Re: Haiku UI Mockup

I really like this mockup. It still has the BeOS spirit, but offers a nice and updated derivative.

Re: Haiku UI Mockup

martin wrote:
"EDIT: Just remembered - I was never really fond of the way BeOS' windows were minimized, by double-clicking. To me it felt cumbersome and wasn't really intuitive, alternatives should be maybe discussed, configurable option would be best I think. I would personally use right-click (but it's also not intuitive)."

I think right click should always bring up a context menu. And one should be able to easily move the app to any workspace from that context menu.

Re: Haiku UI Mockup

I dont just like the doubleclick minimize function. I LOVE it! Its something i need in all OS i use. I can set it to work when using KDE and gnome, BeOS and OSX does it by default. And windows can do it with windowblinds. If that feature was removed i would definitly be sad.

Re: Haiku UI Mockup

Right-clicking on a tab to send the window to the back is probably the number one feature I miss in other OS. Don't touch that right-click behaviour! :)

Here's my suggestion for minimizing: While keeping the current double-clicking trigger, also accept a gesture: grab a window and throw it into a configurable corner for minimizing.

For sending to a workspace: I always have the Workspaces applet as Replicant in a corner. You can grab the windows representation in the applet and drag it to another Workspace. That's OK, but needs a bit of careful aiming.
Suggestion: When you grab a window and drag it over the Workspaces applet, shrink the window to a symbol so you can easily drag&drop it over a Workspace.

Also, when you drag a window and the mouse pointer hits the screen's edge, you could switch workspaces by keep pushing a bit "uphill" (a force-feedback device would be cool for that little resistence). Or you throw the window instead and only send the window to the adjacent workspace without switching to it.
All these gestures need careful algorithms to always correctly guess your intentions, of course.

Re: Haiku UI Mockup

"Right-clicking on a tab to send the window to the back is probably the number one feature I miss in other OS. Don't touch that right-click behaviour! :)"

what about middle click instead? because it is very important to have a context menu to be consistent with the rest of the OS. In KDE it is really easy to move an app to another workspace from the context menu...you don't need to drag a window to a tiny sliver in the workspace app.
There are arguments for maximize as well as zoom. If we had maximize, we don't need another button. It would also be another option on the context menu.

Re: Haiku UI Mockup

@Humdinger: The best way to move to another workspace is to drag to the edge of the current workspace towards the next one. No careful aiming, no hard programming, just switch to the adjacent workspace when the mouse reaches an edge. Moving using CTRL+ALT+ArrowKey when a window is focused is a good one. Dragging windows to a replicant, no so spiffy.

I don't like gestures all that much (except for the [right mouse hold] + [left mouse click] navigation in Opera). It's hard to program, ugly, and having configurable corners would conflict with any future gestures we would want to do.

Re: Haiku UI Mockup

BTW, there's also a thread on this thread on the mailing list:
http://www.freelists.org/post/haiku/Haiku-UI-Redesign

RandomInsano wrote:

@Humdinger: The best way to move to another workspace is to drag to the edge of the current workspace towards the next one. No careful aiming, no hard programming, just switch to the adjacent workspace when the mouse reaches an edge.

I had this back when still using compiz in Ubuntu. I often accidentally changed workspaces this way. Quite disorienting and annoying.

Quote:

Moving using CTRL+ALT+ArrowKey when a window is focused is a good one. Dragging windows to a replicant, no so spiffy.

Well, it'd be a feature of the Workspaces applet that wouldn't hurt anyone not wanting to use it and would help everyone else.

Quote:

(Gestures) It's hard to program, ugly, and having configurable corners would conflict with any future gestures we would want to do.

Well, yeah. Naturally you can't assign the same gesture for different things... Keep I mind that we are the masters of Haiku's API. Gestures wouldn't be an afterthought that's here in one distro and not in another.

And I can't see how gestures are inherently ugly. Can you elaborate on your concerns?
As long as gestures are not the only means for a function (think motorically challenged people) and, in the best case, there's also keyboard control, I don't see what's wrong with it. Plus, touch screens could be used increasingly in the future, which would make gestures even more desirable.

Re: Haiku UI Mockup

Humdinger wrote: "Well, yeah. Naturally you can't assign the same gesture for different things... Keep I mind that we are the masters of Haiku's API. Gestures wouldn't be an afterthought that's here in one distro and not in another."

Gestures. lots of Opera users love them and it's also a popular firefox extension. Why not push this idea into the OS so that every app can benefit from it? Otherwise, every app will come up with their own way of doing it and it could be a big mess.

Indeed, there are a lot of things found in specific apps that make sense as universal features such as spellchecking, Office Clipboard or the way firefox saves all your windows so you can go back to them after you restart the computer.