If I showed you a page with 37 navigation links, 16 content links, 7 pictures, two ads and a search tool, would you tell me it’s too much?
Our clients often tell us, when we start working on a site redesign, that their old home page is “cluttered”, “too busy”, “too much content”, “overwhelming”, “confusing”. They don’t want their new site to fall into the same trap as the old.
There are a lot of decisions to make about what content makes it onto the home page. For now, let’s focus on one: Cognitive load.
It’s a pretty simple idea, despite the number of syllables: the more choices we face, the more work we must do to choose among them. Ever stand in a supermarket, looking at a wall of nearly-identical jars of pasta sauce? That’s what I’m talking about.
How much is too much? Should we apply the old “7 items” rule of thumb?
Review of Prior Art
Let’s look at the interface of the most wildly successful consumer product since industrial bread slicers appeared in the 1920s. The iPhone.
What’s the first thing you see after you turn on your phone? The home screen. A modest grid of icons, each representing some activity you might wish to do. Here’s mine:
That’s an iPhone 5, which added an extra row of icons to the original 2007 design. There’s a lot going on there. Let’s break it down:
To simplify things, I’m ignoring the status bar and I’ve treated the four icons in the Dock as one object. Still, I count 21 choices.
How about the larger-screen iPad? Same number of items, just less densely clustered:
This analogy isn’t perfect, of course. The phone is personal and familiar. You use it every day, and the locations of the icons become second nature. But I think it’s a good-enough analogy. The iPhone is designed to be unintimidating and easy to pick up; I’m confident that Apple’s designers spent a lot of time before settling on the original iPhone’s four-by-five grid, and it speaks to a fundamental conservatism that both the big-screen iPad and the the widescreen iPhone 5 only added a single row of icons.
If you look around, you’ll see plenty of other examples of limiting choice to improve user experience. Google could deliver hundreds of search results on the first page, but instead, offers just ten. Amazon suggests related products in batches of six to twelve. Apple has just two sizes of iPad and three iPhone models. The McDonald’s “value menu” has roughly a dozen options, no matter where in the world you go.
(Image adapted from photo by Ian Muttoo)
All these companies are fully capable of providing more choices, and if you dig deep, you’ll discover they do. Apple’s iPhone, for example, actually comes in 116 different possible combinations of model, color, network operators and storage size in the US alone.
So if a dozen or two items are managable, how about three dozen? I don’t think so – the Mac’s “LaunchPad” crosses the line into overwhelming with 36 items:
Kibitzing about Subitizing
Most people can manage up to 7 items in working memory at a time. Does this mean you can only have 7 items on a page? No, it does not. It places a cap on how many new things you can expect someone to work with, but not on how many things you ask them to recognize.
The limit on how many items in a list of choices seems to be time-based. Working memory persists for around 20 seconds. If the time between starting and finishing a task exceeds 20 seconds, it’s a high-load operation for the brain, which must start committing pieces of the work to long-term memory for storage.
Studies show the brain can count up to four objects at a glance (±2). Beyond that, our gestalt is “many” and we must subitz, chunk, or count.
Wait, what was that word? Subitz is a word psychologists use to describe when we count a group of things – too many to recognize at a glance – by breaking it down into countable groups. (It seems to be built on chunking items down into the limits of four.)
Whatever it comes from, it’s useful. It could explain why we like our phone screens have three or four columns of icons (a precedent that was set years before the iPhone) and not many more rows. Our brains can subitz a couple dozen items into less overwhelming, more managable groups, if we give it a pattern to break down.
A New Rule of Thumb
- More choices = more work
- Working memory handles 4 to 7 choices
- The brain will try to break down a dozen or two items into managable chunks
- We see evidence of using this sub-chunk pattering everywhere from iPhone to car dashboards to fine art.
Put it together, and we can mint a new rule of thumb for how much is too much:
You can easily provide 20+ distinct content objects on a screen without overloading your user, if you break it out into a few clearly structured and differentiated groups.
Earlier, I asked what you’d tell me of a page with 37 navigation links, 16 content links, 7 pictures, two ads and a search tool. Too much?
Nope. Not at all.
Two days after publishing this blog, Howard Moskowitz sent me an email:
The rest of the story.... Howard Moskowitz's career was jump started by George Miller (The magic number seven, plus or minus two). George was Chairman, Dept. of Psychology, Harvard in 1966. He accepted Howard for the Ph.D. in 1965, and after Howard passed the preliminary exams, George put Howard into SS (Smitty) Stevens' laboratory, with the prophetic statement -- Howie, you are resilient.
I couldn't be more tickled. Mr. Moskowitz, thanks for all you've done. Web usability professionals stand on your shoulders, sir. (Also, thanks as well for Cherry Vanilla Dr Pepper.)
It’s Valentine’s Day, and what better time to show our love to clients, partners, supporters and everyone else we have worked with over the past year by sending a digital Valentine's Day card.
How the Chocolate's Made
This year we thought we would change it up a bit and send out a Valentine's Day card instead of our infamous December holiday card. After we nailed down our concept, we sketched out a rough layout for each iMarc sweetie in the box. We knew that the only way this was going to feel authentic was to go big and for a companywide photo shoot. The Creative team setup a full day photo shoot and kept all our models in the dark about the concept until they arrived on location so we could ensure we'd get their natural reactions.
The Creative team selected our kitchen as the best location for this photo shoot as we had access to a loft to shoot from above and nail the perspective. Everyone was asked to bring their best "blue steel" looks to the photo shoot, but they really took it to the next level and dropped some serious Magnum for the camera. We coached them with things like "give us some come hither eyes like a cartoon character with hearts floating above their head" and "React to someone just bit off your leg, how does that feel?".
After color correcting the photos and loosely placing them in their respective spots within the photoshop document's layout, we began adding some Choco-Rific effects to each person – Taking bites out of some employees appendages and melting others to add more of that classic chocolate look.
And finally, what box of digital sweeties would be complete without a stylish chocolate legend showing each iMarc employee's hilarious chocolate flavor?
So from everyone here at iMarc, we wish you a happy V-Day and just want to know... will you be our Valentine?
PS - For anyone scratching their head about the title of this post, those crazy numbers are hexadecimal color values for red and blue.
Quick—What is the most mis-used key on a computer keyboard?
Now Entering the Wayback Machine
For centuries, typographers have improved clarity and legibility by using several kinds of dashes: Hyphen, figure dash, en-dash, em-dash, and the minus sign.
- (-) The hyphen is used in two-part adjectives (see what I did there?), in phrases used as adjectives, and of course for hyphenating long words at the end of a line.
- (–) The figure dash is the same width as a number in any type face, and is used only between numbers. Many fonts are missing it, as is the HTML specification; an en-dash may be used in its stead.
- (–) The en-dash is used, without spaces, to connect things related by distance or range (ex: 6–10, May–Sept). They're also used, on occasion, to connect a prefix to a proper open compound (ex: pre–World War I).
- (—) The em-dash is used to denote an abrupt change in thought or direction, or—very rarely—in groups of three to substitute for redacted names.
- (−) The minus sign is used only in math (ex: 8 − 5 = 3). It's Unicode 2212 and, like the figure dash, is often omitted from fonts.
(Often, the en-dash is combined with a space on either side instead of an em-dash. Proponents argue this is the modern and simpler equivalent of an em-dash; traditionalists insist that the dashes have distinct benefits and are not interchangeable.
(Ultimately, it's a matter of taste. The Chicago Manual of Style prescribes the unspaced em-dash, as do most American publishers and the Oxford Guide to Style. Canadian typographer Robert Bringhurst, in his classic The Elements of Typographic Style, codifies the practices of several major English publishers (including the prestigious Cambridge University Press) in prescribing a spaced en-dash. The AP Style Guide ignores the matter entirely and shows its telegraph roots in prescribing a double hyphen instead.
(iMarc's Frontend Handbook follows Bringhurst's in prescribing using a spaced en-dash; in fact, we use only the hypen and en-dash, retiring the other three dashes completely. I think that's a travesty, but I lost the vote.)
But to our muttons—
By now, you will have inferred the answer: the hyphen is the most mis-used key.
Like the 19th century typewriter, our keyboards provide only a hyphen. When the only tool you have is a hammer, everything must be nailed.
But the personal computer is not a typewriter. Our PCs' keys are far more flexible than a mechanical typewriter ever was.
And, at least if you are using a Mac, it's really easy to use the correct dashes in your writing. The option key provides access to alternate glyphs. Press
Option-Hyphen to produce an en-dash:
And to create an em-dash, add the
Voila! Whether you prefer the spaced en-dash or the more traditional em-dash, you are now self-sufficient! (For fun, experiment with the other keys. You'll find dozens of useful glyphs, ranging from ™ and ® to ∆ and ∞.)
If you use a Windows or Linux PC, try holding the alt key and enter 0150 on the numeric keypad. If all goes well, you'll have an en-dash. Use code 0151 for an em-dash. (You're on your own for the rest.)
* Blog title: Hat tip to Robin William's The Mac is Not A Typewriter. No, not that one. This one.
Often times clients are interested in turnkey CMS systems. The general theory goes something like this.
- Install CMS
- Customize With Plugins
- Vendor Independence
While turnkey solutions are great for some people, there are limitations to systems which are designed to fit the needs of as many people as possible. People look to systems like these for a number of reasons, most importantly is what is often perceived as end user control without the need for a vendor intervention.
While it may be true that one can gain a certain amount of vendor independence, I'd like to address the primary reason that I think a custom CMS trumps generic CMS systems.
Your Data is Important to Me
One of the primary and obvious benefits of a custom CMS is that the tools you use to manage your content can be modified to reflect both your data and your domain models explicitly. While a number of CMS solutions offer mechanisms for defining taxonomies and schemas; these are often very shallow representations which cannot provide the deep relationships and business logic between conceptual objects which can be achieved with custom schemas and models.
The vast majority of projects here at iMarc begin and end with a business's domain model. That is, much of the early strategy phase is exploring what client's want to present to the world, what terminology they use to represent it, and how it relates to other conceptual objects; with good reason...
Your Data is Important to the Web
HTML5 popularized the idea of the "semantic web." Although this is something developers have been talking about and focusing on for years, part of what HTML5 began to offer the world was new ways to identify content. Since this is part of the very language that rules the web, it can be standardized to such a degree that companies like Google can aggregate much richer information about your business, organization, or project.
This results in better search results, higher potential for syndication and networking, and, of course, a more fulfilling experience for administrators, web users and, ultimately, customers.
Well structured and organized data has the ability to produce well structured and organized markup. Using Google's Structured Data Markup Helper, I used a recent blog post on iMarc's homepage to see some changes we could make to our markup.
I began by selecting text and choosing what it represents after having first selected the type of data we want to identify, in this case a blog post:
Once I tagged the content, I can create a modified HTML version which generates changes that allow Google to index that information in a semantic (i.e. meaningful) sense:
Now, while it is completely possible to use a non-custom CMS and manually insert this markup or install plugins to try and gain similar results; I can see pretty quickly how tedious this might be to manually identify otherwise non-distinguishable data and fields.
Alternatively, as I look at the data in our own CMS, it is immediately clear to me that this information could be added in very much the same way the blog content itself is. One of the key benefits of custom solution is that any adjustments I'd make to how one blog article gets rendered would persist across all future and past blog articles without any additional work.
Data, Forget Presentation, Meet Entropy
Often, what clients are actually interested in is "free-for-all" type content editing. This demand is not merely for the sake of being able to say whatever they want wherever they want, but also for the sake of being able to present it how they want.
Inevitably, what users and customers want is information. RSS, for example, was perhaps the first commonly known foray of the web into rich semantics. The result of this data format was a host of readers both native and web-based which put information at people's fingertips. And wouldn't you know it, there were probably nearly as many RSS readers as there were people reading RSS. I believe that this is because as most of us fetishize about presentation, a single firm, designer, or stakeholder is rarely (if ever) uniquely capable of deciding the best way to go about presenting their information (in this case articles).
Overall, the great fear that a custom CMS means lack of control and, thus, lack of function, is a myth. While it may be true that users working with a custom CMS cannot arbitrarily do whatever they want, that is precisely the function it offers.
The explicit tools designed with your data in mind are what affords your website a lack of entropy over the long haul. It is what makes it live longer than any one design trend. It is what makes content end up where users expect it, rather than where the new content manager you hired decides to put it. It is what gives consistent, reliable, and accessible user experience that has the capacity to deliver great content regardless of a user's desired presentation model.
It is the reason the HTML and "the web" exist.
The Middle Ground (Conclusion)
Custom CMS systems afford a high degree of specialization and a consistent experience for both content editors and content users. A well designed custom CMS system should be easy for both the original vendor or a third-party developer to modify and customize. Using good object oriented design, a high level of abstraction, and a future-focused approach on the first build will conserve all of the benefits and limit the amount of time and money required for future modification.
While this does not equate to being able to download and install a plugin from who knows where to add new feature X, it does mean that features Y and Z will not have you trying to shoehorn your business's data into something so broadly designed that it works just as well for a kid in his parent's basement writing a blog. If you remain concerned about the control you'll have to modify and develop your new website or application long term, make that concern known, and address it with whomever you decide to work with, I think you'd be surprised at the solutions the right partner can offer.
In short, the idea that vendor independence and long term customizability, is a "free" feature of an off-the-shelf CMS is a misnomer. Any truly well-developed solution will still require someone familiar with modifying and customizing that CMS, and the hidden cost of something designed without your data model in mind may be more than you realize.
As designers, sometimes our biggest hurdle can be ourselves. I’m a bit of a perfectionist myself and occasionally I find it difficult to export a comp, close Photoshop and say, “I’m done.” What I’ve learned as I become a more seasoned designer is recognizing the difference between when I’m just pushing around pixels (Push Mode) and when I’m actually being productive (Design Mode). Unfortunately, knowing the difference doesn’t always keep me out of Push Mode so I’ve tried to modify my process a bit to keep it from happening.
Schedule breaks into your design time
Sometimes the best thing you can do is put some space between you and your design. If I’m struggling with a design I’ll make sure I put it down for a while and work on something else, or if time permits I’ll spend a few hours on it at the end of the day and then go home. When I pick it back up in the morning new solutions come to mind. It’s incredible what can happen after a quick walk to grab lunch or a good night sleep.
It doesn’t have to be perfect to share it with others
If you’re lucky to be part of a design team like I am, you can lean on those designers when you find yourself in Push Mode. Sometimes you don’t realize how deep you are in the forest because all you see is the tree in front of you. What you might not like because you’re burnt out and being overcritical of your own work might actually be a decent solution. There have been times I’ve haven’t been satisfied with this or that but my fellow designers have liked what I’ve done. A fresh set of eyes can make all the difference.
If you aren’t part of a design team you can try dribbble, after all that’s what it was created for. If you don’t have a dribbble account send an email to firstname.lastname@example.org with a link to some of your work and maybe I’ll draft you.
Start Lo-Fi and push it from there
If you notice that you spend half a day on a design and all you have is a perfected navigation bar then maybe that isn’t the best use of your time. An approach that I’ve adopted is starting with a low fidelity comp that is basically a slightly polished wireframe. This keeps me from getting stuck in the weeds of selecting the perfect image or spending way too much time making sure the navigation looks amazing. When I have everything laid out the way I want and I know everything has the proper weight, then and only then do I start to add the high buff shine. This method gives you a strong foundation to build on top of and it keeps you from over designing something that might not need that much pizzaz.
Go forth and design efficiently my friends.
It's hard to believe how quickly time has passed and that suddenly 2013 is just a memory as we look ahead to 2014. As is customary at this time of year, I have paused to reflect and think about what I am grateful for and what I truly appreciate. On a professional level I am really grateful for my role here at iMarc.
We work at one of the best digital agencies in Boston and in Santa Cruz; and we deliver exceptional results. We love what we do and we are really passionate about it. I realize this all sounds a bit cliche, but it is the foundation of who we are and why we are so driven by our clients success. However even more than that, through all of our collaboration and healthy debate we truly like and respect each other.
Over the holidays we gathered together as a team to celebrate with a Secret Santa gift swap. Of course because we are iMarc, Matt wrote a script to randomly assign names for each of us to purchase a gift for one another. Once we did that we held a party, Skyped with the Santa Cruz office, and one by one opened our gifts. The gifts ranged from t-shirts, to old school records, to an autographed Bergeron hockey puck, and books. Patrick even received a Photoshop poster of him and Peyton Manning based upon his recent domination in the iMarc fantasy football league.
The fact remains that every single person put a lot of thought and effort into each of those gifts to get something that the recipient would really enjoy; which is much like our approach to every client project.
As we look ahead to 2014 and all the possibilities ahead of us I am grateful for working with such an incredible team. I look forward to working with our great clients, our new clients on the horizon, more healthy debate, collaboration, and success in 2014!