effective registration: part 3

Usability tips for effective registration forms

Always differentiate mandatory fields from optional fields with an asterisk (*) as users may assume they have to enter all fields or fill in only the fields they feel like only to get an error message to fill the required fields, which can be frustrating both ways.

Make the user's email address the user name for logging in to the site as it is easier to remember. You must send login details to their personal email address as soon as the registration is submitted.

If a password needs to be validated by the use of characters or length mention it clearly. Ask the user to repeat their password to ensure they have remembered, ask for a security check for forgotten passwords.

When uploading external files such as images, videos or documents, state the format required and size limit.

For information fields that are not necessarily as straightforward as the user's name, date of birth, country, etc. but mandatory nonetheless, or considered miscellaneous optional items, state briefly what it is for.

Do not pre-select opt-ins for email updates and promotions as it can be easily overlooked by the user and would be an annoyance if they receive emails from the site which they would consider spam.

Finally, always say ‘thank you for your registration’…

effective registration: part 2

How long or short should a registration form be?

The business objective is to generate user registrations, not to throw them off. However, if a form is confusing, complex or too long, the lower the chances are of completion. Do not ask for too much information on the initial landing screen as it will de-motivate users to fill the form. Making the form fast and simple ensures a higher conversion rate.

Unnecessary fields that are not directly related to the product or service the site or business is trying to offer should not be included. For instance, you need not require the P.O. Box or physical address from a user for merely participating in a social networking site, or ask for credit card details if a user only wishes to open a gift registry on an e-commerce site.

On another note, if additional information will eventually be required at a later stage, as part of the user profile on a social networking site, or at the check-out process on an e-commerce site, you may divide the form into steps or stages.

This means, you keep the most important information on the first screen so as not to overwhelm the user with too many fields, and then guide them through the next steps with a 'skip' button for optional pages. Then, allow users to enter additional information later after their account has been created.

Section headings, consistency and white space

When a form runs continuously, users may consider it a tedious task rather than a process that will benefit them in the end. Adding section headings for fields with a logical grouping creates a visual break in the form preventing information overload.

It is also important to distinguish section headings from field labels, from the page title and from instructional text by use of different text styles or font sizes.

All fields should follow a strict alignment in the entire form, if field labels are right aligned with the input field to the left, it should follow the same trend throughout so that it follows a consistent flow. Also, all input fields, where applicable, should relatively have a uniformed width creating a visual symmetry reducing clutter.

The provision of white space ensures that the layout clean and comprehensible, making it more efficient and user-friendly as it becomes easier to read with less eye strain.

Drop-downs, radio buttons and checkboxes

Drop-downs are not usually recommended for a very long list of choices that can reach hundreds in value as the user would need to scroll several times to view them all. An alternative would be to have a text field which auto-suggests a selection when a user types, or to keep the list in alphabetical order for easier browsing, or replace the drop-down completely with an open text field if the information required is straightforward like a date or year, but be careful to validate the form so the user enters in the correct format.

Radio buttons are essential for 'yes or no', or 'this or that' options, which can replace a drop-down if the selections are limited to a maximum of 3. This aids usability as it saves the user an extra click through a drop-down as the radio button options are available upfront.

Checkboxes are often used to present multiple-selection choices, whereby the user can check '1, 2, and 5', and may replace a radio button at the end of the page where you find 'I agree to the terms & conditions' or 'I would like to receive email updates' so that users need only to read the instruction once without 'yes or no' variations especially when the text is a full sentence.

Finally, it is best not to pre-select a choice in the drop-downs, radio buttons and checkboxes as it would annoy the user to have to un-select or choose another, amounting to more clicks if the pre-selected choice does not apply to them. It is only acceptable in case of language or country, whereby the site can pre-define the selection by detecting the user's computer IP address.

effective registration: part 1

Brief but concise form introduction

When a user decides to fill out a registration form it is important that an introduction to the form should appear directly below the page title that will give an explanation and global instructions to the user in a conversational or friendly manner. The introduction should be brief and unify the purpose of the form without losing the interest of the users with lengthy statements.

If there is other instructional text related to individual form fields, it should appear beside the respective fields and not the introduction.

Keep most important fields above the fold

Users click on the 'register' button with a goal in mind, which is to 'register', so a long explanation above the form serves as an obstacle to reach that goal. The user will either skip the text and possibly miss out on important instructions, or just leave.

Visibility is key. The introduction and most of the important form fields should appear above the fold in the web browser so users immediately find where they can register. Other necessary information such as disclaimers, terms & conditions, and post-registration confirmation or instruction should be placed at the end of the form.

User benefits, incentives and nice-to-know information

A list of benefits and incentives that may be granted to users once they have created an account is a good way of encouraging users to register. This can be communicated not only by a text summary but also coupled with a graphic or image or a testimonial from a satisfied user, which is visually appealing so as to instill more interest.

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.

milestone 3: create the solution

