Prototype Observations II

Searching for a Book

One observation that was pretty interesting was how a person looked for a book about turtles. Approximately two-thirds of the people who looked at the prototypes would just enter the word turtles into the search field on the home page and than clicked the submit button. The other one-third would select the link called ‘BearCat’ and after arriving at the new website they would enter the word turtles into the search box and select the submit button called ‘Go’. This sounds very simplistic with this description; However, if people chose to use ‘BearCat’ they had more difficulty completing the task than if they had just entered turtles in the search field and selected the submit button.

Some of the people that went to ‘BearCat’ seemed to be confused when they first arrived at the website. As stated above part of the confusion was that the website looks different from the prototype even though it is one of the services that the libraries provides. The second part that tripped people up was that there is a drop down list that appears just above the search field and another one that appears just to the left of it. One person clicked on the drop down menu and saw several options and than asked me what they meant. Once again, I had to reluctantly not answer their question to get quality feedback. The other part that made things difficult for some people is that the submit button in BearCat, which is named ‘Go’ does not appear right next to the search field My impression is that most people that choose to go to ‘BearCat’ new it was the libraries catalog and that it would allow them to search for items that were in the building.

Employment

The question “Are there currently any job openings available with the libraries?” caused some confusion for some people. About one-third of people went immediately to the FAQs web page to try and answer this question. This was not a surprise because the question seems like it would be a Frequently Asked Question. Another one-third went to a variety of different places that included Contact Us, Help, and Schedule an Appointment to try and find the answer to the question.

The last one-third of testers went to the About Us web page, which is where a person can get to the Employment web page. Even the testers who went to the About Us web page had some difficulty in answering the question. After arriving on the web page not all testing participants saw the link for ‘Employment’ and went to the Site Map page next to try and locate employment.

The navigation on the About Us page in prototype A currently looks like:

It was interesting talking to people after they found the answer to the question because when they made it the About Us page they said that they did not see the ‘Employment’ link on it. All of the testers eventually found the Employment web page except for one person. This person said that they would just call one of the libraries to find out if there were any job openings.

Conclusion

By keeping things simple makes it easier for a person to use a website. The goal was to test the prototypes; However, it revealed several problems with other websites and services that the libraries makes available to people. The new College Libraries website will allow a person to get to things they need; However, I am not convinced that when they leave the libraries website that they will be able to accomplish their tasks. In order for people to be successful the other websites and services that the libraries subscribe to will need to be updated. On one hand, some of them can be updated, but some can not be changed. The saga continues….

 

Prototype Observations Part I

In testing the prototypes with several people helped provide some very insightful information that will be used when making updates to the prototypes. In asking the same five questions about the prototypes to ten different people revealed some interesting things as it pertains to library resources. Regardless if a person was a student or a faculty member certain things became very apparent during the testing.

Periodical Search

One of the services that the library subscribes too is a periodical search by Serial Solutions. Whenever this system was purchased by the College Libraries it was named ‘Periodicals at SUNY Potsdam’. In both prototypes there is a link that takes people to this service and it caused problems for some people. When a person was given the scenario question “Lets say your are taking a history class and you are writing a paper about…” (please read the Prototype Testing post for more information) they would often click on this link. After arriving at this website they got confused and were not sure what to do next. Part of the confusion was that this website did not look like the prototypes or like a reputable website in their opinion.

The name of the website is also confusing the way it is phrased. The first problem with the phrase is that the word libraries does not exist in it. My interpretation is that when I select the link I will be presented with a list of periodicals that are available at the libraries; However, a search box appears with some confusing language next to it. The service is very useful; However, it needs to be clear to a person what it would allow them to do. A name change needs to occur to help address this issue.

When one person arrived at the ‘Periodicals at SUNY Potsdam’ website it was easy to see the frustration in there face. In seeing this frustration, I wanted to speak up and say something, but I refused the temptation in order to gather the necessary feedback needed to make improvements. Eventually this person asked me if this is where they needed to go and I responded with a question “What do you think?”. After a few seconds of confusion the person clicked on the browser back button to return to the home page of the prototype.

This is another great example why the terms and phrases that we use as it pertains to a library and the resources that we make available to people are confusing. As discussed in early posts by eliminating the library jargon and using common language will make it easier for people to find the information they need in order to accomplish a task. Another thing that relates to language was discovered when testing the wire-frame models and reaffirmed during the testing of the prototypes. You start to see trends that are related to the way in which the libraries currently provide services and resources to people.

Hours

