Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

NRA Redux: Death by Pride

May 16, 2007

It is my experience that when designing their websites, most clients want the design to associate their organization with some measure of gravity. They want to look important and powerful. Often they want the website to communicate that they’re energetic and that there is a lot going on with their organization or company.

I can understand this motivation. I certainly don’t disagree with using design to communicate desirable traits. It’s part of what designers are supposed to do. When designing something for others to use, however, thinking of appearances and other selfish motivations before addressing the truly important things, like user experience and expectations, is a dangerous and destructive thing to do.

Pride is a reef upon which many a website has been wrecked. This is true of the past and it is true today.

Case and Point: NRA.org

In a contest between websites attempting, but failing, to visually convey importance and gravity, NRA.org would likely be the champion. There’s plenty going wrong on this site, but in an effort at brevity I’m just going to hit the high points here. I believe this site can teach us much about how not to communicate and how not to craft the appearance of activity and importance.

This website is ripe for criticism not because it could be designed better (heck, most sites could be designed better), but because it fails so horribly at the fundamentals, and yet the organization is a vital and powerful one. A website can be forgiven many failings if it is fundamentally sound. This is a fact that I hope all reading will appreciate and keep in mind during design efforts.

You must understand that I’m not making an example of the NRA site in an effort to ridicule the organization. On the contrary, I’m a member and I support their efforts. However, their terrible website is valuable in that we can use it to examine strong examples of badly implemented ideas and inadvisable communicative mechanisms. By doing so, perhaps we can prevent similar tragedies in the future. One can hope.

One of the more glaring mistakes the NRA makes is guarding their website with a gratuitous intro page. They place what is supposed to be a news portal page (yes, it’s all served with flash) in front of their actual website main page in an effort to show visitors just how much they’ve got going on over at the ol’ NRA. There are good ways and bad ways to use flash in a website. This is a bad way.

Like Fox News on acid

The result is like Fox News on acid. You’ll note that the bottom of the page is occupied by a battery of happytalk and a link to the “real” NRA website. All unfortunate, yes, but there’s more going on here than meets the eye with a static photo. I’m talking about zip and pop and energy, folks!

Apparently, you can tell that the NRA is an energetic and powerful organization because of all the animations on this intro page. While it’s not uncommon these days to find an animated element or two on a news page, here you’ll find 11 of them …and none are ads. Eleven page elements that are constantly, unceasingly, repeatedly moving and changing and spinning and scrolling and glistening. Heck, one of them is even talking!

Eleven animations on the page.

It seems that the creative brief for the NRA site must have included the following:

There’s plenty of sizzle, but no steak. You see, while this page is supposed to be a news portal, it indicates only the barest fraction of the news they have to share. The site’s real main page does a far better job of revealing the latest news than this intro page does. This is a clear example of aiming for gravity or personality over substance and missing by a mile. Maybe 5 miles.

Other failings of this page include a video explanation of the interface (I’m not kidding) and when hovering over links (once you figure out what is a link) you get no indication in the browser’s bottom–of–page results bar as to where the link leads. The disassociated layout, and multiple redundancies in the links and information add to the copious chaos here.

The aesthetic and design are juvenile; not the sort of thing you’d expect from such a powerful organization. The page is far closer to Disney than to Businessweek in how it packages otherwise sober information. This page simply fails; it creates a silly and dissuading image for the NRA.

The “real” main page

Once you reach the real main page for the NRA site, one thing becomes clear: They really like displaying their logo. A lot. Here, again, they’re attempting to convey some sort of gravity by gratuitously throwing their name all over the place. They believe, apparently, that the more you see the logo, the more you know that the NRA is an important and powerful organization.

the "real" main page of the site

This misguided attempt at communicating power and importance gets in the way of what the page should be doing: communicating vital information to members and potential members while clearly defining the content, navigation and site structure. This page commits the same sins as the previous one, just by slightly different means.

Getting past the branding–over–content character of this page, there are other missteps to be found. Take a look at the main navigation, for example.

the faulty navigation

The “join/renew” and “contribute” links are a different color than the rest of the links, presumably to draw attention to them. This is a usability mistake and is a trite and ineffective way to communicate anything more than chaos and ineptitude. It also suggests that the NRA cares more about gathering members and money than keeping US citizens informed.

This multi–colored approach to links is carried over into the page content, where some links are black, some are red, and others are light gray. But of course not all black or red text is link text. Go figure.

Here again the grid is shot and the page is trying to do several things while it’s not organized well enough to do much of anything. The most substantial content element, the news area, is filled with confusion and redundancy. It’s hard to understand the need for these categories when the content is seemingly mixed so thoroughly.

confusing news items

Even if there were some intuitive design and page element structure, if the content is redundant and incomprehensible, all is still lost. Rather than guide readers to specific areas according to specific motivations, this page seems to want to just throw everything up at once without any sort of information hierarchy. In the end I suppose you could just aim for one of the many logos and click. With the volume of redundancy on this page, doing this is as good a site navigation strategy as any.

Summary

It seems quite simple: There’s news, there’s membership offers and information, and there’s shopping (by the way, the store has its own gateway page – it takes 2 clicks to get there). This presents us with what should be a very simple information architecture challenge. Things become much simpler when we first imagine how a member or potential member might want to use the NRA website.

In a real redesign, personae development and use cases would need to be much more comprehensively explored, but, in essence, if I’m coming to the NRA website I’m going to want to do one or more of the following:

…and I’ll want to do so without being overwhelmed by hordes of animated distractions, unfathomable navigation and site structure, important–looking logos everywhere, or gratuitous gateway pages that keep me from getting to the actual content of the site. What might a more usable design look like?

NRA.org Redux

I’ve put together a sample, but very cursory, redesign of the NRA website. I’ve eliminated all of the silly animations, as well as the gratuitous intro page. Now, all of the relevant features are found on the main page. Furthermore, the multimedia news section can appear on any page in the site – if the user chooses to have it appear – by way of a collapsing/expanding div.

I’ve cleaned up the structure and the content to show only what’s relevant. Now the various content sections are clearly labeled and the visitors should be able to find exactly what they’re looking for and be sure it’s what it appears to be. With this sort of design the gravity of the content defines the gravity of the organization, and the horse is now pulling the cart instead of the cart placed before the horse, so to speak.

NRA Redux

See the full-size version >>

Yes, this design is trite and boring, but I didn’t spend much time conceiving this one. It’s meant to show a clear organization and a more usable approach to involving multimedia with static content. My aim was not to craft a brilliant design, but rather to address fundamentals that are wholly ignored with the present NRA website design. Even so, I’d say that this incarnation would be a vast improvement over the current catastrophe.

Here, at least, users have a chance of finding the content they want and a chance of being able to navigate and browse without distraction. This design is more about usability than ego or reputation. I expect that the organization’s reputation would therefore be positively affected. People first works best for all involved.

Conclusion

The NRA.org website fails because of a common sin: Image before substance. In creating their website they ignored users, ignored the fundamentals of design, and ignored their supposed purpose. Instead they led the effort with pride; they endeavored to craft an image of authority and gravity and energy, but they messed that part up. They forgot that the website is not for the organization’s pride, it’s for people to access information.

Like Macbeth’s tale told by an idiot, this site’s main pages are “…full of sound and fury, signifying nothing.” And this is sad because the NRA has an important purpose and a worthy constituency. They should dispense with this childish effort to try and look important and should settle for actually being important to the citizens of this nation.

Archives

Archive

Practice