The Archives

Planning your social network is critical to its success. Time invested in the planning phase will save you time later on. Effective planning can allow you to identify vulnerabilities and opportunities in the business model.

Research The Market

It is critical that you develop an understanding of any similar social networks. Perhaps they exist in a different vertical but provide a similar service. Through developing a keen understanding of the market, you will be able to identify features you could adopt. Innovation is vital to success, but it’s not always necessary to reinvent the wheel.

Information Architecture & Prototyping

Decide on the right architecture for your social network. When designing the information architecture (IA) of a social network, there are certain unique aspects to consider. Read this article on social network information architecture to find out more.  Read this article to find out more about prototyping your social network.

Set Business Goals

Establish goals for your social network. Do you want to acquire a certain number of users in year one? How long do you have to reach profitability? What is your anticipated revenue per user? Find out more about deciding on business goals for your social network in this article. Once you have decided upon goals, you will know your metrics for success.

Most businesses set targets and goals, and all businesses should. Without them, it’s difficult to evaluate your success and identify areas for improvement. Social networks face unique challenges in setting business goals, which are addressed within this article.

It is almost always dangerous to consider one business goal in a silo. Increasing revenue might look promising, but what if you have had to treble your sales staff to achieve this result? And, what if that additional cost now means that your business is running at a loss? Focusing on a variety of metrics, and understanding their interrelationship, is vital.

Cost Per Acquisition (CPA)

This is the cost of acquiring a new user for your service. If you spend $100,000 on public relations and you achieve 100,000 new users as a result, your cost per acquisition is $1. If you achieve an average return of $2 per user, this means you have identified an appropriate cost per acquisition channel. In identifying return on investment from a particular channel, remember to look beyond merely cost per user acquisition. Always be careful to ensure “user decay rate”, “revenue per user” and ultimately “return per user” allow you to correctly calculate return on investment.

Users

This is the number of accounts that you have on your social network. This number does not take account of the activity from each user and how much money you can expect to make from each user. You do not know whether the users are active on your website. You should keep in mind that a percentage of this number may be spammers.

Active Users

Different social networks define active user differently. And, the best approach can vary from site to site. For example, a user who generates N page views per month or N unique visits. On a music website, possibly you could make this assessment based on the number of songs uploaded or listened to. Find a model that works for you.

User Decay Rate

The user decay rate takes account of how many users continue to use your service month-after-month. If two percent of users cancel their account at the end of each month, you have a 2% monthly decay rate. Some websites choose to calculate this number based on the number of users who remain “active users” rather than merely users who have an account that they have not cancelled.

Revenue Per User

Take your total revenue number and divide it by the number of users. This is an interesting figure to watch to understand the interrelationship between users and revenue.

Paying Members

Users who pay for access to your service are deemed to be paying members.

Percentage of Paying Members

This is calculated through the following calculation: paying members / users * 100 = Percentage of paying members. Where you charge for membership, this number can be critical to costing business decisions and understanding the DNA of your user base.

User Interaction Metrics

User interaction metrics can vary from site to site, but can be critical in evaluating trends within your website and establishing targets. Twitter, for example, may be interested to know how many “tweets” the average user sends out each month. Facebook might want to know the average number of pictures a user uploads each month. Decide which user interaction metrics add meaning to evaluating your site.

Page Views

The total number of pages viewed on your website over a given time span.

Page Views Per Visit

This is the average number of page views that are generated from each visit to your website.

Revenue Per Thousand Impressions (RPM)

Revenue per thousand impressions is a means of calculating how much money you make for every one thousand impressions on your website. This is an interesting way of tracking revenue relative to website traffic. If your page views increase, but your RPM declines, possibly you need to address monetization issues.

Unique Visitors

The number of visitors that come to your website over a given time span.

Growth

Growth can be applied to a number of statistics. Such as, for example, growth in user numbers, growth in page views or growth in revenue. Where the growth rate is a negative number, the information can be useful to spot the rate of decline. To calculate the growth rate percentage of any statistic, perform the following calculation: (Current Number – Past Number) / (Past Number * 100).

