An App Entrepreneur’s Guide to Mobile UX and UI Design

A User Interface is like a joke. If you have to explain it, it’s not that good. 

Looking to create a successful mobile app? If so, then creating a great mobile user experience should be your number one priority.

When it comes to implementing a great user experience, it’s often difficult to grasp the difference in the User Experience (UX) and User Interface (UI) design processes involved.

The concepts are often used interchangeably as they work closely together. But when it comes to the design disciplines involved, they refer to very different specialties in mobile app development.

Related: Here’s a Quick Way to Design Your Very First Mobile App

In this article, we look at the importance and differences of UX and UI design for your mobile app.

 

Melbourne App Developers

The diagram above is a great starting point for defining the high-level differences between UX and UI design. Source: Medium

 

What is User Experience Design?

At Launchpad App Development, our User Experience Designers outline the end-to-end experience that users engage with when using a mobile application or website. As the Product Manager for an array of mobile apps, I’ve come to notice that the UX process is a science.

How information is laid out from screen-to-screen and how end users interact with it is ultimately the result of the UX Designer working closely with entrepreneurs and businesses. They collaborate to define and plan business goals that make sense for the consumers who will ultimately use the specific app features.

As effective UX Designer is mainly focused on an app user being able to complete a certain task. Through research, wireframing, prototyping and user testing, the UX process ensures the user can ‘do a certain thing’ established through certain business goals in an intuitive and seamless manner.

By the time an app’s user experience has been created, the UX design process has included countless hours defining the business goals, prototyping the mobile experience and fitting it in the operating system (E.g. iPhone and iPad Apps) so that the experience is built and integrated with existing navigational flows.

They know the best practices that will lead to the most seamless experience for a user from how to layout an entire screen (big picture) to the intricate details (small picture). An example of this may be when to use a dropdown box rather than a text input field, segmenting button types (primary, secondary and tertiary), the app onboarding experience, and much more.

Related: What do Successful Apps have in common? These 7 Essential Onboarding Strategies!

As such, a UX Designer needs to ensure that an app logically flows from step-to-step. In other words, their core responsibility is to build an experience that feels intuitive and right for the user. An app is intuitive when the user can go through screens without have to think about what they are doing.

Like a scientist, the shared set of known basic UX Design principles have been established through trial and error when producing a desired outcome. Therefore, a UX Designer needs to find the solution to a problem as quickly as possible from a list of potential paths that lead to the same result. A UX Designer is like a doctor – he or she can prescribe a number of different types of medicine to cure your cold, but based on their knowledge about you, they choose which one most suitable to reach a desired outcome for you.

 

What is User Interface Design?

As previously noted, User Interface Design involves taking the output from the User Experience Design and turning it into an art. The UX process defines what a user does on a page or within the navigational flow of an app. On the other hand, the UI process defines how that page/flow looks and feels.

UI Design is an art form because it focuses on all the aspects that make a mobile app beautiful and fun to use: graphics, colours, animation, typography, button styling, gesture-based navigation tools etc. The UI components on any given screen come together to provide the overall aesthetic feel for any given mobile app.

App Development Australia

The iPhone’s gesture-based navigation tools. Source: The 4 Characteristics of Successful App Startups

 

In an article about the distinctions between UX and UI design, Dain Miller captures the essence of great UI Designers. They design for emotion.

A UI Designer takes wireframes and prototypes to a completely new level by making sure that users feel in their element when navigating a mobile app. It’s not just a mix of flat and material designs coupled with some pretty pictures. The UI Designer is building a state of mind where the user feels 100% comfortable and confident with the mobile app.

For example, the UX Designer may outline that tapping a button directs a user to another page. The UI Designer takes this information to create a visual signal to the user that they are being directed to another page. This happens through the button changing colour to signal the next page is loading.

This is why we consider UI to be an art form. It’s not just about building overall visuals that put mobile users at ease when using an app. A great UI Designer considers every single interaction to provide those small, yet critical cues that visually signal a very simple and pleasant message to the user: “You’re doing great, you’re on the right track, keep going.”

 iPhone App Development

UX Designer vs UI Designer. Source: UX Motel

 

The Difference Between UX and UI Design

The image below presents the most common difference in the outputs of UX and UI Designers. The one to the left is part of a UX wireframe done on Lucidchart. It’s predominantly black and white with a simple layout of the elements to be featured on the screen. On the right side is a Photoshop version of the Life Pulse Android Wear App produced by the designer.

Android App Development

 

In Career Foundry’s guide to UX and UI designers, the expected deliverables for each role were summarised as follows:

Australian App Developer

 

