Current version

v1.10.4 (stable)

Navigation

Main page
Archived news
Downloads
Documentation
   Capture
   Compiling
   Processing
   Crashes
Features
Filters
Plugin SDK
Knowledge base
Donate
Contact info
Forum
 
Other projects
   Altirra

Search

Archives

01 Dec - 31 Dec 2013
01 Oct - 31 Oct 2013
01 Aug - 31 Aug 2013
01 May - 31 May 2013
01 Mar - 31 Mar 2013
01 Feb - 29 Feb 2013
01 Dec - 31 Dec 2012
01 Nov - 30 Nov 2012
01 Oct - 31 Oct 2012
01 Sep - 30 Sep 2012
01 Aug - 31 Aug 2012
01 June - 30 June 2012
01 May - 31 May 2012
01 Apr - 30 Apr 2012
01 Dec - 31 Dec 2011
01 Nov - 30 Nov 2011
01 Oct - 31 Oct 2011
01 Sep - 30 Sep 2011
01 Aug - 31 Aug 2011
01 Jul - 31 Jul 2011
01 June - 30 June 2011
01 May - 31 May 2011
01 Apr - 30 Apr 2011
01 Mar - 31 Mar 2011
01 Feb - 29 Feb 2011
01 Jan - 31 Jan 2011
01 Dec - 31 Dec 2010
01 Nov - 30 Nov 2010
01 Oct - 31 Oct 2010
01 Sep - 30 Sep 2010
01 Aug - 31 Aug 2010
01 Jul - 31 Jul 2010
01 June - 30 June 2010
01 May - 31 May 2010
01 Apr - 30 Apr 2010
01 Mar - 31 Mar 2010
01 Feb - 29 Feb 2010
01 Jan - 31 Jan 2010
01 Dec - 31 Dec 2009
01 Nov - 30 Nov 2009
01 Oct - 31 Oct 2009
01 Sep - 30 Sep 2009
01 Aug - 31 Aug 2009
01 Jul - 31 Jul 2009
01 June - 30 June 2009
01 May - 31 May 2009
01 Apr - 30 Apr 2009
01 Mar - 31 Mar 2009
01 Feb - 29 Feb 2009
01 Jan - 31 Jan 2009
01 Dec - 31 Dec 2008
01 Nov - 30 Nov 2008
01 Oct - 31 Oct 2008
01 Sep - 30 Sep 2008
01 Aug - 31 Aug 2008
01 Jul - 31 Jul 2008
01 June - 30 June 2008
01 May - 31 May 2008
01 Apr - 30 Apr 2008
01 Mar - 31 Mar 2008
01 Feb - 29 Feb 2008
01 Jan - 31 Jan 2008
01 Dec - 31 Dec 2007
01 Nov - 30 Nov 2007
01 Oct - 31 Oct 2007
01 Sep - 30 Sep 2007
01 Aug - 31 Aug 2007
01 Jul - 31 Jul 2007
01 June - 30 June 2007
01 May - 31 May 2007
01 Apr - 30 Apr 2007
01 Mar - 31 Mar 2007
01 Feb - 29 Feb 2007
01 Jan - 31 Jan 2007
01 Dec - 31 Dec 2006
01 Nov - 30 Nov 2006
01 Oct - 31 Oct 2006
01 Sep - 30 Sep 2006
01 Aug - 31 Aug 2006
01 Jul - 31 Jul 2006
01 June - 30 June 2006
01 May - 31 May 2006
01 Apr - 30 Apr 2006
01 Mar - 31 Mar 2006
01 Feb - 29 Feb 2006
01 Jan - 31 Jan 2006
01 Dec - 31 Dec 2005
01 Nov - 30 Nov 2005
01 Oct - 31 Oct 2005
01 Sep - 30 Sep 2005
01 Aug - 31 Aug 2005
01 Jul - 31 Jul 2005
01 June - 30 June 2005
01 May - 31 May 2005
01 Apr - 30 Apr 2005
01 Mar - 31 Mar 2005
01 Feb - 29 Feb 2005
01 Jan - 31 Jan 2005
01 Dec - 31 Dec 2004
01 Nov - 30 Nov 2004
01 Oct - 31 Oct 2004
01 Sep - 30 Sep 2004
01 Aug - 31 Aug 2004

Stuff

Powered by Pivot  
XML: RSS feed 
XML: Atom feed 

§ Flat buttons vs. 3D look