Revenue

Revenue is the total value of sales within a certain period of time.

Profitability

Unlike revenue, profitability takes account of the costs incurred in generating sales.

Before creating a design or programming functionality, a new website needs a clear plan. Not taking the time to plan is one of the biggest mistakes you can make when developing a new website. Skipping past planning a website and jumping straight to website development can result in a website that doesn’t meet your needs, isn’t user friendly, or that busts your budget because of the need for a total redesign.

Don’t risk your success by ignoring the importance of website planning. The saying, “failing to plan is planning to fail” holds true when it comes to planning a website.

Effective website planning involves three different phases that help:

• Clarify ideas
• Define measurable goals
• Satisfy user needs
• Get accurate quotes & timelines
• Communicate visual concepts to investors and developers
• Test your concept before it’s developed and deployed

1. Defining the Plan

Clarifying ideas and refining them into a plan is a discovery process aimed at defining website objectives, content requirements, and user groups.

• Website Objectives – Measurable goals that answer the question, “What will the website accomplish?”
• Content Requirements – Detailed statements that answer the question, “What will the website do?”
• User Groups – Detailed descriptions that answer the question, “Who will use the website?”

2. Drafting the Architecture

Web architecture categorizes, organizes, and prioritizes the navigation of your website by blueprinting the structure through site mapping, task flows, and wireframes.

• Site Map – Shows the overall organization of your website.
• Task Flow - Shows how users will easily navigate through the pages of your website.
• Wireframe – A digital skeleton of your website that blueprints where everything will appear to users.

3. Designing the Prototype

A website prototype is a functional model of your website created for testing purposes. Web prototyping shows you how your website will function so you can easily make changes before development.

Ecommerce Site Map

If you’re at the stage of drafting web site architecture for an ecommerce web site, you should already have a clear understanding of the objectives (what you want to accomplish), web site requirements (what you want the web site to do), and user groups (who will use the web site).

The objective in drafting ecommerce web site architecture is to align these three components into two deliverables: a site map and wireframe. Let’s begin by drafting a general ecommerce site map. The site map will help organize the required pages and help prioritize order.

Keep in mind there are six user groups who will use the ecommerce web site: potential customers (hunters & browsers), returning customers, publishers, potential employees, and employees. Potential customers who are hunting for a product know exactly what they want. They want it fast and easy. Browsers are window shopping. Although they have an idea of what they want, the web site will have to persuade them to buy.

After the site map is complete, use a wireframe to help organize how the information will be presented. At least create a wireframe for the homepage, product category page with products, product category page with sub categories, the product detail page, a page with only content, and the checkout process page. You many even want to wireframe every page in the site map.
To help wireframe an ecommerce site, use the site map and the wireframe guide below to begin drafting a layout.

It’s important to understand that most users have a computer display with 1024×768 pixels or more. According to W3Schools browser statistics, 36% of users have 1024×768 displays and 57% have an even higher screen resolution. To make sure your web site looks good (no left, right scroll), this wireframe is 960 pixels wide.

Ecommerce Website Wireframe

Header

The header area should be mostly the same throughout the entire web site. Include a logo for branding and make sure the logo is linked to the homepage. Also include a positioning statement (unique value position) to let users know what you do and why you are different. This will quickly engage their attention and validate their needs. Include a call to action like a phone number or email address so users don’t have to think when they want to contact you. Another suggestion is to add a few quick links in the site architecture for frequently accessed links, such as login, my account, store locater, etc.

Primary Links

Primary links are your global navigation that will remain the same throughout the entire web site. Utilize your primary links for your main product categories. Make sure these are text based links instead of Flash or graphics. It’s important to use text-based links so the search engines can easily read them and crawl through them to your internal web site pages. If you decide you want a drop down menu for your top navigation, avoid using JavaScript. Instead, use lists and style them with CSS. Make these notes on your wireframe so the developer has a clear idea of what you want.

