Home > Blog > How to start, build, launch and market your first iPhone App in 28 days – Part 3 (The Design)

The “How to start, build, launch and market your first iPhone App in 28 days” series so far:

Ok, so now that you’ve got all the equipment and resources that you need, fleshed out your idea and you’re finally ready to dive into coding, you must keep one thing in mind – no matter how amazing or game-changing your app may be, if it looks and behaves like ass, people will think it IS ass. Design, usability, and sex-appeal are all just as vital to your app’s success as the function it performs.

While we can’t really tell you exactly how to design your app for success (not that we have a magic formula, anyway), we can provide some insight as to how we go about designing our own apps. And if you know nothing about design or usability, I would highly suggest you seek out a designer or UI/UX specialist. Even if it’s just for a quick consultation, a good one can offer amazing insight in just a few short looks. Luckily, we’ve got Ken as our creative guru so we let him handle all that stuff. :P

And hopefully, you’re thinking about all this while you’re coding as well as when you’re NOT coding (ie. eating, drinking, sleeping, breathing, etc). A good design is extremely important, especially on the App Store, which has 56,000 apps at last count and rising. In other words, it’s easy to get lost when your app doesn’t stand out.

K.I.S.S.
Umm... no.
Please, do NOT do this…

Keeping your app simple and intuitive is extremely important. Most mobile users don’t have time to try to learn your interface if it’s not straight forward. With all the other apps available, if yours isn’t easy to use, then it won’t be used at all. Show it to some friends, make them try it out but don’t tell them how to use it. Give them the general idea of what the app’s purpose is and see if your design is intuitive enough that they can just pick it up and start using it.

Don’t overload your screen with controls, gadgets, widgets, etc. We’ve seen apps that try to cram everything onto a single screen thinking that it would be better to have access to it all at once. However, this just makes the screen look cluttered and frustrating to use. Remember, the iPhone screen is small and so you have to use space wisely. Make use of the iPhone SDK controls like the Tab Bar, Navigation Controller, Scroll View, and Table Views to increase your real estate through scrolling and pagination. Users are accustomed to them so don’t be afraid to use them.

The iPhone HIG is your friend

This leads us to the iPhone HIG (Human Interface Guidelines). The iPhone HIG is Apple’s guide to designing usable apps on the iPhone. Read it, learn it and use it. It details everything from overall design principles to specific details like when and how to use Action Sheets and how to use the iPhone standard button icons. While not everything in the guide may apply to you nor are they rules that are set in stone, you should definitely familiarize yourself with the entire guide, even if it’s just to understand what the typical iPhone user will expect and is already accustomed to. You don’t want to overload existing behavior for a button when the user is expecting something else already established as a standard.

That being said, don’t be afraid to think outside the box. You may not want to use Alert Views every single time you want to ask the user something – that could get very annoying – so use the guidelines as exactly that, guidelines.
The iPhone HIG is here.

Simple does not have to be boring

Now if you kept everything simple and intuitive and followed the iPhone HIG and did nothing else, your app will mostly likely look incredibly boring – so sex it up a bit. Add some graphical touches and design elements to make it more visually appealing and give it some WOW factor. This doesn’t mean throwing out everything we just told you about simplicity and following the HIG because you can do both. Incorporate the iPhone HIG and your own design to bring together a beautiful and simple application.

Most importantly, know your market. If you’re building a serious enterprise business app, then sexiness may not be needed and you should instead focus on simplicity, usability and performance. But if you’re making your app for the average iPhone user, remember that the typical iPhone owner expects a certain level of polish and beauty. Simply put, iPhone users want NICE looking apps. Design for emotion because attractive products drive people to become emotionally attached and less likely to delete your App and more likely to show it off to their friends. How many times have your friends (or yourself) shown off an app just because it looks “cool” and makes you feel that your iPhone is just that much better?

Here’s a short list of some of the sexier, and yet still simple and intuitive, apps we’ve come across:

Strokes by Bickbot
Strokes by Bickbot
Beautiful looking app that tracks your golfing scorecard.

Convertbot by Tapbots

Fun unit conversion app with an innovative and beautiful UI.

iHandy Carpenter by iHandySoft Inc.
iHandy Carpenter by iHandySoft Inc.
Very nice looking set of handy carpenter apps.

Voice Memos by Apple

Apple’s own Voice Memos app is simple yet stunning.

How will your app behave and operate?