The current trend in user interfaces is to eliminate 3D borders and make everything look flat, especially buttons.

Why??

When I first started using UIs that had the 3D look, I loved it because it gave visual cues as to what could be interacted with and what was a container. Raised objects were things you could drag or twiddle. Impressed areas grouped things or could accept things. Flat objects were static indicators. Sure, there were people who overdid it and made their UI look like an obstacle course, but for the well designed UIs I thought it made a huge difference.

The trend now is to eliminate all of the borders and leave just the text or icon. The main argument is that it's visually cleaner, but to me, it makes it really hard to tell what you can and can't interact with. If you're lucky, the person who designed it at least used controls that show borders when you mouse over them. Otherwise, you have to click all over the window like an idiot, trying to figure out which of the icons do something and whether they do something different than the nearby widgets and text. It makes me feel like I'm playing an old LucasArts adventure, mousing everywhere trying to find some object in the dark cave that I can light to get to the two-headed squirrel.

Comments

Comments posted:


Got any specific examples?

Michael - 03 08 09 - 16:39


For well-designed UI, the point is moot since the invention of standard controls.

Yuri Khan - 03 08 09 - 18:01


OP, you are 100% correct, flat buttons are a stupid gimmick and part of the de-functionalization of UI. It's just bad design.

cb - 03 08 09 - 18:13


Yeah, you're absolutely rigth. It seems that pixel-hunting is back again...

Not to mention those ribbon-like interfaces that are clear and useful like that can of gas on mars...

TheBishop - 03 08 09 - 19:04


Please make new flat UI for VirtualDub.
The old one looks very bad compared to other programs'.

joHn - 03 08 09 - 19:20


For a current example see: http://blogs.msdn.com/larryosterman/arch..

Neil - 03 08 09 - 20:37


dont worry: in 10 years we will have the <blink>-tag again...

zobi - 03 08 09 - 22:52


But... pretty!

nine - 04 08 09 - 00:46


Trends are optional. Too much eye candy is sick. Designing is an art. All that together should make a proper comment, but I cant figure how. Btw Nice Zack McKracken comment ;P

IpNextGen - 04 08 09 - 02:50


Reminds me of walking around Wolfenstein 3D levels hitting the "activate" key on each wall tile.

Michael Mol - 04 08 09 - 03:59


...Design...
Design Can be an art, but design of the User Interface can't.
User Interface is not about art, it's about technology. It's about ergonomics. It shouldn't and mustn't and may not Take User's Attention Away from his/her TASKS. Otherwise it's A TOY, not a GUI.


Phaeron, you're absolutely right!

Jam_One - 04 08 09 - 04:10


IMHO, the current trend is not only to eliminate 3D look — the trend is to produce clean UIs. If all your windows are dead simple and straightforward to use (and by that, I mean really-really-really simple, with all optional controls eliminated), flat controls won't do any harm.

You know, if you need 3D borders to find out how to interact with a window, the application is already doomed.

Andrey Tarantsov - 04 08 09 - 04:29


Most of these modern apps may look "pretty" but who needs a bug ridden app with a shiny UI?
I prefer an app with less bugs - even if it has an old "Bevel-UI".
Just look at Office 2k7 - who needs this colorful ribbon? They threw away all the customization options for this static crap? Still can't believe it!

Murmel - 04 08 09 - 05:11


Don't forget the trend to make all the UI elements much larger as well, and the trend to remove customisability. I remain unconvinced that allowing toolbars to be docked to more than one side of the desktop at a time is some awful usability problem, yet in Windows 7 they've removed that functionality.

Torkell (link) - 04 08 09 - 05:19


12 years after WinAmp, the skin craze is still alive and well.

Plus, the Ribbon is just Microsoft cutting support costs.

GrofLuigi - 04 08 09 - 06:17


Outlook express (windows live mail) also suffered this horrible flattening. There is another trend too, getting rid of the menu.

Gabest - 04 08 09 - 08:54


It has nothing to do with cleanliness.

When you have to hover/click on everything, you tend to get more ad clicks. This is why sites are being designed this way, to further confuse the user into clicking on link ads, moving the cursor around to activate those popup Javascript and Flash ads, etc. Since the entire world runs on clickthroughs, it seems this design choice is creeping into mainstream desktop apps.

Trimbo (link) - 04 08 09 - 09:08


Umm.... like your "Go" button in your own search bar?

anonymous - 04 08 09 - 10:59


that being said.. why not use a manifest on virtualdub?

