Haiku UI Mockup

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

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.

1 Like

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?

Ship it

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?

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.

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)?

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.

Just use what’s already there :smiley:

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.

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 :wink:

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 :slight_smile:

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.

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 :slight_smile:

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

The original mockup is the best until now

Up!

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.

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.

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.

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

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

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!