Designing Windows User Interfaces
Posted On May 8, 2015 by Geeta Priya filed under Enterprise
The author presents some basic guidelines for developing user-friendly Windows applications. Learn how to design Inductive User Interfaces and make it easier for a user to navigate through the application.
In the past two months you must have already been through the tutorial series on C# programming in DeveloperIQ. Here, I am attempting to take those lessons a little further as quest for knowledge is insatiable. The first point to give attention when you are developing Windows application is aesthetics and simplicity to learn the User Interface. Before going into the other details of Windows application development, I would like to introduce some concepts of developing a ‘usable’ User Interface. In the coming lines, I will try to figure out the general guidelines of an intuitive User Interface.
Have you ever tried to figure out the mindset of your user? Here are three major points why a user may consider your software as hard to use:
- User is not really concerned about the application’s conceptual model: You might have followed a nice concept throughout your application, but does it help your end user to accomplish her task. It’s not like your users are dumb. The fact is that they are inundated with daily routine and information. They don’t have time and energy to understand the conceptual model behind your great software.
- Most users don’t master common procedures: While developing a new feature in your software, you thought that the user would get used to that feature over time. But according to one study, users do not really notice the procedure when they are accomplishing one task. They may stumble while doing the same task at some future point.
- Users face the problem to find the purpose of a screen: You developed software for a user who has mastered the common procedure and conceptual model, but for a majority of users each screen would be an unwanted puzzle.
The best solution to deal with these problems is to develop a UI that is easy to learn and self-explanatory. Users must be able to find out the feature every time they need it and they must be able to use that feature every time they want to.
Deductive User Interface
Nowadays, most software force their users to infer the purpose of software. For example look at the screen in Figure-1.
Experienced computer user like you and me will come out saying – “oh, this is a simple screen to add some items to a list box”. And other buttons are there to further give some sort of functionality to this screen. But did you notice one thing about the screen? Nowhere is the purpose and behavior of this dialog box mentioned.
Now just slide yourself into end-user’s shoes. You will find her asking one obvious question, “What should I do with this dialog box?” One another big irritant is - when this dialog box pops up, the user has to stop her current work and find out what this screen will do for her. A normal end-user may try to type directly in the List box as it appears like a normal Edit box. End users will be detracted from their usual task when they have to figure out the behavior of screen. You might wonder why a user can’t figure such a simple task. But according to studies, most users are even confused about the capabilities of their software. They have difficulty understanding what the product can do for them, where to go to perform an operation, and how to perform that operation once they have found it.
The most basic solution to come out of this issue is the Inductive User Interface (IUI). IUI's goal is to reduce the amount of extraneous thinking users must do to successfully move between parts of a product and use its features. The word ‘inductive’ comes from the verb ‘induce’, which means to lead or move by influence or persuasion.
You can define IUI as an extension web-style interface, where each page has to be simple and task-based because each piece of information has to be sent back to server and it should be correlated to the primary task of that page. A well designed inductive interface help users to find answers to the following two questions:
- What am I supposed to do now?
- Where do I go next to accomplish rest of the task?
A screen with a single, clearly stated, explicit purpose is easier to understand than a page without such a purpose. This fundamental premise can be expanded into a series of four steps for designing software that uses inductive interface:
- Focus each screen on a single task.
- State the task.
- Make the screen's contents suit the task.
- Offer links to secondary tasks.
Going forward, we will try to change our dialog box of Figure-1 to suit the above four points. How?
Step One: Focus each screen on a single task. Each of your screens should be based on one primary task. Now, how will you come to know about the primary purpose? You may express a bunch of tasks as one task, if they are abstract enough to group as one. So, here is the rule of thumb; a screen is focused on one purpose if the designer can express that purpose with a concise, meaningful, and natural-sounding screen title. In our example we can define the primary task as “Change Item Details”.
Step Two: State the Task. Each of your screens should have concise and explicit statement of its primary task. As we have mentioned already, it is “Change Item Details”.
Step Three: Make the screen’s content suit the task. Did you interpret screen content as the text that you will put on the screen? No. It’s all about the controls that you are going to have on your screens. Controls on screen make the content of your screen. User should be able to easily figure out how to achieve their task. For example, if you see, now our dialog box (Figure-2) is having “Remove” and “Details…” buttons enabled. This facilitates the user to click on these buttons rather than wondering when they become enabled. By doing this, you will have a much more impressive effect on the user when she clicks one of these buttons without selecting any item in the listbox and alert her that she first has to choose one item from the list. Another thing is to provide a clear exit to the user, when she is done with her job. Don’t try to retain her on screen with a message that says, “You HAVE to add at least one item”. If she wants to exit the screen, let her do that. Being an intelligent software developer, take care of such scenarios in your code.
Step Four: Offer links to secondary tasks. Do you see our “Details…” button? In our modified dialog box it is enabled and provides the link to one secondary task. By clicking this, user can go to the next screen. Then it depends upon you, how much functionality you are giving her in the next screen. However, make sure to give a clear exit option from the next screen too, and that screen also should follow usability guidelines as much possible.
We are through with the basic guidelines to design Windows Applications. Besides this, you should also keep consistency throughout your screens as far as controls, font, size, placement and their grouping goes. Use color contrast to enhance user’s experience; not to damage his confidence in your software. For example, Green text on Red background may look great to you, but just think about a user who is colorblind. Hope this discussion benefits you to develop your next great application.
The author is a software professional and can be reached at firstname.lastname@example.org