top of page

Information Visualization

- by Shekhar Parkhi

 

Layouts

Suzzallo and Allen Libraries
​Part of the University of Washington's University Libraries System
(Display - I)
 

This display is a culmination of all the other visual displays exploiting the visual potential of numbers, location, appearance, relationship and time. I have used a total of 6 displays, 2 of location and 1 each of the rest. Also, 3 icons, exploiting the visual potential of appearance have been designed for each of the 3 columns.

 

I have emulated my model infographic in the following manner:

The entire display as a whole is layed out just as the model infographic, with the UW logo, title, subtitle, purple background and distinct columns in white, inside which the actual content is put.

The text is written in purple as in the model. Moreover, the title is written on a gold ribbon-like strip as in the model inforgraphic. Also, at the end of each of the 3 gold strip, is a tiny icon, inside a circle, representing in some form or manner the topic of each of those 3 columns.

 

The visual hierarchy of the layout of this display forces the viewer to look at the  infographic and understand that it is split 3-way, as represented by the 3 vertical white columns. Next, the title of the infographic is seen. In the first column "Over the years", the viewer sees the images, the timeline with the years mentionned and then the description of the events that take place in those years.

 

The second vertical column depicts the libraries's "Location on campus". Here, the gold and blue lines guide the viewers to first see the UW map, then the appearance of the top view of the buildings of the two libraries and then, the venn diagram representing the space usage in the libraries.

 

In the third column, the viewer sees the "Power consumption" statistics of the libraries. A pie chart for the Suzzallo and an area chart for the Allen libraries are seen. The gold and the blue annotations regarding the maximum electricity consumption are seen next.

 

Also, next, the mini icons at the top of each column beside the column titles that complement the title are quite visible. The subtitle below the infographic title now becomes visible, quite lower down in the visual hierarchy.

 

Last in the visual hierarchy come the UW logo (the "W" symbol), along with the "University of Washington" written beside it and ultimately, the UW website mentionned underneath it.

Critique Feedback
​

In the feedback session, the first person commented that he really liked that the inforgraphic was distinctly split into three different topics, with unique titles and icons. He liked the fact that UW colors were used to give it a UW feel. He also felt that it was well-balanced and the colors were repeated uniformly. He did comment that the first column lacked the use of colors and had a little too much text.

 

The second person also commented that the overall infographic looks good and the elements were well-placed and spaced evenly. He recommended having a shorter base to the vertical ladder in the first column.  Also, he felt that that the elements in the second and the third column weren't horizontally aligned. He also suggested to make the year labels in the first column of a font that is closer to the one used in my model infographic.

 

The third person, too, liked the fact that UW colors were made use of and the infographic was split into 3 different columns. But, she noticed that the first column looked quite different than the rest.  She also liked the fact that the infographic showed much more than just the Power Consumption charts. She preferred to have the corresponding labels for the quarters e.g. Q1 stands for Winter Quarter, Q2 for Spring, etc.

 

After gathering all this valuable feedback, I decided to make a few important changes to this layout and not the other, as almost everyone preferred this one over the second. Firstly, I added gold borders to the pictures in the first column and made the ladder blue in color, such that all the colors seem used in the first column at the infographic looks more balanced, wit respect to color. I also shortened the description for each image, so that the first colun does not look heavily crowded with text. I also reduced the length of the base of the ladder to made it equal to its steps, so that it doesn't stand out unnecessarily. Moreover, I aligned the elements of the second and third columns horizontally. In order to clearly show which quarter of the calander year stands for which quarter of the academic year at UW, I added the labels of Autumn, WInter, Spring and Summer to both the charts in the third column.

 

Furthermore, my professor commented that the bubble chart did not seem to fit under the title "Location on Campus" of the second column. She also said that it seemed a bit odd that the total space bubble still had some spce left over, after having being divided into the assigned space and vacant space, as if there were a third category besides these two. Considering all this, I decided to change the title of the second column to "Accessing the Libraries" and also changed the corresponding icon beside the title from a compass to an open door with an arrow pointing inwards. I also got rid of the "Vacant Space" bubble, as I felt it wasn't adding any value to my infographic. I changed the label "Assigned Space" to "Accessible Spaces".

 

My professor also pointed out that the area chart in the third column showing the power consumption of the Allen Library has a small issue, that its y-axis does not start from zero and this may mis-represent the information it is trying to convey. Following this, I added a zero to its y-axis and also added the four different colors to this graph, that I had used in the pie chart above it, so that they represent the same information (four colors = four quarters).

 

One other thing I did was add a bit of the purple color to the icon of the first and second column, as I had used some in the icon of the third column and plus, it also emulates my model infographic, as it uses both blue and purple in the icons beside the titles of the three columns of the model infographic. Another thing I did was changed the way that the title is displayed to look more like the model infographic. I also added "2013" to the title to make it seem like the model and to inform the users that the data displayed in the infographic is relevant in the year 2013, for e.g. the timeline is relevant as no major thing has been added to the Suzzallo and Allen Libraries since 2002, at least until 2013. Also, the electricity consumption data for the two libraries is for the year 2013.

Suzzallo and Allen Libraries
​Part of the University of Washington's University Libraries System
(Display - II)
​

This display is quite similar o the first layout display, with the placement of the columns and the elements altered a little, giving a slightly different feel. This display is a culmination of all the other visual displays exploiting the visual potential of numbers, location, appearance, relationship and time. I have used a total of 6 displays, 2 of location and 1 each of the rest. Also, 3 icons, exploiting the visual potential of appearance have been designed for each of the 3 columns.

 

I have emulated my model infographic in the following manner:

The entire display as a whole is layed out just as the model infographic, with the UW logo, title, subtitle, purple background and distinct columns in white, inside which the actual content is put.

The text is written in purple as in the model. Moreover, the title is written on a gold ribbon-like strip as in the model inforgraphic. Also, at the end of each of the 3 gold strip, is a tiny icon, inside a circle, representing in some form or manner the topic of each of those 3 columns.

 

The visual hierarchy of the layout of this display forces the viewer to look at the  infographic and understand that it is split 3-way, as represented by the 3 vertical white columns. Next, the title of the infographic is seen. In the first column, the viewer sees the "Power consumption" statistics of the libraries. An area chart for the Allen and a pie chart for the Suzzallo libraries are seen. The gold and the blue annotations regarding the maximum electricity consumption are seen next.

 

The second vertical column depicts the libraries's "Location on campus". Here, the blue and gold lines guide the viewers to first see the venn diagram representing the space usage in the libraries, then the appearance of the top view of the buildings of the two libraries and then, the UW map.

 

In the third column "Over the years", the viewer sees the images, the timeline with the years mentionned and then the description of the events that take place in those years.

 

Also, next, the mini icons at the top of each column beside the column titles that complement the title are quite visible. The subtitle below the infographic title now becomes visible, quite lower down in the visual hierarchy.

 

Last in the visual hierarchy come the UW logo (the "W" symbol), along with the "University of Washington" written beside it and ultimately, the UW website mentionned underneath it.

 

Critique Feedback
​

Most people preferred the first layout over the second, and hence, I carried forward with the first layout for designing my final infographic and did not take the 2nd layout ahead.

bottom of page