With bounce rate and time-on-site assumed to be the top trump cards in Google’s new algorithm; there is most certainly a push from Google — and subsequently advertisers — for websites to become more user, in addition to search engine, friendly. Read on to find our top ten tips for enhancing the user experience including everything from Search Engine Optimization (SEO) and rich media, to navigation and mobile device optimization.

1. Faster is always better.
It is not a newsflash that speed and load times rule the web. Every second a user has to wait, the more likely they are to leave your site. If you’re experiencing some lag time, try reducing the number of HTTP requests by simplifying the design, using CSS and CSS Sprites, combining images into a single file, and reusing elements — like page headers — which can reload from the cache. You can also create the illusion of speed by placing style sheets in the header. This will allow the header and navigation menus to load first thereby showing progress and pacifying user impatience.

2. Simply site navigation.
The foundation to every webpage is the sitemap and navigation. Clear and concise menus are essential as well as a single page showing all links. Online reading patterns lend themselves to the typical “F” pattern (example below). To ensure that the user can easily interact with your content, keep a relatively short list of menu option down the left side and across the top. Be sure that all navigation info stays above the fold and that the logo links back to the homepage. Intuitive navigation outlasts number of clicks, so go ahead and forget about that 3-click rule. Not to imply that the user will stick out a lengthy path, but ultimately clicks don’t cause user frustration, poorly organized sites do.

3. Embed Rich Media
Tickers, videos, animation and other rich media options have changed the landscape of the web and help keep the user on your site for longer while they interact with more content options. Nowhere is this more valuable than on education, news and entertainment sites. The biggest hurtle to overcome with rich media embeds is software compatibility. Consider using a third-party hosting site like youtube.com and embedding the video directly on your site. This will level the compatibility playing field and remove the server-hosting burden from you.

4. Optimize for Mobile Devices
While designing (or redesigning) your site, the need to factor in mobile devices is pressing. There are several schools of thought regarding site optimization, but the most all-encompassing and user-friendly option is to simply use the same URLs as the standard website. Strip down the site content to only the bare essentials. Simplicity is of the name of this game. Avoid using scripting languages or Flash components, as most devices are not equipped to support them. Keep in mind the small screens and use small graphics or ads and content that are scalable.

5. Bookmarking
Listing your site on social bookmarking websites like Digg can drive quality traffic to your way and bump your page views. It can also have a cascade affect where a user will tag your site for yet another site where yet another user will tag it again, and so on. Bookmarking is a handy tool that is relatively easy and doesn’t require a ton of time to achieve.

6. Utilize Social Media links.
Social media sites have taken over the way users share information with one another. Give viewers an easy way to link content they like from your site to their profiles. Not only will it spread the word, it will also get the attention of like-minded users who will not only click out of curiosity, they will probably spend quality time on your site which will help bolster your chances in the search engine pool.

7. Clearly Identify and Brand.
Brand identity is essential in all forms of media, but is most important on a large and complex website. Be sure the company’s logo or name is clear in the header. Choose, colors, fonts and graphic treatments compliant with brand style guides and reinforce that look at every opportunity. The more comfortable the user is with the style, the more familiar they are with the brand and are more likely to come back time and time again.

8. Search Bars are Essential
The more complex the site, the more essential the search bar . For user ease, stick to the tried and true method with an input field and a “submit” or “go” button located at the top, right of the page. Design the search bar cleanly with the font and color style already established for the overall look. In regards to search fields, less is more. Take Google for instance (see below), their entire brand is built upon the search bar and it remains simple and straightforward.

9. Strategically use Keywords and Titles
Be true to your content. Of late, Search Engine Optimization (SEO) has been all the rage, but don’t sell your digital soul for a few extra clicks. Google is working hard to filter and outsmart spammers who abuse the algorithm. Instead of getting caught up in the hype and fortifying your site with endless keywords, focus on how the user would look for your information and what words they might use. Be strategic in your keyword choices and get to the kernel of the matter to effectively garner the largest audience who will also spend the most time looking through your content.

