feat: car navigation mode UX redesign #826

gNovp commented 2025年07月11日 11:22:29 +02:00

What problem would this feature help solve?

As i'm discovering CoMaps these days, I find it's already a great maps app ! So first, congratulations to the team :)
I've seen you were looking for redesign ideas for the navigation UI. And yeah, I think some elements could be merged to remove buttons from the UI, or some other could be presented differently...

Describe the ideal solution

I've made a small video just to show the global design ideas in "action" (as an attachment to this post). I usually prefer floating elements (bubles, buttons, cards...) as they are more fitting to the rounded corners of the screens on phones and tablets nowadays (+ it can adjust to the different screen ratios without breaking the visual language of the app).

I mainly use CoMaps in my car, so for me, having access to the current speed/speed limit is key. So I would put it as much as possible in the field of view of the driver (when the smartphone is fixed to the dashboard, or as I do, with a 10 inch tablet...). Maybe a toggle in the settings could be also added to reverse the layout for left-handed driving countries ? Adding of course an audible sound when overspeeding when the information is available (and bonus, when a Speed cam is nearby, repeat the audible signal alert tone until the speed is again below the limit).

Then, the current arrow indicating the next instruction is good, visible etc, but the text indicating the road, turn etc is too small and therefore a little dangerous when driving. So add a "classical" navigation panel on the top, filling the rest of the horizontal space on a phone (and on a bigger screen, only part of the horizontal space to make room for the map itself maybe ? It's basically very "Android Auto" like, I know, but it works quite well in my opinion).

Then on the bottom, again floating elements with a button for Sending road alerts (trafic jams, accidents, speed traps, or adding Open Street Map entries when not navigating), the search button on the right, and the information bar on the center (showing trafic info, if that feature is planned in CoMaps...

Additional context

I'm not an UI/UX designer, these are just some ideas if it can help a little (some of the elements in the video design here are a little too big... it's just a global idea...)

Again, thanks a lot for this great app ! :)

### What problem would this feature help solve? As i'm discovering CoMaps these days, I find it's already a great maps app ! So first, congratulations to the team :) I've seen you were looking for redesign ideas for the navigation UI. And yeah, I think some elements could be merged to remove buttons from the UI, or some other could be presented differently... ### Describe the ideal solution I've made a small video just to show the global design ideas in "action" (as an attachment to this post). I usually prefer floating elements (bubles, buttons, cards...) as they are more fitting to the rounded corners of the screens on phones and tablets nowadays (+ it can adjust to the different screen ratios without breaking the visual language of the app). I mainly use CoMaps in my car, so for me, having access to the current speed/speed limit is key. So I would put it as much as possible in the field of view of the driver (when the smartphone is fixed to the dashboard, or as I do, with a 10 inch tablet...). Maybe a toggle in the settings could be also added to reverse the layout for left-handed driving countries ? Adding of course an audible sound when overspeeding when the information is available (and bonus, when a Speed cam is nearby, repeat the audible signal alert tone until the speed is again below the limit). Then, the current arrow indicating the next instruction is good, visible etc, but the text indicating the road, turn etc is too small and therefore a little dangerous when driving. So add a "classical" navigation panel on the top, filling the rest of the horizontal space on a phone (and on a bigger screen, only part of the horizontal space to make room for the map itself maybe ? It's basically very "Android Auto" like, I know, but it works quite well in my opinion). Then on the bottom, again floating elements with a button for Sending road alerts (trafic jams, accidents, speed traps, or adding Open Street Map entries when not navigating), the search button on the right, and the information bar on the center (showing trafic info, if that feature is planned in CoMaps... ### Additional context I'm not an UI/UX designer, these are just some ideas if it can help a little (some of the elements in the video design here are a little too big... it's just a global idea...) Again, thanks a lot for this great app ! :)

IXVG47QZ commented 2025年07月11日 11:52:19 +02:00

Wow, that's amazing! I especially like how the speed limit and next turn information is very easy to see. Very much needed. I don't like spending too much time trying to read a street name on the phone when I should be paying attention to driving.

One critique: I think the speed limit should be more visible. Otherwise, very polished, modern, and uncluttered.

Wow, that's amazing! I especially like how the speed limit and next turn information is very easy to see. Very much needed. I don't like spending too much time trying to read a street name on the phone when I should be paying attention to driving. One critique: I think the speed limit should be more visible. Otherwise, very polished, modern, and uncluttered.

