April 2011 Archives

As I read an interview with Brain Traffic's CEO Kristina Halvorson, her words rang as clear as Prince William and Kate's wedding bells.

"One big mistake companies make is they are undertaking projects like creating web apps or mobile websites that are separate from the rest of their online initiatives. It's really very important that all content is created for all platforms and to let it evolve over time regardless of what context the user is in. The first thing would be not to consider your mobile content a separate project. Mobile really forces you to look at what's important which makes mobile is a great place to start when creating content because there is less space and it forces you to deal with what's most important. Smart content that can be distributed across many channels. Keeping your mobile strategy separate is a mistake."

I couldn't have said it any better. So, this brings me to the third objective of the umn.edu home site redesign:

Increasing usability and support for mobile devices

University Relations is partnering with the Office of Information Technology (OIT) to develop its mobile approach in conjunction with the launch of the home page. For starters, we worked with OIT to develop an executive overview outlining the objective, strategies, and goals.

Objective
Provide an optimized mobile experience for all visitors and establish m.umn.edu or mobi.umn.edu or mobile.umn.edu as a gateway to the University of Minnesota.

Strategies
* Redesign and improve websites with consideration for presentation/organization for both desktop and mobile devices
* Increase collaboration with campuses and units
* Reduce duplication of effort and increase re-purposing of content
* Follow project management best practices
* Integrate technology and communications strategy for mobile devices into a unified University approach.

Goals
* Create an infrastructure to support and extend research
* Support the University's online learning initiatives
* Position the University of Minnesota as a leader in delivering higher education communications via multiple channels
* Increase public engagement
* Provide proactively a mobile environment to all stakeholders
* Help ensure the University of Minnesota maintains a competitive advantage
* Establish benchmarks to measure and evaluate mobile devices projects and their success

First, the home page redesign separates content from design. This is critical for repurposing content as well as content shifting - allowing a user to take a piece of content that they've identified in one context and make it available in another. The bottom line: it is all about providing the right information to the right people in the right format at the right time.

Second, this summer the team expects to develop mobile guidelines/standards that can be adopted throughout the institution. Finally, we will be focusing on content liberation. Content liberation is a two-part process that results in a piece of content uprooted from its original context and tied to a user.

We are confident we are on the right track. Why? According to A List Apart, "Websites have responded quickly to these new demands. Media queries and the responsive design movement have enabled designers to tailor the experience of a site to whichever device a user happens to be using. Flexibility at this macro level of the site is important, but the real breakthroughs will come when we enable the same flexibility at the micro level with individual pieces of content."

Cheers!
~Jennie

