Architecture vs. Design

In the last few posts we’ve talked primarily about the graphic design of the new homepage, subhomes, and templates. That’s because lately that has been where most of our efforts have been directed. Plus, it’s fun.

But “underneath” the graphic design of the site there is another type of design: information design — or information architecture– is the art of designing the structure, hierarchies, and relationships of the content and functions that make up a website.

As the old saying goes, “You can’t hang the drapes before you build the house.” (Well, maybe it’s not an old saying, but it is a saying because I just said it.) The information architecture discussion and work has to happen first because it informs the graphic design.

Our new redesign relies on a simple persistent navigation scheme (“persistent” because it will “persist” through to the subhomes and templates) that uses similarly large concept “chunks” (Academics, Student Life, etc.) to create the initial structure. And yes, “chunks” is the technical term amongst information architecture circles. A secondary menu features a mix of audience-specific navigation and task-driven navigation.

With that architecture in mind, the design can now go to work making the primary navigation look like it is primary, and the secondary items look secondary. In this way, things like font choices, sizes, weights and colors are not just aesthetic decision, but actually help create meaning and structure. They say, “These items go together. This is more important than that.”

–lori

Tabs or Ticker?

Another change we’ve made in the latest mockup of the homepage redesign (check it out here) is to replace the earlier ticker with a news “tabs” layout for news and events. (You can see the original ticker in action here.)

Some users commented that they liked the ticker, calling it “cool,” “neat,” and “interesting.” We certainly liked it, too. The idea behind the ticker was to be able to give individual news items their “moment in the spotlight” while still conveying the sense that there were lots of different things happening in the life of our major research University every day.

Though we liked the ticker approach, we did have a couple concerns: would users stop and attend to the ticker long enough to get the impact of the scrolling stories and actually read and learn about the stories were were trying to communicate, and would they think that anything that moved around of its own accord be more annoying and distracting than useful?

The answers to those questions were “no” and “yes.” No, users did not stop and read individual items as they passed by. Even prospective students in our initial usability studies, who commented that they liked the ticker, still didn’t bother to engage with any of the information it contained. And yes, faculty and staff visitors said they found the ticker irritating.

Hence the new “tabs” design. By using tabs, we can still convey the notion of “lots and lots of stuff” in a nice, tight space. I also think each of the news items gets a little more focus and attention in the new tabs design than they would have received if users had to wait to see them scroll by in the ticker.

Lastly, we’re playing with the idea of using “cutout” photos in interesting ways here, to visually draw attention to important stories and convey a sense of depth and even fun in this space. (Check out an example of a news item “cutout” here.)

–lori

Fixed or Liquid – A Solution

A few weeks ago, I described a problem we were having with the current homepage design. Namely, the large photos that provided the visual punch in the design were not being displayed to their best effect when viewed with various screen resolution settings or in various browser window widths.

This problem was hamstringing our photo choices so much that we began developing some fixed-width alternative designs in case we couldn’t come up with a solution.

I think we’ve come up with a solution.

Combining CSS (with many thanks to Noah at the Eastman School for his help) with the Javascript that rotates the images on refresh, we now have a gallery of homepage photos that automatically rescale to accommodate the user’s browser and screen configurations.

Check it out.

–lori.

Fixed or Liquid?

Thank you to everyone who’s commented on our design mock-ups so far. And my apologies for not posting these comments to the blog before today. WordPress was hoarding thm in a moderation queue without telling me, and when I discovered them sitting there this morning, it was like finding an extra pile of birthday presents you didn’t know were there!

Many of the comments so far are about the big photo on the homepage: some people love it, some think it’s — well — big. We do know one thing for certain: if we’re going to use photography to set the tone and express the character of the University via the homepage, we need to use very strong, very compelling photos.

And therein lies a problem. The homepage is designed with what’s known as a flexible or “liquid” layout. It’s this liquid layout that provides a lot of the punch of the page. The photo fills the screen all the way to the top, bottom, and left-hand side, and as your monitor and browser window get bigger, you see more of the photo. This is very cool.

