tag:blogger.com,1999:blog-71791653695984070912023-12-03T15:54:00.909-08:00Future EndeavourA blog recording research and thoughts on the (eventual) redesign of the Chico State home page.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.comBlogger69125tag:blogger.com,1999:blog-7179165369598407091.post-87671188283446260362009-10-12T08:24:00.000-07:002009-10-12T08:24:00.130-07:00HighEdWeb Great Keynote Revolt of 2009 - AnalysisI've decided to do a bit of analysis of the backchannel during the 2nd HighEdWeb Keynote, in order to provide a little better understanding of what went on. <a href="http://www.daveswhiteboard.com/archives/2874">Dave Ferguson</a> has already done a bit of this.<br />
<br />
First of all, in the hour from 11:59 to 12:59 (the keynote ended around 12:51) there were 536 tweets with the #heweb09 hashtag according to <a href="http://wthashtag.com/transcript.php?page_id=5224&start_date=2009-10-06&end_date=2009-10-07&tz=2%3A00&export_type=HTML">What the Hashtag</a>. Of those, I counted 488 (91%) that were related to the keynote or the discussion of the keynote.<br />
<br />
There were, according to my count, 155 retweets, 140 of which were about the keynote.<br />
<br />
<a href="http://www.flickr.com/photos/tony_dunn/3998861936/" title="HighEdWeb 09 2nd Keynote Tweets by Tony Dunn, on Flickr"><img alt="HighEdWeb 09 2nd Keynote Tweets" height="514" src="http://farm3.static.flickr.com/2426/3998861936_9cb8fca8fe_o.jpg" width="737" /></a><br />
<br />
Virtually all tweets after 12:20 were about the keynote, and the peak of tweeting came at 12:43 with 22 tweets.<br />
<br />
<span style="font-size: large;"><b>The "Snark" Factor</b></span><br />
<br />
One thing I wanted to look at was the nature of the tweets during the keynote - were they positive, negative, respectful, disrespectful, etc.<br />
<br />
In looking through the data, I didn't find a single tweet that could clearly be classed as possitive toward the presenter, so I was forced to skip that evaluation.<br />
<br />
Then I went through and assigned a subjective 'snark' score to each tweet, where 1 = factual tweet with no sarcasm or criticism, and 5 = completely sarcastic/critical tweet, bordering on personally disrespectful. Here are a few examples:<br />
<blockquote>1: Galper: "e-mail from a trusted source is the best way to communicate with students" #heweb09<br />
2: How old is this presentation! #heweb09<br />
3: I think it's safe to say David Galper won't be checking Twitter #heweb09<br />
4: We need a drinking game for everytime he says "actually" and "actionable". #heweb09<br />
5:OMG ICQ!!!!!!!!!!!!!!!! #heweb09 i heard its still big in uzbekistan<br />
</blockquote>Acknowledging that the scale is subjective, I assigned a 'snark' value to all 488 keynote related tweets. The chart below shows the average 'snark' score for all tweets during each minute of the keynote. <br />
<br />
<a href="http://www.flickr.com/photos/tony_dunn/3998936016/" title="snark by Tony Dunn, on Flickr"><img alt="snark" height="470" src="http://farm4.static.flickr.com/3494/3998936016_e882cb2f6c_o.jpg" width="710" /></a><br />
<br />
The second chart shows the number of tweets each minute by 'snark' score, where 5 equals the most critical and sarcastic tweets.<br />
<br />
<a href="http://www.flickr.com/photos/tony_dunn/3999590487/" title="snark2 by Tony Dunn, on Flickr"><img alt="snark2" height="423" src="http://farm3.static.flickr.com/2611/3999590487_46e68ee91d_o.jpg" width="710" /></a><br />
<br />
Note how the 'snark' factor rapidly rises after about 12:15, indicating that the speaker got nearly a third of the way through his presentation before the audience turned on him. <br />
<br />
This paints a somewhat different picture than some of the commentators who weren't there indicate. Some have suggested that the Heweb09 audience was out for blood, but this analysis suggests that they actually waited until 15 minutes before turning on the presenter.<br />
<br />
By that point, the audience had already been subjected to two extremely loud and confusing (irrelevant?) videos, a plug for a company no longer in existence, and a lot of talk about outdated technologies. Rereading the tweets, and having been at the keynote, it's possible that what might have finally sent the audience over the edge was a particularly egregious slide that was packed with dense paragraphs of texts. Or it could have just been the aggregate weight of how out of touch this speaker was with his audience and how out of date he was with his materials. <br />
<br />
Regardless, after 12:15, the tweets began to get more and more critical and sarcastic:<br />
<blockquote>12:17 - Best keynote EVER #sarcasm #heweb09<br />
12:17 - Are you serious right now? I feel like an alternate universe. #heweb09<br />
12:19 - David Galper, ur doin gr8, and ima let you finish, but @jmspool had one of the best keynotes ever! #heweb09<br />
12:25 - Would he like the immediate feedback of us all walking out? #heweb09<br />
12:25 - *insert ROLFcopter here* #heweb09<br />
</blockquote>And by 12:28, someone suggested, "Can someone live-Kanye this guy? @fienen? #heweb09", effectively recommending that someone tell the speaker to shut up.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com4tag:blogger.com,1999:blog-7179165369598407091.post-53750620955828668272009-10-09T16:08:00.000-07:002009-10-09T16:13:15.540-07:00Takeaways from the Great Keynote Revolt of 2009By now, the HighEdWeb "Great Keynote Revolt of 2009" has been commented on by a number of writers, including <a href="http://www.daveswhiteboard.com/archives/2858">Dave Ferguson</a> (and <a href="http://www.daveswhiteboard.com/archives/2874">here</a>), <a href="http://dontgetcaught.biz/webdocs/blog/dgcnews.htm">Denise Graveline</a>, <a href="http://www.siliconbeachtraining.co.uk/blog/twitter-heckled-know-your-audience/">Silicon Beach Training</a>, <a href="http://doteduguru.com/id3712-the-great-keynote-meltdown-of-2009.html">Michael Fienen</a>, and several others. I'm not going to go into the keynote directly, even though I was there. If you want background, read these posts or the <a href="http://wthashtag.com/transcript.php?page_id=5224&start_date=2009-10-06&end_date=2009-10-07&tz=2%3A00&export_type=HTML">transcript</a> (beginning at 11:59AM).<br />
<br />
I want to talk about something different. I want to talk about the keynote as a social experience.<br />
<br />
Soon after the keynote began, <a href="http://www.twitter.com/stomer">@stomer</a> commented: <br />
<blockquote>conspiracy theory about the keynote: it's a test of the power of the back channel; social experiment. #<a href="http://wthashtag.com/heweb09" title="More info">heweb09</a><br />
</blockquote>And what a social experiment it was. We were there as an audience, to participate by listening attentively to the presenter. But since the presenter failed to engage us, we turned our attention to the backchannel and began to partcipate with each other. But what we were participating in was not what the speaker was intentionally sharing. <br />
<br />
The strange thing about that keynote was that it was the high point of the conference for everyone who experienced the backchannel. Not only that, it was a shared experience that bonded us together. I think that we all felt closer to each other by sharing that experience, by sharing our reactions with each other during the keynote, and by being able to share our thoughts and feelings with each other afterward.<br />
<br />
It set the tone for the party that happened that night, and I know that we had a higher energy and a closer bond than we would have without that keynote. We all talked about it over and over that night, and it became a shared inside joke that anyone in the conference could refer to and that everyone would immediately understand. <br />
<br />
The bottom line was that this was an intense shared experience that brought all of the attendees closer together, not entirely different from the way that survivors of a shared tragedy are often bonded. <br />
<br />
Regardless of how I may feel for David Galper, I think that for the conference and for the conference attendees, this was an almost universally positive experience. Where before that keynote we were 450 mostly strangers, after it we all had something we had in common that we could connect on. I met and spoke to more new people in the day after that keynote than I had in the two days prior to it. <br />
<br />
In the end, no one will remember my talk on redesigns three years from now, but everyone will remember the "Great Keynote Revolt of 2009". And they will remember it in a very positive way... in the way of how 450 mostly strangers came together in the backchannel to learn that they held common views and feelings and were able to share them with each other. It joined us and humanized us to each other in a way little else could have. In the end, regardless of any of the other presentations, this will probably be remembered as the best HighEdWeb conference ever.<br />
<br />
You may be horrified that we would take that away at the cost of that poor man's ego, but I doubt many people there feel that way. If he was ridiculed, it was because he was in no way prepared to present to this audience.<br />
<br />
The big takeaway of all of this for me is this: to make an event like this a true success, you have to find a way to bond people together in the experience of that event - to make that event a milestone in their lives. David Galper did that better than anyone I have ever met. It's only unfortunate that he did it unintentionally.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com11tag:blogger.com,1999:blog-7179165369598407091.post-50996140685488375892009-05-07T09:58:00.000-07:002009-05-07T10:48:45.115-07:00Voices That Matter Web Design Conference - Part 3<span style="font-size:130%;"><span style="font-weight: bold;">Thursday</span></span><br /><br /><span style="font-weight: bold;">Breakfast with the Authors</span><br />The last day of the conference started off with a breakfast with the authors. I chose to have breakfast with Steve Krug, author of <a href="http://www.amazon.com/dp/0321344758/?tag=googhydr-20&hvadid=2481203455&ref=pd_sl_pb7ngvstp_e"><span style="font-style: italic;">Don't Make Me Think</span></a>. Jared Spool also joined us. Having a one-on-one conversations with minds like this was worth the cost of the entire conference. Seriously. These guys know their stuff.<br /><br />Steve noted that a thousand universities have prototyped every possible design and site organization for us. If we want to see what works, we should do usability testing on their sites. And in fact, that's exactly our plan. :)<br /><br />Jared Spool was pretty adamant in his assertion that all redesigns are a mistake and a failure... not overly helpful considering that we're in the middle of ours. His recommendation is to only do bits and pieces at a time, and effectively that's what we're doing, since we're only tackling our top level pages.<br /><br />He also asserted that people never WANT to search. If your site is properly organized, people will always browse before searching. I don't buy that, personally, but hey, it was a great breakfast anyway.<br /><br /><span style="font-weight: bold;">Keynote: Cooking Up Gourmet User Experiences on a Fast Food Budget - Jared Spool</span><br />Fascinating and entertaining presentation by Jared Spool, partly about Julia Child, the absurdities of the TSA, and the fact that every university web site has photos of smiling girls under trees.<br /><br />Actually, his talk was more about a usability approach using cheap tricks rather than expensive methodologies. His point was that knowing a few good tricks is generally just as good (if not better) than developing an extensive methodology. A plumber uses a wrench as a hammer and gets the job done instead of spending money on a special tool just for that job.<br /><br />Very thought provoking presentation.<br /><br /><span style="font-weight: bold;">Take-aways:</span> Good enough is good enough. "Organizations that are risk adverse produce crap." Learn from others and adapt; there's no need for expensive tools when a few well-honed tricks will do the job.<br /><br /><span style="font-weight: bold;">Learning to Love Tension, Disruption and Chaos - Russ Unger, Carolyn Chandler</span><br />This wasn't really the presentation I was hoping it would be. I was hoping that it would be more about tension, disruption and chaos in the redesign process, but it seemed a bit more scattered. I guess I just didn't connect to this session.<br /><br /><span style="font-weight: bold;">Neuro Web Design: What Makes Them Click? - Susan Weinschenk </span><br />OK, this presentation blew my mind. Susan talked about people react to pages from a neurological perspective. Tons of fascinating information. User testing has shown that no matter how items on a page are organized, users will click the first items more than all others simply because it is first.<br /><br />Stories connect with people more than anything else, because they create empathy, and stories with pictures are even more powerful. For us, that means that we're on the right track with having stories on our main landing pages. Cool.<br /><br />Fear of loss is a powerful motivator, which is why we react to "Only a few left! Order now!" Overall, food, sex and fear are our three biggest neurological motivators. Taking advantage of those is a positive on any site (where appropriate).<br /><br />I got more <span style="font-weight: bold;">new </span>information out of this session than any other.<br /><br /><span style="font-weight: bold;">Take-aways: </span>There is a whole different way to think about - and affect - the user experience based on our innate reactions to things. We react to things at a very primitive and visceral level, and understanding that can be to our advantage in building the user experience.<br /><br />Here's a link to Susan's <a href="http://whatmakesthemclick.blogspot.com/">blog</a>.<br /><br /><span style="font-size:130%;"><span style="font-weight: bold;">Summary</span></span><br /><br />After a slow start, this conference really took off, and I started to see why people were so excited about it. When I left, my brain was full. I had a great time and brought a lot of useful information back to our campus.<br /><br />Though I doubt that I'll be able to go back next year, I'm hooked. This is certainly one of the best web user experience conferences out there, and well worth the price of admission.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com3tag:blogger.com,1999:blog-7179165369598407091.post-39793468464179432972009-05-05T10:11:00.000-07:002009-05-05T11:23:12.701-07:00Voices That Matter Web Design Conference - Part 2Days two and three were full of great presentations. The interesting about this conference was that the sum of all the sessions taken as a whole was much greater than the individual sessions. I went from being disappointed on Tuesday to overwhelmed on Thursday.<br /><br /><span style="font-size:130%;"><span style="font-weight: bold;">Wednesday</span></span><br /><br /><span style="font-weight: bold;">Keynote: The Designful Company: Marty Neumeier </span><br />I'm not a designer, so this session wasn't really directed at me, but this was a fascinating discussion of design as more than graphic design and branding. Design is an entire approach to everything from the way a company is run to the way decisions are made to the end user experience.<br /><br />One Twitter <a href="http://twitter.com/tstarbow/statuses/1650474699">comment</a> was pretty much to the point on this: <span id="msgtxt1650474699" class="msgtxt en">"right now 'design' sounds like magic pixie dust that you can sprinkle on anything to make it better". You could almost substitute "project management" or "planning" for "design" and make the same points.<br /><br />However, the designers I talked to thought this was a highly inspiring session.<br /><br /><span style="font-weight: bold;">Content Strategy, UX and the Real World - Kristina Halvorson</span><br />For me, this was the single best session of the conference. The main reason I loved this session was that it validated all that I'm going through with trying to wrap my head around dealing with the complexities of getting content for our new home page redesign.<br /><br />Getting content for a site isn't as simple as creating a box on a flow chart saying "content comes in here". Content drives information architecture and information architecture drives content. Content is an iterative process, involving all team members and stakeholders.<br /><br />The only way you'll succeed in getting the best content is to plan a content strategy around specific goals that you want to achieve.<br /></span><ul><li>Plan</li><li>Create</li><li>Publish</li><li><span style="font-weight: bold;">Govern</span> (rinse, wash, repeat)<br /></li></ul>She provided some great examples about how less content is more: more focused, more maintainable, more on message.<br /><br />However, she also made the point that taking a content inventory was critical to success. Ugh, that's a hell of a lot of work - mind numbing but necessary.<br /><br /><span style="font-weight: bold;">Take-aways: </span>Content is a process, not a feature. A content strategy will help you avoid the pitfalls of delayed content, scattered, off-message content, etc. We need a clear content strategy statement to help us manage the content for our redesign.<br /><br /><span style="font-weight: bold;">What I Have Learned So Far in the 21st Century - Steve Krug</span><br />Steve Krug is the author of the single best web usability book out there: <a href="http://www.amazon.com/dp/0321344758/?tag=googhydr-20&hvadid=2481203545&ref=pd_sl_pb7ngvstp_e"><span style="font-style: italic;">Don't Make me Think</span></a>. This was a fun presentation. Steve's a great guy. Overall, Steve says that he hasn't really learned a lot about usability in the 12st century that he didn't already know, but there were a few nuggets.<br /><ul><li>If people need to see something, don't be afraid to shout (make it really stand out)</li><li><span id="msgtxt1651692461" class="msgtxt en">Fix the top 3 worst usability problems on a site first, before tackling any 'low hanging fruit' problems</span></li><li><span id="msgtxt1651692461" class="msgtxt en">M</span><span id="msgtxt1651710167" class="msgtxt en">ake the smallest change that fixes the problem - don't redesign a page just to fix one issue</span></li><li> <span id="msgtxt1651957534" class="msgtxt en"><a href="http://usertesting.com/" onclick="pageTracker._trackPageview('/exit/link/1651957534')" rel="nofollow" target="_blank">http://usertesting.com</a>, <a href="http://clicktale.com/" onclick="pageTracker._trackPageview('/exit/link/1651957534')" rel="nofollow" target="_blank">http://clicktale.com</a>, <a href="http://silverback.com/" onclick="pageTracker._trackPageview('/exit/link/1651957534')" rel="nofollow" target="_blank">http://silverback.com</a> are good tools for online user testing</span></li></ul><br /><span style="font-weight: bold;">Beyond Web 2.0 - Jesse James Garrett</span><br />Another heavy hitter, Jess James Garrett, author of <a href="http://www.amazon.com/o/ASIN/0735712026/ref=nosim/jjgnet-20/"><span style="font-style: italic;">The Elements of User Experience</span></a>, takes on Web 2.0. Actually, he pretty much dismisses Web 2.0 and focuses on the user experience instead. "<span id="msgtxt1653977184" class="msgtxt en">The experience is the product." The main focus of his presentation is to continually simplify the user's experience. Examples of MS Word with all the tool bars open and a <a href="http://video.google.com/videoplay?docid=4313772690011721857">video</a> Microsoft made about Microsoft redesigning the iPod packaging (hilarious!)<br /><br /><span style="font-weight: bold;">Take-aways: </span>The user experience cannot be too simple or too easy. Simplify! Simplify!<br /><br /><span style="font-weight: bold;">Stump the Chump - Steve Krug</span><br />Steve Krug took questions from the audience about usability. Unfortunately - or actually fortunately - the first five names he picked were people from Berkeley!<br /><br /><span style="font-weight: bold;">Take-aways:</span> University sites are fundamentally different from other sites. Audience segmentation is normally bad on sites, but appropriate on university sites because people self-identify and there is typically little overlap in roles.<br /><br />Overall, this was a fantastic day. I'll cover the third and final day tomorrow.<br /><span style="font-size:130%;"><span style="font-weight: bold;"><br /></span></span></span>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com1tag:blogger.com,1999:blog-7179165369598407091.post-55107814632400186712009-05-04T11:24:00.000-07:002009-05-04T12:02:52.172-07:00Voices That Matter Web Design Conference - Part 1I know that I have been horribly ignoring this blog in favor of <a href="http://redesignland.blogspot.com/">Tales from Redesignland</a>, but with all the work on the actual redesign, I haven't had the energy to do both.<br /><br />However, last week I went to the <a href="http://www.voicesthatmatter.com/webdesign2009/index.aspx">Voices That Matter Web Design conference</a> in San Francisco, and I thought that I'd file a report. I'll probably be talking about specific sessions in more detail later, but I wanted to give a summary of the sessions that I went to.<br /><br />Voices that Matter is an imprint of New Riders publishers, and all of the presenters were authors, including some big names like Steve Krug, Jesse James Garrett, Jared Spool, etc.<br /><br />Overall, the conference was pretty stunning, and by the end my brain was full.<br /><br />People Filing in:<br /><a href="http://www.flickr.com/photos/52842899@N00/3483655310/" title="Voices that Matter Web Design Conference by Tony Dunn, on Flickr"><img src="http://farm4.static.flickr.com/3407/3483655310_1e1f6da3b0.jpg?v=0" alt="Voices that Matter Web Design Conference" /></a><br /><br /><a href="http://www.flickr.com/photos/bgavin/sets/72157617384136089/">Other photos</a> (not mine) from the conference.<br /><br /><span style="font-weight: bold;font-size:130%;" >Tuesday</span><br /><br /><span style="font-weight: bold;">Keynote: Marketing Obama: Social Media Gets a Seat at the Table - Rahaf Harfoush</span><br />An interesting look inside the Obama campaign, but to me it provided little in the form of take-aways regarding the use of social media.<br /><br /><span style="font-weight: bold;">Sorry. Web 1.0 Is No Longer Supported - Joel Postman</span><br />More a history of web-based social media than anything else, so it was a bit disappointing. Very interesting discussion on flogs, splogs, blogola, astroturfing and other shady practices in the blogosphere. <a href="http://www.shorttask.com/">Shorttask</a> is an very interesting example, where you can get paid 5 cents to post a positive comment on a blog post.<br /><br />Take-aways: People aren't particularly nice on the internetz.<br /> <br /><span style="font-weight: bold;">Free Range Content: Unlock Your Ideas to Increase Your Reach - Aarron Walter</span><br />I was the most disappointed in this session, not because it was a bad presentation (it was actually very good), but because it was nothing new to me. RSS and Flickr... yeah, I've heard of them. I was more interested in content strategies than learning how to reuse existing content.<br /><br />Take-aways: Content can be used more than once in one place.<br /><br /><span style="font-weight: bold;">The Trusted Filter: Designing for Credibility - Jason Cranford Teague</span><br />This presentation was all about how to gain and hold the trust of your site's visitors. For me it seemed a bit fragmented.<br /><br />Take-aways: Not really sure.<br /><br />So, Monday was the weakest day, and I was feeling that (beside the fact that like only two people were Twittering) it was pretty lame at this point. But Wednesday and Thursday were night-and-day better... and they'll follow in part 2.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com2tag:blogger.com,1999:blog-7179165369598407091.post-76338859404149177582008-11-19T12:57:00.000-08:002008-11-19T13:28:43.117-08:00Home Page Elements - Installment 3Every year I take a look at a number of newly designed university home pages and break down their component elements. Last year's analysis is in <a href="http://futureendeavour.blogspot.com/2007/12/analyzing-future-part-3-home-page.html">this post</a>.<br /><br />This year, I took 15 university or college home pages that had been redesigned within the past year (as posted on <a href="http://edustyle.net">eduStyle.net</a>) and had received more positive than negative votes.<br /><br /><span style="font-weight: bold;font-size:130%;" >Most Common Page Elements<br /></span><br />The most notable changes here are the continued climb of events/calendars, and the decline of top banners.<br /><br /><table str="" style="border-collapse: collapse; width: 378pt;" border="0" cellpadding="0" cellspacing="0" width="502"><tbody><tr style="height: 12.75pt;" height="17"><td class="xl23" style="height: 12.75pt; width: 120pt; text-align: left; font-weight: bold;" height="17" width="160">Element</td> <td class="xl24" style="width: 86pt; text-align: right; font-weight: bold;" width="114">Sites 2006</td> <td class="xl24" style="width: 86pt; text-align: right; font-weight: bold;" width="114">Sites 2007</td> <td class="xl24" style="width: 86pt; text-align: right; font-weight: bold;" width="114">Sites 2008</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">Photos</td> <td class="xl25" style="width: 86pt; text-align: right;" num="1" width="114">100%</td> <td class="xl25" style="width: 86pt; text-align: right;" num="1" width="114">100%</td> <td class="xl27" num="1" align="right">100%</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">Primary Navigation</td> <td class="xl25" style="width: 86pt; text-align: right;" num="1" width="114">100%</td> <td class="xl25" style="width: 86pt; text-align: right;" num="1" width="114">100%</td> <td class="xl27" num="1" align="right">100%</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">Search Box</td> <td class="xl25" style="width: 86pt; text-align: right;" num="1" width="114">100%</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.94" width="114">94%</td> <td class="xl27" num="1" align="right">100%</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">News</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.85" width="114">85%</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.83" width="114">83%</td> <td class="xl27" num="0.93333333333333335" align="right">93%</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">Events</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.3" width="114">30%</td> <td class="xl26" style="width: 86pt; text-align: right;" num="0.67" width="114">67%</td> <td style="color: rgb(51, 204, 0);" class="xl30" num="0.8666666666666667" align="right">87%</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">Secondary Navigation</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.7" width="114">70%</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.78" width="114">78%</td> <td class="xl27" num="0.73333333333333328" align="right">73%</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">Feature/Spotlight</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.55" width="114">55%</td> <td class="xl28" style="width: 86pt; text-align: right;" num="0.78" width="114">78%</td> <td class="xl27" num="0.73333333333333328" align="right">73%</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">Top Banner</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.9" width="114">90%</td> <td class="xl28" style="width: 86pt; text-align: right;" num="0.78" width="114">78%</td> <td style="color: rgb(255, 0, 0);" class="xl29" num="0.6" align="right">60%</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl22" style="height: 12.75pt; width: 120pt;" height="17" width="160">Quick Links</td> <td class="xl25" style="width: 86pt; text-align: right;" num="0.45" width="114">45%</td> <td class="xl28" style="width: 86pt; text-align: right;" num="0.22" width="114">22%</td> <td class="xl27" num="0.33333333333333331" align="right">33%</td> </tr> </tbody></table><br /><br /><span style="font-weight: bold;font-size:130%;" >Page Element Placement</span><br /><br />Once again, no huge changes. Some of the overlays look a bit different since I was using a bigger monitor this year to capture the screenshots. Other than that, a few trends, but no major shifts.<br /><ul><li>Logos and brands continue to congregate more toward the upper lefthand corner</li><li>Primary navigation is pretty consistently below the brand, either vertically or horizontally</li><li>News is trending a bit more toward the center, and events a bit more further to the right</li></ul>2006 is on the left, 2007 in the middle, and 2008 on the right.<br /><br /><span style="font-weight: bold;">Top Banner<br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzHgOfI5ZKNAKENEU_Lk_PhWddzP3xPK07IJgVkPXGMllOVppbMCdZo5X7Ywpz7h-TFmGylpmUe0pv3LM76DXy3Qf5x8y9gH_sLT8LCd4HvQXH87Y1Rp93Tcc4-VoTrV9oPsFqP0qXKmc/s1600-h/Top_Banner.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzHgOfI5ZKNAKENEU_Lk_PhWddzP3xPK07IJgVkPXGMllOVppbMCdZo5X7Ywpz7h-TFmGylpmUe0pv3LM76DXy3Qf5x8y9gH_sLT8LCd4HvQXH87Y1Rp93Tcc4-VoTrV9oPsFqP0qXKmc/s400/Top_Banner.jpg" alt="" id="BLOGGER_PHOTO_ID_5270477783194256226" border="0" /></a><span style="font-weight: bold;">Identity/Logo</span> <span style="font-weight: bold;"><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6GPV-cjYJpNGh-uYWUGHGmFWfRKU421Pg_G7p0pusvY0Kose8Flx_QU1jZLYiASNktk8bFB3KmXb9Eazo4iSPo0JwLREvTs31Ws2dYqfMZI93qz9CPxkwGwA12QcPheYkHnntCRGq0OA/s1600-h/Branding.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6GPV-cjYJpNGh-uYWUGHGmFWfRKU421Pg_G7p0pusvY0Kose8Flx_QU1jZLYiASNktk8bFB3KmXb9Eazo4iSPo0JwLREvTs31Ws2dYqfMZI93qz9CPxkwGwA12QcPheYkHnntCRGq0OA/s400/Branding.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478460343615570" border="0" /></a><br /><span style="font-weight: bold;">Search Box</span> <span style="font-weight: bold;"><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8FWVMJ_SS9U1FY_26I3_rx6Ck40HOWnKVj2xTeUnbbqf1LDknAgT4pHiIos9Qx5esYJEgUH-I3K4_erfXmgQ4cmyV5pdOlgNX0XxmvJm6QrY8CO-5EAe-q2DH4ZifC8VuxN8E4iefY2o/s1600-h/searchbox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8FWVMJ_SS9U1FY_26I3_rx6Ck40HOWnKVj2xTeUnbbqf1LDknAgT4pHiIos9Qx5esYJEgUH-I3K4_erfXmgQ4cmyV5pdOlgNX0XxmvJm6QrY8CO-5EAe-q2DH4ZifC8VuxN8E4iefY2o/s400/searchbox.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478972658808594" border="0" /></a><br /><span style="font-weight: bold;">Primary Navigation</span> <span style="font-weight: bold;"><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXsiwIrX9bvm4JSz3kp6yiwnhTplZg5rXXHsYCZj9Yi07HRfkgGzzjEXEWBn5O2RiI5FuxbcLseD8kh_jC19zAZ7LzcMIEKBW4RLylP6f4XGU_bPKSluJXajL0YxWyecPWYvARUGBu4E/s1600-h/PrimaryNav.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXsiwIrX9bvm4JSz3kp6yiwnhTplZg5rXXHsYCZj9Yi07HRfkgGzzjEXEWBn5O2RiI5FuxbcLseD8kh_jC19zAZ7LzcMIEKBW4RLylP6f4XGU_bPKSluJXajL0YxWyecPWYvARUGBu4E/s400/PrimaryNav.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478967574630898" border="0" /></a><br /><span style="font-weight: bold;">Secondary Navigation</span> <span style="font-weight: bold;"><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS8tBJvp_-GzZBzEq2MIJ3NSv01Ly2ZNusLmYMkQNGXTYK_qfBaWuLjpT9oGKJmtxukxtb97cbgJR0ucbz7pxAU6em_nCIosXrp9B5mdzuASU-sNhgpWaVx3hnB9gwyV_i7yGKtmOKlVQ/s1600-h/SecondaryNav.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS8tBJvp_-GzZBzEq2MIJ3NSv01Ly2ZNusLmYMkQNGXTYK_qfBaWuLjpT9oGKJmtxukxtb97cbgJR0ucbz7pxAU6em_nCIosXrp9B5mdzuASU-sNhgpWaVx3hnB9gwyV_i7yGKtmOKlVQ/s400/SecondaryNav.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478971526763794" border="0" /></a><br /><span style="font-weight: bold;">Main Photo</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC99xn7GRH0XgFIj4mgJqHDpG5QhroXqVw8P6XHewcZNCi7MgolxfzV2YGyM5kMo-MtObtf7h_5jK2RAfUA65c-mvorua1DG20cYrBRUveWk0yLt-pxbYdbS6fS64HFhALqTUvZgOF52I/s1600-h/mainphoto.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC99xn7GRH0XgFIj4mgJqHDpG5QhroXqVw8P6XHewcZNCi7MgolxfzV2YGyM5kMo-MtObtf7h_5jK2RAfUA65c-mvorua1DG20cYrBRUveWk0yLt-pxbYdbS6fS64HFhALqTUvZgOF52I/s400/mainphoto.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478471284662354" border="0" /></a><br /><span style="font-weight: bold;">Other Photos</span> <span style="font-weight: bold;"><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tWWI54IL2wgUPJM_vYZDfW-M9rmNb27n_KeqwAVftQyPwKpmvzKngz-JKGV3w9WTpfEWAk5fSLYDWkfR4ZjhvhXGb1JVnhekuUTJQjZs6ACQzJSZYUROXDcwIumKsHGmdUvql69bMP0/s1600-h/Other_Photos.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tWWI54IL2wgUPJM_vYZDfW-M9rmNb27n_KeqwAVftQyPwKpmvzKngz-JKGV3w9WTpfEWAk5fSLYDWkfR4ZjhvhXGb1JVnhekuUTJQjZs6ACQzJSZYUROXDcwIumKsHGmdUvql69bMP0/s400/Other_Photos.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478961467723842" border="0" /></a><br /><span style="font-weight: bold;">Feature Item</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju27QJ-lr_jRFtQUx1POFZxdn4VdD5hgPLvd9JxVmkZJcz6nneAzzhMV2g9ppesLBY8HClmWTVEefUkUwIVLlJbchnMWwMsJ6_n_wnlFjINryW9uCwAanWCXFT_FLSbQiSe_mN4GrdVVs/s1600-h/Feature.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju27QJ-lr_jRFtQUx1POFZxdn4VdD5hgPLvd9JxVmkZJcz6nneAzzhMV2g9ppesLBY8HClmWTVEefUkUwIVLlJbchnMWwMsJ6_n_wnlFjINryW9uCwAanWCXFT_FLSbQiSe_mN4GrdVVs/s400/Feature.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478466802011026" border="0" /></a><br /><span style="font-weight: bold;">News</span> <span style="font-weight: bold;"><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_-3xKoKgs4Czrt9A-O3vW0UW-PjfI1WtK0V9PY22C-NyAy7AkNIIrQ9xIWXqQ-743-mS4u8bQD52pMoZnDqWp8CPTVRwpQYxpeNrZe6s4X7JzkR9Us-uY-1gu06B8HO1bGCBsz2ogZk/s1600-h/News.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_-3xKoKgs4Czrt9A-O3vW0UW-PjfI1WtK0V9PY22C-NyAy7AkNIIrQ9xIWXqQ-743-mS4u8bQD52pMoZnDqWp8CPTVRwpQYxpeNrZe6s4X7JzkR9Us-uY-1gu06B8HO1bGCBsz2ogZk/s400/News.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478471507122114" border="0" /></a><br /><span style="font-weight: bold;">Events/Calendar</span> <span style="font-weight: bold;"><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFY0xwVVttiBobNerOfQIpY2udef1yYzzhzYp_Zpiwa3phtU45QA8J7Lr7TW7D7mw6-lDyDwyV-PW73G-co_RWuwWHhdNFL2Q6H3r0yLfjgvxZzPvwv-ALYh36d7LmQ27fluafXhdrHP8/s1600-h/Events.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFY0xwVVttiBobNerOfQIpY2udef1yYzzhzYp_Zpiwa3phtU45QA8J7Lr7TW7D7mw6-lDyDwyV-PW73G-co_RWuwWHhdNFL2Q6H3r0yLfjgvxZzPvwv-ALYh36d7LmQ27fluafXhdrHP8/s400/Events.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478464408112098" border="0" /></a><br /><span style="font-weight: bold;">Quick Links<br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUGBZXvlkuX3DdAHlClwrescfLgEE9ksL7h6OXwO2a-RMByqfSLyEWHyCwTWHKxYUGwLdZPmg1MJvxdMm5nyGiZAC9dx9m98RxeGnfmUdfFiVe_zalijASxgi1LyfM64N8gEzB0wJ-70/s1600-h/QuickLinks.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUGBZXvlkuX3DdAHlClwrescfLgEE9ksL7h6OXwO2a-RMByqfSLyEWHyCwTWHKxYUGwLdZPmg1MJvxdMm5nyGiZAC9dx9m98RxeGnfmUdfFiVe_zalijASxgi1LyfM64N8gEzB0wJ-70/s400/QuickLinks.jpg" alt="" id="BLOGGER_PHOTO_ID_5270478970214976178" border="0" /></a>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com4tag:blogger.com,1999:blog-7179165369598407091.post-70557538703914505032008-07-25T11:24:00.000-07:002008-07-25T11:26:52.682-07:00Twitter, Twitter, where art thou Twitter?This is in response to <a href="http://doteduguru.com/id294-eduweb-2008-reflections-i.html">this post</a> by Kyle James.<br /><br />I love Twitter and use it and follow a bunch people, but I'm not sure what to make of Twitter in the sense of how "important" it is.<br /><br />Is it the next email? (by which I mean life/work transforming killer app, not something that has been horribly abused by spammers) Doubtful. Email, for those of us that remember when email became part of our lives, really changed the way we worked and kept in touch with people we knew.<br /><br />Twitter is not that revolutionary, though it has allowed be to befriend and converse with people I've never met and know little about (other than what I've picked up via Twitter).<br /><br />Ten years from now, what will we be saying about Twitter? I think that's one way to think about the potential importance of Twitter.<br /><br />Email is so useful, that despite it's flaws, it will still be here in ten years. Twitter? I doubt it, particularly if it can't address it's stability and downtime issues. Something better will come along and replace it.<br /><br />Will Twitter ever reach the critical mass that email has? Doubtful again. How many people can you follow in Twitter before so much scrolls by that you never see? If more and more people use it, the streaming nature of Twitter will work against it.<br /><br />Email lets you deal with it at your own pace. Emails don't go anywhere. Technically, neither do tweets, but the nature of tweets is in the now. Two day old tweets are... not interesting. Two day old emails may be interesting, depending on what they are.<br /><br />What, fundamentally, is the purpose of Twitter? You tell me:<br /><ol><li>Vital communication tool</li><li>Way to keep in touch with friends</li><li>Way to feel connected to a virtual community</li><li>Instant vanity publishing</li><li>Strange combination of communication and instant gratification</li><li>Way to waste time by watching other people's lives</li><li>All of the above</li></ol>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com5tag:blogger.com,1999:blog-7179165369598407091.post-16047177365694528102008-06-26T07:43:00.000-07:002008-06-26T10:05:01.174-07:00The Good, the Bad and the Ugly, Part 1 - Humboldt State University<span style="font-style: italic;">Part 1 in series analyzing the good and bad things about a variety of university home pages.</span><br /><br />As I've mentioned before, we at CSU, Chico are just beginning the process of 'redeveloping' our top level pages (I hate the word 'redesign' because it doesn't convey the entire scope of the process - which encompasses a lot more than a new graphic design).<br /><br />As part of that process, it's vital to understand what works and what doesn't on other university Web sites.<br /><br />I'm starting with <a href="http://humboldt.edu/">Humboldt State's Web site</a> because it does so many things so well.<br /><br /><span style="font-weight: bold;font-size:130%;" >Consistency</span><br /><br />Consistency is a big issue with any university Web site, due in large part to the inherent autonomy that university's grant their colleges and departments. At many schools, each department has complete control over the design and organization of their site, and they may even maintain their own Web servers. Lacking central control and branding authority, university sites tend to devolve into a mishmash of designs.<br /><br />Humboldt State's site is no different, but they've managed to at least create a top tier of pages that present a basic design and organizational consistency.Even though the main navigation moves around a bit, all pages have a similar simple layout and design that clearly communicates that you are on the Humboldt site.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjY6jUDoYFonX9zW-CwhUIexywwh3zGgcHzHxi_hGyZ711XY4wPBAmHhxZKaHwrEmVQBRWwrYy28n23-btjIUzeAWZg7SwA1eFZeXIF6tQLtW2NLZpvjPBRN2QzUOZg2FgELr71nEEBUc/s1600-h/consistency.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjY6jUDoYFonX9zW-CwhUIexywwh3zGgcHzHxi_hGyZ711XY4wPBAmHhxZKaHwrEmVQBRWwrYy28n23-btjIUzeAWZg7SwA1eFZeXIF6tQLtW2NLZpvjPBRN2QzUOZg2FgELr71nEEBUc/s400/consistency.jpg" alt="" id="BLOGGER_PHOTO_ID_5216237287223325378" border="0" /></a><br /><span style="font-size:130%;"> <span style="font-weight: bold;">Navigational Grouping</span></span><br /><br />The worst kind of navigation is the kitchen sink kind, where everything is just randomly dropped into a long list, with no grouping of similar items or any thought to organization.<br /><br />Humboldt has clearly thought out their navigation with the goal of keeping it simple and clean, without overwhelming users with too many choices.<br /><br />There are four navigational regions on home page:<br /><ol><li style="font-weight: bold;">Alphabetical Index</li><li style="font-weight: bold;">"Main" navigation</li><ol><li>Admissions</li><li>Majors & Programs</li><li>About Humboldt</li><li>Living Here</li><li>Athletics</li></ol><li style="font-weight: bold;">Audience-oriented navigation</li><ol><li>Future Students</li><li>Current Students</li><li>Parents & Families</li><li>Faculty & Staff</li><li>Alumni & Friends</li></ol><li style="font-weight: bold;">"Recruiting" navigation</li><ol><li>Explore</li><li>Inquire</li><li>Visit</li><li>Apply<br /></li></ol></ol>Each navigational area is clearly defined by its position on the page, the white space around it and even by using different fonts and font sizes for each region.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7j0N-UDooNRVO-Qo5QryPwumomO6aNPo0ZA3ObZu_scbFvQ-Dsk7gq_5wcYaL4fX4o9PYYj8gaEJZSTo16ML-rG-z2zaKk7ma1JbKl7jTcCntrtq9vMt2gh6ZMuI4CMseeQUjAoLaRI/s1600-h/nav.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7j0N-UDooNRVO-Qo5QryPwumomO6aNPo0ZA3ObZu_scbFvQ-Dsk7gq_5wcYaL4fX4o9PYYj8gaEJZSTo16ML-rG-z2zaKk7ma1JbKl7jTcCntrtq9vMt2gh6ZMuI4CMseeQUjAoLaRI/s400/nav.jpg" alt="" id="BLOGGER_PHOTO_ID_5216229012254407682" border="0" /></a><br /><span style="font-size:130%;"><span style="font-weight: bold;">Messaging</span></span><br /><br />One of the things I think that Humboldt's home page does best is communicate a clear message to users, particularly prospective students. This is done through the photos and stories on the home page.<br /><br />As I've discussed in previous posts (<a href="http://futureendeavour.blogspot.com/2007/01/perfect-home-page-photos-part-1.html">here</a> and <a href="http://futureendeavour.blogspot.com/2007/01/perfect-home-page-photos-part-2.html">here</a>), home page photos should communicate something specific that is different or special about your school, and ideally, they should have a context (like a story). Humboldt's site excels at this.<br /><br />You can see all of their home page photos and stories on <a href="http://www.humboldt.edu/%7Ehumboldt/stories/">this page</a>. Of the 14 photo/stories:<br /><ul><li>4 relate to outdoor activities</li><li>3 relate to environmental issues</li><li>3 relate to social activism</li><li>2 relate to art<br /></li></ul>Those are clearly the main selling points of Humboldt State and it's region, and the message is clear: if you're interested in the environment, outdoor activities, social activism or art, Humboldt is the place for you.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3PAC7KO8sRPnsM_jqOI3agsQNwl_fGQGyuQ9_in_MbqISQZstb_B8DtJ8102uWedvjy_OmZuy1seUa7VJ2Z1od3UPvRNn_3Uqvr4IEC2zJnzM-GoYXfZdURju4cgQWntwrskHE1eg_kw/s1600-h/photo1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3PAC7KO8sRPnsM_jqOI3agsQNwl_fGQGyuQ9_in_MbqISQZstb_B8DtJ8102uWedvjy_OmZuy1seUa7VJ2Z1od3UPvRNn_3Uqvr4IEC2zJnzM-GoYXfZdURju4cgQWntwrskHE1eg_kw/s400/photo1.jpg" alt="" id="BLOGGER_PHOTO_ID_5216212951213291810" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3CGCnmI2nRMJOZL8zpBV-Ci3XlWVBPh3RuqWZeLn5D1sIdRJPKNKO9QHP93iiD3AF3w2Il3HMwS0V5YqiKAixr2sExjMyDhDCXps4BKUiAEjOvrZvSIJO_gCwr1RdnGh-KdEilnT4SIE/s1600-h/photo2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3CGCnmI2nRMJOZL8zpBV-Ci3XlWVBPh3RuqWZeLn5D1sIdRJPKNKO9QHP93iiD3AF3w2Il3HMwS0V5YqiKAixr2sExjMyDhDCXps4BKUiAEjOvrZvSIJO_gCwr1RdnGh-KdEilnT4SIE/s400/photo2.jpg" alt="" id="BLOGGER_PHOTO_ID_5216212953325561122" border="0" /></a><br /><span style="font-size:130%;"><span style="font-weight: bold;">Audience Prioritization</span></span><br /><br />40% of the entire home page is dedicated to the photos and the links designed to grab the attention of prospective students. If you include the main navigation (which is aimed primarily at prospective students) and the News and Events sections (which might be of interest to prospective students), 64% of the home page is directed toward prospective students.<br /><br />Is this good or bad? I guess it depends on how you define the goals of your home page, but recruiting new students has to be one of your top priorities.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCVv1FSOZ3RgPJY9IzYDxCNCx0lm_MdxURN3Dd2DoeRNfeElgZsK06KUeTcFA5NiW2NKolfEMTJycEzmLZbmpqJSY-j5FCNzgg_iL6XGYmLkZwXuBFdGXbKlPLqQH4tHacJPJ-HtcQmE/s1600-h/pros.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCVv1FSOZ3RgPJY9IzYDxCNCx0lm_MdxURN3Dd2DoeRNfeElgZsK06KUeTcFA5NiW2NKolfEMTJycEzmLZbmpqJSY-j5FCNzgg_iL6XGYmLkZwXuBFdGXbKlPLqQH4tHacJPJ-HtcQmE/s400/pros.jpg" alt="" id="BLOGGER_PHOTO_ID_5216224998678011682" border="0" /></a><br /><span style="font-size:130%;"><span style="font-weight: bold;">Dedicated Temporary Content Region</span><br /></span><br />One issue CSU, Chico's site has is dealing with temporary content or links that need some prominence. Though we have a space for announcements, we don't have a place to highlight special news or events. Humboldt dealt with this issue by dedicating the lower right-hand corner of the home page to eye-catching graphical announcements that change periodically.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYhQsbw_5MJJcAg8-2G8noX2s3h3LGT6bw1xp5YzdHHBz3R6rtgkK8vFiBJYOlOt1_N9plV3n4iAltcWgz8dgmf6fEoiVurDFyBqHiOy-hMfERgm9VszC_zev4B08JRwq2m8PRBhTUm84/s1600-h/changearea.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYhQsbw_5MJJcAg8-2G8noX2s3h3LGT6bw1xp5YzdHHBz3R6rtgkK8vFiBJYOlOt1_N9plV3n4iAltcWgz8dgmf6fEoiVurDFyBqHiOy-hMfERgm9VszC_zev4B08JRwq2m8PRBhTUm84/s400/changearea.jpg" alt="" id="BLOGGER_PHOTO_ID_5216236413911620786" border="0" /></a><br /><span style="font-size:130%;"><span style="font-weight: bold;">The Bad and the Ugly</span></span><br /><br />I don't have a lot of complaints about the Humboldt site. Most of my criticisms are minor nit picks like moving the navigation on interior pages, occasional pages with excessive chattery text (<a href="http://www.humboldt.edu/%7Ehumboldt/programs">example</a>), moving the search box to the bottom of interior pages, etc.<br /><span style="font-size:130%;"><br /><span style="font-weight: bold;">Final Score</span></span><br /><br />I love handing out grades. I makes me feel like I know what I'm talking about.<br /><br />1-10 scale<br /><br /><table str="" style="border-collapse: collapse; width: 108pt;" border="0" cellpadding="0" cellspacing="0" width="144"><col style="width: 60pt;" width="80"> <col style="width: 48pt;" width="64"> <tbody><tr style="height: 12.75pt;" height="17"> <td style="height: 12.75pt; width: 60pt;" height="17" width="80">Design</td> <td style="width: 48pt;" num="" align="right" width="64">9</td> </tr> <tr style="height: 12.75pt;" height="17"> <td style="height: 12.75pt;" height="17">Usability</td> <td num="" align="right">9</td> </tr> <tr style="height: 12.75pt;" height="17"> <td style="height: 12.75pt;" height="17">Branding</td> <td num="" align="right">8</td> </tr> <tr style="height: 12.75pt;" height="17"> <td style="height: 12.75pt;" height="17">Messaging</td> <td num="" align="right">9</td> </tr> <tr style="height: 12.75pt;" height="17"> <td style="height: 12.75pt;" height="17">Organization</td> <td num="" align="right">8</td> </tr> <tr style="height: 12.75pt;" height="17"> <td style="height: 12.75pt;" height="17">Navigation</td> <td num="" align="right">9</td> </tr> <tr style="height: 12.75pt;" height="17"> <td style="height: 12.75pt; font-weight: bold;" height="17">TOTAL</td> <td style="font-weight: bold;" num="" fmla="=SUM(B1:B6)" align="right">52</td> </tr> </tbody></table>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com5tag:blogger.com,1999:blog-7179165369598407091.post-37607307543482119522008-05-01T09:50:00.000-07:002008-05-01T10:41:39.892-07:00Lou Rosenfeld on the Redesign ProcessGreat presentation by Lou Rosenfeld (of O'Reilly's <a href="http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1209660731&sr=8-1"><span style="font-style: italic;">Information Architecture</span></a> fame) on the university Web site Redesign process, titled "Redesign Must Die".<br /><br />Just a couple of nuggets:<br /><ul><li>"Every time you redesign, God kills a kitten."</li><li>"Ban the word 'Redesign' at your next meeting."<br /></li></ul>He even uses one of my <a href="http://redesignland.blogspot.com/">Tales from Redesignland</a> cartoons!<br /><br /><a href="http://www.slideshare.net/lrosenfeld/redesign-must-die-381947/">http://www.slideshare.net/lrosenfeld/redesign-must-die-381947/</a>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com1tag:blogger.com,1999:blog-7179165369598407091.post-49903197626095971802008-04-28T10:18:00.001-07:002008-05-01T10:42:02.955-07:00The Redesign Process - Step 0Rumor has it that our university is about to begin the process of redesigning our home page. That's the 'future endeavour' that the title of this blog refers to... and it's about to begin! The first meeting of the new "web content committee" (bad name, I know) is scheduled for this Friday.<br /><br />Praise the Lord! But...<br /><br />But, as we all know, if the process gets off on the wrong foot, it will very difficult to correct things and snatch success out of the jaws of failure.<br /><br />Here's just one example of how we could get off on the wrong foot: <span style="font-style: italic;">"I've never liked the gold stripe on the home page. Whatever we do, we should get rid of that."</span><br /><br />If that's the way things start, success will be very difficult to achieve. Why? Because arguing about design details that are based solely on personal opinions leads nowhere and can accomplish nothing positive.<br /><br />The truth is that "design" (i.e., graphic design) is actually a very small part of the redesign process (no offense to graphic designers).<br /><br />The real work of redesign isn't as simple as blurting out your uneducated opinions on color and layout.<br /><br />The real work of redesign is more about realigning your site to better meet your users' needs and your university's goals, messaging, branding and strategic priorities than it is about flash animations and pretty pictures.<br /><span style="font-weight: bold;font-size:130%;" ><br />Build the House Before you Hang the Drapes</span><br /><br />Think of the Web site redesign process like building a house. You can't hang the drapes before you build the walls, and you can't build the walls until you have a floor plan, and you can't draw a floor plan until you know the needs of the family that will live there.<br /><br />Likewise, you can't choose the design elements before you've built a wireframe of the site, and you can't build a wireframe until you've developed an information architecture for the site, and you can't develop an information architecture until you understand the needs of your users and the goals your organization has for the site.<br /><br />So step one cannot be a discussion of your opinions of the existing site or what you think should be in the new site. It should be all about asking questions. Here's just a few:<br /><ul><li>Who are our users?<br /></li><li>What do they want on the site?<br /></li><li>What do they do on the current site?</li><li>What do they like about the current site?</li><li>What do they hate?</li><li>What problems do they have with the current site?</li><li>What/who are we competing against?</li><li>What are they doing?<br /></li><li>What do our users like about other sites?</li><li>What are our goals for the site?</li><li>What do we want our home page to accomplish and for whom?<br /></li><li>What is our brand and how will that be applied to the site?</li><li>What is the message we want to communicate on our home page?</li><li>Do we even have the proper stakeholders involved in the process?<br /></li></ul>Notice that your opinion doesn't appear in any of these questions. That's because at this phase, it isn't about you (sorry!). It's about beginning the process of aligning your institution's goals to your users' needs.<br /><br />Once you start to ask these questions, you'll realize that you need to gather some actual data and talk to some people in order to get answers to these questions.<br /><br />That will be the topic of my next post.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com4tag:blogger.com,1999:blog-7179165369598407091.post-46867473793553463282008-04-01T16:08:00.001-07:002008-05-01T10:42:20.623-07:00Chico's New Online Photo Catalog - Likes and DislikesIn my other life, I'm a professional photographer, with several Web sites (<a href="http://www.adunnphotography.com/">here</a> and <a href="http://sacramentovalleyphotos.com/">here</a>). So when our department decided to put our internal photo catalog online, I was volunteered (er...recruited) to do the development for it.<br /><br />I have a lot of experience with stock photography sites (since my work is carried by several - <span style="font-style: italic;">excluding </span>royalty free and microstock, may Allah strike them dead in His infinite mercy), so I know what I like and dislike in online photo sites.<br /><br />Now, I didn't shoot any of these photos; that's not my job on campus, but we do have a staff photographer who does official campus photography for everything from faculty portraits to events, receptions, general publications and the University Catalog.<br /><br />The backend of the catalog uses Portfolio 8.5 server. For my personal business, I use iView Media Pro, but Portfolio is pretty similar overall. Both have pros and cons, and I'll refrain from Portfolio bashing.<br /><br />Initially, we had a lot of problems with hardware, permissions and networking, but once we resolved all that, I was able to begin work on the Web front end. We went with the built in NetPublish tool which uses a JavaScript-based API. I've decided that I like it.<br /><br />Even though it's still in serious beta mode with lots of missing pieces and content (particularly payment and policies), you can look at it here: <a href="http://images.csuchico.edu/">http://images.csuchico.edu</a>.<br /><br /><span style="font-weight: bold;font-size:130%;" >What I Like</span><br /><br />It seems a bit weird to review a site that I developed, since mostly I pick at other people's sites. It also seems like tooting my own horn a bit to say, "Look at this site I did! I think it's really cool!!"<br /><br />But I actually do like this site. I just wish I had time to redo my business sites to match.<br /><br />OK, so here's what I like...<br /><br /><span style="font-weight: bold;">Number of Results per Page</span><br />You can change the number of results that you view per page. Though the default is 16, I like to view as many photos as I can on a single page. Oh, and it remembers your preference from search to search, but only for the current session (Portfolio limitation).<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcsr4FyWSTNRsyyoRNiEAe55n2Sz5Zx9MbF46GnDoGpOsYxw5p80aiNrlC04cqa7si1JHVTeUzGOjxR6FG7Y76C-7GoKJrArjMS-GudLB-oqfptnGBzuFx_P6wf__sa8wJ6IMXgKX5gUw/s1600-h/screen1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcsr4FyWSTNRsyyoRNiEAe55n2Sz5Zx9MbF46GnDoGpOsYxw5p80aiNrlC04cqa7si1JHVTeUzGOjxR6FG7Y76C-7GoKJrArjMS-GudLB-oqfptnGBzuFx_P6wf__sa8wJ6IMXgKX5gUw/s400/screen1.jpg" alt="" id="BLOGGER_PHOTO_ID_5163185647344515602" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizm3D47MxtUKjH8hYBCuZRFCDeza1oRKFCizJxiuk-VR2vaLoJSpSVZyWMcyp4ptyACU6IoITkAm9Oix49-2nwyVq7zw36-y9IvRjjmY4uIATNgHtDLQE87r262OC5R3GmyDVAcm_NvNc/s1600-h/screen2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizm3D47MxtUKjH8hYBCuZRFCDeza1oRKFCizJxiuk-VR2vaLoJSpSVZyWMcyp4ptyACU6IoITkAm9Oix49-2nwyVq7zw36-y9IvRjjmY4uIATNgHtDLQE87r262OC5R3GmyDVAcm_NvNc/s400/screen2.jpg" alt="" id="BLOGGER_PHOTO_ID_5163185011689355778" border="0" /></a><span style="font-weight: bold;">Dynamic Page Width</span><br />I hate static width layouts of image thumbnails. I have a 1600 pixel wide monitor at home and two 1280 pixel monitors side-by-side at work, so why can't I use all that space to look at thumbnails? With this site you can. I just organized the thumbnails in divs so that they automatically wrap to match your browser window's width. Cool!<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9VrdlWs9kzBWt8MCCcZe9K3eJGi4Tb3EWtkmemgEMPR1w3_EwrrcEvV6rUBZUjrGHKUmvfH7B58H4dJ8i190nqZaEQ6IOG49UyRRLFyloqZHGqUOxPNltBEZTDEEWj3ChPXui9Ya-ns/s1600-h/window_narrow.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9VrdlWs9kzBWt8MCCcZe9K3eJGi4Tb3EWtkmemgEMPR1w3_EwrrcEvV6rUBZUjrGHKUmvfH7B58H4dJ8i190nqZaEQ6IOG49UyRRLFyloqZHGqUOxPNltBEZTDEEWj3ChPXui9Ya-ns/s400/window_narrow.jpg" alt="" id="BLOGGER_PHOTO_ID_5163188202850056738" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicv07YnOuRxeR3XUibjsNgRHjWzuBWDH0jhUvQjN6ryTdqRp7jzItyOf6Xi7z_knZSvPo24bPWXBnvVkBC7dCySEO3zI2u74PA0cD1rbZDvNBdOHCmAOIrPx0ddLPmsdfZZGO-qNfBZOU/s1600-h/window_wide.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicv07YnOuRxeR3XUibjsNgRHjWzuBWDH0jhUvQjN6ryTdqRp7jzItyOf6Xi7z_knZSvPo24bPWXBnvVkBC7dCySEO3zI2u74PA0cD1rbZDvNBdOHCmAOIrPx0ddLPmsdfZZGO-qNfBZOU/s400/window_wide.jpg" alt="" id="BLOGGER_PHOTO_ID_5163188409008486978" border="0" /></a><br /><span style="font-weight: bold;">Pop Up Image Previews</span><br />We used <a href="http://www.bosrup.com/web/overlib/">OverLib</a> to pop up image previews when you roll over each thumbnail. An awesome way to quickly browse through photos. I used the Portfolio NetPublish API to add some pertinent info to the pop up. No more having to go to a separate page to see larger versions of each photo. Super cool!!<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzVvlRLFwLQM6inXh0bNUGLbH0-0-bvpKotVPPbd6KTq5HqCUP5d2tVmCjOfA6hg-P3B98B640OLOVKKVILBOrx984cHAjWT1EqC6RVkQoIi9XvKztufIJV7QWC182XYmkYGUrptfi9Nk/s1600-h/kendall.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzVvlRLFwLQM6inXh0bNUGLbH0-0-bvpKotVPPbd6KTq5HqCUP5d2tVmCjOfA6hg-P3B98B640OLOVKKVILBOrx984cHAjWT1EqC6RVkQoIi9XvKztufIJV7QWC182XYmkYGUrptfi9Nk/s400/kendall.jpg" alt="" id="BLOGGER_PHOTO_ID_5168863045661268114" border="0" /></a><span style="font-weight: bold;">Popup Image Information<br /></span><span>Our graphic designer was particularly worried that people will want images that aren't big enough to be reproduced well at the size they want in the medium they want. We went around a bit on the best way to do this. I ended up adding an OverLib popup that calculates the dimensions that each photo can be used at different resolutions. It's simple and clear, but doesn't take up space on the page.<br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0XErNQQ9vAqTav1HNy-zr4dAIM1dkpZjEt2XW_PZYxv1gs9W0rxE8WlM62POuHneUmQdjaIpXwbKtb_CanV8FFVX8XjXu1LbjNafZZDr3x8aAMI-JlDM_EvCtOeCI0rPHB1mwU-UrQ3g/s1600-h/iamgesize.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0XErNQQ9vAqTav1HNy-zr4dAIM1dkpZjEt2XW_PZYxv1gs9W0rxE8WlM62POuHneUmQdjaIpXwbKtb_CanV8FFVX8XjXu1LbjNafZZDr3x8aAMI-JlDM_EvCtOeCI0rPHB1mwU-UrQ3g/s400/iamgesize.jpg" alt="" id="BLOGGER_PHOTO_ID_5168862319811795074" border="0" /></a><span><br /></span><span style="font-weight: bold;">Bigger Previews</span><br />If you want to see an image even bigger, and view even more detailed info (such as EXIF data, exposure data, etc., if available) on the image, you can click on it and go to a detail page. Nice to have.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7EtuIDU3km7yy7dd8MUz99xGuJ2HCkaeQOPbOgLUnZynb7wGZxIVO1_iYHu9mdHg4spW1JQCc3bvacEaYucr9gr9Z9NIa0kXKtwzAAiKzc6rRVXeY_MJy67FeHJRKkPawsAlgnhYKdc/s1600-h/details.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7EtuIDU3km7yy7dd8MUz99xGuJ2HCkaeQOPbOgLUnZynb7wGZxIVO1_iYHu9mdHg4spW1JQCc3bvacEaYucr9gr9Z9NIa0kXKtwzAAiKzc6rRVXeY_MJy67FeHJRKkPawsAlgnhYKdc/s400/details.jpg" alt="" id="BLOGGER_PHOTO_ID_5163203102091606642" border="0" /></a><br /><span style="font-weight: bold;">Thumbnail Pop Ups on Check Out Page</span><br />I hate stock sites that don't let you see what you're buying on the check out page. I also hate stock sites that show a huge list of thumbnails on the check out page - it just makes the page too long when you have to scroll and scroll to see your total cost at the bottom. So I used OverLib to make pop up thumbnails.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ro28g4Q5sEQD9daHCznyRjk0Cuk14nXu1yFtjM-AL8yDyeBLFJ0T8KS1j_qQN2DiHnPAjkZgUHdAsGPZZ0A5j__rWFa3srqKEq-1yjXJWBLdkqvUZehJJG5BBIxX0Rp4_KZlQ83SVGQ/s1600-h/checkout.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ro28g4Q5sEQD9daHCznyRjk0Cuk14nXu1yFtjM-AL8yDyeBLFJ0T8KS1j_qQN2DiHnPAjkZgUHdAsGPZZ0A5j__rWFa3srqKEq-1yjXJWBLdkqvUZehJJG5BBIxX0Rp4_KZlQ83SVGQ/s400/checkout.jpg" alt="" id="BLOGGER_PHOTO_ID_5163202221623310946" border="0" /></a><br /><span style="font-weight: bold;font-size:130%;" >Issues</span><br /><br />OK, it isn't perfect. Here's a partial list of what still needs work.<br /><ul><li>We still have problems with vertically-oriented RAW images not being rotated correctly (that's a Portfolio limitation)<br /></li><li>We still have a lot of missing previews (they have to be rebuilt manually)</li><li>The left nav menu is static, so there are a lot of categories listed that currently have no photos in them.</li><li>OverLib does a weird flickering thing sometimes that drives me nuts<br /></li><li>We still have a lot of crappy images cluttering up the catalog</li><li>We need better keywording (we're working on that)<br /></li><li>We're still fine tuning the advanced search (Portfolio's search is limited and not very smart)<br /></li></ul>You might not like that there's no automatic download, but we really can't allow that since there are a lot of photos of staff and faculty that shouldn't be freely available. And anyway, the idea here is to try to bring in a little money from departments on campus for the use of photos that we took.<br /><br />Let me know what you think.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com2tag:blogger.com,1999:blog-7179165369598407091.post-4123754733635960552008-03-27T10:20:00.000-07:002008-03-27T13:23:54.187-07:00Accessible Instructional Multimedia: Live blog from CATS 2008AIMs are online multimedia resources that demo to faculty the use of accessible technologies in teaching.<br /><br />AIMs enable faculty to understand the ways that emerging technologies can be used to support student success.<br /><br />Project supported by <a href="http://enact.sonoma.edu/">EnACT </a>to help faculty and staff to develop accessibility training resources to help faculty learn about incorporating accessibility into their course materials... or at least I think that what's this is about... actually, not all of them are about accessibility, but most are.<br /><br />AIM projects are added to MERLOT repository. Most appear to be videos.<br /><br />Total of 40 projects planned from eight CSUs... 6 from Chico... wOOt!<br /><br />6 completed to date, 13 under development.<br /><br />Next round of projects... applications due in April<br /><br />Topics wanted:<br /><ul><li>Universal design for learning<br /></li><li>Assistive technology</li><li>Distance Learning<br /></li><li>Technologies designed to address particular Instructional challenges</li><li>Case studies on deploying accessible course materials<br /></li><li>Other topics</li></ul>Examples<br /><ul><li><a href="http://www.lecshare.com/">LecShare </a>- accessible PPT</li><li><a href="http://www.cdl.edu/cdl_projects/pachy_home">Pachyderm</a></li></ul>Then it all devolved into one guy asking a bunch of questions...Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com0tag:blogger.com,1999:blog-7179165369598407091.post-25373021906931951032008-03-03T13:08:00.001-08:002008-03-03T14:54:36.422-08:00Pop Up MenusWe had a recent discussion about using pop ups menus on our sites.<br /><br />Should the top level menu items be links to a 'main' page or should they just be text to hover over to show the pop up menu? What about menus with combinations of simple links and pop up sub-menus? If there is a link to a 'main' page, what should be on that page?<br /><br />Sounded like a job for <span style="font-style: italic;">ResearchMan</span><span style="font-style: italic;">!</span><br /><br />Here are my informal results...<br /><h4>General Sites</h4> <p>For the most part, hover menus are not that popular. I looked at about 90 sites (Amazon, eBay, CNN, etc., etc.) and only about 20% used hover menus. That's not to say that they are a bad thing; they just aren't as common as we might think.<br /></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Px3p_uuRcV15wZdjdSpSPVE98wCxf_E-6cPF0tJGx89N1CqnXhY3SYP-QGsO3uVtLegWNHZ5PseLlXXvlLwF4jYkvyP4475Uin2lf5h3vMLMUofx2rrHkbFahNrbz8gsWE2IS9V0zBg/s1600-h/commerical.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Px3p_uuRcV15wZdjdSpSPVE98wCxf_E-6cPF0tJGx89N1CqnXhY3SYP-QGsO3uVtLegWNHZ5PseLlXXvlLwF4jYkvyP4475Uin2lf5h3vMLMUofx2rrHkbFahNrbz8gsWE2IS9V0zBg/s400/commerical.jpg" alt="" id="BLOGGER_PHOTO_ID_5173638477907191042" border="0" /></a></p> <h5><a name="HoverMenus-BestPractices-MenuItemisLinkwithMainPage "></a>Menu Item is Link with Main Page </h5> <p><span class="nobr"><a href="http://www.msnbc.msn.com/" rel="nofollow">MSNBC</a></span> uses hover menus that list major news categories. The first item in the menu is "[Category] Front Page". Clicking on the hover text takes you to the category front page. <span class="nobr"><a href="http://www.time.com/time" rel="nofollow">Time</a></span> uses similar functioning drop down menus. Clicking on the menu item takes you to the main page for the news category. <span class="nobr"><a href="http://www.sciencedaily.com/" rel="nofollow"></a></span></p> <p>A number of other sites follow a similar model, though these do not have the main page listed at the top of the pop up list.</p> <ul><li><span class="nobr"><a href="http://www.sciencedaily.com/" rel="nofollow">Science Daily</a></span></li><li><span class="nobr"><a href="http://www.adobe.com/" rel="nofollow">Adobe</a></span></li><li><span class="nobr"><a href="http://www.nolo.com/" rel="nofollow">Nolo</a></span></li><li><span class="nobr"><a href="http://espn.go.com/" rel="nofollow">ESPN</a></span></li><li><span class="nobr"><a href="http://www.walmart.com/" rel="nofollow">Walmart</a></span></li><li><span class="nobr"><a href="http://www.webaward.org/" rel="nofollow">WebAward</a></span></li><li><span class="nobr"><a href="http://www.epicurious.com/" rel="nofollow">Epicurious</a></span></li><li><span class="nobr"><a href="http://www.monster.com/" rel="nofollow">monster.com</a></span></li><li><span class="nobr"><a href="http://www.target.com/" rel="nofollow">Target</a></span></li><li><span class="nobr"><a href="http://online.wsj.com/public/us" rel="nofollow">The Wall Street Journal</a></span></li><li><span class="nobr"><a href="http://www.careerbuilder.com/" rel="nofollow">Career Builder</a></span></li><li><span class="nobr"><a href="http://www.webmd.com/" rel="nofollow">WebMD</a></span><br /></li></ul> <h5><a name="HoverMenus-BestPractices-MenuItemisLinkwithVisualAid "></a>Menu Item is Link with Visual Aid </h5> <p><span class="nobr"><a href="http://www.geek.com/gadgets" rel="nofollow">Geek.com</a></span> uses a visual aid (an arrow) to indicate which menu items are pop ups. There are actually a couple of sites that do this.</p> <h5><a name="HoverMenus-BestPractices-MenuItemisnotLink "></a>Menu Item is not Link </h5> <p>A few sites use a model where menu items with pop ups are not themselves links, but menu items without pop ups are links. </p> <ul><li><span class="nobr"><a href="http://www.wired.com/wired/" rel="nofollow">Wired</a></span></li><li><span class="nobr"><a href="http://www.weather.com/" rel="nofollow">weather.com</a></span></li><li><span class="nobr"><a href="http://www.rapidshare.com/" rel="nofollow">RapidShare</a></span></li></ul> <h4><a name="HoverMenus-BestPractices-HigherEducation"></a>Higher Education</h4> <p>Pop up menus are about as common on university home pages as they are on commercial sites.</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-tDaCfyytqUjMAcgkilN_sGYCQ1VOA4y19754w-0q9zCB7hL4zkvbal2Lpt88YVdrE-mAdfHZ7-WHDl0_7WODvUTu5rNilXe7hZ8ttkko9ymB55Y_fULbrf0rHHHZD_dGeZJMXA7uZc/s1600-h/university.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-tDaCfyytqUjMAcgkilN_sGYCQ1VOA4y19754w-0q9zCB7hL4zkvbal2Lpt88YVdrE-mAdfHZ7-WHDl0_7WODvUTu5rNilXe7hZ8ttkko9ymB55Y_fULbrf0rHHHZD_dGeZJMXA7uZc/s400/university.jpg" alt="" id="BLOGGER_PHOTO_ID_5173638495087060242" border="0" /></a> </p> <h5><a name="HoverMenus-BestPractices-MenuItemisLinkwithMainPage"></a>Menu Item is Link with Main Page</h5> <p>Of the 40 or so university sites I reviewed, this was the only kind of pop up that I found.</p> <p>The contents of the 'main page' under a link varied, from 'Welcome' pages filled with happy talk, to links to other sites, to pages of links that essentially repeated the contents of the submenus. On some sites, all of these were present on different links. Some sites included single links as well as pop ups in the same menu, without distinguishing between them (e.g., <span class="nobr"><a href="http://www.fsu.edu/" rel="nofollow">FSU</a></span> and <span class="nobr"><a href="http://www.syr.edu/" rel="nofollow">Syracuse</a></span>).</p> <ul><li><span class="nobr"><a href="http://www.strayer.edu/" rel="nofollow">Strayer University</a></span></li><li><span class="nobr"><a href="http://yale.edu/" rel="nofollow">Yale</a></span></li><li><span class="nobr"><a href="http://stanford.edu/" rel="nofollow">Stanford</a></span></li><li><span class="nobr"><a href="http://www.umich.edu/" rel="nofollow">University of Michigan</a></span></li><li><span class="nobr"><a href="http://www.utexas.edu/" rel="nofollow">University of Texas at Austin</a></span></li><li><span class="nobr"><a href="http://www.nyu.edu/" rel="nofollow">New York University</a></span></li><li><span class="nobr"><a href="http://www.fsu.edu/" rel="nofollow">Florida State University</a></span></li><li><span class="nobr"><a href="http://www.syr.edu/" rel="nofollow">Syracuse University</a></span></li></ul><h4>Recommendations<br /></h4>It seems pretty clear that the clear majority of sites make the top level menu items links to some sort of main page. I think it almost approaches a 'standard' practice. I do like the idea of visually distinguishing between simple links and links that have pop up sub-menus.<br /><br />The destination of the top level link varies. With news sites, it typically goes to something like the "US News" or "Sports" front page. With shopping sites, it might be to the "Electronics" main page.<br /><br />For university sites, it's a bit less clear, and the destination of the link should probably be determined on a case-by-case basis. Ideally, it would link to a page with relevant information, but there are cases where there might not be much information to put under the main category (this might be particularly true with smaller departmental sites).<br /><br />So, it might end up linking to a page that just repeats the list of items in the sub-menus. This is sub-optimal, however, and every effort should be made to make the 'main' page contentful (new word!) and relevant. One thing is clear, though... as Steve Krug says in <a href="http://www.sensible.com/"><span style="font-style: italic;">Don't Make me Think</span></a>, "happy talk must die"! No one reads "Welcome" pages or "Message from the Dean" pages. eliminate them! A list of links is more useful.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com1tag:blogger.com,1999:blog-7179165369598407091.post-55549978863197248932008-02-27T15:29:00.001-08:002008-03-03T14:55:24.053-08:00Pimping Your CampusYesterday, I asked our provost how budget cuts would affect recruitment and recruitment strategies (<a href="http://redesignland.blogspot.com/2008/02/i-curse-you-all.html">see this post</a>).<br /><br />As Provosts are wont, she gave a very long and detailed answer that appeared to be mostly in a foreign language. However, I did catch a few key phrases.<br /><br />One thing in particular stuck with me. She said that they've done research that shows that we have much higher conversion rates (is that the term you recruitment folks use?) if they can just get the people to <span style="font-weight: bold;">visit the campus</span>. She said that a lot of people come, see the campus and want to immediately enroll.<br /><br />And it's true. Chico state has a beautiful campus located at the edge of a lively small town downtown area. Chico, our Provost said, is seen as an appealing destination, particularly once people see it.<br /><br />That made me think that that is one the main messages our Web site should be communicating. At every turn, it should be saying, "This is a beautiful place. This is a great place to live."<br /><br />bottom line: we need to pimp our campus (as in more effectively advertise it's beauty and desirability).<br /><br />As you may know, in my other life, I'm a professional <a href="http://www.adunnphotography.com/">photographer</a>, and I enjoy shooting our campus. A while back I was playing with an idea for a small photo book showcasing the campus as a beautiful <span style="font-style: italic;">natural </span>environment through the seasons. I uploaded a mock up to the Web... and pretty much left it there.<br /><br />As it is, I don't think this is much of a tool for promoting our campus, but I do think that it could be turned into something that could be very effective in at least communicating to people that this is a special, beautiful place, and you should come visit.<br /><br />I'd be happy to hear your impressions and thoughts.<br /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" align="absmiddle" height="660" width="960"><br /><br /> <param name="allowScriptAccess" value="sameDomain"><br /> <param name="movie" value="pageflip2.swf"><br /> <param name="quality" value="high"><br /> <param name="bgcolor" value="#333333"><br /> <embed src="http://www.adunnphotography.com/book/fall_spring/pageflip2.swf" quality="high" bgcolor="#333333" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="absmiddle" height="660" width="960"></embed> <br /></object><br /><br />Y'all come visit, y'hear!Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com4tag:blogger.com,1999:blog-7179165369598407091.post-63376303039091573352008-02-14T11:23:00.000-08:002008-03-03T14:54:07.435-08:00Page Titles - Best Practices<span style="font-style: italic;">Title tags are vital from both usability and SEO perspectives. We use the following format for page title tags: <span style="font-weight: bold;">Page Title - Department Name - University Name</span>.</span><br /><br />I just finished writing up these standards for our own Web site and realized that they are practices that all universities could benefit from.<br /><br />Although technically optional, title tags are one of the most vital pieces of information that you can put on your Web pages.<br /><br />Why? There are several reasons: <ol><li>The Title tag is what appears at the top of your browser window, in the title bar and identifies the page users are viewing (see image, below).</li><li>The Title tag is what appears in the tabs in the browser window, and identifies the content of each tab (see image, below).</li><li>The Title tag is what appears in the user's Bookmarks or Favorites when they bookmark your page.</li><li>Search engines like Google place a lot of weight on Title tags when ranking search results.</li></ol><span style="font-weight: bold;">Browser Title Bar:</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANdlSBw9LYIGDx3vXDLFrN6RQYFMCilWynSA8PiRm4eWT0n6RAwjG3Rahk63f8oVbY49xeqyLp9rpgcr-mGqVdWKnVHpbqn6CHgNOI6PJpl4ZarfzPtvkr8UdGn8hgjl-EJWs5n7YGqM/s1600-h/titlebar.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANdlSBw9LYIGDx3vXDLFrN6RQYFMCilWynSA8PiRm4eWT0n6RAwjG3Rahk63f8oVbY49xeqyLp9rpgcr-mGqVdWKnVHpbqn6CHgNOI6PJpl4ZarfzPtvkr8UdGn8hgjl-EJWs5n7YGqM/s400/titlebar.jpg" alt="" id="BLOGGER_PHOTO_ID_5166923769142876066" border="0" /></a><br /><span style="font-weight: bold;">Browser Tabs:</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqO8HIT9dbYaT5_8jEVO7S-CMNDJAXhSYGagmT1TLpdug8QaIdzSk_Zj8ntcEv55Z6HDIOnh53P1sj8wU3p-OVKOA4VZE9p-qDeqQp1YrKaMTvcGSfaUlIrnwpJC3uCf2YLXgf59v0rFA/s1600-h/tabs.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqO8HIT9dbYaT5_8jEVO7S-CMNDJAXhSYGagmT1TLpdug8QaIdzSk_Zj8ntcEv55Z6HDIOnh53P1sj8wU3p-OVKOA4VZE9p-qDeqQp1YrKaMTvcGSfaUlIrnwpJC3uCf2YLXgf59v0rFA/s400/tabs.jpg" alt="" id="BLOGGER_PHOTO_ID_5166923773437843378" border="0" /></a><br />As a result of the importance of the Title tag, we at Chico State have developed a set of best practices to use when assigning Title tags to your page.<br /><span style="font-weight: bold;"><br /><span style="font-size:130%;">Page Title Standards</span></span><br /><br />Use the following format for page title tags: <b>Page Title - Department Name - University Name<br /></b> <p><b>Examples:</b></p> <p> Faculty and Staff - Geography and Planning Department - CSU, Chico<br />Academic Services - Provost and Vice President of Academic Affairs - CSU, Chico<br />Current Students - College of Business - CSU, Chico</p> <p><b>Reasons:</b></p> <p>You want to include your department name and the university's name in all Title tags so that users searching for "<span class="nobr"><a href="http://www.google.com/search?q=geography+faculty+chico" rel="nofollow">geography faculty chico</a></span>" will find your page. If you don't include your department name or the university name, you <b>dramatically reduce the odds</b> that your page will turn up in the search results.</p> <p>Also, the order in which the elements appear is also important. Since browser tabs can only show the beginning of the page title, you want to have the most specific information (the current page's title) first, followed by the department and then the university. Pages titled like "CSU, Chico - Department Name - Page Title" will all appear as "CSU, Chico" in the browser tabs (see images, below).<br /></p><div style="padding: 10px; background-color: rgb(255, 204, 204);"><span style="font-weight: bold;">Wrong: </span><span style="font-style: italic;">University Name - Department Name - Page Title</span><br /><br />All the pages below are different, but you can't tell which is which by the page title, since they all start with "California State University, Chico".<br /><br /><span style="font-style: italic;">Browser Tabs</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9o6xOvMcdu3dTgeBck92DWPKgx15VHnPYjF8BBjBP46uh0jRIOwDn2I5vyEujK3nhuUIUAAgGwJcAchv0quI_NSswHREZlwm6biP0ntxBWo_7Hb3qxkIlT2XJLxp26BCjGZVbVVLVCyE/s1600-h/same.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9o6xOvMcdu3dTgeBck92DWPKgx15VHnPYjF8BBjBP46uh0jRIOwDn2I5vyEujK3nhuUIUAAgGwJcAchv0quI_NSswHREZlwm6biP0ntxBWo_7Hb3qxkIlT2XJLxp26BCjGZVbVVLVCyE/s400/same.jpg" alt="" id="BLOGGER_PHOTO_ID_5166926672540768194" border="0" /></a><span style="font-style: italic;">Favorites</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPy6vZzCS_glueVpaloTwBDEIq695a3tiu5rIBm44t9ucHXqVA436qnoa5rUMnyuL3cmfvCqY7EkXFgPxGX3IHwpINd3WAJ_htIv75dLynCk-6RKInR7PUttVn_Aym64xozGGysL47fbc/s1600-h/same2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPy6vZzCS_glueVpaloTwBDEIq695a3tiu5rIBm44t9ucHXqVA436qnoa5rUMnyuL3cmfvCqY7EkXFgPxGX3IHwpINd3WAJ_htIv75dLynCk-6RKInR7PUttVn_Aym64xozGGysL47fbc/s400/same2.jpg" alt="" id="BLOGGER_PHOTO_ID_5166926676835735506" border="0" /></a><br /></div><br /><div style="padding: 10px; background-color: rgb(221, 255, 221);"><b class="strong">Right: </b><span style="font-style: italic;" class="strong">Page Title - Department Name - University Name</span><br /><br />Page titles with the specific page's title first: <span style="font-style: italic;"><br /><br />Browser Tabs</span><b><br /></b><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVZ2bXDh1gdK_ltHMl077NJ3saClVhmySgfc2z2f0cpneJLnBRDgVRQIuXHVAKSTBsdHddBdFCkq4Gbf__6TYnBzydEi6RaGMUke_PKP6ZL5FH4fcqtSDnyy4xCCuO6llAuQiYfZvxX0/s1600-h/different.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVZ2bXDh1gdK_ltHMl077NJ3saClVhmySgfc2z2f0cpneJLnBRDgVRQIuXHVAKSTBsdHddBdFCkq4Gbf__6TYnBzydEi6RaGMUke_PKP6ZL5FH4fcqtSDnyy4xCCuO6llAuQiYfZvxX0/s400/different.jpg" alt="" id="BLOGGER_PHOTO_ID_5166927213706647522" border="0" /></a><span style="font-style: italic;">Favorites</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNO-JXVPcoCC9wCvHKg3BkZHlomvkfmHTW42G5_xfhxv7R0GQAMstInuarf8f6wjq01D33GLJBW7gHRlWDDQo_xH_zPQYkNyDeEfv_ZBE9yjMj_LGH-nh34kz8YMH6T05Jlaf9RMi8IMs/s1600-h/diff2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNO-JXVPcoCC9wCvHKg3BkZHlomvkfmHTW42G5_xfhxv7R0GQAMstInuarf8f6wjq01D33GLJBW7gHRlWDDQo_xH_zPQYkNyDeEfv_ZBE9yjMj_LGH-nh34kz8YMH6T05Jlaf9RMi8IMs/s400/diff2.jpg" alt="" id="BLOGGER_PHOTO_ID_5166927218001614834" border="0" /></a><br /></div><br /><span style="font-size:130%;"><span style="font-weight: bold;">Home Page Titles</span></span><br /><br />Home page titles should just be the department name and the university name: <b>Department Name - University Name</b>. <p><b>Examples:</b></p> <p> Office of the President - CSU, Chico<br />Geography and Planning Department - CSU, Chico</p> <p><b>Do not</b> use "Home" or "Welcome" in your home page title. Nobody searches for "home" or "welcome" and they take up valuable space in the browser tabs (see images, below). </p><br /><div style="padding: 10px; background-color: rgb(255, 204, 204);"><b class="strong">Wrong: </b><span style="font-style: italic;" class="strong">Welcome/Home - University Name - Department Name</span><br /><br />All these home pages are different, but we can't tell which is which. <span style="font-style: italic;"><br /><br />Browser Tabs<br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi748vPFDabL51wZuYXESh5A2Mpjggh393MFmflpikwSSFzNo7HcfV06wDAzSlAs9H0Mn65C0slitkMwX2gr7bR9V4ux9Nyh0p2LzEjl0pqtSLESqph0QZ9z-DgGtTB6amoMZnguDhIMcY/s1600-h/welcome.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi748vPFDabL51wZuYXESh5A2Mpjggh393MFmflpikwSSFzNo7HcfV06wDAzSlAs9H0Mn65C0slitkMwX2gr7bR9V4ux9Nyh0p2LzEjl0pqtSLESqph0QZ9z-DgGtTB6amoMZnguDhIMcY/s400/welcome.jpg" alt="" id="BLOGGER_PHOTO_ID_5166928016865531906" border="0" /></a><span style="font-style: italic;">Favorites</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjMWCm0ci8iQdHgCSWdYbUiOGEzNkfOvqu5EUdfK2_rAe192LtQ3FmgnjsDw-41_P6SVEm8bLPvOT1kMg73jMSN3cfsExcJw2w0cH3aYKbmQkO38iYCQ4ypsnmQ9Di93y97XeXl9Q9_M/s1600-h/welcome2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjMWCm0ci8iQdHgCSWdYbUiOGEzNkfOvqu5EUdfK2_rAe192LtQ3FmgnjsDw-41_P6SVEm8bLPvOT1kMg73jMSN3cfsExcJw2w0cH3aYKbmQkO38iYCQ4ypsnmQ9Di93y97XeXl9Q9_M/s400/welcome2.jpg" alt="" id="BLOGGER_PHOTO_ID_5166928016865531922" border="0" /></a><br /></div><br /><br /><div style="padding: 10px; background-color: rgb(221, 255, 221);"><b class="strong">Right: </b><span style="font-style: italic;" class="strong">Department Name - University Name</span><br /><br />These home pages all use just the department name and the university name. <span style="font-style: italic;"><br /><br />Browser Tabs</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RPkoE6LoV2lIaugAV751DDK32HhL-xCn3nj8dwvqAkRM32vpKoMJUN8BE4c3bZZ_I0aBjiSXrYTICIPeFO7OQY8FnydGtQwDt2tVJAKVpbX1Ay71vAHHgRUQwtiSEhCCltutpvbKUwE/s1600-h/home.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RPkoE6LoV2lIaugAV751DDK32HhL-xCn3nj8dwvqAkRM32vpKoMJUN8BE4c3bZZ_I0aBjiSXrYTICIPeFO7OQY8FnydGtQwDt2tVJAKVpbX1Ay71vAHHgRUQwtiSEhCCltutpvbKUwE/s400/home.jpg" alt="" id="BLOGGER_PHOTO_ID_5166928248793765922" border="0" /></a><span style="font-style: italic;">Favorites</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEqpzsxWXPgzKBPV52dE7-XmSCPlWck7fGUi7vMWrg2yv4HCXQFlLLo6r9aQ6QsWy7tKx43z3no8HSk7wTbxxNCXmuC_IrUlFBDQI2Y5VJ_u_TNPKa7anN5R5Izi0jRqLfuyDkAph81g/s1600-h/home2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEqpzsxWXPgzKBPV52dE7-XmSCPlWck7fGUi7vMWrg2yv4HCXQFlLLo6r9aQ6QsWy7tKx43z3no8HSk7wTbxxNCXmuC_IrUlFBDQI2Y5VJ_u_TNPKa7anN5R5Izi0jRqLfuyDkAph81g/s400/home2.jpg" alt="" id="BLOGGER_PHOTO_ID_5166928253088733234" border="0" /></a><br /></div>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com4tag:blogger.com,1999:blog-7179165369598407091.post-35583306356957729692008-02-12T13:28:00.001-08:002008-05-01T10:41:09.528-07:00Analyzing the Future - Part 5 - Page Structure<span style="font-style: italic;">An examination of the organization of page content from a semantic perspective. Sounds scary, but it's mostly about clean, simple, accessible, and well organized HTML on your home page. </span><br /><br />In previous posts in this <a href="http://futureendeavour.blogspot.com/search/label/analyzing%20the%20future">series</a>, I've looked at home page content from a number of different perspectives (<a href="http://futureendeavour.blogspot.com/2007/12/analyzing-future-part-3-navigation.html">navigation</a>, <a href="http://futureendeavour.blogspot.com/2007/12/analyzing-future-part-2-page-dimensions.html">page dimensions</a>, <a href="http://futureendeavour.blogspot.com/2007/12/analyzing-future-part-3-home-page.html">page elements</a>). This time, I wanted to look at the structure of content from a more semantic perspective.<br /><br />HTML coders (the good ones, anyway) are obsessed with good semantic code; nice hierarchical structures, valid XHMTL, etc. But you can have a well-formed, semantically perfect page that is an incomprehensible, poorly organized and impossible to use site.<br /><br />The goal is to have good semantics and good organization. If you do that, the odds are that you'll also have good accessibility as well.<br /><br /><span style="font-weight: bold;">Methodology</span><br /><br />As usual for this series, I victimized my usual <a href="http://futureendeavour.blogspot.com/2007/12/analyzing-future-part-1.html">18 standard sites</a>.<br /><br />For this analysis, I turned off all CSS and and replaced all images with ALT text using the <a href="http://chrispederick.com/work/web-developer/">Web Developer Toolbar</a> in Firefox. This provided me with a semantic view of each page, stripped of the fancy graphics and colors designed to fool me into wanting to attend their school.<br /><br />I ended up looking at pages like this:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgckmjCicLB29KXdVPgaPePx6CFNo7ImuLV9_X6ZmzYeFVJ4qrXhuV-webK61AvGeEQtoZDDMPX4wSZkIIRVi8-cqLOTUJkM5z7pB-8kj63NWIIjNim0JOUeRusnBI3K2uEozzar3tXQ/s1600-h/semantic-screen.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgckmjCicLB29KXdVPgaPePx6CFNo7ImuLV9_X6ZmzYeFVJ4qrXhuV-webK61AvGeEQtoZDDMPX4wSZkIIRVi8-cqLOTUJkM5z7pB-8kj63NWIIjNim0JOUeRusnBI3K2uEozzar3tXQ/s400/semantic-screen.jpg" alt="" id="BLOGGER_PHOTO_ID_5166643123094853458" border="0" /></a><br />Why would I look at pages like this? A couple of reasons. First, to be able to see the real organization of information on the page, and second (and more importantly) because disabled users using screen readers and users on cell phones often access your pages just like this.<br /><br /><span style="font-weight: bold;">Results</span><br /><br />I saw a lot of variations in page organization, and a variety of good and bad practices.<br /><br />Only two sites used table-based layouts. Yea!<br /><br />Eight sites had some sort of "Skip to..." navigation at the top of the page, though <a href="http://ncsu.edu/">NC State</a> kind of went overboard with six different "Skip to..." links at the top of the page. "Skip to Content" was the most popular, with "Skip to Navigation" a close second.<br /><br />A couple of sites put all their links at the bottom of the page. This might have been deliberate in order to focus on the content, but home pages tend to be portal pages, so navigation should be prominent and easily accessible.<br /><br />Search boxes tended to be toward the top of the page, but not always. I think for disabled users, search boxes must be very difficult to find on most Web pages.<br /><br />Semantically, sites were all over the map. Some sites, like <a href="http://www.utk.edu/">UT Knoxville</a> and <a href="http://www.lmu.edu/site4.aspx">Loyola Marymount</a>, followed valid heading organization. Other sites, used a mix of only H4 and H5 tags, all H3 tags, etc., etc. Some used no headings at all.<br /><br />There were also a few pages (e.g., <a href="http://www.stthomas.edu/">University of St. Thomas</a>) appeared to be all links and little content.<br /><br /><span style="font-weight: bold;">Recommendations and Best Practices</span><br /><br />Based on my examination of the 18 home pages, I came up with a list of best practices to look for:<br /><ul><li>Complete separation of content and presentation (via CSS-based design)</li><ul><li>This includes CSS-based layout instead of table-based layouts</li></ul><li>Semantic HTML</li><ul><li>Based on properly ordered and nested heading tags (H1, H2, etc.)</li></ul><li>Presence of descriptive ALT tags for all non-content free images</li><ul><li>Images that are just pretty pictures can have empty ALT tags</li></ul><li>Presence of navigational shortcuts at the top of each page<br /></li><ul><li>e.g., "Skip to Content" links</li></ul><li>Reasonable mix of content and navigation</li><ul><li>Who wants a page that's nothing but links? It makes your home page look like a link farm.</li></ul><li>Prominent placement of search box</li><ul><li>Typically very near the top of the page, or the placement of a navigational shortcut to the search box at the top</li></ul><li>Prominent placement of the name of the institution</li><ul><li>This should be your H1 tag (ya think?)<br /></li></ul></ul>What would the "perfect" page look like? Well, the actual content would depend on your site, but you can see a sample bare-bones page <a href="http://adunnphotography.com/best_practice.shtml">here</a>, or look at the layout below.<br /><br /><span style="font-weight: bold;">Sample Page:</span><br /><br /><hr /><div id="headerx"> <ul><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#search">Skip to Search</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#nav">Skip to Navigation</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#content">Skip to Content</a> </li></ul> <h1>Hypothetical State University</h1> <div id="search"> <form id="form1" method="post" action=""> <fieldset> <label for="search">Search HSU</label> <input name="search" id="search" type="text"> <input name="Go" id="Go" value="Search" type="submit"> </fieldset> </form> </div></div><div id="nav"> <h2>Navigation</h2> <div id="audience"> <ul><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Prospective Students</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Current Students</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Faculty & Staff</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Alumni</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Parents & Friends</a></li></ul> </div> <div id="topical"> <ul><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">About HSU</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Academics</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Admission</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Athletics</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">Bookstore</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Campus Life</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">Catalog</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Library</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#" shape="rect">Giving</a></li></ul> </div> <div id="other"> <ul><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">Campus Map</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">Directory</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">Portal</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">Contact Us</a></li><li><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">Help</a></li></ul> </div></div><div id="content"> <h2>Content</h2> <div id="news"> <h3>News & Announcements</h3> <h4>News Item 1</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam suscipit, tortor quis sollicitudin porttitor, diam metus aliquam ante, ut sodales felis purus ac quam. Mauris ut erat in ipsum laoreet lacinia. <a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">More...</a> </p> <h4>News Item 2</h4> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec varius tempus urna. Phasellus porta blandit lacus. Nunc nec arcu et metus sodales ullamcorper. Mauris vitae leo id sapien sagittis lacinia. <a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">More...</a></p> <h4><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">More News...</a></h4> </div> <div id="events"> <h3>Events Calendar</h3> <h4>February 14, 2008</h4> <p>Valentine's Day Massacre - Have a bang at the SMC Cartage Garage!</p> <h4>February 20, 2008</h4> <p>Integer mattis dolor vel felis. Aliquam viverra nunc eget leo. Pellentesque interdum urna non purus.</p> <h4><a href="http://beta.blogger.com/post-edit.g?blogID=7179165369598407091&postID=5867364395841238909#">More Events...</a></h4> </div></div><div id="footerx"> <p>Hypothetical State University<br />123 Main St.<br />Anytown, USA 12345<br />1-800-345-6789<br /><a href="mailto:info@hsu.edu">info@hsu.edu</a><br />Copyright © 2008 HSU<br /></p></div>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com1tag:blogger.com,1999:blog-7179165369598407091.post-42418329289446748292008-02-05T13:55:00.000-08:002008-02-05T15:03:24.701-08:00What is the Purpose of a University Web Site?Yesterday our CIO was going over the new Web governance structure being implemented at our campus. According to him, one of the missions of this new Web governance structure is to "determine the purpose of the university's Web site."<a href="http://www.blogger.com/post-edit.g?blogID=7179165369598407091&postID=4241832928944674829#footnote">*</a> It seems like a reasonable question.<br /><br />Now, I've taken a small poke at that issue in a <a href="http://futureendeavour.blogspot.com/2007/05/purpose-of-university-home-page.html">previous post</a>, but I got afraid and ran away from it because it seemed big and scary.<br /><br />But it's a real issue... or is it?<br /><br />If you put it in the terms of, "does our university Web site have a purpose?", you better hope the answer is "hell yes!" instead of "not that I'm aware of", but trying to define that purpose is not so easy.<br /><br />Of course, you're all saying, "the Web site doesn't have a single purpose." And let's face it; it's not even <span style="font-weight: bold;">one</span> Web site; it's many Web sites, under the control of many different people, and serving many different audiences and needs.<br /><br />As a result, I'm not personally convinced that we can come up with a "definitive" answer to this question. I believe that we have to take a more molecular view of the site. That is, I think that we can say, "OK, we need to do this. And we need to have that. And there has to be this component", without having to have a complete "big picture" view.<br /><br />Not that I don't believe in the "big picture" approach, or even agree with it; I do. I just feel that the Web as an environment, as a tool, and as a platform is too complex and evolving too rapidly for definitive, big picture answers.<br /><br />Of course, that doesn't change the political reality that the CIO expects the Web governance suckas (er... committee members) to determine the purpose of the university's Web site.<br /><br />Personally, I plan to be sick that year.<br /><br />I'm sure some of you have encountered this issue. How have you approached it? Dealt with it? Defused it? Succumbed to it?<br /><br /><a name="footnote" id="footnote"">*</a>(for the sake of simplicity, I'm assuming here that he was referring to the campus's public Web site, <a href="http://www.csuchico.edu/">www.csuchico.edu</a>, and not all the other Web-based applications, such as the portal or the LMS).Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com4tag:blogger.com,1999:blog-7179165369598407091.post-77605859235841619342008-01-22T09:02:00.000-08:002008-02-20T14:49:14.654-08:00A Beautiful Nightmare<span style="font-style: italic;">Wherein I worry that lowly end users of our content management system will turn our beautiful new Web site into an unnavigatable mess.</span><br /><br />After years of beating around the bush, we're finally going to be getting an enterprise Web content management system (WCMS) for Chico State. We're getting Hannon Hill Cascade Server, but that's not the point of this post.<br /><br />I've fought very hard for an enterprise WCMS over the past several years, but the closer we've gotten to getting one, the more misgivings I have.<br /><br />I know that's heresy, but as an admittedly elitist web developer I'm wary of turning the unwashed masses loose on Web sites without adult supervision.<br /><br />I'm not worried about them putting pink text on green backgrounds - we can control that with pre-made templates.<br /><br />What I'm worried about is having people with no experience with or (concept of) organizing information creating and attempting to organize departmental Web sites. After all, we're talking about people whose desktops look like this:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_SPipt51kXNutMTvdORX_13R7231T0oxCZYRsvPQd4fE2QBtKZrCreRUBYtP1QFRfbY40FI5AadxViqdP-GQLWc8G0zM2YiaG8FfFyWwzjPJ6yZUUyzAwtlbDLDZ1Rsacp34ZNF4M3A/s1600-h/messy-desktop.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_SPipt51kXNutMTvdORX_13R7231T0oxCZYRsvPQd4fE2QBtKZrCreRUBYtP1QFRfbY40FI5AadxViqdP-GQLWc8G0zM2YiaG8FfFyWwzjPJ6yZUUyzAwtlbDLDZ1Rsacp34ZNF4M3A/s400/messy-desktop.png" alt="" id="BLOGGER_PHOTO_ID_5158353017071358226" border="0" /></a>(image stolen from <a href="http://www.codinghorror.com/blog/archives/000612.html">this site</a>)<br /><br />We have spent years thinking about WCMS's. We've spent months reviewing products, trying to select the best one for our needs. We're going to spend more months developing the best and most beautiful templates for people to use. And we're going to hire people to manage this great piece of software and manage a smooth rollout of the technology to campus.<br /><br />And then we're going to turn over virtually the entire CSU, Chico Web presence to (let's be honest) a bunch of department secretaries and let them turn it into a Web version of their computer desktop.<br /><br />This isn't making sense to me.<br /><br />Why bother to invest all this time, money and effort on the back end, if the people who will actually, hands on, implement and manage major pieces of the campus have no idea of what they're doing?<br /><br />OK, so we'll offer - no, require - training in information architecture, organizational skills, writing for the web, etc. for everyone who will use the WCMS.<br /><br />Right.<br /><br />How am I going to sell that? That isn't sexy. The software is sexy (if you're into that sort of stuff, which personally I'm not). New designs are sexy. Training isn't sexy. Information architecture isn't sexy.<br /><br />The very stakeholders that need to sign off the standards and requirements for the WCMS barely know what information architecture is, so they're not going to get it. If they don't get it, they won't require anyone else to get it.<br /><br />End result... We end up with a beautifully designed new site, run by a sophisticated piece of content management software, but where the content is an impenetrable mishmash of confusing, redundant, mislabeled links and huge rambling pages of run-on content. Even better, there'll be no consistency across subsites with regard to terminology, labeling, organizational schemes or writing style.<br /><br />For the user, our Web site will be a beautiful nightmare.<br /><br />We have to prevent this. I'm open to ideas.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com6tag:blogger.com,1999:blog-7179165369598407091.post-53613072602455640302007-12-20T08:58:00.000-08:002007-12-20T09:10:51.751-08:00Spin off Blog - "Tales from Redesignland"In order to keep the serious stuff from the cartoons, I'm creating a new cartoon blog called <a href="http://redesignland.blogspot.com/">"Tales from Redesignland</a>" to chronicle the lives of us poor web developers... particularly those in higher education.<br /><br />Y'all come visit us, y'hear?Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com0tag:blogger.com,1999:blog-7179165369598407091.post-51758686041844972662007-12-18T16:48:00.000-08:002008-05-01T10:43:02.054-07:00Thoughts on the Redesign Process - The Cartoon VersionNo, I'm not bored, I've just wrapped up all of my projects for the semester.<br /><br />I saw <a href="http://www.pingmag.jp/2005/12/09/the-website-development-process/">this page</a> and thought it was a very cute way to visually describe the design process. I don't have any Lego men, so I adapted some free icons to do the job.<br /><br /><span style="font-weight: bold;">1. </span><span><span style="font-weight: bold;">Get the right high-level decision-making organization in place</span></span><br />Their role is thinking about big picture issues, not micromanaging the process or the design.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRkP2ziJdqK_3Yl0smXsLavCwMVhU9bLMNCUeUBfPjbtIXzxQqWNeJKOGMvjh5WLwFLgn-89n21KzVUONwV6dy7KFEw9Njzudl43HIuZRmK305O0ILlRWq0Oo4LMsTMp-cdQKIAxWAdE/s1600-h/step1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRkP2ziJdqK_3Yl0smXsLavCwMVhU9bLMNCUeUBfPjbtIXzxQqWNeJKOGMvjh5WLwFLgn-89n21KzVUONwV6dy7KFEw9Njzudl43HIuZRmK305O0ILlRWq0Oo4LMsTMp-cdQKIAxWAdE/s400/step1.jpg" alt="" id="BLOGGER_PHOTO_ID_5145487618629848690" border="0" /></a><br /><span><span style="font-weight: bold;"><span style="font-weight: bold;">2. </span></span></span><span style="font-weight: bold;">Assemble the Redesign Team</span><span><br />This team may consist of people from several different departments. The team as shown, is made up of roles; one person may play more than one role. Though boundaries may not really exist, I've divided the team into four groups: technical, design, content, and quality.<br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGt7rzSrmbENWcU5F4IW361m6xDnrTsWAvs5zttiw9ywaUUGVY8uNSM8fGh2hf-SznGMWwAV7Zdg6ui6cLuvPd2qqD73E5emQD7fl-mN0AAXmTsjRmJnq5k6ynRtwjR8Ba9pKTGQ8ttQI/s1600-h/step2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGt7rzSrmbENWcU5F4IW361m6xDnrTsWAvs5zttiw9ywaUUGVY8uNSM8fGh2hf-SznGMWwAV7Zdg6ui6cLuvPd2qqD73E5emQD7fl-mN0AAXmTsjRmJnq5k6ynRtwjR8Ba9pKTGQ8ttQI/s400/step2.jpg" alt="" id="BLOGGER_PHOTO_ID_5145712924024262290" border="0" /></a><br /><span style="font-weight: bold;">3. Define High-level Redesign Goals<br /></span><span>Ideally, this should be a conversation between the high-level stakeholders and the team leads (project lead, graphic designer, information architect, usability designer, communications specialist, and technical lead). The stakeholders need to communicate the goals and direction for the new Web presence and the team leads need to ask questions and provide feedback from their specific perspectives.<br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxahwxoUa8eOJeZ2itpsPPyST811q03hGhyD5z-65lOWDUJ20O_4EqUUsvBxw_dT6wE_tKG8F4rZ9KeOa8e6KrqEhdvee-HtXLxwxJO_KrifrufpIJ5NSdgvSH_W0AeL3r5plt_dWj3k/s1600-h/step3a.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxahwxoUa8eOJeZ2itpsPPyST811q03hGhyD5z-65lOWDUJ20O_4EqUUsvBxw_dT6wE_tKG8F4rZ9KeOa8e6KrqEhdvee-HtXLxwxJO_KrifrufpIJ5NSdgvSH_W0AeL3r5plt_dWj3k/s400/step3a.jpg" alt="" id="BLOGGER_PHOTO_ID_5145740278670970562" border="0" /></a><span><br />The conversation needs to be focused on eliciting clear direction from the stakeholders while educating them as to best practices and standards on the Web.<br /><br />The trap at this stage is to begin to micromanage the process before it even starts. Talk should be in general terms, rather than discussing specific design, content or technology issues.<br /><br /><span style="font-weight: bold;"></span></span><span><span style="font-weight: bold;">Wrong:</span> "I think that going with an Aqua-style design, but in green, would be best."</span><span><span style="font-weight: bold;"><br />Right:</span> "How do you envision the redesign affecting our branding?"<br /><span style="font-weight: bold;"></span><br /></span><span style="font-weight: bold;">Wrong: </span><span>"We should have more dropdown menus!"<br /></span><span style="font-weight: bold;">Right: </span><span>"One of our top goals is to simplify the interface of the home page and reduce the clutter of links."</span><span style="font-weight: bold;"><br /><br /><span style="font-weight: bold;">4. </span></span><span style="font-weight: bold;">Establish Scope, Timeline and Budget<br /></span><span>Scope creep will kill you. Avoid it.<br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8EwIdhXS-7cMKPdjq9M6P-yh6pSsMerL9x6TbpQ_3_4vZvCvu716GUzsTtnqBClSW_tsQJ86-9JC3xpfQ3gNKVL8r1N2A3Aa4tqYUixwckvoSoVstkayRLJtk0dROVQJs0kmV418Z_o/s1600-h/step4.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8EwIdhXS-7cMKPdjq9M6P-yh6pSsMerL9x6TbpQ_3_4vZvCvu716GUzsTtnqBClSW_tsQJ86-9JC3xpfQ3gNKVL8r1N2A3Aa4tqYUixwckvoSoVstkayRLJtk0dROVQJs0kmV418Z_o/s400/step4.jpg" alt="" id="BLOGGER_PHOTO_ID_5145746124121460450" border="0" /></a><br /><span style="font-weight: bold;">5. Establish Standards<br /></span><span>Assemble the full redesign team to discuss and establish standards for coding, design, labeling, content, security, accessibility, etc.<br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_1vVGMGenbNLje38R8EABiJzVwLWUogM5xhmNHkATiWu7dcsWNlAh282uxliLG8mwrKJaGQvQ3fNah_fHiapI4KNGib0kthBRgshBUfqw5-EbUfG-qr8n4vL7wC55UBO2ukabkSHwRQ/s1600-h/step5.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_1vVGMGenbNLje38R8EABiJzVwLWUogM5xhmNHkATiWu7dcsWNlAh282uxliLG8mwrKJaGQvQ3fNah_fHiapI4KNGib0kthBRgshBUfqw5-EbUfG-qr8n4vL7wC55UBO2ukabkSHwRQ/s400/step5.jpg" alt="" id="BLOGGER_PHOTO_ID_5145793437481193282" border="0" /></a> <span style="font-weight: bold;">6. <span style="font-weight: bold;">Do your Homework</span><br /></span>Everyone should be involved at some level in this step, but it is most important for the graphic designer, information architect and usability designer to do as much research on trends and best practices as possible.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgptaXwHpRovWu03jdWk4eVT4nV7AaIJkfGgeY4KojBfj02m1cescYJ5Xt4TFbfaKMe8T-w6SbG168-tTx8AHMzMvAZ2yjYwrJCq9qhHfsUVmZWn0aY0WACRx6-jyuLqZVu_8b7uRjfYfs/s1600-h/step6.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgptaXwHpRovWu03jdWk4eVT4nV7AaIJkfGgeY4KojBfj02m1cescYJ5Xt4TFbfaKMe8T-w6SbG168-tTx8AHMzMvAZ2yjYwrJCq9qhHfsUVmZWn0aY0WACRx6-jyuLqZVu_8b7uRjfYfs/s400/step6.jpg" alt="" id="BLOGGER_PHOTO_ID_5145762608205942530" border="0" /></a><br /><span style="font-weight: bold;">7. Profile Site Users</span><br />Profiling is good. Get your 'user experience' group together (graphic designer, communications specialist, information architect and usability designer) and construct several <a href="http://www.webdesignfromscratch.com/about-personas.cfm">personas</a> and some scenarios to go with them. This step should start out as a series of 'blue sky' sessions, just exploring the possibilities, but should evolve into a prioritized lists of tasks.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYvLfvz6fI-g8AjNB-aYTqd9vmYYe7diuIhdQeVvXxCFuTBNYZJaeg75aUP53CLWfs9-BRlgfFX_EmXltUqUnDyOPuagGCniKOzrcneidV7hdUdScf6LLzdulSS_jBRpcX_b0Na8lbKcQ/s1600-h/step7.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYvLfvz6fI-g8AjNB-aYTqd9vmYYe7diuIhdQeVvXxCFuTBNYZJaeg75aUP53CLWfs9-BRlgfFX_EmXltUqUnDyOPuagGCniKOzrcneidV7hdUdScf6LLzdulSS_jBRpcX_b0Na8lbKcQ/s400/step7.jpg" alt="" id="BLOGGER_PHOTO_ID_5145770493765898002" border="0" /></a><br /><span style="font-weight: bold;">8. </span><b>Develop & Test Information Architecture(s)<br /></b>Building off your work with personas and scenarios, begin building out structures and organization...<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiIZPmZ8A6YG1mcmKP8SKKa2LJ9jOAKmCkUBrJ-xbNMWzibnLyu8KHL5mBb4UO7Elhdx6QRrv37nQTQ2-zuR-hQJ3RJ79L23h87sZp1T4q1_VfXaBNW5kvDoUDXp1kiZl-JoTuHayrSCM/s1600-h/step8a.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiIZPmZ8A6YG1mcmKP8SKKa2LJ9jOAKmCkUBrJ-xbNMWzibnLyu8KHL5mBb4UO7Elhdx6QRrv37nQTQ2-zuR-hQJ3RJ79L23h87sZp1T4q1_VfXaBNW5kvDoUDXp1kiZl-JoTuHayrSCM/s400/step8a.jpg" alt="" id="BLOGGER_PHOTO_ID_5146091564046110658" border="0" /></a><br />... and testing them on users using card sorts and wireframes.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFPgkt47p0g0FlGO_nd9NzNDtWX8Npy3BmQmYNokjDpuVAJoEBXfqRiuuY78RaVFZuywr4gZykxbFidbZGFMlsm2AZZuvcjXY0FKzmJ5PaKX_dUKmS-7VlscSAerSCDwCunS8m_XRNQTc/s1600-h/step8b.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFPgkt47p0g0FlGO_nd9NzNDtWX8Npy3BmQmYNokjDpuVAJoEBXfqRiuuY78RaVFZuywr4gZykxbFidbZGFMlsm2AZZuvcjXY0FKzmJ5PaKX_dUKmS-7VlscSAerSCDwCunS8m_XRNQTc/s400/step8b.jpg" alt="" id="BLOGGER_PHOTO_ID_5146091727254867922" border="0" /></a><br /><span style="font-weight: bold;">9. Develop & Test Visual Designs<br /></span>Hopefully, you'll have gotten some general design direction from the stakeholders to give you a start.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwtascsYYqjhHWES_94-BIFwh0JLpnn3zfKYY9fb1mmVeXoCvRncRunjoIZGn9UY8EUVK0atd_D8p50RL9BZfJF_yTK9-0DN5-ADDsYkhnWv5KeZ9iFAp-Yqbp2nJqMY2HvFdSnPjCnI/s1600-h/step9a.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwtascsYYqjhHWES_94-BIFwh0JLpnn3zfKYY9fb1mmVeXoCvRncRunjoIZGn9UY8EUVK0atd_D8p50RL9BZfJF_yTK9-0DN5-ADDsYkhnWv5KeZ9iFAp-Yqbp2nJqMY2HvFdSnPjCnI/s400/step9a.jpg" alt="" id="BLOGGER_PHOTO_ID_5146091980657938402" border="0" /></a><br />Show designs to stakeholders and focus groups of users. Refine and repeat until you have final approval.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgot676-PoqqtJfZmb4tRozYB3XhpujMxMkBQ0m2gsb16xILUfoq4hr3upOLPpa_7KyUxA_-IXajki4BCPLueJ10XZ-B9ZeNUjSJLG6zjvV0GeFXiud4ojgS-PpNRURhGEEBzka7mcndBQ/s1600-h/step9b.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgot676-PoqqtJfZmb4tRozYB3XhpujMxMkBQ0m2gsb16xILUfoq4hr3upOLPpa_7KyUxA_-IXajki4BCPLueJ10XZ-B9ZeNUjSJLG6zjvV0GeFXiud4ojgS-PpNRURhGEEBzka7mcndBQ/s400/step9b.jpg" alt="" id="BLOGGER_PHOTO_ID_5146092848241332210" border="0" /></a><br /><span style="font-weight: bold;">10. Create and Test a "Protosite"<br /></span>Probably the smartest thing you'll ever do.<span style="font-weight: bold;"><br /></span><span style="font-weight: bold;"><span style="font-weight: bold;"><br /></span></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj06-jXzdoDcpybJHhnf1p3z8d-v5YzHbsT13KGvxG3CS_RifORF3bUHrfw-blFDybPrVJgsSzIdeAX_Ug06T5RhuPQ97c6Fdx0H15WkgxsYxWCAYgOjGxlzgwE7ysttcnuXC3o4FaXrs/s1600-h/step10a.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj06-jXzdoDcpybJHhnf1p3z8d-v5YzHbsT13KGvxG3CS_RifORF3bUHrfw-blFDybPrVJgsSzIdeAX_Ug06T5RhuPQ97c6Fdx0H15WkgxsYxWCAYgOjGxlzgwE7ysttcnuXC3o4FaXrs/s400/step10a.jpg" alt="" id="BLOGGER_PHOTO_ID_5146093200428650498" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWhw03q5Xszy9ghTMU17OS2tFto2ISj0lyRd9OhreJN5CzfgzPwFlMuYLR8PiITJlxSY_kaPUFDgL1RJkh4SLyNXxQ5KMaZapd8vhNdMM_cHp3oKnx2DcGj9u7wBLXhyOcuULYJkouHQ/s1600-h/step10b.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWhw03q5Xszy9ghTMU17OS2tFto2ISj0lyRd9OhreJN5CzfgzPwFlMuYLR8PiITJlxSY_kaPUFDgL1RJkh4SLyNXxQ5KMaZapd8vhNdMM_cHp3oKnx2DcGj9u7wBLXhyOcuULYJkouHQ/s400/step10b.jpg" alt="" id="BLOGGER_PHOTO_ID_5146093312097800210" border="0" /></a><br /><span style="font-weight: bold;">11. Create and Implement Real Site<br /></span>After fixing all of your mistakes on the protosite, time to build out and test the real thing.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN4esevv7eArj-hKJWVCtjcPXHPGuODBPMac-20evpVejQmQbyElut6mQc1ctnC4MUxkqBKjO3n9z6ni1Jaq8VoUMu1UReW87L6nw6GaEsOCxwMTY4W-mvF4Sr4YQVxl6n3QQMPt1P3No/s1600-h/step11.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN4esevv7eArj-hKJWVCtjcPXHPGuODBPMac-20evpVejQmQbyElut6mQc1ctnC4MUxkqBKjO3n9z6ni1Jaq8VoUMu1UReW87L6nw6GaEsOCxwMTY4W-mvF4Sr4YQVxl6n3QQMPt1P3No/s400/step11.jpg" alt="" id="BLOGGER_PHOTO_ID_5145832921115545474" border="0" /></a><span style="font-weight: bold;">12. Finish Documentation</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdC2LjcCh0ScPgL5ZXXco70-2xYIvKgS0v8GVp6Ym-3ymPeuXEukobzh6z1xKh2WL9Z2essBPDYuJq8sq1mwyirBI8oPi0HmjkLDXEoij1ep6jmfWtzeetz__uXF683qAKIPDYoLIWXUw/s1600-h/step12.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdC2LjcCh0ScPgL5ZXXco70-2xYIvKgS0v8GVp6Ym-3ymPeuXEukobzh6z1xKh2WL9Z2essBPDYuJq8sq1mwyirBI8oPi0HmjkLDXEoij1ep6jmfWtzeetz__uXF683qAKIPDYoLIWXUw/s400/step12.jpg" alt="" id="BLOGGER_PHOTO_ID_5145837271917416338" border="0" /></a><span style="font-weight: bold;">13. Go Live</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhL9aVd8GlM_-1NLVv_cTo_3STJs6zscMBLv5tOzqOPcLZQ_n4kbOEd7OaKWloqmGdoaRwpQrZT0E-OPVKy1q3yxzLSUE7WAEGn78pyStHD297dp9IoGQdQAVoAvmtk65787ZxTRhC68/s1600-h/step13.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhL9aVd8GlM_-1NLVv_cTo_3STJs6zscMBLv5tOzqOPcLZQ_n4kbOEd7OaKWloqmGdoaRwpQrZT0E-OPVKy1q3yxzLSUE7WAEGn78pyStHD297dp9IoGQdQAVoAvmtk65787ZxTRhC68/s400/step13.jpg" alt="" id="BLOGGER_PHOTO_ID_5145842438763073442" border="0" /></a><span style="font-weight: bold;">14. Plan for Maintenance</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUuGcfc6hjBsO1bRzoA6g_Oq3wMrS96cIbdBlPI9Ure-LUjoPXwKJPaEaHRkVlJkr4ohaASgMcAOv3_tGkXnW1WEwa-f0MNcB9ADRD7yTkbDe8VWQyQ0QmdOUWP3wpSyNZcG5ZzWIxaqU/s1600-h/step14.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUuGcfc6hjBsO1bRzoA6g_Oq3wMrS96cIbdBlPI9Ure-LUjoPXwKJPaEaHRkVlJkr4ohaASgMcAOv3_tGkXnW1WEwa-f0MNcB9ADRD7yTkbDe8VWQyQ0QmdOUWP3wpSyNZcG5ZzWIxaqU/s400/step14.jpg" alt="" id="BLOGGER_PHOTO_ID_5145844719390707634" border="0" /></a><br /><span><span>I had fun making this. I hope you had fun reading it. I'm sure that there will be more of the motley crew to come. </span></span><span style="font-weight: bold;"><span style="font-weight: bold;"><br /></span></span>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com6tag:blogger.com,1999:blog-7179165369598407091.post-75412650929264493772007-12-18T08:09:00.000-08:002008-05-01T10:43:02.056-07:00Thoughts on the Redesign Process<span style="font-style: italic;">A look the redesign process for the CSU, Chico home page.</span><br /><br />The key to success for any large-scale Web site redesign is a process that works.<br /><br />Four years ago, I put together a <a href="http://www.csuchico.edu/web/documents/RedesignProcess.ppt">PowerPoint presentation</a> on the Web design process for the Chico State home page. No one ever looked at it, but it's almost as useful today as it was then. With the benefit of four more years of experience, here's a revised version.<br /><br /><span style="font-weight: bold;font-size:130%;" >The Short Version (for the attention-impaired)</span><br /><ol><li><span>Get the right high-level decision-making organization in place</span></li><li><span>Assemble the Redesign Team</span></li><li><span>Define High-level Redesign Goals</span></li><li><span>Establish Scope, Timeline and Budget</span></li><li><span>Establish Standards</span></li><li><span>Do Your Homework</span></li><li><span>Profile Site Users</span></li><li>Develop & Test Information Architecture(s)</li><li><span>Develop & Test Visual Designs</span></li><li><span>Create and Test a "Protosite"</span></li><li><span>Create and Implement Real Site</span></li><li><span>Finish Documentation</span></li><li><span>Go Live</span></li><li>Plan for Maintenance</li></ol><span style="font-size:130%;"><span style="font-weight: bold;">The Long Version (for the terminally bored)</span></span><br /><br /><span style="font-weight: bold;">1. Get the right high-level decision-making organization in place</span><br />Before you can even begin considering doing a redesign of your home page, you need to have functional, authoritative structures in place for making decisions, and determining and enforcing standards. This should involve people at the highest level possible in order to ensure buy-in as the redesign progresses.<br /><br />The role of high-level administration should strategic, not tactical, in nature. Their role should be in setting priorities, overall goals, and high-level messaging instead of micromanaging the design, information architecture, labeling, etc.<br /><br />At Chico State, we have a brand new Web Governance committee, consisting of the CIO and vice presidents.<br /><br /><span style="font-weight: bold;">2. Assemble the Redesign Team</span><br />You can't actually conduct a redesign without competent people in responsible positions. Nor can you respond to questions posed by administration concerning the redesign without qualified people on staff.<br /><br />A large scale redesign like a university Web site requires a number of roles (one person may fill several roles):<br /><ul><li>Project Lead</li><li>Technical Lead<br /></li><li>Graphic/Visual Designer</li><li>Information Architect</li><li>Interaction/Usability Designer</li><li>HTML Coder</li><li>Programmer</li><li>Web Server Administrator<br /></li><li>Multimedia Developer</li><li>Photographer<br /></li><li>Accessibility Designer</li><li>Writer</li><li>Content Manager/Editor</li><li>Communications Specialist<br /></li><li>Quality Assurance<br /></li></ul>Skimping on any of these areas can cause you major grief down the line. Your best bet for success is a cooperative interdisciplinary team that may span several organizations on campus (most notably Information Technology and University Advancement).<br /><br />At Chico State, we have the design/technical/IA/usability people under two closely related roofs, but lack a close relationship with the Advancement folks.<br /><br /><span style="font-weight: bold;">3. Define High-level Redesign Goals</span><br />This step really needs to be a conversation between the administration and the redesign team. The administrators bring an awareness of the university's top priorities, goals, concerns and issues to the table, while the design team brings knowledge of technologies, standards, best practices, other university Web sites, as well as a lot of experience with the Web redesign process that administrators may lack.<br /><br />A strictly top down approach is likely to result in a site neither well organized, well designed or usable. A bottom up approach is likely to result in a site that lacks focus and fails to meet the top priority needs of the campus.<br /><br />Example goals might include:<br /><ul><li>Create new, fresher, more “hip” look</li><li>Implement strategic goals for university web presence</li><li>Improve navigation/site structure</li><li>Make site easier to use</li><li>Address accessibility issues</li><li>Attract more new students</li><li>Fulfill university core objectives</li><li>Improve site performance</li><li>Make site easier to maintain/change</li><li>Enhance university image/branding</li><li>Increase design consistency across entire site</li><li>Implement new technologies (e.g., WCMS)<br /></li></ul><span style="font-weight: bold;">4. Establish Scope, Timeline and Budget</span><br />The biggest danger in undertaking a project like redesigning a campus Web site is scope creep. Scope creep will kill any project and can permanently damage working relationships on campus. It must be avoided at all costs.<br /><ul><li>Establish a clear list of what will and will not be done</li><li>Clearly define personnel to be involved (including timebase and responsibilities)<br /></li><li>Establish clear milestones<br /></li><li>Plan for content lag</li><li>Write a detailed production plan outlining major goals, strategy, resources & timeline</li></ul><span style="font-weight: bold;">5. Establish Standards</span><br />One thing that has saved Web Services from endless trouble and heartache over the years is the fact that we invested a lot of time early on in developing standards (everything from design standards to file naming standards to accessibility standards to labeling standards).<br /><br />Before you get into do a redesign, you need to develop a comprehensive standards document and make sure that everyone sticks to it. Some standards to consider:<br /><ul><li>Coding (XHTML, CSS, file naming, etc.)</li><li>Accessibility</li><li>Security</li><li>Graphic design</li><li>Communications (branding, brand usage)</li><li>Labeling</li><li>Content (writing guidelines, etc.)</li></ul><span style="font-weight: bold;">6. Do your Homework</span><br />You can't fix a problem if you don't know that there is a problem, and you still can't fix a problem you've identified if you don't know what your options are. So this step is two-fold:<br /><ol><li>Analyze and test your existing site</li><li>Educate yourself as to what other sites are doing<br /></li></ol>This entire blog is dedicated to this step, and I can't stress the importance of this step enough. You skip it at your own risk.<br /><br />To better understand your existing site, you should:<br /><ul><li>Examine log files for usage and patterns (Google Analytics is great for this)<br /></li><li>Do a page structure analysis</li><li>Create a visual site map to better understand the site’s existing structure</li><li>Conduct usability testing of existing site (to identify specific problems)<br /></li><li>Audit existing content</li></ul>To educate yourself as to what others are doing, you could read this blog or search for university redesign blogs.<br /><br /><span style="font-weight: bold;">7. Profile Site Users</span><br />Real Web designers profile their site users; the rest of us are just posers. Profiling (in this case profiling is good) allows you to role play in a sense; to get inside the heads of your users and see your site from their perspective. This is vital for administrators and designers who have a radically different view of the campus Web site than a 17 year-old high school student looking for a place to go to college.<br /><br />Some steps in profiling:<br /><ul><li>Categorize users (currents students, faculty staff, alumni, etc.)</li><li>What are their characteristics?<ul><li>Demographics</li><li>Browser versions used</li><li>Internet access (broadband/modem)</li></ul></li><li>Develop personas for testing/designing purposes<ul><li>6-8 should be sufficient</li></ul></li><li>Why personas?<ul><li>They personalize the users you are designing for</li><li>Helps you visualize how each persona might approach the site</li><li>Used in testing scenarios (how would Davin the art student use this feature?)<br /></li></ul></li></ul><span style="font-weight: bold;">8. </span><b>Develop & Test Information Architecture(s)</b><br />Now we start to get to the meat of the process.<br /><ul><li>Examine what other universities have done</li><li>Develop taxonomies</li><li>Do card sorting tests</li><li>Conduct task analysis for common tasks that have poor task modeling on current site</li><li>Develop site maps</li><li>Develop and test wireframes</li><li>Conduct user scenarios to keep IA on track</li><li>Get feedback from administration on IA finalists<br /></li></ul><span style="font-weight: bold;">9. Develop & Test Visual Designs</span><br />To most people, this phase is the <span style="font-style: italic;">only </span>phase of a redesign. Certainly, it is the most visible.<br /><ul><li>Develop design concepts</li><li>Refine into designs (must follow wireframes)<br /></li><li>Insure that designs stick to the architecture</li><li>Get feedback (e.g., focus groups)<br /></li><li>Get approval (powers that be must sign off on the design)</li></ul><span style="font-weight: bold;">10. Create and Test a "Protosite"</span><br />The purpose of testing a protosite is to give people a chance to use the site before it goes live. This allows you to work out a lot of bugs in design, IA and usability before subjecting it to the entire campus. Some universities do a public "beta" with the protosite in order to get a wider range of feedback. Protosites are easy to set up if you have a WCMS.<br /><ul><li>Create skeleton site (ising proposed visual design, navigation & site structure)</li><li>Multiple alternate designs can be tested</li><li>Conduct usability testing with real users<br /></li><li>Refine design and structure based on results </li></ul><span style="font-weight: bold;">11. Create and Implement Real Site</span><br />This is the final dress rehearsal before going live and the last chance to tweak designs, templates and content. This is where the QA and testing really kicks in to find bugs and problems, make sure that all pages are accessible, make sure that all pages work with supported browsers, etc.<br /><br />You might consider making this site available to users as well for testing and feedback. Using a tool like Google Analytics, you can get valuable information about how people are using the new site even before it officially goes live.<br /><br /><span style="font-weight: bold;">12. Finish Documentation</span><br />Haha! Documentation is never finished. Documentation should have started no later than step 4 (Establish Standards). We use a wiki for all of our documentation and I can't recommend that approach highly enough.<br /><ul><li>Style Guide (fonts, colors, page dimensions, banners, etc.)</li><li>Production Standards Guide (file naming conventions, code standards, CSS, etc.)</li><li>Page Templates (can be in WCMS)<br /></li></ul><span style="font-weight: bold;">13. Go Live</span><br />Finally. Couldn't we have just hired a student to do a new home page and left it at that?<br /><ul><li>Freeze all design and content</li><li>Complete QA testing </li><li>Plan announcement strategy (vitally important! - people HATE surprises)<br /></li><li>Consider phased, or soft, launch</li><li>Have a “What’s Changed” page</li><li>Transfer to live server</li><li>Party!</li></ul><span style="font-weight: bold;">14. Plan for Maintenance</span><br />Actually, this should be done long before the site goes live. If you have a WCMS, maintenance will be part of that project's implementation plan.<br /><ul><li>Get post-launch feedback from users</li><li>Fix bugs, serious problems</li><li>Determine who is responsible for maintaining what</li><li>Train departmental editors (make them familiar with standards, and with maintaining site integrity)</li></ul><span style="font-weight: bold;">Web Design Process Resources</span><br /><ul><li><a href="http://www.adobe.com/resources/techniques/">Website Production Management Techniques</a> (Adobe)</li><li><a href="http://www.webstyleguide.com/index.html">Web Style Guide</a></li><li><a href="http://www.washington.edu/webguides/workbook/usercenter.html">User-Centered Design</a> (University of Washington)</li><li><a href="http://www.uvm.edu/webguide/redesign/?Page=process.html">University of Vermont Web Redesign Project</a></li><li><a href="http://www.web-redesign.com/">Web Redesign 2.0 - Workflow that Works</a></li><li><a href="http://www.amazon.com/Unusually-Useful-Web-Book-VOICES/dp/0735712069">The Unusually Useful Web Book</a></li><li><a href="http://alistapart.com/articles/avoidedgecases">Avoiding Edge Case by Designing Up Front</a><br /></li></ul>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com0tag:blogger.com,1999:blog-7179165369598407091.post-30946752180490531502007-12-17T13:39:00.000-08:002008-05-01T10:41:09.531-07:00Analyzing the Future - Part 4 - Home Page Elements<span style="font-style: italic;">An analysis of the placement of page elements on 18 newly redesigned college/university home pages.</span><br /><br />This post is in essence a repeat of the research I did a year ago on the top 20 university Web sites. You can read that post <a href="http://futureendeavour.blogspot.com/2006/11/home-page-structure-of-top-20-sites.html">here</a>. The difference here is that the sites I'm looking at are completely different and they've all been redesigned within the past year.<br /><br />I've changed a few bits this time around, so I went back and redid the numbers from last time to properly correspond.<br /><br /><span style="font-weight: bold;font-size:130%;" >Most Common Page Elements</span><br /><br />No major changes here except that features and events have become more popular, and "quick links" have become much less popular.<br /><br /><table style="border-collapse: collapse; width: 470px; height: 198px;" str="" border="0" cellpadding="0" cellspacing="0"><col style="width: 178pt;" width="237"> <col style="width: 55pt;" width="73"> <col style="width: 64pt;" width="85"> <tbody><tr style="height: 10.5pt;" height="14"> <td class="xl24" style="height: 10.5pt; width: 178pt; font-weight: bold;" height="14" width="237">Element</td> <td class="xl30" style="width: 55pt; text-align: right; font-weight: bold;" width="73">Sites 2006</td> <td class="xl30" style="width: 64pt; text-align: right; font-weight: bold;" width="85">Sites 2007</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">Photos</td> <td class="xl26" style="width: 55pt; text-align: right;" num="1" width="73">100%</td> <td style="text-align: right;" class="xl27" num="1">100%</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">Primary Navigation</td> <td class="xl26" style="width: 55pt; text-align: right;" num="1" width="73">100%</td> <td style="text-align: right;" class="xl27" num="1">100%</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">Search Box</td> <td class="xl26" style="width: 55pt; text-align: right;" num="1" width="73">100%</td> <td style="text-align: right;" class="xl27" num="0.94">94%</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">News</td> <td class="xl26" style="width: 55pt; text-align: right;" num="0.85" width="73">85%</td> <td style="text-align: right;" class="xl27" num="0.83">83%</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">Top Banner</td> <td class="xl26" style="width: 55pt; text-align: right;" num="0.9" width="73">90%</td> <td style="text-align: right;" class="xl27" num="0.78">78%</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">Secondary Navigation</td> <td class="xl26" style="width: 55pt; text-align: right;" num="0.7" width="73">70%</td> <td style="text-align: right;" class="xl27" num="0.78">78%</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">Feature/Spotlight</td> <td class="xl26" style="width: 55pt; text-align: right;" num="0.55" width="73">55%</td> <td style="text-align: right; color: rgb(0, 102, 0);" class="xl29" num="0.78">78%</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">Events</td> <td class="xl26" style="width: 55pt; text-align: right;" num="0.3" width="73">30%</td> <td style="text-align: right; color: rgb(0, 102, 0);" class="xl29" num="0.67">67%</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt; width: 178pt;" height="14" width="237">Quick Links</td> <td class="xl26" style="width: 55pt; text-align: right;" num="0.45" width="73">45%</td> <td style="text-align: right; color: rgb(204, 0, 0);" class="xl28" num="0.22">22%</td> </tr> </tbody></table><br /><span style="font-weight: bold;font-size:130%;" >Page Element Placement</span><br /><br />I've placed the results from 2006 on the left and from this year on the right. Overall, there were few earthshaking changes, but there were a few trends:<br /><ul><li>Identity/logo branding is more consistently placed in the upper left-hand corner</li><li>Search box placement in the upper right-hand corner has become almost universal</li><li>Primary navigation is less concentrated on the left side of the page, and is becoming more common on the top or upper right</li><li>Secondary photos have become more common and tend to be concentrated below and to the right of the main photo</li><li>Feature item area is increasing in size</li><li>News and events continue to be concentrated on the lower left-hand and right-hand portions of the page (respectively)</li></ul><span style="font-weight: bold;">Top Banner</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xyDQN1SSz33hMw5C_UMeS2pSEbAGZWQdxNmhacJZ6WfSvM7XrWuiVqBPWJdsy6liIJatfHe-ok7ajq4S4xhSAPQ1eh1EaTYOH63GZtkPWK-KQUZQII-YrR9fqx-mKjE7Ibx9G_VH4hA/s1600-h/banner.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xyDQN1SSz33hMw5C_UMeS2pSEbAGZWQdxNmhacJZ6WfSvM7XrWuiVqBPWJdsy6liIJatfHe-ok7ajq4S4xhSAPQ1eh1EaTYOH63GZtkPWK-KQUZQII-YrR9fqx-mKjE7Ibx9G_VH4hA/s400/banner.jpg" alt="" id="BLOGGER_PHOTO_ID_5145111379494718898" border="0" /></a><br /><span style="font-weight: bold;">Identity/Logo</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKK_rToE5AO_AnOOhVov2cNLCCVqnftR1ejH3BXD2LxACFQPojB_MXR2Jtc-XMkgYGZKPnhUg5E1o_AHsqEnm3UhKi_adH-bMoIv6Qn5qLhy43LDj15OxQgjn85TuuBNIZ-JGev2IItVw/s1600-h/branding.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKK_rToE5AO_AnOOhVov2cNLCCVqnftR1ejH3BXD2LxACFQPojB_MXR2Jtc-XMkgYGZKPnhUg5E1o_AHsqEnm3UhKi_adH-bMoIv6Qn5qLhy43LDj15OxQgjn85TuuBNIZ-JGev2IItVw/s400/branding.jpg" alt="" id="BLOGGER_PHOTO_ID_5145111882005892546" border="0" /></a> <span style="font-weight: bold;">Search Box</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTj6eF4sUbxiiwLoFC4nEvmc0hOkI2v4UqOePyHWtTlVR21tocgt7Do7x0jpl2jtAtXDR6y_HdceOsPOFAlMahXo9Yo6bO6eEeEV6nGHZd-zSkSkNqDH8CcEQDxjSElWuTL1SPmkw8K2g/s1600-h/search.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTj6eF4sUbxiiwLoFC4nEvmc0hOkI2v4UqOePyHWtTlVR21tocgt7Do7x0jpl2jtAtXDR6y_HdceOsPOFAlMahXo9Yo6bO6eEeEV6nGHZd-zSkSkNqDH8CcEQDxjSElWuTL1SPmkw8K2g/s400/search.jpg" alt="" id="BLOGGER_PHOTO_ID_5145112663689940434" border="0" /></a><br /><span style="font-weight: bold;">Primary Navigation</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdExJPBeWh5yNwjWV6TKrBSk_8FCjM6XaZ3rGtJ70qV_JvDYxNJHobH2-pGHG_93QFBBl9L4WU_4Lttn8-U4gqJJlJD9aPSfkpkxJziA35oeFbEjaGnVutDNrwJGn9hxVRSFflwJWotjk/s1600-h/primarynav.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdExJPBeWh5yNwjWV6TKrBSk_8FCjM6XaZ3rGtJ70qV_JvDYxNJHobH2-pGHG_93QFBBl9L4WU_4Lttn8-U4gqJJlJD9aPSfkpkxJziA35oeFbEjaGnVutDNrwJGn9hxVRSFflwJWotjk/s400/primarynav.jpg" alt="" id="BLOGGER_PHOTO_ID_5145112990107454946" border="0" /></a><span style="font-weight: bold;">Secondary Navigation</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi12z6y32Ko7jWhlVyfjkKJYI7EaP9bzZAB0bv-Y_g3TpDDEp81S-aJaDZhRTVzREob8vSnSXX-dEIpEZSzEpGiSCT1tsLjYkXzcUMLy4IM2KXr6lKfx8h0ODhAUZkRDCgdPM17qpTJhyo/s1600-h/secondarynav.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi12z6y32Ko7jWhlVyfjkKJYI7EaP9bzZAB0bv-Y_g3TpDDEp81S-aJaDZhRTVzREob8vSnSXX-dEIpEZSzEpGiSCT1tsLjYkXzcUMLy4IM2KXr6lKfx8h0ODhAUZkRDCgdPM17qpTJhyo/s400/secondarynav.jpg" alt="" id="BLOGGER_PHOTO_ID_5145113161906146802" border="0" /></a><span style="font-weight: bold;">Main Photo</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlONQimpE_oZHxJkQUlOy7yRIkvVE1X16aaveWEtzzR_IyZ60rfM7l-eLYWj3H1UVldqeKIml3YXQtrH0gIzygZ-3Hp9qD2jArSiIslmpmJawJzvYBOHb3bPncvMs7bj6S4PATtw6K42g/s1600-h/mainphoto.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlONQimpE_oZHxJkQUlOy7yRIkvVE1X16aaveWEtzzR_IyZ60rfM7l-eLYWj3H1UVldqeKIml3YXQtrH0gIzygZ-3Hp9qD2jArSiIslmpmJawJzvYBOHb3bPncvMs7bj6S4PATtw6K42g/s400/mainphoto.jpg" alt="" id="BLOGGER_PHOTO_ID_5145113325114904066" border="0" /></a><br /><span style="font-weight: bold;">Other Photos</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1P1go_kod08wKgiXDkVjmrZS7qbPUNojFHkbrABb3raPWbceJ8sNXhGbLYlUrFqkVdkt38zYPIz62At0TOtcW4v2eh5IN7GxbvnMapHwoWcfpWQA1fAKltr2kzwdEVNYv3phjZL27N6A/s1600-h/otherphotos.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1P1go_kod08wKgiXDkVjmrZS7qbPUNojFHkbrABb3raPWbceJ8sNXhGbLYlUrFqkVdkt38zYPIz62At0TOtcW4v2eh5IN7GxbvnMapHwoWcfpWQA1fAKltr2kzwdEVNYv3phjZL27N6A/s400/otherphotos.jpg" alt="" id="BLOGGER_PHOTO_ID_5145113453963922962" border="0" /></a><br /><span style="font-weight: bold;">Feature Item</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioCrm39vEYLhEUBLpnedVmt-YRvwF10xnUwXIDkdXKOIkpnCqXMAFSCF1rKfm2TrQb_b3pLlEsJ1FQGc36gXI71KWute7398lT8Q_NvgEyhupff9F0t-BJO-Dj-q7eIaecibR30Czcdnc/s1600-h/feature.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioCrm39vEYLhEUBLpnedVmt-YRvwF10xnUwXIDkdXKOIkpnCqXMAFSCF1rKfm2TrQb_b3pLlEsJ1FQGc36gXI71KWute7398lT8Q_NvgEyhupff9F0t-BJO-Dj-q7eIaecibR30Czcdnc/s400/feature.jpg" alt="" id="BLOGGER_PHOTO_ID_5145113617172680226" border="0" /></a> <span style="font-weight: bold;">News</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrmjEvhdcN8XS098ETx2Uu33aL6cBb8ymZz1QNOZvB4BfE9ReQoA-WasD-63WI_dcn6CpKkmtm4I4mMAfJdd5Buo6B97YuBIfkLPOrq-ZBkdkc_GYkle4U6t9qwcGvKxFjxe1_w4kpMU/s1600-h/news.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrmjEvhdcN8XS098ETx2Uu33aL6cBb8ymZz1QNOZvB4BfE9ReQoA-WasD-63WI_dcn6CpKkmtm4I4mMAfJdd5Buo6B97YuBIfkLPOrq-ZBkdkc_GYkle4U6t9qwcGvKxFjxe1_w4kpMU/s400/news.jpg" alt="" id="BLOGGER_PHOTO_ID_5145113788971372082" border="0" /></a><span style="font-weight: bold;">Events/Calendar</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj40b4O_VpUCUA6RgAckSeJAo63LT8K5RTUMjJ0TvQCqLWr1ReDMDgiVx9hZKQS1KPphgCNangdRcgkocIn3f5xwdL7UcKq4rqhIdPuY-b2DQiUl2YJVb9bxlHQDTCgIUoSKJnx-Ktx6c4/s1600-h/events.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj40b4O_VpUCUA6RgAckSeJAo63LT8K5RTUMjJ0TvQCqLWr1ReDMDgiVx9hZKQS1KPphgCNangdRcgkocIn3f5xwdL7UcKq4rqhIdPuY-b2DQiUl2YJVb9bxlHQDTCgIUoSKJnx-Ktx6c4/s400/events.jpg" alt="" id="BLOGGER_PHOTO_ID_5145113952180129346" border="0" /></a><span style="font-weight: bold;">Quick Links</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9paNgB20QwYyh0-9w7H5jYM5R21p2GeV4PFme7-zc7DP11Yqj_LvrmV0IYYldaaBSm7eoyLx9Ei_kOgd4T8TqBfvTv3O5fAhuN3-CBNWhGOt9NL66FRDB-8dJR5Oe6gXawnkfjObb0I/s1600-h/quicklinks.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9paNgB20QwYyh0-9w7H5jYM5R21p2GeV4PFme7-zc7DP11Yqj_LvrmV0IYYldaaBSm7eoyLx9Ei_kOgd4T8TqBfvTv3O5fAhuN3-CBNWhGOt9NL66FRDB-8dJR5Oe6gXawnkfjObb0I/s400/quicklinks.jpg" alt="" id="BLOGGER_PHOTO_ID_5145115300799860306" border="0" /></a>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com0tag:blogger.com,1999:blog-7179165369598407091.post-91197754046404281422007-12-13T09:48:00.000-08:002008-05-01T10:41:09.533-07:00Analyzing the Future - Part 3 - Navigation<span style="font-style: italic;">A look at at links and navigational structures used on newly redesigned college/university home pages. Topical organizations (About, Admissions, Academics, etc.) are most popular in the most prominent navigational areas, while audience-oriented links are most common in secondary navigational areas. The usual crud (Contact, Directory, Site Map) is most common in tertiary navigation areas.</span><br /><br />Navigation (which links, what they're called, where they're placed, how they're grouped and organized) is probably the single most fascinating topic for me in reviewing Web sites.<br /><br />There are a lot of potential approaches, but interestingly enough there are actually a number of standout trends in the 18 sites I reviewed.<br /><br /><span style="font-weight: bold;font-size:130%;" >Methodology </span><br /><br />Gawddamn methodology again. What is this, some ivory tower university? Oh, yeah.<br /><br />I've done other examinations of home page navigation (<a href="http://futureendeavour.blogspot.com/2006/12/analysis-of-navigational-links-on-top.html">here</a> and <a href="http://futureendeavour.blogspot.com/2006/12/analysis-of-navigational-links-on-top_06.html">here</a>), and I will revisit those. But for this analysis, I wanted a slightly different approach.<br /><br />Home pages are complex entities, serving many purposes. As a result, most have more than a single navigational area (by navigational area, I mean a clearly defined area with a cluster of links and no other content).<br /><br />For the purposes of this analysis, I've broken these navigational areas into:<br /><ul><li><span style="font-weight: bold;">Primary navigation</span> (usually the largest and most prominent navigational area)</li><li><span style="font-weight: bold;">Secondary navigation</span> (usually not as prominent, but still easily identifiable, often providing a contrasting navigational scheme to the primary; e.g., audience vs. topical)</li><li><span style="font-weight: bold;">Tertiary navigation</span> (the fine print links typically clustered at the top and/or bottom of the page)</li></ul>Here's a good example:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0VpSEOYsGbgopmH5Htgv9f6BE_2D7Nox2K5UJDTLEKSW2ZhkSw_Fq2VfaKtzIv9Vc1ceHzaugGTVbq3qWGD_p2jmYaofHchBZXcRJMMmFBe4PVGy786guNzvRZoGWJlGuNZkHpvWsBa8/s1600-h/nav1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0VpSEOYsGbgopmH5Htgv9f6BE_2D7Nox2K5UJDTLEKSW2ZhkSw_Fq2VfaKtzIv9Vc1ceHzaugGTVbq3qWGD_p2jmYaofHchBZXcRJMMmFBe4PVGy786guNzvRZoGWJlGuNZkHpvWsBa8/s400/nav1.jpg" alt="" id="BLOGGER_PHOTO_ID_5143525299456921458" border="0" /></a><br /><span style="font-size:130%;"><span style="font-weight: bold;">Results</span></span><br /><br /><span style="font-weight: bold;">Primary and Secondary Navigation</span><br /><br />Virtually every home page examined had navigational areas that could be interpreted as primary, secondary and tertiary, though there could easily be disagreements as to which was primary and which secondary. I made my best guess.<br /><br />Far and away the most common navigational setup among these sites was to split the primary and secondary navigations between topical and audience-oriented organizations. Most common was to use the primary navigation for topical links and the secondary navigation for audience-oriented links, but a significant minority reversed this approach.<br /><br /><table str="" style="border-collapse: collapse; width: 288px; height: 49px;" border="0" cellpadding="0" cellspacing="0"><col style="width: 48pt;" span="3" width="64"> <tbody><tr style="height: 10.5pt;" height="14"> <td class="xl24" style="height: 10.5pt; width: 48pt;" height="14" width="64"><br /></td> <td class="xl24" style="width: 48pt; font-weight: bold; text-align: right;" width="64">Primary</td> <td class="xl24" style="width: 48pt; font-weight: bold; text-align: right;" width="64">Secondary</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl24" style="height: 10.5pt; font-weight: bold;" height="14">Topic</td> <td class="xl24" num="" align="right">12</td> <td class="xl24" num="" align="right">5</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl24" style="height: 10.5pt; font-weight: bold;" height="14">Audience</td> <td class="xl24" num="" align="right">4</td> <td class="xl24" num="" align="right">10</td> </tr> </tbody></table><br />The most common <span style="font-weight: bold;">topical links</span> in the primary and secondary nav areas were:<br /><br /><table str="" style="border-collapse: collapse; width: 331px; height: 97px;" border="0" cellpadding="0" cellspacing="0"><col style="width: 116pt;" width="154"> <col style="width: 52pt;" width="69"> <tbody><tr style="height: 10.5pt;" height="14"> <td class="xl24" style="height: 10.5pt; width: 116pt; font-weight: bold;" height="14" width="154">Link</td> <td class="xl24" style="width: 52pt; font-weight: bold; text-align: right;" width="69"># of Sites</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">About (university)<br /></td> <td class="xl25" num="" align="right">16</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Academics</td> <td class="xl25" num="" align="right">13</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Athletics</td> <td class="xl25" num="" align="right">12</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Admissions</td> <td class="xl25" num="" align="right">12</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Campus Life/Student Life</td> <td class="xl25" num="" align="right">11</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Research</td> <td class="xl25" num="" align="right">9</td> </tr> </tbody></table><br />Interestingly, "Programs" and "Colleges & Departments" (and equivalent terms), which I expected to be prominent, were not common at all. Programs appeared in the primary or secondary navigation only 4 times, and Colleges & Departments only twice.<br /><br />The most common <span style="font-weight: bold;">audience-oriented links</span> in the primary and secondary nav areas were:<br /><br /><table str="" style="border-collapse: collapse; width: 333px; height: 100px;" border="0" cellpadding="0" cellspacing="0"><col style="width: 116pt;" width="154"> <col style="width: 52pt;" width="69"> <tbody><tr style="height: 10.5pt;" height="14"> <td class="xl24" style="height: 10.5pt; width: 116pt; font-weight: bold;" height="14" width="154">Link</td> <td class="xl24" style="width: 52pt; font-weight: bold; text-align: right;" width="69"># of Sites</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Alumni</td> <td class="xl25" num="" align="right">16</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Current Students</td> <td class="xl25" num="" align="right">14</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Faculty/Staff</td> <td class="xl25" num="" align="right">13</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Prospective/Future Students</td> <td class="xl25" num="" align="right">10</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Parents</td> <td class="xl25" num="" align="right">8</td> </tr> </tbody></table><br /><span style="font-weight: bold;">Tertiary Navigation<br /></span><span><br /></span><span>Tert</span><span>iary navigation areas consist mostly of small links across the top or bottom of the page. The most common links in these areas were:<br /></span><span style="font-weight: bold;"><br /></span> <table str="" style="border-collapse: collapse; width: 333px; height: 136px;" border="0" cellpadding="0" cellspacing="0"><col style="width: 128pt;" width="171"> <col style="width: 116pt;" width="154"> <tbody><tr style="height: 10.5pt;" height="14"> <td class="xl24" style="height: 10.5pt; width: 128pt; font-weight: bold;" height="14" width="171">Link</td> <td class="xl24" style="width: 116pt; font-weight: bold; text-align: right;" width="154"># of Sites</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Contact Us<br /></td> <td class="xl25" num="" align="right">12</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Employment/Jobs</td> <td class="xl25" num="" align="right">9</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Directory/A-Z Index</td> <td class="xl25" num="" align="right">7</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Maps</td> <td class="xl25" num="" align="right">7</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Site Map</td> <td class="xl25" num="" align="right">7</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Giving</td> <td class="xl25" num="" align="right">6</td> </tr> <tr style="height: 10.5pt;" height="14"> <td class="xl25" style="height: 10.5pt;" height="14">Portal</td> <td class="xl25" num="" align="right">6</td> </tr> </tbody></table><br /><span style="font-weight: bold;">Number of Links</span><br /><br />The average number of links in each of the three navigational areas was between 5 and 6, though there was a higher variation in the tertiary links because they were scattered around the page. The primary nav tended to have more links than the secondary nav, which was more concentrated at 5 or 6 links long.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBtkfdoT6Lpzwqtp-GET-zHT8bNaid2ZCLSmfsXBFzVHGmtLQIaTXw0q3VeayTWF4tYAazKj2APU-v5ZkTL3fEQnBrlzzNE6rPVh9EccbdXkcELdGI66qsuzcczR5sMvx_FcwsowzMpbE/s1600-h/links_per_nav_section.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBtkfdoT6Lpzwqtp-GET-zHT8bNaid2ZCLSmfsXBFzVHGmtLQIaTXw0q3VeayTWF4tYAazKj2APU-v5ZkTL3fEQnBrlzzNE6rPVh9EccbdXkcELdGI66qsuzcczR5sMvx_FcwsowzMpbE/s400/links_per_nav_section.jpg" alt="" id="BLOGGER_PHOTO_ID_5143543222355447682" border="0" /></a>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com1tag:blogger.com,1999:blog-7179165369598407091.post-44255323786843098092007-12-12T15:54:00.000-08:002008-05-01T10:41:09.534-07:00Analyzing the Future - Part 2 - Page Dimensions<span style="font-style: italic;">Looking at page dimensions of newly redesigned college/university home pages.</span><br /><br />In my <a href="http://futureendeavour.blogspot.com/2007/12/analyzing-future-part-1.html">last post</a>, I selected 18 newly redesigned college or university home pages to analyze, looking for trends, best practices, etc.<br /><br />So what first?<br /><br />Well, one of my pet peeves are pages that are too wide to fit on my 640x480 monitor.<br /><br />OK, OK, I have two 1280x1024 monitors on my desk, but in general, I find that a browser window width of about 900-960 is the most comfortable for me. I HATE having to blow my browser up to full screen to see a whole page. Other people on campus have different, less correct, opinions on the matter. But hey, that's just my personal opinion.<br /><br />So, the first thing I looked at were page sizes, both minimum width (the point at which horizontal scroll bars appear) and total height.<br /><br /><table str="" style="border-collapse: collapse; width: 461px; height: 396px;" border="0" cellpadding="0" cellspacing="0"><col style="width: 178pt;" width="237"> <col style="width: 73pt;" width="97"> <col style="width: 53pt;" width="71"> <tbody><tr style="height: 10.5pt;" height="14"> <td class="xl24" style="height: 10.5pt; width: 178pt; font-weight: bold;" height="14" width="237">Site</td> <td class="xl24" style="width: 73pt; font-weight: bold; text-align: right;" width="97">Min Width</td> <td class="xl24" style="width: 53pt; font-weight: bold; text-align: right;" width="71">Height</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Rocky Mt. College of Art+Design</td> <td class="xl25" num="" align="right">795</td> <td class="xl25" num="" align="right">1619</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Skidmore College</td> <td class="xl25" num="" align="right">805</td> <td class="xl25" num="" align="right">1105</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">IUPUI</td> <td class="xl25" num="" align="right">825</td> <td class="xl25" num="" align="right">1022</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Our Lady of Holy Cross College</td> <td class="xl25" num="" align="right">825</td> <td class="xl25" num="" align="right">920</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">University of St. Thomas</td> <td class="xl25" num="" align="right">829</td> <td class="xl25" num="" align="right">812</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Biola University</td> <td class="xl25" num="" align="right">839</td> <td class="xl25" num="" align="right">1309</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Imperial College</td> <td class="xl25" num="" align="right">875</td> <td class="xl25" num="" align="right">766</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Rice University</td> <td class="xl25" num="" align="right">925</td> <td class="xl25" num="" align="right">1084</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">North Carolina State University</td> <td class="xl25" num="" align="right">927</td> <td class="xl25" num="" align="right">1103</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Loyola Marymount</td> <td class="xl25" num="" align="right">950</td> <td class="xl25" num="" align="right">1052</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Portland State University</td> <td class="xl25" num="" align="right">984</td> <td class="xl25" num="" align="right">798</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Notre Dame University</td> <td class="xl25" num="" align="right">985</td> <td class="xl25" num="" align="right">1075</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">University of Tennessee - Knoxville</td> <td class="xl25" num="" align="right">985</td> <td class="xl25" num="" align="right">1085</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Cornell College</td> <td class="xl25" num="" align="right">1006</td> <td class="xl25" num="" align="right">905</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Saxion Universities<br /></td> <td class="xl25" num="" align="right">1015</td> <td class="xl25" num="" align="right">950</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Denver Seminary</td> <td class="xl25" num="" align="right">1015</td> <td class="xl25" num="" align="right">1050</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Ball State University</td> <td class="xl25" num="" align="right">1025</td> <td class="xl25" num="" align="right">846</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt;" height="17">Carnegie Mellon University</td> <td class="xl25" num="" align="right">1029</td> <td class="xl25" num="" align="right">981</td> </tr> <tr style="height: 12.75pt;" height="17"> <td class="xl25" style="height: 12.75pt; font-weight: bold;" height="17">Average<br /></td> <td style="font-weight: bold;" class="xl26" num="924.38888888888891" fmla="=AVERAGE(B2:B19)" align="right">924.4</td> <td style="font-weight: bold;" class="xl26" num="1026.7777777777778" fmla="=AVERAGE(C2:C19)" align="right">1026.8</td> </tr> </tbody></table><br />This chart shows things a bit more visually:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkKDs__cOPvC-nRyIBJRE3OYx6em2BkpLT2pA_lCErJicmxgHEv2hU9_lDt-8YEtXHzCisE25Q3jWb6Bn5OA29VZ1MWdlnzXOgSq_ifF3X_6MeaK5F2hVkz4Ey7S8JJRhr9xQbBY8mpRU/s1600-h/widths.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkKDs__cOPvC-nRyIBJRE3OYx6em2BkpLT2pA_lCErJicmxgHEv2hU9_lDt-8YEtXHzCisE25Q3jWb6Bn5OA29VZ1MWdlnzXOgSq_ifF3X_6MeaK5F2hVkz4Ey7S8JJRhr9xQbBY8mpRU/s400/widths.jpg" alt="" id="BLOGGER_PHOTO_ID_5164308695393073922" border="0" /></a>Given an average of 20 pixels of horizontal chrome and 120 vertical pixels of browser chrome, effective viewport sizes are about 1000x650 (for 1024x768) and 1260x900 (for 1280x1024).<br /><br />You can see that there are two width clusters, one around 800 pixels wide, and another around 1000 pixels. You would think that this reflects people designing pages for 800 pixel and 1024 pixel monitors, but all but one of the pages in the ~800 pixel width group are actually <span style="font-weight: bold;">more </span>than 800 pixels wide. So, something besides monitor size is driving that width decision.<br /><br />Also note that with two exceptions, page heights are clustered between 750 and 1100 pixels, which, with browser chrome, is generally more than a screen tall on a 1280x1024 monitor.<br /><br />At Chico State, Google Analytics show over 40% of users are using monitors of 1024 or fewer pixels width.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9yuzVynibiPloQPRQUKaRrhtSiVn9Janf5kuVKqjaqngFMk1F_a-ww_5z8g9olmf33i1rEL7vVNzM4UIFIUGsJFe2SgII1l0Bnrwagps57zsgAXGgJ_I5WnXt3aFFjXFnLRoYiPRNmU/s1600-h/mon_width.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9yuzVynibiPloQPRQUKaRrhtSiVn9Janf5kuVKqjaqngFMk1F_a-ww_5z8g9olmf33i1rEL7vVNzM4UIFIUGsJFe2SgII1l0Bnrwagps57zsgAXGgJ_I5WnXt3aFFjXFnLRoYiPRNmU/s400/mon_width.jpg" alt="" id="BLOGGER_PHOTO_ID_5143512680843005778" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPKb0lBEL8BAuTbxB5MrATshXyOxW1ElhGP8PbL6wI2CSN73ilJ1xU3f3QN8eF6WEIFOvmpvs8vnI04uGiJLwNvmw6EffLMLE84T-WL_-s0WRRXwSuF2AcZjwfDKLiBZIIuGFW-XugMc/s1600-h/mon_height.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPKb0lBEL8BAuTbxB5MrATshXyOxW1ElhGP8PbL6wI2CSN73ilJ1xU3f3QN8eF6WEIFOvmpvs8vnI04uGiJLwNvmw6EffLMLE84T-WL_-s0WRRXwSuF2AcZjwfDKLiBZIIuGFW-XugMc/s400/mon_height.jpg" alt="" id="BLOGGER_PHOTO_ID_5143512912771239778" border="0" /></a>Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com0tag:blogger.com,1999:blog-7179165369598407091.post-40910491108334312132007-12-12T15:14:00.000-08:002008-02-11T16:50:03.595-08:00Analyzing the Future - Part 1<span style="font-style: italic;">Selecting 18 newly redesigned college home pages to analyze for trends in design, navigation, structure, content and technologies.</span><br /><br />Today, we finally got 'official' word that the redesign of the Chico State home page is a priority project. That means that within three years we'll have a new home page!<br /><br />Well-placed sarcasm aside, it's a good time to begin taking a fresh look at what other colleges and universities are doing with their redesigns. Not that we will necessarily want to copy them, but in order to be able to say (with authority), "these are the trends", "this is a common practice", "70% of the sites reviewed are taking this approach".<br /><br />As some wise person said, "When decisions are based on opinions, he who yells loudest wins." And the point here - as it has been from day one of this blog - is to elevate the discussion above opinions to actual facts based on research (sloppy, biased and subjective research, yes, but still research).<br /><br /><span style="font-size:130%;">Methodology</span><br /><br />I went to the <a href="http://edustyle.net/">eduStyle.net</a> site and selected redesigned sites to review based on the following criteria:<br /><ol><li>Site must have been redesigned within the past year</li><li>Site must have at least three positive votes ("My style") as of 12/12/07<br /></li><li>Site must have more positive votes than negative votes as of 12/12/07</li><li>Site must be college or university main home page<br /></li></ol>I used these criteria because I wanted relatively new home pages that have received a positive response from the eduStyle community. While it's true that many of those people are designers (as opposed to information architects, etc.), I feel that overall, it's a legitimate barometer... and it has the added benefit of removing my personal biases from the selection process.<br /><br />I ended up with 18 sites that met my criteria:<br /><ul><li><a href="http://www.saxion.edu/">Saxion Universities of Applied Sciences</a></li><li><a href="http://www.rice.edu/">Rice University</a></li><li><a href="http://www.denverseminary.edu/">Denver Seminary</a></li><li><a href="http://www.iupui.edu/">Indiana University - Purdue University Indianapolis</a></li><li><a href="http://cornellcollege.edu/">Cornell College</a></li><li><a href="http://www3.imperial.ac.uk/">Imperial College London</a><br /></li><li><a href="http://www.lmu.edu/site4.aspx">Loyola Marymount University</a></li><li><a href="http://cms.bsu.edu/">Ball State University</a></li><li><a href="http://www.cmu.edu/index.shtml">Carnegie Mellon University</a></li><li><a href="http://www.nd.edu/">Notre Dame University</a></li><li><a href="http://www.pdx.edu/">Portland State University</a></li><li><a href="http://www.biola.edu/">Biola University</a></li><li><a href="http://www.utk.edu/">University of Tennessee - Knoxville</a></li><li><a href="http://www.rmcad.edu/">Rocky Mt. College of Art+Design</a></li><li><a href="http://ncsu.edu/">North Carolina State University</a></li><li><a href="http://www.stthomas.edu/">University of St. Thomas</a></li><li><a href="http://www.olhcc.edu/">Our Lady of Holy Cross College</a></li><li><a href="http://cms.skidmore.edu/index.cfm">Skidmore College</a></li></ul>Over the next week or so, I'll be looking at these home pages from structural, organizational, navigational, design, content, and technological perspectives, looking for trends, best practices, and things that we can out right steal for the new Chico State home page.Tony Dunnhttp://www.blogger.com/profile/00985905348392153143noreply@blogger.com1