How Are Mobile Apps Design

Many online retailers are looking to have a mobile site along with their regular website. Although many are still without, there are a few that have launched mobile stores in the past year. Many have also launched mobile apps to either compliment or take the place of a mobile site. To learn about the differences between a mobile site vs. a mobile app take a look at this great e-commerce infographic. I'll discuss a few common design tips for both mobile sites and apps with examples of each.

Design is just as important on a mobile device to be able to get your customers exactly what they need with ease. From search capabilities to checkout, the design can impact whether or not you are going to convert your customer's visit to a sale.

Mobile Usability

Make sure mobile devices like the iPhone, Android and iPad easily use your online store. All are touch screen dependent which is an important item to consider when looking to develop a mobile version of your website. Besides utilizing this technology, here are a few key things to keep in mind when designing for a mobile device:

Navigation

Mobile devices only have a limited screen space, so utilizing the space efficiently is very important. One common mistake is including a full navigation bar on every screen. When designing for ecommerce, it is important to direct your visitors to exactly what they are looking for in a limited number of screens. Some retailers, such as Best Buy, limit their navigation to a single pull-down menu. The user is then directed towards multiple categories to shop on a single, scrollable screen.

Best Buy – Limited Navigation to Utilize Space.

Target also follows these same principles and uses a compact navigation bar.

Text Input

How many of you enjoy typing on your mobile device? Nobody? Agreed. When designing a mobile app, keep in mind that your customers don't enjoy typing on a mobile device either. It takes focus and can be frustrating for those with stout fingers. Keep the amount of text input required to a minimum. Remember your customers are looking for convenience their home or work computers cannot offer them. You have to make it easier otherwise what would be the point of purchasing via a mobile device?

That is the #1 reason consumers have mobile devices to begin with. Convenience.

What are Some Ways You can Limit Text Input for Customers?

Allow the customer to sign-in to their web account right away on the home screen or in the first step of checkout.
This is especially important when designing a mobile app since the chances of your customer being a repeat customer with a web account are higher. This is because they already committed to downloading your app, chances are they have already purchased from you too!

Allow them to shop via categories and also refine the results easily without requiring the user to type in any attributes.
Old Navy does an excellent job of being descriptive with their categories by including a category photo, sub-category listings and by allowing the fold to fall over the photo. Keeping an eye on the fold in mobile devices is very important as it can indicate to the user that you can scroll down the screen since there isn't a scroll bar to indicate this.

Zappos also has a great browsing design, allowing users to select their categories and refine immediately by sliding the refinement options from left to right.

Designing for mobile is such a new area that there really isn't anything set in stone in terms of the way a user is "used to" or "accustomed" to shopping.

Don't ask for a phone number if you really don't need it, only require the necessities when designing a checkout for mobile devices.
This should apply to traditional e-commerce websites as well. If you don't plan on using the information, then don't ask for it. It's just one more reason for the customer to pack up their things and leave, or in this case, hit an off button.

Placement of Key Elements (action items)

There have been studies done that apply to both mobile and traditional website usability. You should typically place action items on the top or bottom left of a screen to be inline with a user's reading & scanning patterns. Often referred to as "F-Patterns". You can read more about eye movement studies in this great article written by Eric Rowell called, Eye Movement Patterns in Web Design.

Just like on a normal sized screen, button color is important. Try and use colors that allow your action items to stand out. Keep in mind the color of the devices browsers (iPhone is traditionally blue hues). I would stray away from using colors that are being used by the devices browser elements for action items.

When considering size, think about the average user's fingers again. If they can't click your buttons because they are too small, chances are they will get frustrated and look elsewhere. You don't want them to have to zoom in either to click your tiny buttons.

On mobile devices, you'll see a few examples of action or clickable items and their placement & size below.

Shoes.com uses a bright orange button positioned off to the left slightly.

Target mobile site's add to cart button spans the entire width of the screen (left) Macy's iPhone app's add to bag button and find it in store button also span the width of the screen and are located above the fold (right).

These both use the same color as the header of the mobile device. Although it is consistent with their full-site's design, to improve conversion it might be suggested to use another color that isn't used in the surrounding elements.

Click-Ability

When looking at mobile device interfaces, you'll notice that the touch screens don't offer the benefits a physical button lends itself to. So, when considering this limitation, make sure your 2D buttons looks clickable and three-dimensional consistently throughout your mobile site or app.

Images

Limit the size and number of images used on your mobile site or app. Customers still want to see product images, but keep the number of promotion images, advertisements and other unnecessary creative to a minimum or not at all if you can. This will improve the load times of the pages, which is extremely important on mobile devices. Most often, the mobile Internet connections customers are using don't even come close to the speeds of traditional connections.

Here are a few ways in which imagery is downsized on some familiar retailers apps and mobile websites:

