In order to keep the serious stuff from the cartoons, I'm creating a new cartoon blog called "Tales from Redesignland" to chronicle the lives of us poor web developers... particularly those in higher education.
Y'all come visit us, y'hear?
Thursday, December 20, 2007
Tuesday, December 18, 2007
Thoughts on the Redesign Process - The Cartoon Version
No, I'm not bored, I've just wrapped up all of my projects for the semester.
I saw this page 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.
1. Get the right high-level decision-making organization in place
Their role is thinking about big picture issues, not micromanaging the process or the design.
2. Assemble the Redesign Team
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.
3. Define High-level Redesign Goals
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.
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.
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.
Wrong: "I think that going with an Aqua-style design, but in green, would be best."
Right: "How do you envision the redesign affecting our branding?"
Wrong: "We should have more dropdown menus!"
Right: "One of our top goals is to simplify the interface of the home page and reduce the clutter of links."
4. Establish Scope, Timeline and Budget
Scope creep will kill you. Avoid it.
5. Establish Standards
Assemble the full redesign team to discuss and establish standards for coding, design, labeling, content, security, accessibility, etc.
6. Do your Homework
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.
7. Profile Site Users
Profiling is good. Get your 'user experience' group together (graphic designer, communications specialist, information architect and usability designer) and construct several personas 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.
8. Develop & Test Information Architecture(s)
Building off your work with personas and scenarios, begin building out structures and organization...
... and testing them on users using card sorts and wireframes.
9. Develop & Test Visual Designs
Hopefully, you'll have gotten some general design direction from the stakeholders to give you a start.
Show designs to stakeholders and focus groups of users. Refine and repeat until you have final approval.
10. Create and Test a "Protosite"
Probably the smartest thing you'll ever do.
11. Create and Implement Real Site
After fixing all of your mistakes on the protosite, time to build out and test the real thing.
12. Finish Documentation
13. Go Live
14. Plan for Maintenance
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.
I saw this page 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.
1. Get the right high-level decision-making organization in place
Their role is thinking about big picture issues, not micromanaging the process or the design.
2. Assemble the Redesign Team
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.
3. Define High-level Redesign Goals
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.
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.
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.
Wrong: "I think that going with an Aqua-style design, but in green, would be best."
Right: "How do you envision the redesign affecting our branding?"
Wrong: "We should have more dropdown menus!"
Right: "One of our top goals is to simplify the interface of the home page and reduce the clutter of links."
4. Establish Scope, Timeline and Budget
Scope creep will kill you. Avoid it.
5. Establish Standards
Assemble the full redesign team to discuss and establish standards for coding, design, labeling, content, security, accessibility, etc.
6. Do your HomeworkEveryone 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.
7. Profile Site Users
Profiling is good. Get your 'user experience' group together (graphic designer, communications specialist, information architect and usability designer) and construct several personas 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.
8. Develop & Test Information Architecture(s)
Building off your work with personas and scenarios, begin building out structures and organization...
... and testing them on users using card sorts and wireframes.
9. Develop & Test Visual Designs
Hopefully, you'll have gotten some general design direction from the stakeholders to give you a start.
Show designs to stakeholders and focus groups of users. Refine and repeat until you have final approval.
10. Create and Test a "Protosite"
Probably the smartest thing you'll ever do.
11. Create and Implement Real Site
After fixing all of your mistakes on the protosite, time to build out and test the real thing.
12. Finish Documentation
13. Go Live
14. Plan for Maintenance
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.
Thoughts on the Redesign Process
A look the redesign process for the CSU, Chico home page.
The key to success for any large-scale Web site redesign is a process that works.
Four years ago, I put together a PowerPoint presentation 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.
The Short Version (for the attention-impaired)
1. Get the right high-level decision-making organization in place
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.
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.
At Chico State, we have a brand new Web Governance committee, consisting of the CIO and vice presidents.
2. Assemble the Redesign Team
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.
A large scale redesign like a university Web site requires a number of roles (one person may fill several roles):
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.
3. Define High-level Redesign Goals
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.
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.
Example goals might include:
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.
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).
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:
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:
To better understand your existing site, you should:
7. Profile Site Users
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.
Some steps in profiling:
Now we start to get to the meat of the process.
To most people, this phase is the only phase of a redesign. Certainly, it is the most visible.
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.
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.
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.
12. Finish Documentation
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.
Finally. Couldn't we have just hired a student to do a new home page and left it at that?
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.
The key to success for any large-scale Web site redesign is a process that works.
Four years ago, I put together a PowerPoint presentation 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.
The Short Version (for the attention-impaired)
- Get the right high-level decision-making organization in place
- Assemble the Redesign Team
- Define High-level Redesign Goals
- Establish Scope, Timeline and Budget
- Establish Standards
- Do Your Homework
- Profile Site Users
- Develop & Test Information Architecture(s)
- Develop & Test Visual Designs
- Create and Test a "Protosite"
- Create and Implement Real Site
- Finish Documentation
- Go Live
- Plan for Maintenance
1. Get the right high-level decision-making organization in place
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.
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.
At Chico State, we have a brand new Web Governance committee, consisting of the CIO and vice presidents.
2. Assemble the Redesign Team
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.
A large scale redesign like a university Web site requires a number of roles (one person may fill several roles):
- Project Lead
- Technical Lead
- Graphic/Visual Designer
- Information Architect
- Interaction/Usability Designer
- HTML Coder
- Programmer
- Web Server Administrator
- Multimedia Developer
- Photographer
- Accessibility Designer
- Writer
- Content Manager/Editor
- Communications Specialist
- Quality Assurance
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.
3. Define High-level Redesign Goals
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.
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.
Example goals might include:
- Create new, fresher, more “hip” look
- Implement strategic goals for university web presence
- Improve navigation/site structure
- Make site easier to use
- Address accessibility issues
- Attract more new students
- Fulfill university core objectives
- Improve site performance
- Make site easier to maintain/change
- Enhance university image/branding
- Increase design consistency across entire site
- Implement new technologies (e.g., WCMS)
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.
- Establish a clear list of what will and will not be done
- Clearly define personnel to be involved (including timebase and responsibilities)
- Establish clear milestones
- Plan for content lag
- Write a detailed production plan outlining major goals, strategy, resources & timeline
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).
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:
- Coding (XHTML, CSS, file naming, etc.)
- Accessibility
- Security
- Graphic design
- Communications (branding, brand usage)
- Labeling
- Content (writing guidelines, etc.)
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:
- Analyze and test your existing site
- Educate yourself as to what other sites are doing
To better understand your existing site, you should:
- Examine log files for usage and patterns (Google Analytics is great for this)
- Do a page structure analysis
- Create a visual site map to better understand the site’s existing structure
- Conduct usability testing of existing site (to identify specific problems)
- Audit existing content
7. Profile Site Users
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.
Some steps in profiling:
- Categorize users (currents students, faculty staff, alumni, etc.)
- What are their characteristics?
- Demographics
- Browser versions used
- Internet access (broadband/modem)
- Develop personas for testing/designing purposes
- 6-8 should be sufficient
- Why personas?
- They personalize the users you are designing for
- Helps you visualize how each persona might approach the site
- Used in testing scenarios (how would Davin the art student use this feature?)
Now we start to get to the meat of the process.
- Examine what other universities have done
- Develop taxonomies
- Do card sorting tests
- Conduct task analysis for common tasks that have poor task modeling on current site
- Develop site maps
- Develop and test wireframes
- Conduct user scenarios to keep IA on track
- Get feedback from administration on IA finalists
To most people, this phase is the only phase of a redesign. Certainly, it is the most visible.
- Develop design concepts
- Refine into designs (must follow wireframes)
- Insure that designs stick to the architecture
- Get feedback (e.g., focus groups)
- Get approval (powers that be must sign off on the design)
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.
- Create skeleton site (ising proposed visual design, navigation & site structure)
- Multiple alternate designs can be tested
- Conduct usability testing with real users
- Refine design and structure based on results
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.
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.
12. Finish Documentation
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.
- Style Guide (fonts, colors, page dimensions, banners, etc.)
- Production Standards Guide (file naming conventions, code standards, CSS, etc.)
- Page Templates (can be in WCMS)
Finally. Couldn't we have just hired a student to do a new home page and left it at that?
- Freeze all design and content
- Complete QA testing
- Plan announcement strategy (vitally important! - people HATE surprises)
- Consider phased, or soft, launch
- Have a “What’s Changed” page
- Transfer to live server
- Party!
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.
- Get post-launch feedback from users
- Fix bugs, serious problems
- Determine who is responsible for maintaining what
- Train departmental editors (make them familiar with standards, and with maintaining site integrity)
Monday, December 17, 2007
Analyzing the Future - Part 4 - Home Page Elements
An analysis of the placement of page elements on 18 newly redesigned college/university home pages.
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 here. The difference here is that the sites I'm looking at are completely different and they've all been redesigned within the past year.
I've changed a few bits this time around, so I went back and redid the numbers from last time to properly correspond.
Most Common Page Elements
No major changes here except that features and events have become more popular, and "quick links" have become much less popular.
Page Element Placement
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:
Identity/Logo
Search Box
Primary Navigation
Secondary Navigation
Main Photo
Other Photos
Feature Item
News
Events/Calendar
Quick Links
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 here. The difference here is that the sites I'm looking at are completely different and they've all been redesigned within the past year.
I've changed a few bits this time around, so I went back and redid the numbers from last time to properly correspond.
Most Common Page Elements
No major changes here except that features and events have become more popular, and "quick links" have become much less popular.
| Element | Sites 2006 | Sites 2007 |
| Photos | 100% | 100% |
| Primary Navigation | 100% | 100% |
| Search Box | 100% | 94% |
| News | 85% | 83% |
| Top Banner | 90% | 78% |
| Secondary Navigation | 70% | 78% |
| Feature/Spotlight | 55% | 78% |
| Events | 30% | 67% |
| Quick Links | 45% | 22% |
Page Element Placement
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:
- Identity/logo branding is more consistently placed in the upper left-hand corner
- Search box placement in the upper right-hand corner has become almost universal
- Primary navigation is less concentrated on the left side of the page, and is becoming more common on the top or upper right
- Secondary photos have become more common and tend to be concentrated below and to the right of the main photo
- Feature item area is increasing in size
- News and events continue to be concentrated on the lower left-hand and right-hand portions of the page (respectively)
Identity/Logo
Search Box
Primary Navigation
Secondary Navigation
Main Photo
Other Photos
Feature Item
News
Events/Calendar
Quick Links
Thursday, December 13, 2007
Analyzing the Future - Part 3 - Navigation
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.
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.
There are a lot of potential approaches, but interestingly enough there are actually a number of standout trends in the 18 sites I reviewed.
Methodology
Gawddamn methodology again. What is this, some ivory tower university? Oh, yeah.
I've done other examinations of home page navigation (here and here), and I will revisit those. But for this analysis, I wanted a slightly different approach.
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).
For the purposes of this analysis, I've broken these navigational areas into:
Results
Primary and Secondary Navigation
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.
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.
The most common topical links in the primary and secondary nav areas were:
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.
The most common audience-oriented links in the primary and secondary nav areas were:
Tertiary Navigation
Tertiary navigation areas consist mostly of small links across the top or bottom of the page. The most common links in these areas were:
Number of Links
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.
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.
There are a lot of potential approaches, but interestingly enough there are actually a number of standout trends in the 18 sites I reviewed.
Methodology
Gawddamn methodology again. What is this, some ivory tower university? Oh, yeah.
I've done other examinations of home page navigation (here and here), and I will revisit those. But for this analysis, I wanted a slightly different approach.
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).
For the purposes of this analysis, I've broken these navigational areas into:
- Primary navigation (usually the largest and most prominent navigational area)
- Secondary navigation (usually not as prominent, but still easily identifiable, often providing a contrasting navigational scheme to the primary; e.g., audience vs. topical)
- Tertiary navigation (the fine print links typically clustered at the top and/or bottom of the page)
Results
Primary and Secondary Navigation
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.
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.
| Primary | Secondary | |
| Topic | 12 | 5 |
| Audience | 4 | 10 |
The most common topical links in the primary and secondary nav areas were:
| Link | # of Sites |
| About (university) | 16 |
| Academics | 13 |
| Athletics | 12 |
| Admissions | 12 |
| Campus Life/Student Life | 11 |
| Research | 9 |
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.
The most common audience-oriented links in the primary and secondary nav areas were:
| Link | # of Sites |
| Alumni | 16 |
| Current Students | 14 |
| Faculty/Staff | 13 |
| Prospective/Future Students | 10 |
| Parents | 8 |
Tertiary Navigation
Tertiary navigation areas consist mostly of small links across the top or bottom of the page. The most common links in these areas were:
| Link | # of Sites |
| Contact Us | 12 |
| Employment/Jobs | 9 |
| Directory/A-Z Index | 7 |
| Maps | 7 |
| Site Map | 7 |
| Giving | 6 |
| Portal | 6 |
Number of Links
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.
Wednesday, December 12, 2007
Analyzing the Future - Part 2 - Page Dimensions
Looking at page dimensions of newly redesigned college/university home pages.
In my last post, I selected 18 newly redesigned college or university home pages to analyze, looking for trends, best practices, etc.
So what first?
Well, one of my pet peeves are pages that are too wide to fit on my 640x480 monitor.
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.
So, the first thing I looked at were page sizes, both minimum width (the point at which horizontal scroll bars appear) and total height.
This chart shows things a bit more visually:
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).
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 more than 800 pixels wide. So, something besides monitor size is driving that width decision.
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.
At Chico State, Google Analytics show over 40% of users are using monitors of 1024 or fewer pixels width.
In my last post, I selected 18 newly redesigned college or university home pages to analyze, looking for trends, best practices, etc.
So what first?
Well, one of my pet peeves are pages that are too wide to fit on my 640x480 monitor.
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.
So, the first thing I looked at were page sizes, both minimum width (the point at which horizontal scroll bars appear) and total height.
| Site | Min Width | Height |
| Rocky Mt. College of Art+Design | 795 | 1619 |
| Skidmore College | 805 | 1105 |
| IUPUI | 825 | 1022 |
| Our Lady of Holy Cross College | 825 | 920 |
| University of St. Thomas | 829 | 812 |
| Biola University | 839 | 1309 |
| Imperial College | 875 | 766 |
| Rice University | 925 | 1084 |
| North Carolina State University | 927 | 1103 |
| Loyola Marymount | 950 | 1052 |
| Portland State University | 984 | 798 |
| Notre Dame University | 985 | 1075 |
| University of Tennessee - Knoxville | 985 | 1085 |
| Cornell College | 1006 | 905 |
| Saxion Universities | 1015 | 950 |
| Denver Seminary | 1015 | 1050 |
| Ball State University | 1025 | 846 |
| Carnegie Mellon University | 1029 | 981 |
| Average | 924.4 | 1026.8 |
This chart shows things a bit more visually:
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).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 more than 800 pixels wide. So, something besides monitor size is driving that width decision.
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.
At Chico State, Google Analytics show over 40% of users are using monitors of 1024 or fewer pixels width.
Analyzing the Future - Part 1
Selecting 18 newly redesigned college home pages to analyze for trends in design, navigation, structure, content and technologies.
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!
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".
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).
Methodology
I went to the eduStyle.net site and selected redesigned sites to review based on the following criteria:
I ended up with 18 sites that met my criteria:
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!
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".
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).
Methodology
I went to the eduStyle.net site and selected redesigned sites to review based on the following criteria:
- Site must have been redesigned within the past year
- Site must have at least three positive votes ("My style") as of 12/12/07
- Site must have more positive votes than negative votes as of 12/12/07
- Site must be college or university main home page
I ended up with 18 sites that met my criteria:
- Saxion Universities of Applied Sciences
- Rice University
- Denver Seminary
- Indiana University - Purdue University Indianapolis
- Cornell College
- Imperial College London
- Loyola Marymount University
- Ball State University
- Carnegie Mellon University
- Notre Dame University
- Portland State University
- Biola University
- University of Tennessee - Knoxville
- Rocky Mt. College of Art+Design
- North Carolina State University
- University of St. Thomas
- Our Lady of Holy Cross College
- Skidmore College
Monday, November 26, 2007
Multi-variate Browsing for Booze
How multivariate "smart browsing" can dramatically enhance the user experience.
I've commented in a previous post about the conceptual tug of war between search and browse on the Web.
Obviously, they both have their place. What I've been noticing lately is that differences in how a site lets you browse through information can have a dramatic impact on the user experience.
Let's take a couple of sites as an example.
Corporate Wines
wine.com
Yes, it's true that these aren't university Web sites, and at Chico State, booze is a sensitive subject. But in my other life, I'm a wine columnist, so I spend a lot of time shopping for (but not necessarily buying) wine.
Let's say that you had a bottle of 2002 Rodney Strong Symmetry and want to buy another. On both sites, you can get to it pretty quickly using the search box (though admittedly, the search function at wine.com is much, much better).
But what if you're looking for a 90+ point Napa Cabernet Sauvignon for under $40?
That sort of multi-variate search can be very difficult to handle via a search box. It's very easy to end up with more noise than signal in the search results. A high functioning browse structure ("smart browsing") can be a better way to go. Let's see how the sites handle it...
First of all, the Corporate Wine site doesn't show wine ratings, so right off the bat you're at a disadvantage. Second, the only thing they let you browse by is region - "California". Once there, you have to slog through 889 wines. At this point, I've already given up.
On the other hand, the wine.com site lets you refine your browsing criteria on the fly by price, type, region and rating. And the type and region filters have multiple levels, so once you select California, you can further refine your browse to only Napa Valley.
In just six clicks, I've narrowed my browse down to Napa Valley Cabs between $20-$40, and sorted them with top rated wines at the top.
I really like the ability to refine my browsing criteria on the fly, and I think wine.com does just about the best job of this of any wine Web site (though Vinfolio is just as good - and has better wines). I only wish that they had a decent wine selection to make it worth visiting their site. They should also add vintage to the list of variables that you can use to refine your browse.
OK, so how does this apply to university Web sites? I'm really not sure. This approach obviously has serious advantages when doing a multi-variate browse (e.g., price, type, region, rating, vintage), but probably has little, if any, advantage on a single-variate browse.
It might have some value where students are trying to browse through program listings. Let's say you're looking for Master's programs in the College of Engineering... in that case, maybe it would be helpful, but I'm not sure that students would be randomly looking for Master's programs.
Regardless, it's worth giving consideration to exactly how browsing your site works, and its worth realizing that browsing can depend on more than just your information architecture. For me, I'm going to stick this in the back of my mind, so that when a situation that would benefit from this approach appears, I'll be able to go, "Ah ha!"
I've commented in a previous post about the conceptual tug of war between search and browse on the Web.
Obviously, they both have their place. What I've been noticing lately is that differences in how a site lets you browse through information can have a dramatic impact on the user experience.
Let's take a couple of sites as an example.
Corporate Wines
wine.com
Yes, it's true that these aren't university Web sites, and at Chico State, booze is a sensitive subject. But in my other life, I'm a wine columnist, so I spend a lot of time shopping for (but not necessarily buying) wine.
Let's say that you had a bottle of 2002 Rodney Strong Symmetry and want to buy another. On both sites, you can get to it pretty quickly using the search box (though admittedly, the search function at wine.com is much, much better).
But what if you're looking for a 90+ point Napa Cabernet Sauvignon for under $40?
That sort of multi-variate search can be very difficult to handle via a search box. It's very easy to end up with more noise than signal in the search results. A high functioning browse structure ("smart browsing") can be a better way to go. Let's see how the sites handle it...
First of all, the Corporate Wine site doesn't show wine ratings, so right off the bat you're at a disadvantage. Second, the only thing they let you browse by is region - "California". Once there, you have to slog through 889 wines. At this point, I've already given up.
On the other hand, the wine.com site lets you refine your browsing criteria on the fly by price, type, region and rating. And the type and region filters have multiple levels, so once you select California, you can further refine your browse to only Napa Valley.
In just six clicks, I've narrowed my browse down to Napa Valley Cabs between $20-$40, and sorted them with top rated wines at the top.
I really like the ability to refine my browsing criteria on the fly, and I think wine.com does just about the best job of this of any wine Web site (though Vinfolio is just as good - and has better wines). I only wish that they had a decent wine selection to make it worth visiting their site. They should also add vintage to the list of variables that you can use to refine your browse.
OK, so how does this apply to university Web sites? I'm really not sure. This approach obviously has serious advantages when doing a multi-variate browse (e.g., price, type, region, rating, vintage), but probably has little, if any, advantage on a single-variate browse.
It might have some value where students are trying to browse through program listings. Let's say you're looking for Master's programs in the College of Engineering... in that case, maybe it would be helpful, but I'm not sure that students would be randomly looking for Master's programs.
Regardless, it's worth giving consideration to exactly how browsing your site works, and its worth realizing that browsing can depend on more than just your information architecture. For me, I'm going to stick this in the back of my mind, so that when a situation that would benefit from this approach appears, I'll be able to go, "Ah ha!"
Tuesday, November 20, 2007
The Carousel of Mystery - Information Visibility on the University of Notre Dame Home Page
Disturbing trends in information visibility and why I don't like the Flash carousel on the Notre Dame home page.
The University of Notre Dame home page was redesigned last August and was featured last month on the eduStyle Web site.
Notre Dame Home Page
A lot of people like this design, particularly the Flash "carousel" of news. Though overall I think the design is fine, the Flash carousel is exactly the thing about the page I don't like.
It's not that it's particularly badly designed, but it demonstrates a continuing and growing trend in Web development and design toward lower and lower information visibility. In some ways, this is inevitable, as more and more content and links are crammed onto pages, but my personal opinion is that whenever you hide something, you hurt yourself.
So what's my beef with the carousel?
You could argue that it's an improvement over the random static feature used on a lot of sites, by providing a number of partially visible features, but I wonder if user testing would show to be much of an improvement.
Better, I think, to have one feature prominent, but have all the other features visible, something like the way Ohio State does it.
That way, I can see all of the features. If the most prominent one doesn't interest me, maybe one of the others will. They certainly won't if I can't see them.
The bottom line to me is: If you hide information, it might as well not exist.
The University of Notre Dame home page was redesigned last August and was featured last month on the eduStyle Web site.
Notre Dame Home PageA lot of people like this design, particularly the Flash "carousel" of news. Though overall I think the design is fine, the Flash carousel is exactly the thing about the page I don't like.
It's not that it's particularly badly designed, but it demonstrates a continuing and growing trend in Web development and design toward lower and lower information visibility. In some ways, this is inevitable, as more and more content and links are crammed onto pages, but my personal opinion is that whenever you hide something, you hurt yourself.
So what's my beef with the carousel?
- How many features are there?
- How do I navigate them?
- Are there any that are interesting to me?
- Is there any way to know without going through them all?
- I'm busy, I don't have time to poke through all these to find something interesting. Why are you making me do this?
- In fact, I'm not going to do this. I'm going to ignore it and look for the link I want.
You could argue that it's an improvement over the random static feature used on a lot of sites, by providing a number of partially visible features, but I wonder if user testing would show to be much of an improvement.
Better, I think, to have one feature prominent, but have all the other features visible, something like the way Ohio State does it.
That way, I can see all of the features. If the most prominent one doesn't interest me, maybe one of the others will. They certainly won't if I can't see them.
The bottom line to me is: If you hide information, it might as well not exist.
Wednesday, November 14, 2007
The Future of the University Web Site
Focusing the university home page to act as a portal to audience-specific "sub-sites", instead of a catch all everything-to-everyone page.
Users' expectations of Web sites has evolved rapidly over the past few years - and continues to evolve. The concept that a "single" Web site can meet the needs of the wide variety of audiences that come to a university Web site is no longer valid. Users expect a tailored experience, designed specifically to meet their needs, address their concerns, and to fit their mental model of the site. No one "all purpose" university Web site can hope to do this - except to do it poorly.
In fact, a university's Web site is not a single site, but instead a collection of a wide variety of sites, each serving specific audiences and specific needs, and each providing a different facet of what the University is. Accounting Operations, the College of Business, and University Housing are each part of the university and the university's Web presence, but each serves a different purpose, addresses a different audience, and meets a different need.
The top level pages in the university Web site (including, of course, the home page) are no different, and should no longer be viewed as a monolithic set of "one size fits all" pages attempting to meet the needs of all users. Instead, the focus should be to provide audience-focused experiences, custom-designed to meet the needs of the main user groups that are likely to visit a university's site. These include the usual suspects of prospective students, current students, faculty, staff, alumni, family, and community members, as well as other groups.
There is no reason that we cannot provide a tailored experience for each of these groups, at least at the top level of pages within the site. And there is every reason why we should this level of experience if the university is to compete for students in the coming years.
How do we do this? By providing a home page designed to allow users to quickly self-identify and self-select themselves. Once a user identifies themselves (by clicking on "Prospective Students" or by clicking on the "Admissions" link, for example), they are taken to a sub-site specifically designed to meet their needs. Of course, it's impossible to fully guess the needs of all users, but prospective students have a very similar set of needs when visiting a university site that can be met by designing a section of the university's Web site to focus specifically on prospective students and de-emphasizes content and links irrelevant to those users.
And I'm not talking about the "clearinghouse" pages that so many universities use where each of the audience pages is simply a list of links. That's the short, easy, thoughtless and bad way out. By doing that, you're not providing each audience with a custom-designed experience; you're telling them that their experience isn't important enough for you to waste time trying to design it. "Here's a bunch of links. Knock yourself out," is about all you're saying.
Users' expectations of the level of experience they should have has increased dramatically over the past few years, and to attract those users to our campus, and to retain them, we have no choice but to meet their expectations.
In the end, we will end up with not one university site at the top level, but a series of sub-sites, each designed for a specific audience with specific common needs and perceptions.Who is doing this? I'm sure there are a large number of universities (other than Chico State) doing this out there, but I'm just going to list the few I can find that are really investing the effort:
- University of Virginia - different main pages for each audience
Wednesday, October 31, 2007
A couple of interesting posts
These are a couple of years old, but still worth looking at.
Best University Admissions Web Sites
Best University Web Sites
Best University Admissions Web Sites
Best University Web Sites
Michigan State Home Page Photos
Though I don't really like the MSU home page, I do like what they've done with the photos. By tying people and place in each photo, they connect directly with the viewer and tell a story. And it's nice that actually use some text to link the photos to the story. And, of course, clicking on the photo takes you to the full story.
This is personally how I think home page photos should be done. There is an effective triad of:
that needs to be part of every main home page photo.
I wish we were doing that. Hopefully, as things change and evolve here, we'll start implementing some of these best practices.
A few of the photos I shamelessly stole off their home page...
This is personally how I think home page photos should be done. There is an effective triad of:
- People
- Place (or context)
- Story
that needs to be part of every main home page photo.
I wish we were doing that. Hopefully, as things change and evolve here, we'll start implementing some of these best practices.
A few of the photos I shamelessly stole off their home page...
Wednesday, October 24, 2007
HighEdWebDev - A Few Thoughts - Part 1
I just got back from the HighEdWebDev conference in Rochester, NY.
Here are some of my thoughts on some bigger picture issues....
Buzzword of the conference: Social Networking
I wasn't too impressed with social networking as something that we need to get into the middle of. Yes, I think that it's important for university's to be aware of the social networks growing up related to campus, simply to be cognizant of what students and others are saying. However, I don't think there's any reason for Web Services, or any other organization on campus, to get too involved in managing or providing or integrating social networks.
Content Management
Content management remains a big issue. The ad hoc round table that Pat and I hosted was the most well attended of the round tables at the conference.
My main take away was that, because we've had experience with a WCMS before, we have developed a very strong process for evaluating a WCMS. This is something that most of the campuses we talked with have NOT done. They are (as we were) basically stumbling in the dark. They know they need a WCMS, but they don't exactly know how they will use it.
In our round table, we emphasized two things from our experience that we felt we vital in selecting a product that would actually work:
Here are some of my thoughts on some bigger picture issues....
Buzzword of the conference: Social Networking
I wasn't too impressed with social networking as something that we need to get into the middle of. Yes, I think that it's important for university's to be aware of the social networks growing up related to campus, simply to be cognizant of what students and others are saying. However, I don't think there's any reason for Web Services, or any other organization on campus, to get too involved in managing or providing or integrating social networks.
Content Management
Content management remains a big issue. The ad hoc round table that Pat and I hosted was the most well attended of the round tables at the conference.
My main take away was that, because we've had experience with a WCMS before, we have developed a very strong process for evaluating a WCMS. This is something that most of the campuses we talked with have NOT done. They are (as we were) basically stumbling in the dark. They know they need a WCMS, but they don't exactly know how they will use it.
In our round table, we emphasized two things from our experience that we felt we vital in selecting a product that would actually work:
- Understand you business processes, no matter how undocumented or dysfunctional they may be.
- You have to select a product that is going to work with your existing cultural, organizational structure and business processes.
- You dramatically increase the chance of failure if you are forced to change your organization or radically alter your business processes in order to make a WCMS "work".
- Never, ever buy anything that you haven't taken the time and effort to learn yourself.
- We required vendors to provide us with a sandbox, and we took the time to actually implement templates and content elements in order to build a real live site using our templates and business processes. We then offered a training/demo of the products to the campus community.
- From that process, we learned things that no vendor demo or series of vendor demos could teach us.
Monday, October 15, 2007
HighEdWebDev - Session Summaries
Here's a summary of the sessions I attended at the HighEdWebDev conference in Rochester, NY last week. More detailed impressions to come later.
Monday Sessions
These Kids Today:
Usability testing with parents of new students and new students. Parents are slower, read more, but detect BS text faster. Students are fast fast fast, read with their fingers. Even split between searchers and browse-then-search-ers. Don't wait until the end to do usability studies.
The Accessible Video Interface
Great Flash tools for making video interface with captions. Captioning is a lot of work, and the "video better be worth the effort". Like that.
Supporting Web Presence with IT Comm Partnership
Cornell created virtual organization with IT staff dedicated to working on main campus site underneath the Director of Web Communications. They sold the idea of the partnership from bottom up, but obviously, the two directors work well together and have true collaborative relationship. Not sure such a virtual organization would work as well here, but it's possible.
Adding Google Maps
Mostly basic, but showed Geo-coding (based on addresses), and ways to tie into a database. Alumni locations based on Zip code locations and DB of alumni addresses. Way to do a campus map is to store data in DB and generate client-side JS code from that. Easier to maintain and update.
Lessons learned from Redesign and CMS
Used consultants to redesign site for political reasons.
Pretty standard stuff
-site's ugly
-content's out of date
-audience has changed, etc.
Tuesday Sessions
Higher Ed Web Development Gets Flattened, or How I Learned to Stop Worrying and Love the New World Order
Mark Greenfield is at it again with thought provoking ideas about how our jobs will change in the next five years. I wasn't really impressed though. Focus on crowdsourcing, outsourcing, contracting, etc. Interesting tho, the idea that menial stuff will be outsourced so that IT staff can focus on bigger issues. Maybe.
Building a Cohesive Website through a Collaborative Process
U Nebraska at Lincoln
Typical success story - they had buy in from the very top. Pres decided that they needed a unified look and feel and put someone in charge but let them determine what the structure, process and organization would be.
Put together lose network of web "developers" (mostly content editors). Came up with design standard. Developed time line for enforced implementation of standard. A few stragglers, but backed by Pres.
Monitoring Your Web Identity - Jay Collier
Interesting talk about all the different places information about your campus appears on the Web. From news sites to YouTube to blogs, social networking sites, Twitter, etc., etc. And how to use Google Alerts, RSS feeds and other tools to keep track of all of this chatter. Interesting stuff, but time consuming.
The Illusionist: Pulling Web Content out of Thin Air
How to write content for a client Web site when the client gives you no content. Very sad that some people are reduced to this. Pretty basic stuff. Pull stuff out of the catalog. Get print copies of the viewbook. Link to the campus directory. Pathetic that some people have to resort to this.
Google Analytics and Higher Education Web Development
Off the cuff presentation of the basics of Google Analytics. Nothing new here.
Content Management System Round Table
Pat and I hosted this. Interesting to hear other people's experiences. Not too favorable impressions of Collage and Ingeniux from campuses using them. Higher level of success from the few campuses that went to round two and had a better understanding of their needs and processes. Jay Collier expounded on their "one stop" open source solution (name??) that included, wiki, blogs, and all sorts of other tools as well as WCMS. Not the way we want to go. Good reports on Hannon Hill from the people who are using it.
Monday Sessions
These Kids Today:
Usability testing with parents of new students and new students. Parents are slower, read more, but detect BS text faster. Students are fast fast fast, read with their fingers. Even split between searchers and browse-then-search-ers. Don't wait until the end to do usability studies.
The Accessible Video Interface
Great Flash tools for making video interface with captions. Captioning is a lot of work, and the "video better be worth the effort". Like that.
Supporting Web Presence with IT Comm Partnership
Cornell created virtual organization with IT staff dedicated to working on main campus site underneath the Director of Web Communications. They sold the idea of the partnership from bottom up, but obviously, the two directors work well together and have true collaborative relationship. Not sure such a virtual organization would work as well here, but it's possible.
Adding Google Maps
Mostly basic, but showed Geo-coding (based on addresses), and ways to tie into a database. Alumni locations based on Zip code locations and DB of alumni addresses. Way to do a campus map is to store data in DB and generate client-side JS code from that. Easier to maintain and update.
Lessons learned from Redesign and CMS
Used consultants to redesign site for political reasons.
- Everything is political
- move project buy in as high as possible
- Go where the money is
- Use the mission statement to cough up money
- Recruit money from all benefiting depts and units
- Develop your principles before you start
- scope
- goals
- target audience
- cost
- timeline
- Think of campus and site strategic direction
- Think of your infrastructure
- Do you have the people to support/implement project?
- Better to out source?
- Bus. processes are your problem too
- bad processes will bite you at every step
- Use Web Standards and ADA to your advantage
- Develop clear expectations
- Get campus on board (fac senate, etc.)
- Get Exec committee to sign off on visual design
- Conduct usability studies
Pretty standard stuff
-site's ugly
-content's out of date
-audience has changed, etc.
Tuesday Sessions
Higher Ed Web Development Gets Flattened, or How I Learned to Stop Worrying and Love the New World Order
Mark Greenfield is at it again with thought provoking ideas about how our jobs will change in the next five years. I wasn't really impressed though. Focus on crowdsourcing, outsourcing, contracting, etc. Interesting tho, the idea that menial stuff will be outsourced so that IT staff can focus on bigger issues. Maybe.
Building a Cohesive Website through a Collaborative Process
U Nebraska at Lincoln
Typical success story - they had buy in from the very top. Pres decided that they needed a unified look and feel and put someone in charge but let them determine what the structure, process and organization would be.
Put together lose network of web "developers" (mostly content editors). Came up with design standard. Developed time line for enforced implementation of standard. A few stragglers, but backed by Pres.
Monitoring Your Web Identity - Jay Collier
Interesting talk about all the different places information about your campus appears on the Web. From news sites to YouTube to blogs, social networking sites, Twitter, etc., etc. And how to use Google Alerts, RSS feeds and other tools to keep track of all of this chatter. Interesting stuff, but time consuming.
The Illusionist: Pulling Web Content out of Thin Air
How to write content for a client Web site when the client gives you no content. Very sad that some people are reduced to this. Pretty basic stuff. Pull stuff out of the catalog. Get print copies of the viewbook. Link to the campus directory. Pathetic that some people have to resort to this.
Google Analytics and Higher Education Web Development
Off the cuff presentation of the basics of Google Analytics. Nothing new here.
Content Management System Round Table
Pat and I hosted this. Interesting to hear other people's experiences. Not too favorable impressions of Collage and Ingeniux from campuses using them. Higher level of success from the few campuses that went to round two and had a better understanding of their needs and processes. Jay Collier expounded on their "one stop" open source solution (name??) that included, wiki, blogs, and all sorts of other tools as well as WCMS. Not the way we want to go. Good reports on Hannon Hill from the people who are using it.
Thursday, July 19, 2007
Lost in the Golden Triangle
A look at a heat map of the CSU, Chico home page and how it measures up.
A couple of years ago, some companies got together and did some research on how users viewed a Google results page using eye tracking heat maps. The results showed a "golden triangle" where users spent the most time looking on the page.
Last year, usability guru Jakob Nielson conducted similar research that indicated that most pages generated an F-shaped heat map.
In reality, the 'golden triangle' and the 'F-shaped' pattern are really the same thing. To a degree, they reflect the organization of textual content on content pages, but they also reflect our "training" to look in the upper left-hand corner of web pages as a starting place because we expect:
Well, I'm proud to say that we at Chico State are bucking that trend. No Golden Triangles for us!
Our Web Development guys got a free Crazy Egg account and tracked user clicks on several pages, including our home page. Though the free account only gave us a half a day's information, what information it did provide was revealing.
70% of all clicks were on the top four items. The Portal Login alone accounted for nearly 1/3rd of all clicks.
Of course, these top links were all placed in the upper left-hand portion of the page, right? In fact, none of the most commonly clicked on areas were in the golden triangle - or even near it.
Here's a heatmap of our home page from the test:
Even better, here's the heat map without the site overlay:
As you can see, just about the least clicked part of the page is the golden triangle.
The Portal (lower right), search (top right) and email (far right) links are all in non-prime real estate areas of the page.
Nice.
Hopefully, we'll be able to purchase at least a full month's usage of Crazy Egg in order to gather some real data that will further help guide us to better redesign the new home page...whenever that may or may not happen.
A couple of years ago, some companies got together and did some research on how users viewed a Google results page using eye tracking heat maps. The results showed a "golden triangle" where users spent the most time looking on the page.
Last year, usability guru Jakob Nielson conducted similar research that indicated that most pages generated an F-shaped heat map.
In reality, the 'golden triangle' and the 'F-shaped' pattern are really the same thing. To a degree, they reflect the organization of textual content on content pages, but they also reflect our "training" to look in the upper left-hand corner of web pages as a starting place because we expect:
- To read (or scan) from left to right and top to bottom
- To find the most relevant content at the top
- To find navigational options at the top and/or left
Well, I'm proud to say that we at Chico State are bucking that trend. No Golden Triangles for us!
Our Web Development guys got a free Crazy Egg account and tracked user clicks on several pages, including our home page. Though the free account only gave us a half a day's information, what information it did provide was revealing.
| Link | Clicks | Percent |
| Portal Login | 623 | 31% |
| Search Chico State | 351 | 17% |
| WildcatMail | 254 | 13% |
| MS Exchange Email | 181 | 9% |
| Class Schedule | 73 | 4% |
| CSU, Chico Catalog | 70 | 3% |
| Directory | 60 | 3% |
70% of all clicks were on the top four items. The Portal Login alone accounted for nearly 1/3rd of all clicks.
Of course, these top links were all placed in the upper left-hand portion of the page, right? In fact, none of the most commonly clicked on areas were in the golden triangle - or even near it.
Here's a heatmap of our home page from the test:
Even better, here's the heat map without the site overlay:
As you can see, just about the least clicked part of the page is the golden triangle.
The Portal (lower right), search (top right) and email (far right) links are all in non-prime real estate areas of the page.
Nice.
Hopefully, we'll be able to purchase at least a full month's usage of Crazy Egg in order to gather some real data that will further help guide us to better redesign the new home page...whenever that may or may not happen.
Tuesday, June 12, 2007
Search vs. Browse - Let the Argument Continue!
Which is "better"? Neither. Both. It depends.
There is research out there (you go find it - I'm too lazy) that suggests that different people have different strategies for finding information on websites. Some people tend to browse while others tend to go straight to the search box.
I thought about this and came to the realization that it's not as simple as that. Viewing my own behavior, I've discovered that I use different information finding behaviors on different websites.
The following are a few examples. What does this have to do with redesigning university home pages? Not much, but we seem to keep arguing about whether searching or browsing is "better", and I thought I'd toss this into the mix.
Digital Photography Review- Generally speaking, I browse this site, except for the forums, which I almost always search for specific topics. Partly I browse because the site lacks a comprehensive search feature, but also because the site is clearly and simply organized.
National Weather Service, Sacramento - I always browse and never use search, mostly because I know where the things I want are and the site is fairly simple.
Amazon.com - I nearly always search if I know what I'm looking for. However, if I don't know the exact thing I'm looking for I'll typically search to the category and then browse from there to the specific item. For example, if I want to see if there are any new wine books out, I'll search for "wine" and then browse the rest of the way.
Wine Library - Again, if I know exactly what I want, I'll search for it. But if I'm just looking for a nice Bordeaux, I'll browse through the listings.
Wikipedia - OK, I admit, I'm one of those people who use Wikipedia and actually believe what they read. In Wikipedia I search exclusively. I'm not even sure if there is a browse feature.
IMDB - Again, exclusively search. Is there any other way in IMDB?
Anthony Dunn Photography - This is my own website. Clients often call and ask what photos I have of this or that and I use my website to see what I have. Depending on what people are looking for, I may browse through the stock photo section of the site or just do a search. I'd say that 70% of the time I use the search box.
CSU, Chico - I had to add this one, but it's not really fair include it. For the most part, I know the URLs of the sites I'm working on, so typically I just type in the URL. I've bookmarked a number of other pages. I pretty much only use the search box for testing and only browse to see if something is findable that way.
Bottom line: On different sites I use a different approach based on my needs and goals and on the capabilities of the site itself.
There is research out there (you go find it - I'm too lazy) that suggests that different people have different strategies for finding information on websites. Some people tend to browse while others tend to go straight to the search box.
I thought about this and came to the realization that it's not as simple as that. Viewing my own behavior, I've discovered that I use different information finding behaviors on different websites.
The following are a few examples. What does this have to do with redesigning university home pages? Not much, but we seem to keep arguing about whether searching or browsing is "better", and I thought I'd toss this into the mix.
Digital Photography Review- Generally speaking, I browse this site, except for the forums, which I almost always search for specific topics. Partly I browse because the site lacks a comprehensive search feature, but also because the site is clearly and simply organized.
National Weather Service, Sacramento - I always browse and never use search, mostly because I know where the things I want are and the site is fairly simple.
Amazon.com - I nearly always search if I know what I'm looking for. However, if I don't know the exact thing I'm looking for I'll typically search to the category and then browse from there to the specific item. For example, if I want to see if there are any new wine books out, I'll search for "wine" and then browse the rest of the way.
Wine Library - Again, if I know exactly what I want, I'll search for it. But if I'm just looking for a nice Bordeaux, I'll browse through the listings.
Wikipedia - OK, I admit, I'm one of those people who use Wikipedia and actually believe what they read. In Wikipedia I search exclusively. I'm not even sure if there is a browse feature.
IMDB - Again, exclusively search. Is there any other way in IMDB?
Anthony Dunn Photography - This is my own website. Clients often call and ask what photos I have of this or that and I use my website to see what I have. Depending on what people are looking for, I may browse through the stock photo section of the site or just do a search. I'd say that 70% of the time I use the search box.
CSU, Chico - I had to add this one, but it's not really fair include it. For the most part, I know the URLs of the sites I'm working on, so typically I just type in the URL. I've bookmarked a number of other pages. I pretty much only use the search box for testing and only browse to see if something is findable that way.
Bottom line: On different sites I use a different approach based on my needs and goals and on the capabilities of the site itself.
- On sites I'm very familiar with and use the same information over and over, I tend to browse.
- On commercial sites where I want to browse the wares, I tend to use a hybrid search/browse approach.
- On informational sites, I tend to search for what I'm looking for.
Subscribe to:
Posts (Atom)
