Information Architecture Update

We have done several things over the past two months that has impacted the Information Architecture for the college libraries website in one way or another. This is a good time to revisit the naming and labeling of all items. In testing the sketches and wireframe models there are a handful of changes that have been made that affect the naming of links and categories. In order to better understand how these changes have come about please read the following posts A revised information architecture and Part II Information Architecture Creation.

Here is an overview of the changes that have been made

  • Interlibrary Loan becomes ILLiad
  • Citing a Source becomes Citing Sources
  • Subject Guides becomes Resources by Subject
  • University Archives changed to become College Archives
  • Two new categories have been created for Online Resources – Government Information and Newspapers
  • Policies becomes Policies and Procedures
  • Two new categories have been created for Policies and Procedures – How to put something on reserve and Information Literacy
  • Categories have been added under Resources by Subject

These changes reflect the results of testing the sketches and prototypes with people. The two most significant changes are renaming Interlibrary Loan to become ILLiad and renaming Subject Guides to become Resources by Subject. The first change is because when a person selects a link and arrives at a new website or web page the name needs to be the same. When a person selected the link called Interlibrary Loan and then ended up on a website called ILLiad it was confusing to them. Renaming this link eliminates the confusion.

The second most dramatic change was to rename Subject Guides to become Resources by Subject. The phrase Subject Guides was not clear to all people who helped us test the sketches and wireframe models. In wireframe models A and C the phrase Resources by Subject was used and people found it easier to understand than Subject Guides.

Here is what the Information Architecture looked like before the changes

After the updates have been made

The categories appear on the Resources by Subject and Online Resources web pages. These have been included in the Information Architecture, so they would not be forgotten. The content that appears in the upper left hand corner of the diagram (Hours, Library Catalogs etc.) will appear on the home page of the website.

Building the Prototypes Part II

In the last post we concentrated on talking about the HTML and CSS that is used to build a website along with accessibility. These are just two of the main factors that come into play when building a prototype. The next important consideration to consider is the type of devices and browsers that people will be using to view the website.

Computers, Devices and Web Browsers

The first place to start is to determine the computers, devices, and web browsers that people will be using to look at the College Libraries website. A good place to start is to look around campus and determine what computers exist on campus in the libraries, computer labs, and faculty offices across campus. The majority of computers on campus are Macintosh Computers that are running both the Macintosh and Windows XP operating systems. The web browsers that exist on the computers in the libraries and computer labs are:

  • Mac Operating System
    • Apple Safari 4.0.5 (5531.22.7)
    • Mozilla Firefox 3.6.3
  • Windows XP
    • Internet Explorer 8.0.6001.18702
    • Mozilla Firefox 3.6.6

This is just a beginning when it comes to determining which types of devices and web browsers people are using to visit the college libraries website.

One of the first things that, I did upon arriving in Potsdam was to set up a Google Analytics account to track the people who visit the current libraries website. Looking at this data provides us with some very important detailed information about are users when it comes to technology. Listed below are a few tables that show the operating systems, browsers, and screen resolutions of the people that are visiting the College Libraries website.

Browsers By Operating System
Browser Operating System Number of Visits Percent of Visits
Safari Macintosh 74,379 28.3%
Firefox Windows 65,727 25.0%
Internet Explorer Windows 59,267 22.5%
Firefox Macintosh 32,978 12.5%
Chrome Windows 17,602 6.7%


Browser Number of Visits Percent of Visits
Firefox 99,235 37.7%
Safari 77,646 29.5%
Internet Explorer 59,269 22.5%
Chrome 21,693 8.25%
Opera 4,512 1.7%


Screen Resolution
Screen Resolution Number of Visits Percent of Visits
1280×800 95,875 36.5%
1680×1050 63,672 24.2%
1366×768 26,413 10.0%
14440×900 22,064 8.4%
1024×768 12,611 4.8%

The most important thing that this data reveals is that people are viewing the College Libraries website using a variety of different web browsers and that their computer monitors are set at several different resolutions. By keeping these things in mind will help us to build a website that will be easy to use on a variety of different computers regardless of the web browser a person has selected to use. When testing the prototype it will need to be viewed using all of these different browsers to make sure the website looks the same regardless of what web browser a person is using.


