Mapper: help needed with icons and UI design
 

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:http://www.mardy.it/archivos/imagines/mapper-osm.png
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:
http://www.mardy.it/archivos/imagine...directions.png
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:
http://www.mardy.it/archivos/imagine...s-portrait.png
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. :-)

Re: Mapper: help needed with icons and UI design
 

I think all toggle buttons should change icons according to the state.

(btw, Also N900 www-browser should change that windowed/full_screen icon in the lower right corner according are we already in the full screen mode or not.)

Re: Mapper: help needed with icons and UI design
 

I don't have much experience with graphical programs (besides extremely basic photoshopping.. or GIMPing if you use GIMP?). But out of the icons I see the only one that probably is misleading is the track icon, options, and maybe the go-to.

Re: Mapper: help needed with icons and UI design
 

Hi
do you think this can be usefull for you?

http://img26.imageshack.us/img26/6152/mapper2.jpg

http://img685.imageshack.us/img685/363/mapper1.jpg

Tell me if you like and i can work on for give you single .gif or .png

for private lucapettini (at) ovi (.) com

Re: Mapper: help needed with icons and UI design
 

Luca, I like most of your icons, but it looks like you are proposing some deeper changes in the interactions. Currently the on-screen menu is only visible when you touch the screen, and disappears after 5 seconds; it seems you are proposing to have it all the time, with the left side optional (but that button to activate it, seems a bit too narrow).

Anyway, some random observations:
- The top-left icon should probably have the full circle.
- I cannot understand what the second icon on the left does.
- the + and - icons are drawn with a different style than the rest.

I like the thin white circle you draw around the waypoint! I think I'll draw the points like that, too! :-)

Re: Mapper: help needed with icons and UI design
 

I didn't know icons will disappears after 5 second.. so my idea of a button to activate them it's of course unusefull.

I try to reply to your question:
- For the first icon you right.. but i just changed it, so it's ok :)
- It's a classic icon Nokia used in S60 menu.. it's something like "setting".. this because i really didn't understood what that icon need to do... if you can explain me i can choose a better one
- it's the same mistake about the 5sec roules.. cause i thought that + and - will be visible all the time, so i did smaller to do not cover too much the map.

Anyway, if you still need a hand on Mapper graphic, i can restyle what i did and make it better. I was also working on navigation system icon... let me know.

Re: Mapper: help needed with icons and UI design
 

Mardy, IconFinder has some VERY nice, free icons. The problem is finding a full set with everything you need, but at least you can find something in the style you like, and it might make it easier for someone to design based on that style. http://www.iconfinder.com/free_icons

I don't know if you still needed help with the UI, but I threw something together in photoshop just now. The size would probably fit the portrait display, but I don't think I got the proportions right. Anyway, tell me what you think and we can work on it further if you want.

http://www.rajivoberoi.com/images/NavDemo.jpg

PS: I know nothing about coding for Maemo, so I don't know if anything in that image is even possible!

Re: Mapper: help needed with icons and UI design
 

Sorry, I forgot to reply to this thread. :)
Yes, I'm indeed still in need of graphics, so if you have time to work on some icons, you are most welcome!

Re: Mapper: help needed with icons and UI design
 

[QUOTE=Spyder;666974]Mardy, IconFinder has some VERY nice, free icons.[/url]

Thanks! I didn't know about it. I'll have a look at it, it seems huge. :)

The layout you suggest is indeed possible, but I'd rather leave more space for the textual description. Then, if you consider that the resolution of the screen is 800x480 pixels, we really want more width for the text when in portrait mode.

Re: Mapper: help needed with icons and UI design
 

These are Great ! :D

Re: Mapper: help needed with icons and UI design
 

Thanks fixfox!!

mardy, I see what you mean, so I think 50% should be devoted to text, and 25% each to the wayfinding and distance icons. What sort of style are you looking for, and what requirements do you need for the distance text (fonts, gradients, etc - or do you need an image for every number 0 - 9, and you will display the images accordingly)

Re: Mapper: help needed with icons and UI design
 

Just playing around again, got the proportions right this time!

http://www.rajivoberoi.com/images/NavDemo2.jpg

Re: Mapper: help needed with icons and UI design
 

Hi,

I created a set of 'turn' icons for Mapper (great program btw). Let me know if they are okay.

(Sample shown below).

Thanks.
-DJ

Re: Mapper: help needed with icons and UI design
 

Unfortunately we cannot play any tricks with the text: I mean, we cannot know that "route 101" is the name of a street, and therefore we cannot mark it in any special way. But I like the idea of having a gradient as background, I'll try to implement that!

Re: Mapper: help needed with icons and UI design
 

Wow! :-) I like them, just a few comments:

