Developers, your programs should only take up one window (popups like file pickers don't count). You don't clutter my taskbar and it makes your programs easier to use.
Offenders: AgentSheets, Paint Dot Net, all web browsers prior to 2000, many creative programs.
This is what a standard AgentSheets setup looks like when making a basic version of space invaders.
That's not even close to all the windows you can have open at a time. Just moving a new window to the right place takes up a ton of time.
This is my mock up of a one windowed system. Clearly I didn't spend any time making it look good, just showing the basics. A tab system, every thing you need for the programming in one place.
Just a quick one for Paint Dot Net, just imagine all on the windows as a sidebar.
Developers, make it easy on us. Just one window. Please.
P.S. Bonus points to anyone who can spot what every image in this post and the last one has in it.
Schwal points out mistakes in User Interface design and begs developers to fix them. Please.
Thursday, September 29, 2011
Scale your width.
This is about websites that don't scale their widths to match users displays.
Offenders: Blogger (sorry), Google docs, about half the websites ever made.
This would seem to be a very basic thing to fix (Assuming you know any HTML. Which I don't.). People have different sized monitors. Let the browser's word wrap work it's magic. Please.
But this article is mainly to shame Google Docs word processor.
That space will always be blank. There is no way to zoom in on the page. The previous version of the editor did. They are wasting more that 1,000 horizontal pixels, well over half my screen resolution. How did this ever get approved? This prompted me to install Open Office for the rare occasions I need to do major text editing. Make it zoom again. Please.
Offenders: Blogger (sorry), Google docs, about half the websites ever made.
This would seem to be a very basic thing to fix (Assuming you know any HTML. Which I don't.). People have different sized monitors. Let the browser's word wrap work it's magic. Please.
But this article is mainly to shame Google Docs word processor.
That space will always be blank. There is no way to zoom in on the page. The previous version of the editor did. They are wasting more that 1,000 horizontal pixels, well over half my screen resolution. How did this ever get approved? This prompted me to install Open Office for the rare occasions I need to do major text editing. Make it zoom again. Please.
PCs Are Not Tablets
Why PCs are not iPads
A Rant Open Letter On UI Design
A disturbing trend is emerging in User Interface (UI) design. This is described by the designers as “Less is More”. They are wrong.
Before I start on the main offences, I need to describe the 2 major differences between tablets and PCs (or any desktop computer. or rack mount. or any thing that uses a mouse.) that matter in UIs. First is a large, high resolution screen.
Second, and much more important, is a fast, accurate pointing device. To quote Yahtzee “Standard controllers have a far shorter brain-action delay than motion controls. The movement of our actual, physical bodies is minimized to the tiny finger-jerks it takes to press a button. Thought → tiny movement → action.” While he was talking about motion controls in videogames, he could have just as easily been describing the difference between touch screens and mice or keyboards.
Second, and much more important, is a fast, accurate pointing device. To quote Yahtzee “Standard controllers have a far shorter brain-action delay than motion controls. The movement of our actual, physical bodies is minimized to the tiny finger-jerks it takes to press a button. Thought → tiny movement → action.” While he was talking about motion controls in videogames, he could have just as easily been describing the difference between touch screens and mice or keyboards.
This is not to say that touch screens are always bad. They work very well on smartphones and similar devices. These devices, however are designed to be held in the hand, and they work well for the task. Nor are tablets bad by nature, I actually owned one of the first tablet PCs. But that had a stylus input, which is much faster to use (and more accurate, assuming good calibration) than a touch screen most of the time. This is why almost all painters over the age of 7 use brushes rather than their fingers.
Let There Be Menu Bars
The first mistake in designing PC IUs is thinking that screen real estate (for web sites, documents, etc.) takes precedent over fast access to the tools needed to do much of anything with them.
First Offender: Google Chrome
Other Offenders: Internet Explorer 7+, Mozilla Firefox 4+
This is Firefox 3.6’s UI:
- 134 pixels tall including the status bar at the bottom.
- All commands grouped at the left side of the screen.
- Search bar can be moved to top row giving both it and the address bar lots of space, and moving it’s left side close to everything else.
- Colorful Back, Forward, Reload, Stop and Home buttons are easy to see.
- URL previews and current location visible at the same time, detailed loading information appears on the status bar.
This is Firefox 7’s UI:
- 85 pixels tall, but an additional click required to get to any menu option.
- Tabs further away from the web page, so they take more time to get to from the web page.
- Search bar stuck on the far right
- Stop and reload combined and moved to the right side of the address bar for no apparent reason, now farther away from most of the other commands.
- Home button and bookmarks now on the far right, also away from everything.
- No status bar, link URL previews now show up in location bar.
- All buttons except menu gray on gray.
How much vertical space is gained with all of those changes? 54 pixels. less than four lines of a 16 point font. one extra click of the scroll wheel.
This is Chrome’s UI:
- 76 pixels tall, not counting a status bar that’s hidden most of the time. 9 pixels under FF 7, 63 under FF 3.6.
- Options menu button (an extra click to change anything) to the right of the combined address and search bar, away from the rest of the icons.
- Bookmarks either have a separate bar, or are shoehorned in with the search/address bar.
- Gray on white buttons.
- Ignores the OS’s display theme.
This is Internet Explorer 9’s UI:
- 54 pixels high, link URLs show up as tooltips at the bottom left of the screen. 22 pixels under Chrome, 31 under FF 7, and 85 under FF 3.6.
- Combined address/search bar shares line with tabs.
- Home, Bookmarks, and Options all to the right side, away from everything else.
- Stop and Reload are separate, to the right of the address/search bar.
- Address bar won’t expand until the window is more that 1024 pixels across.
- Gray on gray icons.
- Title bar is totally unused. Compressing everything else into one line and then just leaving ~20 pixels completely empty seems bizarre.
- Bizarre layout in the options menu.
Everybody is trying to out compress each other, and making worse and worse interfaces as a result (the above are in height order, not time or usability). You are not building a better mousetrap, you are building a smaller mousetrap, and it will stop catching mice.
More than 25 years were spent with the “standard” UI layout (a menu bar with file, edit, view, etc.) and if compression was ever needed, it was needed back in the days of 800 by 600 monitors, not in today’s HD world. The reason everybody stuck with it, and most programs still stick with it, is very simple. It Works.
Let Buttons Be The Correct Size
Google, stop it. You are making buttons bigger, and putting smaller text in them. I don’t mind losing a little browsing space for some more useful buttons, but taking it away to make room for empty space and smaller text? Have you lost it?
Remember the big difference between PCs and tablets is a fast and accurate pointing device. Bigger buttons with more space between them is good design on tablets, but very bad design on PCs.
First Offender: Gmail
Other Offenders: The rest of Google, Windows 8 when it comes out.
This is the classic Gmail look:
- Nicely sized and spaced buttons and links
- All text is either black or blue, and easy to read.
- Text size is the same or bigger than the new look.
- Only 178 pixels from left side of screen to mail.
This is the compressed new look:
- Larger gray on gray buttons with smaller text are harder to read.
- 220 pixels from left side of screen to mail.
- Left links have too much space between them.
- Less space for mail.
Note that for the pixels between words measurement, I went from the bottom of the buzz icon to the top of the starred one. Spacing on the old one was five pixels, the compressed new one was ten pixels, and the uncompressed new one was 12 pixels (the only difference between the two).
If you compare new Gmail in Chrome to old Gmail in Firefox 3.6 you only get to the mail 13 lines earlier in the new one. I think the left hand isn’t talking to the right hand here.
Let Developers Come to Their Senses
I wrote this to make Google and Mozilla to come to their senses. I wrote this to dissuade others from following their examples. But most of all I wrote this because of Windows 8.
Microsoft needs to understand that PCs are not iPads. Developing a full PC OS with tablets in mind, and making it the only choice for PCs, is insane. Make a Windows 8 Tablet Edition, please. But also make a standard edition that doesn’t have a UI built with big buttons for touchscreens. Make a version specifically for the 99% of Windows computers that are not tablets. Make a version for people who don’t want to learn a new UI, and are very pleased with the one in 7.
In short, if you make an iPad killer the only choice, it will kill the PC market too. Remember what happened with Vista: you made an OS most computers could not run optimally. The only difference is that now you are making an OS that most people cannot use optimally. The result will be far, far worse.
So to browser makers, web designers, OS manufacturers, and anybody else who deals in UI: Remember that less is less and more is more. Remember that standard button sizes and menus have worked for 25 years. But most of all Remember The Alamo Your Users. Please.
Subscribe to:
Posts (Atom)