Breadcrumb Trail

Breadcrumb trail navigation is a link based navigation that shows the path you traveled to arrive at a particular page. For example, you might start on the homepage, click to a product category page, click to a product sub category page, and then click to the product details. As you navigate to the final page, a link trail appears (typically above the main content) that shows the pages previously visited. Each of these links should be clickable so a user can quickly go back.

Content Area

The content area is where the site’s main text, images, sub categories, products, shopping cart, and more will show. It’s important that users can quickly scan your content and the search engines can identify the important statements. To accomplish this, title each page inside the <h1> </h1> HTML tags, use a sub title in the <h2> </h2> HTML tags, and subheadings in the <h3> </h3>, <h4> </h4>, and <h5> </h5> HTML tags. The search engines will factor the content inside these HTML tags into their algorithm when positioning your site in the search engine results. Let your designer know to how you want these tags formatted in your site architecture so their color and size help the reader scan through the web site text.

Sidebar

Use the sidebar area for the shopping cart, recently viewed products, best selling products, and articles related to the product category. It could also be used for promotions using standard banner sizes, such as the 250×250, multiple 125×125 square buttons, and the popular 160×600 wide skyscraper. Near the top of this area is a great place to add a newsletter sign up form and it doesn’t have to take up a lot of vertical space. Other options include calls to actions, recent news, upcoming events, popular blog posts, and credibility factors, such as SSL security certificate, hacker safe, and testimonials to reduce the user’s anxiety.

Footer

The footer area should remain the same throughout the entire web site architecture. You can use the footer for copyright statements, site map links, and legal information (privacy policy, terms and conditions, returns and exchanges, and shipping policy). You can also use this for credibility by placing SSL security certificate, hacker safe, and Better Business Bureau images.
In closing, this article’s goal was to give you an example of an ecommerce site map that you could customize to fit your own needs. With this site map and the wireframe guide, you can draft wireframes of important site pages that will be user friendly, search engine friendly, and aligned with business objectives.

Social Community Site Map

If you’re at the stage of drafting website application architecture for a social networking website, you should already have a clear understanding of the website objectives (what you want to accomplish), website requirements (what you want the website to do), and user groups (who will use the website).

The objective in drafting social network web application architecture is to align these three components into two deliverables: a site map and wireframe. Let’s begin by drafting a general social networking site map. The site map will help organize the required pages and prioritize order.

Keep in mind there are nine user groups who will use a social networking website: potential members, members, potential employees, employees, potential partners, partners, potential investors, investors, and publishers.

After the site map is complete, use a wireframe to help organize the website application architecture, including how you will present the information. At least create a wireframe for the homepage, registration, dashboard, my profile, and one page that just has text (i.e. our story page, FAQs, etc.).

To help wireframe a social networking site, use the site map and the wireframe guide below to begin drafting a layout.

It’s important to understand that most users have a computer display with 1024×768 pixels or more. According to W3Schools browser statistics, 36% of users have 1024×768 displays and 57% have an even higher screen resolution. To make sure your website looks good (no left, right scroll), this wireframe is 960 pixels wide.

Social Community Wireframe

Header

The header area should be mostly the same throughout the entire website. Include a logo for branding and make sure to link the logo to the homepage. Also, include a positioning statement (unique value position) to let users know what you’re about and why you are different. This will quickly engage their attention and validate their needs. Include a call to action, such as a site tour, so users don’t have to think when they want to learn more. Another suggestion is to add a few quick links to frequently accessed pages like registers, login, my account, etc.

Primary Links

Primary links are your global navigation that will remain the same throughout the entire website. This may change slightly if users are logged in or not logged in. Users will use this navigation to link to the most important areas of your website. Make sure these are text-based links instead of Flash or graphics. It’s important to use text-based links so the search engines can easily read them and crawl through them to your internal website pages. If you decide you want a drop down menu for your top navigation during your web application architecture, avoid using JavaScript. Instead, use lists and style them with CSS. Make these notes on your website application architecture and wireframe so the developer has a clear idea of what you want.

