Last weekend I finished off the Beta version of Betray. And that means that it's time to start thinking about building my Gui tool kit. Before we get going let's strategize a bit about how I'm going to do this.
Let's 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 feeling 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.
It's all 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 user's attention we want them to take up. We can order some attributes from most attention grabbing to the least:
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 therefore be able to fade in and 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. Let's take a slider for example. The classic slider takes up a lot of space, and if we try to make it smaller we lose precision 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 them into 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, it's important to recognize, that usually direct manipulation of data is better then an abstract widget. If you want to rescale the image, it's 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 itself. 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 icon shapes that follow this style: (The color and shading is not yet applied)
This coming week i will start to prototype together these ideas and try to make something that actually works...