One of the deliverables to note from the list above is the wireframe. The wireframe creation includes a variety of conditions that are triggered by different elements throughout the app. In my experience, creating wireframes often feature a long list of conditions the developers must follow during the coding process. For instance, tapping on the X button directs me to the Y page. The UX Designer is responsible for calling out all these specific details.

When it comes to the UI Designer, they are responsible for redlining each app screen they create. Each redline provides intricate detail into the typography, padding, graphics etc. it refers to. Essentially, all elements on an app screen are specified by pixels to ensure the front end is implemented correctly.

So why do great UI Designers undertake such a time-consuming task when creating a mobile user experience? Well, as the late Steve Jobs so succinctly put it: “Details matter, it’s worth waiting to get it right.”

 

Key Takeaways

We focused on the main differences between UX and UI Design when it comes to mobile apps. While both processes cover different areas of expertise with many sub-specialties, there is a great degree of fluidity between them.

A mobile app that looks great but is difficult to use is an example of good UI and poor UX. But an app that is usable but looks horrible has a great UX process and not-so-great UI.

The right UX and UI processes should be your first priority to create market-leading user experience for your mobile app.

What do you think makes a great mobile user experience? Share your thoughts in the comments section below.

Ready to design a successful mobile app? Contact us for a free 1-hour discovery session and take the next step today.

 

Australian App Developers

 

 

7 Onboarding Hacks to turn App Downloads into Active Users

App onboarding increases the likelihood of new users becoming loyal customers of your app. Why should you apply onboarding strategies for your mobile app? Simply put, if users don’t understand your app right away, there’s a good chance they’ll never open your app again. 

The onboarding process is designing the first impression a user has of your app. Doing it correctly increases the chance of successful user adoption. The onboarding procedure highlights the key benefits and features to reinforce your app’s value. An app’s retention rate increases by 50% with a strong on boarding process making this practice is essential to app success.

Onboarding allows your app to build strong relationships with engaged users. When done poorly or ignored entirely, you risk users not understanding your app through a negative experience that leads them to potentially abandon your app altogether.

So what exactly are the key aspects to a great onboarding experience? Read on to find out the 7 best app onboarding strategies that are guaranteed to keep your users satisfied, informed and coming back for more.

 

1. Highlight Your Value Proposition

A lot of startups and businesses make the mistake of trying to tell users everything they can about their app, rather than showing how their app offering can improve the user’s life.

People don’t care about features – they care about what they can do with those features. That’s why you should always lead with the value proposition of your app. As previously mentioned, a value proposition is a positioning statement that explains the benefit your app provides for whom and how your app does this uniquely well.

Now I’m not saying that impressive functionality and innovative features aren’t important, but in the long term, showing your users what they can do with those features is what wins them over. Jason Fried, Founder and CEO of Basecamp, said it best:

Melbourne App Developers

 

2. Emphasize Core Features

While your app’s value proposition should always come first for onboarding, your target audience still need to understand the main functions of your app. Showcasing the key features of your app to users will help them follow through with desired actions by utilising highlighted key buttons and callouts.

Remember, don’t go throwing in the kitchen sink when onboarding. Instead, just stick to the core features that demonstrate the value your app provides. Those less-essential-but-really-cool features can always be showcased later with your second, third or fourth app promotion. These additional features can easily be introduced by apps using in-app messages.

App Development Australia

One Minute Closer focuses on the key features that users care about in onboarding.

 

3. Only Ask Users For What You Need

Many apps require messaging permissions or data access in order to provide the most valuable experience. By using permission requests, you can ask users to allow your app to access this data.

When particular data is critical for key app functions, be sure to prompt the user to provide data access. This does not mean you should bombard users with permission requests during the app onboarding process. Research shows that 60% of users have chosen not to install an app after finding out how much personal information the app requested.

The best way to avoid losing potential users is to only use essential permission requests initially. Clearly state why you are asking for access to only these areas of their smartphone and how that information is vital to them getting value from your app. Save ‘nice to have’ permissions for when the potential user is an engaged app consumer.

 

4. Make It Easy to Sign Up

The sign up process is a can often become a barrier to app adoption, so you need to make sure the signing up to your app is simple, fast and easy.

If possible, you should always give users the option to log in to your app with an existing social media account, such as Facebook or Twitter. Not only do social network options allow users to access your app in one or two clicks, but it also helps them to build trust with your app offering.

iPhone App Development

Apps that let users log in with Facebook, Google Plus or email. Source: Kiip

 

