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.

Building a decent Answer forum

I often use websites like Yahoo! Answers because they can be incredibly useful to quickly find out things about a subject that you are unfamiliar with. But I have a problem with them. They have an absolutely appalling UI. Here is the homepage of Yahoo! Answers:

This is actually a really bad design. Let’s go through it, part by part.

The Header

Here we see that there is a lot of irrelevant information, and a total of three text boxes. Two are for search, one is for asking a question. Some users may be confused by this. The trending information is not related to the website, and probably ought not to be shown. The icons should really be smaller links in the footer, maybe listed as part of a site map.

The Body

Again, almost everything shown here is irrelevant to most users. The advert takes up a large portion of space on the page (around 15% of the visible content) and the questions shown are completely random, and not necessarily helpful.

A Question

This question was completely randomly selected from a category I normally answer in (Programming) but even an eight year old could tell me that this is not in the right category, clearly someone has been careless when putting in question. The advert once more takes up a large amount of space on the page, and its color scheme doesn’t fit particularly well with the rest. The default user icons are relatively ugly (an exclamation mark has connotations of alarm, error, warning or danger). The question could have been easily answered with a quick Google Search (the answer here is that they were first used in Poland, however not in the same way that they were used in WW2).  Furthermore, there is no clue at to which is the right answer.

I have now uploaded my design of how an answer forum could work (click this link to view).

 

Windows 8: It’s official

Yesterday Microsoft put out a video on their blog of what Windows 8 is going to be like. I haven’t actually found the original video yet, however Lifehacker have a copy of it here. The interface isn’t really anything of what the world expected, I had certainly been talking of a very standard Windows UI, maybe just Windows 7 tidied up a bit, but Windows 8 is completely different. To be fair, it is very much as if Windows got together with Windows Phone and decided to make some sort of strange hybrid Operating System.

The interface is based around tiles, which are quite cool, and are all run by HTML5 and JavaScript. Yay for destroying the normal Windows code-base of C++ and .Net Microsoft! The interface is completely changed round and looks as if it can only really be run on one kind of computer: a tablet. I wouldn’t want the ‘Mango’ style UI on my desktop purely because I’m happy with a mouse and keyboard, and I’m not going to go and buy a touchscreen just so I can use the shiny new features.

Of course, there is a great deal of potential with all this and some of in the interface magic they’ve created and there is no denying that it won’t give iOS a run for its money, but there is a reason Windows has been successful: its standard, reliable and everything is in the ‘right’ place – a ‘right’ place that has been established for twenty years now. If Microsoft is now giving us the option to have everything in the wrong place it will confuse and put off people – not what they want or need.

The minute I get Windows 8 I will probably play with the new interface briefly before turning it off forever: I want a desktop Operating System on my desktop PC, not a tablet Operating System.

How to write a program/website that works

When a programmer writes a program, there are various stages generally starting with research and planning, coding, debugging and then going through the last two stages for a bit to get everything working fine. This is a good way of coding, and most programs work like this. Many commercial programs will also invite beta testers in either via a download on the internet or by an invitation. Beta testers are able to test more features in a larger program, and also let the programmer see how the program might be used.

Programmers don’t always think when the write programs though. They’ll fix one bug, but that might lead to another bug, and another, and another. Therefore, to ensure that the program is stable, the developer should go through checking every last bug, every last scenario.

Another method that is surprisingly useful for getting a program to work is to invite hackers to hack it. Later this week (Wednesday, if anyone’s interested) I am going to launch the beta of Friend+, a social network that I have coded in my spare time. Rather than invite people to test it out, I am going to send an e-mail to best hacker-friends and ask them to have a go at PHP/MySQL injection because I want to thoroughly test the site to destruction – though hopefully the security should prevent this.

Whilst it is all very good coding an application that works with no problems, it is still no use programming something that people don’t understand how to use. Therefore I recommend doing something that Mark Shuttleworth (the guy that came up with Ubuntu) recommended, and that is to have the development team sit in a room where they are not allowed to do anything but watch a group of people use their program. Because they are not able to help the users, it is therefore challenging them to create a complex but usable program. Programs should be interactive and appealing, so it is nice to have a little animation when there needs to be a little animation, but it should not tax the user or their computer in anyway.

The final thing to consider that really is vital is the system requirements for the program. It is no fun having to use a program that has a page long list of system requirements when all I really need to know is whether it will work, or not. A good example of this would be Google Chrome, because the requirement is simply Windows XP, Vista or 7. It doesn’t say that I need a Windows compatible pointing device – a very long winded of saying that I need a mouse, and I haven’t used a computer in years that doesn’t have a mouse. It also shouldn’t say I need a sound card, because that adds confusion. Every motherboard on the planet, almost, has some sort of in built sound card and frankly this can be assumed. Not everyone knows this, so may avoid your software because they don’t have a dedicated sound card. You should really only put the operating system as a requirement, and use the base requirement for that as your hardware requirement, though this need not be listed.

When the user is installing your program, they should be able to do the following:

1. Continue to use their computer, hassle free
2. Understand the process and not have to worry about where the program is going to install itself
3. Not worry about the installer crashing as a result of software not being installed – the installer should install any software it, or the finished program, needs

Another niggle that I have about installing programs is when they decide to add a background to the process, covering up the rest of my screen. This is horribly nineties, and I frankly prefer the modern, Aero based designs that we have today.

Another consideration you may want to make about your program is how and whether you continue to support it. It really annoys me that when I go online and find a program that I have seen recommended somewhere that the most recent version was released five years ago and isn’t entirely compatiable with Windows 7. When a program is popular, it should be updated and supported if people want to use it. It is no fun using a program on a brand new computer that was designed ten years ago.

Ultimately, I suppose that I am getting at the fact that it would be nice if those kind programmers of ours would start making some decent programs that, quite simply, work. A bit like Apple products, I suppose.