10 Design. Design. Design.
Place big, attention-grabbing headlines above the fold, but don’t be overly concerned about making a user scroll. If you’ve successfully filled your site with quality content that is organized and clearly designed, scrolling won’t deter a user. The presentation of information requires a designer’s eye to ensure a site that is both aesthetically and functionally sound.

There is a plethora of ways to increase conversion rates, but a couple of ways are often disregarded as important, when they truly are. In order to show the importance of accessibility and usability, here we’re going to take a look at a variety of tips that’ll help increase conversion rates through them.

Accessibility

Flexible

Accessibility is all about flexibility in design. The design should be able to stretch and cope to resolution sizes. The reason this is important in accessibility is that if the design does not cope for many different resolutions, it becomes unbearable for users to use or browse about, making it inaccessible indirectly.

Cross Platform

A website is all about being cross platform compatible. The website should be able to easily work on mobile devices ranging in size as well as large displays and other mainstream devices. In addition to making your website cross platform compatible, you should also bring your service to different platforms so your users can take your service wherever they go.

Take Netflix’s online service as an example. It started as an online service for instant streaming, and then it was brought down to mobile devices via native applications, and so on and so forth. This allowed them to increase conversion rates from their online service as it became accessible and native to many devices they utilize.

Touch Safe

Mobile devices are migrating from stationary qwerty keyboards and keypads to touch screen interfaces. This also means your website needs to be touch screen safe and compatible as a part of accessibility. Small links and navigations make it impossible for touch screen mobile platform users to easily navigate about. With that said, assure your website is scalable and adjusted for different platforms as a part of accessibility.

Weight Adjustable

Weight adjustability refers to the weight of the available content on your website. As different users access your website from different devices and platforms, the weight of your content should adjust to the real estate or screen space available, getting rid of unimportant content, and leaving that of which makes your website important, such as the shopping of goods as well as the purchases of goods, and getting rid of latest news and other unnecessary items and or content.

Printable

Many disagree about the fact that accessibility includes making pages printer friendly. However, accessibility refers to the availability of content, which includes making certain pages printer friendly. If users need to print out their invoice or receipt, the page needs to be customized specifically for printing for best results. Therefore, printability categorizes under accessibility.

Usability

Usability is all about making your website and or service easy to work with, use, and navigational. Imagine having an instructional booklet on putting together a personal computer. If the instructional booklet is not clear on its instructions, you are bound to make mistakes as a first timer to personal computer building.

Similarly, if a website is not clear and easy to browse about, users will most likely leave the site, which loses potential customers or clientele, which decreases conversion rates. To show the importance of usability, we cover several tips that are sure to get you started on making your website and or service more usable or user friendly.

Clean Layout

A clean layout is always the first step to usability. Getting rid of unneeded clutter, organizing elements and objects across the design grid, helps make the website easier to navigate about and reduces eyestrain for the users who cannot handle too much information and very tiny content.

Feature Filled yet Simple

Users love features, but they also love simplicity. What this means is, when implementing features to your service or website, usability should be top and key on your list when adding new features to improve your service or website.

Generally speaking, features should be very easy to use and not require instructions to get them working or to get your users to use them about. Therefore, focus on the complexity of the feature in the back-end, but for the user or front end, make sure it appears as simple as possible, yet satisfying feature wise.

Easy To Understand

Your website’s layout should be speaking for itself. What this means is, you can display as much content as necessary on many different pages, but the layout of how the content is displayed should be clear and precise in terms of understanding.

A user does not want to spend time searching through clutter to get to a piece or feature they were looking for, and they also do not want to go through many navigational links to get there. Therefore, make everything easy to understand as if they have put the layout together themselves, knowing every corner, and where everything is in an instant.

Versatile

If your website or service is designed for users to access or use it on Earth and on Mars, make it versatile and adaptable so it works well on Earth and on Mars.’

What I mean is, your website or service should be able to adapt between many different situations and platforms, and be very useable as it would be, being viewed on the intended platform and resolution.

Expandable

Your audience could anyone, folks who are losing their eyesight, others who are dyslexic or color blind to certain colors. What this means is, your website should offer features that allows them to expand on your website. For example, many users do not tend to stick to the text size you initially designed your website around and use their browser’s tools to expand it.

