5 Tips For Using Your Mockup Tool For Mobile E-commerce Sites

By Author: Martin Metz
Total Articles: 13
Comment this article

Creating user-friendly mobile websites for ecommerce websites is not easy. Simplicity is often the best option for mobile users, and yet designers must struggle to fit a complex site, such as an e-commerce site with countless products and categories into something that is user-friendly. Using mockup tools can help information architects to structure and prioritize content for mobile users. While it is ideal to design a mobile app or version of a website before designing the desktop version, for e-commerce sites this is not an option. The following tips therefore should help you to organize and structure your content in a user-friendly way.

1. Remove any clutter

It can be difficult to strip a website back to its core components, but it is vital to create a user-friendly mobile website. With mockup tools, you can often upload images and screenshots, which will allow you to plan based on your current website. Alternatively, you might prefer to create wireframes free from any images or graphic design details. Either way, you should end up with a few core UI elements, such as a shopping cart and a search bar, for example. ...
... Depending on how large your site is, it might not be necessary to have a search bar and a navigation bar with a few categories and subcategories may suffice. Card sorting should help you in this process.

2. Be wary of loading times

Mobile users are often subject to slow internet speeds. Bear this in mind when you are using your mockup tool. Your client will not want to miss out on any sales, because the shopping cart could not load, for example. If a user wants to look at an image of their product, should an overlay appear, or should the image load on a new page? If so, is it easy for the user to move back to the first page? Even when you use mockup software, you can plan whether it is best for your user to follow lots of small steps, or limit their process to a few steps, with content-heavy pages.

3. Make it easy and secure to input data

There are some mobile users who will not feel comfortable about sharing their credit card information in a public place or on an unsecure network. For these customers, look into options for them logging into their account on the e-commerce site, so that their previous data is stored. Also make sure that the user’s actions will be saved for when he or she returns to the main website in future. Include the option for users to hide the data they input and look at alternatives to using dropdown menus.

4. Be consistent

In your mockup tool, you may be able to create custom templates that repeat throughout your prototypes. Use these as often as possible, especially for navigation bars. Even users who are used to your current website may not be aware of the current conventions you have thought up for your website.

5. Test your mockups

Some mockup tools allow for you to test interactive designs on mobile devices. This is highly recommended, as devices vary in size, and you may find there are better ways to optimize for different devices. With user testing at this stage, you can also observe where users have difficulty and what issues are affecting conversion.

About the Author

Pidoco.com – User Interface Design, Wireframe, Mockup Tool, Wireframes, Wireframe Software, Interface Design Software, Online Wireframe Tool, Wireframe Tool, Prototyping Tool, Clickable Wireframes, Usability Testing and Digital Paper Prototyping. User centered design for improved UI Design. Read More... https://pidoco.com/en