Introduction

Problem: There’s a need to simplify the complex backward navigation problem in smartphone applications, especially ecommerce applications. Consider a user flow in a complex app where a user is navigating from one screen to another. It becomes complicated when the user has to click back button several times to go back to a specific page. It takes a lot of time and takes away from delivering a good user experience.

Goal: To simplify the complex backward navigation problem in ecommerce and large/complex applications by proposing an advanced/enhanced version or alternative to back button

Target AudienceSmartphone users,  Ecommerce Users.

Exploring the problem

Let’s explore the problem a bit more. We’ll take a look at a user flow to browse products in amazon’s app:

 

Apparently, to go back to the first product, user has to click back 5 times, and further there’s no way to go forward. By this time, hopefully the problem is pretty clear.

Let’s conduct some user interviews to understand their pain points.

User Interviews

I conducted interviews with 5 users. The goal here is to find Pain Points to understand user needs, desires, limitations, frustrations and also gather user expectations and suggestions.

I asked the users to browse their favorite ecommerce apps and navigate from one product to another several times. I further asked them to go back and forth in the application. Here’s the feedback from 5 different users:

User 1:

“Arg.. I hate these apps when i don’t find my product i browsed just a minute ago. I mean once if i go back and want to check another product i saw after is such headache. I liked a product so much and i was checking out another product and when i went back it was like back back back back back back. I think it should be easy.. Just tap a button or something see previous and click on one you want.”

User 1 suggested to have an in-app tab based functionality. User referred to “Browser-like Tabs”, which would give the user an option to open multiple products in different tabs, just like they can in a desktop browser.

User 2:

“Browsing over various dresses, reached upto 100th. Suddenly it clicked that 50th one was more good but had not wish-listed it. So again have to click back many times or browse from start. Would be good to have a method available to easily navigate back and forth.”

User 3:

“I found my experience for consumer shopping to be mixed; although I was able to search and  find different products, I was not able to review products during my initial search without recalling what user flow was taken. I eventually had to utilize the back button more than five times. I found that to be frustrating and cumbersome. ”

User 4:

“My experience while browsing in the amazons mobile application has been semi frustrating. When looking at more than 3-4 products, the next product page will open for each product and pile up on the old ones. The ease of use in the application is lacking, and it can be improved by having a different maneuver to go back to view your previous products.”

User 5:

“I would definitely like to have an alternative solution because most, if not all, e-commerce apps  are guilty of not allowing users to go back and forth to products or pages which have been viewed. This creates a lot of complications.”

 

Key Insights:

  • After browsing certain no. of products, users had to rely on their memory to navigate to their favorite/selected product.
  • Users were frustrated to click back button several times to go back to the product they were browsing previously.
  • Users also felt that it is very time consuming to tap back button each time, instead of having a direct way to navigate to the product already browsed.
  • Users were frustrated that there’s no way to go forward, once they hit the back button. One user mentioned that “Recently browsed” feature is there at the bottom of the page at many ecommerce, but it takes more time to scroll down and breaks the flow of seamless browsing/shopping in the application.
  • All the users felt that there’s a need to have an effective way to go back and forward in the application.

Proposed Solutions

Brainstorming Ideas

One way this problem can be solved is by displaying previously browsed pages/products in some form. My initial thought process always start by scribbling for potential ideas on a paper. Here are the some of the ideas or low fidelity mockups:

Low Fidelity 

Medium Fidelity 

I’ll start with Adobe XD to create wireframes of the proposed solutions I have roughly on paper and in my mind.

So, we have

  • A List based solution
  • A Menu based solution called Burgercrumb (Hamburger Menu + Breadcrumbs)
  • Breadcrumbs based solution
  • Tabs based solution

To implement these solutions, I also need a small concept of an ecommerce app to demonstrate how well these proposed solutions work. Once, it’s done, we’ll test it with the same users we conducted interviews with prior to this step.

Here is the user flow of a small ecommerce app that we will be working with:

Solution: Advanced List

The Simple List solution is well, very simple. Here’s an advanced version of the list. (These are all Medium Fidelity wireframes, but you’ll see full implementation as you scroll down)

Solution: Tabs