In building the prototypes the concentration has been on the layout of items, names of links, and accessibility. These are the core building blocks when creating a website regardless of who will be using it and the function that it serves. If these elements cannot be done correctly you will fail before even launching a new website regardless of what it looks like. When creating a website you need to concentrate on creating something that is both accessible and usable by everyone regardless of who they happen to be. This will help make sure the people who represent your target audience can locate the information that they need to accomplish their tasks.

The next step in the process is to test the two prototypes that have been created with five to seven people who represent the target audience. After the prototypes have been tested it will be time to once again incorporate the feedback into what has been created up to this point in time. Once this testing has occurred it will be time to start adjusting the appearance of the website and to start thinking more about the appearance of the website. By building the website using CSS it will be very easy to make changes to the appearance of the website. For example, if the college decided to change its colors from red and white to green and white the color will only have to be changed in the CSS. The strength behind CSS is that you can make a change in one place at will automatically change the appearance of each web page. Instead of having to change the color on one hundred web pages you only have to make a change in one location.

After the prototypes have been tested we will than incorporate the feedback that we receive into them. When the prototypes get tested a second time we will also test them for accessibility. The best way to do this is to ask people who use assistive devices to take a look at the prototypes. Once the prototypes have been looked at by people using assistive devices it will be important to address any problems that occurred. By taking the time to incorporate accessibility into building a new website as discussed in the previous post the changes that will need to be made should be minimal.

If you use an assistive device and would like to test out the prototypes please contact me via email at patterpj at

Building the Prototypes Part I

When building the interactive prototypes there are several things that must be considered before writing a single line of HTML. Everything that we have done up to this point in time has been in preparation to build the prototypes. One of the most important elements was to create the wireframe models and to show them to people. This has been a very important step because it gets you to start thinking about how a website will be built before even starting to write the HTML.


When building a website you have different standards of XHTML and HTML to select from. In the very beginning of the project, I was thinking of using the XHTML 1.0 The Extensible HyperText Markup Language standard to build the new website for the College Libraries. After doing some reading and exploration it was decided to use the HTML 5
HTML5 Powered with CSS3 / Styling, and Semantics
standard because it is backward compatible and I do not want to have to rewrite the website in a few months using this standard. Backwards compatible refers to the ability to use a feature that is available in a newer web browser, but at the same time does not prevent it from working in an older one. In conjunction with using this standard Cascading Style Sheets (CSS) are being used for both the layout and appearance of the website.

While building the prototypes the wireframe models where used as a guide when writing the HTML and CSS. When you take a look at the wireframe model a there are five core boxes that appear. The first one is a rectangle along the top. The next three are vertical columns that appear from left to right. The fifth box appears as a rectangle along the bottom just like the one along the top. This wireframe uses a three column layout because of the three vertical columns that run from the top to the bottom. These rectangles serve as a guide when creating the main layout for the web page.

Each box that appears in the wireframe model has been assigned its own division with an ID attribute that is written in HTML. For example, the HTML for the first rectangle looks like:

<div id="header">

In CSS you have something called the Box Model that allows you to position elements within a web page. In an HTML web page there are elements that reside inside of other elements. Elements such as a division is shown inside of its own box, allowing you to control the size, location, and appearance of everything that resides inside of it. Each box appears relative to each other. In the example above the first rectangle is a box and has been assigned certain properties that determine its position and appearance.

The CSS for the header division looks like:

#header {
     margin-bottom: 1em
     background-color: rgb(157, 40, 30);
     color: white;

The margin-bottom property states that there must be at least 1 em of space that occurs between the bottom of the header division and the next element, which happens to be another division in the prototype. The background-color is the color red that represents one of the SUNY Potsdam colors. The color property states that all text that appears in this division must be the color white. What you end up with are the school colors being used for this division.

Both HTML and CSS are used to layout the rest of the prototype. Using the wireframe models when writing the HTML and CSS makes it easier to create a working prototype because several details have already been considered, such as the location and the size of elements such as the text that will appear in the website. Along with using standards it is important that you are able to write valid code because it helps to insure that the website will appear the same in all browsers and that it will be accessible to people. By using the W3C Markup Validation Service and CSS Validation Service you can make sure that you are using standards.


The next important element that comes into play when building a website is accessibility. A good place to start is to review the Section 508 Standards Guide Subpart B — Technical Standards § 1194.22 Web-based intranet and internet information and applications and the W3C Web Accessibility Initiative. In conjunction with the following guidelines it is important to use standards as discussed earlier. By writing clean and standard based code you can help ensure that that people who use assistive technologies such as Jaws and Zoom Text will be able to use the website that you have created.

