Interaction design involves designing and documenting the user flow and interface screens. The objective of our interaction design documents is to easily explain how users will interact with a website or application. We believe in having a user-centered design methodology when it comes to creating interfaces. In order to understand the best way to represent information on a screen, or how a specific user should traverse a website, we conduct in-depth user research and a do an extensive competitive analysis. We refer to the user research in an effort to always keep the user's needs and goals at the forefront of our design decisions. If available, we will also examine your existing log files to understand the current user paths.
read more

Interaction design involves designing and documenting the user flow and interface screens. The objective of our interaction design documents is to easily explain how users will interact with a website or application. We believe in having a user-centered design methodology when it comes to creating interfaces. In order to understand the best way to represent information on a screen, or how a specific user should traverse a website, we conduct in-depth user research and a do an extensive competitive analysis. We refer to the user research in an effort to always keep the user's needs and goals at the forefront of our design decisions. If available, we will also examine your existing log files to understand the current user paths.

The following are some of the documentation methods we prefer to use when doing interaction design:

Wireframing
A wireframe is simply a sketch of how the layout of a webpage should look and behave. Key page elements and their location are decided on and drafted. Proposed behavior, structure, navigation, and content layout are all captured within the wireframe. We can tailor our wireframes to include specific details that are important to the intended audience. For instance, if the wireframes are going to be utilized by the development team we will be sure to include annotations specific to functionality. You can think of a wireframe as the blueprint for your website.

User Flows and Storyboarding
Creating a logical and straightforward flow of the different screens that are wireframed is the crux of producing a usable application. We conduct flowcharting and storyboarding to decide on what the exact sequence of screens should be that a user has to traverse to complete a desired task. Flowcharting is a very high-level conceptual model of the different possible design flows. You can think of a flowchart as a decision tree for the user experience (i.e. If the user does "x" show screen "y"). Storyboarding is simply a much more defined flowchart. A storyboard is like a wireframe, but instead of just one sketch, a series of detailed interfaces are wireframed in order to step through a sequence of screens.

Prototyping
Prototyping is typically done in preparation for a usability test. Following are a few different types of prototypes that can be created:

* Paper prototypes - Paper prototypes are similar to wireframes in that they are hand-drawn interfaces on paper, but they are typically much more defined when it comes to content and interactive elements. Testing with paper prototypes is done very early in the development cycle, before any effort has been put into coding or graphic design. Performing a test with a paper prototype entails putting a user in front of the sketches and asking them to perform tasks utilizing their finger or pencil to simulate pointing and clicking. Typing is simulated by having the user actually write on the paper prototypes. Typically, one person is taking notes and facilitating while another person is switching the screens as the user is "clicking".

* Clickable PDFs - A clickable PDF is a PDF (Portable Document Format) that has the added ability to support links and functional forms. Clickable PDFs bring our paper prototypes to life by adding functionality to paper without writing a single line of code. Instead of a user having to stretch their imagination by playing with paper, the user gets to interact with the prototype on a computer by utilizing an Internet browser; the same way they would with a website. Just as with paper prototyping, testing on PDFs is done very early in the development cycle.

* HTML/CSS prototypes - Testing on fully functional websites is the most ideal medium, but the least cost effective when it comes to testing a redesign of a website. You don't want to invest in coding and creating a website only to find out after testing that the interface is inefficient. This information can and should be found out much earlier in the development cycle by testing on paper or PDF prototypes (see above). In order to understand what areas of an existing website are not servicing your users well, testing should be conducted on the current website before any redesign work on a new one starts. collapse

Content is King! If you want a website to generate back-links and have quality content the search engines love, be sure to make it readable by both people and search engines. Search engines are working to give people quality results. Thus, they are looking for sites with quality content. So by building site content for people, not only are you getting back to basics (information dissemination to people via the Internet), you are creating a site search engines will love. So, build sites for people - and the search engines will come.

When creating a new website or redesigning an existing site, there are four critical rules which should be followed to make the site effective, functional, loved by search engines, and successfu...read more

Content is King! If you want a website to generate back-links and have quality content the search engines love, be sure to make it readable by both people and search engines. Search engines are working to give people quality results. Thus, they are looking for sites with quality content. So by building site content for people, not only are you getting back to basics (information dissemination to people via the Internet), you are creating a site search engines will love. So, build sites for people - and the search engines will come.

When creating a new website or redesigning an existing site, there are four critical rules which should be followed to make the site effective, functional, loved by search engines, and successful.

1. Easy to Read

When building a website, the first thing you need to be sure of is that your website is easy to read. When you write content, remember that most web site visitors don't read every word of a page - in fact, they only scan pages to find what they want.

