Haiku GUI concept

Forum thread started by bal8664 on Mon, 2005-07-11 06:35

Well here's my try at a GUI mockup for Haiku.

I really love the beos style do I didn't want to stray too far. I just tried imaging what BeOS would look like if it was still in development today.

I realize the font antialiasing on the mockup version is crappy, thats because photoshop doesn't support sub-pixel hinting like Freetype does. Rest assured the fonts would look alot nicer if this was actually generated by Freetype.

My version is on the (EDIT) right with the original BeOS on the (EDIT) left (obviously).

Comments

Haiku GUI concept

Ae you sure yours is on the left?

That said, if yours is on the left, the original one looks nicer. :P :P

Re: Haiku GUI concept

bal8664 wrote:

...I really love the beos style do I didn't want to stray too far....

You've found a perfect balance there; great to see yet another talent dealing with GUI !

Haiku GUI concept

It's perfect.
Nothing to say :)

Haiku GUI concept

Mustang wrote:
It's perfect.
Nothing to say :)

Just a small problem:

we don't have support for gradients, while the screenshot shows a lot of gradients (buttons, popup menus, etc.).

Haiku GUI concept

Quote:
Well here's my try at a GUI mockup for Haiku.

That's a really nice GUI update. Maybe something to consider for R2 if we have support for gradients by then.

It looks professional and clean, just what a BeOS GUI should do!

Test GUI

For people that have a modern OS installed on their computer (joking ;)), i have made a small BeOS clone in flash last summer. It was originaly for testing GUI design and menus placement, for the Net++ project.

For people interessted and having a flash player (at least 6) installed, you can give it a try at : http://www.beosfrance.com/muckups/Net++/flash/

Why i post it here ? To test some of your muckups of haiku GUI in a living demo :)
This flash movie has been designed to be modified very easily, so it could be done very quickly !

Haiku GUI concept

I love this!
I hope it would be in R2!!

Haiku GUI concept

Jack Burton wrote:
Mustang wrote:
It's perfect.
Nothing to say :)

Just a small problem:

we don't have support for gradients, while the screenshot shows a lot of gradients (buttons, popup menus, etc.).

It's true there isn't a nice API for them, but vertical gradients like them are very easily done as a LineArray - I've written some code to do it that could quite easily be a private app server helper function. I believe the close button in the default decorator has some sort of gradient on it - I think I remember seeing an app server function for that (but that would have been a couple of years ago).

One problem with gradients everywhere is they don't tend to scale well to lower color depths. I'd also advise avoiding very subtle gradients that cover a large area (window background) for performance reasons. Also window backgrounds should really be solid colors as the API allows changing them. There is a bit more flexibility with design of the controls as they are not as customisable colour-wise by the app developer.

I love the overall look of the shot though. Keep it coming; and show us some with the other controls :)

Simon

Re: Haiku GUI concept

bal8664 wrote:
Well here's my try at a GUI mockup for Haiku.

...

http://www.rit.edu/~bal8664/haiku-mockup-compare.jpg

It reminds me of Plastic from KDE. It's beautiful. I want it. :twisted:

Haiku GUI concept

Quote:
One problem with gradients everywhere is they don't tend to scale well to lower color depths.

This is actually something I kept in mind while designing it.

Heres an example of what it looks like in 8-bit (256 colors).

The window itself uses only 17 colors, with all the buttons menus and etc, the titlebar uses another 15, and the screen icon uses another 5 for a total of only 37 colors used. Still looks pretty good I think.

Haiku GUI concept

bal8664 wrote:
Quote:
One problem with gradients everywhere is they don't tend to scale well to lower color depths.

This is actually something I kept in mind while designing it.

Heres an example of what it looks like in 8-bit (256 colors).

The window itself uses only 17 colors, with all the buttons menus and etc, the titlebar uses another 15, and the screen icon uses another 5 for a total of only 37 colors used. Still looks pretty good I think.

The problem is that thats still crap compared to BeOS currently in 256 colours - the entire GUI is done in safe colours, its only images and web pages that look wrong - well, the timer ticks in MediaPlayer also need 15/16 bit colour. But all UI widgets, icons, etc are fine in 8 bit.

Haiku GUI concept

Quote:
The problem is that thats still crap compared to BeOS currently in 256 colours - the entire GUI is done in safe colours, its only images and web pages that look wrong - well, the timer ticks in MediaPlayer also need 15/16 bit colour. But all UI widgets, icons, etc are fine in 8 bit.

I think I'm confused. What do you mean "safe colors"? In the image you quoted the left one is in 8-bit 256 colors, and it uses 37 of those 256 available. Granted I have no idea which 256 colors would be in Haiku's color Palette, but I'd imagine that's something the Haiku programmers could decide. Personally, I think it looks fine in 256 color mode.

