Haiku idi Gui

Forum thread started by raitis on Tue, 2005-07-19 15:40

basic gui, still wip. I wil add window with the same kind of theme and ill do some changes to the design, like some colors !

Comments

Haiku idi Gui

What does the CMDCT part of the Tracker do? :|

imho

As far as I know, serif fonts isn't good to be used in menus - they're designed for a large amounts of text information (as books, articles etc). Sans-serif fonts such as Geneva, Verdana, Tahoma and so on are quite better 'cos they're looks more accurate and easy-readable even if they are very little. That's why I think You'll better try to select more appropriate font for menu.

Haiku idi Gui

Haplishe is right about sans serif. Verdana for exemple in 9px is still readable ... a serif font in less than 11 looks crapy, pixelised.

Anyway, with OS X and Xp and Zeta or even Ubunto Linux, i am still wondering with you guys love monogrey minimalist macrosized-buttons themes.
Use colors man !!!! Be happy :)

Also, cause colors seems to be planned, perhaps adding some bump or weight with some little shadows or gradients could be cool.

And yes, some windows could help to see what could be the final result

(i definitly have to do some more)

Haiku idi Gui

The font is nor serif nor verdana,its 04b08 , its a bitmapfont! i will change to another , but dont know which one , which are allowed ?
The haiku cmdct was an idea that users can customize the bar and include ogg player or anything from a clock to notes.
I will add some colors so it will look more nicely.
I did a minimalistic design because there will be some users with slow pc's who dont need fancy stuff ! like me! :) .

Haiku idi Gui

fancy gui.

Haiku idi Gui

haiku dark gui.

Haiku idi Gui

wow ...

For having test WindowFX under Windows for a (brief) time, even as a big transparency lover, transparent windows will kill your eyes after 2 hours of use. (Not agree ? Try WindowFX !!!!)

I would love to see windows fading in transparency for exemple when you close them or put them in the "dock", but a full time transparency is to me a bad idea. A full time transparency would be a good idea for exemple in a multimedia box plugged on your TV, cause you just see it 30 seconds, the time to launch music or a DVD.

In "Haiku Dark", i really really like the white line on the top of windows, tabs, ... it gaves to the "dock" a f**** great look ! :)
Like for the first GUI, the minimise/close/... buttons are, to me, way too small.

But i'm in love with your white line, rounded corners, gradients, ... and your background !!!! ;)

Haiku idi Gui

wip gui. still in progress. its dark themed gui.

Haiku idi Gui

another wip gui bit lighter and more effects.

Haiku idi Gui

I love the transparency. It will be a must have for R2. :P 8)

How about working on mockups for R1? There have been pretty good mockups posted here but there is always room for more. :twisted:

so...

I'm afraid, those are not GUIs... just an incomplete sketches... Only wallpaper and one semi-finished window, i didn't see controls, buttons and so on. There's nothing to discuss. I want to see more.

Haiku idi Gui

thats why i called them WIP ! work in progress , im trying to do alot of "sketches" and then choose few which i will finnish up.

Haiku idi Gui

Hey, the Dock at the bottom looks amazing. Please investigate that concept further, looks much better than Apples dock.

<image I'm refering to>
http://raitis.rihardsonline.com/images/haiku/haiku-fancy-gui.gif

Haiku idi Gui

The left and right pointing navigation arrows shouldn't be arranged vertically, I think....too un-intuitive.

Haiku idi Gui

Can someone tell me why Haiku should have transparency? Does it make anything easier to use or something?

Haiku idi Gui

Because it's nice for the eyes. :lol: :wink:

And I can think of a few ways for Replicants to use'em.

It depends

It largely depends on how it's used. Transparency can be quite nice when used in instances where it is appropriate, but it is IMO highly overrated. I've used transparency on terminal windows in KDE, and it makes it harder to figure out what in the world you're typing. I've screenshots of Longhorn which have semi-transparent window borders, and it's distracting. One place I know where it'd really be nice is when moving windows around. That would be nice.

Haiku idi Gui

Quote:
Transparency can be quite nice when used in instances where it is appropriate, but it is IMO highly overrated. I've used transparency on terminal windows in KDE, and it makes it harder to figure out what in the world you're typing. I've screenshots of Longhorn which have semi-transparent window borders, and it's distracting.

I thinks it's quite overrated as well. I just can't see any advantage of transparency. It makes thing more clutterly, and even though it's the users choise, I hope we'll never see that in Haiku (especially transparent windows and such), just having the option must also take unecessary resources?!

Let's remember what they said at Be: neither imitate nor innovate for its own sake

