Notices


Reply
Thread Tools
Posts: 98 | Thanked: 395 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:
Posts: 1,341 | Thanked: 695 times | Joined on Feb 2010
#2
Originally Posted by mardy View Post
- toggle fullscreen/windowed view
- toggle GPS on/off: these are two different icons; the icon changes depending on the current GPS state
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.)
 
Posts: 4,556 | Thanked: 1,612 times | Joined on Dec 2007
#3
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.
__________________
Originally Posted by ysss View Post
They're maemo and MeeGo...

"Meamo!" sounds like what Zorro would say to catherine zeta jones... after she slaps him for looking at her dirtily...
 
Posts: 2 | Thanked: 5 times | Joined on Apr 2010 @ Rome - Italy
#4
Hi
do you think this can be usefull for you?





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

for private lucapettini (at) ovi (.) com
 

The Following 5 Users Say Thank You to @lucapettini For This Useful Post:
Posts: 98 | Thanked: 395 times | Joined on Aug 2009 @ Helsinki
#5
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! :-)
 
Posts: 2 | Thanked: 5 times | Joined on Apr 2010 @ Rome - Italy
#6
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.
 
Posts: 24 | Thanked: 11 times | Joined on Dec 2009
#7
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.



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

Last edited by Spyder; 2010-05-20 at 03:11.
 
Posts: 98 | Thanked: 395 times | Joined on Aug 2009 @ Helsinki
#8
Originally Posted by @lucapettini View Post
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.
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!
 
Posts: 98 | Thanked: 395 times | Joined on Aug 2009 @ Helsinki
#9
[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.

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.
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.
 
Posts: 151 | Thanked: 82 times | Joined on Sep 2008
#10
Originally Posted by Spyder View Post
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.



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

The Following User Says Thank You to fixfox For This Useful Post:
Reply

Thread Tools

 
Forum Jump


All times are GMT. The time now is 06:38.