VBWebSites

2007-12-06T14:14:00.000-08:00

In web design, when we think about flow we usually think about “task flows” or “flow charts” but there’s another type of flow that we should keep in mind. It’s that feeling of complete absorption when you’re engaged in something you love to do without being disrupted by anxiety or boredom caused by tasks that are confusing, repetitive or overly taxing.

Flow, as a mental state, was first proposed by psychology professor Mihaly Csikszentmihalyi and is characterized by a distorted sense of time, a lack of self-consciousness, and complete engagement in the task at hand. Software engineers might feel it when they’re writing code, gamers might feel it when playing Guitar Hero III, Christopher Cross felt it when he went sailing. For designers, it’s exactly the feeling we hope to promote in the people who use our sites.

How do we create sites that inspire that feeling? Well, it starts with a site that solves a challenging problem and is complex enough to require a certain amount of learning by the user. The goal should not necessarily be to create a simple site. The goal should be to create a site that feels painless to use no matter how complex it really is. But wait, you might be thinking, hasn’t there been a simplicity movement in web design over the last few years? Yes, but there’s a learning curve for any site that seeks to solve a complex problem. We shouldn’t confuse simplicity with a desire to avoid needless complexity.

The way to make the complex feel painless is to design with flow in mind. By designing a site that is fluid and intuitive and inspires flow, you help new users get up-to-speed more quickly, reduce the chance that existing users leave your site to switch to another and create users that evangelize your site to other people. That results in more users, increased activity, and greater awareness of your site.

The following four rules are based on Csikszentmihalyi’s Flow: The Psychology of Optimal Experience (more info) and are meant to help nurture the flow experience in users.

1. Set clear goals
The first step in designing for flow is to set clear goals for your users. It’s important to create both an overarching goal as well as smaller, incremental goals. Goals help users understand where they’re going and each step they’ll take to get there.

Marketing copy is often low on the list of priorities, but it can be key to helping users form their goals. When describing their products on their company homepage, 37signals avoids the typical marketing jargon in favor of down-to-earth language. Campfire’s description: “It’s like instant messaging, but optimized for groups. Especially great for remote teams.” These descriptions help visitors understand product differentiations and how each might be used in real-world situations.

On personal organization tool Backpack, 37signals provides a fantastic set of examples to help users understand the specific uses for the application. They show how one might use Backpack to plan a wedding, comparison shop or organize employee searches. For users who have a difficult time figuring out what they’re supposed to do with a site and who find a list of features meaningless, these examples can be invaluable in setting goals. Realistic examples help users understand how they might use the site and inspire them to achieve what they’ve visualized.

2. Provide immediate feedback
Once users understand what they can achieve via the site, they’ll want to start making progress towards realizing their goals. It’s the job of the site to provide the necessary guidance so that the user feels they are actively achieving them.

Wufoo, an application that helps people build forms and collect information, does an excellent job of guiding users through form creation. Their wizard-style interface provides instantaneous feedback by showing a live preview of the user’s form as they create it. By doing so, they’ve removed the potential anxiety of not knowing what the end product will look like. Users can see that the tasks they are performing are continuously moving them toward their goals.

Flickr’s Flash-based image upload tool is another good example of providing users with immediate feedback. File upload on the web has always been a less-than-ideal user experience. Typically, a user selects a file using a file upload form control, submits the form and waits, sometimes for quite a long time, for some sort of confirmation screen. Flickr has improved upon that process by allowing users to see the progress of each image. Users no longer need to fear a long wait just to see an error screen. They can watch the progress bar and know that photos are being uploaded.

3. Maximize efficiency
Once a user becomes comfortable with a site, they’ll want to start using it more efficiently. When they’re experiencing flow, users want to work more quickly and want the site to feel more responsive.

Google Reader has several features that make it feel fast and effortless. Perhaps the best example is the “endless scroll.” It eliminates the need for pagination by fetching new articles as you scroll down the page so that you can read all the articles in a tag or feed without ever clicking to go to a new page. The user never has to disrupt their reading by clicking a link to the next page.