Haiku idi Gui

It's very funny you should say 'nice on the eyes' because that's exactly what's it not. It may be pretty to look at, but it strains your eyes a lot. Your eyes need to work a lot harder to focus when reading text that is not on a solid background. Your reading speed goes down a lot the more clutter there is and after some time you will experience focusing issues and headaches. There are quite a few studies when it comes to this in Psychology Engineering and Man Machine Interfaces.

So lets keep transparency away from the daily use, and only use it where it makes a difference. Dragging windows, switching between apps might be good places, but not text backgrounds.

Haiku idi Gui

darkwyrm said:

Quote:
...it'd really be nice is when moving windows around. That would be nice.

tqh said:

Quote:
So lets keep transparency away from the daily use, and only use it where it makes a difference. Dragging windows, switching between apps might be good places, but not text backgrounds.

Left click brings the app to front.
Right click sends the app to back.
What about a middle click (or MODIFIER+[left or right] click ) turns the app transparent? Something easy to toggle.

Some additional instances where that would be useful:
-typing notes in a transparent window with an opaque browser(or other source of information) behind it.
-freehand tracing in image software.
-transparent status|progress displays. eg, tracker file operations. MDR sending|receiving.

basically, as darkwyrm, tqh, (and im sure others) have said, transparency should serve a function rather than pure asthetic purposes.

Window menu

mmadia wrote:
Left click brings the app to front.
Right click sends the app to back.
What about a middle click (or MODIFIER+[left or right] click ) turns the app transparent? Something easy to toggle.

A window menu would be nice, something like windows has but with more options then just close and move, I'd prefer to see eg a transparency slider, stick, magnet on/off, hide, maybe different window size settings (cycling trough window sizes with the resize knob on/off etc.

It will be kind of hidden in or under the tab or to the left of ""File" and it will keep the UI simple at a First glance with having just resize and close buttons.

2nd I would like to see some cross or other indication in the close button symbol, I was thinking when it was being clicked on (so the absolute newbie could move it's mouse away when he/she realizes it actually is a close button) and have a little arrow in the resize button showing whether the window will be made smaller or bigger, with having a modifier option to cycle trough different settings / sizes with the arrow indicating bigger (to bigger square widget) or smaller (to the smaller square widget). Of course this will be hard so see with these little widgets therefore I think balloons which will show up only the 1st 3 times after a new install will be maybe even better.

Maybe Darkwyrm has any usabillity comments (hint)?

Nutela

Haiku idi Gui

Humm ... i think transparency should be used for making windows a little bit more rounded, like having a pixel or two transparent in the border of the window or tab.

A nice thing about transparency would be for window appear / dispappear. But it's clear that a full time transparency is very very painfull for the eyes !
Like the PhOS tracker has a scaling effect for closing and minimising, this could be a 30 ms alpha appearing/disappearing OPTION for windows.
Same for contextual menus, as seen nowdays in Windows since Win2000.

The transparency window on dragging is also available in Windows if you have a nVidia graphic card and active 'nView' (you can even choose the % of transparency and if the transparency on ragging is active since a maximum size of window). Nothing new here then, but since it's not a native effect, it makes some problems, specially in Photoshop.

A nice little freeware i have found for Windows using transparency is a french one called 'affiche bureau' (translation: 'show desktop') that makes a 250px width hole following the mouse in all windows and so showing the desktop. Thats a little neat piece of software but that actually makes problem with Photoshop and Winamp cause, lie nView, is not a native feature.
See a screenshot here:
http://imgs.logitheque.com/imgl/16555.png
Download for test here:
http://perso.wanadoo.fr/lesoldatinconnu/logiciels/lkjdsftaerpouiuartdsfgrty/petits_utilitaires/Bureau.zip

By the way, even if i love to have a little bit of eye candy stuff on my system (a little bit, OS X already has too much for me), transparency is definitly not a must have thing for Haiku R1 !!! R2 or even R3

Haiku idi Gui

tqh wrote:
It's very funny you should say 'nice on the eyes' because that's exactly what's it not...

I still want it. :wink:

But I agree, good usage can improve usability.

I want the inactive windows to be a little transparent so that my eyes focus straight on the active window right away.

Haiku idi Gui

This is where i lost you.
An opaque Window is very easy to see for the eye, where transparency ask a second effort to make the different between the background and the transparent foreground. Since you eye needs to works twice, it will definitly focus on this one.
Worse, you will try to focus on the opaque one, and your eye on the other one, it should be very painfull :s

Haiku idi Gui

The main window wouldn't be transparent. Only the inactive ones. I thought my message was clear? :|

<french>La fenêtre de active ne serait pas transparent. Seulement ceux qui sont inactives.</french>

Haiku idi Gui

Quote:
The main window wouldn't be transparent. Only the inactive ones.

Yes, and that's what i have said. The transparency is harder to the eye to appreciate, so it needs two or three passes on it, or at least a longer look. So if your main window is not transparent and the other ones are, your eyes will work harder to appreciate the inactive ones that the active one, even if you are looking or reading the primary one.

If you have a nVidia card, try it under Windows with nView, or if not, try WindowFx. You will see by yourself (as a big huge eye candy and silly stuff lover, i have used both ... and now using BeOS :) )

