Design pages using core-path method_html/css_WEB-ITnose

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

　 Translator's Note: The original title of the article was Designing Screens Using Cores and Paths. The author of this article was inspired by the "traffic demand line" in urban planning and proposed the "core-path method" of website design. Different from the commonly used method from frame to homepage and navigation, the "core-path method" allows designers to start from the core content and design from the inside out. This unconventional approach creates the most direct path through the site so users can find the core content.

Imagine that when you want to reach the bus stop across a lawn, do you go around the sidewalk around the lawn, or go through the middle? Assuming the grass is dry and not off-limits, you'll most likely take the shortest route - straight across the grass to the bus stop. If many people have done this before, there will be a "way out".

This type of unplanned road connects the shortest distance between two points, and there are examples of this all around us. In urban planning, they are called "desire paths", meaning the difference between natural human behavior and artificially planned routes.

Architect Christopher Alexander defined "traffic demand lines" in his book "Pattern Language" (1976). Regarding the application of "traffic demand lines" in architecture, he gave specific instructions:

"The method of planning roads is to first set target points in natural scenic spots, and then connect these points to each other to form a path ”

??Christopher Alexander

In principle, Alexander’s approach is to be oriented toward goals, that is, what people ultimately want, and then connect them together in the most useful way. .

But in web design, the approach followed is usually the opposite: the designer starts with the homepage. They then develop a navigation plan based on the site's structural hierarchy, whether appropriate or not. But the goal (the main thing the user is looking for, or what they want to do) becomes the last thing considered during the design process.

Inspired by the "traffic demand line", we can improve this method of designing web pages. Using the core-path method can guide you to create the most direct path in your website so that users can reach the core content directly.

Core-Path Model

“Don’t start with the homepage and overall navigation plan, but start with the core content and design from the inside out.”

"Be goal-oriented." Information architect Are Halland advises in his talk "Core-Path Method: Designing for Findability." He outlined another approach to web design: Don’t start with the homepage and overall navigation plan, but start with the core content and design from the inside out. It's that direct.

This method is based on three key elements:

1. Core content

Core content is what attracts users to the website. From a developer's perspective, the core is what the website provides. It’s important to note that core content is not always a page. For YouTube, the core content is the video, not the pages on www.youtube.com. This makes it possible for YouTube to have video content that can be found on other websites.

The core content may also have auxiliary information. For example, technical details can be considered an extension of the core content. On a website like Flickr, the description of the photo and the tags users give it are the core content - auxiliary information for the photo.

　2． Inward path

How should users find the core content? Sometimes visitors find core content through the main navigation or search. But they could also come directly from Google. Or other paths, such as from other websites, advertisements, URL links entered directly into the browser, or even via RSS and newsletters. Search engine optimization should also be considered for the path of entry, such as what keywords people are searching for.

　3. Outward Path

Assuming the user finds what they are looking for, what can and will they do next? Fundamentally, every subsequent interaction brings some kind of value to the business. This is where the transformation happens. Outbound paths can be anything from “put something in your shopping cart” to “recommend a product to a friend.” Like the inward path, there are many options to consider for the outward path, including links leaving the site.

Each of these three elements has a different function. Core content is truly where value is created for both users and business. The guidance of the outward path plays a big role here: the website ultimately hopes that users will take specific actions such as purchasing. The inward path ensures findability, which is how users find the products and services they want online. And from a business perspective, the outward path is what brings ROI to the website.

The following is an illustration of the core-path method, taking Amazon as an example (Figure 1). The core content is a product, which is represented here by the content in the red box, including the cover and key details of a book. Listed on the left are the various ways a user can find the book; these are the inward paths. List the behaviors that Amazon believes users can generate return on investment on core content as possible outward paths on the right.

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

Application process of core-path method

