It is possible for a user interface to be too simple

man in black shirt

A client was getting really frustrated because the social media previews for their site were out of date. They had a new hero image and page title but every time they tried to share the page — whether using the site’s share buttons or just pasting the URL into Facebook or Twitter — it still showed the old one.

Now this stuff is generally a bit too close to alchemy for my taste. Sharing previews are extremely important but the mechanics of how various social media platform construct them are… well, they’re not shrouded in secrecy, but you really do get the impression the developers at Facebook and Twitter aren’t telling us everything.

They have, mercifully, put together tools that let you sleuth these things out. They’re a bit nerdy, but they take you through the code and they show you how their services see your site.

Great. So far. But the Twitter and Facebook tools were indeed previewing the site as the site instructed.

The site’s source code made me think that it was in fact the plugin the site uses to present social media sharing options that was producing the outdated Facebook preview/Twitter card markup.

But the plugin’s admin screen listed nothing about Open Graph tags, or configuring previews or cards or anything.

Its admin page consists of a series of plain language interview questions that ask a site administer basic questions about their social media icons, like: how do you want them to appear? Where do you want them to appear?

They did this probably because configuring social media buttons is kind of a pain in the ass for not a lot of return. Very few people use them. But getting them to appear attractively (to the extent that’s possible at all), in the right place, and to behave as required, is fussy technical business.

I understand the developer’s desire to smooth that path for their customers.

And you would think that one of these helpful, easy to understand questions would be “How do you want your social media previews to appear?”

Nope. I went through each of the so-easy-to-use questions until I got to number six, “Any other wishes for your main icons?”

Expanding this accordion reveals a fairly detailed set of options for configuring social media previews, at least for Twitter, Pinterest and Facebook.

But lord, you’d never know it.

I submitted a support ticket with them identifying their plugin’s failure to provide a way to update Open Graph information or a bug in their algorithm for generating Open Graph tags or its inability to work with the site’s server-side caching plugin or who knows what.

I feel the developer smoothed out a complicated process so much in the name of usability that they actually made their product less useful.

Like a car with two knobs on the dashboard, one to turn it on, the other for everything else.

Logo equals link to home: your mileage may vary

logo link home page

logo link home pageDo people actually know that on most sites, the logo is a link to the site’s home page?

I know Jacob Nielsen says so. But recently on a site I run I’ve been trying to highlight certain days of the year by changing the site’s logo to an appropriately themed version. You know, like Google does.

I thought it was a great idea.

But every time I put up a carefully crafted, painstakingly placed ‘special day logo’ I get a few complaints from influential people about how inaccessible or invisibe the text about the day is.

They argue that no one sees our explanatory text because they don’t know to click on or mouseover the logo. As evidence they offer up the fact that they personally don’t.

“But it’s a web design practice that’s been widely followed for almost ten years now,” I reply, exasperated. “Surely you’ve noticed it.”

I am met with silence.

So I’m doing an informal survey of my online friends to see if this they are aware of and do they use the hyperlinked logos.

So far it looks like the more likely you are to read Jacob Nielsen columns, the more likely you are to know that click-the-logo means ‘home page’.

The more likely you are to read Jacob Nielsen, the more likely you are to know

People do click the logo to go home. Of the thirty or so (on average) ways to leave a page on the site in question, click-the-logo is the most often used way. But it counts for only about ten per cent of the “exits” on any given page.

So if you have a little bit to say, which is better? the article on the front page, or the explanatory text accompanying the changed logo?

It’s still the explanatory text with the logo if for no other reason than your odds of it being seen are much higher. The front page on this site is the most frequently viewed page, but it’s still only about 20 per cent of the total page views in a given month. Whereas the logo is on every page.

The page views also tell a story, though a confusing one. The latest special logo didn’t fare as well as our trial balloon special logo. Only about a third as many page views. But still significantly more page views than last year’s front page article.

It’s hard to isolate all the reasons for that. Maybe this special logo’s purpose wasn’t clear to people. It was about Earth Day. Someone emailed me to say, “Nice logo, really spring-y.” Thanks. I think. Bet that person didn’t click.

Maybe our visitors care more about poverty than the environment? A bit of a stretch of a conclusion, given what public opinion polls say about the subject.

Traffic in general on our recent day was significantly higher 38% more visits than our ‘trial balloon’ day (Wednesday vs Friday).

Web design: art versus engineering

Graphic design confronts a new medium

What are we trying to do anyway?

What do these three pages suggest to you?

Your design is a subtext to your text, and its impact on your words are as real as intonation, gesticulation and eye contact are to verbal communication.

This is pretty much the standard schtick for print design. But if you’re a web designer and this describes the goals of your site, then you have no ambition.

If you’re thinking up goals of a web site these days, be prepared to add the following:

  • allow visitors to interact with the organization/company/person. That means:
    • Ask questions and get answers
    • Visitors can converse with each other
  • visitors can order/buy goods and services from the site
  • visitors can retrieve information that meets their needs, which may be close to unique
  • visitors can send donations/gamble/otherwise give away money to the site

This is a fair way from print design wherein if you wanted to interact with the producer of the material, you had to fill out the courtesy card or get on the phone. With the web, the messaging medium is also the action medium. Obviously, you can’t do everything over the web, but the fact that there are more functions attatched to the web than simply communication means that we have to revisit an old debate.

Form vs function: here we go again

There is this ancient and unresolvable conflict between wanting to have beautiful form and wanting to be practical and useful.

Well… can’t you have both?

Not without selling your soul. Actually that’s not entirely true, but more often than not web design is about finding a compromise position between eye candy and eye oatmeal. And you often have to privilege one over the other.

