Project Goals
Enhance Visual Appeal
It was important to create a website which was able draw interest from the site visitors – to make them want to read and interact with the site. A clean, simple graphic design was combined with “fun” graphical elements to make an attractive website people would enjoy visiting.- Use of sidebars
The sidebars are perhaps one of the most important and best looking elements on the page! They are used to:
- Make content more visually interesting
- Give important information a prominent location on the website.
- Use of quotations
The quotation graphical element is useful to break up long stretches of text, effectively making long pages more visually interesting and easier to read. Also, this elment can emphasize an important point in the text so that it is not passed over.
Adding one to a page is accomplished by adding a simple function within the page content.
- Dynamic decorative images
All decorative images within the Portfolio are randomly selected for each page shown to a visitor. This gives the user something new to see every time they visit.
Even though they are rounded to fit the look of the website, the images only have to be rectangular! This is so the site admins don’t have to know Photoshop to add cool looking graphics!
- Appealing page-content images
Page-content images are those that are placed within a page’s body content. They are used to provide visuals for the content and can range from pictures of a high-tech laboratory, students on campus, to graphs from the university’s report on demographics.
These images are added via a simple function added to the page content similar to the quotation. When an image is added using this inferface, they aquire additional features to make the image more attractive and professional – a border, shading, and a caption underneath of the photo. The single, simple interface is beneficial because it provides consistency throughout the site!
The Sidebar Element
Visual Interest
Sidebars not only provide a prominent location for important information, but also work to enhance the page visually. The sidebars have turned out to be very popular and work better than I had imagined!
To the right is a screenshot of a sidebar from the front page of the website. It shows a snippet of dynamic content which gets refreshed on every visit. For this particular sidebar, the information comes from an easy-to-edit file which contains 50 or so interesting things about Portland State.
Information Delivery
Sidebars worked perfectly as a method of information delivery because of their prominent location on the right hand side of the page. They were commonly used to hold content which was pulled directly from the page body or other information which was closely related to the page topic.
To the right is a screenshot of a page from the website which uses several sidebar elements. It shows different ways in which the sidebar content can enhance that of the page body. (Â Click the image for a larger view )
Dynamic Sizing
One aspect of the current usability research states that website pages should “grow” to fill up a visitor’s monitor so those with larger monitors can take advantage of the extra space.
I worked closely with the graphic designer so that the sidebar component followed this usability convention. Additionally, the sidebar HTML needed to be flexible to accomodate different amounts of information placed in it by the website contributors.
Go head and try it! Visit the Portfolio website and change the size of your browser window. You can see for yourself how all of the page elements expand or shrink to accomodate the window’s change in size.
Easy to Create and flexible
The most important consideration was making sure that any of the advanced features of the website were very easy to use. This was necessary given the fact that various people on campus ( with many different levels of technical expertise ) were going to be contributing to the website.
A simple template system was created to ease the tasks of creating, editing, and deleting sidebars. Website contributors need only to create and name a new container element and place their content in it. Then they simply create a link to the container’s name in one of the website areas. This system also allows different sidebars to be displayed depending on where the page is viewed in the website.
This flexibility is used to present different information to different audiences who visit the website ( eg, students, faculty, accreditors, etc ). Each audience can have different, tailored references to the same information. For example, given a page on student learning, prospective students might want to see links to other students’ web pages and projects, but accreditors might want links to the statistics showing the improvements in student learning acroos the campus.
User Documentation
The website contributors and administrators have two websites full of documentation to use as a reference if they require it. Links to the documentation area are available directly from the sidebar area within the Zope management interface. This provides context-sensitive help at the click of a button.
Here are links to the documentation relevant to the sidebars:Streamline Usability
From the beginning, it was important to consider the usability of the website – what’s the point of a website if it’s hard to use? Issues of navigation and usability were tackled by applying as many of the recent usabilty recommendations as possible.- Multiple graphics modes
The website has three different graphics modes to give visitors a choice on how to view the site.
- GraphicsAllows visitors to see the site in its full glory. All graphics and tables are shown. Great for those who want it all!
- No GraphicsDisables graphics from the pages, but contains tables in the HTML. Good for those on a slower Internet connection, but with a fully capable browser.
- Text onlyDisables all graphics and tables. Designed for accessibility by removing all graphics and HTML tables to help those viewing the site via screen readers, etc. This also provides the ultimate backwards-compatibility for those using older browsers; even those using text-only browsers such as Lynx!
- Link rot
- This is the name given to links in a website which don’t point to valid HTML pages. This usually happens because because the referred web pages have moved.
The Portfolio uses webcrawler software to run through the entire website every evening. The crawler then makes a report and sends the administrators the results.
- Outdated information
- One concern with large websites is the fact that information can become old and dated.
The Portfolio uses a custom program to keep track of the time when a page was last updated and the people responsible for the page’s content. If the page isn’t updated within a certain time period, the software will send out a reminder email to the content contact. Each page can have an individual notification period.
- Graphic design usability issues
- Elements of the graphic design were carefully engineered so that they would “grow” if a user had more screen space. This allows those users with larger monitors to take advantage of their screen space.
- Website consistency through template system and CSS
- The Project incorporated an HTML standard called Cascading Style Sheets to provide layout consistency throughout the site. Also, through the use of simple temples, contributors only have concentrate on filling in informatino in specified boxes, then the software will take care of the rest.
- Tours – quick information for audiences
- The project expected to have many different groups of visitors coming to the website. For this, the Portfolio incorporated a secondary area called “The Tours” which could taylor the website information depending on the tour taken ( student, faculty, business, etc ). Though each tour used the same content from the website, each page could have separate sidebars show for different tours, essentially tayloring supporting content for each visitor.
- Liberal use of sidebars
- The sidebars were one of the best things in the project design.
- Other usability features
- Many usability features in this list incorporated because of current usability research.
- Avoid using high-technologyThe website technology was kept simple. This was a conscious decision to allow all browsers to visit and avoid requiring visitors to download special plugins necessary to view the site.
- Breadcrumb trailHelps users see where they’re at in the navigation hierarchy. It also allows them to go back to specific points on the path with a click.
- SitemapMakes navigation easier if visitors can see an overview of the website.
- Left-hand side menusNot necessarily the standard, but a popular and expected position for page menus.This was the format adopted for this project.
- SearchLarge sites incorporate search functionality so users can comb through looking for specific information.The Portfolio is fully searchable thanks to the Catalog functionality in Zope.
- Logo on every pageConsistent logo treatment reminds users of the website they’re visiting.
- No framesA big no-no in web design. Using frames generally breaks many usability features of web browsers, namely the back button. It also effects the URL in the browser and makes it difficult to bookmark locations in a website.
- Frequently Asked QuestionsMany users have the same questions. We have a FAQ to help them.
- breaking the back buttonThe back button functions as expected. We don’t use frames or javascript.
- No scrolling text or animations.Don’t be annoying! ‘nough said!
- No complex URLs
- rules given by WAI w3 web content
- alt texts
The website was going to be maintained by regular faculty and staff. It had to be easy. These are people with no real technical skills.
- Documentation: User Guidewriting guides, style guides, user information
- Dynamic contentsite is updated immediately.
- Data structure ( single folder )no need to search through folders
- Editable through webno specialized software to install ( ala Dreamweaver, Front Page )
- Secureprotected by zope security
- Groups of contributors reponsible for own area
- reports for outdated informationdon’t need to remember to check
- reports for incorrect hyper links
- consistent information through extendable template systemusers fill out boxes, can make their own
- consistent look through functionsquotes and pictures
- uses structured textno HTML necessary to contribute tot he web site.
- developed with open source softwareno initial or ongoing costs. free updates to bug fixes.
- Documentation: Technical Guide
- Secure ( zope security )
- errors sent to web adminsany site errors stemming from programming are sent to admins. note is given to user letting them know.
- cascading style sheetschanges in site look can quickly be madeV – Share It (Open Source)
- Share development with other universitieswanted to be model of what a portfolio could be. wanted to share development because of importance.
- developed with OS softwareuniversities can download. don’t need big budget to “get into the game”.
- User and Technical Guidesallows others to see how the software works
