Make design work for you

By Bart Jutte

As a software consumer the following experiences may be familiar to you: you download a program, but have no clue what it does. You want to perform a certain task with your software, but you get stuck in the process. You discover a great feature in a program you have used for ages and wonder why you have never seen it before. Yet another program clutters your screen with unnecessary items and makes it look like the contents of a garbage can.

All experiences above have in common that bad design prevented software to reach its full potential. If you want to prevent such bad customer experiences for your programs, make sure you pay attention to your product’s design. Also a recent study* showed that good design increases your company’s turnover and profitability. It may be possible to charge higher prices in some cases and support costs can be reduced. Most importantly is that good design makes your customers more productive and gives optimal satisfaction. It enables them to achieve their goals in an efficient and pleasant way. Sounds nice, right? Lets take a look at your product and see how we can make it look better be more and profitable.

Basically, design can improve your program in three areas: the functionality, the usability and the appearance or aesthetics. Your design focus will be different depending on the maturity of your product, the product category and the competition. Games need to look really good, whereas business applications tend to focus more and more on usability.

The design process

Design -like your program- starts with the user. Write down what problems, needs and goals the user has that you want to fulfill and create a profile of the average user. What are his (or her) likes and dislikes, where does he live and work, what other programs is he using. This research provides insight in the expectations your customer has, what kind of product identity your should strive for and what parts of the program you should stress with your design.

The next design phase aims at structuring your program. This requires you to answer the following questions: what tasks should the user carry out and what information does he need to do so? What elements belong together and what criteria or metaphors do you use to group them? This phase is critical, because it determines how your user will interact with your program to a large extent. Currently I develop a program for project risk management and my first thought was to structure the program based on the risk management process. This would mean that tasks like detecting, analyzing and monitoring risks are central in the design. However an interaction designer convinced me to use risk itself as the core element to structure the program. The design now shows the different aspects of risks like causes, effects and solutions. Individual aspects can be enlarged to perform tasks while still showing the context of the risk at hand. This view strongly increases the insight of a project manager in individual risks and relationships and enables him to effectively manage them.

Once you have your basic program structure, it is time to take a pencil and sketch a number of main pages of your program. Don’t run for your computer to start programming! A pencil and an eraser give you greater flexibility and keep you focused on the design part of the process. You can compare this stage with movie making. The main pages you draw are like the storyboards of a movie. Storyboards show what the different scenes of a movie look like and what happens in each scene. Your drawings of the main pages show what information a user sees, what tasks he should do on that page and where he can go from there. It also shows where information, tasks and navigation should be on the screen. Your next duty is to arrange the pages in an order that makes sense to the user. You’ll find the main streets and small paths through your program. The design should stress these main routes, tasks and information. In case users with very different profiles use your program, it may be necessary to create a flexible design that can accommodate their different needs.

The last part of the design process is most visible to users. It focuses on visualization, the look and feel of buttons, colors, graphics and letter fonts. Good visualization strengthens and enhances your work of the previous phases. If you create graphs you can learn a lot from the work of Tufte. One of his key recommendations is to present interesting data, data that are meaningful to the user and allow him to get as many ideas and insights as possible in the least time. Another recommendation is to maximize the data-ink ratio, in other words to get rid of unnecessary items like 3D effects, grids, fancy icons or double data. Tufte also stresses the importance of graphical integrity, showing graphs that reflect reality. This means your graphs should have clear unambiguous labels and data like they were measured without taking them out of their context.

Designing in this article may appear like a one way street. In reality you go back and forward between the different phases as the work progresses. The designer Garrett provides a framework that can help you to know on what part of the design you are currently working. His framework distinguishes tasks from information and has five layers that go from abstract to concrete. It was originally developed for websites, but is useful for programs as well.

Who should do the design work?

Most developers are analytic and good at getting the IT and content of their products right. Design requires a different skill set that includes a mix of creativity, visualization and fashion. Therefore it might be a good option to a get a designer to do the work for you. Unfortunately this is not a free ride. Designing a program from scratch will cost you at least a few thousand dollars. If you can not or do not want to invest this, consider alternatives like students from a design academy or doing some IT work for a designer instead of paying in hard earned cash. Another alternative is to steal with your eyes. Check out programs that are really working well or look great, find out why this is the case and translate those solutions to your own program.

