Simple Technology 2: Ten Rules for making simple GUIs

In the last Simple Technology post, I ranted about how technology lacks the ability to be easy to use. In this post, however, I am going to talk about how to make your programs easier to use.

I am a high school student stuck in a community that has trouble using computers. So essentially, I have to learn how to make everything easy for them. I do this by looking at how the other students do their work day to day. Several things are programmed into their mind that get forced to be changed whenever they start to use computers. Wouldn’t it be easier to use these rules they already have programmed in their minds instead of rewriting them? Anyways, here’s my rules. Some may know them, some may not. Some are essentially given, some you would never have noticed.

1. Upper left corner Always start from the upper left corner. People default to looking in the upper left corner of a page to start reading, so why not do that here? Put the most used features of the program here and put the least used on the bottom right of the screen. Upper left and screen center are the main areas of focus.
2. Colorization Ever wonder why blue is the most common color on the internet? Of course it looks neat, but that isn’t the only thing I notice. It’s far away from most other colors that can be concerned with problems. Red is thought of as errors. Yellow (well, more like amber) is thought of as caution. And green is mainly associated with the earth or grass. So essentially, use red when there is an error, amber when you want to emphasize something, and then typically blue for the rest.
3. Keep it organized I go onto windows and as I have 60+ programs installed, it gets confusing looking through the start menu as it is all under one major category, All Programs. I then go to Linux where I have over 100 programs installed and it’s easier to find them as they are all sorted into categories. So essentially, try to group things together. Not into rows, but into small groups. When reading rows, one will typically notice that there is plenty of chance to accidentally skip to the next row (that’s why toolbars are terrible in my taste). Group them into small groups along the top and have probably 2-3 rows in each group. Watch how much easier that may make the program.
4. Clicks The less clicking needed to do something, the better.
5. Do things for them Add in features to do stuff for them. One feature I would find nice in Firefox would be to actually pull up the pages that I view obsessively and display them as my homepage.
6. Easy access toggle buttons Less click of course. Bold, Italic, and Underline are good examples of this in most word processors.
7. No Mess Hardest part to balance out. I’m saying keep it organized and use as few clicks as possible. Now I am saying try to keep the screen clean. This is one that cannot be taught, but has to be done via trial and error. Every program has a balance between screen clutter and organization, so try some experiments and tell me how this goes. Note, auto hide is not good in this case as it gets annoying having to hold a mouse in the same spot to get something working.
8. English Ok, the following terms should not be used in a program targeted for the general public. Anything that you say in chatrooms like Ubuntu or anything. Stick away from advanced computer terms (higher than “click here with the mouse” or “press the key F1″). There is something called English (or whatever native language you use), use it. And yes, this means that you cannot use even simple terms like CPU, RAM, OS, GUI, etc. Replace “Loading” with “Please wait”
9. Help text Simple, use the text that whenever the user hovers the mouse over the button or item for a second that it pops up with a small notice. Easy?
10. Test it Best way is to get a group of about 30 people who would have use for this program. Best if it is just everyday people, not your friends. Anyways, have them sit down and tell them to try your program out. Watch how they handle it. Have them write down what they had trouble with and watch to see where they have trouble. When they have trouble, you need to take a look into how to fix it, not tell the person “You do it like this…”

There are 10 basic rules. Sorry if these are disappointing, but they are the first things I can think of for how to make simple GUIs. I’m now trying to work on a couple more rules for a follow up post.