“Simple is always better”

The focus of day two of our build an App project is design. It’s actually taken a little more than a day to get the design done but as with most projects, getting your concept right at this stage saves you a huge amount of time in the latter stages. That at least is our hope! We should be about on schedule with Michael having investigated Facebook integration and started work on a LiveCode library that we’ll use later in the project.

Interface design is a tale of two halves, each of which should be given equal priority. A good App will be easy and intuitive to use, as well as look great. There are plenty of Apps out there that achieve one or the other, but getting both right is the secret to a really great App. This applies when building Apps for general release in the App Store and when working on tools for in-house use. No matter who uses it, you want it to be really great to use.

UI Design

There are no golden rules to mobile UI design, save that simple is always better. It may be a cliche, but less really is more when it comes to mobile Apps. Anyone can design a complicated App, but taking the time to make it simple is what will make it shine. There are plenty of blogs http://db.tidbits.com/article/11744, books and other resources that provide lots of useful rules, hints and tips, but nothing beats your intuition and a little user testing.  Taking time at the start of any design process to sketch out your interface screens and discuss the useably is a must. As you’ll see from our first time-lapse video, Michael and I spent quite some time sketching out each screen on our whiteboard, constantly tweaking as we discussed how we thought a user would naturally choose to interact with the App. Of course, until you have it on a device and in front of real users you can never know for sure, but you will catch the obvious flaws in your concept if you take time to judge and rejudge your interface at this stage. Remember, if you are torn at any point between two options, always take the simpler one! 

With only 5 days to complete this project we don’t have the time to do a proper prototyping phase to get our interfaces in front of real users, observe their behavior and tweak. However, this is one of the best ways of confirming that your designs are indeed truly user centric. LiveCode lets you build basic versions of your App screens in such a short space of time that it makes it feasible to do real prototyping even on relatively short projects. This will almost certainly increase the quality of the user experience and help you to produce an App that fulfills the requirement of being ‘easy and intuitive’. We’ll look into showing some of those capabilities in action in a future series on this blog.

Visual Design

The second aspect to the design of a great App is the visual interface. We live in a consumer culture where, for better or worse, we literally judge a book by its their cover and decide how tasty a food product will be (at least in part!) by its packaging. Packaging and brands have the power to inspire confidence, increase trust, or even build an atmosphere. Take the most successful App in the App Store, Angry Birds. Packaged in it’s current form, we are given the impression that it will be fun, that it’s of high quality and that it’s likely to be good from the screenshots alone! The design of your App communicates a lot about your view of the App you are making.

Now, not everyone is a graphic designer or has access to one. Does this mean that it’s not possible for you to fulfill the second design requirement? Of course not! There are wonderful Apps out there that are incredibly simple. Choosing the type of interface you want to create should be based solely on the end user of your Application. Rich visual interfaces are perfect for Apps aimed at general consumers, but utilities and in-house Applications often benefit from the most simplistic clean design. What sets good design apart from bad is not how many drop shadows and glows it has but attention to the simple details: 

• Do your controls line up?
• Is your text the same size and font?
• Have you kept to the some color palette?
• Is there consistency in the way you are framing your controls on each screen?
• Does each screen feel like it belongs to the same App?

Reading up on basic design principles such as ‘grid’ or ‘color’ theory may be useful for those who enjoy building interfaces but have never ventured into the world of design. A good blog that has plenty of interesting lessons can be found here: http://psd.tutsplus.com/articles/web/50-totally-free-lessons-in-graphic-design-theory/.  

Our App is a game intended for a general audience. As a result we’ve taken the time to design a complete theme. We want to give the initial impression that this App is fun and perhaps a little mysterious, hence the detective theme. Each screen is framed in wood with an old ornate wallpaper background, alluding to the detectives of old like Sherlock Holmes. I picture him in an old Victorian London town house sitting in a dark room lit only by a fire surrounded by dark oak beams, rich colorful wallpapers and ornate homely decorations. Capturing a little of that in our designs helps to bring our Application to life! I will of course have to let you all as the end users be the final judge.

The design screens 

For those of you who are interested in how we went about creating this interface we’ve created a second time-lapse video here. All the work was done in Photoshop (Download PSD File) and took roughly 10 hours.

The next stage is to export the various images and start to build our interface in LiveCode! We’ll be linking to LiveCode source files in the next couple of posts so if you would like to have a look at the source then sign up for a free 30 day trial of LiveCode here.

Until tomorrow.

Ben, Michael and Neil

PS: Thank you to all those who have written in to us. All the encouragement has been much appreciated! Keep your comments and suggestions coming, especially regarding the designs.