12 types of Web Site Design

I
Know your audience (clear audience)

Problem:

How can I make my website content more compact? How can you enrich, more convincing, or more useful website information?

Scenario

A website is a communication tool, communicating with the wrong audience will not achieve the expected results-for example, persuading teenagers in their teens to be boring for old fathers in their fifties who have three children, and vice versa. Therefore, the website's graphics, writing language, vocabulary, and even navigation should be determined by the target audience.

Solution

In some scenarios, the audience is part of the website function. If you create a website about the latest theories of object-oriented development, the audience will be oo object-oriented development programmers, engineering managers, and theoretical workers. If the functions of the website are not obvious to the website audience, the company needs market research departments to identify target customers or specific groups they want to face.

Result

Once the audience is identified, the artist knows how to design and the programmer knows how to program and the website architecture can be properly designed.

Known applications

Most websites have topics covering the audience, such as IEEE websites, http://www.ieee.org, audience members are IEEE members and expected members.

Related modes: selfsortingaudience and multiplecrosssections

Two keep it fresh (keep updated)

Problem

Websites lose value over time. If the website content is still full in 2012 like "coming in fall, 1996! "Even if the actual content is still valid, the perceived value of website information will decrease.

Scenario

Websites serve marketing or education. users' perception of information determines whether a site is successful or fails. For marketing sites, it is critical to maintain the brand logo in users' minds to generate regular customers.

Solution

Maintain and update sites. Maintenance means to avoid link failure and maintain normal services. Updating the site means adding new content and correcting previous errors.

The new content should be highlighted. You can have a "Latest Update" page, or put the latest content in the page header and move the old content to the end of the page.

If the site content is not generated by users (such as wiki), the new content should be published as planned. Most sites may be updated on a daily or weekly basis. It is important to do so regularly so that the people who use it know that the site is still valid.

Result

Let users know that the site content is constantly updated and valuable. Marketing sites also have more clicks, which are a basic measurement indicator of site success or failure.

3. Self sorting audience)

Problem:

How can I instruct multiple audiences to find the information they provide when they use the site?

Scenario

Sometimes it is impossible to identify each individual audience of the site. In some cases, it is important to attract and communicate with multiple audiences.

Solution

Provides a top-level page for different partitions that contain links to multiple audiences of the site. Each partition corresponds to a type of audience.

Result

The audience of each type of site can select the part they are interested in.

The visiblecontext mode can also be used to reduce the number of audience types.

The homepage has a tendency to contain a large number of images. In this case, too much valuable substantive content cannot be provided to users. Assuming that the rest of the site is similar, users may be disappointed with the download time and a small amount of content.

Related Mode

Easyorientation multiple
Cross Sections

Known applications

