Archive for the 'GUI' Category

There are two common ways to describe a sequence of key pressings in your software help documentation:

The first one is like this

Press Ctrl+Shift+F to flag the record.

The second one is like this

ctrl_key.png + shift_key.png + letter_f.png = Flag the record

If you prefer the second approach then these two resources will be helpful to you:
Clipart: Computer Keyboard keys
Free keyboard fonts at FontSpace

Have a great day ahead!

In this short post I’d like to share a real case of user interface improvement that we implemented in the upcoming release of the Dr.Explain 4.0.

In previous releases of the Dr.Explain we had a problem - much of screen space on the top of the application window was not used effectively.

Before (old versions of the Dr.Explain):
Old version

We reworked and united the toolbar and tabs to eliminate the unused space. Here is a solution:

Now (Dr.Explain 4.0):
Current version

With the new design users have more space for work, not for application buttons.

Check if your application interface has unused areas that might be used for real work.

This year our Dr.Explain help tool team is proud to be a sponsor of The Conference for Software User Assistance by WritersUA.

The focus of the Conference for Software User Assistance is on developing the best possible user experience for all types of software applications through well-designed interfaces and helpful and accessible support information. The Conference includes over sixty sessions Sunday, March 21, through Wednesday, March 24.

The Conference for Software User Assistance

Success in improving the software user experience depends on applying the right skills and technologies to maximum advantage. The conference targets this need by providing an array of sessions demonstrating effective techniques, case studies demonstrating best-in-class designs, technology updates, and much more.

This year’s Conference features seven interest areas with information on:

  • Emerging Skills
  • Technology Updates
  • Design Strategies
  • Tool Techniques
  • Content Development
  • Open Standards
  • Special Interest

Registration is open! Early discounts in Effect!

Does my application need a colorful bright interface with amazing icons, animated skins and cool sound effects?

First, think about how much time does an average user spend working with your application per session and what does he use it for. If user spends more than 20-30 minutes per session within your application (which is not a game of course) then he might get tired of all these bells and whistles very quickly. The best GUI is the one you don’t even think about. It must be invisible and just lets get on with your job.

Think why Adobe Photoshop is gray like a dirt. Because, it must not divert designer’s attention while he is working with own image documents. Gray is one of the most invisible colors.

For example, we used this principle in our TBS Cover Editor - 3d box shot maker application.

3D Box Shot & Cover Maker

Our first intention was to make a smashing GUI with the coolest effects ever. However, we stopped on a plain almost monochrome interface in order not to bother users with our coolness but let them fully concentrate on their box shots and cover designs.

Think if your GUI is invisible.

This is a short and simple plan for quick testing final release of your software application before making it public. Just not to overlook something trivial but very important.

Texts

Spelling: Check all text labels, menu items, hints and messages for typos.

Version: If you don’t increment your version or build number automatically during compilation then don’t forget to change it manually before final compilation.

Copyright: Check if the copyright year is the same as the current year.

User Interface (GUI) appearance

Large fonts: Test your application with Large Fonts (120 DPI) set in Windows display settings. Are all controls properly aligned and visible?

Different screen resolutions: Try your software under different screen resolution. Start with 800×600.

Positions: Check if all controls on your forms are positioned properly.

Icons: Test your application icon in all common sizes and color depths: 16×16, 32×32, … 16 colors, high colors, …. Does it look clear and smooth?

Basic operations

Keyboard support: Many people prefer keyboard to mouse. Is your application keyboard-friendly?

Tab order: Recheck the tab order of your controls. You may break the right sequence during GUI redesign.

Hot-keys: Are all common hot-keys supported?

Hot-keys activity: If some operations in menu or toolbar are disabled, are the corresponding hot-keys disabled also?

Double clicks in lists: In some forms, if you ask users to select a list item then check if double click works like single click+OK.

Data entry and storage

Editable drop downs: If you ask users to select a predefined value from a drop down list (combo box) and you allow only options from that list then you must check if the drop down’s edit box is read only.

Spin box and sliders limits and steps: Recheck all spin controls and sliders for valid minimum, maximum, and increment step values.

Spin box arrows: Verify if Up arrow button in spin box increases the value and Down arrow button decreases it, not vice versa.

Data type mismatch control: Check what happens if you enter unexpected values in data input fields, for example, a character string in a numeric field or a negative number in a field for positive numbers only.

Long strings: Enter very long strings in data fields and test how your software will handle it.

Empty strings: What will happen if user leaves some important fields unfilled? Will your program continue working correctly?

Clipboard operations: Does pasting objects of different media types from clipboard work properly in all fields? What happens if an image or rich formatted text is pasted in edit field?

Weird characters: Test if your software works and data remains valid if there are unexpected characters in input strings or files, e.g. new line character, tab, diacritic symbol, copyright sign, non printable characters, etc…?

Unicode and multi-byte languages support: Will non-English people be able to enter data in national languages and encoding: Arabic, Hebrew, Hieroglyphs, Cyrillic, Greek, …?

Local formats: Check if your software works correctly if user has different date, time, currency or numeric format: e.g. dd-MMM-YYYY instead of mm/dd/yy, or nn,nnn.nn instead of nnnnn.nn.

Debug options

Debug mode: If you develop in MS Visual Studio, for example, then don’t forget to turn off the Debug mode before final compilation and test your application built in Release mode. Some bugs, like memory buffers overrun, may appear only in Release mode.

Debug logs and dumps: Don’t forget to turn off all debug log or trace files.

Debug messages and alerts: The same here. Turn off all debug message boxes and alerts.

Foo data: Change all “foo”, “John Smith”, “Preved medved”, or “Loren ipsum” data to blank or actual values.

If you have ideas about other important points to check then post them as comments please.

Dennis Crane

User Interface Improvements: Assistance

In this post I continue writing about some simple practices that will help you quickly improve your software GUI. In the first post I wrote how to position your GUI elements properly. Before I started to write this post I had been thinking how to name it. I’m not writing a comprehensive guide on usability and user interface design. I’m simply writing my observations and thoughts about some practical aspects of GUI design. It’s hard to divide my advice into exact categories with distinct names. I named this post “Assistance”, because I will write about some tricks that will assist users to feel comfortable with your software.

When user works with your software he needs just a limited set of essential functions and, in the same time, he wishes all important functions to be easily accessible. Therefore, as a designer you must keep minimal both the number of visible functional elements and the number of mouse clicks or key pressings to perform an action. Let’s look at the examples.

Continue Reading »

Dennis Crane

User Interface Improvements: Positions

As you may know, before I founded Indigo Byte Systems in 2004 I used to be a senior developer in a mid-size software development company. I dealt with various projects from hardware drivers, to Web applications, to distributed corporate systems. Nowadays, I also teach students the programming methods at the IT department of Samara State Aerospace University. So, I test and evaluate various software applications every day. I see that many programs by different authors have the same problem. That problem is GUI, Graphical User Interface. Designing usable and clear interfaces usually requires significant efforts and experience. Nevertheless, often I see things that authors may improve just in minutes and make their programs looking more professional and attractive.

That is why I decided to write a series of articles devoted to GUI quick improvements. In the first post I will write about how to position the GUI elements properly. As English is my second language I will follow “Less words, more pictures” principle in this post.

Continue Reading »