This not only destroys the layout, it is also very tacky and more difficult. Instead, make your layout or design expandable to such changes, and offer a feature that allows your users to increase or decrease the font size. The same principle applies for font colors, or background colors.

Add a nice color palette of which users can choose from to change the background or foreground colors, it gives them the flexibility and adaptability they need without having to leave your website or use a third party service to do so, increasing conversion rates, and returning customers or visitors.

Web forms are used for all different types of data submission, video submitting, contacting, blogging, registering, or for ordering items online. All the forms come in different flavors, large or small, black or white, short or long. Therefore, forms are very important to you and your users, thus, making them just right is the key to increase usage.

Below we cover six tips to improve your forms for better exposure and usability.

Not Too Large, Not Too Small

A major issue with many forms out there is their sizes, many developers or designers try to fit long forms into small spaces, reducing the size of the input boxes greatly making it difficult for users to proofread what they enter. A good ideal size for each input box, which includes large text boxes and the likes, really depends on the amount of data you expect a user to input.

For example, let us say you run a blogging service, you know that blogs can be short or long, thus, giving the textbox a good width and height is really the key. Users want to be able to easily proofread their blog post before it makes it live via the textbox, so fairly large text is also a plus, so they can easily catch typing mistakes or missing punctuation.

JavaScript Effects

A great addition to form textbox fields would be some simple JavaScript effects such as auto expanding features or character counting features, depending on the type of data being imported. Despite these effects sometimes being of no relation to your service or form, users do find them handy, especially if a lot of text is being submitted or edited.

To give a good example of a situation where an effect like this can help, let us look at a forum script. Suppose you are creating a forum script where users will be able to discuss certain topics, as you know, posts can be short or long. If a user’s post happens to be long, scrolling through the textbox is an undesired thing to do, as the user cannot quite view the entire posting. Therefore, providing an auto-expanding effect is quite helpful. As the user’s text gets near the bottom of the textbox, it will automatically expand a few lines, keeping your users satisfied.

Easy to Understand

Many users are turned away from forms that are difficult to work with. Hence, it is a definite must to be clear and precise about the information being collected as if they cannot understand what you need, chances are you will not receive what you needed. Another aspect to look at is just because it may be understandable to you, does not mean it will be understandable to your audience. Therefore, it is in your best interest to ask for feedback on understandability of your forms.

Not Too Much, Not Too Little

Another key aspect that causes users to turn away from completing your forms is that your forms ask for too much information. Users want to be completing the form to continue rather than spend the time filling them out. Thus, it is key for you to keep your forms as short as possible. For example, if your form is a registration form to an online service, leaving account settings whether optional or not out of the registration forms makes the form look shorter and easier to fill out increasing the chances of user registrations.

Moreover, leave the information you do not need immediately out of the form, and have them choose to enter the information later at their own leisure or when it becomes necessary. If the information that you may taken out is absolutely necessary within a few days of signing up, have them fill the information out a day later, such as when they sign back in, you can easily prompt them to fill the information out before continuing. This splits the lengthy form into two easy to fill and understand forms, keeping them happy.

A Simple Uncluttered Design

The design of a form additionally impacts the users experience. Your users do not want to bounce back and forth to get to each form field in order; they want to be able to easily fill the fields sequentially without trouble. Therefore, the design for the form should be as simple as possible leaving the fields easily accessible in the order intended.

Understandable Security Measures

While users understand security measures applied to forms help prevent spam, they also do not want to struggle to complete a form. With that said, complex spam prevention tools such as CAPTCHA images cause less completed form submissions from frustrated users. I myself have left many forms that I had intended to fill out due to their hard to work with security measures. Thus, as a developer or creator, creativity is what is needed to avoid the spammers but not the users.

Many new ideas and techniques have become apparent such as mathematical questions, slider prevention systems, as well as others. My personal favorite that I found very intuitive and easy to use is a drag and drop security measure. The user simply drags a shape requested from a palette of shapes right into the shape box, if you selected the requested shape, the form will submit. As it is simple and easy to use, your users will enjoy playing with the tool, as well as keep spammers out of the way.

