This second part in the series, How to Develop an App, in which I walk you through some of the common steps involved with taking an app idea and turning into an actual product.
This article is intended for anyone interested in exploring some high-level concepts that will help you think about how the app should work on a very practical level. Whether you’re a project manager, designer, developer, or the person with an idea, I think you will be able to learn something here.
When discussing User Experience (UX) and Interaction Design (IxD), the cumulative goals of these two areas is making pleasant experiences for the user. That may be an over-simplified definition, but I think it gets to the heart well enough. There may be some debate over exactly what defines UX vs IxD, but for the sake of this article, I’ll be discussing concepts that you can use as you develop your app.
Mobile User Experience vs Interaction Design
When I think of interaction design, I tend to think of how people interact with my apps, both on a very broad level (how they are going to complete a certain goal) and at the more minute – how does that button placement affect usability. User Experience, on the other hand, makes sense in my mind to define it more as how the app is perceived by the user. To me, it’s more touchy-feely. For our purposes here, there is little point to distinguish the two, except to make note of it for the future.
We also need to recognize that “mobile” is an important distinction from other media…
The “Mobile” Differentiation
It’s pretty clear that mobile devices are quite different than their desktop counterparts. There are many considerations to keep in mind, including
- Screen size: phone vs tablet (or both)
- When used: on the go, at home, in meetings, during commutes, etc.
- Locations: home, office, large company
- Connectivity: WiFi, cellular data, online and offline
- Input: touch interface (vs keyboard and mouse of old)
Goal-Driven Design
It’s easy to jump into a project and get working on design and programming without giving much thought to how it all fits cohesively together. Don’t be that person. It’s imperative that you take time to plan how your users should be using the app – how one moves from point A to points B, C, and D through specific workflows.
Also consider the overarching goals of the app. You may be concerned with promoting additional revenue through in-app purchases, connecting people through social networks, or keeping users engaged with the app several times a day or week. The functionality may be great, but if it doesn’t contribute to achieving your primary goals, chances are you failed on the planning end.
I would also like to add one goal that I think should be set for every app. Make it as easy as possible for the user to perform tasks. The less your interface is noticed, the better, because as soon as people have to stop and think about what they are doing.
Designing the Flow: Wireframing
Going back to the exercises you did in part one, Your App Idea, I suggested you take some time to plan out the app: what it does and how it does it. This is where you start to refine that vision and put details to paper or pixels. If you are unsure what wireframes are, take a look a some sample sketches. Don’t worry about how polished they look. I’m a terrible illustrator, yet manage to get my ideas across just fine.
Your wireframes should start out as little more than boxes representing the device screen filled with fairly vague + bland user interface elements. Begin with the list you created in part one and start sketching out the various elements on the screens. Make a few iterations and fill any holes in your planning by rearranging steps in a flow, user interface elements, etc. Also, be explicit – Generally each user interface element that takes user interaction should link to another screen or event, and likewise, each screen or even should have something that initiates it. If you find yourself designing a screen, but no idea how the user should actually get there, take a few steps back and figure that out first.
It’s OK if you require a couple of tries before you go down the right path. That’s common and likely you will come up with your best ideas that way.
Refining the Interaction
Once you have a general plan in place, start looking for ways to make it the user interaction better and more efficient, less intrusive, and flow smoother? Look for ways to cut the clutter and simplify the interface, “Less is more” really does apply here. Too many options, steps, actions, etc slow the user and make them have to think about what they are doing. The more the user is having to think about the mundane actions, the less they will enjoy the app, or even become frustrated over using it.
Common Interfaces vs New Ideas
There’s something to be said about using default interface elements provided by iOS (or Android for that matter). These are things that people will immediately be familiar with because they are commonly used everywhere. There is little teaching involved the first time a user encounters these elements.
On the other hand, the common can feel mundane or unsophisticated. Experiment with variations on the common interfaces or come up with new ones of your own. It can be very helpful to see how other apps accomplish similar tasks (and not that it has to be a task per se; more like a way of doing things). The website Pttrns.com is a good resource for this.
The term affordance essentially describes how you can look at something and pretty quickly figure out what it does, or how it does it. A pencil is an example. So are scissors – it’s very easy to tell which part you hold, and which part cuts. Use this idea to hint at the functionality of a novel or relatively uncommon idea.
Learnability is also important. If your users can’t figure out how your app should work either immediately or with a very small amount of experimentation, you risk losing them forever. People tend to have short attention spans and can’t be bothered to figure out an obtuse app when other inexpensive competitors exist.
If after refining your app, there is still some learning curve, consider designing a walk-through or some kind of tutorial. Many game developers have mastered this skill, yet other apps completely miss out on educating their users in this way. One of my favorite UI design patterns is the coach marks type tutorial. Other examples include walk-throughs, popup boxes (eg, popovers or modals), labels, status messages, etc.
Conclusion
Remember, this isn’t just about simply planning out each screen as a designer would. Taking the time to work out the application flow at the beginning will save you time and heartache in the end. You will be able to make a cohesive user experience that works efficiently and has both your overarching goals as well as the user in mind.