Make better apps - Guide for Better UX

Download Make better apps - Guide for Better UX

Post on 06-Jan-2017




4 download

Embed Size (px)


  • #RCApps

    How To Make Beautiful Apps People Will Love

  • Table of ContentsIdea



    Interface Design


    Testing and Feedback

  • Introduction

    Whether its sending an email, creating a reminder, playing music, or watching a video, a good app makes the process quick, easy and fun.

    With over 2 million apps in the App Store, design, usability, presentation and performance are the key components to standing out from the crowd.

    This guide will give you the tips, tricks and resources to make a beautiful app people will love.

  • IdeaConception of your app

    It all starts with an idea. New or old, your idea is going to help make something easier for someone.

    As a developer, you need to identify the primary goal of the app (your #appgoals) and stick to it.

  • ResearchCheck if there are other apps similar to what youre building. Download these apps, try them out and see what you like/dislike about them. Pay attention to the App Store listing and note the screenshots, description, language, and cost. Think about what would make you want to download that app - these are likely the same things users will notice about your app.

    Once youve downloaded the app take notes on your experience with it. Heres some key elements to focus on:

    Launch icon Splash screen Color scheme Fonts Icons Help screens Navigation

    What works? What doesnt? Write everything down and make a master list of dos and donts. Look at reviews in the App Store and see what people are saying about that app. Fortunately (or unfortunately?) app users arent shy about vocalizing their feelings. Now that you have your master list you have a frame of reference to check your app against.

  • FlowWith your #appgoal clearly defined, you need to map out the actions a user has to take in order to achieve the goal. Your app might have multiple goals, but just focus on the primary goal to start with.

    A good app enables a user to achieve the primary goal in 3 steps or less (unless youre making a strategy gaming app!). Identify what these steps are and create the navigation flow.

    Important Note: Do not confuse navigation with actions. Whats the difference? Primary navigation items are tied to a screen, whereas actions are tied to things you can do on that screen or within specific elements of the screen.

  • Interface DesignA good interface is more than just a pretty, colorful layout. It can be simple and plain, as longs as its very user friendly. What should you focus on?

    Navigation bars Tab and search bars Activity views Collections and controls Like buttons Pickers

    Make it perfect by referring back to your master list to identify interface elements that you like versus what you dont. Seek inspiration from different apps to see how they create components and datasets. Inspired UI and Pttrns are both good resources for examples of nicely designed components like those listed above. For examples of simple, yet elegant apps, check out Kindle and Spark.


  • Color Scheme

    Colors play an important role in giving your app a personality. Colors evoke emotions and, when paired right, can create a sense of harmony. Dont shy away from using bold colors - even for business or productivity apps - as long as you dont overdo it. Square Cash,, Yahoo mail and Clear are some of the popular apps that use colors that most developers would typically avoid.

    It is important to have a substantial contrast between your background and text colors, as well as between the elements using primary or secondary colors. This will ensure better readability and also gives your app a clean look and feel.!/id577586159?mt=8&v0=WWW-NAUS-ITSTOP100-FREEAPPS&l=en&ign-mpt=uo%3D4!/id577586159?mt=8&v0=WWW-NAUS-ITSTOP100-FREEAPPS&l=en&ign-mpt=uo%3D4

  • Color Scheme(continued)

    PrimaryYour primary color is the base color youll use for elements that are persistent throughout your app, such as the navigation and status bars. Oftentimes this is your brand color and helps users easily recognize your apps screens by association, like with the Facebook and YouTube apps. Your primary color is also often used on calls to action, such as buttons or the tab bar.

    AccentAccent or complimentary colors help define secondary actions and are also often used for adding style highlights.

    SupportiveCertain types of apps will also require tertiary colors to indicate different states of a particular action, element or screen. As a rule of thumb, red denotes failure or error, and green denotes success or completion. While you might choose to use different shades of these colors, do not veer away from them completely. Users associate these colors with good or bad actions, and while using different colors might make you stand out, it most likely wont be in a good way.

    One of the most important aspects of choosing a color scheme it to make sure the colors you choose compliment each other. There are tons of resources to browse color palettes, including these three popular options: Adobe Color, Color Lovers, and Coolors.

  • Typography

    Font plays an equally important, if not bigger, role than colors in providing an enjoyable user experience and enhancing the accessibility of your app.

    Fonts help set the tone of your app and also help associate your product with your brand and style. For example, overuse of bold and capitalized letters can create an unpleasant experience (imagine an app yelling at you with words in all caps). On the other hand, all lowercase letters could make the experience feel unfinished or juvenile.

  • TypographyWhen choosing your font, its best if you find a font family with multiple font weights and options so you can easily keep your style consistent. If youre married to a font that doesnt have multiple options, look for font pairing options that go well with your primary font. Whether youre using one font or several, make sure your font size, styles and weights are consistent for similar elements throughout the app. Your navbar title, buttons, labels, and text should be consistent from one screen to the next for a clean user experience.

    As always, make sure youre using fonts with proper permissions/licenses like OFL - Open Font License - that permit embedded use for apps etc., and check the terms of use for the specific font that you intend to use. Font Squirrel and Google Fonts are good sources to find fonts with these types of licenses.

  • Custom IconsIcons help users quickly identify and make associations with elements and actions. Using icons for common actions, such as delete or back, as opposed to plain text, makes it easy for users to quickly identify the intention of an action item. However, its also good to have a label next to, or inside of, an icon if it isnt completely clear what its purpose is.

    IOS provides a standard set of icons you can use, but, more often than not, youll find that you need some icons beyond what you get in the standard set. You can get these with third party icon packs, but make sure you keep a close eye to them to ensure consistency, especially if you end up buying more than one pack. Icons8, Graphicriver, Creative Market and stock photography websites are all great resources for good icon options.

    Interface Icons


  • NavigationYour navigation can be flat/linear, hierarchical, or content driven based on your type of app and the intended user flow.

    Flat NavigationFlat navigation is ideal to represent all content at the same level. This is great for apps where the actions go from one to another and/or back again - like a photo gallery where you use a swipe gesture to go from one photo to the next.

    Flat Navigation

  • Hierarchical navigations have nested actions. You might think - Why would I hide my actions? I want my users to be able to access everything about the app from one place, but this doesnt always lead to good user experience.

    Too many options can make the navigation unclear for a user and they could end up feeling like your app is complicated and not user-friendly. The navigation hierarchy must be clear to users so they understand where they are in the navigation and what options they have at that level.

    The best example of a hierarchical navigation would be Amazon, or similar e-commerce apps. These have categories, subcategories, sub-subcategories,