Considering a better back button for web browsers

Initial sketches during conversations about a better or different back button on website browsers.

One rainy afternoon, I had some fun brainstorming and co-designing a better back button for computer web browsers.  In job searching, I will open many links in emails and job posting sites into new tabs, called page parking.  After a few hours, I've got dozens of tabs open, and I can't remember where I started, what I've reviewed, or how I found it.  I'm lost and it takes me time to sort it all out.  

Thinking back to browsing in Internet Explorer, not much has changed in browser design since 1995.  Check out this visual history from State Tech Magazine to see what I mean.

iOS on the other hand is thinking about back in a more meaningful way.  From back arrows defined with text to the iOS 9 update of a miniature back between apps to go back to where you started, users can see where they came from – right from where they are.

A guiding principle for good design is to help people accomplish their goals without making them think.  On a tiny screen, iOS provides a clear indication of what pressing back will mean for the user; there's no thinking.  Alternatively, computer web browsers hide what back means, leaving the user to press and hold or click away hoping they'll find what they're looking for.


As our focus narrowed to a possible design, we continued to refine and discuss.

Quick sketches, quick iteration

Using a Safari browser template, I sketched out a few ideas based on our discussions.

A) Initially I placed the arrows on the inner edge of the text, closer to the centered search bar.

B) After discussion, we decided to move the arrow to the outer edges of the text to be more consistent with iOS design conventions.

C) I was concerned that users may be confused about the different between search field and the back/forward buttons, as both include text.  To avoid this, I explored ways to change the UI to appear more like buttons than fields. 

D) Consistent with current back button interactions, when clicking and holding the back button, the full history will be visible in a dropdown list. 

The new browser design.


This was a fun exercise to start rethinking something that I've grown so accustomed to using.  This would be a significant change to what people expect a browser to look like and it shouldn't be taken lightly.  Next steps would including gathering more feedback, assess placement and appearance, and of course determine if it is indeed useful.  


Special thanks to my co-designer, Mason, for his thoughtful contributions on this back button exploration.