Menu Dropdown Types

Single column dropdown:

USC College of Letters, Arts & Sciences

Multi-column dropdown:

University of Virginia

Multi-column pushdown:

Boston University

Mega pushdown landing pages:

Media Rich Mega Push Down 

Second Tier Navigation

University of Virginia

Single "Quicklinks" (first nav bar)  mega full-width dropdown:

CBS.com

Single "Quicklinks: (first column) mega (full-width) pushdown:

Rio Salado College

Mega-Full Width Dropdowns:

NBC.com

Slide-down Tray:

University of Notre Dame

Calendar of Events

Weslyn Universityhttp://events.wesleyan.edu

Front Page Calendar of Events Wesleyn

  

HigherEd Webinar: University Websites, Duke University

Tuesday, February 16, 2010

Stewart Foss, founder of eduStyle.net, gave a thorough presentation that discussed trends and practices of University and College web sites throughout the United States.

500 college websites were redesigned in 2009, according to eduStyle.net. Key design trends centered around technology, navigation and design.

AJAX and JavaScript frameworks were one of the leading technology trends. Many designs included some type of dropdown, pushdown, or other interactive browser behavior that doesn't involve reloading the page to interact with the site. There has also been a decline in use of Flash, while JavaScript usage has seen a commensurate increase with along with browser capabilities. HTML5 is an emerging standard, and with mobile devices becoming significantly more prominent, and with the iPod and soon to be released iPad (both which do not support Flash), the game is changing for Flash use. Whereas the HTML5 standard supports video tags instead of requiring specialized plug-ins.

There has been some decrease in the prominence of audience-based navigation (Prospective Students, Current Students, Employees, etc.). Some sites have pushed the audience menu into a less prominent position, putting more emphasis on the global navigation for general audiences.

"Popular links" are being used more often. This is not your typical "quick links". This is actually based on analytics or real-time needs, and may change throughout the semester as students' needs change, and as their search patterns change.

Links to social networking has definitely seen an increase. This includes blogs and facebook, integration with remotely hosted Flickr thumbnails, and others sites.

Layout trends included many sites moving toward a fixed-width, center aligned design; and with today's bigger monitors, 950-980 pixel web site widths are common—taking advantage of larger screen real estate.

Big footers, or mega-footers, are also en vogue, and differ vastly from their obscure counterparts of years before.

A couple sites that have really stepped out of the box in design are Washtenaw Community College and Biola University's Undergraduate pages. These are graphically rich sites with hand-drawn illustrations that really give a distinctive appearance. The trend also migrates towards background textures and graphics that have a natural, organic appeal to them.

Large and wide masthead images also populate many home pages. Some even put large photos as a background images to the home page and beyond. In general, the quality and size of photography has improved.

3D elements such as bevels, shadows, gradients and reflections show strong presence in today's educational websites.

All of this, we are reminded, has been presumably decided by each college for their own reasons. Our own audiences and content should drive the reasons for deciding to implement any of these features or trends. Also, our ability to maintain anything that is added to the website is an important consideration. All in all, a very good presentation, and reaffirmed for us the direction we are headed in our redesign.

Wednesday, February 17, 2010

Ben Riseling of Duke University presented on Wednesday. They underwent a redesign that was completed in October of 2009. They redesigned their primary site in Drupal. The presentation was CMS neutral and focused more on project management and institutional decisions. Their choice in implementing a CMS allows them to generate plenty of content from multiple users, and be able to re-use that throughout the site.

Ben talked about RSS being the magic bullet for content re-use throughout the site, and strong part of mobile content delivery as well.

Their campus alert can be activated easily. They can post an alert to the home page in under 20 seconds, and the home page expands to reveal the alert.

There is no such thing as an "out of the box" solution. Both commercial and open source websites will require customization. They chose an open source CMS because it met their needs.

Duke drafted the functional specs on their own, and just wrote up the RFP for the design portion. They also included a Kill Clause in their contract which could allow them to stop the process at any time if they want to take it over or hand it off to another vendor.

They have 8 news editors, 4 image editors, and 1 event editor. They also have multiple stakeholders contributing subpage content. Some roles have more oversight than others, but all in all, it is working well for them.

Thursday, February 18, 2010

