Website Design Analysis: Use the core-Path Method to Design pages

　　

 

Note: the original name of the article is "Designing Screens Using Cores and Paths. Inspired by the "Traffic Demand Line" in urban planning, the author proposes the "core-Path Method" for website design ". Unlike the general method from the framework to the home page and navigation, the "core-Path Method" allows designers to start from the core content and design internally and externally. This method breaks the general rule to create the most direct path on the website, so that users can find the core content.

Link Original: http://boxesandarrows.com/designing-screens-using-cores-and-paths --------------------------------------------------

　　

 

Imagine if you want to reach the bus stop across the lawn, do you walk around the sidewalk around the lawn or wear it in the middle? If the lawn is dry and it is not prohibited to enter, you are likely to choose the nearest route-directly walk through the lawn to the bus station. If many people have done this before, there will be a "way out ". This unplanned road connects the shortest distance between two points, and we see such examples everywhere. In urban planning, they are called "Traffic Demand line" (desire pathsdesire lines), which means the difference between natural human behavior and human planning routes. Architect Christopher Alexander defined the "Traffic Demand line" (1976) in his book Model language ). For the application of the "Traffic Demand Line" in architecture, he gave a specific description: "The method for planning roads is to first set the target point in natural scenic spots, then these points are connected to each other to form a path." -- Christopher Alexander, in principle, Alexander's approach is to aim at what people ultimately want and then connect them together in the most useful way. However, in web design, the approach is usually the opposite: designers design from the home page. Then they developed a navigation scheme based on the website structure level, whether appropriate or not. However, the goal (the main content the user is 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 webpage design approach. Using the core-path method can guide you to create the most direct path on your website so that you can access the core content directly.

Core-path model

"Instead of starting from the home page and the overall navigation solution, we should start from the core content and design internally and externally. "Target-oriented ." The information architect Are Halland suggested this in his speech core-Path Method: traceable design. He outlined another method of Webpage Design: instead of starting from the home page and the overall navigation solution, we should start from the core content and design internally and externally. That's all. This method is based on three key elements: 1. Core Content

The core content is why users are attracted to the website. From the developer's perspective, the core is the content provided by the website. Note that the core content is not always a page. For YouTube, the core content is video instead of pages on www.youtube.com. This makes it possible for YouTube to find video content on other websites. The core content may also contain auxiliary information. For example, technical details can be considered as an extension of the core content. For websites like Flickr, the description of photos and the tags that users give them are core content-auxiliary information of photos. 2. inner path

How do users find the core content? Sometimes, the visitor finds the core content through the main navigation or search. But they may also come directly from Google. Or other paths, such as from other websites, advertisements, directly entering URL links in the browser, or even using RSS and newsletters. To enter the path, you must also consider the optimization of the search engine, such as what keywords people search. 3. outbound path

Suppose that the user finds the content they are looking for, what can they do next and what can they do? Basically, every subsequent interaction will bring some value to the business. This is where the change occurred. The external path can be any of the operations from "putting one thing into the 'cart'" to "recommending a product to a friend. As with the inner path, there are also many options to consider, including the link to the website. Each of these three elements has different functions. The core content truly creates value for both users and businesses. The guidance of external paths plays a major role here: the website eventually wants users to purchase and other specific behaviors. The inner path ensures availability, that is, how users can find the products and services they want online. From the commercial point of view, the external path is something that brings a return on investment to the website. The following is a diagram of the core-path method. Amazon is used as an example (figure 1 ). The core content is a product, which is shown in the red box, including the cover and key details of a book. You can find this book in multiple ways on the left. These are the inner paths. List the behaviors that Amazon deems that users can generate ROI on their core content as possible outward paths on the right.

　　

 

Figure 1 core-path model of www.amazon.com

Core-Path Method Application Process

Imagine the following scenario: when you work in a small design company, you receive a form of bicycle website revision. The store now only has a website with a simple booklet containing addresses and business hours. They want to introduce e-commerce so that they can be sold online. Products include high-end racing cars and Mountain bicycles, as well as some of their accessories. The store wants to sell about 1000 products online. Its main target customers are Professional cyclists and amateurs. The sold bicycles are mainly from high-quality brands. Therefore, the website design should emphasize the high quality of bicycle products. According to the core-path method, the following describes how to design the website. Step 1: define core content

What are core products? First, we should list a candidate list: bicycles, accessories, services, and so on. The list comes from brainstorm and there is no right or wrong concept. After editing the complete list, determine a core content and its auxiliary information. In a large team, this means reaching consensus with team members and stakeholders. In the above scenarios, bicycle is the core product. Bicycle photos are a key element for displaying core content. In this case, bicycle functions, brands, and product series are from the core content. The auxiliary information includes price and additional technical details. Hand-drawn core content (Figure 2) after giving priority to and determining these details ). Do not draw the entire page including navigation and logos, but focus only on the core content. Customers may want to view the product details in detail, so two things should be considered at this stage. First, how do they interact with the product content. Second, we need to consider the application scenarios after the user finds the core content.

　　

 

Figure 2 hand-drawn core content and auxiliary information

Remember that users will also access the website from smartphones and tablets. They may also send pictures to Facebook or Pinterest. This is an example of the distributed core. Therefore, we hand-drawn how to place the core content in different scenarios (Figure 3 ). Similarly, do not draw page decoration or navigation, just focus on the core content.

　　

 

Figure 3 different versions of core content displayed in different scenarios

Here you can see that the core content and auxiliary information are displayed in different scenarios. You may have to update them through version iterations. Step 2: list all possible inner paths

What are all ways for a user to arrive at your website? Apparently, the first thing that comes to mind is: website search, main navigation, links to Google and other websites. However, through brainstorming, we can find more paths: links to shopping price comparison websites, and even from offline media, such as printing product directories. For each inner path in the list, you must write down the design requirements and meet these requirements. For example, search engine optimization and logon page optimization are necessary for visitors from Google and other search engines (figure 4 ).

　　

 

Figure 4 inner path list and corresponding key requirements Step 3: list all possible external paths

Test the path from the core content. Just like step 2, the external path must meet the design requirements. Sort the external Paths Based on the importance of the business to make the subsequent design clearer. As the external path will eventually generate commercial value, the sorting should be based on the commercial objectives. In this example, a clear guiding button is used to bring the customer into the checkout process. If the customer cannot make a decision immediately, the second priority is to provide a link to the customer, link to the wish list, or link to the product recommended to others.

　　

 

Figure 5 sequence of outward paths

So far, we have no need to look at the home page or think about navigation. 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 website. After a high-fidelity model is created, these initial interfaces can be used for user testing. Step 4: Integrate all content

After you design the core content and list the inner and outward paths, you can focus on the home page and navigation page. The goal of this phase is to allow users to find their core content in the simplest and most direct way. Design the homepage, navigation page, and search result page of the website. Hand-painted options. When designing, remember the elements of the core content and Path: What is the core content, how users get it, and how businesses are converted?

　　

 

Figure 6 hand-drawn home page-Draft 1

In this scenario, in order to enable customers to go from the home page to the core content area, the three major product series of the bicycle store appear in the main navigation: professional racing cars, mountain bikes and accessories. For target customers, the brand is also an important factor, so the brand is also included. An obvious link-the shopping cart and checkout process are also in the navigation area.

　　

 

Figure 7 Graphic Guide page with filtering and sorting options

The following is a template for all the key points we captured in the article and the steps described (figure 8 ). Download the template at the end of this article and try your core-path method.

　　

 

Figure 8 core-path Template

Summary

This method improves the design in the following aspects: Identify gaps.

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

The key elements of decomposition give priority to the presentation of the entire design. Focus on design.

The core-path method 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 is standing in your design. All other elements in web design serve one goal, that is, the perfect combination of users and businesses.