There is a downside, though: what you gain in flexibility, you lose in control. For users with their screen resolutions set at 1024 X 768, the main horizontal menu crosses the picture at a different spot than it does for users with screen resolutions of 1280 X 1024 or 1440 X 900. Time and time again we found ourselves finding a really great photo to use in the homepage rotation, only to scrap it because the inability to predict exactly where the menu would hit for the most common screen resolutions meant that it could run under somone’s nose or across someone’s face. Furthermore, when users with bigger monitors see more of the photo, this means users with smaller monitors see less. Users with 1024 X 768 resolution settings (the most common setting we see, accounting for 40% of our traffic) could miss out on up to one-quarter of the image.

We are working on various solutions to this — including a Javascript that will point to a different collection of rotating images based on your browser window size — but another option that would give us the most control of where each element is positioned on the page is to go with a fixed width layout as opposed to a liquid design. Here are some screenshots of some fixed width ideas:

As in any design decision, there are tradeoffs. The fixed width design vastly expands the possible universe of homepage photos we could choose from; the liquid design requires us to choose photos that will work whether you are seeing all of them or some portion of them determined by your available broswer real estate. But with the fixed width design, we’re back to designing for a lowest-common denominator (this time 1024 X 768 instead of 800 X 600) rather than trying to take advantage of larger and newer devices in an interesting way.

–lori

A Vision of Students Today

 

Michael Wesch, a professor of cultural anthroplogy at Kansas State University, has created several videos looking at the Web 2.0 world and what it means for today’s students and higher learning insitutions. The best know of these is Web 2.0 … The Machine is Us/ing Us (definitely worth a look) and he’s come out with a new one — well, three months new — featuring his Kansas State students in one of their native habitats: the lecture hall.

The video “summarizing some of the most important characteristics of students today – how they learn, what they need to learn, their goals, hopes, dreams, what their lives will be like, and what kinds of changes they will experience in their lifetime.”

Like the old fogey I am, at first I despaired over the fact that the students surveyed will read only eight books this year but will view over 1,200 Facebook profiles. But on second thought, I realized this is a true “medium is the message” situation. A book is a superior medium for delivering long-form narrative designed to construct an arguement or tell a complex story. A Facebook profile is a superior medium for sharing experiences across large networks of people with who you share something is common.

Sometimes the superior medium is a homepage. Sometimes, its a chalkboard.

–lori

So What *Do* We Like?

In the last post, I talked about the “inspiration board” I generated after reviewing over 1,000 college and university homepages. In addition to learning that there is a lot out there that looks the same, I also found some homepages to file under the “Stuff I Like” category: homepages that were clean, easy to wrap your head around and navigate, and immediately compelling.

California Baptist University
You know me: I’m all about the big photos. And Cal Baptist sure runs some biiiiiig photos. I also like trying to create a look of layering and depth in a design, and Cal Baptist handles this in an interesting way, too. The main navigation elements are pretty simple (though some of the dropdowns get a little long). There are a few too many boxes and buttons on the page for my liking, but I really like the overall approach.

NYU Steinhardt
Another big photo and another approach to creating layering and depth. There are not one, not two, but four horizontal menus, which may be pushing it a bit, but graphically they are treated in such distinct ways that I don’t think I mind it so much.

Thompson Rivers University
“Hey, what happened to the big photo?” you ask. Well, I’ll tell you. I like this site for a very different reason: its sparsity. Remember the movie Moscow on the Hudson? (Those of you under age 21, ask your parents). Remember the scene where Robin Williams, playing a Russian who recently defected to New York City, is sent to the store to buy coffee? Having spent his whole life in the Soviet Union with only one type of coffee available, he’s now confronted with an entire aisle of coffee. Faced with so much choice, he’s paralyzed into inactivity and proceeds to flip out (this is a Robin Williams movie we’re talking about).

This movie moment — and the Thompson Rivers homepage — serve as useful examples of Mike’s earlier design mantra: less is more. By providing too much of everything right away, you can actually make things harder to find, not easier. If you don’t believe me, check out the one element on the Thompson Rivers page that does not fall under the “Stuff I Like” category: the Quicklinks dropdown. If you can find anything quickly in that coffee aisle of a list, you’re a smarter bear than me.

–lori.

The Lay of the Land

This past fall, I looked at the homepages of every college and university in the United States that has a homepage (all 1,138 of them, not including community colleges). I did this for a presentation I gave at the HighEdWeb 2007 conference regarding the rate of adoption of Web standards in higher education versus corporate America (the truly geeky among you can check out that presentation here).

