New button styles (With mockup images)

The interface, modeling, 3d editing tools, import/export, feature requests, etc

Moderators: jesterKing, stiv

sten
Posts: 177
Joined: Sun Oct 13, 2002 7:47 pm

Post by sten » Thu Aug 07, 2003 6:01 pm

I like the last shot best :) looks very pro like for me ;)

good work!!

well, when blender will start look like XSI ;) people will rush to download Blende LOL :D

*hint hint*

Pablosbrain
Posts: 254
Joined: Wed Jan 28, 2004 7:39 pm

Post by Pablosbrain » Thu Aug 07, 2003 6:31 pm

I like the lesser gradient

Pablosbrain
Posts: 254
Joined: Wed Jan 28, 2004 7:39 pm

Post by Pablosbrain » Thu Aug 07, 2003 7:47 pm

I also tried your windows build. The only thing that sticks out as wierd for me is the sliders.. not their look but when I drage them they flicker. I'll have to try this on a couple other computers to see if its just this laptop.

ilac
Posts: 131
Joined: Mon Oct 14, 2002 8:24 am

Post by ilac » Thu Aug 07, 2003 10:20 pm

broken wrote:I tried a version with more subtle gradients on the buttons. What do you guys think?
stronger:
subtler:
Could you please post a post with 3 versions, the third being a version without gradients! :P

I definetly prefer the lesser gradients from these 2! I'd like to see a version of your buttons without any gradients though! I still got a feeling the no-gradients one would look the most appealing! At least ,as far as I'm concerned, gradients get old very quickly! 'Simple' on the other hand feels timeless! (when done well!) :wink:

matt_e
Posts: 410
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Post by matt_e » Fri Aug 08, 2003 7:29 am

Argh, not you again, ilac! (heh, j/k :D ;))

I agree and think that the more subtle shading solves the problem you were mentioning before of making it a bit too visually distracting. I tried it with no gradients before - I guess you can see for yourself by opening those pics up in photoshop or gimp or something and just painting a solid rectangle over the top. Anyway, to me it looked very flat - I didn't like it at all. Let me explain my reasoning a bit:

Designing the appearance of buttons etc is not a purely subjective aesthetic thing, it also involves looking at how they communicate, visual feedback etc. I like the buttons to have a bit of 'meat' to them. I like them to feel a bit more real, and that when I click on it, it's really having some sort sort of effect.

The metaphor of having 'buttons' is drawing on real world experience of pressing physical buttons. However of course they're not real buttons, it's just a familiar illusion. When you press a button in real life, depending on how well it's designed, you know when it's pressed. You can feel it click or depress. In a GUI you don't have this tactile feedback so you need to use visual feedback instead.

Personally, when I use very flat looking (GUI) buttons, it doesn't 'feel right' to me. It's like using the button panel on a microwave oven - you know those ones where you just press a flat piece of plastic. It doesn't seem as definite when you press a button, it's not so clear. Indeed on many microwaves the buttons beep when you press them, just so you have the feedback so you know when you've pressed it properly (I'd hate to have to use a GUI that beeped on every button press ;) ).

So one solution which I obviously like and that seems to work reasonably in some other GUIs is to make the buttons seem a bit more solid and more 3D looking (and make the indentation seem more real when the button's pushed) by shading them a little.

Another option is to make the buttons flat, but put big chunky bevels on the edges. This is the approach in the current Blender and on others such as the buttons in OSes like Windows 95. I personally think this is quite ugly :) The contrast of the dark bottom/right edge bevels and the white top/left bevels is very strong, and visually distracting so it's harder to read the text labels at a glance, which is the most important visual information contained in the button! Maybe others won't agree, which is fine, but I one thing I've been trying to achieve is lesser contrast on the buttons themselves so the labels are easier to read.

Anyway, sorry about the massive post. I just wanted to explain some of my own reasoning, since I certainly don't want to say "This is the way it should be, just because I like it, and that's it!".

