A New Site for News

Over the past several months, editors and developers in University Communications and University IT have been experimenting with a new site for publishing news and feature stories from around campus. The goal has been to create a site that was visually appealing and engaging; easier to update and maintain than our homegrown site; University-wide in its scope; and more flexible in allowing us to explore new graphic treatments and storytelling techniques that are unique to the web.

This new site is now live at www.rochester.edu/newscenter/. The site is published using WordPress, the popular blogging tool and open-source content management system supported by University IT, and it uses the University’s responsive web templates. This responsive approach allows the content of the site to flow and adapt to the wide array of screen sizes and personal electronic devices readers now use to access the web.

screenshot of the NewsCenter homepage, showing top stories and categories

Take a moment to check it out; we would appreciate your feedback.


New Treatment for Homepage Photos

screenshot of homepage with News and Events boxscreenshot of homepage without News and Events boxThe photos on the homepage provide a concrete sense of what it’s like to be here at the University for those who are not physically here (prospective students, alumni, parents) and a current snapshot of the bustling life of this place for those of us who are here (current students, faculty, staff). To show them in their best light, we’ve made two changes to how the photos appear on the homepage.

1.) See the photo and only the photo. You can now click on the News & Events box to allow it to fade so that the photo can be seen with no impediment. The news box reappears when you refresh the page.

2.) “Lytebox” effect for all the homepage photos. When you view all the homepage photos, you can click on each thumbnail to see the much larger view of the same image.

We continue our tradition of experimenting with photography and how it can tell our stories over the Web.


Usability Tests and Low-Hanging Fruit

illustration of an apple treeThe first round of usability testing with the new homepage design is complete, and I first want to thank all the current students who participated. I was hoping for 10 volunteers and got 16, so thank you again for taking the time to help out during what I know is a really busy time of year.

There are already some very simple fixes in the works as a result of these observations. Call them the low-hanging fruit, or the “forehead slappers:” there are always a few obvious-in-hindsight changes to be made to any design as soon as you actually watch someone in the act of using it.

For example, in the very first session, I asked the student how they would go about finding the email address of one of their professors. He promptly entered the professor’s last name in the search box at the top of the screen and hit “Phone/Email Directory.” However, that box is the site search, not the directory search, and the link just takes you to the directory. The student figured this out immediately, but since the search box just said “Search,” a simple change to “Search Rochester.edu” might help users understand what it is they are searching before they begin their search.

Some other fairly simple observations/fixes:

  • About half the students when asked what they would do if they needed to find out information on how to do a semester overseas, knew the name of the Study Abroad office and just did a search, which brought them successfully to the information they needed. They other half browsed for the information, and most of them started under Academics. But there is no link to Study Abroad on the Academics subhome. A handful also started at Academics when looking for the Blackboard login. Potential solution: Add a section for “Academic Services” to the Academics page.
  • When asked to find out about internships they might qualify for, again many students knew the Career Center by name and just did a search. Others browsed and started with Working Here. But there is no link to the Career Center from the Working Here subhome. Potential solution: Add a link to Career Center from Working Here (duh.)
Tomorrow, we’ll tackle not so much a forehead slapper as a head scratcher–the return of the dropdown menus: yes or no?

Usability Testing: What Is It?

For the rest of this week and into next, I’ll be conducting usability tests with about 20 current undergraduate students. It’s one of my favorite parts of my job, but what does usability testing mean?

Basically, students will be coming to my office one-on-one to use the University homepage as a starting point to accomplish a set of pre-selected tasks. They will also get a chance to do some tasks that are important to them — things they do frequently or have done recently. During this time I ask the students to “think out loud.” If they’ve paused for a minute, what are they looking for? Why did the click on a particular link, or search for a particular term? What aren’t they seeing that they expected to see? Each session takes only about 45 minutes, and each student’s actions on the screen and comments are recorded for future reference.

This approach is what I call the Steve Krug-ian model of usability testing. Steve Krug is famous in usability circles for his book and philosophy of the same name: Don’t Make Me Think. His basic point is that you will learn far more about the success of your website design (or the design of anything really: a coffeemaker, a DVD player, etc.) by watching three people actually try to use it than you would if you sent out hundreds of surveys or conducted dozens of focus groups.

Because unlike focus groups and surveys, usability testing is more concerned with what users can do or not do on a website than what users like or don’t like about a website. Of course you want to design a site that most people find attractive and pleasing, but so much about design and aesthetics is subjective. One person’s “rich and elegant” is another person’s “dark and depressing.” One person’s “clean and simple” is another person’s “stark and boring.”

The goal of usability is to get at what works or doesn’t work. For example, if half the people you test never notice the search box, or can’t find the campus map, this is a bad thing. But if some people think the search button should be blue, and others think it should be white … well, we could go back and forth about that all day.

More updates on what these tests reveal will be included here in future posts, so stay tuned!


A Trip Down Memory Lane

Just for fun, here are the University of Rochester homepages dating back to the first-ever homepage for the University, published in 1996.

In fact, the first-ever homepage made a triumphant if temporary return this year as our April Fools’ special.

Of Dropdowns and Flyouts