gNovp commented 2025年07月11日 15:46:52 +02:00

@IXVG47QZ wrote in #826 (comment):

Wow, that's amazing! I especially like how the speed limit and next turn information is very easy to see. Very much needed. I don't like spending too much time trying to read a street name on the phone when I should be paying attention to driving.

One critique: I think the speed limit should be more visible. Otherwise, very polished, modern, and uncluttered.

Oh thank you ! Yes, I was thinking about it since doing a 200km trip by car with CoMaps :)
Yes, you're right, maybe something like this for the speed limit (more visible, but not risking to mistake it for the real time speed)

Here is a second iteration: I've made the speed limit a little more visible, and added a "destination details screen" (right after the search...)

@IXVG47QZ wrote in https://codeberg.org/comaps/comaps/issues/826#issuecomment-5787593: > Wow, that's amazing! I especially like how the speed limit and next turn information is very easy to see. Very much needed. I don't like spending too much time trying to read a street name on the phone when I should be paying attention to driving. > > One critique: I think the speed limit should be more visible. Otherwise, very polished, modern, and uncluttered. Oh thank you ! Yes, I was thinking about it since doing a 200km trip by car with CoMaps :) Yes, you're right, maybe something like this for the speed limit (more visible, but not risking to mistake it for the real time speed) Here is a second iteration: I've made the speed limit a little more visible, and added a "destination details screen" (right after the search...)

Jordi commented 2025年07月11日 22:10:36 +02:00

This is amazing, so glad we have such an amazing community with fantastic ideas here.

One small detail: I think it would be a nice change to make the speedometer turn yellow when going 1–5 km/h over the speed limit, and red when exceeding it by more than 5 km/h, just like how TomTom does it.

This is amazing, so glad we have such an amazing community with fantastic ideas here. One small detail: I think it would be a nice change to make the speedometer turn yellow when going 1–5 km/h over the speed limit, and red when exceeding it by more than 5 km/h, just like how TomTom does it.

IXVG47QZ commented 2025年07月12日 05:34:29 +02:00

Instead of putting the speed limit in the background, why not have a smaller box at the bottom (offset right). You can also move the current speed up a tad more to give the speed limit box a little more space.

This is the best I could do from my phone to show you what I mean.

The benefit of this is it's easier to see the speed limit, and it won't fade into the background.

Instead of putting the speed limit in the background, why not have a smaller box at the bottom (offset right). You can also move the current speed up a tad more to give the speed limit box a little more space. This is the best I could do from my phone to show you what I mean. The benefit of this is it's easier to see the speed limit, and it won't fade into the background.

IXVG47QZ commented 2025年07月12日 05:43:28 +02:00

Actually, another idea that would look nice is to give the speed limit box a lighter or darker shade background, so it looks inset or outset from the main speed box.

Actually, another idea that would look nice is to give the speed limit box a lighter or darker shade background, so it looks inset or outset from the main speed box.

gNovp commented 2025年07月15日 17:37:43 +02:00

Here is a new version, with the speed limit more visible (and centered). I also changed a little the darkmode background grey. :)

Here is a new version, with the speed limit more visible (and centered). I also changed a little the darkmode background grey. :)

IXVG47QZ commented 2025年07月16日 05:58:09 +02:00

@gNovp wrote in #826 (comment):

Here is a new version, with the speed limit more visible (and centered). I also changed a little the darkmode background grey. :)

That'll do it. You have my support (for whatever that's worth).

@gNovp wrote in https://codeberg.org/comaps/comaps/issues/826#issuecomment-5837087: > Here is a new version, with the speed limit more visible (and centered). I also changed a little the darkmode background grey. :) That'll do it. You have my support (for whatever that's worth).

oleg-rswll commented 2025年07月16日 07:40:04 +02:00

@gNovp thank you for creating this, these are great!

What system do you use for design? We have previous designs in Figma, and new ones are all in Penpot. There is already some design work done to update the in-route UI, would be great for us to collaborate!

@gNovp thank you for creating this, these are great! What system do you use for design? We have previous designs in Figma, and new ones are all in Penpot. There is already some design work done to update the in-route UI, would be great for us to collaborate!

IXVG47QZ commented 2025年07月16日 08:31:37 +02:00

@oleg-rswll wrote in #826 (comment):

@IXVG47QZ thank you for creating this, these are great!

Oops. I think you mean @gNovp. I can't take any credit. But, yeah, it looks amazing!