Best Buy uses small images to represent categories effectively.

Target limits their homepage creative to one space that includes 6 slider panels.

Note: Flash isn't supported by the iPhone, sometime to strongly stray away if wanting to target iPhone users, who make up a large percentage of mobile users.

Old Navy displays thumbnails with images and no titles, prices or buttons to decrease the loading time. Although there is quite a few images, they are small and have limited the other information on the screens instead.

Mobile Audiences

As a designer, you spend a good portion of the discovery process determining and understanding the audience you are trying to reach. Besides your particular client's demographics, the way customers use their mobile devices fall into audiences as well. Leland Rechis, a Google user experience designer describes three different types of mobile audiences:

• Repetitive Now – A user who uses their phone to check stats, updates, stocks repetitively. This user could be a sports fan, social media user, or farmer who may want to check the weather often.
• Bored Now – A user who has a lot of time on their hands. Particularly those waiting or traveling or visiting café's for Internet access.
• Urgent Now – This user has a limited amount of time to perform a particular task. They might be searching for a place nearby to eat or find directions to a meeting location in a hurry. Often times these users might be using the location capabilities of many mobile devices to guide them and make their life easier.

Mobile shoppers generally fit into the last two categories (bored now & urgent now). Keep this in mind when you are designing. Make physical stores easy to locate via a mobile device as well as easy to shop if your customer is trying to get some speed shopping done while taking the train to work in the morning.

Types of Mobile Applications (iPhone)

In the book written by Suzanne Ginsburg entitled "Designing the iPhone User Experience", she writes about the different application styles a designer must consider when working with the iPhone platform. She references the HIG (Human Interface Guidelines for the iPhone) which describes the three styles:

• Utility – These types of apps allow users to perform a narrowly defined task.
• Productivity – These apps offer more features and could include social networking & mobile banking.
• Immersive – These apps generally utilize the entire screen and include games, rich media and specialized tasks.

A retailer's app would be a combination of a productivity and immersive application as it provides multiple features and can be immersive when viewing product images and/or video.

To learn more, view Apple's Human Interface Guidelines.

Customization

Designers are always looking for new, innovative ways to design and create better than the other guy. In the case of mobile design, sometimes customization isn't always the best decision. Since shopping using a mobile device is fresh and brand spanking new for many people, you'll kill your conversion rates if they can't figure out what your fancy icon is supposed to represent or that they should click on the product price to allow the add to cart button to magically appear. Don't try and make simple tasks harder than they need to be. If you aren't making something easier, then it's best to leave it out.

E-commerce Mobile App Design Examples

Search & Thumbnail Design

Macy's Product Thumbnail Screen

Walmart Product Thumbnail Screen

Old Navy Product Category Screen

Old Navy's use of small image thumbnails for shopping ease

Old Navy Product Refinement

Target Shopping Category Screen

Target Product Thumbnails

Macy's Product Refinement Screen

Best Buy Mobile Search Page

Best Buy Mobile Category Browse Page

Best Buy Mobile Sort By Options

Zappos Mobile Homepage & Search Options

Zappos Mobile Product Mix & Match Search Page ( 1 of 2 options)

Zappos Mobile Category Browse Section (2 of 2 option)

Amazon Mobile Category Search Page

Macy's Mobile Product Detail Page

Best Buy Mobile Product Detail Page

Zappos Mobile Product Detail Page

Amazon Mobile Product Detail Page

Amazon Mobile Product Detail Page – Call to Action at Bottom

Barnes & Noble Mobile Product Detail Page

Target Mobile Product Detail Page

Old Navy Mobile Product Detail Page – Step 1

Old Navy Mobile Product Detail Page – Step 2

Old Navy Mobile Add to Shopping Bag Design

Shopping Cart/Bag Design

Macy's Mobile Bag

Macy's Mobile Bag – Edit Item

Best Buy Mobile Cart Design

Zappos Mobile Cart Design

Zappos Mobile Cart – Edit Product

Sportsman's Guide Mobile Cart Design

Old Navy Mobile Shopping Bag

Target Mobile Shopping Cart

Checkout Design

Old Navy Checkout

Target's Checkout

Macy's Sign-in & Checkout

Best Buy – Sign-in and Checkout

Conclusion

What are your favorite retail apps or mobile sites and why? What have you found to be successful in terms of designing to convert via a mobile device?

References:

• Designing and Developing mobile web sites in the real world, part 1
• Google Lays Out Its Mobile User Experience Strategy
• Apple's HIG

Books:

• Suzanne Ginsburg – Designing the iPhone User Experience

How Are Mobile Apps Design

Source: https://onextrapixel.com/mobile-apps-design-for-mobile-conversion/

Posted by: murphyroyshe.blogspot.com

Share this post