As mentioned in the results of testing the wire-frame models the hours for the libraries was mentioned by several people. The way the hours are presented in the prototypes received high praise from testers for many different reasons. The most apparent was that everyone was able to recognize the hours on the home page without much effort at all. One testing participant did not even realize that the hours for the libraries currently exist on the current website. According to one person “I licked the calendar because I’m a visual person”.

Meebo Chat Widget

The confusion that occurred with the Meebo Chat Widget when showing the wire-frame models to people reappeared again when testing out the prototypes. As stated in an earlier post some people did not know what the widget was and that it could be used to ask a question. Two more people mentioned this when testing the prototypes. In glancing at the widget it looks like a graphic and gets ignored because people are very goal oriented when they are using a website. According to Nielsen and Loranger “Users have been conditioned to assume that all useful parts of Web sites appear as plain text…” (p. 76). When things appear on a website that are not plain text it will most likely get ignored, which is occurring with the chat widget.

Reference

Nielsen, J., & Loranger, H. (2006). Prioritizing Web usability. Berkeley, CA: New Riders.

 

 

Testing the Protoypes Part I

Over the past few weeks the two prototypes have been shown to several different people to gather feedback. The great thing about prototypes is that they are still a little messy and you can make updates to them quickly. For example, two additional home pages were created that display helpful information and library hours in different locations. One important thing to note is that not every link was made active and not every web page was created for the prototypes. The goal was to test out some common tasks that people do on a regular basis to determine where improvements need to be made.

Results from Testing the Prototypes

How would you search for a book about turtles?

A

Person 1 – This person selected the link called ‘BearCat’ and entered turtles into the search box.

Person 2 – This person entered the word turtles in the search box on the home page and clicked on the Search button.

Person 3 – This person entered the word turtles in the search box on the home page and clicked on the Search button.

Person 4/5 -They selected the link called ‘BearCat’. After arriving at the web page they paused for a moment and stated that they were not sure if they needed to select something from the drop down menu to change the collection. A few seconds passed and they decided they probably did not need to select anything, but they were not confident in their decision. Next they entered the word turtles in the search field and than selected the submit button which is called ‘Go’.

Person 6 – This person entered the word turtles in the search box on the home page and clicked on the Search button.

D

Person 1 – This person entered the word turtles in the search box on the home page and clicked on the Search button.

Person 2 – This person entered the word turtles in the search box on the home page and clicked on the Search button.

Person 3 – They selected the link called ‘BearCat’ and than paused for a moment than clicked on the drop down area next to the drop down menu that appears in front of the search field. After a few seconds of confusion they entered the word turtles into the search box and clicked on the submit button called ‘Go’.

Person 4 – This person entered the word turtles in the search box on the home page and clicked on the Search button.

What are the hours for the Crane Library for today?

***Please note that the hours will be different depending on the day that the prototypes were tested.

A

Person 1 – This person went back to the home page from BearCat and select the link called ‘Summer Hours’ and stated that the hours for the Crane Library are 7:45 am to 6 pm today.

Person 2 – This person clicked on the back button on the browser to return to the home page. After arriving at the home page they looked at the hours in the upper right hand corner and selected ‘Summer Hours’ and stated that the Crane Library was open from 7:45 am until 6 pm.

Person 3 – This person clicked on the back button on the browser to return to the home page. Once getting back to the home page they selected the ‘About Us’ link from the left hand navigation. Even though the hours were visible in the far right hand column this person did not see them. Once the went to the About Us web page they clicked on the browser back button to go back to the home page. After a few seconds they noticed the hours and than stated that the Crane Library opened at 7:45 a.m. and than they clicked on the link ‘Fall Semester Hours’ and stated that the library closed at 10 pm.

Person 4/5 – Please note that these two people were looking at the third version of the Home Page and not the first version that the previous three people were shown. Please see the post called Home Page Variations for more information. After finding books about turtles they decided to click on the back button to return back to the home page of the prototype. Next they selected the Hours Tab and than scrolled down to find the Crane Library and than clicked on the ‘Fall Semester Hours’ link and stated that the library was open from 7:45 am to 10 pm. They mentioned that it would be more clear to make the width of the hours wider, so that you can see both the opening and closing hours at one time instead of only being able to see 7:45 am. This is a great suggestion that can help to eliminate confusion, but unfortunately this is not possible using the Google Calendar widget.

Person 6 – This person clicked on the back button on the browser to return to the home page. After arriving at the home page they looked at the hours in the upper right hand corner and placed the cursor over top of the opening time 7:45 am and stated that the Crane Library was open until 10 pm today.

D

