With more and more people starting to use mobile applications daily, it is now more important than ever for companies around the world to pay close attention to developing their own mobile applications, whether they be for the iPhone, Android, or a Blackberry. Having a mobile application however isn't the easiest job. There are a lot of applications out there that work perfectly well, but just don't look all that wonderful. This is important because an appealing, user-friendly interface is a primary method for attracting and retaining users.
Unfortunately, a great number of iPhone applications suffer from less-than-stellar design. This article will look at the design cosmetics of a popular shopping application, Amazon UK. We will look at what the design lacks and how it could be improved with examples from other applications. Tips and tricks throughout the article will show how to put these recommendations into practice, with links to other great sources to help you learn more.
If you find this article helpful, then please let us know in the comments below and we will definitely do more like this in the future!
Introducing The Amazon UK Application
First of all, let's start off with a small introduction to the Amazon UK application. As you most probably expect, it is an application allowing UK residents to search and buy products listed on Amazon UK directly from their iPhone application without having to use the web browser. As described in the app store:
The Amazon Mobile App allows iPhone and iPod touch owners to very quickly search, shop, compare prices, read reviews, and make purchases on Amazon.co.uk using a simple yet elegant interface.
Why Review The Amazon UK App?
I use the Amazon UK application now and again. I'm not a frequent user, but I do use it. The applications works, it does what it is suppose to do, but the interface could be done so much better. The layout sometimes feels cramped, there is no ability to browse the store, and everything seems to have been aesthetically mixed and matched with a general lack of visual consistency between screens.
Amazon UK: Interface In-Depth
Let's get started, shall we? I have taken a series of screenshots throughout some of the applications different pages, featuring the home page, search page, sign in page, recommendations page, wish list page, your account settings page, help page, legal information page, product page, images page and finally the reviews and item description pages.
The Welcome/Home Screen
The welcome/home screen is the first screen you'll see when opening up the application. We are presented the Amazon logo, a simple header saying "welcome" and some buttons directing us to your Wish List and Amazon Remembers, products that are popular right now on Amazon UK, and an option to sign-in to your account if you are an existing customer.
The main way to navigate around the app is by using the tab bar at the bottom of the screen, allowing you to access different areas of the application such as the home, search, basket and remembers screen. There is also a button for "more", which allows you to track your packages, view your orders and change your account settings (you can see this screenshot below).
above: Amazon UK welcome/home screen
As previously mentioned, the application works fine. The home screen is relatively easy to use, but I find it could be much easier. Here are a few points to consider, each individual point followed by some notes that could possibly improve the user interface.
Does the application really need to replace the navigation bar with the Amazon.co.uk logo? This isn't the case on any of the other screens, and therefore makes it feel like an entirely different application.
Instead, the logo could be replaced with a simple "standard" navigation bar, with a sign in button, or even a few options to view popular products, your wish list or a link to Amazon Remembers. This would free up a lot of space on the front page, leaving room to feature new products, or even details on your recent orders. There would be more than enough space to put the Amazon logo on the home screen if a navigation bar was used.
The tab bar links to four main screens: home, search, basket and remembers. Remembers is a service that, as far as I am aware, isn't used all that much. Does it really deserve a place in the main tab bar as well as a link on the front page?
This link could quite easily be put into the "more" tab, and replaced with something that customers are much more likely to use, such as a browse feature, enabling the option for users to be able to browse different categories on the Amazon site, rather than having to search for what they want, a feature that would do nothing but increase sales, and make the application one that people will use on a much more regular occasion.
The biggest user interface fault on the front has to be the search bar. Being a user who has used lots of iPhone applications, the first thing you would expect when clicking on the Search Amazon.co.uk text field is for a keypad to pop-up... type in your search, and hit the go button. In this case, that is exactly what doesn't happen. Instead, it just links you directly to the search screen. Is this really necessary?
The simple answer to this is a big fat no. There is really no need for two search links on the same page, especially when the one in the tab bar is so easy to find. If the search bar on the front page actually worked, this would be a different matter, but as it is virtually an image with a link attached, it is pointless! Removing this would leave much more space for the Amazon logo at the top of the home screen and a navigation bar at the top!
The featured "popular" products on the front page of the application seem very cramped. As an example, take a look at the right side of the Playstation 3 Slim and the left side of the Muse album, there spacing between the two images is very tight and just generally makes the application look a little bit tatty.
Some smaller images with a little extra spacing would work perfectly well for this, allowing each image to breath. However, with the search bar and the links to the Wish List and Amazon Remembers gone, lots of space will be left, possibly leaving the option to feature the products in a much cooler and more stylish way, such as featured thumbnails designed specifically for the front page, rather than just images of the product itself. We all know images talk more than words, so make the images as best you can even if it does mean a little more work.
Putting these points into practice would make the application far more user friendly. Below is an annotated image of the official iPhone app store:
above: Apple app store
Here you can see tabs at the top and bottom of each page, allowing for much easier access to each screen, something that would work perfectly well with the Amazon UK application as well as making things much easier for the user to find a certain product or to just generally browse the store.
The Search Screen
There is absolutely nothing wrong with the search feature in this app. There's a search bar, search recommendations as you type into the search bar, and a list of products at the end of it, as one would expect.
There is an option to refine your search after you make your original search, although you can't refine it all that much - only which category you'd like to search in, which really isn't enough for a shop that sells hundreds and thousands of different products a day.
above: Amazon UK search screen
Is this search feature really advanced enough for one of the worlds most well-known online shopping stores?
From searching the site, I found it relatively annoying that you can't refine your options down to exactly what you want. Searching could be made much easier! We should have the option to refine our search by category, sub-category, price, item condition (new or used) before hitting the go button, as well as having the option to display our results in different orders, such as price or date of release. There are simple things that 99% of online shops have, so why not on an iPhone app?
It's an easy fix, however. You just need to take a look at eBay's search screen to see what I mean (please note this is before you make your initial search, and not after like in Amazon UK's app!):
above: eBay UK app
The Sign In Screen
The Sign In screen is next to faultless in terms of usability, you can sign in, tell Amazon that you have forgotten your password, and create a new account.
above: Amazon UK sign in screen
The styling however seems to be a little strange. Take a closer look at the radius of the corners on the email address and password fields, and then look at the radius of the corners on the sign in button. You can clearly see that these are not the same.
Changing this to make the radius of the button the same would help a great deal with how the UI looks. Adjusting the width of the button to the same width as the text fields would also help things, whilst centering the text in the button to make things look as smooth as possible. It's things like this that make your designs pop!
Talking about sign-in buttons, is there really much need for one at all? Minimalism is a huge design trend right now due to a couple of very simple reasons: it looks great and it's very easy to use.
The button could be completely removed, with a sign in button being placed in the navigation bar overtop of the screen. Another link could be placed on the page for other sign in options such as links to pages where you can request a new password or make a new account. One superb application that does this well is the official Twitter application (previously Tweetie), as can be seen below:
above: Twitter for iPhone app
The Recommendations Screen
The recommendations screen is quite an important Amazon feature, as it allows users to find new products that they may not have previously known about based on their previous searches, purchases and items in their wish list.
The screen shows a list of products in the exact same way as they would be displayed in your search results.
above: Amazon UK recommendations page
Despite the fact that this works perfectly well, it can sometimes seem a little cramped, especially when long titles are involved, or more than one author or director names are listed.
These product lists could be tidied up a lot by using thumbnails, and thumbnails only. If a product looks as if it could be of interest, the user can click on it to reveal more information about the product, such as the title, the price and it's rating.
An excellent example of how this could work is the new folder structure featured in iOS4, which allows you to push everything out of the way to reveal what is within the folder. Below is an example of the folder structure.
above: iOS4 folder structure
Legal Information Screen
This is Amazon UK app's worst screen. If I told you that next to nobody actually views this screen I would probably be right, but just because it's a screen that isn't viewed all that much, doesn't mean it is should suffer in design quality. The screen links to two other pages: "Conditions of Use & Sale" and "Privacy Notice."
above: Amazon UK legal info page
I can't stress enough how important keeping the same style throughout an application is. The same applies to websites, magazines, newspapers, brochures... in fact, anything that is by the company should have some resemblance to each other - it's just good branding. If you want to be recognised, you need to do it.
This legal information screen just uses basic text linking to other sources, even though other screens use the default iPhone buttons (as seen in your iPhone's settings menu.
This is a very simple design fix and the screen could be greatly improved to match the rest of the application!
The Product Page Screen
The product page screen is basically a page full of short summaries, allowing the user to decide if this is the product for them or not. If so, they have the option to select any section with an arrow and view more pictures, read more about the product, view more used deals and read customer reviews.
above: Amazon UK product page
The product page in general works perfectly well, but just isn't there when it comes to looks. The page looks cramped and squashed together, and in general has clearly not had much attention paid to small details, which are very important!
On a lot of the other Amazon UK app screens, we have seen rounded corners, such as on the home screen. This does use up a little bit more space, but makes the UI look so much neater and generally friendlier to use. Using the same technique for the product page screen would immediately improve it.
One thing that has been absent throughout the application, but would work especially well on this page, is the lack of subtle shadows/strokes. The iPhone interface uses these regularly - you only need to look at the title in the navigation bar at the top of the above image to realise it has had an inner shadow applied to the text.
Adding inner shadows, or even 1px strokes applied to the bottom of the text only would add a huge difference to the overall look of not only the product page, but the whole application, creating a much increased look of depth, generally making the app much more visually appealing.
above: Amazon UK product image page - is it really needed? no...
The sky is the limit with iPhone applications, and this page just doesn't hit anywhere near that limit. Look at some other applications and notice some the effects they are using when letting their users scroll through images. Is a completely separate screen really needed to be able to view more images?
Again, it's another no. Take a look at the two examples of how other shopping applications have displayed their images below, both of which use a simple flicking technique so the user can slide images from left to right (or right to left!), much like a content/image slider that you see on the web.
above: Topshop iphone app - image scrolling
above: next iPhone app - image scrolling
As you have probably realised, paying attention to small details and doing everything in your power to make an iPhone application easy to use is well worth it. Amazon is one of the worlds biggest online brands, and with all their developers and the money they have to outsource projects, the application is far from perfect - it works great, but has a lot of room for improvement in terms of the user interface.
We hope that you have picked up a few good tips from this article, and that it will remind you to spend as much time as you possibly can on your application design, making sure to pay attention to the things that your users would like. Just ask yourself: "If I were using this application (and it wasn't mine), what would I wish it could do?" Brainstorm your ideas, and then put them into practice. Good luck!
Keep an eye out for a future tutorial on how to design your very own iPhone shopping application on the Tuts+ network!
A Few Design Resources...
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post