Mobile App Design: Must Have Elements To Design a Good UI


After writing a few articles featuring web design, we thought it would be fun to write an article on App designs this week.

Statistics show that the number of mobile app downloads reached an enormous figure of 179.63 million in 2015. This means that 179.63 million people have gone through a user experience and 179.63 million pairs of eyes have assessed an app’s design. This is a huge indication that mobile app designs are worth taking a closer look!

The first half of this article will showcase mobile app designs and user interfaces, then I’ll elaborate on the micro details towards the end.

First up, 3 mobile apps that deserve our applause:

1. Qanvast

If you go into Qanvast’s website, you would read that it introduces itself as:

“a platform for home remodeling and design that connects homeowners and trusted home professionals in a visually stimulating environment.

It is the easiest way for homeowners to get design inspiration, expert advice and profession reviews and quotes they need to turn a house into a home.”

Basically, Qanvast is a visual paradise for all things interior design, and a one-stop platform where users can view catalogues, consult experts and perform research for their interior design agendas.

They do have an awesome web design on their website, but for today, let’s take a look at their app!

Qanvast Logo

qanvastlogo

Minimal shadows and defined lines. These are characteristics of flat design, which is currently the in-thing amongst designers.

Click here to see what are the other “in” designs these days!

Qanvast User Interface Design

IMG_0074 IMG_0075 IMG_0076 IMG_0077 IMG_0078 IMG_0079 IMG_0080 IMG_0081 IMG_0082 IMG_0083 IMG_0084

 

 

Track the green signals at the bottom of the screen so you know how the user experience is like!

When an iOS user opens Qanvast for the first time, the user is greeted by a skilfully edited image, probably thanks to a diffusion filter.

With 10 words, “The only app you need to simplify your renovation journey,” Qanvast nails its mission into the user’s mind, promises something that it is designed to deliver, and assures the user that downloading the app benefits the user more than itself.

Swipe left and the image smoothly switches to yet another well-edited image. The user is prompted to “Request for Quotes”, which pre-empts the user about what the app would allow the user to perform when logged in.

Swipe left again and the user finally reaches the log in/sign up page. This is also the first page for Android users.

Once logged in, there are 5 options:

  1. View feed (the telescope icon)
    Images are tiled one after another, with quotation prices attached on the top left. Occasionally, there are articles like “How To Make Your Home Elderly Friendly” (only accessible through the app) lined up between sales packages too.
  2. Get quote request (the money speech bubble icon)
    User is prompted to fill up relevant personal information for the purpose of soliciting interior design services. This allows Qanvast to personalise its services  to the needs and wants of its individual users.
  3. Products (the chair icon)
    There are two sub options in this section, where the user is given the choice to shop by brand or function. Its current headings are “shops” and “categories”, which I personally feel are a bit vague.
    There is also a minimised shopping list at the bottom, which can be expanded to view items selected for purchased.
  4. Conversations (the man with speech bubble icon)
    This is where users get to communicate directly with designers and seek their expertise.
  5. Your profile (the dot dot dot icon)
    Users get to see a summary of their activities on the app, or even choose to bypass the first four options and go directly to this one. It serves as a sort of main control!

With an app like Qanvast which allows your users to perform complex activities like view interior design catalogues, consult experts, and request for quotations all through your handy mobile phone, you are making it as convenient as it gets, for them to patronise your business!

2. RedMart

Tradegecko.com interviewed the co-founder of RedMart, Roger Egan III, and at one point this was what he said:

” Being in the grocery business, we are very different compared to other eCommerce businesses. That is because we have many products per order – our average order consists of about 14 lines and 22 product types. When we will go for fresh food we will probably have close to 30. And because we are picking and packing so many different products for each order, warehouse optimization is much more important for us than for a normal eCommerce company.

[…] We have an algorithm that optimizes the pick tasks and minimizes walking distances. We have an algorithm that does wave picking (putting the customer orders on the pick carts, so we pick six at a time – much more efficient than just doing one at a time). It increased our efficiency by 50%. Now that is the software side.”

Grocery shopping has been revolutionised with the advent of RedMart, which popularised online grocery shopping. Not that our neighbourly Fairprice  did not offer this service, but Redmart invested in softwares that optimised their operations, which provided efficient service and assurance to their customers.

 

