I'm at a Stop, What Do I Do?

[akaplo]

Someone opens our app for the first time. They're at a stop, and they just wanna get on the next bus. What do they do? Is going to Routes and Stops a self explanatory solution?

[sherson]

My personal preferences as a passenger:

I'd appreciate a Nearby category that brought up to a map showing nearby stops and buses. If I tap on a stop, I see its departures (a simplified BusInfoBoard style list could work well here). If I tap on a bus, I see its details and route shape (or perhaps route shapes could be on the initial map)

It's noteworthy that not everyone thinks geographically in terms of maps... as always any suggestions are welcome.

[sherson]

@akaplo and I just talked about this a little bit about this... he seemed to like the map ideas, and suggested having the bus info pop up on the map, and stop departure info in an expanding bottom panel (like trip planning).

[akaplo]

Without a doubt. This will be implemented as a new page in the sidemenu, called Nearby!

[akaplo]

This is a huge feature addition. If we actually want to kill off this project, this needs to be put on hold.

[akaplo]

I've begun working on this out of sheer boredom 🎉

I'm picturing a layout that's split in half, where the top is a map that displays stops and route traces, and the bottom displays some combination of nearest stops, a mini-departure board, and maybe even some route/vehicle details.

I was thinking of making the bottom panel collapsible, and if you click on a stop or route on the map, it'll slide back up with that selected.

@sherson, does this UX seem reasonable given what we described waaaay back last year?

This issue might warrant making sub-issues for breaking out some of our UI into more reusable components so that a StopDeparture or RouteVehicles panel on the Nearby page would need less code duplication.

Here's a rough pre-pre-alpha shot:

[sherson]

I think that could work well. A few thoughts, however:

• Even with the navigation menu collapsed, a phone screen may be a bit cramped for all that info (I think it'll work as long as we're mindful of the limited real estate).
• Will the list of nearest stops be the same as what the map is zoomed out to see? That probably makes sense.
• Map might look good if it was zoomed in to show your current location, the nearest stop, and perhaps a few other stops if they're not too far away (cutoff distance TBD). There are lots of combinations of what might be helpful to a user. For instance:
  • Even if a user is right at a stop, other stops are often relevant (for example, SAB/FAC/Haigis or Amherst Town Hall/Amherst Common N/Amherst Common S/Jones Library In/Jones Library Out). What stops are important largely depends on the combination of routes/directions at nearby stops. Could be difficult to account for, but might be worth considering.
  • If a user is at Gulf Rd (In), that's the only useful stop (but it doesn't hurt to see more stops).
  • A user near the intersection of Gulf Rd and North St should see both stops (might make more sense to walk to North St for inbound buses, and Gulf Rd for outbound buses):

• I think we should render all the route traces, though it'll look ugly in areas with a lot of routes. From myStop:

I don't know if there's a good way to deal with this currently. We could ask Giro about options. Also, I noticed that Google maps renders MTA subways nicely and adjusts the route trace spacing at different zoom levels:

TransitApp also does some nifty stuff with route traces:

• https://medium.com/transit-app/how-we-built-the-worlds-prettiest-auto-generated-transit-maps-12d0c6fa502f
• https://medium.com/transit-app/transit-maps-apple-vs-google-vs-us-cb3d7cd2c362

It may make sense to just overlay them for now (especially since the longterm plan is to migrate to TransitApp/OneBusAway).

[akaplo]

Making slow but sure progress on the map (I'm personally quite proud of the blue location dot, which Google makes you build yourself 🐐 ). Any ideas on what icons should be used for bus stops? I'm just rendering a bus SVG, but how about mini-PVTA icons (logo on a white square background)?

[sherson]

I suspect a bunch of mini-PVTA icons will look cluttered, but sure give it a shot.

Does it make sense to use the Google maps bus stop icon (if that's permitted) or something similar?

[akaplo]

That's a good point - I'll give it a try. For now, I'm going with simple red dots, which are pretty clean. We can also do marker clustering.

Recognition of which routes service a given stop is live, but dependent on the active service type - for example, during summer/winter service, stops like Mullins Center and Butterfield will report No routes service this stop today, as Campus Shuttle doesn't run.

KMLs are live too. They do overlap, but I let the user enable/disable them via a dialog, so I don't think it's too big a deal.

[akaplo]

Continued progress screenshot. Please say thoughts/feedback!

Vehicles are shown as dots colored by the route they're on, with the last 2 characters of their route (i.e. 30, 43, 0E instead of 30, B43, P20E) stamped on them. Clicking them gets you some more details, namely direction and destination. Any thoughts on this format, especially with the labelling issue in the case of the P20E?

I've written the UI to scale by screen size:

[sherson]

That looks quite slick.

Would be useful to see vehicle direction, but perhaps that can be added later.

Have mixed feelings about only showing the last two characters for each route number. While that's actually the useful information (for PVTA's current naming convention), what's being shown may not be obvious to the users (having B4, 12, and 0E all on the screen would be weird).

My initial thought is to use a bigger circle, show up to 3 characters instead of 2, and to crop the first character when there are 4. We'd still get P20 and 20E, and P21 and 21E, but I think that'd be easier to understand.

[akaplo]

Thanks! I gave vehicle direction a shot. 4 SVGs, for north/south/east/west. We take the bus's heading and apply one of them accordingly, and we can fit 3 characters.

Let me know what you think - I'm open to different shape suggestions (but keep in mind before bikeshedding the current shapes that it took me 2 hours to get those SVG paths right 💀 ).

[sherson]

Not as pretty as the previous version, but more functional. A couple observations:

• Route number looks offset
• Arrow doesn't quite blend with circle

That's bikesheddding, so (can be tweaked later).

[akaplo]

I agree with all that feedback. I dislike the vehicle markers more each time I look at them, so those will change.

More progress - I'd call this beta-quality.

Still to do

• clicking a stop on the map selects it and shows departures below (currently only happens when you select from the list
• Add "Showing nearest stops, see all" item, similar to departures one
• Add distance from user to each vehicle in list
• Restyle vehicle list
• Change vehicle map icons
• Clicking a vehicle in the list opens its InfoWindow on the map (unsure if this is actually possible?)
• Restyle map InfoWindows
• On entering page, route KMLs auto-shown on map should correspond to user's favorite routes
• Clearly indicate what the closest stop is, instead of a seemingly unordered list

Anything important that I'm missing or something additional to request?