The thinking behind the IA of a website begins with the user (including the dependencies attached to it) and ends with the web user interface that is presented in a visual design. Our initial exercise in the first two milestones will give us the answers to set the foundation of the architecture and fortify the building blocks to reach the end-solution.


User Needs
Knowing the users of the site and understanding the way they think is the key factor in building a successful website. User-centric designs put users’ needs at the forefront and forms it as the basis of the site objectives and scope of work. This is identified through the business owners’ experience with their users and research on users’ demographics, culture, psychology, etc.

Site Objectives
This is the business strategy, which aims to match what the business owner wants to achieve through the site with what the users want to get out of the site, in order to produce an information system that is usable and useful. It incorporates business needs, technology, resources, politics, culture, and creative to derive goals for the site.

Content Requirements
The design of the website will be built around the type of content that the business owner wants to make users aware of, and reflects what the users want to know about and share. Users will only come to the site if it has the right content that is of interest to them, hence a content inventory is important to quantify the information and suggest the quality of information that will meet the users’ needs.

Functional Specifications
This takes from the scope of work of any project as it describes in detail what features and modules will be included in the site that will allow users to perform a function to meet their needs as well as make it easy for the business owner to reach out to and generate a user database.

Information Architecture
This design discipline combines the organization of brand elements, arrangement of content, navigation systems and related contextual information, and placement of additional functionality to aid users in gathering more information. It forms a skeletal blueprint of a web page, which lays out information based on its priority and allows easy access to the content available.

Interaction Design
This thinks less of visual appeal but more of the logic behind facilitating user interaction with the site and intuitive flow to complete a task. It provides a step-by-step walkthrough defining how the user will interact with an application that will be developed on a site.

Information Design
It involves labeling of widgets, modules and navigation with consistent vocabulary, assuring that content is presented in a clear and concise way that is easy to understand, optimizing the arrangement of information on a web page for effective dissemination of knowledge.

Navigation Design
Setting the navigation plays a substantial role in a website design, as common usability issues amount from a confusing, vaguely labeled and inconsistent navigation system. Hence the navigation design should intelligently group related content and keep lead-ins to high priority content upfront. This discipline combines interface elements and information architecture to create a logical framework to facilitate quick, easy and effective movement through the site.

Interface Design
This takes into account the discipline called Human Computer Interaction, which is focused on designing screens and menus that are easy to use, find and carries out a certain function, such as buttons, tabs, images and content blocks.

Visual Design
It is made up of the elements on a web page that the end-user sees and interacts with, whereby text, images and graphics are visually treated with a look-and-feel that is in harmony with the brand and adherent to the functionality of the site.

Once the building blocks have been laid down, the web user interface is ready for implementation and hands-on application of the end-users.

milestone 2: form the hypothesis

Following the flood of questions, we need to look at the problem from all angles to best decide an intuitive approach to the solution—so now we get the answers. Where do we find these answers?

• Creative brief
• Client briefing
• Content aggregation
• Proposed sitemap
• Competitor sites
• Benchmark sites
• Current site
• Brand assets
• Internal discussions
• Brainstorming sessions
• Research and discovery
• The list goes on, keep searching until you are satisfied…there’s always ‘Google’

After careful assessment of your results, you can now form a hypothesis generated from the context, which are the site objectives; the message, which is the information to be disseminated through the functionality of the site; and the audience, which accounts for the target user group of the site. The context and the message revolve around the audience like an electron cloud orbiting the nucleus of an atom.



As the audience is at the central core we need to determine the different types of users through personas to form a concrete hypothesis. A persona is a user profile that helps you make design and functionality decisions in order to make the site usable. Why is a persona important? It helps you get to know your end-users because understanding their needs is a vital step in creating an end-solution that suits their needs in a way that will make sense to them.


Continued Milestone 3 - Create a solution

milestone 1: define the problem

The IA process covers three milestones illustrated in this simple diagram:



Define the problem

When presented with a project, whether it is a redesign or starting from a blank slate, there is always a problem that triggered the need for the website. These are the most common problems a client brings to the table:

• Bringing about brand awareness to a larger global scale, but not excluding local or regional reach, which may already be taken care of by print and broadcast media
• Instigating user communities and user interaction, to assure brand loyalty and user retention
• Marketing the brand, products, and services to the target audience with the desire result of increasing sales, leads and customer patronage
• Maintaining a platform that is easily updatable in terms of information and multi-media to ensure dynamic content

After we have received the brief from the client, we need to dissect the problem in more detail with relation to the context, message and audience. At this stage we study the brief and ask questions.

Context

• Who is the client?
• What are the business needs and site objectives?
• What services do they offer?
• What are the organization’s desired results and goals?
• Do they have the resources to maintain the website?
• In what social or cultural environment will the website live?
• How will users access or reach this information?
• What are the connectivity and technical restrictions?

Message

