contact us

send us your message

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Blog

our latest news

How To Design A Mobile App Using User Interface Design Principles

By

Louie Pitlo

|

March 9, 2017

With limited funds and so much to think about when founding and running a startup, UI development can often be the last thing on the minds of many startups and small businesses. Nonetheless, these days great UI is no longer simply the differentiator between a new startup and its more advanced competition, it's a necessity.

What is user interface design?

User interface design sits between user experience and graphic design UI. The former is how your app makes its users feel, and the latter is how your app looks. A good user interface design is the practice of understanding how your users will interact with your app or platform. Let's have a quick look at the UI Designer’s responsibilities:

       Look and Feel:

       ü  Customer Analysis

       ü  Design Research

       ü  Branding and Graphic Development

       ü  User Guides/Storyline

Responsiveness and Interactivity:

      ü  UI Prototyping

      ü  Interactivity and Animation

      ü  Adaptation to All Device Screen Sizes

      ü  Implementation with Developer

      ü  User interface design and mobile

User interface design existed even before the creation of iPhone. But because of iPhone’s mobile interface, UI design had become important. This is because the iPhone came with the ability to use gestures for shortcuts and other actions.

That sense of touch is called “haptics” and mobile apps are built with a haptic interface: people can use gestures, like taps and swipes, to navigate. Most smartphone users understand the single finger gestures like tap, swipe and pinch but they don’t always remember the more complicated two or three finger gestures. Here’s a table that illustrates some of the more common gestures.

The touch target

When designing for mobile, you need to be aware of the “touch target rules.” Basically, how much space a finger needs to make sufficient contact with the screen. In UI, developers visually guide the user through a product’s interface via interactive elements and across all sizes/platforms. This is actually the reason why so many apps have similar looking interface designs — for example, navigation menus appearing at the bottom of the screen — the touch zone is your answer as to why.

Here is a running idea list that a good UI has which we're actively testing and writing about – it results in high conversion rates and UX that is easy to use.

Use a One Column Layout instead of multi-columns

A one column layout will give you more control over your narrative. It guides your readers in a more predictable way from top to bottom - guide them with a story and a prominent call to action at the end.

 

 

Merge Similar Functions instead of fragmenting the UI

Keep an eye out for duplicate functionality labelled in various ways - this puts a strain on your readers. Often, the more UI fragmentation there is, the higher the learning curve which your readers will have to deal with. Consider refactoring your UI once in a while by merging similar functions together. Then Simplify.

Repeat Your Primary Action instead of showing it just once

Since long pages are becoming the norm, try to repeat your call to action (CTA) across numerous pages. It doesn't hurt to have one soft actionable item at the top, and another prominent one at the bottom. In between the top and bottom pages, there’s a potential solid place to make an offer or close a deal – insert your CTA.

Use Distinct Clickable/Selected Styles

Visual styling such as colour, depth, and contrast should be used as a reliable cue to help readers understand the fundamental language of navigating your interface. Use this to guide your readers. Observe the style below…

 

Tell Who It's (product or service) For

Try communicating the qualifying criteria of your customers so will be able to actually connect more with them while at the same time hinting at a feeling of exclusivity.

Create Fewer Form Fields

Try to question if each field is really necessary and remove as many fields as possible. Typical readers are inherently resistant to labour intensive tasks such as filling out numerous form fields.

Expose Options

Pull down menu items only works for those interfaces that are highly recurring in terms of use. Use it for options that are predictable and don’t require new learning as in sets of date and time references else you may lose it to your path towards conversion.

There is a lot more involved in creating great mobile user interfaces and UI development.  But hopefully, you found some of the above suggestions of great benefit for your enterprise.

To learn more about making the most of your UI check out our UI design tutorials, contact us!

...

featured posts
development

Strategic Planning: A Project Plan Creation Process To Success

Here is a guide on strategic planning for small business made easy. It is also useful for organisations of all sizes looking for practical guidance on project planning.

Social Media Management

How to Get People To Engage With Your Socials with your Content

Read this article and get to know how to get people to engage with you in your social media.

uix design

This Is The Formula For Creating An Insanely Successful User Experience on your Website

Every business uses their websites to express themselves, so how are you going to make sure your voice is heard and your customers find what they need on your website? Read on...