@oleg-rswll wrote in https://codeberg.org/comaps/comaps/issues/826#issuecomment-5843384: > @IXVG47QZ thank you for creating this, these are great! Oops. I think you mean @gNovp. I can't take any credit. But, yeah, it looks amazing!

oleg-rswll commented 2025年07月16日 17:45:23 +02:00

Yes, thank you, that was intended for @gNovp.

Yes, thank you, that was intended for @gNovp.

gNovp commented 2025年07月18日 13:45:15 +02:00

@oleg-rswll wrote in #826 (comment):

@gNovp thank you for creating this, these are great!

What system do you use for design? We have previous designs in Figma, and new ones are all in Penpot. There is already some design work done to update the in-route UI, would be great for us to collaborate!

Oh, this is done under OnlyOffice Presentation module (so it's technically a PowerPoint file with the morph transition between slides). It was quicker for me to put things together on that software. But I know PenPot, so I can try to do my best to help :)

@oleg-rswll wrote in https://codeberg.org/comaps/comaps/issues/826#issuecomment-5843384: > @gNovp thank you for creating this, these are great! > > What system do you use for design? We have previous designs in Figma, and new ones are all in Penpot. There is already some design work done to update the in-route UI, would be great for us to collaborate! Oh, this is done under OnlyOffice Presentation module (so it's technically a PowerPoint file with the morph transition between slides). It was quicker for me to put things together on that software. But I know PenPot, so I can try to do my best to help :)

gNovp commented 2025年07月18日 13:46:05 +02:00

@IXVG47QZ wrote in #826 (comment):

@gNovp wrote in #826 (commentaire):

Here is a new version, with the speed limit more visible (and centered). I also changed a little the darkmode background grey. :)

That'll do it. You have my support (for whatever that's worth).

Thanks a lot ! :)

@IXVG47QZ wrote in https://codeberg.org/comaps/comaps/issues/826#issuecomment-5843054: > @gNovp wrote in #826 (commentaire): > > > Here is a new version, with the speed limit more visible (and centered). I also changed a little the darkmode background grey. :) > > That'll do it. You have my support (for whatever that's worth). Thanks a lot ! :)

oleg-rswll commented 2025年07月19日 02:34:03 +02:00

Here is the latest design for the in-route navigation UX.

https://www.figma.com/design/cX53wLEHfisQ1PlSMSFiMb/OM-App---Route-Planning?node-id=332-213&t=YwNXolINgQvOAtJw-1

Here is the latest design for the in-route navigation UX. https://www.figma.com/design/cX53wLEHfisQ1PlSMSFiMb/OM-App---Route-Planning?node-id=332-213&t=YwNXolINgQvOAtJw-1

BluePixel4k commented 2025年07月19日 09:04:19 +02:00

@oleg-rswll

Here is the latest design for the in-route navigation UX.

https://www.figma.com/design/cX53wLEHfisQ1PlSMSFiMb/OM-App---Route-Planning?node-id=332-213&t=YwNXolINgQvOAtJw-1

How difficult is it to integrate this design into comaps?

@oleg-rswll >Here is the latest design for the in-route navigation UX. > >https://www.figma.com/design/cX53wLEHfisQ1PlSMSFiMb/OM-App---Route-Planning?node-id=332-213&t=YwNXolINgQvOAtJw-1 How difficult is it to integrate this design into comaps?

oleg-rswll commented 2025年07月20日 04:20:54 +02:00

It's not overly complicated, but it is a fair amount of work. Right now everything is done by volunteers.

When donations increase, we will be able to hire a person full time.

It's not overly complicated, but it is a fair amount of work. Right now everything is done by volunteers. When donations increase, we will be able to hire a person full time.

gNovp commented 2025年07月22日 13:56:03 +02:00

@oleg-rswll wrote in #826 (comment):

Here is the latest design for the in-route navigation UX.

https://www.figma.com/design/cX53wLEHfisQ1PlSMSFiMb/OM-App---Route-Planning?node-id=332-213&t=YwNXolINgQvOAtJw-1

Ok, thank you !
Do you have a link to the Penpot one ? So I can create a new page, and add these concepts to it...

@oleg-rswll wrote in https://codeberg.org/comaps/comaps/issues/826#issuecomment-5888686: > Here is the latest design for the in-route navigation UX. > > https://www.figma.com/design/cX53wLEHfisQ1PlSMSFiMb/OM-App---Route-Planning?node-id=332-213&t=YwNXolINgQvOAtJw-1 Ok, thank you ! Do you have a link to the Penpot one ? So I can create a new page, and add these concepts to it...