mappy - 04 08 09 - 16:30


@anonymous:
Fair enough, although I don't spend a whole lot of time on my web site. :)

The kinds of flat UI I was thinking of, though, don't even have borders of any kind -- they're literally just floating icons until you hover over them, at which time maybe you might get a border highlight.

I should note that I was talking about desktop app usability. If we're talking about web pages, then you could fill an entire book with the WTFs found on the intarwebs. I'd attribute it more to ineptitude than to driving ad clicks, though.

As for VirtualDub and enabling the XP visual style, I've discussed this before: http://www.virtualdub.org/blog/pivot/ent..

Phaeron - 04 08 09 - 16:36


I believe that the "flat" look started because of UI situations where there was a limited amount of pixels and 3D effects like drop shadows, highlights, and other "chrome" just eat up valuable pixels. For some reason, someone decided that flat UIs look cool and started writing desktop software and now operating systems with them.

Personally, I hate those "skinned" desktop apps where the windows are irregular shapes and they don't have traditional menu bars. They usually have all sorts of bumps and doodads on their photoshopped app "frame" (if you can call it that) and some are clickable, others are not.

This is the sort of thing I'm talking about, though I've seen MUCH worse...
http://files.3feetunder.com/asus_ai_suit..

krick (link) - 05 08 09 - 13:03


The "flat" button look was just an ongoing evolution in UI design by (guess who?):

Word 6.0
http://3.bp.blogspot.com/_zRvm7b6lEw8/R9..

Word 95
http://1.bp.blogspot.com/_zRvm7b6lEw8/R9..

Word 97
http://1.bp.blogspot.com/_zRvm7b6lEw8/R9..

some people have short memories.

Rich - 05 08 09 - 16:12


I have to admit that, at least in a toolbar, the lack of borders is less of an issue because you expect everything in a toolbar to be interactive.

What REALLY drove me nuts about the switch to rebars is that they made the menu a rebar too. That drove me crazy when I first switched to VC6, because I was in the habit of clicking on the X repeatedly to close all my open docs, and inevitably I'd undock the menu bar too. Fortunately, I soon found the well-hidden "use screen reader compatible menus" to save my sanity.

Someone mentioned consistency, which makes a lot of sense. You can make a good case that flat UIs are perfectly fine as long as the user's expectations of static versus interactive gadgets hold. Which unfortunately, they don't, given how a lot of UIs are laid out. I have to admit to trying to click on the envelope across from "Inbox" in Outlook, just to see if it was some hidden trove of goodies.

I suppose it's a good thing I use OpenOffice right now, because if I used a recent version of Office, I might have posted about the Ribbon instead.

Phaeron - 05 08 09 - 16:36


@Phaeron

Well, brace for impact:
http://blogs.zdnet.com/microsoft/?p=3649

Hurd - 05 08 09 - 21:55


We'll see how it turns out. Right now it just looks like an AWTesque sea of odd sized buttons, but the devil's in the details of how it handles organization, resizing, minimization, etc. The thing that worries me is that OpenOffice has a lot of other issues to work out, and this will be a distraction. It was only recently that Writer got overlining....

Phaeron - 06 08 09 - 18:22


The complaints I've seen around Ribbon before has mostly been from "experienced" people that just don't like to "learn" a new UI. I know several "inexperienced" people that had trouble with the older Office UI, but could get started with Ribbon right away.

Personally I think Ribbon is great. Intuitive grouping of buttons/icons instead of tons of small buttons/icons cluttering the toolbar.

I hope you didn't switch to OOo just because of Ribbon, considering all the faults of OOo.

Nekoneko - 06 08 09 - 18:59


Nope, I haven't actually tried a version with the Ribbon yet. I actually installed OpenOffice because I needed to draw diagrams and was too cheap to buy Visio. I've been tempted to go get a recent version of Excel, though, because OpenOffice Calc's AutoFilter is missing some options, and I really love AutoFilter. It's a great way to avoid having to write a real interface for viewing profiling data.

Phaeron - 06 08 09 - 19:14


IMHO the Ribbon interface can be useful for newbies and occasional users, but for abitual and professional users is a real pain in the ass.

It would be nice to have a setting to disable the ribbon-like UI if you need the classic one (as in the last Autocad release).


@Phaeron

Don't ever use a ribbon-like or a bloated eye-candy UI on VirtualDub !!!

TheBishop - 06 08 09 - 19:44