The Microsoft homepage (http://www.microsoft.com) contains different partitions for links such as developers, managers, and investors.

The home page (http://www.javasoft.com) of javasoft also does the same thing.

Four easy orientation (easy positioning Mode)

Problem

It is easy to get lost in the chaotic links that make up a site.

Scenario

A site has a cross link between pages.

People do not use web as they watch TV or read a magazine. They use the Web to find the information they need and stop browsing.

Users of a web site cannot remember the map of the site during browsing.

Users may select an incorrect link when searching for the information they need. At this time, they cannot find the method for returning the page of the relevant link.

Solution

Each page contains a link that directs the user to the "Key Points" Page. On the key pages, they can reclarify the relationship between sites.

Result

If users are lost on a site, they can easily clarify their ideas.

If you need multiple pages as key pages, you can use the tree structure treestructure to organize them.

You can also include a visiblecontext to help users maintain their current tracking on the site.

Known applications

Each page of many sites contains a link to the home page or site map.

V.
Visible context (visual context)

Problem

How to help readers know where they are on the site?

Scenario

A Web site that contains multiple cross links.

Solution

Each page contains a map or navigation bar to link the page that is close to the current page. This may include the page that leads to the current page, the page related to the current page, and the page about the detailed topic of the current page. The visible context content should be clearly differentiated from the actual content of the page.

Result

Visible context provides a view of the entire site structure, but does not compromise the details of each page.

If your site has a tree structure treestructure, visible
Context may include the path from the root page to the current page and the brother page of the current page.

 

Known applications

Many sites include a navigation bar at the top and/or bottom of the page.

Bruce tognazzini published an article about designing visiblecontext (http://www.asktog.com/columns/014WebsiteNavBars.html ).

Adobe shows you how to use colors to create visiblecontext to ensure that the pages and navigation icons are consistent. For more information, see http://www.adobe.com/studio/tipstechniques/wpdphse7/main.html.

Six-Tree Structure Mode

Problem

It is easy to lose in the chaotic links that constitute a site

Scenario

A site has a cross-link between pages, and there is an obvious hierarchical organization between topics.

Solution

Tree structure focusing on site content: each page contains visiblecontext to display the position of the page in the tree. Visiblecontext may include the path from the root page to the current page and the brother page of the current page (at the same level of the tree. It is also possible to include subpages of the current page.

Result

The tree structure is obvious to users.

Visiblecontext shows the path to the current page as a "Key Point" link. When the tree is lost at a lower level, it is used as a scheme using the easyorientation mode to clarify the position.

Known applications

Many sites have a structure that matches the hierarchical structure of an organization.

VII.
Multiple Cross Sections multiple cross partitions

Problem

How do you organize site content for different types of users?

Scenario

Most sites provide multiple features that people of different backgrounds and needs use. A structure is suitable for one type of users, but not necessarily for other users.

Solution

Organize site content for different users in different ways. Each structure contains a cross-partition that presents Site Information observed from a specific perspective.

Independent pages can be shared between cross partitions.

Result

Users can select an organization they are familiar.

This structure uses visiblecontext to provide a more complex structure, because they may arrive at a page through different cross sections of the site.

Known applications

Byrd watcher sites (http://ebni.com/byrds/index.html) Use multiplecrosssections to organize the same data: the band's history is depicted by a cross clue from different perspectives of each member, such as through dates, albums, band breaking up and so on.

The Java tutoring website (http://www.javasoft.com/docs/books/tutorial/index.html) contains multiple cross-disciplinary guidance that each student can follow to learn different aspects of the Java language and API.

8
Consistent look (consistent appearance)

This idea is to maintain a consistent view of a website (loo k or feel) to reduce the learning curve.

9
Use the clients cache (use Client Cache)

Problem

How can I reduce the download time?

Scenario

Websites that contain a large number of web pages used as navigation buttons, icons, tags, and other images.

When a large number of images are used, the download time increases. If the download time is too long, users usually exit to download and browse other content.

 

1. Many users access the website with low bandwidth

2. users do not want to wait for the webpage to download unless they are sure that the website contains the content they want, otherwise they choose to cancel browsing other content.

3. If you want to make your website attractive or must comply with the public guidelines of the community.

4. images are more time-consuming than texts.

5. Download images from the cache faster than those from the Internet.

Solution

The website looks the same from start to end. The buttons or logos on each page use the same picture.

The navigation and content are organized by the DIV element. Make sure that the content first appears in the HTML code, and the second navigation and advertisement appear at the end of the web page. This method enables you to check the content when loading the navigation element. Ad display has two effects at the end: 1. Users seldom read the web pages from start to end, so they do not have to wait for them. 2. If the user stays on this page, the advertisement will not attract their attention.

Result

The image will be downloaded by the browser client cach when it appears for the first time, so that the browser does not have to download it again when it appears on other pages.

If the image changes, the changes cannot be immediately reflected by the browser that has cach the image.

Known applications

Many websites use public navigation buttons, such as treestructure or return to the previous page.

10
Get as read post as write (get read Post write)

Problem

CGI is used to display a table. The table may contain some filled items. When you submit a table, you may need to enter and submit the table again if the table item is incorrect or if there are any unfilled items.

Solution

It never embeds a table into a non-formatted HTML page, especially if the site can automatically fill in some table Content Based on the status and history. Instead, CGI (Servlets, ASP, etc.) is used to respond to the GET command to return the table to the user, and the POST command is used to process the table input.

Result

Only place the necessary code to generate the table in one place, so that they can be re-displayed when a table error occurs. Because the table display code is still valid during table processing, you can call them to re-display the table to handle table errors and prompt users for problems. There is no need for too many "Please return and try again ".

11th
Bread crumbs facial dandruff

The intention of this mode is to display the user's current location on the web site. It usually appears in the site's header and looks like this: Root
> Foo> bar> page

Except for the last hyperlink, the position of each element can be moved up in the site.

Note that the facial scraps on the page are static. They show users the location of the page on the site, not where the user is already.

12th
Accessible Web page design

The intention of this mode is to write a webpage so that the webpage can be explained in as many browsers as possible.

This technology includes:

Avoid relying on the size of the browser window, the browser's ability to display graphics and other non-text data, and whether the browser supports scripts.

Use standard HTML.

Avoid using HTML syntax that causes ambiguity.

Avoid or provide options that are not included in earlier versions of HTML.

Use an HTML checker such as a http://validator.w3.org
To verify the syntax.

Suppress attempts to control the user experience.