Haiku idi Gui

Quote:
A nice thing about transparency would be for window appear / dispappear. But it's clear that a full time transparency is very very painfull for the eyes !

Whats the point of adding transparency just to add transparency? It will slow things down, which I think we should avoid as much as possible!

Quote:
Like the PhOS tracker has a scaling effect for closing and minimising, this could be a 30 ms alpha appearing/disappearing OPTION for windows.

The scaling effect in PhOS is really ugly, distractive, non-instant (as it should) and completely unnecessary!

Quote:
The transparency window on dragging is also available in Windows if you have a nVidia graphic card and active 'nView' (you can even choose the % of transparency and if the transparency on ragging is active since a maximum size of window). Nothing new here then, but since it's not a native effect, it makes some problems, specially in Photoshop.

I guess if you use your graphics cards for this, it would probably be a lot faster, but I still don't think we should add it as default (I really don't think we should add it anyway).

Sorry to be such a bore, but I just do hope we can keep Haiku clean, fast and professional (though still fun), and not bloated like KDE/GNOME and such slow and horrible systems.

Another thing is branding. I read a bit in the BeOS Bible yesterday, and the guy that was interviewed said that he wanted to be able to send a screenshot of BeOS to a friend, without BeOS logos, and it would be recognized as BeOS. :)[/i]

Haiku idi Gui

Hi guys, here for you some gui mockups with a classic-old-flat look, verrrrry simple, but it looks good only if app_server could have good anti-aliasing, I really wish that AGG engine could do it




Haiku idi Gui

Those are pretty good mockups. :shock: :twisted:

Edit: grammar. :oops:

Haiku idi Gui

zuMikkebe wrote:

Oh My God; I could have sex with that GUI..

The only thing stopping me from crying at the beauty of it all, were the "enabled" states of the check & radio boxes. I dislike the sand dollar, and the tick is a little too large for my liking. (could cause GUIs to look more cramped than they should)

JD

Haiku idi Gui

Wow, that GUI looks very polished and matured; it would be a joy to work with, I'm sure.
The yellow inside the 'close window' area of the tab feels like it could look a bit brighter, but: Forza zuMi !

Haiku idi Gui

