HIRE or DIY == " DO IT YOURSELF " 😮
In this post you’ll learn proven ways to get it right.
1. The Rules of Interaction Design Always Apply
Just because you have less screen space doesn’t mean the rules of good interaction design don’t apply.
Let’s review the Five Pillars of Interaction Design again here before we dive into tips on creating usable native app interfaces.
- Goal-driven Design: You want to design for the right user. User research, such as surveys and interviews, will help you create personas for those most likely to use your app. This allows you to create specific goals for your users and tailor your app’s workflow to suit their needs.
- Usability: This seems like a no-brainer, but your app has to be usable. If your audience can’t easily use the app, then they certainly won’t download it from the App Store. Usability makes a product useful, which is the first step in being desirable.
- Affordance & Signifiers: The affordance is the function. Signifiers hint at affordance. For example, blue, underlined text indicates that clicking on it will take you elsewhere. Use signifiers correctly so users don’t need to think about what each UI element does.
- Learnability: You want users to instinctively know how to use an interface. This is where design patterns come in handy, which we’ll talk about later in the article. Familiar patterns help a new user easily acclimate to an app.
- Feedback & Response Time: Feedback lets users know if a task was completed or not. It can be as simple as a beep, or more complex like a modal window. Make sure your feedback is friendly, human, and responds within the timing guidelines set forth by the Nielsen Norman Group.
As Andrew Maier points out in his excellent UX Booth article, these five rules are the foundation you should consider before embarking on designing any kind of interaction, whether or not it’s for a native app.
2. How to design better mobile apps? Know Your Users
Screen size isn’t the only constraint in mobile design. According to Maier, users form the basis of your interface’s constraints. So the first step in creating a goal-driven app UI is to know your users.
Photo Credit: Kārlis Dambrāns, Creative Commons 2.0
There are three fundamental tactics for understanding your users, as highlighted in the free Guide to UX Design Process and Documentation:
- Personas: Personas are fictional characters fashioned from the expected behavior of your target users. They allow you to determine what will drive users’ decisions within your app.
- User Scenarios: Scenarios provide insight into how a persona will act. With user scenarios, you’ll be able to design a UI that best suits them and the goals they want to accomplish.
- Experience maps: Here you’ll explore all the possible conditions for a single interaction. Experience maps chart each step that personas are most likely to take while using an app. They help you understand all the emotions and circumstances that surrounding those steps.
Doing this upfront will save you headaches down the road, as Google Venture’s Braden Kowitz points out:
“So replace the startup dogma of ‘launch early and often’ with ‘learn early and often.’ For me, it opened my mind to all the different kinds of ways startups can learn, and how valuable user research can be to the core mission of any startup.”
In other words, make sure you conduct usability testing sessions between each major iteration. At a bare minimum, run some remote usability tests with a service like UserTesting so you can see how people use your app in natural settings. For more insights into behavior nuances (e.g. gestures and body position), we recommend running an in-person lab session with at least five users.
To learn more, usability expert Jeff Sauros offers some excellent advice for mobile usability testing.
3. The best User Experience design starts mapping out the Content and building User Flows
Design and research work in parallel. For example, you can quickly sketch out user flows based on what you’ve learned thus far. Before committing to a path, however, create a simple prototype. It doesn’t have to be anything fancy — your prototype can be done on paper so you can start understanding how users flow between content and actions.
If you want to outline the flow, you can use the writing-first approach, which Jessica Downey writes about in her excellent article “Jumpstarting Your App Conception Without Sketching UI.” This outlining method helps flesh out app ideas and build a “common understanding” of each page of your app.
Let’s create one for, say, a banking app. The scenario: someone wants to turn on auto deposit.
Select Deposit Frequency
[Once per month][Twice per month]
[Every other week][Every week]
Once Per Month
[Select calendar day]
Before sketching or prototyping, a written outline helps you explore the most important part of your app – the content. Building flows around content gives you a much more accurate assessment of the total number of pages required for your app.
As a next step, you could then create a sketch for each page of your flow (in this case, you could create four sketches). From there, you could continue iterating the sketches on paper and cut them out for a paper prototype, or move to a digital prototyping tool like UXPin.
The outline helps you quickly explore different page flows. The sketches bring those flows to life with more detail around layout and structure. Finally, a quick prototype helps you test those ideas with users.
4. Enhance Usability With Familiar Mobile Patterns
Examine popular interfaces and study the common mobile patterns, such as slide-out nav (see below). This will allow you to create a UI that makes users “feel at home,” according to the Treehouse Blog.
Image Source: UXPin, via Lyft
We’re not suggesting that you flat-out copy the designs of others. Use common UI patterns as a baseline for usability, then layer on your own creativity. In doing so, you’ll ensure that your app design matches user expectations without feeling boring.
As showcased in the free e-book Mobile UI Design Patterns, there are two categories of interaction design patterns you must master for good mobile design.
- Gestures: Touch devices are defined by gestures. Touch, swipe, double-tap, pinch and zoom are becoming second nature to users. Follow Luke Wroblewski’s gesture guide so that your interaction design always makes sense.
- Animations: Motion keeps users grounded in the UI while adding context. There’s a difference between elements that vanish and those that slide out of sight. The former is deletion; the latter is available for use later. When animations are combined with gestures, they add another depth to the experience.
Mobile interaction patterns help dictate the layout of common interface elements. For example, navigation buttons at the bottom of the screen are easier for users to tap with a thumb than buttons at the top.
Yelp is a good example of intuitive mobile interaction design. The app is very clean, with nice, big buttons that state their purpose. The buttons’ clear labels are easily understood by just about any user. Much more than that, the app uses some common mobile UI patterns, like the toolbar at the bottom, which is a pattern you’ll see in a lot of native apps.
Speaking of text, you’ll want to make sure that copy is always easy to understand. Some tips for text:
- Phrase labels positively to make users feel in control.
- Important words must appear first. Mobile users are especially impatient, so use “Full name” instead of “Name (full)”.
- Wording must be consistent and styled uniformly across each screen.
5. Don’t forget Accessibility: design For Fat Fingers
Fingers are much thicker than pixel-precise mouse cursors, so you should pay attention to finger-friendly design.
Specifically, allow enough space for users to tap with a fingertip. If your buttons are too small or bunched too closely together, users can’t tap them accurately (which only increase frustration and therefore abandonment).
Here are a few tips to keep in mind when designing buttons and other touch targets:
- We hold our phones in different ways. According to Josh Clark, there are three ways to hold a phone: one thumb/one hand, two hands/one digit and two hands/two thumbs. And there are also different ways to hold a tablet, but users mostly hold tablets on the side.
- Our fingers are fat. OK, not really. But they are currently about 45-57 pixels wide, which is bigger than what most guidelines recommend for touch targets. For instance, Apple recommends a target around 44 pixels square.
The 44-pixel guideline isn’t always true. You don’t want to design a button so big that folks won’t think of it as an action, as Steven Hoober warns. Nevertheless, you should factor in people’s fingers and how they’ll interact with your app.
6. Web design trends: Don’t Discount Gradients and Shadows Just Yet
Flat is the new black ever since Apple ditched skeuomorphism.
But that doesn’t mean that shadows and gradients are dead. They’ve creeped their way back into design. Just look at Google’s Material Design to see how they’ve made a strong comeback.
As Erik D. Kennedy points out in his excellent Medium article, shadows help our brains interpret a user interface — which is probably why they were so common during the full-skeuomorphic fad.
When thinking about buttons, toggles and other visual cues, you must consider the use of shadows. As Erik points out, “just as we have little shadows on all the undersides of all our facial features, there are shadows on the undersides of just about every UI element you can think of.”
Image Source: UXPin, via Doordash IOS app
Shadows, and by extension gradients, make UIs appear much more natural to the user. You can use shadows and gradients to create 3D buttons and input forms, where the effect makes the element appear inset or outset.
Let’s take a look at the common ones of each, according to Erik.
Inset elements include:
- Input fields
- Pressed buttons
- Slider tracks
- Unselected radio buttons
Outset elements include:
- Unpressed buttons
- Slider buttons
- Dropdown controls
- Selected radio buttons
As described in Flat Design Trends Present & Future, using a semi-flat design gives you the best of both worlds when tackling inset and outset elements. Your mobile interface will have a modern appearance while still cueing users about possible actions.
7. A basic principle of simple and clean design: Cut Out the Clutter
While the 3-click rule has been debunked in UX design, it’s still worth considering when in app design. Why? Because it forces you to consider whether you really need all of your screens.
Ideally, the user should be able to perform tasks quickly and in as few steps as possible. Yahoo CEO Marissa Mayer advises designers in a FastCo article to use the “two-tap rule” too. She says, “once you’re in the app, is it two taps to do anything you want to do?” If not, it’s time to redesign.
As she pointed out:
“The Yahoo Flickr app uses this to great effect: from the opening screen, you can take a picture, surf your screen, navigate albums, check out groups, set alerts, and more, all with just a couple taps.”
So think about how to reduce the amount of work that users must do. The less they have to think about, the more likely it is that your app will achieve success.
And now ...... ROADMAP
- The need for a mobile presence is growing increasingly important for today’s businesses.Mobile applications are one option businesses have when trying to connect with customers and clients on their smartphones and tablets. Recent researchrevealed that the average time people spend using mobile apps has increased 21 percent in last year and that 85 percent of consumers prefer using mobile apps to mobile websites.Andrew Gazdecki, CEO of Bizness Apps, a do-it-yourself (DIY) service that lets entrepreneurs build their own apps, said mobile apps are unique because the consumer chooses to download them. This is clear sign that the customers have an interest in your products or services, he said.”Mobile apps are one of the best ways to increase customer loyalty, engagement, commerce, scheduling and communication,” Gazdecki told Business News Daily.Before jumping right into the process and building an app, the first question you need to answer is whether doing so will benefit your customers, said Michael LaVista, the founder and CEO of Caxy, a Web application development firm that specializes in mobile app development.”If a business can make ordering easier with an app, or [allow] checking on status with an app, or deliver something customers want through an app, then it’s worth investing in,” LaVista said. “Having an app to have an app isn’t worth it on its own.”
Nicholas Acuña, co-founder of the mobile development firm Ebbex, agreed that you don’t just build an app because you see everyone else doing it.
“That is the completely the wrong way of thinking about it,” Acuña said. “If your business is going to create an app, it has to bring value for your customers.”
If you do have an idea for a mobile app that your customers would find useful, you have two ways in which you can create it: use a DIY online service or hire a digital firm or consultant to develop it for you.
“It’s not that one is better than the other,” Acuña said. “It all depends on what you want to build.”
Small businesses can use a variety of online services to create mobile apps on their own. These platforms provide entrepreneurs with the tools to create and publish mobile apps.
What’s especially appealing about these types of services is that you don’t need any tech or coding experience to use them. These services provide everything you need, including step-by-step instructions on how to design an app that best suits your needs. [How to Choose a DIY Mobile App Maker ]
While most DIY mobile app services allow you to build apps for both iOS and Android devices, many of the services also provide the tools to create apps for Windows phones and BlackBerrys.
Two other major benefits of using DIY services are how quickly apps can be built and how little they cost. It typically takes less than an hour to build an app with these services. Most of the services charge a monthly fees, which can range anywhere from $1 to a couple hundred dollars, depending on the type of app you build. The monthly charge includes the cost of hosting the app each month and of making sure it gets placed properly in the app stores of your choosing.
The major downside to these services is that you can’t build a fully custom app for a unique purpose, Gazdecki said.
“For example, if your business is a social network or you’re looking to create a game, you’d need to look into custom development,” he said.
Magaly Chocano, founder of app creator SwebApps, said the creation process should begin with entrepreneurs defining their goals. Businesses need to ask themselves whether the app will be an extension of a product or a tool for their consumers to stay connected, she said.
“Once the business determines the level of complexity they are seeking, then you can decide whether a build-your-own platform suffices or if you need to have a custom app built,” Chocano said.
But, in general, DIY services are a great way to enter the mobile space, Chocano said.
“It allows you to take a peek at what you can do without too much expense,” she said.
Hire a developer
If you need a more sophisticated mobile app that offers users more functionality, you’ll likely need to hire a development firm to do the bulk of the work.
Developers will work with you to determine what kind of app will best fit your needs, and then will do all of the work designing and building it.
Depending on the complexity of the app being built, it often makes more sense to hire an experienced development firm or consultant.
“Unless your company is a software company, you’re probably much better at making widgets, delivering services or something else,” LaVista said. “Working with a firm that understands software and understands mobile will get you to market faster and more successfully than trying to figure out a brand new business on your own.”
Hiring a developer to do the work for you does come with a significant cost. Mobile-app firms and consultants can cost anywhere from a few thousand dollars to as much as hundreds of thousands of dollars.
“Custom apps are likely to cost $25,000 at the low end and go up quickly with more features,” LaVista said.
The price really depends on how “luxurious” you want your app to be, Acuña said.
“We liken it to buying a car,” Acuña said of the different price levels, noting that you can get, for example, a Toyota, Kia or Mercedes. “Not all apps are created equal.”
When hiring a development firm, you also need to consider the length of time it takes to complete a project. These projects are not quickly turned around in a matter of weeks, and these types of firms or consultants can take anywhere from a couple months to longer than a year to finish a custom mobile app.
One real plus of having an expert build your mobile app is that such professionals typically work on the project long after the initial launch. The likelihood that a mobile app will be perfect once upon its initial release is slim. Mobile development firms typically work with clients, usually for an added cost, after an app is up and running to see what’s working and what is not. Once that is determined, the firm will go back and make changes so you can release an updated version that better fits your customers’ needs.
When hiring a developer, there are several things you should consider. First and foremost, check out the companies the developer has worked with in the past.
“A reference check really says it all,” LaVista said. “It tells you what a company is like to work with.”
You also want to look for a firm or consultant that is going to spend time up front learning about your business and customers. Acuña advised shying away from firms that quickly say they can do what you want, without first understanding what you really need.
“If they don’t seek to understand what your objective is, then run away,” Acuña said.
You also want to consider pricing when hiring a developer. While everyone aims to get the best price possible, sometimes being quoted a cost that is well below everyone else’s offer can be a red flag.
“If it’s really cheap, it’s too good to be true,” Acuña said.
You should also take into account what type of mobile apps the firm has created in the past, how those mobile apps look and operate, the type of payment plan the company requires, if the firm will work on updates after the launch, and whether they will provide you with the source code after finishing the project.
Types of applications
The apps most people are familiar with are business-to-customer applications. These include apps that are mobile versions of a company’ website, apps that influence interaction between a business and customers, or fun apps that draw attention to a business’s brand.
“A mobile application is not a scattered marketing ploy,” Gazdecki said. “It’s rather a platform that allows a business owner to cultivate existing relationships and turn regular customers into brand advocates.”
In addition to business-to-consumer applications, some businesses create apps solely for internal use among their employees. These types of apps can be used to help boost productivity or increase communication.
Regardless of the way you choose to develop your app or what it’s used for, it is important to remember that an app isn’t just something you launch and then never touch again.
Acuña said that companies too often underestimate what owning an app takes beyond development.
“Do you have the staff, time and resources to see it through?” he asked. “It it’s successful, it takes on a life of its own.”
Free Mobile Design Resources
- Mobile Book of Trends (free e-book) – 156 pages illustrating 12 mobile trends that are quickly turning into timeless best practices.
- Mobile UI Patterns (free e-book) – 46 UI patterns from top companies are analyzed in a problem/solution format across 100 pages.
- 20 UI Design Photoshop Tutorials That Will Come in Handy on Hong Kiat’s site
- UI Design Tutorials to Create Amazing Web and Mobile UI Elements at Design Junction
- Interaction Design Best Practices: Words, Visuals, Space (free e-book) – seven chapters explaining the practical use of affordances, white space, size/distance, visual consistency, cognitive load, and more.
- Interaction Design Best Practices: Time & Behavior (free e-book) – six chapters explaining how to reduce friction, design for time, create delight through animations, affect user decisions & behavior, and more.
- Designing for iOS on the Apple Developer’s site
- iOS 8 Wireframing Kit – Quickly mock up design ideas with 90 handcrafted lo-fi elements for Photoshop & Sketch. Supports iPhone 5s, 6, 6Plus.
- iOS 8 UI Kit – 90+ detailed UI elements for Photoshop, Illustrator, and Sketch. Supports iPhone 5s, 6, 6Plus.
- Comprehensive iOS guidelines and cheat sheet by Ivo Mynttinen
- Android Developer’s UI Guidelines
- Android Developer’s UI Best Practices
- Android Inspired – collection of UI examples for Android and IOS
What’s your process look like?
Do you follow a similar design process, or does yours look radically different? We’d love to hear all about it, so contact us.
Best Regards – BeeZness LLC.