To optimise your app user onboarding process, test a variety of login options – do more users prefer to sign up with their email address or via social? Do users prefer to sign up with Facebook or Twitter? Could you get rid of a sign up route all together?

 

It is also important to experiment with timing. Some apps require users to sign in as soon as the app is launched, even before onboarding begins, while others have more success prompting users to sign up after the onboarding process.

 

5. Keep It Quick & Don’t Overwhelm Users

Stick to the basics when prioritising your app’s on boarding experience.  You don’t want to force users to swipe through countless screens before they even try your app!

Get your point access with app screenshots and illustrations rather than written explanations. As a general rule of thumb, stick to one feature explanation per screen to ensure that users don’t become overwhelmed. It is recommended to include progress indicators as part of your onboarding process.

 Wearable App Development

Progress indicators show how many onboarding screens users need to read through. Source: Life Pulse

 

Progress indicators are often presented as parallax images or small circle that provide the user with a sense of build-up and movement. These indicators help users understand if they are near the start, middle or end of your app’s introduction.

 

6. Avoid the Obvious

An efficient app onboarding experience gets to the point. Therefore, you need to trim off any redundant fat to keep the onboarding process as streamlined and quick as possible.

Stating the obvious is a waste of time. App users understand that a camera icon will launch their device’s camera function, while most users will know the type of icons associated with liking and sharing functions, just as long as they’re not too different from the norm.

If you’re not deviating too far from standard design principles, explaining an app’s navigational framework is largely unnecessary.

 

7. End With a Call-To-Action

To guide users towards the next step to take at the end of your app’s onboarding experience, consider integrating a direct call-to-action (CTA). Prompting users to get immediately involved with your app helps them get excited about the app and grow towards being engaged users.

Mobile Music Streaming Service Spotify implements an effective CTA technique. One look at Spotify’s homepage makes it pretty clear that their goal is to get users to subscribe for a paid premium account, while the CTA for the free sign up option is very much secondary.

App Development Melbourne

Spotify’s homepage features an effective call-to-action. Source: HubSpot

 

Not only does the headline give this away, but so too does the colouring of the CTA buttons. The ‘Go Premium’ CTA is coloured lime green so it pops off the page. In comparison, the ‘Play Free’ CTA is plain white to blend in with the rest of the page. This contrast is done to draw potential Spotify users to the premium CTA.

 

So the App Onboarding Process Is Over – What’s Next?

In most cases, users want be able to know ‘everything’ about your app within the onboarding process.

Therefore, it’s important to make resources available to users that allow them to continue learning about your app’s functionality after onboarding. Your most loyal and engaged users will seek out these informative materials, so make sure you have them ready!

What is the onboarding process for your app? How could the onboarding experience your app provides be improved? Share your thoughts in the comments section below!

 

The Blueprint to Designing Your App Icon

As the visual anchor for your app, you need to nail the icon design at the beginning. In this post, we discuss the best practices to creating a memorable and unique icon that entices app store browsers to download your app.

Uber may only be 6 years old, but that didn’t stop the $85 billion company from recently rolling out a redesign for its entire brand. In doing so, Uber completely changed its highly recognisable monochrome U-shaped icon into something that looks like:

a) A backwards ‘C’

b) An evil Pac-Man

c) It’s forever updating

d) All of the above

So what was Uber’s rationale for the new icon design?

The square is meant to represent the bit — a nod to Uber’s technology. The colours and patterns being introduced to the branding represent the atom — the people and things that Uber transports and the places where it operates.” 

Travis Kalanik, CEO of Uber

That sounds kind of cool and interesting, but Uber’s previous icon had imprinted itself in the minds of budget-conscious travellers everywhere. So why would the transport unicorn completely drop its familiar ‘U’ for a non-distinct shape?

Armin Vit opines for Brand New: “Let’s assume that it’s a matter of being used to poking an app icon for the last six years and that we just need to get used to poking at this new one. Even then, it seems like this is an icon for something else altogether.”

Uber App Icon

Uber’s new icon eating it’s way through the transportation industry.

An app icon is the one, singular piece of graphic design that users will interact with first each time they see your product. A great app icon becomes synonymous with what the app enables users to do and how it makes them feel.

So you’ve validated your app concept and now need to design an identifiable and unique app icon. But what exactly makes a great app icon?

We’ve put together an essential guide to designing an app icon that screams ‘Install ME!’… Without the unnecessary redesign 6 years later.

Scalability – Big or Small, the Icon Needs to Look Good

Your icon is going to be shown on a variety of screens, and in a variety of sizes, so it’s important your creation maintains legibility. It needs to look good on the App Store, on Retina devices and even as a favicon for the app’s promotional website.