• What is the nature of the content?
• What is the source of knowledge? Where will the information come from?
• How is the information organized and structured?
• What is the scope or purpose? Is it for general public consumption or a specific user group?
• What is the complexity of the message? Is it a simple cooking recipe or a case study on Internet Strategy?
• In what format, type of media or channel will the information be delivered?

Audience

• Who are your target users?
• Where are they? Where do they come from?
• What are their information needs?
• What will they do with the information?
• Why would they come to the website?
• What is their knowledge background? What is their experience base?
• How many times would they come to the website?
• What are their personalities and attitudes?
• Are they familiar with the information?

Continued: Milestone 2 - Form the hypothesis

disciplines & dependencies

IA should tie in three disciplines: Architecture, Design, and Technology, to meet three objectives: to Inform, to Persuade, and to Entertain. The end-result is a website design, which is not only visually appealing but also functional and usable, hence ensuring User Retention.



The three objectives may be broken down to the following criteria:

Inform - Education, Instruction, Service
Persuade - Promotion, Advertising, Selling
Entertain - Amusement, Interest, Diversion

Like the building of a concrete structure there are raw materials required to bring the architecture to life. In IA, there are also key underlying factors that will directly influence the design and use of the site: these are the context, the message, and the audience.



We need to identify these three dependencies in every project and factor them into the architecture of the website.

benchmark and take a seat

Prior to the IA ritual it is vital to set a few benchmarks that will be your guide throughout the process of laying out the user interaction design, which will then serve as a blueprint for the visual interactive designer to paint it perfect. This will ensure that the website will not only work, but will work effectively (akin to the concept of 'beauty and brains'). Once you have identified your benchmarks it's time to sit down, think and create. And you will be sitting for quite some time until you have filled up your empty canvas and are ready to send it to the dogs (a.k.a clients) for confirmation.

Consider the following benchmarks:

Findability

• Lessen time spent looking for information directly relevant to the user
• Decrease the number of clicks to get to the desired information
• Provide alternate routes to related information such as contextual links, call-outs or lead-ins within content pages that will give users more than one way of finding out more information.

Usability

• Introduce interactive elements that will keep users engaged by providing options to spark their interest
• Allow users to customize their space, giving them the ability to choose only the information they want, and generate or upload their own content
• Use web 2.0 (includes AJAX, CSS, RSS, XML, XHTML, wiki or forum software) technology to ensure user-friendly sites that are easy to use, easy to manage and easy to load on all browsers.
  

Maintenance

• Ensure dynamic content that is regularly updated by a content management system to ensure user retention
• Maintain ‘sticky sites’ through polls, forums, blogs, competitions, user subscriptions, tagging, tactical banners, interactive maps, games, galleries or virtual tours, premium content, etc.
• Create a website built on technology that is accessible to the target audience but preferably to all types of users, hence connection speeds, common browsers and screen resolutions should be considered.

Education

• Reference related information consistently within the site ensuring a continuous journey of educational discovery.
• Consider social networking and user-generated content as a rich knowledge base with the highest level of user interaction and a source of multimedia content.
• Use language that is understandable at plain sight and render instructional content that will support the ease of use of the site.

Brand Value

• Account for brand positioning and identity within the site, which remains prominent on all sub-level pages, to instill the brand in the user.
• Use of a consistent tone of voice and content quality throughout the site, which will support credibility of the information imparted by the brand owners.
• Consider cross-selling brand subsidiaries and cross-linking to related sites within the same corporate umbrella.

a fundamental necessity

When designing and building a web interface, it is important to base the model or concept on how a user will seek information and interact with this information. The challenge in IA is to minimize ‘information overload.’ Users are often frustrated due to the following case scenarios:

• Too much information. Short attention span.
• Urgent need for information. No time.

Just like the saying 'necessity is the mother of invention', the IA agenda is fundamentally driven by the need to create a solution for this problem:



Before we begin creating the architecture of a website we need to keep these points in check:

• The entry point of the user is not always the homepage
• Each web page should be able to stand alone and still be referenced
• The aim is to build ‘sticky sites’: engage users and keep them engaged
• The site should be usable, readable as well as visual

information architecture: what is it?

Information Architecture (IA) is a specialized skill set that is focused on the interpretation of information through a model or concept designed to express how complex systems work. These systems include web development, application interface and user interaction for websites, portals, intranets and online communities.

Here is a visual summary:




‘Information architecture’ was coined in 1976 by Richard Saul Wurman, who was an American architect and graphic designer. The term may also relatively pertain to ‘information design’ and ‘web user experience design.’

"I thought the explosion of data needed an architecture, needed a series of systems, needed systemic design, a series of performance criteria to measure it." — Richard Saul Wurman

Though there is not one label or definition for IA, in theory, taking from a holistic point-of-view, it is described as:

• The combination of organization, labeling and navigation schemes within an information system.
• The structural design of an information space to facilitate task completion and intuitive access to content.
• The art and science of structuring and classifying websites to help people find and manage information.