Read previous home site redesign posts:
Time flies when you are having fun (3/23/11)
2011 Home Site Redesign - 8 weeks and counting (4/1/11)
Surviving - 7 weeks and counting (4/7/11)
The Amazing Race - 6 (wait - it's already 5) weeks and counting (4/21/11)

Over the past few weeks, I have shared with you various home page redesign tidbits including the overall strategy as well as the first and second objectives of the project.

The next objective reminds me of the television show - "The Amazing Race." Pairs of contestants on the program race around the world using clues to find locations. This sounds eerily similar to the usability testing we just completed with the University of Minnesota's stellar Usability Services this week. Many of the objectives asked volunteers to read a task and then find where the information was located in order to complete the task. Overall, it was a great success! We learned a few things to tweak as well as the top navigation is a much-desired attribute. This is most excellent because the third objective is:

Streamlining navigation by bringing the most-accessed items near the top of the page.

What did our testing regiment look like?

Affinity diagramming - We first completed an audit of all the information on the umn.edu home site and then asked volunteers to try and group similar items together. Using post-it-notes and very big walls, the organization of the new site started to peek through.

Online card sorting - Using the categories and content from the affinity diagramming exercise, we then asked volunteers to logical sort information into buckets. We worked with the U's usability lab and tapped into one of their online programs to accomplish this task. It went swimmingly and allowed us to continue to refine the information architecture of the site.

Paper prototyping - Once the information architecture was close to being solidified, storyboards were created for each of the views. As you may remember, the site allows visitors to select one of these groups and display customized information: current student, donors or alumni, faculty, future students, parents, sports fans, or staff. Each navigational item had a corresponding page associated with it and was graphically displayed. I have eight binders full of screenshots/storyboards. These were then used for paper prototyping exercises where volunteers were asked to walk through certain tasks on paper. At this point, not one line of code was written. It was critical to make sure we were heading in the right direction - and paper prototyping assured us we were.

Eye tracking - This is the program we did this week which consisted of two days of observing volunteers using the development site. Weeks of coding, design, development, and writing were poured into the site. This was the Bahama-mama of testing. Does the site work like we thought it would? Will users like the choices available? Does the navigation make sense? The answers? YES! YES! And YES! Yipee!
Yes - we discovered some more improvements could be made but it was an overwhelming success. The feedback we received was absolutely valuable and gives us an opportunity to make the enhancements now rather than post-launch.

Truly, the investment made into the several types of usability testing is absolutely essential to ensuring a successful launch. With an incredible Usability Services team on the Twin Cities campus, there's absolutely no reason not to work with that group. The staff is incredible, they know their stuff, and they are awesome to partner with.

Stay tuned for my next post as the countdown continues.

Cheers!
~Jennie

P.S. Interested in seeing the top menu? Check out the Design Direction document (pdf).

P.S.S. If you haven't had a chance to read the prose of Gerry McGovern lately, here are two good articles: The Format is not the Task and The Accidental Website Visitor

Unfortunately due to circumstances beyond control, we are terribly sorry to announce the April 26 webinar is cancelled. This topic "Writing for the Web" is very popular and we will plan on scheduling the session this summer.

Please accept our deepest apologies for the inconvenience.

The social media in higher education conversation is regularly dominated by platforms like Facebook and Twitter, but I would argue that one of our most powerful social media tools is actually YouTube. Why is that? Because YouTube has invested time and resources into helping colleges and universities use their platform to host content and connect users with educational videos.

Here's what they said about it in March 2009 when EDU launched:

Using YouTube as a vehicle to democratize learning is one of the coolest, unintended outcomes of its existence. YouTube EDU is a volunteer project sparked by a group of employees who wanted to find a better way to collect and highlight all the great educational content being uploaded to YouTube by colleges and universities.

In fact, their content strategists have worked with us on youtube.com/umn, which now hosts nearly 300 videos and receives 40,000 video views per month.
We've been approaching EDU from multiple angles. We post short promotional content like our Why the U of M? video and longer content, such as the morning keynote from last year's MinneWebCon We've started building in new infrastructure that allows us to organize videos by college and department as well as topic areas, like Students.

So what does this mean for you? Well, it means that we want to help you post your content on YouTube! As opposed to having 30 different YouTube channels out there, we can actually better leverage the visibility provided to us by YouTube EDU if we host everything in one place. There will only EVER be one University of Minnesota channel listed on EDU, and that's youtube.com/umn. On top of that, regular YouTube channels have limitations that the University's main channel does not. For example, post content up to 90 minutes in length, host true HD 1080p quality and we can better connect your videos to similar topics increasing the likelihood that your video will be watched.

So how can you become part of this? Well, you can start by contacting me! Plus, I'll be sure to continue to update people through the Video Users Group, so if you're not a member, please join us!

The Because campaign has a distinctive element in the form of actual 3D Because models. The models can be borrowed at no cost by University units to incorporate into their ads, photo shoots, events, or whatever else that fits with the campaign's bold message of the benefits of discovery in education, research, or the community (so probably not your weekend BBQ).

Danielle Johnson, in marketing and public relations at the beautiful new U of M Amplatz Children's Hospital (UMACH), recently placed two of the models in a photo shoot with patients and their physicians.

They were a "great addition" to the shoot, says Johnson, and will help with "future ad campaign use including web and possible billboard and poster ads."

Overall, the Because campaign has helped strengthen UMACH's message through the unique connection to the University brand. It "differentiates us against other children's hospitals in focusing on the academic research ties and medical firsts," says Johnson. Unlike the area's other children's hospitals, Because reminds audiences that UMACH has the strength and credibility of a leading research university behind it.

If you want to use the models in your unit's communications, visit the Because site and fill out the quick online form ("very user friendly" according to Johnson). And if you have any questions about the models or Because in general, don't hesitate to contact Drew Swain.

Anyone who has worked with the University web templates has probably pulled their hair out over one thing or another. The template stylesheets can be a bit challenging, even though they were constructed to be as straight-forward as possible. (Really!) But it's never easy working with someone else's styles. You have to take time to read through them, from beginning to end, to have a grasp of what style is responsible for which behavior.

Reset.css--The first stylesheet listed in the templates is the reset.css. This sheet zeros out most of the commonly used HTML elements to level the playing field for all browsers. Attributes normally applied to these elements by browsers are removed, giving you more complete control over your styles. Using the reset.css, you can specify styles for the font(s) used, the link colors, the style for heading tags, the margins for lists, and so on.

Template.css--The template.css stylesheet introduces an adaptation of the 960 grid system and the template-specific styles used, such as those for the campus links, header, search, footer, and so on. If you're comparing styles between the University templates and the 960 grid system, this is where you'll see a slight difference. The 960.gs uses 10 pixel padding on their divs. The U templates removed the padding from the divs and placed it on the p and h tags instead. The main purpose for this was to allow for background colors within columns to touch. In other words, background columns in the 960.gs will have a 20 pixel gap between the columns. Background colors used in the templates will meet between columns. See the bottom of "960 grid system and the templates" on the Brand site for an example.

Optional.css--This style sheet is only needed if you are using the horizontal navigation with the dropdowns or the unit footer. If you're not using either of those features, the link to this style sheet can and should be removed from your pages. The more extraneous code you can get rid of, the better.

Print.css--This constructs a print version of your web pages, assuming that the main content on your page is in the center and right columns. It removes things unnecessary for print, such as the left navigation and the unit's graphic header. A block M and wordmark combination appears in the upper left corner of pages, and unit-specific information can be added in the upper right corner. Be sure to look at the coding on the template pages to see where you need to add your unit-specific information so that when someone does print out one of your pages.

IE6 and IE7.css--These two style sheets are vital to make your pages render correctly for these browsers. They must be imported into the pages, not linked. They must also have the correct path to them, so as you change location of your .css files or as you add directories (different levels and sublevels of pages) you need to maintain the correct path to these style sheets.

As you work with the style sheets and run into behaviors that you weren't expecting, take a look at the style or the tag that might be responsible for the behavior you're seeing. You may need to track it back through more than one style sheet to find out what's going on. Use the Brand site for a reference. There is a good deal of information in the Web Templates section of the site.

HTML5 and CSS3--As we work on a new University home page (due to appear this spring), we are converting template code to use HTML5 and CSS3. New templates with this updated code will be available at some point after the launch of the home page. Don't worry - just because there will be new code does not mean you need to switch to it! It's simply an update that you can use as you build new sites. The current code will continue to be available as well.

If you have any requests or suggestions for the next release of the templates, please let us know! You can comment on this post or email us at urweb@umn.edu.

For those of you who are fans of the television show "Survivor," you may be familiar with one of this season's characters, Phillip. Phillip is supposedly a former federal agent who launches into the most obscure diatribes when asked a question by the show's host, Jeff Probst. On more than one occasion, Phillip starts talking about Japanese samurai - something that has absolutely NOTHING to do with the topic at hand.

As I watched last night's show, I was thinking about the home page project and how EVERYTHING we are doing is related to improving a website visitor's experience. Which brings me to the second objective for the website:

Helping visitors find information more quickly and easily by highlighting upcoming events and providing more areas for stories, hot topics, and news.

There are several ways we hope to enhance a visitors experience including:
- Elevating the placement of the central navigation to the top of the page
- Using mega-menus to allow for more efficient navigation to high-interest categories
- Adding supplemental navigation specific for each persona
- Infusing a calendar of events with a constant presence
- Providing more opportunities to share targeted topics per persona
- Building the architecture so it can tap into the functionality of the Content Store. (Don't know about the Content Store? Read Pete Wiringa's latest post.)
- Strengthening relationships with all colleges/units/departments so stories, hot topics, and more can be shared quicker and easier

Each element on the new home site has been discussed, reviewed, tested, discussed some more, and then supported with data and research. Next week, I'll delve into a little more about the vigorous usability testing the site has gone through.

Cheers!
~Jennie

The Content Store project is well underway, again, and we're moving ahead in conjunction with the Twin Cities homepage redesign. We've faced several interesting challenges along the way and, as a result of both those challenges and the homepage redesign, we've made some changes to the content types. With the homepage scheduled to launch at the end of May, the Content Store is expected to be complete before that time.

The content types now include:

Link list

The easiest way to think of a link list is as a set of related links that can be used in multiple other content items and updated in a single location. Optional fields for added descriptions and other data provide additional flexibility.

Slideshow

Wrapper around images from UMContent, with a default player to be provided.

Graphic spotlight

The spotlight content type was split into graphic and text spotlights. The new graphic spotlight type allows for a three-column (220px wide) image, and includes a suggested height. A link out, with a link title and alternative text for the image, are used to link "followers" of the image to another page or site.

Text spotlight

The text spotlight type allows for a title, descriptive text (a long teaser), a link out, a link type (i.e. "Read more," "Watch video," etc.). An optional image is also allowed, 60px wide and 60px to 96px tall.

Graphic bugs

We've often seen or heard of the problems some site owners have filling in the right column of their 960px wide designs; you don't want the center column to be too wide or readability of text will be impacted negatively. Possible solution: two-column (140px) graphic bugs, to be used in two- or three-column spaces. An image, alt text, a link out, and a link title are all that's needed, and using the existing classification system/taxonomy attached to the content store allows dynamic selection of graphic bugs.

Graphic banners

Graphic banners are the five-column (380px) version graphic bugs. This type may not be included in initial rollout, but can be easily added if there is demand.

Video

A wrapper for video derivatives from Media Mill, along with closed captions and default images. This is expected to be extended once the U's new video solution is launched.

Audio

A wrapper for audio derivatives from Media Mill. If the U's new video system also support audio, expect extensions.

Primary content

The generic catchall content type. As shared standards are developed over time, we hope to fork different content types from this one (i.e. news releases as a standalone type).

If you're interested in the Content Store project and want to learn more, write us.

Last week, I shared with you the strategy for the new home site redesign. With eight weeks to launch, I thought it might be intriguing to delve a little deeper into each of the objectives.

Objective
Delivering a customized experience by allowing individuals to self-select an " audience view." While a common option for many corporate websites, the University of Minnesota will be a leader in the field of higher education by meeting the growing expectations of website visitors to identify the type of information they want to see.

Tactic
The new University of Minnesota home page allows visitors to self-select a "view" which delivers customized information to that particular audience (or also referred to as persona).

Every view contains unique stories as well as supplemental central navigation crafted specifically for each group. In addition, views display commonly- accessed links and topics of interest tailored per persona.

Functionality
When visiting umn.edu for the first time, a screen appears displaying:
"Welcome to umn.edu. Select the view that best fits your needs. You will see the University's top stories plus content created just for you. Personal views can be changed by clicking 'change my view.'"

Also appearing next to the statement will be a selection box for the following groups:
- Current Students
- Donors & Alumni
- Faculty
- Future Students
- Parents
- Sports Fans
- Staff
- No Preference

Visitors are asked to save their preference; so upon return they will immediately see their selected view. Since our research reveals many of the University's website visitors have multiple roles such as parent, staff, donor, etc., it will be very easy to toggle between views.

These persona-based pages are the first step in a long journey of providing a cohesive umn.edu online experience.

Stay tuned for next week's post as the countdown continues.