Dealing with GIS

GIS is the next generation technology; one that deals with geographical data. GIS makes a basic layer which can be used as a base to build multiple utility products from - building a local business product; to urban planning; to architecture layouts to Town planning;to topography sheets in geology - everything that has anything to do with Geographical data.

The first thing that you would like to ask is - What data do you want to show at what zoom level (‘if’ you are dealing with zoom)? This totally depends on the intent of the design – what is to be achieved is what will define what data is important and how is it interconnected. Thus the full information set needed - with priority of each.

One data set (for one zoom) could involve multiple data – roads (with numerous categories); water bodies (with numerous categories); land use (with numerous categories); Electric lines; topography; soil type; vegetation etc. The list can be enormous.

After you choose the data type you have to visually represent it. Now it’s easier said than done…look at the options you have to control to make your designs -

• For - Vector Line
• Line width (in px) + color/pattern of line + Transparency (alpha channel) + Line type + (maybe) elevation – z axis data as well;
• Border (in px) + color of border + Transparency of border + Line type (dotted, dashed, complete etc.) + Anti aliasing;
• Text (Name of the line) + Font for Text + Color of the text + Border to Text + Color of border to the text + Transparency of the text + Name to be rendered – full, part, abbreviate.
  

• For - Polygons (regions)
• Color/pattern of region + Transparency + (maybe) elevation – z axis data as well;
• Text (Name of the region) + Font for Text + Color of the text + Border to Text + Color of border to the text + Transparency of the text + Name to be rendered – full, part, abbreviate.
  

• For - Points
• Marker/Icons;
• Text (Name of the region) + Font for Text + Color of the text + Border to Text + Color of border to the text + Transparency of the text + Name to be rendered – full, part, abbreviate.
  

Every data has a lat-long info attached to it. Thus all the points correspond to a point on earth. But there is another issue for you to solve – the correction in making a map by taking into account the circular aspects of the earth. Though thats a mathematical problem; but as designers there are a lot of scenarios where it makes a difference (like if the map is to be imposed on any background like satellite images; aerial images etc. or if it has to corresponds exactly on a point in earth - say for planning.).

This is definitely huge list – how many permutations and combinations? This is the kind of information overload you are dealing with. The only way to design – simple – if you are focused, you know what you are doing…this is a piece of cake. If not…you’ll be lost. It’s just a pure ‘age old’ information design problem…just digitally enhanced in terms of degree of freedom (more parameters are to be controlled now).

So it all depends on "design" how much users might want to control in GIS; how much parameters (degree of freedom) can be controlled. There are interrelationships and dependencies which are to be accounted while designing for a specialized use.

The more you are aware of what data you are dealing with and what is the importance of it...the better you can design - both the GIS or its usage.

Intelligent designs!

I was going through TED.com when I saw this presentation. I must admit this is one of the most interesting presentation I have seen. Ted's UI design itself is interesting; have a look sometime.

At one of the point David talks of “intelligent design”. I guess that some thing very very important in design. That is one factor that separates a good design from a bad one. Trust me making ‘intelligent’ designs are not easy; the only way one can make is by very good understanding of the problem. As I always say at every step there are multiple solutions; but there are very few (mostly only one) “intelligent” ones. And to get to that solution(s) you have to pass through all the rest. Meticulously evaluating and removing them one by one; and this is no easy task. This is the LOGIC part of the design; one which need analysis and thinking.

Design needs brains; it needs thinking…

First Step is hardest and the most critical

Some days back I was thinking about design when this thought passed by. I have always believed that the first step in design in hardest. Building something from scratch and making the first draft is so tough. The reason that I though its tough is because of this is the step when we deal with “ABSOLUTE” values. To tell you an example – for the first time when we built the spec for cartography, we had to do some much analysis – what to show; how to show; will it look good? So many questions came to the table. But once we built and render the first set, things became easy – now it all became “RELATIVE”. This doesn’t look good so remove it, or add some thing, push this down to a lower zoom etc. Suddenly you will realize it’s now much simpler to edit/manipulate/modify things; now that there is some reference to look forward to.

But there is another important reason why the first step is so critical. It ‘defines’ the number of iterations the design would need. The closer the first step is to final (finished) design the lesser the iterations. Also it give that much more time to iterate and finish you design to the best (or even allow you to extent you limit of ‘finish’). The final step/finish thus depends on the first.

But also if the first step is a failure; either the iteration cycles become enormous (some times unmanageable) or one has to go back again to the drawing table. Thus this step is very important and critical. A good designer should keep this in mind – the more effort you put in the beginning – more the chances of finishing the designing properly (and to your satisfaction).

Product: Competing in established market

We were having a casual discussion over the lunch when a nice thought came in. It is practically impossible or extremely difficult to build a new product to compete with competitor products which have been there in the market for some time. What’s difficult is to bridge the “time” difference between the products. Take an example of Maps; Map products have been around for more than 2 years (I guess) in US. So if some company now wants to come up with a new map product it has to bridge that gap of 2 years. In two year the competitors would have built so many features and enhancements that it is practically not possible to bridge that “time” gap instantly.

The best way could be to not make an exactly similar product but a different/unique product to compete. Some one mentioned Gmail; mail was around but Gmail stole the show because it was different. If it would have been similar to other mails, it wouldn't have created any impact. Its a really nice thought...

This is to some extent the state of whole Web Industry in India. Because it started late; there is hardly any innovativeness or uniqueness. Its lags in time from US; thus innovation is hard to come by. If we move 2 steps closer to them; they again more 3 step further from us. Because now things are well established they can make huge jumps forward; while most of our energy goes in just building the basic stuff.

So if you want to be a part of innovation; want to work with products that are ahead of their time…you have to be in US. Or so I think.

Visual Design as an Information Design tool

Visual Design or Graphic Design as people might call it; has been mostly associated with the Experience and Look n Feel part of design. But Visual design is tremendously powerful tool when it comes to information design / information architecture. I personally feel the real power of this has not been truly utilized on the web. With usage of the age old “Gestalts Law” information can be presented in a very interesting manner. The kind of tools that Visual design uses are – Typography, Color, Placement, Layout, Texture/patterns, etc.

Starting from the Layout – the page itself can be designed to allow users to focus on certain aspects of information / section.

Typography, placement and color could be used to effectively create chunks of information which can be effectively used in segregating information. Also this could effectively create the hierarchy in information. Important information / section can be ‘subtly’ highlighted very effectively. Even simple things like 'bullet points' can be used as visual cues to point to an information.

One aspect that all application should account for is ‘Glazing/Glancing’ and design for it. What I mean by that it; user by just glancing on the page should get as much information as possible. This will substantially increase the readability and understandability of the information presented to the users.

To even use this there is lot of thinking that need to go into design. One has to really understand: what is the - information hierarchy, information chunks and more importantly the “objective” of the page/screen. Objective – Why do we need this page/screen; what the user has to understand in the screen/page; what user has to do in this screen.

The challenge is that if you want to use this you need a pixel perfect both in design and HTML. This is where a single pixel or slight change in color can create a huge difference in design. Just one pixel the information chunks comes close and suddenly you will find that they don’t appear to be two different chunks but one. Here you need a good eye for design.

These are aspect which if present will not be so much noticed by the user; but if absent would make it difficult for users to understand the UI.

We used these techniques in the Map cartography and even the UI.

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…