And even if it doesn't look perfect, how many people are still going to be running in 256 colors? Even my old 1995 Packard Bell 486 can run in 16-bit color, and I doubt it'll be able to run Haiku, so It's probably not that important of an issue.

Haiku GUI concept

bal8664 wrote:
Quote:
The problem is that thats still crap compared to BeOS currently in 256 colours - the entire GUI is done in safe colours, its only images and web pages that look wrong - well, the timer ticks in MediaPlayer also need 15/16 bit colour. But all UI widgets, icons, etc are fine in 8 bit.

I think I'm confused. What do you mean "safe colors"? In the image you quoted the left one is in 8-bit 256 colors, and it uses 37 of those 256 available. Granted I have no idea which 256 colors would be in Haiku's color Palette, but I'd imagine that's something the Haiku programmers could decide. Personally, I think it looks fine in 256 color mode.

And even if it doesn't look perfect, how many people are still going to be running in 256 colors? Even my old 1995 Packard Bell 486 can run in 16-bit color, and I doubt it'll be able to run Haiku, so It's probably not that important of an issue.

I think what he meant was that the palette was not "customized" for the GUI - so those 37 custom colors would not exist unless the palette was modified leaving fewer custom colors available for showing photos in 256 colors...

In any case, 256 color is EXTREMELY useful in low-bandwidth situations where you need to remotely view a desktop (VNC/RDP/etc), or if you need to capture screen movies or whatever - I often run 256 color when connecting to machines via RDP from home.

Haiku GUI concept

Frankly, I don't really care about 8-bit mode. Even on my Windows XP desktop, I use 24-bit for remote connections. :|

Haiku GUI concept

Quote:
I think what he meant was that the palette was not "customized" for the GUI - so those 37 custom colors would not exist unless the palette was modified leaving fewer custom colors available for showing photos in 256 colors...

Ok, thats what I thought. But the Haiku programmer's get to decide what the color palette would be. It seems like BeOS R5 uses around 10-15 colors in it's main GUI. Now granted the one I made uses 37, it does look significantly fancier.

I feel bad for anyone looking at photos in 256 colors! :P

Haiku GUI concept

Ronald wrote:
Frankly, I don't really care about 8-bit mode. Even on my Windows XP desktop, I use 24-bit for remote connections. :|

