Software is not Jewellery

This is one of the funniest error messages I have seen in a long time.

[The name of the software developer removed]

Here are some standards that most users are accustomed to see in windows applications.

A standard menu bar. Keep the menu bar as standard as possible. Here is a standard menu item strip. Of course you will have much more in your menu bar. But here is the bare minimum.

File: New, Open, Save, Save As.., Print, Page Setup, Print Preview, Exit

Edit: Cut, Copy, Paste

Tools: Customize, Options

Help: Check for Updates, About

Display the opened file name in the title bar.

Ask for confirmation when the user deletes anything.

Ask for saving the active file if the user has unsaved changes.

A document processor (like Word or AutoCAD) should open a new file by default. A project management system (like Visual Studio) should not load any project by default.

While the user is to select an option use Radio button instead of combo boxes if there are only three or fewer options and if the number of options are not going to increase in the future. For example see the difference between the Hotmail User Sign Up form and the Yahoo! sign up form.

VS

Validate data only where the lack of validations will crash the application or make a feature unusable. For example validate all email ids in a mailing list app. Do not validate phone umbers in mailing list app.

Firefox 2.0 introduced a new feature. A spell check INSIDE the browser. This means that when you are writing a mail, you can check your spellings inside the browser. Most browser based email clients have a spell checker. BUT, because the spell checker runs only on the server, they need to send the content of the mail to the server, check for spellings at the server end and send back the suggestions. That takes some time. So having spell check INSIDE the browser certainly makes it faster for you. Like most spell checkers the Firefox spell checker also works by underlining the misspelled words and showing suggestions once you right click on the highlighted word. Here is the screen shot of the same

They have used the context menu to show the suggestions. One problem however is that the “Add to dictionary” is too close to to the suggestions. As you can see I would like to use “with” instead of weth. However when I am hurrying through my reply I may very well click just one item below what I really need. Because, the context menu will change in length for different misspelled words your hands cannot be trained to go to the right word with practice. You’ll have to pay attention every time you do this and are bound to make the same mistake more than once. In fact I just made this mistake 3 times before I decided to write this article. Also “Add to Dictionary” is not as frequently used as Undo or Cut or Copy or any other essential word processor features. They need to come before “Add to Dictionary”. Here “Add to Dictionary” should have come after “Select All” So this design violates two principles straight away.

Number one “Make it difficult to make mistakes”. Don’t keep the “Kill Me” button very close to “Make Me Rich” button. You’ll piss people off. Number two “Give access to functionality in descending order of usage”. Keep what the user wants 90% of the time, very very accessible. The rest you can keep it else where. In fact if you have features that are only for advanced users and will be used once in 3 million years “Hide Them”.

Now coming back to the Firefox spell checker. If you actually click on the “Add to dictionary” by mistake you will want to undo it. I write “freind” 80% of the time and correct it to friend using a spell checker. If I add this word to the dictionary, next time I misspell it, I wont be able to SEE that I have misspelled a word. So, I want to “Remove from dictionary” this newly added word. Or I may be sending emails with embarrassing spelling errors! Unfortunately, THERE IS NO “Remove from dictionary”.

To remove it, I had to go to

C:\Documents and Settings\ [user name] \ ApplicationData\ Mozilla\Firefox\ Profiles\ 7akrcydl.default

and remove it manually from “persdict.dat”. I did not have to spend much time searching for the solution on the web. (Which probably means that many other people had this problem too). But I bet most users will never figure how to do that until somebody actually shows them how to do it. Accountants, Architects, Business Men don’t know (and should not know) where the Application Data folder is. In fact that is why Windows hides it by default.

So here we are at another postulate for User Interfaces. “Don’t play with user’s data”. Don’t handle user data in a way he does not understand. Always provide him functionality to edit, undo, redo or if possible even to recover his data conveniently.

UPDATE

Just discovered this. Look at how the Open Office Guys do it!

It is not so easy to add to dictionary here.

There are some issues here. Navigating across one view and the other is always a matter of choice. You see, there are lot of ways of navigating across a software. Some of them are

1.Menus
2.Nested Menus and Context Menus
3.Tabs and Tabs Inside Tabs
4.Keyboard Shortcuts
5.Tool Bars

Right now I cant think of any other way one can navigate across applications. But I bet myself a hundred bucks, there are plenty of them. So you got to think, what will you use for navigation. You choose one of them. Why? what are the advantages? what looks better? which is easier etc etc. You’ve gotta think it all out. For example, you see if you are using a menu and only a menu to navigate across an application, you’ll need at least 2 mouse clicks to get to some other page, one click on the menu and the other on the menu item that names the page. Take a look at this scheme at flickr

Here I click on Contacts then I can see all these pages Latest Photos, Contact List, People Search, Invite Your Friends and Invite History. Then you choose one of them and you go to that page. There is also a Nested Menu where menus are built inside a menu item. I don’t really know what purpose they serve other than just giving access to a lot of functionality.

But menus can be irritating when you are moving from one page to the other very fast. For instance, when you are surfing the net. To solve this Mozilla introduced Tabs. It was great success. I am not sure if they were the first guys to realize the importance of a Tab but anyways, have a look.

Here you need only a single mouse click to navigate across the different views. That is very good when you are flipping through information at a very rapid speed. Surfing the net is a great application for that. If you notice, Mozilla has both menus and tabs. And different navigation items give access to different functionality! The Tab thing caught on so well that even Microsoft started using it in IE 7! Whats more people started using Tabs inside tabs. Check out this wordpress interface.

Here one has lot of child tabs to parent tabs. So to get to Manage->Categories, you’ll have to go to Manage first, the default Tab i.e. Posts will load first and then you get to Categories. The problem with this is that since every Parent tab WILL have a default page, the software loads two pages before you get to the page you really wanted. But let us say that 90 percent of the time, you need the Posts page in the Manage parent Tab. Then this this is OK. Not the most efficient, but OK. In such a case Menu always works better.

Of course there are also nested menus and Context menus. Here is a nested menu.

Apart giving user access to functionality they are not going to use so often, I don’t seen any other use of these. The point is you have a software with a lot of features, Microsoft Word for example. And you have to give the user some kind of access to that functionality right. And you cant cramp all of it in one menu. So you use a nested menu.

And finally the context menu. A context menu is nothing but the the menu that pops up when you right click on something. Depending on where your mouse was positioned during the right click, you give access to different functionality. This is a cool idea. In Windows if you right click on your desk top, you get this.

However, if you right click on a item ON the desk top, you get this

So depending on where the user has clicked, you can give him access to different functionalities. This is a very powerful way of deigning useful User interfaces.

I think.