UI Animation

I spend a lot of time developing software and it means that I have to put far too much effort into designing the UI. I don’t really like UI design because I prefer the actual backend programming because it is far more interesting. I tend to be incredibly lazy when it comes to design.

Over the last few years we’ve had loads of new design technologies that have made it easier to develop great user interfaces for our applications. Microsoft adopts an XML based markup language whereas Apple still maintains its Interface Builder which hasn’t really changed too much since the last 1990s. Other systems adopt similar technologies.

I’ve recently noticed that animation has become a more prominent thing in UI design. Many smartphone apps tend to animate between screens by sliding or flipping and websites are gradually adopting animation between states. Sometimes this works very effectively but most of the time people will go over the top.

UI animation is only really useful if it adds something to the UI and doesn’t slow down the application. I am concerned that with the introduction of CSS3 and other technologies animation is going to become more commonplace as bad UI designers add it to almost everything – it will be like Flash all over again.

I personally don’t use animation at all, but that probably stems from the fact that I prefer the actual programming to the UI design. When working on projects I generally employ a 10:1 ratio of programming time to design time purely because it means my apps generally run better.

Why layout engines need tables

When coding applications a frequently encountered problem is designing the user interface. People that know me well* know that this is my least favorite part of the development process because most methods of doing it aren’t that nice. I like to have a good visual designer that makes it easy but I like the additional control that is offered by coding it manually. My current favorite layout engine is GTK (or more specifically PyGTK) because it relies on something very important: tables.

Before I jump in with tables I want to briefly consider the alternative where you have an interface that has been designed by dragging and dropping controls to a specific location in the UI. Generally when the window changes size the UI doesn’t move properly and so all of the controls are left in the top left. Likewise when the UI is made smaller controls disappear completely and the UI becomes inaccessible.

The alternative, therefore, is to use tables and stack panels to lay out the UI. The first basic principle is that everything from the window to the buttons is a view and that each view can contain one view. Stack panels come in allowing you to stack views however no more than one view is allowed by each cell in the stack panel. The above view, for instance, could be produced by fitting a horizontal stack panel 2 cells wide, then by putting a vertical stack panel on the left hand side three cells high and then putting the individual controls inside each cell. You would continue this process for the other controls as well.

The advantage of this method is that controls can easily fill the cell meaning that when the window is re-sized it re-sizes in a clean way and nothing falls off. By setting the minimum size of a control you can also infer the minimum size for the UI, making sure that it will never lose quality.

*Or just read my blog.