Imagine the following scenario: You are in a I was working for a small design company and received an order to revamp a bicycle website. The store now only has a rudimentary "brochure"-like website with an address and opening hours. They want to introduce e-commerce to be able to sell online. Products include high-end racing and mountain bikes, as well as some of their accessories. The store wants to sell about 1,000 products online, with its main target customers being professional cyclists and amateur enthusiasts. The bicycles sold are mainly from premium brands, so the design of the website should emphasize the high quality of the bicycle products. According to the core-path method, here are the complete steps on how to design this website.

Step 1: Define core content

What is the core product? Start by making a shortlist: bikes, accessories, services, etc. The list comes from brainstorming, and there is no concept of right or wrong. After compiling the complete list, identify a core piece of content and its supporting information. In larger teams this means reaching consensus with team members and stakeholders.

In the above scenario, the core product is a bicycle. Bike photos are a key element in showcasing your core content. In this case, the bike’s features, brand, and product range are information subordinate to the core content. Supporting information includes pricing and additional technical details.

After prioritizing and determining these details, hand-draw the core content (Figure 2). Don’t draw out the entire page including navigation and logo, just focus on the core content.

Customers may want to view product details in detail, so there are two things to consider at this stage. First: how they interact with product content. Second: Think about the usage scenarios once users find the core content.

Figure 2 hand-drawn core content and auxiliary information

Remember that users also access the website from smartphones and tablets. They may also post pictures to Facebook or Pinterest. This is an example of distributed core. So we hand-drawn how to put the core content into different scenarios (Figure 3). Likewise, don’t draw page decorations or navigation, just focus on the core content.

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

From here you can see how the core content and auxiliary information are displayed in different scenarios. You may have to go back and forth through iterations of versions to update them.

Step 2: List all possible inward paths

What are all the ways users can reach your site? The first ones that obviously come to mind are: site search, main navigation, links to Google and other sites. But through brainstorming, more paths can be found: links to shopping comparison websites, or even from offline media, such as printed product catalogs.

For each inward path in the list, write down the design requirements and meet those requirements. For example, SEO and landing page optimization are necessary for visitors from Google and other search engines (Figure 4).

Figure 4 List of inward paths and corresponding key requirements

Step 3: List all possible outward paths

From the core The content infers the path. Just like step two, the outward path must also meet the design requirements. Sort the outward paths according to the importance of the business to make the subsequent design clearer. Since outward paths will ultimately generate business value, their ranking should be based on business goals. In this example, a clear onboarding button takes customers into the checkout process. If the customer cannot make a decision right away, then the second priority is to provide the customer with a link to a wish list or a link to recommend the product to others.

Figure 5 Sequence of outward paths

Up to now, we neither need to look at the homepage nor think about navigation. However, we have already made important design decisions, such as what the mobile version of the core product will look like and how users will interact with the main content of the site. Once high-fidelity mockups are made, these initial interfaces can be user tested.

Step 4: Integrate all content together

When you have designed the core content and listed the inward and outward paths, then focus on the homepage and navigation. The goal of this stage is to allow users to find the core content in the simplest and most direct way.

Design the homepage, navigation page and search results page of the website. Draw several alternatives by hand. When designing, remember the elements of core content and path: What is the core content, how do users get to it, and how does the business convert?

Figure 6 hand-drawn homepage? First draft

In this scenario, in order to move customers from the homepage to the core content area, the three major product series of the bicycle store appear in Main navigation: professional racing, mountain bikes and accessories. Brand is also an important consideration for your target customers, so it is also included. An obvious link - the shopping cart and checkout process are also located in the navigation area.

Figure 7 Hand-drawn guide page with filtering and sorting options

The following is a template about all the key points we captured in the article and the steps described (Figure 8).

Figure 8 core-path method template

Summary

The following aspects are the improvements of this method to the design:

Identifying gaps

At the very beginning, gaps can be identified by questioning the purpose of the main content.

Prioritization of design elements

Decompose key elements to prioritize how they are presented throughout the design.

Focused 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 at the initial stage. But the impact is huge: now, the core content stands tall in your design. All other elements in web design serve one goal, the perfect integration of users and business.