Let’s assess their mobile app design!

RedMart Logo (iOS)

redmart

RedMart Logo (Android)

redmart-squarelogo-1462535910779

Red + a shopping basket

RedMart User Interface Design

IMG_0085  IMG_0087 IMG_0088 IMG_0089 IMG_0090 IMG_0091 IMG_0092 IMG_0093 IMG_0094 IMG_0095

RedMart’s mobile app is slightly less neater than Qanvast’s navigating system. However, it still allows users to perform complex tasks at the move of a finger.

Once you click on the “Get Started” button, you are brought to a “Starter Basket” with suggested products for you to view and select. Prices are stated clearly on the bottom right.

Tap on the “Filter and Sorting” button, and you’ll be able to select “all”, “new”, “on sale”, “in stock”, or sort your shopping list according to “popularity”, “brand” or “price”.

Alternatively, click on the search icon and type in the items you are looking for. Before you even type finish, the app would already present you with a list of possible items.

After selecting the grocery items you want to purchase, swipe left to view your shopping cart.

CHECK OUT NOW?  Yes, tap.

Now you have to:

  1. sign up for or log in to a RedMart account
  2. fill in your address, name and contact number (there is also an option to key in special requests, if any)
  3. select your preferred time of delivery
  4. select payment option and key in credit card or paypal details
  5. wait for your groceries to be delivered!

Don’t you want your own customers to have an easy time patronising your business too? Identify an opportunity and design an app that benefits them more than you!

p.s. besides interior design and grocery shopping, there are many other online shopping avenues in Singapore that you might be interested in! Click here to read about how a 23 y.o. Singaporean shops online.

Grab

Grab started in 2011 by Anthony Tan and Hooi Ling Tan, MBA graduates at Harvard Business School. It first started as a taxi-booking app, and has since expanded into a ride-sharing platform across 28 cities in six Southeast Asian nations. Read more here.

The company offers a wide range of services through one mobile app:

GrabTaxi: Book a budget or premium taxi from Southeast Asia’s largest network of drivers.
GrabCar: Ride in comfort in a private car and pay a fixed fare that is agreed upfront.
GrabBike: Get around the city in simply the quickest way possible.
GrabExpress: Send your parcels and documents with a delivery service you can trust.
GrabHitch: Hitch a ride or give someone a lift with our carpooling community.

Let’s study the mobile app that did the honour of making Grab the success that it is today!

Grab Logo

icon175x175

Just lines and curves. #minimalism

Grab User Interface Design

Screenshot_2016-05-18-16-58-31 Screenshot_2016-05-18-16-58-41 Screenshot_2016-05-18-16-58-59 Screenshot_2016-05-18-16-59-37Screenshot_2016-05-18-17-08-32 Screenshot_2016-05-18-17-08-39

Grab serves a specific purpose, and that is for people to do online transportation booking.

After signing in to Grab through Facebook or a mobile number, the user is prompted to key in the pick up and drop off destinations.

At the bottom, Grab offers options for the user to book various types of transportation: Standard Taxi, GrabCar (Economy), GrabHitch, GrabCar (Premium), Limo Taxi, 6-seater (Premium), even a 13-seater. According to the user’s choice, prices are displayed at the bottom portion of the screen.

After selecting your preferred mode of transportation, the app will start “finding you a driver” within your radius. All you have to do is wait for a driver to take your booking and track the driver’s progress towards your destination on the GPS system imbedded in the app.

You can sort your trips according to “personal” and “business” in case you want to do budgeting or claim transportation fares from your company, and make payment by cash or credit card!

Now… it is easy to look at these mobile app examples and think you can simply imitate their design. Job done! Well, that would work if your business idea is unoriginal, but that also means that the competition in your field is high and you would definitely need a competitive edge. Copying other business’ formats or successes is probably not going to work out well.

Let’s proceed to study the intricate details and implications of app design, that is User Interface and User Experience!

User Interface

A good website should have a thoughtful user interface (UI) that enhances user experience (UE), leading the website visitor to that check out button right from the start, smooth and sleek.

Likewise, a good mobile app should have a defined user interface to set the business for success.

A good user interface is one that focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.