Person 1 – The person looked at the hours in the bottom half of the main content area and than stated 7:45 am to 6 pm.

Person 2 – While in the library catalog this person clicked on the browsers back button to get back to the home page. After going back to the home page they clicked on ‘Fall Semester Hours’ and stated the Crane Library was open today from 7:45 am to 10 pm.

Person 3 – While in the library catalog this person clicked on the back button of the browser to get back to the home page. After going back to the home page they clicked on ‘Fall Semester Hours’ and stated the hours the Crane Library was open today from 7:45 am to 10 pm.

Person 4 – From the library catalog they clicked on the browsers back button to return to the home page. After arriving at the home page the clicked on the link called ‘Crane Fall Semester Hours’ and than stated that the library was open from 7:45 am to 10 pm today.

What is the phone number for the College Archives?

A

Person 1 – Selected the ‘Contact Us’ link and than said what the phone number is for the College Archives.

Person 2 – This person selected the ‘Contact Us’ link than looked for the College Archives and than stated the phone number.

Person 3 – This person selected the ‘Contact Us’ link from the left hand navigation. After arriving on the web page they noticed the phone numbers for the Crane and Crumb Libraries in the right hand column, but did not see the hours for the College Archives. Next the person went back to the home page to start looking around for the hours. At this point they selected help and did not see the hours for the College Archives. This person was unsuccessful in finding the hours for the College Archives. They mentioned that they would have used Google instead to search for the phone number.

Person 4/5 – They selected the ‘Contact Us’ link and than said what the phone number is for the College Archives.

Person 6 – This person selected the ‘Contact Us’ link than looked for the College Archives and than stated the phone number.

D

Person 1 – Selected the ‘Contact Us’ link and than stated the phone number.

Person 2 – Selected the ‘Contact Us’ link and than stated the phone number.

Person 3 – Selected the ‘Contact Us’ link and than stated the phone number.

Person 4 – Selected the ‘Contact Us’ link and than stated the phone number.

Lets say you are taking a history class and you are writing a research paper on womens suffrage. The professor has stated that you must use peer reviewed articles as references. Where would you to to find an article that you could use for your paper?

A

Person 1 – This person selected the ‘Online Resources’ link from the left hand navigation and than ‘Articles’ after they arrived on the web page. After a list of resources was revealed they selected the link called ‘JSTOR’.

Person 2 – The first thing this person did was to select the back arrow on the web browser to go back to the home page. After going back to the homepage they selected the ‘Articles’ tab. Next they selected the back arrow on the web browser to go back to the default view of the home page. Than they selected articles a second time and than selected the link called ‘Resources by Subject’. After arriving at this web page they stated that they would select ‘History’.

Person 3 – This person selected the ‘Online Resources’ link from the left hand navigation and than ‘Articles’ and selected the link called ‘Academic Search Complete’.

Person 4/5 – From the Contact Us web page they selected the browser back button to go back to the Home Page. After arriving back Home they selected the link called ‘Online Resources’ from the left hand navigation. After getting to the web page they selected the ‘Articles’ link and than clicked on the link called ‘Academic Search Complete’.

Person 6 – This person clicked on the browsers back button to return to the Home Page. After arriving back home they clicked on the ‘Article” tab and thin clicked on the link called ‘Resources by Subject’. Once they were on this web page they stated that they would select ‘History’.

D

Person 1 – From the web page this person was currently on they selected the browsers back button to go back to the Home Page. After arriving at the Home Page they selected the ‘Online Resources’ link that is located across the top of the page. Once arriving on the Online Resources web page they clicked on the link called ‘Articles’ and than clicked on the link called ‘Academic Search Complete’.

Person 2 – They selected the ‘Resources by Subject’ link from the left hand navigation. After arriving on this web page they said they would select ‘Womens & Gender Studies’.

Person 3 – At first this person selected the link called ‘Periodicals at SUNY Potsdam’ after arriving at this website the person seemed to be confused and not sure what to do next. After a few seconds they selected the browser back button to go back to the libraries home page. Once back on the home page they selected the link called ‘Advanced Search’, which took them to the libraries catalog. Once again they selected the browser back button to get back to the libraries home page. From the home page they selected the link called ‘Online Resources’ from the left hand navigation. Once landing on this webpage they selected ‘Articles’ than ‘Academic Search Complete’. Once they selected this link they were not taken immediately to Academic Search Complete, so they selected the link called ‘JSTOR’.

Person 4 – They selected the ‘Resources by Subject’ link and upon arriving at this page they would select ‘Women’s & Gender Studies’.

