cores and paths - designing a website
Post on 27-Jan-2015
118 Views
Preview:
DESCRIPTION
TRANSCRIPT
1
Cores and Paths: Designing from the Inside Out
Imagine you’re on one side a grass lawn and you want to reach the bus stop on the opposite side. Do
you walk on the sidewalk around the edges or cross in the middle? Assuming the grass is dry and it’s not prohibited, you’d probably take the shortest path and walk across the lawn to the bus stop. If others have done so before, you may see a beaten path that you could follow.
Such unplanned paths connect the shortest distance between two points, and we can find them
everywhere in our surroundings. In urban planning they are known as “desire paths” or “desire lines.” (http://en.wikipedia.org/wiki/Desire_path) They are an indication of the gap between natural human behavior and contrived routes.
Architect Christopher Alexander recognizes desire lines in his renowned book A Pattern Language
(1976). He gives specific instructions for leveraging them in architecture:
To lay out paths, first place goals at natural points of interest. Then connect the goals to one another to form the paths.
In principle, Alexander's approach is to begin with the goals—the things people ultimately want—and then link them together in the most useful way.
Typically in web design, the opposite approach is usually the rule: designers begin with the
homepage. They then work out a navigation scheme, which pages at the bottom automatically inherit whether it's appropriate or not. And the goal—or the primary content people are looking for—turns out to be the last thing that gets attention in the design process.
Inspired by "desire lines," we can reverse this tendency in Web design. "Cores and Paths" is a specific
technique to guide you through this process. The result is a straight path to the core offering on your site.
The Cores and Paths Model "Start with the goal" is the clear recommendation of the Norwegian information architect Are Halland in his presentation “Cores and Paths: Designing for Findability“ (http://slidesha.re/dnwrLX; IA
Summit, 2007). Here, he outlines an alternative approach for web design: instead of beginning with the homepage and overall navigation scheme, start with the core content and work outward from there. It's that straightforward and simple
The technique is based three key elements:
1. The Core: The core is the reason users come to site. From the provider's perspective, the core is
what's offered on the site. Note that the core isn't always a page. For YouTube, the core is a video and not a page on www.youtube.com. This makes it possible to have distributable cores, or content that may be found on other websites.
The core may be accompanied by supporting information. Technical details, for instance, can be considered an extension of the core. On sites like flickr a description of a photo as well as the tags user give it are supporting information for the core, which is the photo itself.
2
2. Inward Paths: How do users get to the core? Sometimes visitors arrive at the core via the main
navigation or search of site. But they might also come directly from Google. Other paths are possible as well, such as links from other sites, teasers, entering URLs directly in the browser, and even via RSS feeds and newsletters. Thinking about inwards paths also considers aspects of SEO,
such as what the trigger words are that people are searching on.
3. Outward Paths: Assuming users found what they were looking for, what can they do from there?
What are their calls to action? Fundamentally every subsequent interaction should bring some kind of value to the business. This is where conversion takes place. Outward paths can be everything from placing an item in a "shopping cart" to recommending a product to a friend. As
with inward paths, there are a variety of options to consider, including links that lead away from the site.
Each of these three elements has a different function. The core is really where value creation for both users and the business takes place. Persuasion plays a big role here: organizations ultimately want users to take some specific action. The inward paths ensure findability. This is how people come
to the products and services they are looking for on the web. From a business standpoint, the outward paths are what bring ROI to an organization.
Below is an illustration of the Cores and Paths model, using Amazon as an example (Figure 1). The core is a product, represented here by an image of a book cover and its key details, indicated in the red box. Users find that book in numerous ways, listed on the left. These are the inward paths.
Amazon sees a return on investment when users take action on the core, seen on the right as possible outward paths.
Figure 1: The Cores and Paths model for www.amazon.com
The Cores and Paths Process The following section shows how the Cores and Paths method can be used in a practical situation based on a hypothetical example. Imagine the following scenario:
You work for a small agency and have been contracted by a bicycle shop to improve their website. The shop currently only has a "brochure-‐like" website with address and opening
3
times. They'd now like to get into ecommerce and be able to sell online. The product line
consists of high-‐end racing bikes and mountain bikes, along with the appropriate accessories for each. There are about 1000 products in total they want to sell online. The shop's main target groups are professional cyclists and highly motivated amateurs. As a result, the bikes
sold are primarily from premium brands. The design of the website should highlight the high quality of their products.
Following the Cores and Paths approach, here's how to design the website from the inside out:
STEP 1: Define the core What is the core offering? First, make a list of possible candidates: bicycles, accessories, services, etc.
It starts with brainstorming so there are no right or wrong answers initially. After compiling a complete list, decide on a core and its supporting information. In large teams this means getting agreement from team members and stakeholders alike.
In the above scenario, the core is the product—a bike. A photo of the product is a central element to
represent the core. The bike features, brand and product line are all types of information that belong to core in this case. Supporting information includes the price and additional technical details.
After deciding on and prioritizing these details, sketch the core (Figure 2). Don't sketch the entire page with navigation and a logo: just focus on the core. Customers may want view details of the
product up close, so consider how they will interact with the images even at this stage. Think about the experience visitors will have with the core once they find it.
Figure 2: Sketch of the core and supporting information
Keep in mind that users will also be visiting the site from smartphones and tablets. And they may also
post an image to facebook or Pinterest. This is an example of a "distributable core." So also sketch how the core might transpose to these different contexts (Figure 3). Again, do this without sketching the page chrome or navigation—just focus on the core.
4
Figure 3: Versions of the core in different possible contexts.
From this you'll see how the core and supporting information behave in different situations. You may have to go back and forth between the versions updating them iteratively.
STEP 2: List all possible inward paths.
What are all the ways that users can reach your core? Obvious things come to mind at first: site search, the main navigation, Google, and links from other websites. But more paths come into play as
you brainstorm: links from comparison shopping sites and even references from offline media, such as a printed catalog.
For each inward path in your list, also write down all of the design requirements that must be met. For instance, SEO and landing page optimization is necessary for visitors coming from Google and other search engines. (See Figure 4)
Figure 4: A list of possible inward paths and the key requirements for each
STEP 3: List all possible outward paths. Determine the paths away from the core. As in STEP 2, also include requirements for each item in the list. This helps to rank the outward paths in terms of importance to the business, providing clarity for
5
the design in later on. (See Figure 5). A clear call to action button brings the user to the checkout process in this example. And if the customer can't decide right away, a link to a wish list or to recommend the product to others is a second priority.
Figure 5: List of outward paths with prioritizations
Up to this point, we've neither looked at the homepage nor have we thought about the navigation. Yet, we've addressed important design decisions, such what a mobile version of the core product might look like and how people will interact with the primary content of the site. After making these into higher-‐fidelity mock-‐ups, these initial representations could even be tested with users. STEP 4: Put it all together. Only after you've designed the core and listed the inward and outward paths should you start looking at the homepage and at the navigation. The goal at this point is to bring the user in the simplest,
most-‐direct way possible to the core.
Design the homepage of the site, as well as gallery pages and search results. Sketch several alternatives. While doing this, keep the elements of Cores and Paths in mind: what is the core, how do users get to it, and how will the business see conversion?
6
Figure 6: Sketch of the homepage – a first draft
In this scenario, to get users from the homepage to the core the three product lines of the shop
appear in the main navigation: "racing bikes," "mountain bikes" and "accessories." Since brand is also important to the target groups, a separate point for "brand" is also included. A prominent link to a shopping cart and checkout process is also located in the header.
Figure 7: Sketch of the gallery page with filters and sorting options
Below is a helpful template to use to capture all of the points and steps described in this article (Figure 8). Try Cores and Paths out yourself!
Figure 8: A template for Cores and Paths
Summary The Cores and Paths process is important for several reasons:
1. Identification of gaps. Upfront questioning of the purpose of the primary content of helps
7
uncover gaps in the initial briefing.
2. Prioritization of elements. Breaking down key elements in this way gives a clear prioritization to the overall design.
3. Design focus. The approach gives a clear direction to follow for the whole project team.
The difference between Cores and Paths and other approaches may seem subtle at first. But the
impact is great: now, the core offering stands firmly in the middle of your design. All other elements in the site design then serve the purpose of bringing both users and the business to their goal.
James Kalbach is the author of the O'Reilly book "Designing Web
Navigation" (2007), which has been translated into six languages other than English. He regularly gives presentations and holds workshops at international conference on information architecture and navigation
design. James is currently Principal UX Strategist at USEEDS°, a Berlin-‐based design and innovation consultancy. He was previously an Experience Design Consultant at LexisNexis and prior to that Head of
Information Architecture at Razorfish, Germany. James holds a Masters in Library and Information Science from Rutgers University. He blogs at www.experiencinginformation.com and can be found on
Twitter under @jameskalbach.
Email: james.kalbach@gmail.com
LinkedIn: http://de.linkedin.com/in/kalbach
Karen Lindemann is a psychologist and experienced advertiser with years of experience as a writer in agencies. In 2005 she founded the
user experience agency NetFlow and consults well-‐known companies on the optimization of websites, products and services. Karen also advises clients on information and product strategy. In addition to
standard user-‐centered design methods such as usability testing, expert reviews, card sorting, personas, co-‐creation and mental model diagrams, she also conducts ethnographic studies and deep
emotional-‐based interviews. Karen is also active in organizing workshop on user experience-‐related workshops for professionals in the field.
Website: www.netflow-‐lindemann.de
Website: www.ux-‐workshops.com E-‐Mail: kl@netflow-‐lindemann.de XING: www.xing.com/profile/Karen_Lindemann
LinkedIn: http://de.linkedin.com/in/karenlindemann Twitter: twitter.com/karenlindemann/
8
top related