I need help with the layout of the view where I show a map intended to provide users the possibility of selecting an start and an end of a route and display them the instructions to follow. The problem is that, because of needs of my app, I have an overall looking like this:


That is, a tabbed app with a navigation bar at the top and another custom view right below the navigation bar. This custom view is like another bar (it has the same hight as the navigation bar) where information of interest is displayed, not necessarily related to the route on this view. I need this custom view/bar to be present.

The point is, how could I request the start and end points input for the route? I think I don't have space enough to add another bar, similar to the iOS Maps app. And having a tab bar, I can't use the page curl button. And about displaying the instructions of the route? I need some ideas, I don't know how to solve this user experience-related issue given the remaining space I have.

  • 1
    have you tried going on other mapping products (such as google maps), app or website, and seeing how they solve the problem ?
    – Toni Leigh
    Commented Jul 17, 2013 at 7:11
  • What is expected distance between start and end points? Do they need entering text or just dragging on the map is enough? In other words - how do they correlate with current map content?
    – Serg
    Commented Jul 17, 2013 at 8:46
  • Sorry, my fault, I didn't explain myself properly... I'd want to be able to display a couple of text fields somehow in order to type the start and the end locations to calculate the route that I'll draw on map
    – AppsDev
    Commented Jul 17, 2013 at 10:30
  • If you are going to type rout ends you are to show keyboard so you may cover your map with end-points entering full-screen form. Is it your case?
    – Serg
    Commented Jul 17, 2013 at 11:26

3 Answers 3


Perhaps you could use a popover from the top navigation bar that displays when the view is first loaded and there is not an existing route defined. Adding a button to the navigation bar to trigger the popover allows the user to see the directions in a list format. The "Select New Route" button at the bottom of the popover could reset the route.


download bmml source – Wireframes created with Balsamiq Mockups


If you want to allow the user to drop a pin for start and end, may I suggest that the user be able to drag and zoom the map and use the 'hold' gesture to drop the pin. You can set it by default with the first pin as the departure point and the 2nd pin as the destination point.

If your app allow users to key in a Postal code and address of the location you might want to have a separate screen for user to enter the 2 addresses. Allowing the application to set the current location (using the device GPS) will add value to your apps.

  • While the map pin idea is one route of doing this, how do you propose achieving the second suggestion - entering the post code and address? The main issue defined in the question is that there is currently nowhere in the application to provide this option, so can you propose how the user gets to the screen to enter their address details?
    – JonW
    Commented Jul 17, 2013 at 14:15

enter image description here

My suggestion of the 2nd solution and will consideration of Charles Wesley solution.

Wireframes created by Pencil

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.