Take, for example, Jacob Nielsen’s Top Ten Mistakes in Web Design, or the Top Ten New Mistakes of Web Design.

Taken together, following Nielsen’s rules will restrict the colours you can use, where you place (or if you place) your identifying logo, limit if not eliminate the use of graphics on your page etc etc. Flash, movies and animations are pretty much verbotten.

You get a useable web site, but it’s boring. By contrast, David Siegel’s site for his book Designing Killer Web Sites talks about some different rules. Like how to make web pages sing.

In fact he talks a lot about how to anti-alias graphics and how to infest your pages with code, placing invisible gifs all over the place to put things in the right place. Here is a really old page of his offering some design tips.

More recently he’s retreated from his “web pages will sing” notions. His current web site says there won’t be any more David Siegel books for developers.

In fact, he did a bit of an about face. Here’s an article from an Australian web design site, shorewalker.com, that describes his thinking.

So is there a concensus building about web design? Is it dead? Are all sites eventually going to look like www.useit.com? Maybe, but for two things:

  1. People like looking at pretty things.www.urbantakeover.co.uk breaks pretty much every one of Nielsen’s user interface rules, but we were all captivated by it for about half an hour. And the user interface fetish people will never tell you how to make anything look pretty. I mean would you want to live in a house Jacob Nielsen built? I should note that since this class first discovered this site it’s calmed down a lot. There are now menus with text labels, for example.
  2. There’s more to life than shoppingIn fact both the user interface and the singing page people seem pretty much obsessed about selling people stuff via the web. It’s like a new sort of gold mining expedition. Maybe the web is just going to be something people do to connect with other people and find out about things and stuff. Web sites won’t be profit centres, but rather their cost will be lumped in with promotion, running a store and “the cost of doing business.” In this case, maybe designing pretty just for fun isn’t such an anathema.
  3. There’s nothing saying pretty sites have to be unusable or vice versa.In fact one could argue that truly boring sites will never get used just because they’re boring.

Happy mediums

I’m not saying you can resolve this. But you may be able to live with the ambiguity of wanting an attractive, useful web site. That’s certainly the conclusion drawn by this A List Apart Article.

Here’s an approach that might work:

  • Design a pretty site.
  • Figure out how many of the usability rules it violates.
  • Figure out which of these you can live with.Nielsen rates the following rule violationsas having “very severe” impact on usability:
    • bleeding edge technology
    • scrolling text and looping animations
    • outdated information
    • slow download times
  • Any pages that violate these rules you should really consider changing
  • See if you can’t achieve the same design within the rules
  • Change your design or
  • Try and assess the damage:
    • View the site in as many other, older browsers as possible
    • Ask your friends to look at the site; find out what conditions they’re viewing under (browser, connection speed)
    • Use browsercam.com to see how your site looks in every browser that ever walked the earth. It’s free for a single use.
  • Be happy or make changes based on your damage assessment

Six principles of graphic design and how many of them are still useful to web designers?

Balance:

Also known as symmetry. What goes on one side of the page must weigh as much as what goes on the right. Or top vs bottom. Graphic elements have visual weight. Big items weigh more than little ones. Dark weighs more than light. Colour weighs more than black and white. But a small dark element will weigh less than a concentration of white space because it’s unusual. Note, though, that balance doesn’t necessarily mean equilibrium.

This notion is often at odds with the following notion, because if a page has no balance, then it almost necessarily posesses some form of…

Dynamism

In many languages, including the one I’m using now, people read from left to right, top to bottom pretty much all the time. So much so, in fact, that it’s become a habit.

The top left chunk of a page is known as the “primary optical area” because that’s where a literate person’s eye is trained to go. Mind you, eyes are more like cats than dogs. They’re not easy to train. They’re easily distracted by shiny, noisy or (to bring back some jargon from a couple of prinicples ago) visually heavy objects. So in print we tend to build designs that use the eye’s trained tendency to move top to bottom, left to right. But theoretically, if you use the notion that eyes also move from dark to light, big to little shapes, you can start a page anywhere and get the reader to move through it.

This motion, in design circles, is referred to as dynamism. I admit it’s a tad pretentious.

A good dynamic leads you through the page. A bad one leads you off the page or leaves you standing there with nowhere to go, as overly symetrical pages tend to do.

Proportion

“The lesser dimension in a plane figure is to the greater as the greater is to the sum of both.” Huh? About 1:1.4. This is some ancient law of aesthetics. You’re not supposed to break it. It applies to the shape of a page, elements within a page, where elements are placed etc. Of course, most people’s monitors aren’t in this proportion. But more on that later.

Contrast

Also known as “Emphasis.” Something on the page stands out to give the page a focus or entry point.

When two or more elements are given emphasis, they compete for the reader’s attention, cancelling each other out and encouraging people to move on. Elements cannot, however, be so large and contrasting that they squash out everything on the page.

The amount of emphasis an element gets should also correspond the importance the designer assigns to it, rather than the amount of space that needs filling.

Simplicity

Fewer elements, rather than more. One or two type faces. One or two graphics rather than a dozen. (There are web-specific reasons for this too). Enough said.

Unity

Mentionned earlier is the notion that this is not art. Good design has a unified look from page to page. Choose a headline style and stick to it. Page headers and footers (called folios in print jargon) should be consistent from page to page. Font changes should be minimal, have a purpose and be consistent.

(The web helps a lot here but in other ways causes many many problems).

Unity also means holding the page together. Nothing sends the elements of a page off in all directions quite like white space forced into the middle of a page. Watch this, especially when you’re sizing different squared off shapes like tables, frames etc.