View this PageEdit this Page (locked)Attachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

Small tips to make more intuitive designs

How to make a better User Interface (UI)?


This course is basically teaching how to design a better program. Diagrams, CRC cards, responsibilities and codes are all very important elements of building a program, but a program is usually not for programmers’ joy. They need to be used by users. Thus, when we are making a program, we need to make UI intuitively. Even if your algorithms and contents are perfect, if no one knows how to “use” it at the first glance, it is useless. I personally think a good UI is the one does not need a manual to explain which buttons are for which functions or where should I click to do something. Based on the experience, I want to point two bullets to make your design more intuitive. These look simple, but are very easily overlooked.


1) Use consistent words to describe the buttons
We are team based course and everyone has different word choices. However, it is very important to make them consistent. For example, assume that a student A made a toDoItemEdit screen and a student B made an eventEdit screen. Both might need some buttons to leave and return to the previous screen. However, if A made a button called “Leave” and B made a button called “Return” to implement the function, what users think? They will probably know those buttons mean same “Close” action, but can be a little confused, since both “Leave” and “Return” are not common words to describe it. This looks trivial, but it actually bothers users pretty much, and can be a crack of your well-made program.


2) Align buttons and any accessories at similar positions or sizes
When you make a program, you have to add many things on the screen. You have to add buttons, texts, lists, combo boxes, and some more. However, when you add, please be careful to locate them in similar positions. For example, there are two screens from one same program.


screens.jpg


The first one’s Close button is located at bottom right and the second button is located at bottom left. If both are two consecutive screens, which users have to open to save their calendar and Screen1 comes just before Screen2, the user might expect to click the button on the right after the first screen, and will click there unconsciously. However, since the button is actually located on the left, users will be somewhat surprised by the different position of the second Close button. Also, because sizes are all different, users will feel somewhat inconsistent and uncomfortable when they need to close windows. You have probably seen such programs, so recall the feeling of annoyance at the time. Although it does not matter much to programmers, users do not like them. Remember that users are “consumers” and if consumers get angry, nothing really good happens. Thus, to make a more intuitive design, it is important to care about these trivial, but very annoying, points.



Link to this Page