Designing with Time Constraints to Improve Navigation in 2 hours
Previously I picked back up on a project called 100 Days of UI. I wrote about the project in my article Designing with Time Constraints to Improve Design Thinking. If you are not familiar with 100 Days of UI or you have not read my first article the overall gist of the project is to design a UI within a 2 hour period. Except this time I put a little twist on things. My focus is from a UX perspective and my goal is to use the 2 hour period to improve my design thinking and help me iterate quicker.
This article is the second in the “series” and covers my thoughts and ideas on improving a navigation widget within a maps application. Having moved to a new area about a year ago I frequented my Google Maps app quite a bit. Reflecting back on my experiences there were a few pain points that really bothered me.
However the biggest issue I found was in order to search or navigate the app I had to reposition the phone in my hand. While one may argue this is probably a good thing keeping people from driving and using maps. I’d rebuttal that this is a pain in the butt for various reasons.
In my personal experiences I’ve dropped the phone several times repositioning it quickly while trying to get back on course. Thinking about how frustrated this makes me I chose to focus my design from that perspective. Here it is Day 44 — Simple Navigation Widget.
Day 44 — Simple Navigation Widget.
As I stated before the biggest pain point for me when using the application was the placement of the elements within the application. Being as stock Google Maps places the core functions at the top of the app window repositioning my hand causes challenges. As a way to alleviate this issue my intentions were to strip the application of clutter and reposition the elements to the bottom of the screen.
The reason why I did this was to allow the user to navigate the app without having to move the phone in their hand or stretch their thumb. By placing the main components at the bottom they can easily zip through searching, getting directions and begin GPS navigation comfortably without any hassles.
Let’s have a closer look.
Search Screen
When entering the application the user starts their journey here on the search screen. This is where they are able to find whatever location they are looking for. While the normal layout works well for someone that is stationary and taking their time. From experience this is also a burden for someone on the go or needing to find a location quickly.
Below you can see in my design that I have repositioned the search element to the bottom of the screen and made the interface much simpler to not only understand visually but easier to begin interacting with. Naturally the keyboard tray slides out from the bottom. So why not have search there too?
In this example the user starts at the map screen with a search overlay at the bottom of the window allowing the user to input a location into the app easily with one hand.
Route Screen
Once the user has chosen a location it’s time for them to pick their route. They are taken to the routing screen where they can choose the preferred route and method of transportation.
Again this is an instance where the functionality of the app is at the top of the screen. Since my intentions were to alleviate the hassles of repositioning ones hand I chose to keep the element in the same location as the search function on the previous page. The user can continue to navigate the screen without having to reposition.
Directions Screen
The final screen I decided to design in this challenge was the directions screen. Google already does a pretty good job here. But in my design I kept with the theme of simplicity and let the GPS information take up the top half of the screen while the bottom half is reserved for the directions list and begin navigation button.
As I stated before the positioning of the elements makes it much easier for a user to interact with the app and get directions. In this screen they can peruse the list of directions letting them get familiar with street names, directions, and their overall route. While also letting them tap the begin navigation button to get started on their journey.
This is only a concept and barely scratches the surface of what’s possible. However the simplicity of the interface with the reduction of all visual distraction allows the user to easily navigate the application without having to reposition devices in their hand. These simple adjustments can help to improve their maps experience.