Are there currently any job openings available with the libraries?

A

Person 1 – This person selected the ‘About Us’ link from the left hand navigation than after arriving at the About Us web page they selected the link called ‘Employment’.

Person 2 – This person selected the ‘FAQs’ link first from the left hand navigation. After arriving at this web page and realizing that it did contain the information they were looking for they went back to the home page. After going back to the home page they selected the ‘About Us’ link from the left hand navigation. After arriving at this web page they selected the link called ‘Employment’.

Person 3 – This person selected the ‘Help’ tab on the home page and said that they would call the libraries to find out if there were any job openings available with the libraries.

Person 4/5 – The first thing that they did was selected the ‘FAQs’ link from the left hand navigation. Once arriving to this web page and where unable to answer the question they selected the link ‘Site Map’. On this web page they selected the link ‘Employment.

Person 6 – This person clicked on the browsers back button to return to the home page. Next they clicked on the ‘About Us’ link in the left hand navigation. Once arriving on the About Us page they paused for a few seconds and went back to the Home Page. Once they arrived back home they selected the link called ‘FAQs’ located in the left hand navigation. After looking at the FAQs web page for a few seconds they clicked on the link called ‘Site Map’. On the Site Map web page they clicked on the link ‘Employment’.

D

Person 1 – They selected the ‘Contact Us’ link first. After arriving on this web page they selected ‘About Us’ and than selected employment.

Person 2 – They selected the ‘About Us’ link from the left hand navigation. After arriving on this web page they clicked on the ‘Employment’ link.

Person 3 – This person selected the link called ‘FAQs’ and after going to this web page and not finding the answer they were looking for they went back to the home page by clicking the browsers back button. Once back at the home page they selected the ‘About Us’ link from the left hand navigation. After getting to this web page they selected the link called ‘Employment’.

Person 4 – At first they selected the link called ‘Schedule an Appointment’ after arriving at this web page they went directly back to the home page. Once back home they selected the link called ‘About Us’. When arriving on this web page they immediately selected the link called ‘Employment’ without hesitation.

Other Comments

  • Straight Forward
  • Everything is right where you need it
  • The prototype was easy to navigate
  • Being able to search for something in the library catalog directly from the home page made it easy to find a book.
  • One person liked having common tasks in the same place on the home page. They mentioned that by having all of the catalogs in one location will make it easy for them to locate the materials they need such as a music score or a sound recording.
  • The hours for the library appears on the home page.
  • The current website is confusing because it has too much stuff on it. The prototype was easy to understand.
  • Two people stated that they did know what the Meebo Chat widget was used for.

Testing the prototypes will continue. Look for a future post with more results.

Home Page Variations

After testing prototype A with a couple of people two additional home page variations were created. They were created to provide some consistency with the right hand column of the website. Instead of having the Hours for the libraries in the right hand column they were moved to the center of the layout. In order to do this the Help tab was renamed to become Hours. The content that appeared on the Help tab was moved to the right hand column; Thus, making the column the same on all web pages instead of changing. This change has the the potential benefit of eliminating confusion because instead of the content changing in the right hand column it will always remain the same.

Prototype A Home Page Variations

Example 1

A Home Page Example

Example 2

A Home Page Example 2

Example 3

A Home Page Example 3

What do the prototypes look like?

This is a question that probably most people who read this blog have been asking for a while now. In the past few posts we have been discussing how they where built and the updates that have been made to the information architecture. Maybe you have been wanting to tell us that you just want us to show you what the prototypes look like.

Before showing the prototypes there is one more point of discussion that needs to take place (I know you can hardly wait to see the prototypes). The prototypes were built on a local machine and have not been uploaded to a web server. This has been done intensionally to prevent them from getting indexed by a search engine or found accidentally. There is already enough confusion with the current web site and various resources that the libraries uses electronically, so we do not want to make things any more difficult for people than they already are.

Yes we could create a robot.txt file and put it in the top level directory to tell search engines to stay away, but its not fool proof. Only the search engines and people who play nice will abide by the file. To be safe everything is currently being created on a computer not a web server.

Now for the big unveiling of what the prototypes look like.

D Home Page

D Online Resources

A Home Page Example

A Online Resources

The applause can start now. As with everything else that we have done we will show these prototypes to people to gather feedback. After talking to several people we will once again take that information and revise the prototypes to reflect the feedback that we have gathered.

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%

 

Browsers
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.

Conclusion

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 potsdam.edu.

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.

HTML and CSS

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">
</div>

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.

Accessibility

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…

 

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.

References

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