Though that presentation was my main goal, I had an ulterior motive. Since I had to look at over 1,000 university homepages anyway, why not do so with our upcoming redesign in mind, and ask myself: what does the lay of the land look like out there in College Homepage World? Are there any emerging trends or conventions? What do I like, what don’t I like, and why? The result of this process is what I call an “inspiration board” or “design source book” for our homepage redesign.

The most important lesson I learned from the exercise was this: there is a lot conventional, typical, average, solid, but “same-y”design out there on America’s college homepages. This is good news, I think. It means you don’t have to do much to differentiate yourself from the crowd. Even the slightest design twist or clever innovation can make a huge impact.

For an example of what I mean, check out the homepages for Cornell and Michigan State. Both are good, solid, easily navigable sites (though I do prefer Cornell’s architecture), but if you toggle back and forth between them quickly in your browser, you’d be forgiven for thinking that someone had just swapped out Cornell’s “Big Red” for Michigan’s Spartan green.

Some other examples of homepages that fall into this “typical” band are Virginia Tech, Washington and Jefferson College, and University of Connecticut. Again, all good sites (I especially like Virginia Tech’s). But after a while, I think they start to blend together a bit: a Flash “splash” in the top third, news and events in the bottom third, header across the top, menu on the left.

Don’t get me wrong; design conventions are good. They help our visitors get a mental handle on things when confronting a new site. But conventions don’t have to be applied conventionally. Looking at the college homepage landscape, it does appear that there is much room for improvement. After all, Meliora doesn’t mean “Always the Same.” It means “Always Better,” and we can definitely do better!

–lori.

New Years Resolutions for Homepages

It’s that time again when we all resolve to do this, change that, and generally “be better at stuff” in the coming year. If a homepage could make New Years resolutions, what we they be?

  1. I resolve to stop trying to be all things to all people and just focus on what I’m good at.
  2. I resolve to provide new visitors with an easy overview of what’s available on this website, while not getting in the way of regular visitors who already know where they are trying to go.
  3. I resolve to always be standards compliant and accessible to all users.
  4. I will show off my University by always looking my best!
  5. I will go to the gym at lunchtime every other day. (Oh, wait. That one’s mine.)

Happy New Year!

–lori.

The Goals This Time ‘Round

Back in 2004, during our first in-house homepage design process, the Web team developed a set of three goals that would drive the design. Those goals were: To provide more space on the homepage for content that changed; to create a more consistent navigational scheme that would allow visitors to find information more easily across all the University schools and divisions; and to conform and validate to a growing set of Web standards that were being increasingly adopted by modern Web browsers.

Those three goals proved to be a very useful device for the team in framing the process as it went along. Whenever we questioned ourselves about what we should do in the design or the structure of the site, we fell back on those three goals and asked: “Well, how or to what extent does that idea advance any one of our three goals?” Having that big picture in mind made it a lot easier to make the many little choices involved in a successful design.

So we figured, hey! Let’s do that again!

This time ’round there are five goals for the redesign (why stop at three?). They are:

  • Make a dramatic and immediate impact on users
  • Create simple, clean navigational elements
  • Emphasize prospective and current students as the primary audiences (on the homepage and on the supporting pages when appropriate)
  • Beef up the supporting pages; rely less on institutional “lists” and more on dynamic content and visitor participation
  • Use underlying technology that takes advantage of new user environments (eg. larger monitor sizes/resolutions, mobile devices)

–lori

Wayback Machine, Part I

The first University of Rochester homepage was published in 1996, and as we prepage for the next incarnation of www.rochester.edu, I thought a trip down memory lane might be in order.

Here is that first page (check out the Internet Archive for a more in-depth look at the site).

screenshot of 1996 version of homepage

To me the most striking thing about this design is how narrow that main top image is, while still managing to squish in no fewer than seven separate photos (and it’s a little tough to see in this image, but it looks like the crew team is rowing across the sky above Rush Rhees Library). Below that image the old HTML standbys of bulleted lists, bordered boxes, and horizontal rules are much in evidence.

It’s also amazing to think that in just about 10 short years the expectations for how a website should look have changed so drastically. Functionally, there’s not much wrong with the site; it doesn’t provide you with any opportunity to actually do anything, but as an aid to navigation it’s pretty straightforward. However, if a major university had such a homepage today, I think most users — especially prospective students — would be a little, shall we say, underwhelmed.

–lori