bare essentials: wireframe design

The user journey can be very simple or highly complex and will be made into a working model through wireframes. A wireframe is a visualization tool or blueprint for presenting the layout and functionality of a web page, which includes the concept, content, navigation structure, technology and branding.

Whenever a web interface design is presented, people tend to give more attention to the visual elements rather than the proposed function, structure or content of the webpage. Hence, the wireframe attempts to separate the look-and-feel of the site, from the way it reads and works by presenting a simplified version of the page in the earlier stages of development. Wireframes aim to create a design prototype, in monotone instead of color, of a working site, which means it illustrates how the user will use the site, and also allows for initial testing of concept and usability of the design.

So, how much detail is required in a wireframe? There is generally no checklist, as long as it represents how the site will work, hence the amount of detail is solely in the hands of the information architect. However, some dependencies may suggest the level of detail required, these are: the time allotted, the complexity of the project and the requirements of the client.

Wireframes may be presented in three ways:

1. Abstract – a bulleted list of what is required on the site in terms of design elements and functionality without specific reference to layout or placement of these elements or working screens of the action constituted by a function.

2. Low fidelity – is a simple representation of the layout of website elements such as the header, footer, navigation structure, and content objects, drawn within boxes and labeled with only headings or short descriptors that give a brief idea of what content sits inside it.

3. High fidelity - shows a detailed layout of key page elements and function (includes header, footer, branding elements, modules, content objects) with proposed copy or suggested relevant body content; navigation schemes (includes all navigation links, linked elements, drop-down menus, side bar, tabs, bread-crumb trail, etc.); placeholders for images, text and other multimedia; labeling of modules that do a certain function and forms (includes instructional text, call-to-action buttons, text field boxes, etc); user interaction such as rollovers, search and browse functions, customized views, and personalized web pages and picklists; control mechanisms (includes display, scroll, jump, zoom, hover, monitoring history and bookmarks, cutting and pasting, drag and drop, back to top, previous and next, etc.)

A website will have hundreds of web pages, so then, which pages should we create wireframes for? Any and all pages that have a distinct layout and functionality, such as main category landing and listing pages, sub-section pages, and major informational and application pages on the site. The number of wireframes required are dependent on the overall scope of work and complexity of the site whereby templates need to be created for each screen the user will come across on their journey through the site.

bare essentials: navigation structure

Before we begin the information architecture and design of a website we are presented with a sitemap that proposes the type of content that the business owner will have on the site based on the organization’s products and services. The sitemap will be the basis of the website’s navigation structure. The sitemap needs to be recreated using terminology or labels that are user-friendly and easily understood by the target audience. It is vital not to treat the sitemap like an organizational chart, as it will result in a failed navigation structure.

Users often get frustrated if there are too many clicks to get to the information they are looking for, as they have no time or patience to be forced to browse through layers of information they do not necessarily want. Common usability issues amount from hierarchal organization of content within a site. We need to break down the sitemap and group content together that have a logical relation.



There are a few schemes for organizing the content on a site:

1. Alphabetical – in the form of yellow pages, index, or directory listings
2. Geographical – categorized by country, region, or language
3. By Topic – grouped by products, or services
4. By Task – to institute an action or function
5. By Audience – targeting individuals or groups

Once the sitemap is organized the next step is to determine the navigation structure that will be the user's guide to browsing through information on the site. The navigation structure may consist of the following group of links:

1. Global – This group of links remain as constants throughout the site. There are two kinds of global links, the first of which are primary links that factor in the main sections or categories within the site. The labels of these primary links should be short, but descriptive so that users easily understand what each link leads to. There should be no more than 10 links, which lead in to the most important sections of the site. Remaining links that are not as important but considered pieces of information that are ‘nice-to-know’, or corporate and user related content may be included as secondary links found on the topmost part of the page (but not as prominent as the primary links) or the footer.

2. Local – these links can only be found in inside pages, which links to sub-sections of a main category or links to pages that are related to the main category the page sits in.

3. Contextual – These are page level links that are placed within the content, such as hyperlinks and breadcrumbs. It also refers to links, tags or multimedia content directly related to the main content and not necessarily part of the category it sits in as these related items may also read from other categories within the site or from an external source.

4. Supplementary – These are miscellaneous links such as sitemap, legal disclaimer, privacy policy, terms & conditions; also web user tools such as search, site index, guides, print, bookmark, email, customize, etc. that usually constitute an action.

bare essentials: user journey

The concept of a user journey aims at addressing the primary needs of the target audience, that serves as the end point of the user journey through the website structure, and also the starting point of the thinking behind the journey itself.

A user journey is made up of three elements: persona, scenarios and business objectives.

Personas
Several personas can be created representing different types of users and the journey shall be defined for all audiences of the website.

There are four steps to creating a persona:

1. Define the target audience based on business objectives
2. Segment the audience into primary, secondary, and tertiary users
3. Describe the user wants, needs, interests, situation, and activities
4. Create a user profile with title, name, picture, and personal background

Example of a persona:



Scenarios
Once the personas have been created, each one is coupled with a scenario. A scenario is the situational understanding of the user’s needs, which aids the user journey in the process of answering these needs. The scenario shall reflect the thoughts, considerations and experiences each persona goes through while on the site to reach a goal at the end of the user journey.

Example of scenarios:

The persona, John Smith’s need is to build a home office:

1. He gathers information on the internet and searched through Google.com
2. He looks for tips on renovating an existing room and do-it-yourself instructions on building walls and dividers.
3. He browses through online catalogs for office furniture and accessories.
4. He receives E-newsletters from relevant websites he has subscribed to.

Business Objectives
The user’s journey is not restricted to focus on the product or service alone or strictly user-centric. There are drives and forces related to the product such as the design, the company, the culture, the message, and the purpose, which can and will influence the journey. Hence, the user journey needs to create a balance between user needs and business objectives, as it is the only way to ensure success for both parties.

It is important that the business objectives, which includes products, services, unique offerings, values, technology and functional specifications, ties in to users’ need for information about these products, services, unique offerings and values, and that the technology and functional specifications include necessary features that help users get to this information.

Example of a business objective:

1. Build a website that will be a platform for instructional, recommended, relative and educational information on building home offices or additional rooms in a house.
2. Gather registrations to the newsletter for direct marketing of services, products and brochure material.
3. Provide as much helpful tips and information that will ensure customer patronage as well as increased recommendations to the site by existing users to prospective users.

After the persona, scenarios and business objectives have been defined, the user journey can be laid out. Here is a simple user journey:



In summary, a successful website satisfies both business objectives and user needs. Each journey a user takes through the site should fulfill a need. Once the theory of the use, process and goal of the site has been set, the navigational structure can then be formulated.