However, assuming you want a professional to do the job, how do you get the most out of your design money? Start by preparing a good briefing! what problems should a designer solve, what questions need to be answered. Also describe your product, provide names of competitive products and set strict criteria the design has to meet (windows look, platform limitations etc.). Be aware! Designers have the tendency to go for beauty, but you have to make sure you can still program it in a reasonable time.

The second step is to contract a good interaction designer. Seriously consider to do this early in the development cycle. Designers are used to discuss ideas and concepts and don’t bother if it is not yet clear what the end result of your efforts will be. Instead they trust that the creative process they will experience with you, will bring the required results. Bringing in a designer early on also has the benefit that changes are easier and less expensive. While selecting designers make sure you check their previous work and background. Most designers have their own style (although some will deny it) and their previous work gives you an indication what you can expect from them. If you talk with a couple of designers, simply ask them how they would carry out your design assignment and how they would solve a particular problem of your product. This way you get some free advice in the process! However more important is that you gain insight in the way a designer works, his preferences and work experience. You will also find out if there is a personal ‘click’ between the two of you, a necessity since you need to work closely together.

Once you have chosen a designer the real work starts. The designer will discuss the nature of your program with you and try to find out what it aims to do for its users and translate this input into a clear interaction concept. Your task is to clarify things, discuss ideas, provide feedback and make timely decisions. When interaction concept is ready the remaining task of a designer is to make a detailed design and create the nice colors and logos we see on our screens everyday. Be aware! This may require a second designer who has specialized in this.

Improving existing programs

Most ASP members sell a number of programs. Looking at them from a design angle generates ideas to improve them. A logical option is to talk with your customers or watch how they work with your program. However, another possibility is to test the consistency of your program, a key element in usability. Keep in mind your latest program and test its consistency by checking the following aspects that make up a consistent program.

Internal consistency: similar design issues are solved in the same way. Suppose your program needs to display a lot of information that does not properly fit on a single screen. If you solve this by using tabs, apply these throughout the program. If you use another approach like panels or scrolling stick to it.
Task consistency: similar tasks in a program are performed in the same way. A user that needs to import data in different parts of a program for example, should be able to do this in a consistent manner. The same applies to the steps to perform a task.
External consistency: a well designed program is consistent with its environment. This could be the product website, screen shots and other marketing material. Another aspect is the tradition and culture of the customers. A program for the shipping industry will use very different words and symbols than those used in an action game. The question you need to answer is how well your program reflects the customs of its user group.
Dialogue consistency: people get confused if tell the same message in five different ways. Make sure your dialogues have the same structure (syntax) and use simple and natural language. This sounds easier than it is and may require a lot of effort. Feedback and corrective advice are another type of dialogue you need to provide. Omitting feedback on important user actions and techie language are a real turn off to customers.
Functional consistency: meaning and action should be consistent in a program. If you use a certain arrow to go to next page but sometimes to cancel an action, you are sure to cause confusion. Also using red numbers in a financial program to show a profit is the perfect way to alienate your audience.
Platform consistency: a program is more consistent if it complies with the standards of the platform it works on. Windows users are accustomed to opening Help by pressing the F1 button. Also Microsoft has defined a number of standards and best practices for things ranging from colors to the lay-out of screens and look of a drown down menu. Adhering to platform standards makes your program easier to use and will help your sales.
Application consistency: a big company like Adobe sells a lot of programs, but somehow you always recognize one of their programs once you see it. You should consider to create this kind of consistency if you sell multiple programs aimed at the same target group.
Aesthetic consistency: paintings from Picasso or van Gogh have a characteristic style. You can design your own style an apply it throughout a program. This style will be reflected in design elements like icons, layout, colors and graphics.

If your software is consistent on all aspects mentioned above: congratulations! Design really plays a key role in your company and products. If not, don’t worry: you have found a number of approaches that can improve your product. Success with your design efforts and may it lead to beautiful programs and lots of happy customers.

Make design work for you

The design process

Who should do the design work?

Improving existing programs

Further reading