As most of us indie developers don’t have such a designer at hands, we need to help ourselves. Indeed a simple design that is eye pleasing and carries a message isn’t that hard to create. It just takes some time and research. Wanna know how? I will tell you!

Five simple steps

Step One: Determine your Style

What is your application about? Do you make some kind of retro-game-remake, a web 2.0 application, a developers tool or maybe games for kids?

Write down what you product should feel like and what people you want to reach! Extract some keywords that would describe that style. Just like “Retro”, “Elegant”, “security”, “warm”, “scifi” or something like that.

Step Two: Pick a Main Color

Every colors carries a message, and you need matching ones to create a pleasing overall look. So which one should you choose? Sometimes it is not a hard decision, but if you have problems finding a direction you may want to have a look at this model from The Nature Of Emotions by psychologist Plutchik. In step one you determined what your product should feel like, try to find it in the model:

But I think you should not take it too serious, just use it as inspiration! You want your retro-pong game to have the retro-green-on-black look? That’s fine!

Step three: Get a color scheme

Got a direction? Now head to Adobe Kuler! It is a webpage that features tons of rated and tagged color schemes. Enter some of your keywords or search directly for your main color

I am sure you will be able find something nice!

Step Four: Pick a Font

The web provides an enormous selection of free fonts. My favorite site is dafont. Just enter your product title into the “Custom Preview” box and start searching for some of your keywords. You may also want to browse the categories. Get yourself a small selection of possible fonts.

Step five: Experiment

