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.
A homepage for a major project (like Yelp) can be tough for a designer to get his head around.
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.
Quality
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.
Client Concerns
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?
Simple Sites
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.
This is something my coworkers have been discussing lately. From a slicing point of view we believe it does make more sense to slice from the inside out. The homepage/landing pages are seen more as fringe cases, where as the sub pages can be seen more as a framework for the site.
I had not thought about it from a designers perspective, but it makes complete sense. Great article.
Excellent, consider me fully convinced. Also, thanks for providing some of the language for a serious discussion about inside-out work, this is definitely going to come in handy in the near future.
Great stuff, Jackson. I really enjoy your writing.
I've been advocating inside-out design (without having a snazzy name for it) for years.
The simple reason is that the interior of a site IS the site. The home page serves only to attract and funnel users into the interior.
From a design point of view, I find that you're better served solving the design problems of the interior without a home page that you're trying to honor. And it's much easier to design a great home page when you already have a solid, interior design.
Designers seem to do better when the canvas is not quite so blank, and site planners can tell designers a lot more about the needs and rules of an interior page than we can tell them about the home page. In turn, those nearly-completed interior pages, inform their creativity on the home page.
Further, if a designer nails the interior early, developers can start incorporating their decisions sooner. The bulk of the project will take shape earlier. Problems tend to get caught, and a finer level of details tends to permeate the entire finished product.
In fact, in many cases, the home page is almost entirely a design issue, doesn't need to impact the technology team, and can almost be added at the last minute - as a cover would be in the publications world. It's also frequently easier to change the home page over time - to adapt it based on performance or whatever - than it is to change the interior pages.
The client issue is significant, but I think it can be overcome in most situations, especially when a client has hired you because of what you specifically bring to the table (not because you're dirt cheap or fast or desperate for a gig). I find it's usually pretty easy to make the case that we're going to pay attention first (in the design phase) to the interior of the site. We'll frost the cake when the baking is done, and we'll work just as hard on the visceral impact of the home page as we would have done if we designed it first. But we're going to proceed on a little more of a patient tack, and the rewards of this method will be tangible.
Not only does that tend to work (for me) but it also puts a spotlight on the interior pages, since they're the first visuals seen by the client, and keeps the spotlight on for the “excitement” of moving on to the home page. When, reversed, the home page grabs all the attention and reviewing the interior pages generates little enthusiasm.