To Conclude

Overall, getting your users to complete your form is a process that requires thought and ingenuity. With that said, creating a form is easy, but getting it properly designed, formed, and well laid out is tricky however an attainable aspect, but if it is done correctly, it can rewarding. To conclude, keep your forms as simple as possible and as down to the point as it can possibly get.

Ask around for feedback about the design and layout for whether the form can be easily filled out, whether it is easy to understand, and if it is easy to follow. Improve your form accordingly, and it would be ready to hit mainstream.

Today’s news focuses on only one single design resource… and what a FREE resource it is! It is The User Interface Design Framework from webalys.com, which is basically a huge design framework that consists of a complete GUI library, a set of of 260 minimal vector icons and a massive Illustrator style library. This is a must have resource for any professional designer.

License: The framework has been released as a complete web designer kit for free, even for commercial use.

You can download the UI Design Interface here: User Interface Design Framework
You can view the details of the framework below:

GUI Library

The GUI elements are based on common interface patterns (accordion, expandable panel, progress bar, tags, slide show…), that integrate usability good practices and are perfect for wireframes and interface design.

Vector Icons Library – 260 Minimal Icons for Free

This pixel precise icon collection have been created specifically for interface and web designers. They are based on a precise 16 pixels grid, which means that they stay clear and have a crisp look even at small sizes.

Graphic Styles Library

The Graphic Styles Library consists of 200 graphic styles for buttons, navigation menus or panels and 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

You can download the UI Design Interface here: User Interface Design Framework

By Paul Andrew (Speckyboyand speckyboy@twitter).

Today’s news is a refreshing look at some of the most recent jQuery tutorials and techniques. Accompanied with the recent popularity of CSS3, some of these new techniques are groundbreaking and others simply take a fresh look at older design techniques.

CSS3 Rounded Image With jQuery

In this tutorial you will use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot above.
CSS3 Rounded Image With jQuery

Image Highlighting and Preview with jQuery

In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow your users to view a bigger version of an image that is relevant to some context.
Image Highlighting and Preview with jQuery

Simple AJAX Commenting System

In this tut,, you are going to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Simple AJAX Commenting System

Interactive Photo Desk with jQuery and CSS3

The idea of this tutorial is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
Interactive Photo Desk with jQuery and CSS3

By Paul Andrew (Speckyboyand speckyboy@twitter).

We love reading the discussions that develop on Answers. We love the fresh and innovative dev solution’s, the sometimes heated discussions over age old issues and appreciate all of the inspiration that is offered by Answers’ users.

Sometimes though, we come across a question that is neither controversial nor difficult to answer. And that is the point of Answers, its not just about the tricky questions and complex solutions within web design, it is also there to help beginners and amateurs. And that is what we would like to highlight in this post.

You can leave your thoughts on this topic in the comment section below or you can leave your solution on the original question here: Why do Some People Use HTM Rather Than HTML? on Answers.

Why do Some People Use HTM Rather Than HTML?

This question was originally asked by Rollback999, and you will find the favorite answers below:

Best Answer from Scunliffe:

Unanswered Answers

There are no unanswered questions this week, what a great week it has been!

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

In the past web designers had no option but to focus on page load times, it was a darker time when internet connection speeds rarely went over 52kb. Times have changed, internet speeds have dramatically improved and as a result the allowance and tolerance for heavier web pages has increased as they meet user demand for functionality and the designers creative appetite.

Why worry now about page load times? There are a lot of rumors that Google are ranking sites by there load times, and the chances are the rest of the search engines will jump on-board as well. The answer is yes, we really do need to focus on page load times, yet again.

As we do every week, we like to offer a question to our readers that has been previously asked on Answers, this weeks question is: How can I decrease page loading times on my site?.

You can leave a comment below or you can leave an answer on the original question on Answers.

How can i decrease page loading times on my site?

This question was originally asked by Walterwebb.

Answer from Tim:

Can you help? You can leave an answer below in the comment section, or you can leave an answer here: How can I decrease page loading times on my site?

Unanswered Answers

Can you help with these unanswered questions?

