Strategy for a new UI: Ultimate Coder Week 3

Last weekend I finished off the Beta version of Betray. And that means that its time to start thinking about building my Gui tool kit. Before we get going lets strategize a bit about how I'm going to do this.

Lets start by thinking about real-estate. We want to fit as much stuff on screen as possible, so that makes us want to make everything very small and cramped. On the other hand we want to make widgets easy to hit and manipulate, so that makes us want to make them large. Then on top of that, we want to keep the screen feel clean and not very cluttered, so maybe we should try to hide as many things as possible. However if we do start hiding things then it will take multiple clicks to reach them and that will slow down the interface.

Its all a one big contradiction. Well maybe there are some things we can do to make things better....

If we want to have lots of things on screen but we don't want it to look cluttered, then why don't we fade out the things the user isn't interacting with to make them less attention grabbing? In fact we should modify all our interface elements depending on how much of the users attention we want them to take up. We can order some attributes from most attention grabbing to the least:

-Bright colors
-3D dimensional
-Muted colors

We should only animate the most important items, and have the least important items be muted in color and shading. This should in fact not be very hard to do given that we will redraw the interface every frame. Each element must therefor be able to fade in an out of importance.

Then we want to fit lots of things in to a small space, and we can solve that by recognizing that in order to start interacting with any widget it does not need to be larger then that you can hit, as that is how all interaction begins. Lets take a slider for example. The classic slider takes up a lot of space, and if we try to make is smaller we loose precession when using it. What if we instead imagine a slider where we only display the handle, and not until you grab it do we display the rest of the slider. In that case the slider can take up the entire screen! If we have the ability to fit any widget in the same space, it will make packing the in to a small space much easier too.

We want to avoid hiding things from the user, but when we have to we want to make it easy to reach the functionality anyway. Menus inside of menus can make things hard to find and easily disorient the user how to get back. One good way of dealing with this is directional pop up menus. They don't take up space until you ask for them and by learning in what direction different options are found the user can quickly activate them with a single swipe. Direction and a selection mechanism is almost always better then trying to hit something with a pointer.

While this project is about building a UI tool kit, its important to recognize, that usually direct manipulation of data is better then an abstract widget. If you want to rescale the image, its more natural to grab the image and stretch it out then to find "re-size image" in the menu. What this means is that instead of putting all our UI elements is tool windows and panels, we should make it easy to integrate them in to the data it self. This has made me decide not to build a major layout engine, but rather build a immediate mode API, where the interface can be moved around with content and data.

A great example of direct manipulation interfaces is Microsoft (Sadly canceled) Curried tablet.

Finally I want to talk about aesthetics. I would like the UI to have its own visual language, and for a while i have been developing an art style that I intend to apply to this project. It is a evolution of some of the graphic styles i have been using for the Quel Solaar visual identity, in my game Love, and my new game code named "Dark side of the moon". I have made a few logos in this style:

I have also come up with a color palette that will use mainly grays with tints of color. The textures of materials like can be like chalk, coal, jade, sand and Chinese porcelain. I want to create materials that change their color between shadows and highlights and avoid the monochromatic look you otherwise get from untextured materials. Here are some examples:

Another inspiration is the design of the Aaton Cantar X, a field recorder that I think is one of the most strikingly designed objects I have ever seen, but in a very unpretentious and non traditional way. It disregard for beauty makes it look powerful and advanced, rather then ugly.

Given that the interface will be 3D I have begun modeling some basic icons shapes that follow this style: (The color and shading is not yet applied)

This comming week i will start to prototype together these ideas and try to make something that actiualy works...