Along with using the guidelines created by the W3C there are decisions that we make when writing HTML and CSS that will impact how accessible a website will be. One of the first decisions that needs to made is to determine which standard you are going to use when writing the XHTML/HTML for the document. After making this decision you can start thinking about how you are going to layout the items that are going to appear in the website. A few years ago it was a standard practice to use tables to layout a web site before the introduction of CSS. There is nothing wrong with creating a website using tables; However, I have chosen to use CSS to layout the College Libraries website.

One of the main reasons to layout a website with CSS is because it allows you to more easily separate the content that appears within a website from the markup that is used to display items. When writing the HTML it looks cleaner and is easier to read than when using tables. A few years ago when I started learning to create websites, I used tables to layout content; However, as CSS has developed over time it has eliminated the need to use tables for layout purposes. Learning to use CSS takes time and patience, but it is well worth the effort.

As you start building a website you need to consider the order in which items are going to appear on a website for both visitors who can see and those that cannot. For example, you can build a website in which the navigation appears at the top of the page for sighted viewers; However, it could actually appear at the bottom for visual impaired viewers. When laying out content you want to make sure the name of the website appears at the top, followed by the navigation, than main content, and then any secondary content, such as helpful information or copyright information.

Another important element to include on a website is a link that allows a person to skip to the main content of a web page. This is very helpful for a person that uses a screen reader application, such as Jaws. This will allow them to ignore the navigation on a web page without having to listen to the same links on each and every page. It helps them to get to the information that the need quicker.

You probably have noticed that accessibility is very important thing to consider when creating a website. Only a few things have been discussed as it pertains to the prototypes that have been built. There have been several books and articles written about accessibility and they should be consulted to learn more. A good place to start is to read through the 508 guidelines and the W3C Web Accessibility Initiative discussed earlier. One book that I highly recommend taking a look at is Web Accessibility by Jim Thatcher.

To be continued…


Wireframe Testing Observations

One of the elements that was not clear in the wireframe models was the word ‘Sketching’ that appeared under each day for the hours. When creating the wireframe models, I took the calendar that was created for the web redesign process and placed it into the prototype. In hind sight, I should have spent the time creating a calendar with the actual hours and placed it within the wireframe models. Part of the problem was the difficulty in purchasing and getting the license number for a piece of software. It took just over six months from the time that, I requested the software to receive a license number. When people were taking a look at the wire frame models this is one item that stood out as being confusing. To prevent the hours from being confusing a calendar has been created for both the Crumb and Crane Libraries that contain the hours in which they are open.

Another common trend that occurred when a person was asked ‘How do you get research help?’ approximately two-thirds stated they would select the ‘Contact Us’ link. With such a large percentage of people selecting ‘Contact Us’ it brings up some interesting points. Even though some people would be looking at a wireframe model that had help information on it they would still select the ‘Contact Us’ link. This caught my attention for two reasons. First most websites contain a contact us section, so people are familiar with the phrase and second it helps reaffirm the information that they had seen just a moment before. It as though people tend to trust the ‘Contact Us’ link more than the heading called ‘Help’.

When asking people to take a look at the wireframe models there were a few things that appeared on them that people did not know what they were. The first item was the Twitter heading and box that appeared on some of the wireframe models. A couple of people did not know what Twitter is and another person was surprised that the libraries had a Twitter account; However, the majority of people did not even notice that it appeared. The second item that was confusing to people is the Meebo Chat Widget that appears in the right hand column of some of the wireframe models. Regardless of a persons age, gender, or experience with technology about 40 percent of testers did not know that the image they saw could be used to chat with someone.

All of these observations raise several questions in regards to how information and help is presented to the SUNY Potsdam Community. Based upon the testing that has been done so far there are a few things that may need to be reconsidered or presented in a different way. The first one would be in regards to the help information that is being displayed in the right hand column. With such a large percentage of people going to the ‘Contact Us’ section for help it may not be necessary to have it appear on every page. Instead it may be more useful to display the hours in the right hand column on every web page.

