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.



Start of Prototype Building

Last week I started building two different prototypes based upon the wire frame models that were discussed in the previous post. The prototypes are based upon versions A and D. My goal is to have all of the top level pages created for each prototype by the end of the week because next week I will be on vacation.

On the Guidelines web page it was indicated that the website was going to be built using XHTML 1.0 Transitional; However, the new website will be built using the HTML 5 standard and CSS 2.1. The two main reasons for building the new website using HTML 5 is that it is backward compatible and I do not want to rebuild the website again in a few months. Backward compatibility is the most important reason to start using HTML 5 today instead of waiting around for all people to update their browsers. Not all features are available in every browser, but this is nothing new since they have existed.

According to the W3C Working draft HTML5 differences from HTML4

“HTML5 is defined in a way that it is backwards compatible with the way user agents handle deployed content. To keep the authoring language relatively simple for authors several elements and attributes are not included as outlined in the other sections of this document, such as presentational elements that are better dealt with using CSS.”

In other words HTML tags used in previous versions will still work as web browsers will get updated. For example, in HTML 5.0 a new form input tag has been created for email, which is <input type=”emal”>. If a web browser is not able to use these tag it will default back to using <input type=”text”> instead.

I am happy with the progress that has been made so far and will continue to move forward in working more on the prototypes. This week has been dedicated to creating the prototypes because of my vacation next week. Along with continuing this work, I still need to show and test out the wire frame models with more people. If you are a SUNY Potsdam Faculty member or Student and would like to help out please get in touch with me at patterpj at potsdam.edu.

After completing the prototypes they will be tested just like every other part of this project. If you have not noticed already doing something and then getting feedback is the core behind designing and building a successful website that allows people to find the information they need. If you have to teach or show someone how to use your website you have failed.

About a month ago, I received some information in the mail regarding the Empire Plan. If you are not familiar with the Empire Plan it is the New York State Health Insurance program for state workers. In the information that was sent to every person that has the New York State Health insurance was a flier that showed people how to use the website. When I looked at the flier, I just had to shake by head and laugh out loud. It made me thing of several things in just a few seconds. Creating this flier was a waste of my money. Was the state of New York trying to find work for a Graphic Designer, so they could made an argument from cutting a position. Why did they not do usability testing to understand how people use the website. The list goes on and on.

In conclusion if you use a process that involves testing along the way will help you to create a website that people can actually use to get things accomplished. You will not get everything right the first time around, but by using a this process will help yo eliminate several problems that would occur if you did not test things out along the way.


W3C (2011, May). HTML5 differences from HTML4. Retrieved from http://www.w3.org/TR/html5-diff/#backwards-compatible

Wireframe Models

The past few weeks have been dedicated to created three different wireframe models that are based upon sketches that were created a few weeks ago. The sketches were shown to a variety of different people to gather feedback. The information that was gathered was incorporated into the wireframe models. One of the most significant changes occur on the home page of example A and C. The ‘Journal Search’ tab that appears in the middle of the page has been replaced with ‘Articles’. When testing the sketches some people where having difficulty locating articles within the mock up.

Most of the changes that have been made is to just clean up the layout and make sure that terms are being used consistently throughout the wireframe models. For example the phrase ‘Interlibrary Loan’ has been changed to become ‘ILLiad’ because the name of the page this link takes you to is called ILLiad. It is important that the name of the link is the same name as the web site or web page a person is redirected too. If they are not the same we get confused and wonder if we arrived at the right place causing significant problems.

Another addition that appears on the Online Resources web page is to add ‘Newspapers’ as a category. This will help break up the content into more meaningful categories and hopefully help people to located the information they need faster. Through testing we will find out if these changes make it easier for a person to accomplish their tasks and locate the information they need.

Home Page Examples


wireframe model a



wireframe model c home page



wireframe model d of home page

Below are all of the top level web pages for each different wireframe model.