Graphical User Interface Design

login

Currently, we are working on building a new desktop application. It all begins with good planning and beautiful design. Here are four steps with tips that will help designers design a successful application.

1. Structure
The application design should organize the user interface purposefully. All elements of the design should have meaning and be useful. The structure should be based on a clear and consistent model that is recognizable to user. The application structure should be organized so that related things are together and separate unrelated things. The structure is concerned with the overall user interface architecture.

  • Planning the Structure
    A good way to keep the application design organized and structured is to plan ahead. Start by writing an outline of all of the functionality of the application. Then create simple wire frames for the whole application. This will save you time and allows the designer, developers and client to see the big picture.

2. Simplicity
The application design should be simple. The design should make common tasks simple to do and communicate clearly to the user. Here are a few design tips that can help create simplicity:

  • Consistent Design – One of the biggest mistakes with designing an application design is creating elements that are not consistent. Keeping a consistent style throughout all elements within the application will make an user-friendly application with a successful design. The application design should use consistent component styles and behaviors. Creating consistency through out the application will reducing the need for users to rethink and remember.
  • Choosing Color – Color should be used sparingly in applications. The problem is that some users may be color blind. If an application uses color to highlight something on a screen, then you need to do something else to make it stand out if you want these people to notice it. The colors in the application should use contrast and be used consistently throughout application.
  • When deciding on a consistent set of colors to be used throughout the application do not forget about branding. If the application is for a company that has branded colors use the branded colors. If you are starting from scratch you have more freedom. The application should not look like a rainbow of colors. Think of three to five solid colors that you will use throughout the design.¬† For example, on the following application design the branding of this company uses red and black. Throughout the application we have used different percentages of black to white. Here are the percentages of black colors we used:
    100%, 90%, 85%, 60%, 40%, 30%, 10%, 0.
  • For the highlight and rollover color the application uses¬† a gradient with a bright red and regular red. On the down state it uses a regular red and a dark red gradient.

typography

  • Typography – For readability you should pick a sans-serif typeface with a regular/roman/medium size and a bold that is easy to read. For a general size of the font for readability you should not go below 12px for text. 12px to 14px is easy to read for labels, data grids, text inputs, and any additional content. Panel labels and titles should be larger than the main text so they stand out.

3. Visibility
The application design should keep all needed options and materials for a given task visible without distracting the user. Good designs do not overwhelm users with too many alternatives or confuse them with unneeded information. Crowded screens are difficult to understand and are difficult to use. Here are a few tips on creating a strong sense of visibility:

  • Determine Hierarchy – The visual hierarchy of the application design is important for the user. Think about what is most important and least important. The most important items should have the most emphasis and the least important should have the least emphasis. If the hierarchy and layout is designed properly the users eye should move around the application from the most important to the least important. If you do not have strong hierarchy this may make the user confused. Hierarchy can be achieved by creating contrast, size, positioning, and color.
  • Spacing & Alignment – Do not waste space. In application design space should be used wisely. Align fields effectively. When a screen has more than one editing field, you want to organize the fields in a way that is both visually appealing and efficient. This example uses labels that are left justified and the edit fields are left justified. This is a clean and efficient way to organize the fields on a screen.

alignment

4. Feedback
The application design should keep users informed of actions. This can include errors or a changes of state in the application. Use clear and concise language familiar to users. Expect the users to make mistakes. The application design should create a user interface that the user can recover from their mistakes.

feedback1feedback2

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.