The Twitter and Meebo widgets that appear on most web page raises some interesting questions. If most people ignore the Twitter widget should it even be embedded within the new website. With such a high percentage of people not knowing that the Meebo widget can be used to chat with someone to get help, should it be included. I think this raises a unique questions when it comes to virtual reference and how it may be offered in the future. Is there a better way to offer virtual reference that works for both the community and the people providing it? It is time to start reevaluating how virtual reference is being provided and to start trying out new ways that could better serve the community. These are both items that need to be tested out to find out if people would actually use these elements while using the libraries website.

Over the past few weeks two different interactive prototypes have been created based upon the wireframe models. Now that the wire frame models have been tested is now time to incorporate the results into the prototypes that are being built. After they have been incorporated into the prototypes than they will be tested just like every other item has been so far. By using this interactive process of doing something and than testing allows for a better website to be created.

Testing the Wireframes

Over the past few weeks the wire frame models have been shown to a few different people. This is the point in the project where several different things are taking place all at the same time. Its really not as a complicated as it may sound because trying to get people to look at the wireframe models takes time and there is know reason to waste time sitting around waiting for people to get in touch with you.

Testing the wrieframe models will continue while building the first version of the interactive prototypes. The testing will continue into the prototypes are completed, which will be during the first week of August. The same questions that were used to test the sketches are also being used for testing the wireframe models. We want to make sure that people can accomplish these five basic tasks.

Results from Testing the Wireframes

Where would you go to search for the book The Great Gatsby?


Person 1 – Enter name in the search field and than select the search button.

Person 2 – Enter the name of the book in the search field and than select the search button.


Person 1 – Select ‘BearCat’ and than enter the name of the book into the search field.


Person 1 – Go to ‘BearCat’

How would you search for an item on reserve?


Person 1 – Select ‘BearCat’ than course reserves.

Person 2 – Select the link called ‘Course Reserves’


Person 1 – Select the ‘Reserves’ link and than search for my name.


Person 1 – Select ‘BearCat’

How long can you check out a book for?


Person 1 – At first this person went to the FAQs web page and after not seeing the question ‘How long can you an item be checked out for?” they selected help. Upon arriving at this page they still did not see the answer they were looking for, so then they went to the ‘About Us’ web page than ‘Policies” and than to ‘Borrowing Policy’ (About Us –> Policies –> Borrowing Policy).

Person 2 – The first thing that the person did was to select ‘Help’ on the home page. They did not see the answer to the question, so next they selected ‘About Us’. After arriving on the About Us web page and still not seeing the answer the next selected the link ‘Site Map’ and than selected the link ‘Borrowing Policy’.


Person 1 – Select ‘FAQs’ than select the quetion ”How long can you an item be checked out for?”. After this accordion open they select the link called ‘Borrowing Policy’.


Person 1 – Select ‘Contact Us’ find the phone number for the library they wanted and than call.

Where would you go to find a peer reviewed article?


Person 1 – Go to ‘Home Page’ and than select ‘Articles’. After selecting articles they would enter a term into the search field and than select the search button.

Person 2 – They selected the ‘Home’ link and than selected the tab called ‘Articles’. After selecting articles they would enter a term into the search field and than select the search button.


Person 1 -Select ‘Resources by Subject’ and than select ‘Dance’.


Person 1 – Select ‘Online Resources’ and than ‘Articles’. After selecting ‘Articles’ they looked for ‘JSTOR’.

Person 2 –

How do you get research help?


Person 1 – Select ‘Help’ on the ‘Home Page’.

Person 2 – Select the ‘Contact Us’ link and than they would either call the library or send a message depending on what their question was.


Person 1 – Select ‘Contact Us’ and than call the Crumb Library.


Person 1 – “It depends on the type of help that I need. I would either type my question into the chat widget or come into the library. For research help, I would most likely come to the library.”

Comments of Note

  • Borrowing Policy is a good page and has helpful information on it
  • Intuitive, Straight Forward
  • One person was not clear on what help really means and they did not know they could type in the Meebo Widget that appeared on the page. What type of help is actually available?
  • People said that they want to get to information quickly and they do not want a maze to go through like the current website.
  • Hours on the current website are bad and not always accurate. They need to make sense to people who use the libraries. The hours the libraries are open is confusing to people. Why not just be open 24 hours?
  • Students who are seniors and faculty member would select BearCat to search for books; However, new students or people not related with the institution would just type the name of the book in the search field and than select submit.