- we don't have "exit left" and "exit right", but "1st exit", "2nd exit" and "3rd exit"; they are used to tell what exit to take in a roundabout.
- the background has some green gradient on the right side; could you make it completely transparent instead? I can combine the icon with a gradient myself, and that will give me more flexibility in the placement/styling.
- "Straight": can you add two roads on the sides? The meaning of the icon is: there are turns/crossroads in your way, but continue to go straight.

And the last word is: thanks! :-)

Re: Mapper: help needed with icons and UI design
 

Hi Mardy,

Attached please find the updates you requested. There are two versions of the icons. The original contains the semi-transparent light green background. The other file contains the transparent icons.

Let me know if you need anything else.

Thanks,
-DJ

Re: Mapper: help needed with icons and UI design
 

Thanks Danny! I'll try to include them in the next release! :)

Re: Mapper: help needed with icons and UI design
 

Hi, I have just started testing Mappero out, with a hope that I will be able to soon import;

http://openwms.statkart.no/skwms1/wm...NSPARENT=FALSE

I have also been playing with a new icon set. Let me know if you are interested!

http://vikorasmussen.com/mappero/example.png

Re: Mapper: help needed with icons and UI design
 

Mappero supports WMS type maps, so I guess it should be possible to create a repository for these maps. I'll give it a try!

I'm interested :)
I'm actually hoping that someone will provide a colourful icon set, but any contribution is welcome! :)

Re: Mapper: help needed with icons and UI design
 

Very good, some more urls are found under;

WMS
Cache
and
Use in uDig

I wish I knew more about mappero and WMS, in order to get the right url/coordinates and such.

The icons are attached as transparent pngs. I can easily change their color or give them more colors, but tried to keep them subtle, so they wouldn't seem like they were in the way of the map.

Re: Mapper: help needed with icons and UI design
 

I don't have much artistic talent or time, but by searching for freely available icons on the web and making my own fullscreen icon, I was able to come up with the attached image.

I can't redistribute the icons themselves, but something like this would be nice.

I actually swapped the GPS enable/disable icons, since I found the default arrangement confusing (ie. if I see a picture of a satellite, I expect it to indicate that GPS is currently enabled, and that pressing it will disable GPS).

Re: Mapper: help needed with icons and UI design
 

This might be useful to you... contact me if you want the PSD with transparency / vector layers.

You'll notice I've split off auto-centre and auto-rotate, to make them usable in 1 click instead of 3-4 clicks. (You'll also notice I have no friggin idea what "Auto-centre: Lead" means, so I have completely omitted it :D)

I think the very first button ("act on next clicked place") ought to disappear entirely, and should be the default behaviour if you touch anywhere inside the map without dragging.

Much, much more needs to be done to Mappero in terms of usability, but for now this is a good start.

Re: Mapper: help needed with icons and UI design
 

I wanted to contribute to the community so I put together some icons. I am planning to eventually create a Flash demo on how to use the app.

Your feedback is very appreciated.

Re: Mapper: help needed with icons and UI design
 

Hi all, thanks for your proposals!
I'm planning on changing the icon set for the next version, but I've to say that I'm very undecided about which ones to pick. Being that there are so many installations of mappero out there, I'm afraid of taking a choice which will disappoint many users, in case our tastes don't match.

So, I'd like to ask you all to express your opinions on the icon sets which have been posted throughout this thread. Tell what you like, what you don't, and if of course you have some suggestion of how you'd change this or that icon, please do so.

Or just add one "Thanks!" to the post whose icons you like the most.

Please help me not to take an unpopular decision :-)

Ciao,
Alberto

Re: Mapper: help needed with icons and UI design
 

Hi, I am an occasional user of Mappero as I know where I'm going most of the time, and generally use Mappero for the Google traffic layer. Especially this last week or two with the bad weather in the UK.

I quite like Martymeflb's and Electric Lungfishs icon sets, but would prefer the contrast against the map to be higher, as like the current set, sometimes hard to pick up at a glance. Colour or a higher contrast on the background may help here. Or a simple set of high contrast icons. I would actually like to see a simple high contrast icon theme based on and similar to the default theme's icons.

the hardest icons to understand currently are the GPS icon, as when it i on it appears to be crossed out, or switched off which is counter intuitive. reversing this would improve things. Or have a sat dish with no "waves" when not receiving, and "waves" when on.

Unfortunately I do not have much artistic talent, but this may hopefully inspire someone else.

Re: Mapper: help needed with icons and UI design
 

Sorry for being a necromancer, as usual. Could be my new nickname...

Anyways, what's the situation?
I'm a fan of the program, but the 3d-ish buttons weren't my boatfloat. I quickly did mashed these up yesterday:
http://img202.imageshack.us/img202/3...1053002520.png
http://img198.imageshack.us/img198/4...vslightrig.png
Too bad I noticed this thread only after that; I quite like the ones martyfmelb posted.

martyfmelb, I'd be very interested in these icons, if for nothing else, just my own personal mapper/mappero use.