Bread Crumb Trail

Bread crumb trail navigation is a link based navigation that shows the path you traveled to arrive at a particular page. For example, you might start on the homepage, click to community, click to see all members, and then click to see a member’s profile page. As you navigate to the final page, a link trail appears (typically above the main content) that shows the pages previously visited. Each of these links should be clickable so a user can quickly go back.

Content Area

The content area is where your main text, images, and videos will show on the web page. It’s important that users can quickly scan your content and the search engines can identify the important statements. To accomplish this, title each page inside the <h1> </h1> HTML tags, use a sub title in the <h2> </h2> HTML tags, and subheadings in the <h3> </h3>, <h4> </h4>, and <h5> </h5> HTML tags. The search engines will factor the content inside these HTML tags into their algorithm when positioning your site in the search engine results. Let your designer know to use these tags so their color and size help the reader scan through the website text.

Sidebar

The sidebar area can be used for subpage navigation within internal pages. It could also be used for advertising using standard banner sizes, such as the 250×250, multiple 125×125 square buttons, and the popular 160×600 wide skyscraper. Near the top of this area is a great place to add a newsletter sign up form and it doesn’t have to take up a lot of vertical space. Other options to consider during web application architecture include featured members, popular blogs, popular videos, and upcoming events.

Footer

The footer area should remain the same throughout the entire website application architecture. You can use the footer for copyright statements, site map links, and legal info (privacy policy, terms of use). You can also use it for adding links to other social networks or sites you are exchanging links with. It can also be a nice area to organize company information, advertising information, and help resources.

In closing, this article’s goal was to give you an example of a social network site map that you could customize to fit your own needs. With this site map and the wireframe guide, you can draft a wireframe that will be user friendly, search engine friendly, and aligned with business objectives.

Website navigation is a user’s interactive road map to your web site. Website navigational elements help users find information so they know where they are and how they can complete tasks. There are three main categories of navigation (hierarchical, global, and local) and over 20 different types and techniques to use. In this article, we will be discussing some of the most common types of navigation to consider during the web services architecture process of web site planning.

Embedded Links

Embedded links primarily show up within the main content of a page. On the web, pages are created around one topic that might relate to many other topics. When referencing other topics within a web site during web services architecture, it’s important to link to those other topics in case users are interested in learning more about them. For example, your services page might give a general overview of your services and then provide a list of links that have the name of your other services.

Breadcrumb Trail

Breadcrumb trail navigation is a link based navigation that shows the path you traveled to arrive at a particular page. For example, you might start on the homepage, click to a product category page, click to a product subcategory page, and then click to see a specific product. As you navigate to the final product page, a link trail appears (typically above the main content) that shows the pages previously visited. It might appear something like this: Home > Category Name > Subcategory Name > Product Name. Each of these would be clickable so a user could quickly go back.

Primary Navigation

Primary navigation is the global linking system that generally appears at the top or left side of the web page. There are many different styles of primary navigation such as drop-down menus, tree menus, horizontal menus, and vertical menus. Consider which of these will best suit the overall look you want to achieve during web site planning, keeping users in mind.

Tab Navigation

Tab Navigation is a menu system that helps categorize content specific to one page. Tab navigations are often used to organize a few types of content that are related to the main theme of that specific page. Tabs help simplify the reading and length of information presented on the page so users don’t have to scroll as much.

Site Map

Site Map is one page that shows all of the information available to the user on the web site and how it’s categorized. Often times, this page will look a lot like a family tree where users can see the parent/child relationships. An example of a parent would be a main category and the children would be the subcategory pages listed underneath. Site maps are very useful for search engines as they are able to find the links to all of your internal web site pages from one page.

