Designing Maps...

This blog post is for readers/students who want to know about the designing side of Y! India Maps. For our map product we designed both the map cartography and UI.

Map Cartography

Map

Maps cartography is the designing of the maps. Map cartography is a pure “information design” problem. There are two aspects to it – “what data to show at what zoom level?” and then “how to show?”. From the design stand point they combine together to create the desired effect. Thus we used the Visual Design in a way to assist the information (Data) architecture. We had a limitation in terms of what we can do – like we can not have a border on text, there were limitation on transparency etc. So we work largely with colors. Things that the users want to see more often have brighter colors or are enhanced (by changing the width, border etc); secondary information is subdued. Every zoom level had a purpose (objective) in terms of what they will convey. And also every zoom level had relation with the previous and next zooms. This was important as the map is interactive; on zoom the user should feel as if hes zooming. Zoom spec tried to connect both the relationship aspect (with other zooms) and the individual aspects (it shouldn’t look cluttered).

Map Tile some time in Nov. It all began with this... (this is Zoom 06 and you are looking at Delhi)

To see this location (with same zoom level) in current version. Click here – you won’t believe it!!

Hybrid

Though the design principles remained the same the strategy was a slightly different. The Data in this case was a supplement to the Satellite images. Though at higher zoom levels the things don’t matter much but as you zoom in the specs starts to change. As the city level starts to appear the Satellite image itself becomes a huge repository of information. Then you start to see what information is going to add value to the image below. If you are looking for your house and you know which locality you live in, you could navigate through locality and some landmarks through our Y! India Maps.

User Interface

We tried to keep the page as light as possible - as less images as possible. Another question I had been answering from the time I proposed it was “why right navigation”. Well there is a long story behind it, which i'll tell later. But we kept the info pane on the right just to experiment; but this layout suddenly started to make a lot of sense:

• The Left became very less cluttered.
• The is not break between the info pane or map area – as in other map site with left info/navigation pane.
• The listings in the Search Result Page comes closer to the map. Its on the left on the right pane. Thus better visual connection.
• The map which is the main information space get the Topish –Left space. Most viewable area of the screen.

I had to create a separate twiki page (internal web page of this product) with the explanation because so many people asked this and so many times…

Another important aspect was to keep the information (and the UI) incontext. So you will see the yellow message boxes appearing below in “Do more with maps” section (one that comes after you search for a allocation). We designed the UIs with full feature in mind. Right now I can say its just 30% of what we deigned for. The design is largely scalable as functions grow they will be added without major changes to UI design.

We never tried to coping anyone; we wanted to solve the problem with the best effect. Some differentiators of Y! India Maps could be -

• Right navigation/info pane.
• The Split of the top header marking the map area and info pane area.
• Map being attached with its header than detached.
• The use of ‘Color’. Which are broadly taken from Yahoo! Local (US) – the blue being a little more bright to add a little “life” to the UI.
• The error messaging styles.

One thing that we didn’t think much was the Printable Version page. It still needs a lot of thinking and improvement.

Its encouraging to find that people have started liking it and writing about it - webyantra

It was real fun working on maps and we sincerely hope you’ll find it fun to use. Please do take some time off and post you feedback on the product. The stage is now set, its time to rock n rolls; hope this product goes a long way. Though I may not be there but I wish Y! India Maps - All the very best…