Everything Wrong With My Department's New Website

I care about things a lot. A word people often use to describe me is "passionate" and it manifests in ways both good and bad. When I channel it usefully, I can do some pretty magical things. Unfortunately, it often leads me to care way too much about websites and take to Twitter yelling about them (but who doesn't, really?). So when my department at RIT launched their new website, I was excited to check it out. That excitement was very quickly replaced with extreme disappointment. It fails in a few very important ways. I'm going to first describe the important failures, then suggest corrections, then discuss why this matters.

Navigation

The first problem is probably the most significant. Navigation is one of the most critical aspects of your website. It conveys what users can expect from it and how they can get there. The site, even on a desktop, hides the menu behind that famous 3-bar hamburger icon we know and love, despite having more than enough real estate to show a menu. Selecting any section, however, sends users on a dizzying zoom-fest both down and across the page.

What users may also notice is that the little hovering thing that looks like a stone pathway is also navigation. The little "stepping stones" are highlighted as the different sections of the page are reached. Unfortunately, those little stepping stones hide their labels unless you hover over them so it's also easy enough for it to go unnoticed. I've been told this is being called "hallway navigation", but I think my stone pathway metaphor is more appropriate so that's what I'll call it. Regardless of the name, it's a very confusing means of navigating a website.

Navigation also serves an important role in describing the information architecture of a website (i.e. how information is related). What the "pathway" does is create a false sense of information architecture that adds to the confusion. The horizontally aligned stones suggest that the sections are related, and for the most part they are. The undergrad, graduate and minor sections seem related and are all next to each other. Stones located vertically under any others would suggest that they're related to what ever is above it, but that's not the case. Placing "careers" under "minors" doesn't seem to make any logical sense.

This is a one-page website full of sections. Naturally, users will be scrolling through the site. Everything is fine until you reach the first turn in the stone path. The scroll direction is abruptly changed from vertical to horizontal without much indication it's about to happen. This is extremely jarring when you aren't expecting it (and has serious impact for certain users - see accessibility). It also causes a bit of confusion. Should I continue scrolling vertically or can I scroll horizontally now? The site doesn't let me scroll horizontally at all, so now I must scroll up or down to move left or right which is an incredibly confusing input. Fortunately, the scrolling isn't just snapping me to defined points (otherwise known as scroll-jacking), but that also means while scrolling horizontally I can stop in some very confusing states, as demonstrated by the screenshot below.

I suppose the thought was that the shift in direction would be expected thanks to the helpful stone pathway, but since it's not immediately identifiable as navigation the first experience with the site is extremely confusing. In fact, it wasn't until I reached the horizontal scrolling that I realized what the stone path was. At that point, I recognized it as a map, which brings me to a very important point:

If you have to provide a literal map for users to make sense of your website you have made many mistakes.

On a mobile device the situation is a little better because everything is vertically laid out and there is no map required. Selecting a section from the pull-out menu simply scrolls to that section of the site so it's not bad. Other than a lot of center alignment issues throughout the page it's actually pretty okay. On a desktop though, the site has much worse experience.

Accessibility and Usability

The navigation, or how a user moves through the site, creates a very significant accessibility problem. Scrolling is, by nature, animated. While animations can add a lot to an interaction, even helping to convey meaning, excessive animation can have major impacts for anyone with motion sensitivity. Yes, that is a real thing. Remember all the reports of people feeling sick from using their iPhone when iOS 7 launched? It's a very real thing, and it matters. By shifting the direction of scrolling without any real indication to the user, the page could make someone feel physically sick.

There are plenty of vision-related failures as well. In the overview section there's a large block of text. It's justified (in alignment). This is, to put it shortly, bad practice. The white space between words can form mild distractions for you or I, but for a person with dyslexia or anyone who uses assistive technology to read text on a screen, justified text can be impossible for them to follow.

But this isn't the only problem affecting readability. Don't get me wrong, I love thin typefaces as much as the next person, but one has to be very careful when using them. If the text doesn't have sufficient contrast with the background it can cause readability issues for people with good vision (yes, I squinted a little while reading the text). Someone with very poor vision or a color deficiency? They will legitimately struggle to read your content. Thin fonts are usually okay on very high DPI displays (your "retina" displays), but on lower resolution devices they're much more difficult to read.

The body text isn't the only example of poor contrast, either. Further down (and across?) the page is a staff listing. Each staff member's name is listed in a transparent white box over a complex background image. Depending on where a user has scrolled to, the contrast ratio becomes pretty low, again making it difficult to read.

A majority of visitors to the site may not experience serious issues accessing the content of the site, but that's not an excuse to make it difficult for the minority.

Performance

Note: references for this section are a little technical

When you first visit the site, you're met with a fullscreen, transparent loading animation. On my 2012 MacBook Air this loading screen appeared for only about 2 seconds, but it lasted nearly twice as long on my iPhone 5S. While that sounds like I'm simply being impatient, wait time on page load has very real business impacts. Google has conducted a lot of research on this and has been obsessing about speed for a long time. If the load were justified that would be one thing, but visually there's not much different in the initial view once that transparent loading overlay disappears, which just makes it feel slow. Performance wise the site performs pretty well, but there's lots of room to improve.

Part of it's solid performance is because of the really speedy wifi I'm connected to on campus. I conducted a couple of Speed Index tests with to get a better idea of performance. Over a cable (fast) connection, the site scored 4625 points (lower is better), which is a pretty good score. It's not great, but it's not awful. That said, the first view wasn't available for over 2 seconds, and the site wasn't finished loading for over 9 seconds.

If we rerun that test over a poor 3G connection things aren't quite as friendly. The first view takes more than 8 seconds to load, and the page isn't ready for a full 45 seconds. That means for the first 8 seconds the user sees absolutely nothing, and the page isn't fully ready for them for close to a minute. The score nearly triples to 13,073. There's some real work to do in the performance department.

Once the site has loaded, it can feel really sluggish. There's a lot happening during every bit of scrolling. There has to be to figure out if it's time to confuse the user and send them sideways. There's a lot going on which is causing the browser to drop frames while painting. I understand rock-solid performance is hard. But scrolling performance is something that we actually know quite a bit about.

Overall I believe the poor performance is largely a result of being over designed and over engineered. The department was aiming for a "wow" factor with the new site, and while aesthetically the site is more appealing than what it replaced, the result is an over-designed, over-engineered mess that's confusing and way heavier than it should be.

A Note on its "Responsiveness"

Responsive web design, the idea that your website should be able to adequately adapt to any device, isn't just a fad in 2015. It's a very real business requirement. And while the site has a mobile version, it loads a very different version of the site based on the width of the viewport (your window). As a result, if you make your browser window too narrow on your desktop you will trigger this reload and be presented with the loading animation again.

Worse than the animation, you will lose your place on the page. If you're near the end of the page, then shrink the window to open a document next to it, the site will reload entirely and place you back at the very top of the page. If you undo it and make your window wide again, the process repeats itself leaving you back at the top of the page.

The site is not responsive. It's adaptive. And probably in one of the worst ways. I should not be penalized as a user just for resizing my window. It would be better to not resize at all and just make it more difficult for me to view the content than force me to start over.

What To Do About It

This complaining would probably be useless without some suggestion on how to make it better. If I could talk directly to the designer and engineers here's what I would tell them:

First, abandon the "hallway navigation" and rethink the entire flow of the website. The baffling mix of horizontal and vertical scrolling (all with vertical input) is a confusing mess. This type of "flow" may work for an interactive story or something, but remember the purpose of the website. The site exists to sell the department to potential students. You are conveying information about the department, not telling a story. Go back to basics and rethink how this information should be presented.

Second, you can address the smaller usability issues with a few minor tweaks. Stop justifying text, add a text shadow on thin weight fonts to improve contrast and readability, and ensure there's sufficient contrast on every element on the page.

Third, continue to improve performance. This can largely be addressed by the first two, actually. Tone down the "wow factor" and engineer for performance instead of unnecessary interaction. You can dramatically reduce the weight of the page and improve scrolling performance by doing this. Redesigning to eliminate the "loading" animation nonsense can go a long way.

Fourth, make the site actually responsive. I think this is related to the over-engineered thing again. There's no reason the content of this site can't be made fully responsive without the use of javascript at all. Let's tone it down, okay?

Why This Matters

While I've spent a lot of time bashing this deplorable website, I think it's important to note that I actually like my department a lot. I've invested not only in my coursework but the community within my department by helping found our student group Localhost. I care very much about how our programs and the students in them are perceived (go ahead, make the "did you try turning it off and on again?" IT joke and see what happens). As a soon-to-be-graduate of this program I care very much about how my degree will be perceived. Our new website does not make a good impression.

I've been taught, by this department, everything I need to know to identify these types of problems with websites. It's frustrating to see us not practice what we preach. As the department that houses graduate level courses in human computer interaction, the basic failures in accessibility are completely inexcusable. It's because of what I've been taught my program that I'm able to identify all the things wrong with this website. I would hate for anyone to have the perception that I have these skills despite my program.

I'm not the only one concerned, either. My friend Mike, a graduate of the IT program at RIT, tweeted a few thoughts about the site (and its identically-designed counterpart for the new Web and Mobile Computing program). His general feelings were not positive:

honestly I feel like these new websites undermine the degree that’s on my résumé

— mike schneider (@MikeASchneider) September 15, 2015

Another RIT graduate, an engineering student, had this to say:

@MikeASchneider @joshvickerson if I came to this site looking for one of these degrees I'd immediately write off RIT pic.twitter.com/OvgQiD5Xo4

— Zack Sigmund (@zack_sigmund) September 15, 2015

Simply put, it's an embarrassment. As the department that produces professional web developers, we can do better. We need to do better.

If you need any help, I'm available for part-time work starting in December.

Update (9/16/15, 8:40am): After initially publishing this post I forwarded it to the head of my department. He responded this morning sharing his dissatisfaction with the site as well, describing it as an "early beta." Due to outside pressures, the department was forced to launch the site before it was really ready and it remains an ongoing project. Already, the loading performance issues have been addressed. Over a high speed connection the speed index is now as low as 1736, and as low as 4239 on a poor 3G connection. The other issues are not yet resolved, but a properly responsive version is nearing completion and some of the readability issues have already been addressed. I still maintain the navigational structure creates more problems than anything, but the department knew this would be criticized. I would still like to see it changed, but we'll see how to site evolves over the next few weeks.