Fire up your favorite image editing application (If you don’t have one give Paint.NET a try. Now start experimenting. Try out your fonts, select different colors from your scheme for background and foreground. Start with just placing your products name and maybe some subtitle as centered text onto a plain background.

Here are some tips:

• Don’t use too much color on big surfaces. (including the background)
• If your title consists of multiple words: Try using 2 colors to get a highlight
• Try using a line as a separator
• Try using filled rectangles for separation
• Got some images that match your color scheme to use as a background? Great! Give it a try!
• Keep it simple! It’ll be great!

Two small Examples

A Retro Pong Game

This is a small example for a game menu. The style should remind of tech from past times, green on black terminals and such stuff.

I found the following nice color scheme on Kuler:

On dafont I looked through the LCD category and found these two

After some experiments I got this one. Well it’s nothing fancy, but I think it’s good!

A poetry website

Now to something completely different this one shall be a small framework for a poetry website. Let us search for heaven, clouds or nature on Kuler. I chose this one:

Searching the calligraphy category on dafont I stumbled over this nice font:

Let us make a small banner from this:

Conclusion

I think I have shown you a simple and quick way to develop a style and design direction for your application or website. It does not need much talent, but you can achieve a lot.

I really would like to hear what you think about this article. And tell me if it was useful to you. I would also be glad to see some results of this!

Regards,

Dennis

Why?

On a clean and simple user interface it is much easier to find the functions you need. Without distractions through unnecessary elements they don’t need to search for the right elements, they catch your eyes.

It is easier for the user to get along with a clean user interface, and much more fun. If you care about your users, you should care about your user interface.

How?

Remove Features

Removing features have the biggest impact on the decluttering process. But of course, they are the most painful. But sometimes it is more effective to strip out less important features to make your core features outstanding.

Think about the features of your application. Don’t just implement everything that comes to your mind, just because it would be cool-to-have.

I can highly recommend reading the Feature Selection chapter of Getting Real which deals with that topic.

Interface Profiles

Many applications are used in different ways by different kind of people. If you cannot simplify the software and still serve the needs for all your clients, you may think of breaking down your interface into smaller ones.

Each of these interfaces will serve a smaller range of purpose and can thus be simplified on its own.

Restructure Menus

Some features are used less frequently than others. And of course users should be able to do more frequently used tasks faster than less frequently used ones.

When you are using menus to provide access to your features you should think about their structure. Are more frequently used tasks available with a few clicks? Is the your menu intuitive and logically structured?

In my opinion the new Microsoft Word menu (the image above) is a huge improvement regarding the menu structuring.

Color, size and contrast

As stated above, some tasks, buttons and links are more important than others. Beside the structure of menus you can use many other ways to emphasize some elements while lighten lesser used ones.

You may use color or contrast to empathize the the most important link.

You can also change the size to make some options standing out. In this case 37signals highlighted their pricing plan that is suitable for most of their clients.

The images are screenshots taken from the Campfire website.

Make use of hover effects

Sometimes you can get a much cleaner look by just hiding elements until you need them. The example above overlays a users users avatar with some options to interact with him, instead of adding them constantly to the user interface.

Conclusion

I think with these few techniques you can greatly improve user interfaces. So please tell me if you could make use of this article, and of course tell me about your suggestions and extensions as well.

Regards,

Dennis

Some of you may know: My dedicated server had a hardware failure which caused an offline time of 2 days. Sadly some data is lost, but I just restored my blog and it’s theme. It will take some time to get back all of my articles.  sadly all your comments are gone forever :(.

But stay tuned. This blog will soon be on the roll again!

Regards,

Dennis

This small article is mainly targeted at hobby game developer. I think that the title menu of your game should receive proper attention, since it is the first screen of your game the user will ever see. And we don’t want our user to start with a strange feeling, don’t we?

In this article I will show you 5 really simple ways to improve your title menu without any design skill at all.

Assumptions

Let us assume that our title menu should feature the following 4 functionalities:

• Let the user start a game – now that’s obvious.
• Let the user resume an already started game
• Let the user view and change some options.
• Let the user quit the game

That are not much possibilities to choose from. How does a common game menu look like?

For demonstration purpose I chose a really minimalistic one. Probably yours looks pretty much the same. Maybe some different colours, and probably some different background graphics.

Many Kudos to Shangyne at deviantart, who made the background image (actually it’s a wallpaper).

There is nothing really wrong about this kind of menu. But certainly there are ways to greatly improve the user experience with some really simple tricks.

5 Simple Tips

1. Choose the right amount of contrast

Contrast is important for readability. Especially when you are using a background the exact opposite to this one may look like this:

Not a pleasure to read, isn’t it? Watch the contrast between the text and its background!

If you have a background image in your title menu: Put a box behind your text to increase contrast! Maybe add some transparency to create a more elegant look. How about this one?

2. Choose the right font

The font of your buttons has a huge impact on your menus look. And you don’t have to design them on yourself, there are tons of free fonts available at websites like dafont, fonts.com or myfonts.com.

Let us change the font of the example menu to Carefree:

Now we have a whole new look within a few minutes of work!

3. Layout by importance

By now all items the user can choose from are of equal height. But some of them are used more often than others. How often do you check the options? Do you start the game to directly quit it?

Maybe you do. Sometimes. But most of the time you use the Start and Load Game buttons.

Now let them treat with the importance they have. Let us make the Options and Quit button smaller and place them at the bottom of the screen.

With this small change it is much easier to navigate in your menu. The user does not have to get an overview of the menu to find the Start Game button, it’s right under his nose.

4. Make it intelligent

You can even improve the above solution: Ever wanted to load a game at your first start? Probably not!

How often do you start the game and want to load that specific savegame of yours? Probably you just want the latest one - resume your game.

Whether there are savegames available or not you can present a slightly different menu. Each of these menus presents a big button with the item the user is likely to choose.

5. Immediate response

Users have expectations on user interfaces. And one expectation that every user has is the following:

If I move the mouse over something that I can click – something happens.

Just look through your computers applications. Everything reacts to the mouse. They may change the mouse cursor to a hand, they may change its colour and contrast, or maybe its background.

My suggestion to you is: Implement mouse-over effects. Change your buttons look when the mouse hovers them.

As most users are surfing the web today the most familiar mouse-over effect is just highlighting the item by changing its colour.

Just like this:

Conclusion

That’s all for now. I hope you can use these tips to improve you title menu! Always remember: The first look matters! And with these little tips the first look of your game can greatly improve.

Remark: I used the term button in this article for everything that can be clicked on. Actually buttons here don’t look like buttons, but they serve the same purpose.

I would be glad to hear if these tips were useful for your game!

Up to You

Do you have any further tips that can easily improve game menus? Or maybe you disagree with me in some points?

Please let me know using the comments below.

Have a nice day!

Dennis

I think the basic concepts are really easy, you just need to take them serious. But let us first think a few minutes about the motive, about why you should spend your rare time on that topic:

Why should I Even Care?

Well as a hobby and open-source developer, when I develop a website, a desktop application or maybe a game I do this for two purposes:

Personal Education

I want to learn something from that project. Well user interface design is obviously something you can learn and gain experience in. But that alone ends in itself. There is a more important purpose:

For the User

I want some people to use my software! I want them to use my applications, I want them to play my games, I want them to visit my website and I want you to read this article (As you are currently reading it seems to work out).

And what is really most important to me: I want them to actually like using my software. They should feel well. And when they feel well they will more likely recommend your product to friends.

But there is also a non personal motive for spending time on user interface design:

Quality

Even the best software can look and feel like crap when it’s user interface is poorly designed. Of course the reverse is also true. The best user interface is useless when the software under the hood is not working as expected.

To provide good software quality you need both: A well written backend and a fairly designed frontend.

Okay, I care. Now what can I do?

I think the most important aspect has already been said. Care about. Basic user interface design is not hard at all, but you have to care. And there are some essential aspects you should always keep in mind:

Integration

You cannot develop frontend and backend separately. They need to work together, new requirements for the frontend may require new features for the backend and new backend features have to be incorporated into the frontend.

Target Audience

You always have be aware of your target audience. What kind of person may use your software? Professional developers have different expectations than teenagers searching for games.

Experience and Expectations

Are your users willing to invest time to learn how to use your application (such as professional photo editing or CAD software). Or do you target people that don’t even want to think about how to use your software, they just want to use it (such as many instant messaging or social networking tools).

Consistency and Structure

I think that these are the most important aspects for software targeted at professional users, but it is very important for every other user interface design as well.

Consistency

In order to get along in your application, the user has to get an image of how your user interface works. It is easy to violate this image when some functionality is out of place, which can give the user the feeling that your application works illogical.

To maintain the image you should always watch the consistency of your interface. Stick with one color scheme, use consistent labeling, have buttons of similar functionality always at the same place throughout your application.

Structure

The structuring of your user interface should reflect the functionality for the user, not the implementation structure. Buttons, menus and links that provide similar functionality should be grouped together in a way that makes sense for the user.

Simplicity

Nobody likes to do more than he needs to. Simplicity is the art of providing the user with just what fits his needs in the right situation. This can be pretty tough for complex applications, but it is a key to good user interfaces for software that should be used by common computer users.

How to make an user interface simple?

The essential part is that you ask yourself the following question: “What may the user want to do here?”. If you know what your users want, you can give them the right controls to use and nothing more.

You should start where the users starts: At the application startup (Alternatively the front page of a website): What does a user want to do with your software at whole. Give him the opportunity to do so without searching for the right buttons and menus.

Of course you rarely can provide all the functionality within one-click reach. But you can lead the user through the interface to always have the wanted tools right under his nose.

Conclusion

This all sounds pretty easy in theory. But as always: In reality life tends to be more complicated. And user interface design is not an exception here. But I think I listed a set of basic tools to improve user interfaces in the right way.

Upcoming blog posts will get more practical and provide simple tips to improve a user interface right away. Promise! 

And now up to you

Are there any other essential aspects that you may want to add?

Do you see problems within these suggestions?

Does this not apply to you project?

Do you see ways to improve you user interface thanks to this article?

Please tell me!

Today I sat down and thought about the target of this blog.  I tried to keep up with professional usability and user experience blogs but there is something missing in my personal history: Experience with large scale user experience optimization with heatmapping, eye tracking, etc.

I am not a usability professional, I am a student and indie developer. So I don’t know why I tried to compete on that level. There are places in software development that I know much better: Opensource and idie game developer communities.

These communities are largely controlled by programmers that never wasted any thoughts about design and user experience. Well I can’t let that happen any further ;-). So I decided to write about design, especially about user experience design, for indie developers.

The most developer I know will respond: "I can’t design,´never could and never will.", but that’s not true at all. There are really simple and logic rules that can greatly improve the users experience  without great design experience.  It’s not always about graphics design!

I hope I will be able to provide you with some useful information and articles!

Regards,

Dennis

Keep it interesting

Reading this article I remembered the Sim City 4 loading screen. Instead of telling the user what kind of data is being processed (Why would he care?) it presents some funny messages. Some other games display tips and hints during the loading process.

This can keep the loading process interesting, and I think it can be applied to many other applications than games as well.

As soon as possible

I have recognized another nice way of reducing the wait time in the windows vista start menu search bar. Instead of doing a full search and present all the results at once it displays all the items just as they have been found.

The user can already process these information while the rest is being generated. I think this is a very good way to reduce the negative feeling during loading times: Present some preliminary results to keep the user engaged.

Just a few thoughts i wanted to add to Dmitry’s post.

Do you have any other ideas you may want to add? Please share with me!

Regards,

Dennis