Another way that Google Reader ensures efficiency is through the email feature which, when clicked, appears directly below the article and allows you to send a story to a friend without losing your place. Google avoids causing a disruption in flow by reducing the mental cost of taking an action, thereby promoting more engaged use of the site.

Backpack provides a great example of efficiency with its options for reminders. Rather than selecting a day, a month, a year, an hour, and a minute, they’ve provided some extremely useful shortcuts to let you select options like “later today” or “in two weeks”. They’ve avoided forcing an unnecessarily complex interface on their users because they’ve thought beyond how the data goes into the database. They’ve removing the friction that would be created by forcing users to think about specific days and times, allowing them to choose an option that feels more natural.

4. Allow for discovery
Once a user has begun to work with maximum efficiency, there’s a chance that they’ll feel less engaged and grow bored with their experience on the site. In order to avoid this, you should make content and features available for discovery.

For content sites, this may be as simple as displaying newly created content in the hopes that it will catch the user’s eye. The website of The New York Times includes a “Most Popular” module that displays the most emailed, most blogged and most searched stories. Even though these aren’t based on information of individual readers, these are extremely relevant to most users since they pinpoint the stories that grab the attention of the average person.

Ebay makes features discoverable by placing them in the context in which users will be most likely to try them out. For example, when looking at an item on Ebay, underneath the link to “Watch this item” are links to mobile or IM alerts. The people at Ebay know that alerts lead to more active participation, so they promote them where users will be most interested in them. This kind of discovery allows users to continuously learn new things and find new ways to interact with a site.

Go with the flow
Flow is a powerful psychological experience. Designing for flow requires an enlargement of empathy and a deepening of emotional and intellectual subtlety. It is the difference between creating chapter markers and telling a story.

A site designed for flow must appeal to new users and power users alike. It must stretch both sets of users in a way they find enjoyable rather than daunting. Despite the challenges, the rewards of designing for flow are a user base that is loyal and enthusiastic—one that will evangelize your site to others—and a more profound sense of engagement between you and the people for whom you design.

Video Portfolio

2007-12-04T07:26:00.000-08:00

A new website, Animoto.com has been released so we thought we would give their services a try.

Optimizing Your Web Sites Real Estate

2007-10-29T11:42:00.000-07:00

Screen Resolutions Explained: Your office mate has her monitor set to 800x600 pixels, while yours is set to 1024x768 pixels. You have more pixels, right? So how come everything looks smaller on your screen? It's because the pixels on your screen are smaller, so more of them fit into the same space. While this "more for less" concept sounds like a great idea, it can affect the overall usability and accessibility of your Web site.

Put More Into Less Space

The term "screen resolution" refers to the number of individual pixels that fit within a given space. When we're discussing an 800x600 resolution, the number 800 refers to the number of pixels that the monitor can display horizontally, while the number 600 refers to the vertical limit.

Monitor size and optimal screen resolution are closely linked. As you increase the resolution, the screen elements appear smaller. In fact, the information contained on a 15-inch screen set to 1024x768 may be so small as to be virtually unreadable. But the same information displayed at that resolution on a 17 or 21-inch monitor would look fine.

That's because a 15-inch monitor set to display at 800x600 pixels has a higher resolution than a 21-inch monitor set to the same display. That means a 200x300 pixel GIF image will look smaller on the 15-inch monitor than on the 21-inch monitor. An image that size would still be readable, but small navigation buttons quickly become illegible - even for visitors with great eyesight.

Design For Your Visitors

Ideally, your site should be completely device and browser-independent - but that's an almost impossible standard. The next best strategy is to design a site that looks good and performs well for the vast majority of your visitors. That takes research:

Are you taking advantage of all your web space real estate? Staying ahead of the web design industry, VBWebSites will start building wider sites optimizing and utilizing as much space as possible. Get your old site redesigned, placed on Search Engines and ranked higher. Get a Quote, Its Free!

Thankfully,
Brady Behrman
www.VBWebSites.net

Why doesn’t your site come up in search engines?

2007-07-31T04:16:00.000-07:00

Many people believe that because you have a website, you should automatically come up in the search engines. The truth is, it takes month for your new site to get indexed. For this reason you should never change your URL after you have already established a website, instead, forward your new URL to your old URL; this way you will not risk losing valuable indexing and your customers won’t know the difference.