One Minute Closer App Icon

An app icon needs to work at multiple resolutions retaining the legibility of the concept across the range of sizes. Source: One Minute Closer

When designing your app icon, consider the following scaling tips from App Icon Template:

  • Design and test the icon in multiple contexts and sizes.
  • Think simple and focus on a single shape or element.
  • Your icon should retain its recognisability when scaled.

As for software applications that let you design with this scalability, we recommend the use of Adobe Photoshop. If this is your first attempt at creating an icon, working with a free Photoshop template from AppIconTemplate.com is probably the best approach.

Simplicity – Clearly Convey What Your App Does

You have a confined 57×57 pixel space for your app icon. This is the first thing that browsers see when searching on the Apple App Store and Google Play. Do these potential users a favour by having your icon clearly convey what your app does.

You can’t always rely on users tapping your app to view it’s optimised screenshots on the preview page. Your icon should stand on it’s own.

App Analytics company App Annie provide the following rules of thumb to keeping your icon simple:

  • The most effective icons have a simple design and clear message.
  • Make sure the icon represents the core brand values of your app. This could be the app’s primary function, such as Gmail’s use of a letter or a gaming app using the main character.
  • The colours used in the icon should pop while still reflecting the in-app colour scheme.

Applying these rules of thumb will greatly assist in highlighting your app’s unique selling point.

Uniqueness – Stand Out in the Crowd

Let’s consider a user who downloads your app, closes their iPhone and then opens their menu screen later on. On a smartphone that’s already filled with apps, what is it about yours that is going to grab the user’s attention and stand out from the crowd? It’s an app icon that’s instantly recognisable and unique.

App Store Productivity Apps

It seems that uniqueness doesn’t enter the design process for Productivity apps. Source: idApostle

When attempting to create a unique icon, focus on a shape or object that stands out. Consider Snapchat’s ghost. The icon both sticks out and highlights the app’s unique selling point of ‘poof-it’s gone’ snaps.

Also consider choosing colours that contrast and pop, as this is often an overlooked way of positioning an app. Spotify does this well by pairing green with a starkly contrasting black. When a user browses the App Store for a music streaming service, these colour choices are what help Spotify stand out from competing apps.

Avoid Text – The App’s Name Often Accompanies the Icon

Words and images are separate representational tools. Combining them in what is supposed to be a visual representation often leads to a cluttered and unfocused experience that is difficult to decode. As such, you should avoid using copy or text in your app icon.

‘But this blog started with a Kanye-like rant about how Uber’s rebranding from a ‘U’ text icon to an unrecognisable shape was a mistake’, I hear you say.

Well first of all, I think we can all agree that this blog’s introduction made more sense than any rambling tweet from Kanye West.

Secondly, if you’re using a singe letter and validate it as a suitable fit, then the letter avoids being ‘wordy’ and becomes iconic by itself. However, this is more often the exception than the rule.

Your app’s name will be written next to the icon on the app stores and smartphone menu screens. Therefore, using text – especially if it’s your app’s name – is redundant.

Before designing your app icon…

An app’s icon is highly influential for standing out on the app store and engaging potential users with your product. Make sure that it’s scalable, simple, unique and visually conveys the app’s core value.

Along with the product strategy you plan to implement, nailing the icon design will put you on the right path towards a successful launch into the market.

Do you have any tools and tips for designing an app icon? We’d love to hear about them.

A 3 Step Guide to Naming Your App

You’ve come up with a groundbreaking idea for an app and this has prompted the question: What should it be named?  

The name you choose for your app can feel like an emotional decision. After all, the very essence of the word ‘name’ tells a story of self-identity and individualism. So you’ve passed it by some friends and have been unpleasantly surprised with their lack of enthusiasm. That’s when you discover that maybe it’s not all that simple.

In my experience as a Melbourne app developer, I’ve seen too many entrepreneurs overlook one of the most important facets of an app’s product strategy – choosing an optimal, descriptive and unique name.

Unlike many traditional businesses and products, app software is bound by market influences and restrictions unique to the digital world. The right name has the potential to help propel your app to App Store stardom. On the flip side, the wrong name may prevent your app from ever getting off the ground.

When it comes to naming your app, you can remove some of the uncertainty. Giving this task the attention it deserves will allow you to optimise the app’s market penetration and drive your target audience towards taking the first and most important step: Downloading your app.

Let’s explore three of the most important steps for how to name your app.

 

Leverage Keywords

Knowing what people are searching for will help you come up with a name that’s both meaningful and distinguishable. More apps are discovered through the App Store’s keyword based search engine than any other discovery method.

