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 Audience: Smartphone 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.
Preetika
January 9, 2018 7:22 pm
Great job Piyush. Your vision to identify user issues, designing the solution, brainstorming ideas and collecting user feedbacks is truly professional and much appreciated.
Good to go. 😊👍🏻
Piyush Arora
January 9, 2018 8:43 pm
Thanks Preetika. Great feedback.
Daksh Patel
January 10, 2018 11:58 am
Good work Piyush, I experienced the problem while browsing through the Amazons application, and I appreciate that you have done something to fix it. Your ideas are laid out very well and explain the reasoning behind them. I like your thought process while making the results for fixing the issue. Job well done!
Piyush Arora
January 10, 2018 11:59 am
Thanks Daksh. Appreciate your feedback.
Preetham
January 11, 2018 2:33 pm
Really great solution to a very common problem for everyone right now. Good job!
Piyush Arora
January 11, 2018 2:51 pm
Thanks Preetham for your valuable feedback.