View Single Post
Posts: 100 | Thanked: 408 times | Joined on Aug 2009 @ Helsinki
#1
Hi!
The Mapper projects need some help with icons and UI design; some months ago some people offered help with icons, but only one did actually deliver the full set, which is the one currently used. And some of those icons are a bit hard to understand, so I wouldn't mind getting new icons, so to pick the best ones.

The current set is this:
Starting from the top right in clockwise order, the actions are:
- zoom in
- zoom out
- empty, but I'm planning to have a "toggle map layers" icon there
- toggle fullscreen/windowed view
- toggle GPS on/off: these are two different icons; the icon changes depending on the current GPS state
- open the map view options menu (which contains the auto-center and auto-rotate options)
- go to (address, coordinates, current GPS position, neareast POI...)
- route menu (get route to, load/save route, recalculate route)
- track menu (enable/disable tracking, load/save track)
- pick a point (asks the user to tap on a point of the map, and bring up a contextual menu based on the chosen point)

These icons are all 64x64 pixel, transparent; they are put over a 72x72 background (so no spacing is needed: they can fully use the 64 pixels), which now is a semi-transparent gradient of white/light grey, but which might change in the future.

Then, I've recently re-wrote the navigation system, so that instead of just showing small hardly readable banners, it would show some bigger graphics:

The icon displayed on the top left can be of different types:
- turn right
- turn left
- slight turn right
- slight turn left
- continue straight
- take the 1st exit
- take the 2nd exit
- take the 3rd exit
- attention (this is used for all other cases when we don't have a specific message)
All this icons must fit in a 128x128 pixel square; they should be transparent and possibly good looking with any background (which will probably be bright).


Besides this, I'd like to improve the navigation view shown above. It is composed of three elements: the 128px icon, a 128px square which shows the distance towards the next viewpoint, and the rest of the screen is taken by a rectangle whose height depends on the length of the displayed text. This is the portrait version of the same:

These elements only appear when approaching a waypoint, and they are not causing the map area to shrink; they are simply laid on top of it. Now, the trick is how to create a layout that doesn't cover the central area of the map (because the dot marking the current position is going to be there), and still gives an immediate information to the user. For the portrait mode, I considered having the distance square on the right side, so that they layout would be symmetrical, but then I'm afraid that this would make it harder to read, because the icon and the distance are two elements which are tightly connected to each other and putting them on different sides of the screen might make the information less immediate.
But still I cannot say that I like the way the elements are shown now (especially when in portrait mode).
Also, suggestions on the colours, as well as adding borders to these elements, especially if coming with some UI mock up, would be appreciated. :-)
 

The Following 8 Users Say Thank You to mardy For This Useful Post: