Tencent CDC: Design pages with core-path approach

Translator Note: The article is formerly known as Designing%20screens%20using%20cores%20and%20%20paths. The author is inspired by the "Traffic demand line" in urban planning, and proposes the "core-path method" of website design. The "core-path approach" allows designers to start with the core content, from inside to outside design, as opposed to the usual approach from frame to homepage and navigation.　　This unconventional approach creates the most direct path in the Web site so that users can find the core content. Link Original: http://boxesandarrows.com/designing-screens-using-cores-and-paths/

Imagine, when you want to get to the bus stop across a lawn, do you walk around the sidewalk or through the middle? If the grass is dry and not banned, then you will probably choose the nearest route--walking across the lawn to the bus stop. If a lot of people have done this before, there will be a "way out".

This unplanned road connects the shortest distance between two points, and we are surrounded by examples of this. In urban planning, they are called "traffic demand Lines" (Desire pathsdesire lines), meaning the difference between human natural behavior and man-made planning routes.

Architect Christopher Alexander defined the "Traffic demand line" in his book "Modal Language" (1976). As for the application of "traffic demand line" in architecture, he gives a detailed explanation:

"The way to plan the road is to set the target point in the natural attraction and then connect the points to each other to form a path." "--christopher Alexander

In principle, Alexander's approach is to target the things that people ultimately want, and then connect them in the most useful ways.

But in web design, the following approach is often the opposite: Designers start with the homepage. Then they work out a navigation plan based on the structure of the site, whether appropriate or not. But the goal (the main content that users are looking for, or what they want to do) is the last thing to consider in the design process.

Inspired by the "Traffic demand line", we can improve this way of designing Web pages. Use the core-path approach, which guides you through creating the most direct path in your Web site so that users can go directly to the core content.

Core-Path model

"Do not start from the homepage and the overall navigation scheme, but from the core content, from the internal and external design." “

"Goal-oriented." "Information architect are Halland in his speech," core-path approach: Design for the search. " He outlined another way to design a Web page: Don't start with the homepage and the overall navigation scheme, starting with the core content, from the inside and outside the design. It's just so direct.

This approach is based on three key elements:

1. Core content

The core content is the reason that attracts the user to come to the website. From the developer's point of view, the core is the content provided by the website. It is important to note that the core content is not always a page. For YouTube, the core content is video, not the www.youtube.com page.　　This makes YouTube likely to have video content that can be found on other sites. The core content may also contain ancillary information. For example, technical details can be considered an extension of the core content. A site like Flickr, a description of the photo and the label the user gave it, are the core content--the photo's auxiliary information.

2. Inward path

How do users find the core content? Sometimes, visitors find core content through leading navigation or search. But they may also come directly from Google. or other routes, such as from other sites, ads, directly in the browser to enter URL links, even through RSS and newsletter. Entry paths also take into account search engine optimization, such as what keywords people search for.

3. Outward path

Assuming the user finds what they're looking for, what can they do next and what do they do? Fundamentally, each subsequent interaction brings a value to the business. This is where the transition takes place. The external path can be any of these actions from "putting something into a cart" to "recommending a product to a friend". As with an inward path, there are many options to consider, including links to leave the site.

Each of these three elements has a different function. The core content is really the place to create value for both the user and the business. Outward path guidance has played a big role here: The website ultimately wants users to produce specific behaviors such as buying. The inward path ensures the availability of the products and services that users can find on the web. From a commercial point of view, the outward path is something that brings ROI to the site.

The following is a diagram of the core-path approach, taking Amazon as an example (Figure 1). The core content is a product, which is represented by the contents of a red box, including the cover and key details of a book. On the left is a list of ways in which users can find the book, which is the inward path. Take Amazon as a possible outward path to the right by thinking that users can generate ROI on their core content.

Fig. 1 The core-path model of www.amazon.com

The application process of core-path method

Imagine the following scenario: You work in a small design company and receive a revised list of bike sites. The store now has only a "brochure" of a website with addresses and hours of business. They want to introduce e-commerce so they can sell it online. Products include high-end racing and mountain bikes, as well as some of their accessories. The store wants to sell a total of 1000 products, the main target customer base is professional cyclists and amateur enthusiasts. The bikes that have been sold come mainly from premium brands, so the design of the website should emphasize the high quality of the bicycle products. Based on the core-path approach, here's how to design this site in the complete steps.

First step: Define the core content

What is the core product? First, make a list of candidates: bicycles, accessories, services, etc. The list comes from brain violence and there is no right or wrong concept. After editing the complete list, determine a core content and its ancillary information.　　In a large team this means reaching a consensus with team members and stakeholders. In the above scenario, the core product is the bicycle. Bike photos are a key element in showing the core content. In this case, the function of the bicycle, the brand and the product family are the information that is subordinate to the core content. Ancillary information includes price and additional technical details.

After prioritizing and determining these details, hand-painted core content (Figure 2). Do not draw the entire page, which includes navigation and logos, but focus on the core content.

Customers may want to look at the details of the product in detail, so there are two things to consider at this stage, first: how they interact with the product content. Second: Think about the usage scenario once the user finds the core content.

Figure 2 Hand-painted core content and auxiliary information

Keep in mind that users will also be able to access websites from smartphones and tablet computers. They may also send pictures to Facebook or Pinterest. This is an example of a distributed core. So we're sketching out how to put the core content in a different scenario (Figure 3). Also, do not draw page decorations or navigation, only focus on the core content.

Figure 3 Different versions of the core content display in different scenarios

From here you can see the presentation of core content and auxiliary information in different scenarios. You may have to update them back and forth through the iteration of the version.

Step Two: List all possible inward paths

What are all the ways that users reach your site? The first thing that comes to mind obviously is: Web search, main navigation, Google and other websites links.　　But through brainstorming, more paths can be found: links to shopping parity sites, and even from offline media such as printed catalogues. For each inward path in the list, write down the design requirements and meet those requirements. For example, search engine optimization and landing page optimization are necessary for visitors from Google and other search engines (Figure 4).

Figure 4 The list of inward paths and the corresponding key requirements

Step three: List all possible outward paths

Infer the path from the core content. Just like step two, the outward path also satisfies the design requirements. The outward path is sorted according to the importance of the business, making the follow-up design clearer. Because outward paths ultimately produce commercial value, they are sorted by reference to business objectives. In this example, the customer is brought into the checkout process through an explicit boot button. If a customer cannot make a decision right away, the second priority is to provide a link to the customer, link to the wish list, or recommend a link to the product.

Figure 5 Order of outward path

So far, we have neither to look at the homepage nor to navigate. However, we have completed important design decisions, such as what the mobile version of the core product looks like, and how users interact with the main content of the site. When a high-fidelity model is made, these initial interfaces can be tested by users. Step Fourth: Integrate all the content together

When you design the core content, list the inward and outward paths, then focus on the home page and navigation. The goal of this phase is to get users to find the core content in the simplest and most straightforward way.

Design the homepage of the website, the guide page and the search results page. Hand-painted several options. At design time, remember the core content and path elements: what is the core content, how users get it, and how the business is transformed?

Figure 6 Hand-painted home-first draft

In this scenario, in order to get customers from the homepage to the core content area, the bike store's three major product lines appear in the main navigation: professional racing, mountain bikes and accessories. Branding is also an important consideration for the target customer, so the brand is included. An obvious link-the shopping cart and checkout process is also located in the navigation area.

Fig. 7 Guide page with hand-painted filter and sort option function

The following is a template about all the key points we capture in the article and the steps described (Figure 8). Download the template at the end of this article, try your own core-path method.

Figure 8 template for the core-path approach

Summarize

The following are some aspects of this approach to design improvement: identifying gaps.

At the very beginning, the difference can be found by questioning the purpose of the main content. The priority of the design element.

Decomposition of key elements, you can prioritize the overall design how to render. Focus Design.

The core-path approach provides a clear direction for the entire design team. The direct difference between the core-path method and other methods is very small in the initial stage. But the impact is huge: Now, the core content stands out in your design. All the other elements of web design serve a purpose, that is, the perfect combination of user and business.