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.”
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.)
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.
Check it out.
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.
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.
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.
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.
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.
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