Design Library

On June 18, the TLT Web Site Redesign committee conducted paper-prototyping sessions with faculty. Paper prototyping is a relatively quick usability test and highly effective way to incorporate user feedback into your Web page designs.

The process involved recruiting up to 3 faculty (middle adopters) and ask them to complete 2-3 basic tasks on paper versions of the web pages we've drafted. These pages included two different home page drafts, several springboard pages, a site map, and a profile in success. The sessions were 30-60 minutes. At end, we asked them to critique the Home Page designs from the point of view as a first time visitor and then as a 4th time visitor. We modified a script that Steve Krug mentioned at the Web Conference 2008, found on his website http://www.sensible.com/

The sessions were enormously helpful, thanks to the very enthusiastic faculty participants. Here were some of the observations:

These wireframe drafts for the TLT home page and faculty profiles in success were created in early June. After their creation, the web committee set out to conduct paper-prototyping user testing to work out some design, architecture, and terminology issues (but that's a whole other post).

The TLT Web Site Redesign team just conducted our third successful Card Sorting session with an undergrad student, an instructional designer and an instructional technologist from World Campus. Our team also started thinking of how to approach the information architecture of the site from a task-based scenario, meaning "what is it that a using is asking when they come to the TLT site?" At the same time, we are thinking of what the end point will be, which led to this draft wireframe for a service or resource landing page.

As part of the marketing campaign for the new Collaborative Learning Spaces, screensaver ads were created and will be broadcasting on student lab computers.

This week the TLT Web Site Redesign committee conducted card sorting sessions to get feedback that will enable user-centered design. Card sorting is a tried-and-tested technique for investigating how best to structure information on web sites so that users can easily find what they want. The process involves sorting a series of cards, each labeled with something the site might contain, into groups that make sense to the person sorting them. It is crucial that sites are designed to reflect the ways that users (rather than designers) think about the world. Card sorting provides a window into the minds of web site users.

So far, we have had several faculty, staff and students work together and the experience has been very successful, positive and enlightening. We will be doing a few more in the next week or so, but here's a look at what we saw:

card sort 1

The following slides represent the remaining content: Open Computer Stations, Testing Schedule, and Step 1 of the Exam Check-in Process (instructional slides). They will undergo testing and final proofing in the following week.

Open Computer Stations

Testing Schedule

Exam Check-in Process (step 1)

The Pollock Testing Center has a unique sign display set-up in which they use high-definition lcd tv's to display general messages (e.g. hours of operation) and an instructional tutorial on how to attend a test. Some of the key goals for this project include accessibility (text readability standards), clear and simplified instruction, image standards, and standards for displaying signs in this manner. Also, that these slides be create using HTML/CSS in clean code for use as a template so that the content can be edited and manipulated by other staff without worrying the design.

I've been working with a team to figure out some of the aspects that extend outside of my web-based knowledge. Dave Stong uncovered some useful resources on text sizing and interesting official documentation for Penn State physical signs. This led me to choose Helvetica and Helvetica Neue Condensed Bold as the fonts and aim for 1- to 3-inch visual size of the text for readability. Justin Miller helped to identify any display standards or typical issues that I should keep in mind, such as title-safe areas and how to avoid burn in. Also, new content ideas would be explored as well - a few that we came up with were adding a Clock, a Test-in-session notice, and a Testing schedule. The first two new ideas were included in the entrance display signs below and the testing schedule is in the works which will display much like an airport departure/arrivals monitor.

Testing Center hours

ITS Computer Lab hours

Collaborative Learning Spaces hours

Digital Commons - Studio 204 hours

I started at colourlovers.com for some initial color palette inspiration, but from there I created 3 original palettes based on green, orange and blue that would work together cohesively for 3 major groupings of topics: audio & video, online communities, and new learning environments.

color palettes:

The TLT Symposium may be using Moo StickerBooks to create an interactive interest element to this year's event. Here are a few mockups showing some color palette and longer-word solutions. It is obvious that some work far better than others, this post allows you to see why by displaying them side-by-side.

Color Palette:

Colourlovers 'intellectual tastes' palette

This week Blogs at Penn State upgraded to Movable Type 4.0. Personally, I am excited about how it is now able to serve as a light weight content management system for web sites, which means that you can publish pages aside from your blog. I am happy to be a part of the Blogs at PSU team in updating a few MT3 Penn State style themes originally created by David Stong for MT4 and working to create a series of new Penn State themes. Updating the previous themes entailed editing the CSS using changed MT template tags and providing for the new ability to select different column layouts. For example, instead of being limited to one thin sidebar to the right of your main blog content, you can choose a 2- or 3-column column layout and which side of the page you want your sidebar to display. So far, there are two Penn State themes available in the new version: Penn State Elms and Penn State Lion Shrine.

Penn State Elms Penn State Lion Shrine