Most people, even web professionals, often think of a website as its homepage. Consider CSS galleries, where hundreds and thousands of well-designed websites are displayed solely by showing screenshots of their their respective homepages, and visitors click through and often abandon after judging a site based on that one page alone. Homepages are almost always the single highest-viewed page on a site, and therefore have an air of significance and importance about them that is well-deserved.
But when you consider things more critically, it’s more clear that a website’s homepage is just one small piece of the website as a whole. Even on a simple blog, we hope that the combined traffic of the individual post pages are significantly higher than that of just the home page. On web applications, the difference is much more substantial, with pages like dashboards and item detail pages really being the keys to success in the long term.
As an industry, we traditionally design the homepage first, and clients have often come to expect this, as it’s easy to understand and can set a tone for the entire site. I argue that for any site with significant complexity, this is a backwards approach. Designing from the inside out can produce a design (visual or structural) that greatly exceeds that of the traditional approach with respect to consistency, attention to detail, user experience, development efficiency, and overall quality.
Chunking and Working Memory
Most folks have heard about the paper written in the middle of the last century that contends that the number seven (plus or minus two) represents the number of items we can retain in our working memory at any given time, especially its impact on American phone numbers, which consist of seven digits plus a sometimes-optional area code. We rely on our working memory (a cognitive science concept, similar to short-term memory, depending on the context) to solve problems effectively, and this limitation comes into play frequently during the design process.
The purpose of a homepage is often to encapsulate many, if not all, the business and user goals of a website into one cohesive screen. Even on sub-pages of significantly complex apps, those pages themselves need to wrangle many objects together and, again, display them cohesively as a single screen.
The goals and challenges that need to be addressed in creating these pages almost always exceed the bandwidth we have available in our working memory, and this makes it tough for the designer to “get her head around” what needs to be done.
Consider a site like Yelp, which surfaces geographic locations, categories, reviews, restaurants, users, and lists, not to mention marketing content, navigation, ads, etc. Each of these types of content represents multiple decisions that need to be made, such as what content is available about a restaurant, what content is most important, whether or not there are photos, and so on. The sheer number of decisions that need to be made make this home page a daunting task for the designer.
And so the designer chunks (another cognitive psychology term) the decisions that need to be made into manageable groups. She tackles the restaurant item first, then the reviews, and so on, perhaps breaking those items into subtasks mentally. Many designers turn to this after unsuccessfully struggling to design the page more holistically like they’d prefer, but the overload of their working memory prevents this and often causes design block.
Interior Pages as Productive Chunking
Had the designer started from an interior page, like a restaurant detail page, the problems to be solved would be fewer and simpler. The interface designer would be considering what types of content are available about a restaurant, and how important each bit of content is with respect to others. A visual designer would be considering how the eye would best respond to this content and how it can be displayed in an easy-to-absorb and engaging way. These are challenges, but they’re manageable.
The designer could have broken these problems down in the same way when designing the homepage, but this is less constructive. The home page only requires a small bit of the restaurant information displayed on the detail page, but requires many or most of the problems required of a detail page to be addressed in some way. When the designer moves on to another part of the home page, the problems addressed and solutions found in creating the restaurant section are lost. Later, the designer will have to come back to these problems on an interior page, and may remember some of those solutions, but may forget others. For very complex sites, the amount of time between designing the home page and some pieces of the interior can be weeks, which makes recalling these solutions even more challenging.
When building an interior page as the designer works inside out, all (or at least most) relevant design solutions are documented, so the process is loss-less.
When building an interior page as the designer works inside out, all (or at least most) relevant design solutions are documented, so the process is loss-less. When the designer then moves to a restaurant list page, the challenge of condensing the information from the detail page into a list item may be significant, but can also be based on decisions made in the recent past — most of the heavy lifting has already been done.
When moving up to the home page, it’s a simple task to abstract a restaurant listing from the work that has now been done on the restaurant list page. The heavy lifting on the home page becomes the holistic treatment of the business and user goals, and the minutae of how to display the content doesn’t burden the designer’s ability to solve these larger problems in effective and engaging ways.
The effect of this inverted process is higher-quality solutions to design challenges. The designer focuses on the most significant challenges at hand, and is able to rely on past work to fill in the details in ways that have already been considered.
Especially for home pages and landing pages done toward the end of the inside out process, this means that often-neglected aspects of design like marketing value, advertising placement, cognitive load, and overall user experience affect are given their due attention and aren’t overridden by concerns about content structures.
Speed & Consistency
The challenge of creating a restaurant listing on a homepage or other high-level page can be daunting and time-consuming, but when the groundwork has already been laid, it’s comparatively easy to borrow from the work that has already been done on the interior to make light work of an otherwise-challenging problem. This usually results in significant time savings, since time formerly spent spinning wheels in thought is now spent doing things on the interior.
This usually results in significant time savings, since time formerly spent spinning wheels in thought is now spent doing things on the interior.
What it also results in is an increase in consistency throughout the interface. The tone set by the interior page can simply bubble to the top of the sitemap, with tweaks and abstractions where appropriate. This is in contrast to the potential inconsistency caused by the time that may have lapsed between the designer’s treatment of an item on the home page and his ability to work on the interior treatments of the same object.
Depending on your process and your development team, this consistency and inside-out process can make it easier for your developers to work, especially if you’re in an agile or iterative process. In fact, I’d suggest that it’s highly counterproductive to work from the outside in when using an iterative process. Surfacing context for your views or templates can be easy when it’s already been done for a detail page, but going in the opposite direction and making changes along the way can create headaches, friction, and added work.
In my experience, the only downsides have been with respect to clients and communication. Clients often expect to see the homepage early in the process, so setting this expectation early and explicitly is important to satisfying their preconceived notions about the design process.
Additionally, the homepage (either as a wireframe or as a comp) is often the first time that relatively inexperienced clients actually understand the overall site structure. As much effort as we put into sitemaps and user flows prior to wireframing, they can sometimes be difficult for more visually-oriented clients to process, and they may sign off on early deliverables in an effort to get to those they can better understand more quickly.
This latter challenge is trickier. One solution is to work on the main navigation first, outside the context of any particular page, and then to have discussions around that component in particular before moving on and applying that to interior pages. Another is to work with the client early on to figure out whether she will be receptive to diagrammatic deliverables like user flows, or if another way of presenting that planning is going to be more effective. Anyone have others?
I’ve mentioned this in passing, but if the site is sufficiently simple, like brochure sites or simple blogs, the advantages of inside out design are much smaller. In these cases, it may be more effective to work on the home page first, especially given client considerations.
That aside, inside out design can be a major boost to your design quality, efficiency, and consistency. If you haven’t tried it yet, it’s worth a go on your next medium-to-large design project.