Solution: Burgercrumb Menu

Solution: Breadcrumbs

 

Working Prototypes

Now, that we have the base covered,  and we have medium fidelity wireframes. Let us move on to the next step and see the solutions in its working form.

Here’s how the app looks now that the visual design and UI design part is complete:

 

Here are the final 4 solutions:

Solution: Simple List

This is the simple most solution to this problem. This can be implemented by a long press on the back button. But this solution is also very basic. It only gives you a list of previously browsed products.

See the video presentation below:

 

A better implementation of simple list is below.

Solution: Advanced List

See the video presentation below:

 

Solution: Tabs

See the video presentation below:

 

Solution: Burgercrumb Menu

See the video presentation below:

 

Solution: Breadcrumbs

See the video presentation below:

 

Usability Testing and Feedback

The same users who were involved for initial feedback prior to the research are involved post research. Here’s the feedback for the proposed methods.

1.  Advanced Menu

Convenience Level: 86%

Difficulty in Using it the first time (Learning Curve) : 8%

Ease of use in completing the task: 90%

Feedback:

This method wins according to the survey and user feedback gathered in general. Users are familiar with simple dropdown menus and hence it’s intuitive for them to use this method. This method offers enough details to complete the task effectively.

Key Insights:

  • Users loved the simplicity of this method.
  • Method is intuitive and learning curve is lower.
  • Users said this method is easier to use and understand.
  • Users also said that this method doesn’t take away the attention away from the app.
  • One particular user found this method “very busy”.

2. Tabs

User Survey:

Convenience Level: 88%

Difficulty in Using it the first time (Learning Curve) : 16%

Ease of use in completing the task: 88%

Feedback:

Contrasting views by different users. Some users found this method taking attention away from the main app, while other users found it to be very intuitive and giving more visual direction. Some users loved this method because you can virtual view the whole page/product in this method.

Key insights:

  • Learning curve is relatively more.
  • Relatively more ease of use in completing the task.
  • Offers more visual direction.
  • Offers preview of the better product/page than any other method.

3. Burgercrumb Menu

Convenience Level: 72%

Difficulty in Using it the first time (Learning Curve) : 28%

Ease of use in completing the task: 74%

Feedback:

This is a new method that I proposed, although I had my own doubts with this method. Users found this method contradicting with a regular Hamburger menu. Users did find this method helpful once they get used to of it.

Key insights:

  • Learning curve is more.
  • Less ease of use in completing the task.
  • Convenient but confusing.
  • Users liked the little details such as time, highlighting the current page/product, ability to go back and forward.

4. Breadcrumbs

Convenience Level: 68%

Difficulty in Using it the first time (Learning Curve) : 18%

Ease of use in completing the task: 76%

Feedback:

Breadcrumbs however are pretty standard across the web, not so much in the apps though. For the same reason, this method offers a simple visual direction of the products visited, flow and hierarchy. Users found very easy to complete the task, go back and forward. However, this method offers less details.

Key insights:

  • Less convenient (as per statistics).
  • Learning curve is relatively more (as per statistics).
  • Users found this method cluttered and busy.
  • Ease of use but offers less details such as time, snapshot of the page etc unlike other methods.
  • Intuitive and offers simplistic visual direction.

Final Thoughts

As per the overall user feedback, Advanced Menu method wins. It’s simple and easy to use, offers enough details required to complete the task effectively.

Feedback:

  • “Advanced menu is best according to me, followed closely by breadcrumb. My feedback is not only based on user convenience and interface but also on how adding the feature might affect the speed and processing power of the app or web page.”
  • “The best method for this problem in my opinion is the advanced menu, because its simple and easy to use. While using this method you will naturally be able to learn the feature and be able to put it in command. “

The second favorite method is Tabs. Users are already familiar with the method as can be seen in swiping between pages and apps in Android, iOS, Browsers such as Safari. However, this method takes away the attention from the main app even though it offers more details.

However, this is a user experience research at a small scale. To truly understand the user preferences and get better feedback, we need to conduct the interview with a larger audience.

Thank you

Have a feedback for me? Write in the comments below or reach out to me at connect@piyusharora.co.