Heya Pablosbrain: Hmm, that's strange about the sliders since I don't see it here. I'm sure it can be fixed since I know next to nothing about OpenGL (this is my first time i've ever tried it!) and a more experienced coder will probably be able to clean up any stupid OpenGL code that I've done. My own emphasis is on the visual side of things here... I'll post another updated build in a few days, but the flickering probably won't be fixed until I can get someone else to look at the code.

I'm glad/surprised? :P about the positive comments. I was half expecting flames from all directions when I posted this stuff! All constructive feedback is very useful though be it positive or negative. Thanks.

ilac
Posts: 131
Joined: Mon Oct 14, 2002 8:24 am

Post by ilac » Fri Aug 08, 2003 3:19 pm

broken wrote:Argh, not you again, ilac! (heh, j/k :D ;))
Do you hear the spooky, 30's horror organ soundtracks everytime you see my name?

just curious! :P


Good arguments! Guess the lesser gradients is a good compromise.

just to expand on my reasoning: Its not the gradient on a button per se that i find annoying, but the constant ondulation across several buttons next to each other! Personally I am against making a software interface look like it were the interface of a hardware piece - stereo etc. When the software is trying to simulate a real-life hardware piece as happens with a lot of music synths then I can understand the need for it, but there's no hardware 3D modeler! Granted, a button is a button!

Anyway you're still doing great work and obviously it helps us form a more informed decision - so keep them coming! :D I'm not trying to shoot down your work! Its definetly appreciated :wink:

<end spooky music/> :P

matt_e
Posts: 410
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Post by matt_e » Fri Aug 08, 2003 3:32 pm

ilac wrote:Do you hear the spooky, 30's horror organ soundtracks everytime you see my name?
haha! :) Nah, just playing with you :P
Its not the gradient on a button per se that i find annoying, but the constant ondulation across several buttons next to each other! Personally I am against making a software interface look like it were the interface of a hardware piece - stereo etc. When the software is trying to simulate a real-life hardware piece as happens with a lot of music synths then I can understand the need for it, but there's no hardware 3D modeler! Granted, a button is a button!
What do you mean by 'ondulation'? I'm curious.. I don't think anyone wants to try and simulate some sort of real-world appliance (what would it be, a chunk of clay on an animation stand or something? :P). But the idea of a button itself is based on the metaphor of a real-world button and even though it's not a direct replica of the real-world object, people still expect it to work in a similar way - push in, push out, feedback that it has 'pushed' etc. Anyway, I've ranted on this already and don't want to repeat any of that nonsense. :P
I'm not trying to shoot down your work! Its definetly appreciated :wink:

bah! Don't worry about that! When I design stuff, I usually try to have at least 5 iterations and if a better solution is found, then throw out the old stuff, no matter how long was spent on it. As long as negative feedback is reasoned and constructive (eg. not "you suck!") then bring it on!

ilac
Posts: 131
Joined: Mon Oct 14, 2002 8:24 am

Post by ilac » Fri Aug 08, 2003 9:42 pm

[music] spooky, 30's horror organ soundtracks [/music]
broken wrote: What do you mean by 'ondulation'? I'm curious..
Ondulation as in 'waves'. When you have loads of buttons next to each other, with gradients, you get the 'shadows' going up down up down up down.... I don't mean they actually move, but several gradients next to each other become too much and it forms a lot of visual clutter.

This happens especially when the buttons are lined up in the same fashion as the gradient because giving something a gradient means you are also giving it a direction. Eg. in your buttons it would look like clutter (to me) when the buttons are one on top of the other coz your gradient goes up down too. The repeated emphasis of the gradient pattern becomes visually stronger than the text on the buttons. Look at the 'shadows' and 'panorama' buttons in the 'stronger' example.