Chas Grundy, the Director of Interactive Marketing at Notre-Dame university, presented on Thursday. He has been involved in hundreds of redesigns over the past ten years.

He began by reinforcing the necessity to keep on track with schedule and budget, saying "there's nothing worse than launching your redesign late and over budget only to find it doesn't meet your needs." Common mistakes are:

• a weak strategy (and not keeping to it)
• poor stakeholder management (not all the right people at key meetings, and too many cooks in the kitchen)
• Designing before planning content
• No maintenance plan

A successful redesign will have stated and measurable results, a defined strategy upfront, testing-revision-testing-launch, strong content strategy, and continued maintenance and tweaking. Don't assume it's done once it's done.

A highly simplified flowchart of the redesign process is:

1. Research and strategy
2. Content planning
3. Writing and editing - Content into website
4. Design mockups - Build templates
5. Testing
6. Website launch

Usability: Test Early, Test Often. Usability testing can be cheap, fast, and effective. It doesn't have to be a big project. It can cover small things, single wireframes or sketches. It can be done this afternoon. This early and simple testing helps to avoid the "forehead-slappers" that can sometimes be forgotten while intensely planning a site. Test on a whiteboard, or a wireframe, or a piece of paper. Get the feedback. Testing at the end is too late.

Some good usability resources, listed also at bit.ly/usabilitytoolkit, are:

• For IA: Optimal Sort, TreeJack
• For Design: 5secondtest.com, Silverback, Chalkmark
• For A/B Testing: Google website optimizer

Also mentioned was CrazyEgg.com, which creates a heatmap analysis of your page.

It helps so soften the launch, so people know it is coming, and feedback can also be received. Blogs are a great tool for that.

Have a post-launch plan. And instead of needing to redesign every few years. The right time to redesign is when it no longer meets your needs. If you make continuous and incremental changes and improvements to the site, it can stay fresh and not need an overhaul.

Notre-Dame primarily makes mobile content easily accessible through the use of custom-tailored stylesheets for mobile devices. They will be releasing a mobile-only site soon, however.

DRAFT Student Survey Thoughts

Question #6 - Perhaps we should first ask "Have you ever visited a college website in order to make a decision as to what school you would attend? If yes, then answer the following.

Question #7 - For some reason, the term "faculty biographies" just doesn't seem right. Perhaps "faculty qualifications" or "faculty education", even "faculty background". Don't know why you need two categories, maybe just "Faculty Information" would suffice.

Question #12: Could the parent category be "Parent of Current or Perspective Student"?

I agree with Jim with Question #11. I'd be hard pressed to pick one and even as a design person, I don't see the relevance.

I'm sure you know much more about what kind of data you want to obtain from this survey, so don't take any of this too seriously, OK?

Ken
***************
I think it looks good, Eileen!

I agree about the car question, I would find that hard to answer.  But, if
our students seem to like that question then it probably doesn't hurt.

I also like the idea of asking what they like about our website. Or, perhaps
at least a box where they can enter "additional comments" in case they want
to tell us something that we didn't address in our questions.

Thanks,
Michelle
******************

You guys did a great job getting the survey to this point. Here are a few thoughts to fine-tune it.

For question number 4, I think the mid-range option should be "manageable"--I think "somewhat difficult" is more difficult than the mid-range.

For question number 11, I don't get it, and I'm a car guy! I am not sure what we would learn about our website if a student said it was like a Mustang. Perhaps a better holistic question might be...On a scale of one to 10, how would you rate the PC website overall. You could even dovetail that question by asking participants to list two or three school websites that they thought were really well done??

I think a question we are missing in the survey is: /What do you like about our current website?/...just to avoid that whole baby with bath water thing.

I hope this helps.

Jeff
***************
I just did the survey and think there should be one more rating category.

Thanks,
Dale
**************
Students probably don't think about "the review" of a website, but--more to the point--if they put listed a site that stuck out in their minds, that could be useful if we started seeing a pattern.  That said, I respect your managing the length of the survey too.