> Personally I think Ribbon is great. Intuitive grouping of buttons/icons instead of tons of small buttons/icons cluttering the toolbar.

I find it anything but intuitive - I tried using Office 2007 for a while, but gave up in the end, because I spent too much time searching for the less common commands (I know keyboard shortcuts for the commonly used stuff), and there's a ton of stuff that simply isn't available on the ribbon (and you need to add it to that one pathetic toolbar at the top of the screen that they still allow you to customize).

Not to mention that the ribbon completely ignores system colour scheme, making Office 2007 yet another application with ugly skinned buttons and no respect for user preferences (but hey, the programs in Windows 7 do the same thing, so it should be fine, right?)

ender - 07 08 09 - 03:13


I have to say, this discussion has gotten a lot more amusing. Probably the only conclusion I can derive is that no matter what UI change is involved, someone will hate it bitterly.

Phaeron - 07 08 09 - 16:03


I agree, this is just dumb. While I'm fond of minimalistic design, in the UI department visuals need to assist intuitive functionality. If designers are so in love with a trend that they lose sight of this principle, they fail at their job.

chevkoch - 08 08 09 - 02:55


An application-ui should seamlessly integrate into the style of the current desktop. On win7 it should show a ribbon and on xp not. And this default should be changeable in the applications config.

phobie (link) - 12 08 09 - 22:05


Everything is great unless a designer gets his hands on it.
I myself have to develop user interfaces that shuuld match both, practical usage and to comply with the style guide of the designers. This is always impossible and for usual our customers are not happy with the useability of our software although the group of designers calls themselves "Ease of Use". We have just been through to design all our rectangualar buttons to circle-shaped ones. The problem for me was that round buttons need much more details to make the circle look like a circle and not like part of jigsaw puzzle. So now on our slow Window CE handheld it takes just 3 seoónds instead of 1 before to switch from one dialog to another. But for the customer the problem was more evident: While I could write three lines containing up to 10 characters in a rectangular button the message in a round button is only two line with 7 chars. That meant lots of abbrevations and misúnderstandings.
Some of the designers also came up with the idea to change the color of the background with the function invoked insteas of highlighting or outlinig the button. Looked good for two functions but with 64 buttons and 64 colours it is a mess to use. Our customers could not remember the colours and wanted back the function of outlining the button if its function is active.
Back in 1990 I was always longing for a new version of EXCEL, Windows or WinWord. The new functions were intuitive and easy to find. There was no need of a user manual. Everything was evident. AND: Old functions kept their location and their design.
Now new functions of those programs are made for a few people only. Essentially I don't need them. However to be up to date I have to upgrade and spende most of my time for the new version in finding my old and needed functions in their new clothes. They changed view and location (and sometimes also functionality).
So designers put fashion into software. What shape of button is modern, which one is obsolete.
I just came back from a shopping-tour I saw that designers even do not stop when fahsioning Software. No now they're putting hands on hammers, screw-drivers, wrenches, saws, pinces etc. They just gave the grip of those tools a fancy flower pattern and my wife was really happy with it. Of course she does not have to work with and will not be shocked these tools are covered with black grease of my car bearings.

ECC - 15 08 09 - 03:22


It sounds like you had more of graphic designers driving your UI rather than usability experts. I would expect a usability expert to be at least familiar with some basic principles of accessibility, and specifying a UI that had 64 colors for signaling is even worse for color-blind people. Also, if you were going to modify the shape of the buttons, it would make far more sense to vary the shape of the buttons according to function rather than change from one uniform shape to another....

Phaeron - 15 08 09 - 07:14


The point is not "flat", "3d" or any other design, the point is "Dose the icon behave like an icon?" A icon is ment to represent some thing with out the need for words. E.G. Witch icon represents "Photo's" better the one on iOS 6 or on iOS 7 or some other icon? Which icon represents "Settings" better?

Yes I know they have words under them but the hole point is a icon should not need words. Being dyslex..... I understand this and so should a good designer.

Sorry for any bad spellings I am dyslex.....

Steve - 14 04 14 - 04:14

Comment form


Please keep comments on-topic for this entry. If you have unrelated comments about VirtualDub, the forum is a better place to post them.
Name:  
Remember personal info?

Email (Optional):
Your email address is only revealed to the blog owner and is not shown to the public.
URL (Optional):
Comment: /

An authentication dialog may appear when you click Post Comment. Simply type in "post" as the user and "now" as the password. I have had to do this to stop automated comment spam.



Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.