1. Without The Use of JavaScript, is There a Way to Make a CSS Property Toggle On and Off Through Nested Elements?
2. Do You Prefer Adobe Illustrator Or Photoshop?
3. How Can I Slowly Fade In Text and a Background While a Page is Loading?
4. How Can I Have an Option Where the User Can Select All Checkboxes With One Click?
5. How did you add that scrolling share link to your posts?
6. What's Your Favorite Font for Mobile Web Design?
7. What's a Good Ajax File Manager for Browsers?
8. How Can I Let Users Change the Font Size and Families On Any Web Page?
9. What's the Best FREE Social Media Venue to Promote Your Website?
10. How Do I Point Search Engines Directly to My Web Pages That Contain AJAX?
11. How Can Create a Hover Over Effect to Get a Preview of a URL?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

There are several methods for wire-framing,prototyping or sketching a web design project. Some may use a web based wire framing app or download one of the many powerful desktop applications available, and others, will simply use the ageless and always reliable pencil and paper. So, we now pass this question to you.

As we like to do every week, we highlight a question that had been previously asked on Answers, and offer our readers the chance to comment and share their thoughts.
So, here is this weeks question: Sketching or Straight To the Computer for Design Concepts? What’s Your Choice?.
You can leave a comment below or you can leave an answer on the original question on Answers.

Sketching or Straight To the Computer for Design Concepts? What’s Your Choice?

This question was originally asked on Answers by Autobots.

Answer from Unregistered User:

Always sketch first. I find the computer can get in the way, and I can get stuck in a design rut if I move to the mac to early. Sketching helps keep the creativity flowing, and allows me to think up some organic ideas. I can decide what characteristics a typeface should have in a design without worrying about if I have it on the computer for example. Anything’s possible on paper.

Answer from Unregistered User:

Sketching every time! Its easier for me to get my ideas together with a pencil and pad, then translate them onscreen.

Answer from Handrus Nogueira:

It really depends on client needs. Every time a work need a bit more creativity sketching become necessary. In the rare cases where client know what he want’s or already have a good idea of how the page elements should look like I run directly into html, css (without PSD), the use of css frameworks like blueprint and bluetrip made it a lot easier and overall faster than create the design in photoshop first.

What do you think?

Unanswered Questions on Answers

Below you will find this weeks selection of unanswered questions, can you help?

1. How Can I Make an Interactive Map of the World?
2. Is It Possible to Place PHP Projects Into The Google App Engine So They Can Be Executable?
3. What’s the Most Effective Way to Make Sure That My HTML/CSS Works On All Browsers?
4. How Do I Fix Unwanted Caching in Firefox?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

As the web matures, there is an ever greater need and requirement for web designers and developers to grasp and learn any new technological advancements. With the new CSS3 properties, HTML5s advancement, WordPress rapidly approaching version 3.0 and with the recent release of the iPad, the demand on the developer has never been greater.

For today’s news round-up we have a small, but useful collection of newly released developer tools and apps that can assist you during this learning curve.

CSSDesk – Dynamic CSS Sandbox

CSS desk is a new and useful tool that allows you to test and experiment with CSS and HTML.
CSSDesk – Dynamic CSS Sandbox

The HTML5 test – How well does your browser support HTML5?

The HTML5 test grades your current browser and depending on how well it performs will awards it a score out of 160. The score is calculated by testing for the many new features of HTML5. Each feature is worth one or more points. In some cases the tests go beyond the specification.
The HTML5 test – How well does your browser support HTML5?

iPad Peek

iPad Peek is a nifty tool that lets you see how any website will be rendered on the iPad. Click on the top border to switch from landscape to portrait mode.
iPad Peek

Elastic WordPress Theme Editor

Elastic is a visual theme editor and theme engine for WordPress that takes a new approach to WordPress theme development. Have a look at the video below.
Elastic WordPress Theme Editor

By Paul Andrew (Speckyboy and speckyboy@twitter).

The level of usability on your website takes on a vital role when we’re designing for the end-user. If your web application isn’t easy to use and interact with, then chances are the services and information you offer will be valuable to a rare few. Usability aims to relieve some of the things that can make your website complicated to use and simplifies the interface so that the users overall experience is a pleasurable one.