Wow, does that work well at 1600x1200 over a dialup? - and yes, I essentially have dialup speeds... :(

When it comes down to it...I'll take simplicity and realestate over color depth in SOME circumstances -- that's why essentially EVERY operating system allows the user to change them at will - because there are uses for lower color depths even if the video card can do it.

Especially less-than-new equipment - ever tried playing a DVD on a 300mhz laptop at fullscreen? -- hint: it runs better in 16bit than it does at 24bit... (I'm speaking from Windows experience here unfortunately)

Haiku GUI concept

umccullough wrote:
Wow, does that work well at 1600x1200 over a dialup? - and yes, I essentially have dialup speeds... :(

When it comes down to it...I'll take simplicity and realestate over color depth in SOME circumstances -- that's why essentially EVERY operating system allows the user to change them at will - because there are uses for lower color depths even if the video card can do it.

Especially less-than-new equipment - ever tried playing a DVD on a 300mhz laptop at fullscreen? -- hint: it runs better in 16bit than it does at 24bit... (I'm speaking from Windows experience here unfortunately)

You can set your remote session resolution to 800x600. But then I have never been a fan of VNC nor through dial up. I find it is really lousy compared to RDP.

My condolences for being stuck at dial up speeds. I remember that... Back in the dark times of the Internet (early 90ies).

BTW can a DVD even played at 300MHz speeds? I always thought they required a addon card for speeding up MPEG2 decoding at that low speed. :|

Haiku GUI concept

Ronald wrote:
umccullough wrote:
Wow, does that work well at 1600x1200 over a dialup? - and yes, I essentially have dialup speeds... :(

When it comes down to it...I'll take simplicity and realestate over color depth in SOME circumstances -- that's why essentially EVERY operating system allows the user to change them at will - because there are uses for lower color depths even if the video card can do it.

Especially less-than-new equipment - ever tried playing a DVD on a 300mhz laptop at fullscreen? -- hint: it runs better in 16bit than it does at 24bit... (I'm speaking from Windows experience here unfortunately)

You can set your remote session resolution to 800x600. But then I have never been a fan of VNC nor through dial up. I find it is really lousy compared to RDP.

My condolences for being stuck at dial up speeds. I remember that... Back in the dark times of the Internet (early 90ies).

BTW can a DVD even played at 300MHz speeds? I always thought they required a addon card for speeding up MPEG2 decoding at that low speed. :|

Yes, since I'm 7 miles from the nearest telco building - my only choice is $120/mo IDSL at 144kbps (yikes)... or satellite (with ~1 second latency)

I hate VNC also - RDP hooks into the GDI calls I think, so it's a lot faster for the drawing of primitives across the network than a standard "screen-scraping" tool like VNC

But VNC is a more likely solution for connecting to a remote Haiku machine...

For me, if i'm doing remote development, the screen realestate is more important the color-depth, so I would opt for 1600x1200x8bpp rather than 800x600x24bpp

As for playing a DVD at 300mhz - I'm not entirely sure how smooth it is - but it does play on my PII 350mhz ASUS P2B machine just fine - Using Cyberlink PowerDVD and a Voodoo3 card on Windows 2000 - i'm not sure if the voodoo card has hardware decoding or not... - it does work better in 16bit than 24 bit though

Haiku GUI concept

That's awful. :shock: :x

Doesn't it lag a lot at 1600x1200? Isn't VNC just sending a bitmap of what's inside the video RAM? :|

Haiku GUI concept

Ronald wrote:
Doesn't it lag a lot at 1600x1200? Isn't VNC just sending a bitmap of what's inside the video RAM? :|

I actually don't know - but VNC appears to be very cross-platform, so it can't be terribly complicated...

'bout this

Good job, dude!
There's a lot to do, such as bars, sliders, radiobuttons, checkboxes and so on. I wank to see a complete "screenshot" with this skin. After this we can discuss it. Unfortunately, now it's just one window, but it looks really accurate!

And one question. I'm not sure 'bout alpha-channel support, that's why rounded corners on your sketch must be (imho!) drawn with keeping in mind 1-bit transparency, but not with semi-transparent pixels.

Re: 'bout this

I couldn't resist and made a little mockup, showing why crisp bitmap-fonts should be an option in Haiku. Smoothed fonts are nice, but at small sizes they can't beat that handpixeled appearance and clarity of (good) bitmaps IMHO.

Haiku GUI concept

The problem is perhaps from your font in fact ...

Also, for the font itself, i feel it a little bit too .... "techno" :s

Haiku GUI concept

Ok, here is what i have done / modify yesterday night.
Since i had eat too much and got nothing to do, i have modified some muckups i had done a lot of time before for a step by step burning soft GUI.

By the way, it's still a test and a hardly using gradients. It was just to see how gradients could look like on anywhere (menus, windows, background, buttons ...).

I'm not that much happy of the actual look, except for the BeMenu.

Haiku GUI concept

C bo ! :D

Make the tab font size a tad bigger please.

Haiku GUI concept

The blue gradient... brings me windows nostalgia
any other shade p'haps? :?:

lets start from mezzo's ideas.

I made a quick photoshop image what I'd like in R2. :)
I'm not sure if this belongs here that way thought.

This concept is almost identical to mezzo in symphonyOS. I think it can be trusted very far. All icons are taken from Tango Desktop Project. And they actually looks great for me!

The main division of items is similar to mezzo project. But because guuui.com said that some people reads in F -pattern. I decided to add the less relevant, but important information to right bottom -cornel.

For those who doesn't know the mezzo concept, division goes following: from top left clockwise...
- computer configuration, applications running, settings, etc.
- documents and hard disks, etc.
- thrash
+ computer shouldn't remove some part from the trash.
- programs, stuff to run.

User is notified from operating system events by bar in the right bottom corner, messages are ordered oldest first, the element prevents invading the screen by backoffing to smaller icons when there comes more than four messages, when it goes over seven, the bar stops showing the newest messages and shows seven oldest.

The current time is a really important information for user, usually it is most important when you start your workday, later less precise information could be useful. This is why I put the current time, into bottom bar, when it starts being on way, the information starts disappearing in order: first words like: "week" and "Friday" disappears first, then number which represents week -number, then day of week, then date, last the current time disappears.
+ because people are considering haiku to portable systems, I think this item could contain a shortcut to working calendar as well.

The left and right arrows are for different workspaces, I gues they could be hidden when there are no multiple workspaces.

I can think this further and make more concepts from different into its own thread if you liked this concept. I really liked from doing it. :)

Edit: I were thinking from multiple color schemes as well!

Haiku GUI concept

I have different ideas of addressing the situation due to these reasons...

1. I feel usability can be sacrificed a li'l bit for consistency, cuz as people learn the difference of efficiency tends to drop a bit. Sticking to four buttons, though means lesser number of options, provides us with no 'central point of safety'

2. I feel recycle bin doesn't have much use. I barely use it, delete is faster for me. On the other hand im hoping that with improvements to BFS, we will use search a lot...

3. Unlike what is said in the GrayPaper, i think DnD behaviour is needed in a GUI cuz its intuitive (provided the program is designed well). That, with shelves and GUI pipes [used in RISC and ROX] can improve usability

Anyways, other than the points i spoke of above, this is what i feel...

1.Change the look of the recycle bin. It looks more like a mail box, and thaz what i was literally thinking till now :D

2. System tray should better be near the program's folder, i think unsafe objects and objects of critical importance shouldn't be placed near each other (i.e., trash and alerts)

3. The workspace arrows IMO are a bit.... unhealthy. They feel tempting to click(they float, are pretty nearby as if change is only going to happen between those two buttons, and green = safe problem), and when the user does he notices his desktop has completely wiped out. It can be made more usable by some scrolling or apple style effects, but then multiuser will be a li'l prob.. The other prob being that, browsing through 32 workspaces will be a li'l difficult....

4. Multiple windows...? The li'l space is a bit.... less for me /swt

I feel clock is better near System, and username (when multiuser comes to the scene) at the Home folder...

I got a less innovative but a li'l more 'power user'-ish concept in my mind, but unfortunately i cant draw much :(

On a sidenote... I was reading bout Zeta 1.2, they improved the usability of the OS pretty well, adding stuff like app menu and calendar

Nother sidenote, thanks to all this Human Interaction stuff it helped me a bit in the CET architecture exam today :D

Haiku GUI concept

It is not a system tray. :) More like a events tray. There appears when you get messages, mail, warnings, etc. True, I wonder if they are in right place, but definetly I think they would be best where they are now.

I love the most the mezzo concept of four buttons. They are there for reason that unexperienced users would find things where they are looking for, and experienced users could straght just smash their mouse and press left mouse button to go where they want.

Heh. I were wondering whether to put those arrows or not. It was more my attraction to put them there than not to put. I wonder what kind of person has 32 workspaces. The workspace concept must be consireded much better anyway. Neither I would like to use only two arrows to scroll trough such things.

Here's the place where I picked up the recycle bin:
http://tango-project.org/Tango_Icon_Gallery
I think I would use it more much in windows if it would actually be something else than window's intresting method to lose your files and never get them back. Like, I think it should be more like trash -folder, than anything else, which is just linked there.

I wonder too if clock should be under documents or system -buttons, but that's only thing I like in windows, because of way how computer is used in teaching stuff. You basically can see the time from wide screen while you are studying. :)

Hey. Why not explaining the concept? I can draw!

Edit: of course my concept misses a terminal window. sorry about that. I'm fixing it later. :D Every this kind of concept must have a terminal window or it won't be looking nice.

Haiku GUI concept

What i mean is, the events tray will contain alerts and all, and right next to it, is the recycle bin, which has (most of the time) useless stuff. It gives me a li'l mental uneasiness... kinda like some contracts placed next to a recycle bin x.x

What i mean is, we need a central, as in only one point of access, this way as options are reduced to NIL (as 1 option means no choosing) thus helps user reduce anxiety. For me, and many others i know, My Computer is not a Devices folder, its a "home" folder containing access to all parts of teh pc...

I checked the tango project (first was surprised that they made such a mistake)the one you took, as i said, is for the mailbox :D

About workspaces.... i feel with proper interfacing they can be a good answer for multiple window management. A part of the stuff im thinking up.. I wont deal with 32 workspaces though, lesser definitely :P

I have ideas that will make it more usable, but i think i'll put em out properly when they mature further and i can 'testify' for a power user, cuz i generally explain em in an unconvincing manner unless i'm confident in em... lemme see after 7th, my exams end on 4th and 3 days for me to think full scale :wink:

Haiku GUI concept

NIL? Are you lisp religious as well?

When you stated it, I wonder what kind of GPL programs there are for testing different GUI concepts.

Haiku GUI concept

lisp religious? Pardon me but i dint really understand what you're saying....

If you mean lisp language, i cant even code

Haiku GUI concept

(lambda (x) ( map (list '(blah b) '(a (foo bar)) nil) 'x)))

...Or something. My lisp/scheme is bad. Wahoo! Lisp! (;

Haiku theme next future proposal

I've made a small mockup of a theme for Haiku for a next future with an example of icons style that will be attached to it.
I'm trying to make it real:)

Re: Haiku theme next future proposal

auxman wrote:
I've made a small mockup of a theme for Haiku for a next future with an example of icons style that will be attached to it.
I'm trying to make it real:)

grande Mariano!!

Haiku GUI concept

It's really nice

Haiku GUI concept

I really like it!