noi-techpark / odh-mentor-otp

5 stars 8 forks source link

As Open Data Hub manager I would like to have a new proposal of UX / UI #196

Open rcavaliere opened 1 month ago

rcavaliere commented 1 month ago

The starting UX / UI is the one implemented on mobility.meran.eu.

We need an adaptation of it since:

In particular, the integration of flight services has to be considered and designed carefully.

Expected UX:

ch-routerank commented 1 week ago

After considering we think that the following two areas are the most important to improve in the current application:

These two features are the one the user will interact with the most and are very powerful in order to integrate new content or services.

The auto-completion / search field would allow the user to look for various POI/Services and for the application to react differently based on the content selected.

The map allow allow the user to search POI/Services within a specific region or area

Single search field proposal:

The application would start with a fullscreen map and a single searchbox element: Image

The user could then search for locations, stations, bike stations, airports and other POI.

POI Selection

When a user pick a POI from the search field, the application would react in two ways:,details about this POI would be displayed according to the POI type. And the map would be adjusted according to the POI type.

  1. When a POI is selected it would load the POI details in a side-bar under the searchbox. Depending on the POI type, different information could be displayed: 1.1 For a train station: it could display the next departures as this Image 1.2 For an airport: the details could show the flight webcomponent from NOI Techpark

  2. When a POI is selected, the map would center on the selected POI. Depending on the type of POI the map could be configured slightly differently. 2.1 For a train station:, the map would zoom on the station and display the different platforms/boarding areas if provided by OTP. Additional layers such as micromobility could be automatically enabled to display bike-sharing in the vicinity or parking options. 2.2 For an airport: the map could zoom out and display the known direct flight routes from and to this airport like this: Image

POI Selection from the map or through deeplinks

The application should be adapted to allow the user to select POI directly from the various layers integrated on the map. The behavior would then be similar to the POI selection through the autocompletion field. This can be done by interacting with the map and enabling relevant layers or by going through the 'nearby' module.

The application should also allow external applications to easily deeplinks into a POI detail view, the application should then load the poi details with the relevant map behavior.

Trip Planner

In order to search for itineraries from/to POI and addresses, the user would either have to select the trip planning option in the top tabs Image or could use predefined call for actions within the POI details view such as plan a trip 'From here' and 'To here' Image

Reasoning

Here's various points that we considered with this proposal that we think are relevant and pros of this approach.

Simple UI/Design

By keeping the map as the main focus of the application, the style/design can be kept to a minimal footprint, this has several advantages. It would reduce the implementation effort and allow us to focus on integrating as many of the services/data as possible and it would help re-use of the application by partners or other websites by being more "neutral" while also opening the door to distributing the application as web-components.

Extension to new services

The approach we proposed in term of interface focus on content and is easily extensible in the future, new mobility services could relatively easily be added in Pelias and the relevant behavior/ POI details view component could be implemented in the application to accommodate for the specifics of the new service.

Some services might not easily be found using text with pelias, for instance car-sharing,and only by exploring the map, these would be better integrated only through the map as a new map-layers either through OTP if provided there or through a separate data service.

In case a service would need to be integrated that isn't easily searchable by text or geographically, such as potentially some on-demand services or weather information, we would suggest then to create a new 'tab' at the top of the application to load a custom view for this service. However we think that most services are either very well integrated by text search or geographical search.

Mobile consideration

We also consider this approach to work very well for mobile integration, as the single search field then open a single POI detail view or map view.

Integration into partners/exiting websites

Another interesting usage of this approach is the potential re-use as a "web-components" to be integrated into external website, especially the 'deeplinks' to specific POI.

Next steps

In order to achieve this goal, some effort should be made on the Pelias geocoding feature, The current version we've tried from the test environement seems relatively lackluster in term of content integrated and multiple services would need to be integrated in it properly. At the very least the stops, stations and data integrated within OTP should be integrated in Pelias with proper attributes/categories or layers in order to differentiate them.

Ideally here the following next steps could be done:

rcavaliere commented 3 days ago

@ch-routerank in general, I like your approach. This is overall the UX / UI approach that is mostly applied, in particular in MaaS applications. I have some general thoughts that I would like to share:

1

We could provide you the API call to get these POIs to be considered in the geocoder. This is an important functionality, since a normal user knows famous POIs, addresses, etc. and less the name of the stops

An open point for me is still to conceive the way we want to visualize car pooling / on-demand services. I will provide you some more input on this

rcavaliere commented 1 day ago

@ch-routerank @nl-routerank @leonardehrenfried some additional thoughts for the visualization of car pooling / on-demand services. This would my idea:

Search through trip planner

Map visualization

Please note that in short we could also have real-time taxi information! Mainly this will be in the form of real-time positions of taxis. I would suggest to visualize them as a particular on-demand service. Taxis will have reference taxi locations where people find taxis standing, from which they can start a trip. The difference here is that they can serve all points in a specific area, I don't know if we can somehow represent this. Otherwise the concept is similar to on-demand, and data will be modeled in the Open Data Hub also in a similar way. Of course taxi and on-demand should have a different graphical representation and be presented as two different services.

rcavaliere commented 1 day ago

Next steps agreed: @ch-routerank @nl-routerank will prepare graphical representation of such ideas of UX / UI in e.g. a figma project. Not spend too much time in details, but just in the main UX that we want to implement!