Your app’s name is the chief form of meta-data that influences its ranking in the App Store search results. To increase the visibility of your app and the traffic driven towards downloading it, I highly recommended including keywords in your title.

App Analytics Provider Tune found that having a keyword in your title improves your app’s search ranking for that keyword by over 10%.

However, this doesn’t mean that you should just stuff every keyword you can conjure up into your app’s name. Although you have a 255 character limit to utilise on the Apple App Store, you shouldn’t name your app ‘Free Pro Weather Tracker *INSERT MORE KEYWORDS* Mobile iPhone App’ for two reasons:

1) Because… Well, you just shouldn’t.

2) Because you should use the app’s name as an opportunity to insert contextually relevant keywords that will translate to more App Store downloads from your target market. A good rule of thumb is to include a maximum of three top target keywords in your app name.

Consider the high-ranking Gumtree Australia App. Its name on the App Store is ‘Gumtree Australia – Free Local Classifieds Ads’. This helps the app to rank second in the search results for each of the following keywords: ‘Australia’, ‘Local’ ‘Classifieds’ and ‘Ads’.

iPhone App Development Melbourne

The Gumtree Australia App on the Apple App Store. Source: iTunes

To help find the right keywords for your app, use tools like SearchMan and Sensor Tower. These tools allow you to review what keywords highly downloaded apps in your category are using and find new ones for App Store Optimisation.

 

Describe the App

An app name that’s as descriptive as possible makes it easier for potential users to find the app.

Research from Appbot Founder Stuart Hall suggests that the most common words featured in top charting apps include ‘Free’, ‘Pro’ and ‘Tracker’. Including illustrative terms and phrases in the first 30 characters of an app’s title will ensure that App Store browsers see them.

If you’re releasing the app on the Android platform, you need to consider how its name will affect search rankings in Google Play. Google only allows for 30 characters in a title, so including descriptive words at the beginning of the app name is crucial for Google Play search optimisation.

App Developers Australia

One Minute Closer’s title on both app stores features descriptive terms, including ‘FIFO’ and ‘App’. Source: One Minute Closer

Why do you want these words seen by App Store and Google Play browsers? I’m glad you presumably asked!

They convey what people desire when they look for any type of app. Let’s say that a browser knows that an app is the ‘Pro’ version with a ‘Tracker’ function just based on its name. If this is the type of app that the potential user is looking for, they are then eased towards downloading it.

Once downloaded, the beginning of your app’s name will directly influence user retention and engagement. 20% of apps in the market are only opened once, with a subsequent 11% being opened twice before being more than likely deleted from the user’s device. When someone downloads your app, the name should help them remember why they downloaded it and what the app does for them. This will maximise your app’s adoption rate and convert one time users into repeat consumers.

 

Workshop Names

With your keywords and descriptive terms identified, it’s time to put potential app names into action. When evaluating one or two word names, consider the following workshop ideas:

Attempt only two-syllable names.

Constraints are valuable when undertaking the creative process of naming an app. They help to avoid drifting towards irrelevant tangents and, in turn, the wrong name for your app.

Sticking to two syllables is the best constraint I have found. Not only does following this rule generally lead to a great name, but it is also proven to be the most memorable form of word composition for consumers. Brands that have applied this rule with great success include Google, Twitter and Tumblr.

Mix and match words together.

Consider your gathered keywords in terms of 1) their relevance to your app, 2) their memorability compared to similar apps, and 3) their sentimental benefit to users. Select the words that are relatable to each of these values and try putting them together.

A unique compound or portmanteau word can lead to a name that distinguishes your app from others on the App Store. When mixed and matched right, your app name can outline the key function/s of the product, as well as value for end users.

Examples

  • Snapchat – A compound of words that encompasses the app’s main features of sending photos and videos (Known as ‘Snaps’) and messaging friends (via the ‘Chat with…’ page).
  • Instagram – A portmanteau word that represents the app’s value (‘Instant’) and key function (‘Telegram’).

naming your app

Snapchat and Instagram had completely different project titles while in development. For both of these apps, the right name set the wheel in motion for user adoption, market success and multi-billion dollar offers from Facebook. So have a go at mixing and matching the keywords and descriptions you’ve discovered. And when doing so, consider this: would Snapchat be worth $19 billion today if it was still called Picaboo?

 

Before naming your app…

An app’s name is highly influential for app store optimisation and engaging potential users with the product. Research it. Describe it. Workshop it.

Along with the product strategy you plan to implement, getting the app name right should be your first step towards a successful launch into the market.

Do you have any tools and tips for naming an app? We’d love to hear about them.