Being a regular user of StackOverflow, I was constantly being haunted by some of the small design issues in the website. Look at the screenshot below (click to enlarge):
I have this problem that I get really confused when visiting websites with a lot of stuff. Even though I have been to StackOverflow a zillion times, I still get distracted by the colors used in the website. (Of course these things are really subjective). I downloaded the style sheet and edited it. Here is how the site looks now (for me):
Here are some of the changes:
- Removed the background colors for the statistics (view count, points etc)
- Reduced the font size of the stats thereby making them less noticeable.
- Round cornered some tabs, tags etc.
- Removed the points displayed near the users name. This is not very useful and removing it cleaned up lot of clutter.
I am thinking of making some more modifications including stacking up the stats one over the other and making the tags for each question less intrusive. We can do away with a lot of stats in the page since most of the users are not very much interested in those minute details.
You can download the Greasemonkey script for this theme here.
When you start implementing the layout of a website using CSS and HTML DIVs, you will inevitably come across the following problem:
How do I force two columns to be of the same height?
You want to get something like this:
But whatever you do, you are not able to extend the sidebar till the footer. You end up with something like this:
Many have suggested using some tricky CSS techniques to get around the problem, while in fact none of the techniques work perfectly in all cases. It is tedious to make these methods work in many situations.
Some have suggested techniques such as tiling a background image to give a false impression of long columns. This technique is called faux columns. This hack almost works, but you know – it is a dirty hack too.
People always despise using a JavaScript based solution for this problem. I don’t know why, but let me tell you the truth – a JavaScript based solution for this problem is not worse than any other solution. In fact if you are using JavaScript, you may save a few hours of frustration of trying to get things working. People will warn you against this by saying “What will happen if the user turned off JavaScript?“. Believe me, if the user has turned off JavaScript, most of the web is broken for him anyway. Your sidebar does not matter to him. Don’t pretend like it does.
Here is how you can get around the problem using JQuery:
Put something like this in your ready event handler:
$(".sidebar").height(Math.max($(".content").height(), $(".sidebar").height()));
That’s it. Now start getting things done instead of tinkering with all these small details; and quit trying to use CSS to to solve every crazy problem.
Opera is once again set to screw up its UI in the upcoming version 10 of the web browser.
Granted, that the new iteration of Opera is faster and bloasts loads of new features, but the UI is still such a mess to look at. See for yourself:
This is the default theme named Opera Standard. Couldn’t be uglier.
The last time I wrote about it, the interface was much better!
There is another themed named Windows Native which is bundled with the application. Even though it does offer a more native UI feel to Opera, it leaves a lot more to be desired too:
How can a major player like Opera ignore the usability point of its products? What makes them think that they can fool around with the UI in every new version? I cannot undersand.
It is time Opera starts analyzing the relation between user friendly user interface and market share. Opera is now a distant fifth behing IE, Firefox, Safari and Chrome in browser market share.
Every one of us have experienced the bitter taste of a message box staring us at when we try to accomplish some task with our software. Message boxes are used to convey some information, usually thought as important information, to the user and ask him to act upon the information. For example, look at the screenshot:
What is the need of such a dialog box? The user wanted to add the information to the registry. That is exactly why he initiated the process, and now the application shocks the user with a message box accompanied by “ding” sound and blocks all other activities until he clicks OK button.
There are many versions of this UI irritants:
(Update: My mistake. Getting a message box from registry editing was a wrong choice. I should have taken the screenshots from a simpler application. Many people in reddit are already bashing my idea. Registry editing is indeed very important process and alerting the user is necessary in very critical applications.)
Here are some reasons why I hate message boxes:
-
They makes the user think and take a decision (users hate this).
-
They block all other activities in the application or even the operating system until an action is taken.
- They are accompanied by weird sounds.
- They steal focus from what user is doing and this may lead to data loss in some situations.
So what are the alternatives?
First, Don’t make me think. Don’t ask questions. Just do whatever is appropriate at the moment. Don’t ask me if I want to save a file or not. Just save a version in my drafts folder. The next time I open the application, allow me to navigate and edit my drafts.
Second, don’t throw unwanted information at me in the form of message boxes. See how Gmail tells “Your message has been sent”:
It gives the information without annoying me. Very good.
WordPress does this too.
Many great applications are adopting this strategy.
The time is ripe for you to do away with those nasty message boxes in your application.
Design keys which satisfy two conditions. You will be selling these keys with your software. In the software test for only one condition. Users will anyway reverse-engineer your code and generate fake keys for your software, but these keys will satisfy only one condition that you checked for.
In your web application test for the second condition too. This way you can find illegitimate keys and block illegal copies of your software from auto-updating. You can also try to disable those copies.
You will have to blacklist even original keys which are being used by many users at a time (this happens when someone shares/publishes his key).
The Scroll lock and Caps lock keys are not much used by anyone anymore. (I am not supposed to use these words, it seems). Anyway what I intend to tell is that they are not used by many people regularly.
At least we all know what caps lock key is used for. What about the scroll lock key?
The scroll lock key is a remnant from the original IBM PC keyboard. In the original design, scroll lock was intended to modify the behavior of the arrow keys. When the scroll lock mode was on, the arrow keys would scroll the contents of a text window instead of moving the cursor. In this usage, scroll lock is a modifier key like Alt and Shift (which modify the function of other keys) and, more specifically, a toggling lock key like Num Lock or Caps Lock, which have a state that persists after the key is released. Today, this particular use of scroll lock is rare. Only a few modern programs still honor this behavior, such as Microsoft Excel (in the behavior of arrows — when scroll lock is on, the selection does not move), Lotus Notes and Forté Agent. In modern GUI environments, scrolling is usually accomplished using means such as scrollbars or scroll wheels. Therefore scroll lock can be regarded as a defunct feature in almost all modern programs and operating systems; some keyboards lack scroll lock altogether.
Here is the result of an online poll:
Many people are not using scroll lock key any way. Why not save some keyboard real estate by removing this key?
Even though some people with specific applications use caps lock key, usually people use the shift key for the occasional capitalization of letters. Many people are pressing for removing the CAPS Lock Key from the keyboard. There is even a google group for this.
What is the optimum solution? In my opinion, remove the scroll lock key, and move the caps lock key there.
Recently I came across a web application that had just two JSP pages.
What does it do? It takes a value from the user and displays his points based on the value.
And can you guess the number of back-end files used to help this process?
There were 23 packages, more than 250 java files, 13 properties files and a lot of XML files, in addition to the standard class/jar library files used in the project. Believe me, I am talking about a complete application that does not expect any dramatic enhancement in the future.
Don’t tell me that it is all about the Framework. That is what you call bad design. Especially when you can write world-class applications in 579 lines of code.
Use Struts or MVC or Spring or Ruby on Rails or anything you like in your application. Before that try using a little common sense.