So, how does one get indexed? Well, this simple question has a complex answer. It is important to understand that all search engines have one goal: They want to provide their users with relevant content for every search term or keyword phrase entered. Each engine uses constantly changing algorithms to configure the relevance of your site.

This may seem daunting, but if you concentrate on great content you are sure to get indexed and increase your page ranking over time. The more content you have, the more likely you are to establish a higher page ranking. A great way to add content on a regular basis is to have a blog that is hosted on your site’s server. We have used both Blogger and Word Press and have experienced good results with both.

Inbound links are another way to increase your page ranking. You may consider opening an E-bay store and linking back to your own site. Every time someone features you on their site – they should link back to you as well. Think of this as footprints leading back to your site. The more you have the more likely you are to get noticed.

Ask your web master to add title tags to each of your site’s pages - these should be the most relevant keyword phrases and also describe each page effectively. The use of ALT, description and meta tags are also ways you can utilize your most relevant keywords throughout your site (though these are not highly valued any longer). For more on keyword phrases and site tags, read What are keywords and why do I need them?

MSN, Yahoo and Google are the most competitive search engines and each one places varying significance on different aspects of your site.

Google uses a page ranking system called PageRank – you can check your page rank at Alexa. It is likely that your site will first come up in MSN, Yahoo, and then Google – respectively; assuming you have diligently added relevant content and keyword phrases to your site.

Keep in mind, the longer your site is active, the more weight your site carries with search engines, so have patience. Add fresh content often and remember to ask for back links to your site.

Using Images to Increase Your Search Engine Rankings

2006-12-29T08:15:00.000-08:00

Pull in hundreds of visitors per day by optimizing your graphics and images. Learn 3 simple tricks that can yield in higher traffic counts and income.

If you are an online business owner then you must read this article. You could be losing hundreds or thousands of visitors each and every day.

Did you know that millions of people are using the web to find pictures of Old Faithful, a ’69 Mustang or a cartoon drawing of Bill Clinton? There are potential customers searching for graphics of your products and services right now. Are you capturing their business?

The major search engines have been collecting images from websites and sorting them by topics, keywords and alt tags. Are you optimizing your images properly to take advantage of this free advertising?

Google's Image Search forms about 12% of its regular search queries. That's a lot of searching for graphics. To give you an example, Google’s Image Search accounts for more queries than Ask.com’s regular queries. If your online business lends itself to photos, that percentage could mean a jump to 25-40% of your traffic.

There are a few basic rules to optimizing your images. While optimization is optional, I highly recommend taking the additional 30 seconds to add alt and title tags and proper graphic names. The difference in traffic and income could be drastic.

Some folks shy away from alt tags these days. I still like them and use them to my advantage. The trick is to code the tag so that it provides a line of information to your website visitor.
For example, I have a fitness website that displays photographs of different exercises. The alt tag for a particular exercise would read: Crunch- Keep Belly Button Pulled Into Spine.
In other words, use the alt tag to sum up your main point of having the graphic in the first place. Be sure to include words in your alt tag that help define the picture as well. The alt tag will only display if the graphic does not load, or if your visitor is using a text based browser.
Use the title tag in your images as well. The title tag will display when you move your cursor over an image. The title tag is built into the coding of the image just as the alt tag is. You should also use words that describe the graphic and provide additional information.

Another way to optimize images is in their file names. All graphics have a file name when you save them. This is a simple way to earn points with the search engine! Instead of naming your ab crunch picture 1yhjdk65789.jpg, why not name it ab-crunch.jpg? It’s all about using words to describe the image.

This may be reminding you of keywords. Images should be treated just as your online business content. I’ll even go a step further and say that images should be an integral part of your website content. Use every advantage you have to rank well at the engines!

One caveat: do not spam your alt or title tags. Search engines are growing smarter every day. Build your web business with dignity and honesty. The throwback will be tenfold.

Your hosting company should provide image search traffic analysis of your website. If your hosting company does not provide this, strongly consider switching hosting companies. Graphic and image searches are going to increase in the coming months and years. You must know how it affects your traffic and your bottom line.

http://www.vbwebsites.net