When designing with usability in mind you must make sure you test extensively, and consider the fact that what may be easy for you to interact with, may be difficult for others. It is about finding the right balance that will allow a wide variation of users to exit your website satisfied with the user experience.

Why and What to Ask?
We’ve put together several questions (you might not have heard of) that will help you enhance and assess the quality of your websites usability. Not every question may apply to your case, however, these questions are meant to help you to think a bit more from a users perspective.

How Can I Enhance the Usability of My Links?

I was a bit hesitant to start off with this very question, mostly because some believe that links don’t play any part in a websites usability factor. However, from previous testing and links being a definite part of user interaction, we know that we must find ways to make links as clear and concise as possible.

A user must clearly be able to point out a link within a sentence, paragraph, or anywhere else on the site for that matter. Many designers have solved this issue by adding small icons to links through CSS, and adding anchor text. Links that are associated with your websites navigation need to be given even more attention. A sites navigation can make or break the user experience. This is especially true with tweaking your website for maximum accessibility.

What is the Five Second Rule?

When you refer to a websites usability, you’ll sometimes come across the “five second” rule. Even though there may be several versions of the five second rule such as three or two seconds instead of five, the general idea is that a user should be able to digest or have a quick break down of what your website is all about, as well as what you have to offer within the first few seconds of their visit. Anything after that will more than likely result in disinterest and may eventually drive visitors away.

The homepage is key, since it is the first thing users will become acquainted with. What does this have to do with usability? Everything. If your website fails to catch the attention of the targeted user, then there simply will be seldom interest in using your website. The Five Second Test (usability testing tool) goes hand-in-hand with the five second rule.

Are the Titles and Headings Distinctive?

This benefits every site, however, if you run a blog/magazine then this will be one of the most important elements of your websites usability. You should make sure that your titles for sections and posts are easily distinguishable and clear. They must be easy to read, understand, and remember. When you style your headings it’s important that you don’t over-do-it and you take your time in selecting the right type of font. Bad titles and headings can make sure site look convoluted and somewhat distorted.

Is the Content on My Site Displayed in a Consistent Manner?

The information displayed on your website should be structured in such a way that it represents consistency. Content that isn’t structured will make your website look messy and unappealing.

For example, if your blog posts are all aligned to the left, you should make sure that every post is aligned to the left. It wouldn’t make much of any sense to have one post center aligned, the next to the left, and a few to the right. Users will be confused and their eyes will most likely end up hurting after trying to read the mess on your site.

Do Clickable Items Lure Me to Click Them?

Simply said, what’s the point of having an item you want users to click on if it doesn’t even seem clickable? For example, if you have image ads on your website you’d definitely want users to click on them. A simple and straightforward way to do this is to add a property such as a drop shadow to all of your image related ads through your CSS.

CSS-Tricks is a reasonable example of what we’re talking about. Check out the sidebar with the 125×125 ads, see how they interact and the size of the border around them. All of these factors contribute to luring you in to clicking on the ads. In such a way, elements you want users to click on should be undeniably clickable and are expected to contrast the rest of the content one way or another. Make it easy for your users, guide them a bit and you’ll see that they’ll respond much better to anything you “throw” at them.

Is the Entire Site as Functional as It Is Appealing?

What’s the point of having a website that has been aesthetically “perfected” if it isn’t nearly as functional as it looks? Your website should respond well to actions performed by the users. If the site can’t deliver quality functionality, then you’ve more than likely defeated the purpose of usability. True usability is more than just design, it’s function. We’re not inferring that you should place more emphasis on the back-end of your website, however, there should be a balance between the front/back end design. These two will always work together to ultimately create a much better user experience.

Does the Site Load Quickly?

Even though this question is obvious to some, it’s still something that should be included within this article. The speed of which your pages load can drastically contribute to the usability of your website. If your web pages fail to load quickly, then this can put a strain on the time users have to interact with your website. The faster your pages load, the better users are able to interact with your website, resulting in a much more appealing UX.

Remember you can always post your usability related questions on Design Reviver Answers for accurate and informative responses.