oleg-rswll commented 2025年07月22日 23:16:54 +02:00

I tried exporting out of Figma and importing into Penpot multiple times, but it didn't seem to work. Recreating the existing designs in Penpont is not a priority, we can use Figma for those which are already there. And all new designs are in Penpot. So you can create the concepts in Penpot.

I tried exporting out of Figma and importing into Penpot multiple times, but it didn't seem to work. Recreating the existing designs in Penpont is not a priority, we can use Figma for those which are already there. And all new designs are in Penpot. So you can create the concepts in Penpot.

gNovp commented 2025年07月28日 19:20:26 +02:00

I just finished a first iteration of this UI concept on penpot (it's far from perfect but at least it's a starting point, and it can be more collaborative like that).

Here is the link to the Flow: https://design.penpot.app/#/view?file-id=06b7d979-bfb0-8018-8006-8f9d915517e7&page-id=06b7d979-bfb0-8018-8006-8f9d915517e8&section=interactions&frame-id=2fbcdbf9-9225-80a1-8006-8f9d9bd64fb3&index=0&share-id=996b171d-7feb-81a4-8006-8fb958d63847

If you want to collaborate on that, I can create a PenPot team

image

Updated on the 30/07/2025 (added new flyovers)

I just finished a first iteration of this UI concept on penpot (it's far from perfect but at least it's a starting point, and it can be more collaborative like that). Here is the link to the Flow: https://design.penpot.app/#/view?file-id=06b7d979-bfb0-8018-8006-8f9d915517e7&page-id=06b7d979-bfb0-8018-8006-8f9d915517e8&section=interactions&frame-id=2fbcdbf9-9225-80a1-8006-8f9d9bd64fb3&index=0&share-id=996b171d-7feb-81a4-8006-8fb958d63847 If you want to collaborate on that, I can create a PenPot team  Updated on the 30/07/2025 (added new flyovers)

gNovp commented 2025年07月30日 09:17:40 +02:00

Added design ideas for:

Search flyover

Agregates the categories, favorites and history functions, with quick categories on top for quick access.
This flyover is differenciated in Navigation mode, with bigger touch targets to help while driving or biking (icons should be bigger too, I still have to enlarge them).
image

Signal event flyover

