Mobile applications are a tool of innovation that are transforming the retail world (Rigby, 2011) with interface design becoming an increasingly important factor in the success of an eCommerce app. (Cyr et al. 2006) The sensory experience and ease of use are key factors in determining whether a user stays and shops, and in-turn their loyalty to the application and their level of future use. (Jiang & Benbasat 2003) This blog post is going to highlight five top tips to create the perfect user interface experience.

The top five tips for an effective and successful app design are:

1. A simple and uncluttered interface – Bearing in mind that the screen size of a mobile is much smaller than a desktop/laptop the apps interface must be tailored to the smaller dimensions of a mobile phone. A study from Duchnicky and Kolers (1983) noted the effects that design on different screen sizes had on user’s comprehension and their perception of the apps. For example the size of text and the arrangement of buttons must be suitable for the size of screen they will be viewed from in order to make the users experience as easy as possible. One aid to keep in mind when designing this interface is the ‘thumb-friendly-zone’ which highlights the key areas and functions that are within easy reach of the thumb. (Apptentive 2016)

However there is a danger this tip can be taken too literally. The ultimate goal is to simplify the interface and make it more functional and usable. That doesn’t mean hide/miss out key functions. It’s important to maintain a balance between a clean and efficient interface while still containing the require/appropriate information, and functions. (Babich 2016)

Thumb-Friendly-Zones (Apptentive 2016)

3. A condensed & consistent navigation – Navigation is an important part of every user interface however unlike websites where you commonly find expansive menus that list all categories, sections, and promotions, this option is not suitable for the smaller mobile device. Menus must therefore be condensed and easy to navigate, containing only the most important categories/sections. And although it maybe an obvious point, the menus must be made to look interactive! Users may not even realize that it’s a menu if the options don’t look clickable (or tappable). Menus may seem to be just decorative pictures or headings if you incorporate too many graphics, or adhere too strictly to principles of flat design.

ASOS navigation menu example

3. Contrast for view – What a big pain it is to your eyes when you receive a mail full of bizarre color fonts and backgrounds from a newbie who has a recently discovered the word art. Same is the reaction when you come across applications that are very difficult to read and navigate. To avoid such a scenario, decide on high-contrasting color schemes that makes design and content stark clear. 

Contrasting colours example

4. A prominent ‘add to cart’ button – One of the key aspects of design for any eCommerce app is to feature a prominent call to action. If a customer finds a product they want to buy they must be able to easily and quickly complete the purchase. If they have to take too many steps, they are less likely to finalize the process. On product screens always having a view-able and easily distinguishable ‘add to cart’ or ‘buy now’ button will help make the purchasing process simpler and increase conversion rates. (Andrew, 2016) (An excellent blog from Econsultancy on creating the best call to action buttons can be found here)

Amazon CTA example

5. Fit the format, minimize the number of images – I’ve previously touched upon the impatience of users, one aspect of this is that users expect that mobile app screens load instantly. A simple method to improve app loading speed and improving the usability of your interface is to limit the number of weighty HD images and ensure your are using the appropriate format the device can support, especially on product screens where you are tempted to have multiple images.

John Lewis product page example

One final piece of advise…

Adhere to the multiple guidelines that have been underlined for user interfaces. Innovative and unique UIs can be great but there are strict guidelines. The guidelines vary version to version on which your app will appear, and for this you must include alternate resources to suffice multiple guidelines. The apps will be scrutinized properly before they are made open on major app stores like Apple Store and Google Play. So, it is important to follow these rules. The norms cover everything from icons to widgets to menus and activities. (Pal 2016)
Apple’s guidelines            Google Play’s guidlines

If you want to see some further examples of both successful and ‘unsuccessful’ UI design follow the below links.

20 Stunning examples of minimal mobile design

Bad mobile apps – UI design gone wrong

References

Andrew, P (2016b) Tips for Designing Beautiful eCommerce Mobile Apps [Blog] <https://envato.com/blog/mobile-e-commerce-apps/&gt; (Accessed on: 12/02/2017)

Apptentive (2016) Designing a Thumb-Friendly User Experience [Online] < https://www.apptentive.com/blog/2016/11/09/119-designing-a-thumb-friendly-user-experience/&gt; (Accessed on: 12/02/2017)

Babich, N (2016) The Art of Minimalism in Mobile App UI Design [Blog] <https://uxplanet.org/the-art-of-minimalism-in-mobile-app-ui-design-b21aa671dd7f#.l7m4q36zt&gt; (Accessed on: 12/02/2017)

Cyr, D., Head, M. and Ivanov, A. (2006) Design aesthetics leading to m-loyalty in mobile commerce. Information & Management, 43(8), pp.950-963

Duchnicky, L. and Kolers, A., (1983) Readability of text scrolled on visual display terminals as a function of window size. Human Factors, 25(6), pp.683-692.

Jiang, Z. and Benbasat, I. (2003) The effects of interactivity and vividness of functional control in changing web consumers’ attitudes. ICIS 2003 proceedings, p.93.

Pal, P (2016) 20 Tips: How To Design Great UI For Mobile Apps? [Blog] <https://think360studio.com/20-tips-how-to-design-great-ui-for-mobile-apps/> (Accessed on: 23/02/2017)

Rigby, D. (2011), “The future of shopping”, Harvard Business Review, 89(12), 64-75.