[Beta wrote:
"]
Oh My God; I could have sex with that GUI..

You, old pervert, what have you done with my mockups?

Ok, I have shrinked a lil' bit the checkmark, and changed the "star" with a simple blue dot, I'll post later those mods.

Meanwhile wrote:
The yellow inside the 'close window' area of the tab feels like it could look a bit brighter, but: Forza zuMi !

It looks odd only with Inkscape, with mlotz's libbsvg it looks as I want but with this renderer I can't have Freetype, I'm thinking to post directly the svg sources.

Haiku idi Gui

Great, I'd love to see this GUI and your iconset alive as part of a Haiku release one day...

Haiku idi Gui

very nice ... very nice indeed.

I just think the BMenuField (Drop down combos) are a little bit and too rounded.

Haiku idi Gui

Sikosis wrote:
I just think the BMenuField (Drop down combos) are a little bit and too rounded.

Sikosis: the left-hand-side corners, or the button ?

I'd love to see a rendering of the BMenuField while open zuMikkebe..

Haiku idi Gui

raitis wrote:
another wip gui bit lighter and more effects.

This image gave me an idea:
Why not make deskbar when dragged into low position (bottom of the screen) also growable:
When no apps are open, then Deskbar is narrow like at this picture, when you run some apps, the deskbar grows wider. And there could be an option to display only application icons, much like OSX dock.

Haiku idi Gui

The fancy stuff is rubbish imho. The clean simple mockup though, is very, VERY good!

Haiku idi Gui

those kabuto icons look nice ...

...

That's also what I thought when I saw them.

Perhaps they're a bit too smooth though? Think I saw someone complain about that.

...

I wonder if any decision has been reached so far?

Haiku idi Gui

never ever use italic or serif(+italic) fonts in a non-homogen environment. A non-homogen environment is an environment where more than 2-3 font styles and sizes are at the same time open to the user's eye. In difference to 5 open windows of different websites plus all system fonts and other windows a human eye cannot change fast between fonts with serifs. Serifed elements just blur together for a few moments.

In difference to that homogen environments like books or magazines - where a human eye is concentrated and doesn't switch a lot - serifs help a lot for readability. In such a case the serifs help the eye to differ between different symbols.

I'm even currently looking at my own XFCE desktop and cannot find a single serif font between those 35 open websites and all open XFCE windows.

If you want to test how bad serifs are - create a small website with changing styles every paragraph - serif / non-serif / serif-italic / non-serif-italic and so on - between different fonts, too. If you won't notice that it is hard to distinguish, let your friend/girl-friend/wife/husband/relatives read that text. You will hear the same stuff I've written ^^^^ :D

Have a nice day

Haiku idi Gui

Quote:
Why not make deskbar when dragged into low position (bottom of the screen) also growable:
When no apps are open, then Deskbar is narrow like at this picture, when you run some apps, the deskbar grows wider. And there could be an option to display only application icons, much like OSX dock.

Wanna know tha sad part for what you said...? Thaz exactly what you should NOT do; cuz static interfaces are more intuitive -- you know where you left the program; and it will stay there even if you launch ga-zillion apps; the program is where you left it. If you're used to the apple's menu bar; imagine two programs -- one with only 4 menus; the other with 7 menus. If you keep switching between these two; you are most likely always clicking the wrong place for File Menu -- cuz its never in the same place as you switch between em

This means windows taskbar is best oO

A little candy

It seems that a lot of people have an aversion to "eye candy" of any kind. True, the overuse of effects and colors is not positive. However, the occasional use of elements that create a more modern (less like windows 95, more like OS X/KDE) look are beneficial. The masses like the way these effects look and they make using a computer more enjoyable. Grey all of the time might be good for performance, but it is very boring.
That being said, I removed most of the eye-candy from my haikuvisualization and came up with a polished version of the current gui. The big decision: beos-like icons or glass/aqua icons.

Note that none of the icons I used are my own. Some I got from Interfacelift and I also used the BeOS SVG set from BeBits.

Haiku idi Gui

Im neither pro nor anti to flashy effects; but i say only the eye candy which HELPS the user is good.
If you compare a mac window to a vista window; a user will first be wow-ed by a vista window; but will prefer a mac window.
Why? Cuz its more easy to the eye -- no excessive eyecandy in the application window; usage of less colours makes him focus better on his work.
In the interface you've given; its darn nice and competitive to aesthetic feeling of the mac
But im against you dislocating the haiku menu from tha spot unless it was unintentional :P
Also the tracker eats up WAAAY too much space; just to show seven items. Imagine the case for (my) folders which have more than 50 items each :-s

I think; the lesser colours you use in an interface; the BETTER it will be for the User Experience. why? - if one compares a mac menubar to windows taskbar; one may understand my point: [images from xvsxp.com]

Because the icons are monochromatic; and has given more space in exchange for colour; the mac sound icon is muuuch superior here

And by keeping the interface black and white; a lil colour gives us lots of help:

The battery icon will stand out from the other icons in the menu bar

The kind of eye candy i support; are
*colour labels -- its really interesting that no modern operating system gives this support (OSX gives half support compared to pre-aqua days)
*the genie or whatever effect of the way windows in a mac zoom into the dock; which provides the user strong visual feedback
*zooming user interface; which is extremely powerful visual feedback IMO
*exposé effect is kinda helpful...
*Animations to indicate a running task
*Transparencies for extremely temporary actions (example: shifting or moving files or windows)
*menu popping animations; if they're fast enough...

Haiku idi Gui

I am not sure what you mean by relocating the haiku menu. I admit — I have only briefly used BeOS but I don't feel it should be touching the edge of the screen — is that what you mean? Also — from what I have seen, in one version of BeOS, the menu defaults to being a bar at the top of the screen. I much prefer the more unique menu configuration. The tracker, in my imagination, is "adaptive". 1st, you can resize it — but even more as you resize it, the icons and spacing increase or decrease to fill the area. This could happen on the fly or the contents cold be recalculated after you resize (resizing would be though an orange outline in that case). Live-resize and redisplay would be ideal but without a powerful rendering engine like Quartz Extreme not realistic right? I am not sure of the graphical capabilities of BeOS/Haiku. I prefer "Icon View" in the Finder and in Explorer. List view and hierarchy don't do it for me. But, I thought that this would appeal to BeOS users.

I actually designed quite a bit of materials, so here is a screenshot of "Haiku Text" (named according to the simple name idea :-) I am unsure about the beveling and shadowing of my windows/elements and and debating over the buttons. You should see three styles of buttons — which is better!??! The Fonts button is an idea that lets you have functions grouped (sub-buttons) like submenus. I will demonstrate more in the print dialog box soon!

Two shots: Today's draft (3-button styles, refined window) and Yesterday (original beveling/shadowing)

and yesterday's:

P.S.: You are right about the lesser the colors the better (more shades of black, white, grey)

Haiku idi Gui

Quote:
P.S.: You are right about the lesser the colors the better (more shades of black, white, grey)

Ahh ty ty :P

I dunno much about interaction designing; though the reason i say menu should be docked to top right corner is -- to obey fitt's law; from which of the conclusions drawn; one is -- screen corners and edges are precious; cuz they're virtually of infinite area and thus least time is taken to reach em.

In simple words; If anything is located at screen edges; you can blindly flick your mouse in that direction and chances of your pointer landing on the menu is very high; thus least time is taken in completing the task. But if its dislocated; you will have to manually focus on it to avoid the error chances; thus time taken increases. Which is why all OSes use screen edges (and mac having the upper hand with menus fixed at top; which they had copyrighted/patented cant remember). Also having free space near the Be menu; is of no use either..

I havent used much of BeOS as well; had to stop it wen the company still existed cuz no modem drivers available :(
anyways -- the original Be Menu can be dragged to your desirable corner or edge(no floating if i remember well); making it look like a windows taskbar.

As for the buttons..... IMHO; more the depth/shadow the better; cuz there was this situation i faced once where i was trying to push a button on the ATM;; which was a sticker <.< So i feel the enabled/depressed/disabled buttons should be easily differentiable; so i feel this will be right:

>general buttons -- sharp shadow; preferably having the light source at north-east
>depressed buttons -- flat; slightly darker shade
>disabled buttons -- flat; non buttonish; grayed out; text should be dotted or such; so that it should be obvious that it cant be clicked.

About the button menu; i've actually seen that in very few apps and i like it ^.^

Eye Candy Functionality

Eye Candy should be used when it is to provide Useful Visual Cues to a user as to what is happening, as the post above about MacOS X vs Windows and BeOS. Apple is doing it right. Granted, they also require hardware accelleration, but that's as it should be.

Transparency is not helpful in any case other than antialiasing, shadows or as a subtle replacement for "appearing" and "vanishing" items (though i prefer that such things have origins and targets in those cases anyway - like how a pre OSX icon would "zoom" to show you that it was being activated and an in use application icon would change visual state to indicate it was already running). Any other use is eye strain and clutter.

One of the things that is the worst about Windows (aside from the ridiculous amount of DIALOG all over the screen acting as hyperlinks) is the almost constant lack of visual feedback to the user that something is happening. At best, you get a pointer that indicates you're being forced to wait. Most people have learned (somewhat correctly) to associate that with "nothing's happening, it must be broken." If an icon was known to zoom and change color state and then animate in a "i'm working on starting up" kind of way like in MacOS, the users would be far far more likely to learn when their double-clicks were not recognized and that they are waiting for.... nothing.

Animation of large objects should be used ONLY to smooth transitions from one state to another (open/closed, position, etc) where it encourages the user's recognition of what just happened (what came from where and where did it go) and where it mimics the real world in sensible ways. i've observed countless clients attempt a logical drag and drop only to be purplexed that the mouse pointer instantly says "NO!" and the object they are trying to drag isn't ACTUALLY MOVING. Sliding pages, windows, icons, text, zooming or bouncing icons/windows can be useful when used for valuable user feedback and NOT to make things pretty. When you mistype your password in OSX, it shakes the window slightly. i actually find this to be a helpful cognative enhancement to the "password incorrect" message. If i am going to drag text, a picture, an icon, a window, whatever, i should SEE IT MOVING from the moment i start dragging it and NOT when the mouse's hotpoint is hovering over a valid target. Again, OSX is doing a WAY better job of giving users valuable visual feedback. OSX's few major flaws that hold me back are the context sensitive menu bar (a critical and fatal design mistake ever since MacOS went multi-tasking) and the lack of MacOSX ports of my chosen Audio tools. Otherwise, the system is VERY appealing to me compared to Windows. Even to BeOS. In fact, if Apple could get node monitoring in place on OSX's file system and queries, AND eliminate the modality of lots of controls, it would be a replacement for BeOS already, in my mind. Just like Scot Hacker has chosen for himself.</