Obviously, the iPhone screen is small so you really have to think about how your application is going to behave. Is it just one screen or will you have many screens? How will the user get to these other screens? Will it be a Tab Bar, like the Clock app? Or a Table View like the Contacts App? Or perhaps it could be a combination of Tab Bar, Table View and Navigation Controller, like the iPod app. Ultimately, you will have to decide which design pattern suits your app and makes sense for you. Luckily, the iPhone HIG can also help you determine what is most appropriate. Here’s a couple of hints:

1) Use Tab Bar if you want to allow the user to switch back and forth between different pages/views. (iHeartRate’s main controller is the Tab Bar)
2) Use a Table View if you want to allow the user to drill down into different pages which then can select from a list (iHeartRate’s Profile section is a Table View)
3) Use a Navigation Controller if you want to have a linear drill down path that users can quickly move up and down (iHeartRate’s Profile section also uses a Navigation Controller in combination with the Table View)

Or you may want to create a custom interface with your own buttons and images (iHeartRate’s main heart monitor is like this). For these custom views, we highly recommend you use Interface Builder and not just implement the view via straight code. Why? Because Interface Builder has some iPhone HIG rules built in so that it can guide you as to the correct spacing and alignment between your interface’s objects. It will help you correctly space your labels from your input fields and make sure that everything is correctly aligned. And yes, you should be paying attention to this level of detail because polish definitely matters and you don’t want to be sloppy otherwise it will reflect in other aspects of your app.

The little things always count

One thing that you definitely want to make your app, is FUN to use. If your app is fun to use, then people will keep on coming back. Simple things like using sliders, pickers and buttons instead of a straight text field can make it more enjoyable. Of course, this may not always be the case if speed of input is vital, but if you have an interface that’s easy, quick and FUN, it definitely makes things more interesting. Convertbot is a great example of an app that could have been just two straight text input fields and a “Convert” button but instead, it’s this crazy interface that makes it fun to figure out how many kilometres are in X miles. It may be quicker to use text, but it’s definitely not as cool, which is just as important in the iPhone world.

User feedback is important as well. You can use sounds, vibrations, loading icons, progress bars, anything that will give the user a sense that things are happening. It’s this tactile feedback that is important to give a sense of progress. Also, sound effects can be fun – as long as you’re not interrupting the iPod music in the background and give the user the option to turn off sounds (either implicitly via detecting if the iPhone is in vibration mode or explicitly through a setting).

Teach them a lesson

Depending on the complexity of your application, you will probably want to include some help screens or even a tutorial if there is a workflow involved. Even though most people tend to skip through or ignore the help and tutorials and dive right into the app, it’s nice to have just in case they want to refer to it later.

That being said, your app should be intuitive enough that the user may not need to reference the help or tutorial at all. But it definitely doesn’t hurt to have them handy in case they don’t know what they’re doing. Also, it’s great to have so that you can highlight features that may not be immediately obvious as well as power features and shortcuts for users once they get used to the application.

And like they always say, a picture is worth a thousand words. Don’t have pages and pages of help text – no one will want to read that. But pictures makes things not only clearer, but easier and more appealing for the user to actually go through. For example, take StickWars (sorry, John), great game but the Help screens are 5 pages loaded with blocks and blocks of text. There’s no way I’m reading all that and to this day, I still haven’t – I don’t even know what everything does but I’d much rather just figure it out on my own than read all that. Anyway, use pictures and lots of them. With arrows. Pointing at things. Your users will thank you even if they don’t use it – it’s just nice to know that it’s there.

But always be the student

To be honest, there’s no way you’re going to be an expert designer or an UX guru just by reading this blog – you’re going to have to do much more than that. So our suggestion is to read, learn and absorb as much as you can. It’s all out there – countless books, blogs, websites all on design and usability. There are even lots of material already specific to designing for the iPhone. We list a few of the ones we like below, but one of the best places to look is on the App Store itself. Check out the top apps in all the categories and you can see what they’ve done right in terms of design. Be inspired by other’s work and designs, but don’t copy. :P

Like Picasso said, “Bad artists copy, great artists steal.” Actually, don’t steal either, but don’t be afraid to be inspired by someone else’s work. Plus, you need to know what the competition is up to before you can beat it, right?

Here are some of the standout UI/UX and design resources we’ve found for iPhone development:

10 iPhone User Experience Anti-Patterns – Great presentation on 10 common missteps in iPhone App design

teehan+lax iPhone GUI PSD 3.0 – Excellent aid for creating full mockups of your iPhone App using Photoshop

John Gruber on iPhone-Likeness – Great essay on designing iPhone apps to be “iPhone-like”

Additional design links from Mobile Orchard – 7 iPhone UI Design Resources