But If this was a row of buttons with the Shadows and Panorama buttons beside each other, then the gradient becomes less distracting because its only one gradient - running along the whole row! The problem is that in a program like Blender you cannot just have rows or columns of buttons only, you have to have both, so you will end up with repeated patterns one way or another - which is what I meant by ondulation! It even shows up in the small sample, imagine the whole screen with all the buttons, menu's, taskbars etc!


Having said that, your lesser gradient buttons don't seem to suffer from that so if those where implemented I personally think they'd be just fine.
I do like them you know! :D

Thanks!

matt_e
Posts: 410
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Post by matt_e » Sat Aug 09, 2003 5:23 am

Ah! I understand.

Well like you said, I think the lesser gradients is a reasonable compromise for this. Anyway, I'm working on menus now.. going to leave these buttons for a while and re-visit them later (maybe with some new ideas? I dunno..). Thanks again for your comments - I do value them :)

Edit: Update 10 Aug - Gave the constraint controls a facelift:
Image

ilac
Posts: 131
Joined: Mon Oct 14, 2002 8:24 am

Post by ilac » Sun Aug 10, 2003 10:29 am

broken wrote: Edit: Update 10 Aug - Gave the constraint controls a facelift:
I like! :D

But why the use of gradients for non-buttons like the textholders (const, const.001) shouldn't those be flat? they look like pushed in buttons at the moment! :?

matt_e
Posts: 410
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Post by matt_e » Sun Aug 10, 2003 11:40 am

ilac wrote:But why the use of gradients for non-buttons like the textholders (const, const.001) shouldn't those be flat? they look like pushed in buttons at the moment! :?
Ah you're right. I forgot to tone down the gradients on those too (like for the buttons/menus). Thanks for reminding me!

Landis
Posts: 0
Joined: Sun May 11, 2003 11:45 pm

Post by Landis » Mon Aug 11, 2003 1:12 am

broken,

I took your idea and played with it a little. ...heres what I came up with buddy ...

Image

No more colors....we can use a couple different variations of gray and black (like I did for the render button versus the salmon color that it is now) The render button's text would glow while the scene is rendering...and would stop when the render is complete. The same goes for other buttons in the interface that are dependent upon calculations (ie. radiosity button, etc). As for the OSA and MBLUR buttons, the extra's that go along with these options and others would not appear until they are activated. At that time your slider bars appear showing these "extras", cleans up the interface even more don't ya' think :wink: . I really like your sliders! Anyways I got this idea from your theory on the drop downs...get rid of anything that does not need to be there at that time. Stream line that baby!!!

Cheers,
Landis
Last edited by Landis on Mon Aug 11, 2003 7:22 am, edited 3 times in total.

Eric
Posts: 163
Joined: Wed Oct 16, 2002 1:01 pm
Location: Sweden, Norrköping

Post by Eric » Mon Aug 11, 2003 2:02 am

Your mockup looks evil Landis!....To bad we almost have to use pixmaps for the buttons to use it in "real-life". ;)

Landis
Posts: 0
Joined: Sun May 11, 2003 11:45 pm

Post by Landis » Mon Aug 11, 2003 2:55 am

Eric wrote:Your mockup looks evil Landis!....To bad we almost have to use pixmaps for the buttons to use it in "real-life". ;)
Thanks man...yeah...the real life thing kinda sucks but oh well. It is still fun to dream.

M@dcow
Posts: 0
Joined: Sun Apr 20, 2003 12:50 pm

Post by M@dcow » Mon Aug 11, 2003 8:29 pm

Whoa, this is an interesting topic, very valuable....

Broken, I've been playing with the new interface and I like it a lot, very easy on the eye.

The only problem is that the little arrows you coded on some of the buttons can get in the way of the text, this only happens in a few cases but it can be slightly irritating...

Also, I loved the Blender version you posted with the Dark UI, and Landis's post kinda confirmed that a dark interface would be superb :shock:

Anyway, thanks for the great work and I hope you post another version for us to play with soon :D

Cheers.

Post Reply