Taking the time to create interactive road maps during web site planning using embedded links, breadcrumb trail navigation, primary navigation, tab navigation, and a site map will ensure a successful user friendly web site that visitors will enjoy.

Corporate Site Map

If you’re at the stage of drafting web architecture for a corporate website, you should already have a clear understanding of the website objectives (what you want to accomplish), website requirements (what you want the website to do), and user groups (who will use the website).

The objective in drafting corporate web architecture is to align these three components into two deliverables: a site map and wireframe. Let’s begin by drafting a general corporate site map. The site map will organize the required pages and help prioritize order.

Keep in mind there are nine user groups who will use the corporate website: potential customers, customers, potential employees, employees, potential partners, partners, potential investors, investors, and publishers.

After the site map is complete, use a wireframe to help organize the web architecture. At least create a wireframe for the homepage and one internal website page. You many even want to wireframe all top-level pages (home, our services, our company, support, news & events, blog, and login) or every page in the site map.

To help wireframe a corporate site, use the site map and the wireframe guide below to begin drafting a layout.

It’s important to understand that most users have a computer display with 1024×768 pixels or more. According to W3Schools browser statistics, 36% of users have 1024×768 displays and 57% have an even higher screen resolution. To make sure your website looks good (no left, right scroll), this web architecture wireframe is 960 pixels wide. View Browser grid statistics from WPDFD

Corporate Wireframe

Header

The header area should be mostly the same throughout the entire website. Include a logo for branding and make sure you link the logo to the homepage. Also, include a positioning statement (unique value position) to let users know what you do and why you are different. This will quickly engage their attention and validate their needs. Include a call to action like a phone number or email address so users don’t have to think when they want to contact you. Another suggestion is to add a few quick links for frequently accessed pages, such as login, contact, office locater, etc.

Primary Links

Primary links are your global navigation that will remain the same throughout the entire website. They link users to the most important areas of your website. Make sure these are text-based links instead of Flash or graphics. It’s important to use text-based links so the search engines can easily read them and crawl through them to your internal website pages. If you decide you want a drop down menu for your top navigation, avoid using JavaScript. Instead, use lists and style them with CSS. Make these notes on your wireframe so the web architect has a clear idea of what you want.

Bread Crumb Trail

Bread crumb trail navigation is a link based navigation that shows the path you traveled to arrive at a particular page. For example, you might start on the homepage, click to a service page, click to a solution page, and then click to see client projects. As you navigate to the final page, a link trail appears (typically above the main content) that shows the pages previously visited. Each of these links should be clickable so a user can quickly go back.

Content Area

The content area is where your main text, images, and videos will show on the web page. It’s important that users can quickly scan your content and search engines can identify the important statements. To accomplish this, title each page inside the <h1> </h1> HTML tags, use a sub title in the <h2> </h2> HTML tags, and include subheadings in the <h3> </h3>, <h4> </h4>, and <h5> </h5> HTML tags. Search engines will factor the content inside these HTML tags into their algorithm when positioning your site in the search engine results. Let your web architect know to how you want these tags formatted so their color and size help the reader scan through the website text.

Sidebar

Use the sidebar area for subpage navigation within internal pages. It could also be used for advertising using standard banner sizes such as the 250×250, multiple 125×125 square buttons, or the popular 160×600 wide skyscraper. Near the top of this area is a great place to add a newsletter sign up form and it doesn’t have to take up a lot of vertical space. Other options include calls to actions, recent news, upcoming events, popular blog posts, and credibility factors such as testimonials to reduce a user’s anxiety.

Footer

The footer area should remain the same throughout the entire website. You can use the footer for copyright statements, site map links, and legal information (privacy policy, terms of use, etc.). In addition, consider using this area for credibility by placing images of partners, certifications, awards, and affiliations.

In closing, this article’s goal was to give you an example of a corporate site map that you could customize to fit your own needs. With this site map and the wireframe guide, you can draft a web architecture that will be user friendly, search engine friendly, and aligned with business objectives.