The only real functional change we’ve made in the new homepage beta is the elimination of the dropdown menus that were there before (other changes involve aesthetics, content, or underlying code). I have noticed a few comments and questions about this change, and it is definitely one that we will be testing specifically to see how it affects users’ ability to find content from the homepage. For people who are familiar with the old homepage navigation and who had their favorite method of getting to their most visited pages, any change can be disruptive. But how do dropdown menus affect people who are not familiar with the University or its website?

The reason for trying to eliminate dropdown or flyout menus generally is that they don’t often work as expected on newer touchscreen devices like the iPad and other tablets. Dropdowns usually work on “hover;” you hover over a menu item with your mouse and are given the option then clicking on the original item or one of the sub-items. On touchscreens, there is no “hover.” There is only touch. This can lead to touchscreen users having to click a menu item twice before anything happens, or getting stuck behind a dropdown that keeps popping up.

During usability testing I am planning to divide users into two groups: one group will use a version of the site with dropdown menus and the other without. I’ll be curious to see how significantly — if at all — the absence of dropdowns affects people’s ability to quickly find other sites and content.


Iterative Design: Meliora Meets the Homepage

A little more than three years ago, in September of 2008, a new redesign of the University’s homepage was launched.

screenshot of homepage

That redesign was 11 months in the making and represented a complete overhaul of the homepage it replaced. And that homepage –

screenshot from older homepagelaunched in 2006 — was itself a complete overhaul of the site that came before it.

The trend in Web design however is away from these months-long redesign projects and toward what is referred to as “iterative design” or “progressive enhancements.” Happily we are no stranger to this philosophy at the UofR, and we have an even better name for it: Meliora, Ever Better.

Over the last few weeks, we have been marking several special occasions on our homepage, beginning with the 10th anniversary of September 11, and continuing with the YellowJackets appearances on The Sing-Off, Meliora Weekend, the Meliora Challenge kick-off, Halloween, and our popular Photo Fridays. For these special editions we found that having a more flexible homepage that didn’t require a photo of a specific size for example, or a fixed sidebar, came in very useful for keeping us nimble and responsive.

Today marks the beginning of a month-long beta period for the homepage in which we’ve incorporated some of the enhancements we’ve made to accommodate these special homepages into our everyday Web presence. During the month of November, we’ll be conducting usability tests with students, faculty, and staff (and prospective students, ideally) writing regular blog posts describing some of the changes, and gathering feedback.

Please use this blog to let us know what you think.



Lori Packer, Michael Osadciw, Mike Jones, Dawn Wendt
Web Team
University Communications

We Have Liftoff!

The launch of the new Rochester homepage went off without a hitch early yesterday morning, and the new design is now live for the world to see.

This is all very exciting, after about 14 months of planning, discussion, and good old fashioned work. Of course, the Web being the Web, there is always something new to do or something to change or fix. The old design was nearly five years old, and anytime something we’re familiar with changes there can be a little awkwardness or adjustment needed as we get comfortable with something new. We’ll continue to use this blog to share our thoughts about new ideas or changes as they come along.

Speaking of this blog, I owe you some more posts regarding the changes we made during the six-week beta period. The most obvious of these changes involves the homepage photography.

Originally, the entire photo served as a link. When you hovered your mouse anywhere over the photo, you got a little caption telling you more about that photo. And if you clicked anywhere on the photo, you went to an “About the Photos” page. This was a neat idea, except for the fact that it was very easy to unintentionally click on the photo and then get whisked off to some page with no idea why.

So on the new site, the “About the Photo” information can be found by hovering over the little camera icon at the top of the page. Ya see it? We’ve intentionally made it rather subtle so that it’s almost like a hidden Easter egg: if you spot it, it’s a fun little bonus discovery and it doesn’t overpower the page.

We’ve also included a five-star rating system of the photos, so feel free to vote for your favorites. The plan is that during the course of the year we’ll continue to freshen up these photos to show off the beauty of our campuses as the seasons pass or to highlight events throughout the year.

From the tuckered out but happy Web team, that’s all for now. Please take a moment to explore the new homepage and keep letting us know what you think.


Homepage Beta is Live!

A prototype of the new homepage design is now live at http://www.rochester.edu/beta/.

For this beta period, we’ve added commenting and “rate this page” functions for each page included in the beta, so please feel free to send us your feedback, either on individual pages or via the blog.

Some additional additions to the beta:

  • If you click on the large photo on the homepage, you go to a page that lists all the large photos, with desktop wallpaper available for selected images. We plan to expand the ways visitors can use these photos during the beta period.
  • The “Newsroom” is no longer a hard-coded mockup and is now actually serving up live news from all the University units, and live event information from the University calendar.
  • For the “sub-home” art, we stuck with the darker background images but made them shorter so that more of the content below would appear “above the fold” for users with shorter browser windows.

We plan to conduct more usability testing during this period with more audiences — prospective students, current students, faculty, and staff for a start — and I’m sure will continue to make changes. So keep those cards and letters coming in!


Beta Photography

Here at Redesign Central, we’re getting ready to launch the beta version of the new homepage redesign. The beta should be live next week, and we’re excited to see the site holds up “out in the wild,” as it were.

In the meantime, as a bit of an appetizer, here’s the collection of homepage photos that will be included in the beta release.

homepage photo collection