Eileen Archibald wrote:
> Good Points Jeff!  I have already heard back from some students that are testing it and you are right on about the question number 4.  However they loved the car question (but thought a lead in would be nice) and that was recommended from a consultant to get an idea for design--so basically its a design thing.  Lets see what the other students say (that are testing it).  Also, Yes yes to the what do you like about our website...I was worried about the length of the survey but it doesn't appear to long when you take it so I do believe we can add more in.
>
> I was thinking about the three school websites that they really liked...and was wondering if they would have a few in mind.  I mean how often are they visiting other school websites with "review of the website" in mind.  I know we do.   Another way to phrase that question that several other colleges have used is : "What websites do you like/visit often? And why?".
*****************
Eileen-
I took the survey, and it looks pretty good to me.
You might consider, on question 4, to have more options rather than just Easy, Somewhat Difficult, Difficult and N/A.
The car question, although unexpected might yield some interesting results. I would certainly like to find out the most popular answers. So I would keep it, but a lead in might prepare you for it.
Somewhat easy seems like the perfect choice to me, having somewhat difficult without it seems somewhat odd to me. That is just my opinion though.
Jacob Clark - student
***************
Car question was a little hard. People might be more likely to answer the car question if you had some examples:  Prius, SUV, Camero, Kia, 4-door Sedan
More choices in the rating categories.
--Joe
******************
I liked the car question.  I thought about my Toyota Sienna and how comfy it is and roomy. It makes me feel good.  Maybe a place to explain why you would choose what you did. If you give them choices leave one blank for their own choice.
--Diana
****************
Everything looks good.  I thought the car question was interesting and fun.
--Rebecca
**************
My two cents is that it might be helpful to have the pc web address (www.phoenixcollege.edu) added in parenthesis to any of the questions that refer to it, just in case they close their browser and are feeling very lazy and don't want to scroll clear back to the top of the page.  That's assuming that they even look :) --Scott

News & Events

The USC College of Letters, Arts & Sciences has a very nicely designed template with primary top navigation; and standard dropdown menus for second-tier navigation. The second-tier and deeper navigation is displayed on the left menu, but subsection navigation (menu trails) are also highlighted in red to help indicate which section you are—makes it easy to recognize.

USC's News & Events section is nicely arranged with thumbnails, videos, teasers and dates. News item shows a feature at top with larger thumbnail, and lists below with thumbnail.

Virginia Tech also has a very nice left-navigation menu with professional looking, as shows on their University Relations department page.

The Event Calendar is very nicely placed in rightmost column without taking up too much screen space—yet you can click on a date in the mini-calendar, and it loads that day's events below it without reloading the page. When you click on a calendar event, there is a webcal: link to add the event to your personal calendar, plus links to social media (Digg, Facebook, Reddit, and Stumbleupon). The webcal feature is really nice. Every page has an email and print-ready link (which open in a lightbox). (Caution: dropdown links and print-friendly/email should really work with JavaScript off.)

The News articles are tagged by category and free-tags. This means you can click on any tag to see a list of any other articles tagged by the same term. They also feature Top Stories on the right. I wonder what makes them top stories? Number or readers, or author's decision? They also put single large images or even videos in the story. All stories can be browsed via the archives which are sorted by month.

USC also has "In the news" which is short clips where their school is named or somehow involved. Listings are chronological and can browse through the archives. Each item begins with a hyperlink to the referring article—very consistent.

The way this website is constructed and how the CMS taxonomy is implemented, this would be a good model for structuring our news site, as taxonomy and cross-linking has the potential to become fairly complex. This navigation seems fairly natural.

Current Student or Alumni

University of Denver
http://www.du.edu/currentstudents/index.html
EDIT 8/30/11: DU's design has since changed, but the screenshots below show what it used to look like.

Great idea to have people share their story and photo.  Could be used for anniversary, current students, or alumni. You can share your story via an email.

When you click on a picture from above this is the type of story it opens up.

Cornell Daily Sun: 161 Faces
http://161faces.cornellsun.com/
Cornell University has shown another great way to display student profiles or stories. Could be used for profiles, yearbook, or alumni. Each picture opens up a brief profile in a 'lightbox'-style popup window.

Prospective Student - Landing Page Ideas

Wesleyn
 http://www.findoutnwu.com/academics/

Fort Lewis
http://explore.fortlewis.edu/prospective/http://explore.fortlewis.edu/prospective/

ss



ss