How to use a modal for associative actions with in place search?

Question

I'm designing an application that presents a list of bus stops to the user in a list (html table). Every bus stop belongs to a city somewhere in the world. Once the user finds the stop he wants, he can see the city that the stop is associated with through a modal dialog like the one below.

^{download bmml source – Wireframes created with Balsamiq Mockups}

In cases where this association should be changed or a new bus stop is created, besides the details of the bus stop, I need to let him search our database for the city that the stop belongs to.

• How bad is it to put the search right below (or above) the bus stop details so he can find the one he wants?
• What about paging, it seems weird to add all of this on top of a modal.

By using it I can see that it is not optimal, but no other way comes to mind.

^{download bmml source}

What do you guys think?

Thanks a lot!

Answer 1

Working with a few assumptions ...

1. The number of fields you want to display is few (city/state/country).
2. The user already knows what city/state/country they want, they are using the search to locate the record for it. Therefore they will be able to add more characters to the search box until the item they are looking for appears in the list.

I would create an inline-edit state for the modal, allowing the user to make the change without leaving the screen at all. The 3 fields seem so natural to digest as a single string, I am not seeing much value in having the columns in a grid. Depending on how large the data set is, you may want to wait until the user enters enough characters before returning a list.

---

Additionally, if you had Lat/Long data, you could provide a method for limiting the search results to a radius around the current city or add it to the search results ...

• San Diego, CA, USA (428 mi away)
• San Francisco, CA, USA (Current Location)
• Sandy Point, NV, USA (999 mi away)
• Santiago, Chile (2,000 mi away)

Answer 2

A thought, Why does the user needs to know when was the buss stop created? you can make more space by dropping this detail and lessen the time user reading time.