Provides the OpenStreet Maps edition link, and quick buttons to add temporary data to the map (speed cameras, road work, accident, trafic...
image

Speed panel

As big as possible, and placed in the top left (or right if the UI is set in "left-handed driving mode") to be easily noticeable, and as close to the driver/biker field of view as possible. Shows clearly the current speed limit (as suggested by @IXVG47QZ ) and displays speed in 3 states (as suggested by @Jordi ): Normal, slight overspeed and large overspeed. This is a killer feature for people like me with older cars (or while biking) relying more on GPS speed.

• Can be toggled in the penpot mockup by clicking on the speed panel itself
• Can be turned off in the settings, always shown, or displayed only while moving (trigger over 10km/h maybe ?)
• Overspeeding could either be announced by the TTS (simply saying "Overspeed"), or a Beep notification, that could be set up to repeat when approaching a danger zone (trigers at 500m from a road work, accident, traffic jam, speed camera...).
  image

Navigation screen

Redesigned with the new panel idea

• Taping the Navigation panel (green) could bring the Route details, agregating the next instructions, and Route alerts.
• The line on the bottom of the Navigation panel currently displays the lane change suggestion indicator for the current instruction.
• Taping the Route information panel (on the bottom) brings the "End navigation" button, as in today's CoMaps UI.
  image

Route alerts

Dismissable Route alerts (pushed by other CoMaps users via the "Signal event" panel), shown on the map. Click to confirm that this alert is real (or activate the default linked action, like triggering a filtered search for "break" and "low fuel" alerts), swipe to dismiss it.

• If a Route alert has been dismissed, taping it's icon on the map could bring it back.
  image

Quick settings flyover

Agregates the previous layers and menu flyovers, available under a single button
image

Restructured Settings screen

Reorganized with a few new categories to help find quickly the different settings. Sorry if the settings texts strings are not exactly the english ones: I only have CoMaps in French on my phone, so i'm trying my best to translate back to english haha.

• Added some granular control over the CoMaps panels UI: Color and Size of the UI can be set independantly from the colors of the map (helps people having trouble seeing information on a phone screen while driving, like older people), Maybe new color options to help colorblind people (grayscale maps to help contrast the route visuals themselves).
• The whole UI can be set to either take all length of the screen (for phones), but also only a third of it, and be anchored on the left, the middle, or the right of the screen (for people like me using tablets as their navigation device, and people in left-handed driving countries)
• And I've also added a few new options there that are just suggestions of new features, like a small Media playback control bar on the bottom of the UI when an other app is playing music, to avoid switching between apps while driving/biking. Or ODBII integration (fuel level related alerts and suggestions) etc...

(The toggle controls are missing at the moment)

Added design ideas for: ### Search flyover Agregates the categories, favorites and history functions, with quick categories on top for quick access. This flyover is differenciated in Navigation mode, with bigger touch targets to help while driving or biking (icons should be bigger too, I still have to enlarge them).  ### Signal event flyover Provides the OpenStreet Maps edition link, and quick buttons to add temporary data to the map (speed cameras, road work, accident, trafic...  ### Speed panel As big as possible, and placed in the top left (or right if the UI is set in "left-handed driving mode") to be **easily noticeable**, and as close to the driver/biker field of view as possible. Shows clearly the current speed limit (as suggested by @IXVG47QZ ) and displays speed in 3 states (as suggested by @Jordi ): Normal, slight overspeed and large overspeed. This is a killer feature for people like me with older cars (or while biking) relying more on GPS speed. - Can be toggled in the penpot mockup by clicking on the speed panel itself - Can be turned off in the settings, always shown, or displayed only while moving (trigger over 10km/h maybe ?) - Overspeeding could either be announced by the TTS (simply saying "Overspeed"), or a Beep notification, that could be set up to repeat when approaching a danger zone (trigers at 500m from a road work, accident, traffic jam, speed camera...).  ### Navigation screen Redesigned with the new panel idea - Taping the **Navigation panel** (green) could bring the Route details, agregating the next instructions, and Route alerts. - The line on the bottom of the Navigation panel currently displays the **lane change suggestion indicator** for the current instruction. - Taping the **Route information panel** (on the bottom) brings the "End navigation" button, as in today's CoMaps UI.  ### Route alerts **Dismissable Route alerts** (pushed by other CoMaps users via the "Signal event" panel), shown on the map. Click to confirm that this alert is real (or activate the default linked action, like triggering a filtered search for "break" and "low fuel" alerts), swipe to dismiss it. - If a Route alert has been dismissed, taping it's icon on the map could bring it back.  ### Quick settings flyover Agregates the previous layers and menu flyovers, available under a single button  ### Restructured Settings screen Reorganized with a few new categories to help find quickly the different settings. Sorry if the settings texts strings are not exactly the english ones: I only have CoMaps in French on my phone, so i'm trying my best to translate back to english haha. - Added some **granular control over the CoMaps panels UI**: Color and Size of the UI can be set independantly from the colors of the map (helps people having trouble seeing information on a phone screen while driving, like older people), Maybe new color options to help colorblind people (grayscale maps to help contrast the route visuals themselves). - The whole UI can be set to either **take all length of the screen (for phones), but also only a third of it**, and be anchored on the left, the middle, or the right of the screen (for people like me using tablets as their navigation device, and people in left-handed driving countries) - And I've also added a few new options there that are just suggestions of new features, like a small Media playback control bar on the bottom of the UI when an other app is playing music, to avoid switching between apps while driving/biking. Or ODBII integration (fuel level related alerts and suggestions) etc... (The toggle controls are missing at the moment)

matheusgomesms commented 2025年07月30日 10:33:52 +02:00

@gNovp did you see #348? There are several issues from OM linked there, and each one has lots of discussion. Maybe it can help you somehow! (nice work by the way!)

@gNovp did you see #348? There are several issues from OM linked there, and each one has lots of discussion. Maybe it can help you somehow! (nice work by the way!)

gNovp commented 2025年07月31日 08:31:11 +02:00

Continuing to enhance this concept in #348 ...

Continuing to enhance this concept in https://codeberg.org/comaps/comaps/issues/348 ...

matheusgomesms commented 2025年07月31日 11:49:24 +02:00

Let's close this issue to keep a centralized discussion over #348!

Let's close this issue to keep a centralized discussion over #348!