Break up Your Content

Break up your pages and use headers between major ideas so people scanning your site can find what they want quickly. Use meaningful headers between each paragraph or major idea - this helps with SEO. Headers should be created with the H1 through H4 tags for SEO. Always use good writing structure. Additionally, avoid long paragraphs that run on. You should break up any long paragraphs.

Color and Fonts

To help readability, use high contrast colors between font and background. Black text against a white background may seem stark, but it is very readable. To make a website easy on the eyes, try an off-white background and a dark gray (almost black) text color.

Things to avoid with content color:

? Avoid vibrant background colors like purple or yellow. Such back colors make text difficult to read.

? Avoid using an image behind your text.

? Avoid using bright text colors on bright backgrounds.

Fonts Matter

One simple statement covers the font issue:

Simple fonts are the best; the more fancy the font, the harder it is to read.

Since many browsers only have the standard font set, use standard fonts. In reality, there is no "standard", but there are certain fonts that are installed on most browsers. These include Arial, Verdana, Tahoma and Times New Roman. Your readers will see something different than you see if you use other fonts.

Standard Compliant Browser for Development

When developing and testing your site, use a Standards compliant browser like FireFox. If you develop your site to be standards compliant, it will work in most browsers, including MS Internet Explorer (IE). It is recommended that you test your site using the latest and last browser versions of IE (IE6 and IE7). To run multiple versions of IE on the same machine, TredoSoft.com has a free installer that will install multiple versions of IE. It works great!
Keywords in Content

Of course, when writing content, not only should it be formatted to be readable, but it must also be consumable by not only people, but by search engines. One way to make the subject of the content known to search engines is to use the keywords that people use to search for your site in your content. Be sure to use keywords in your header tags, your first paragraph and throughout your text. The keyword density should be between 4% and 7% - but any more than that could 1) be hard to read and still make sense and 2) be considered spam by search engines and banned. Keywords should also be used in your TITLE tags and your Meta description.

2. Simplify Navigation

The menus and links make up the navigation that the visitor uses to get from page to page in a site. Always plan a site around how people will get from page to page. A visitor to your site should be able to get to what they want within three clicks of their mouse.

Multiple navigation points makes it easy to find things. Repeat the top menu and at the bottom. Also create a left or right menu.

Using links within your text to other areas on your site. You can create links so that they are good for search engine optimization (SEO). There are generally two ways to create links within your text:

1. The wrong way: "For search engine optimization techniques, click here."

2. The right way: "Good techniques for search engine optimization are important to use."

Using link text (anchor text) that describes what the link is about is the best way. Search engine web crawlers (programs that automatically index the contents of websites) visit your site, they "read" links. Spiders can index descriptive links into a subject or keyword category. Spiders have nothing to work with when reading a "click here" until it reaches the linked page.

This is Cross Linking - use it as much as possible when it makes sense to do so when writing your content.

3. Consistent Design

At most, one or two layouts should be used in your site design. As a reader browses your site, they should be able to get used to looking in the same place for your navigation, for your sub-navigation and for your content. That's all there is to say about that.

4. Lower Page Weight is Better

Page weight is the total size of a page on your site in bytes - code, text and images. Your site's page weight makes a big difference to your viewers. Lighter page weight is better for your readers because the page will download faster. The faster a page downloads, the faster they will get to the content.

What is Means to be Light

? No large images.

? Fewer images are better.

? Optimize images for the web at no more than 72 dpi

? Use as small an image dimension as possible for the given design.

? Use a table td bgcolor attribute or a background-color style attribute for solid color backgrounds.

? Make gradients horizontal or vertical (not diagonal) so that you can use a small image "strip" and repeat it.

How "Heavy" Should a Web Page be?

Certain studies show that 64K is a good maximum webpage size. 64K is a maximum, however it is still, in my opinion, really big! The smaller the page, the better. 25K is good, 15K is even better. There is a balance between design and function. It is a good idea to focus more on function.

Try putting pages on your web host server as you build your site so you can test it as you go. For pages online, you can test the page weight at www.quasarcr.com/pageweight/ to be sure you are on track.

Ways to make pages lighter:

? Use linked style sheets
? Use DIVs instead of TABLEs where possible
? Use simple repeating backgrounds for effect

Summary

Visitors to your website should be able to find what they are looking for within about three clicks. Search engines should be able to navigate easily through your site. Making a site easy to read with consistent page design, and easy to navigate will make it easy to find information. When people can find information, they are more likely to refer your site or link to it - which is exactly what you want to encourage. You will be on the way to building a readable and hopefully successful website that is loved by search engines if you follow these principals.

By: Nicholas LaPolla collapse