Some questions to ask the designer of your mobile app’s interface:

  1. How would users interact with the interface?
    Think about what they would do with their finger or stylus. Will they push buttons? Drag and drop across the interface? Keep the interface simple. The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.
  2. How can you use appearance to direct users?
    Utilise colour, shape and size coordination to give users a clue about how the app functions. Think back to the green signals in the Qanvast app.
  3. Are the interface elements a reasonable size to interact with?
    Buttons need to be big enough for a user to be able to click it. This is particularly important in a mobile context that includes a touch component.
  4. Are edges and corners strategically being used to locate interactive elements like menus?
    Edges provide a boundary that the finger cannot go beyond. That’s a good location for menus and buttons.
  5. What information should you provide to pre-empt users before they perform a particular action?
    Tell users what will happen if they decide to move forward with their action. Use meaningful labels on a button, blinking buttons, or instructions before a final submission.
  6. Are there constraints put in place to help prevent errors?
    For example, not being able to press the check-out button until the user fills in a delivery address.
    Constraints should prompt users to adjust behaviour in order to move forward with their intended action.
  7. Do error messages provide a way out?
    Helpful error messages correct the problem or explains why the error occurred. They provide solutions for users to move forward.
  8. What feedback do users get once an action is performed?
    When a user engages and performs an action, the system needs to respond to acknowledge the action and to let the user know what it is doing. Make sure that the system communicates what’s happening.  Always inform users of location, actions, changes in state, or errors; this can reduce frustration for the user.
  9. How long between an action and a product’s response time?
    Immediate (less than 0.1 second), stammer (0.1-1 second), interruption (1-10 seconds), and disruption (more than 10 seconds).
  10. Is information chunked into seven (plus or minus two) items at a time?
    George Miller advises that people are only able to keep five to nine items in the short-term memory.

Things to take into account for the aesthetics of your mobile app:

  1. Lines
    They help define shapes, make divisions, and create textures.  All straight lines have a length, width, and direction.
  2. Colour palettes
    Colour choices and combinations differentiate items, create depth, add emphasis, and help organise information. There are even theories that examine how various colours psychologically impact users.
  3. Typography
    Which fonts are chosen, their size, alignment, colour, and spacing. Are they up-to-date? Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and readability.
  4. Unity
    Are all elements on a page visually or conceptually appearing to belong together? Visual design must strike a balance between unity and variety to avoid a dull or overwhelming design.
  5. Space
    Incorporating space into a design helps reduce noise, increase readability and create illusion. Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and aid scanning and readability.
  6. Consistency
    Use common UI elements. Users feel more comfortable and are able to get things done more quickly.  It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency.

Points curated from here and here.

User Experience

Now, not forgetting User Experience (UX).

What’s the difference between UI and UX?

horseI’ll use the analogy of horse riding. UI is the saddle and the reigns, while UX is the feeling you get being able to ride the horse.

More than just how it looks, UX includes how easy your site is to use. Does your site load fast? Do users get to complete their task smoothly?

By carefully crafting your user experience, you can ensure that your user stays on task and keeps moving, as if through a funnel, having been given just enough information and options at each step.

Focus primarily on two aspects of UX:

  1. Reduce friction in the form of wasted clicks, excess pages, false starts, going to the wrong page, slow page loads. These cause users to give up.
  2. Reduce irrelevant and distracting information. These puts doubt and indecision into the mind of the user.

Begin your mobile app developing project by looking at the objectives of the user and the business. Sketch out the various flows that need to be designed in order to achieve both parties’ goals.

The user might be looking to find a fact, order a product, learn a skill, download a document, and your business objectives could be anything from getting a lead, a like, a subscriber or a buyer.

Ideally, your flow should be designed in a way that meets both user and business objectives.

Learn more about funnel optimisation here.

Conclusion

Admiring good designs, whether web design or app design, is easy. Simply wishing that your business have a value-adding website or mobile app, is easy too. What exactly is your business about? What exactly are your customers interested in? Design a flow that simulates just that. For the mobile app, it’s all about precision and convenience.

Here at Web Imp, we have a crazy bunch of committed and passionate designers ready to take down the big guys for you.

Call us for a free consultation!

 



  • Previous Article
  • Next Article