Archive for the ‘Visual Communication’ Category

Google Analytics

Monday, November 30th, 2009

Google Analytics is an amazing tool. For the price of adding a small bit of embed code to your blog you can glean an amazing amount of insight into the makeup and behavior of your visitors. For example, using data gathered over the last 30 days I was able to discover the following about people who end up at my blog:

  1. The vast majority of hits to my site came from locations within the USA. However it also seems as though I have a small but loyal fan club from Barcelona, Spain who have visited the site 205 times during the last month.
  2. The search term “craig kapp girlfriend” was used to find my site 6 times in the last week. The computer that originated the request lives somewhere in Brooklyn, NY, and this individual stayed on my site for an average of 4:22 minutes, much longer than the average visit over that time (2.18 minutes.) I have no idea who this person is!
  3. A surprising amount of traffic directed to my site is focused on finding information about “kid friendly virtual worlds.”

In the interest of further mining this rich set of data I have constructed a flash-based inspector that parses individual search terms used in locating my blog. The program breaks down search terms into individual words and ranks them by frequency of use through a dynamically generated bar chart. Mousing over a bar will display all search variations that use that particular word (i.e. “craig” has been used in the search terms “craig kapp,” “craig kapp itp” and “sex chat rooms blog.craigkapp.com” – yikes! Let’s hope that last one was a spambot …

The tool is currently running off a snapshot of last month’s data, but I’d like to hook it up to a live feed for up to the minute analysis. Feel free to check it out.

Business Card 1.0

Monday, October 12th, 2009
Front of card

Front of card

Back of card

Back of card

Fun with fonts

Monday, October 5th, 2009
typography

Click on my name to start up the slideshow

Visual Communication: Signage gone wild

Monday, September 28th, 2009

The following signs were found while roaming around my neighborhood in suburban NJ.  Each one is having a little bit of trouble in getting its message across to potential customers.

P9270069

In addition to having 3 distinct fonts, this sign uses red text on a blue background. As a colorblind individual this is very difficult for me to read, and my color-normal friends seem to concur!

P9270073a

This sign always confuses me. "Enter this side only" makes me think that there is only one correct entry point. However, the arrows make me think that I have a choice in the matter!

P9270071

Thsi is a sign for a radish-themed restaurant. The little radishes dotting the I's help to reinforce this identification, however the "Pac Man" specialty font makes me think that I'll be eating at an arcade from 1986.

P9270070

Oscar's is using three different fonts on this sign. The two speciality fonts don't really help to sell me on getting a haircut here. The scripty "Unisex" doesn't do much when juxtaposed next to the childish looking, misspelled "Kutz"

Website Analysis: NMC

Monday, September 21st, 2009

I chose to analyze the New Media Consortium website (http://www.nmc.org).  The NMC a fantastic resource for educators who are interested in integrating technology into their teaching and research.   Their website is a vast construct that contains thousands of articles, publications and blog postings.  Keeping such a high volume of information organized is a daunting task to say the least!

Grid

The NMC site is organized based on a fairly consistent grid that contains a static header, footer and two to four mid columns depending on the page in question.  Columns appear to be equally spaced, and certain pages choose to “merge” columns to display more or less information in contiguous chunks.

Colors

The CSS file that defines layout and style for the NMC website utilizes a 3 color palette.  I analyzed this using a very handy website called colr.org .  In addition to being able to extract color information from websites, colr.org also lets you upload / link to images and extract a color palette from those assets as well.  Very handy for people like me who are partially color blind!

colrorg

CSS Color Analysis courtesy of colr.org

Typography

The NMC site utilizes a single font family.  In addition, the justification of text throughout the site is consistently left justified, with the exception of the embedded “tag cloud” navigation object that appears on most pages.  It utilizes a center justification layout with varying font sizes in order to convey relative importance of specific tags and keyboards.

Consistency

The NMC site is fairly consistent from page to page, with slight variations in the left and right sidebar navigation structures.  Giving the left sidebar a second pass to ensure the consistent placement of the top level navigational elements (search, welcome to the organization, page sub-navigation) would be helpful to provide a more cohesive experience.

Usability

I find that, all in all, the NMC site is usable, though with such a large volume of information it is difficult to find a way to organize things in a cohesive manner.  The prominent “search” panel is probably the most helpful feature on the site.  With it one can search through articles, blog postings, and affiliated sites using a single interface.

The navigation bar along the top of the page does a good job at breaking down the sub-topics of the site.  Adding a drop-down series of sub-menus might make things a little more usable, allowing one to focus their browsing experience without leaving the page they are currently looking at.

Some pages contain a fair number of blog postings that run down the second column of the page (see the ‘News’ page for an example.)  While useful, I think a pagination mechanism might be helpful on this page, as the news postings go down farther than any other element on the page.  It looks a little awkward since the postings do not take advantage of the significant amount of unused space in the other columns once you scroll down a bit.

Layout Inspector

Use the arrows below to cycle through screen shots of the homepage.  Use the buttons along the left side to toggle various overlays.  You can drag the page image up and down to inspect different regions on each page.

nmcoverlay

Click on the image above to access the site overlay inspector