User Interface – Basic Guidelines

1. The web site should load quickly and be easy to scan. These are the essential prerequisites of web designing.
   
2. Pay attention to your homepage. That is what the viewers will first see. The home page should be attractive and provide useful information. If it doesn’t satisfy the mentioned criteria then the readers will move on.
   
3. Logo should be linked with homepage both in front-end and in admin.
   
4. Alert messages should be in red color.
   
5. Help message should be in black or light gray color.
   
6. Within the site, minimum use of icons and maximum use of textual links.
   
7. Avoid Pop-Up in the coding, always open in new window or in new tab or use Ajax functionality. Most of user blocked Pop-up messages in the browser. like in Firefox, IE7.
   
8. All files naming convention should be relevant and consistent. Like as an eg. about-us.htm, product-details.htm
   
9. Call for action should present on every page. It reduces the frequency of exit from the site.
   
10. The site should be W3C certified (http://validator.w3.org/). Validating web pages is an important step, which helps in improving and ensuring the quality of website. The validated web pages are also load fast and quickly indexed by search engines.
    
11. Breadcrumb should be present in inner pages of both front-end and admin site. It is easy to navigate the inter-related interfaces.
    
12. Date format & phone number format should be according to the country.
    Example:
    Date Format USA: MM/DD/YYYY
    Date Format UK : YYYY/MM/DD
    Phone number USA: 111-111-1111
    
13. Tabs or links should be highlighted on visiting page.
    
14. Mouse over effect should be there on the buttons. It enhances the look of the site from design perspective.
    
15. Place “Top” icons or links in bottom of the long content pages to go on top of the page in one click. It saves time in scrolling the page.
    
16. Effectively use the page real estate.
    
17. Use Ajax for increasing the interactivity on the site.
    
18. Organize and divide the primary and secondary links and place in correct position, so that visitors will follow right and correct path.
    
19. Avoid broken links. Make sure that they do not occur on your website. Concentrate on the link architecture.
20. Don’t repeat your titles and page headings. Page headings are instrumental in focusing viewer’s attention. Using the same headings will make them think that the information being provided is the same. This will decrease viewer retention.
21. You should make sure that the content and the page headings are grammatically correct. Incorrect grammar and syntax will reflect badly on the web site.
22. User Interface works consistently. Put your buttons in consistent places on all your windows, use the same wording in labels and messages, and use a consistent color scheme throughout. Consistency in your user interface enables your users to build an accurate mental model of the way it works, and accurate mental models lead to lower training and support costs.
23. In Admin Area, near the site logo one link should be present i.e. “Preview Site”.
    Admin can check the updations by one click only.
24. For delete option use trash icon.
    To Activate, Deactivate, Delete huge number of items place checkboxes and select all option.
25. All the related interfaces should be inter-linked.

Posted in Web Usability | No Comments »

Website Accessibility

Posted in Web Usability | 2 Comments »

What is User Interface?

The user interface is a web page of a site. It consists into different sections mainly like logo, header, top navigation, main image, left panel, introduction text, featured images, submission forms, bottom navigation, copyright, etc..
The users interact with these interfaces to get information from the website.They give command by clicking menu buttons or submitting forms.The user interfaces helps in explaining the flow of any website program or company business. The poorly designed interfaces adds very little value to any business program. The website also can’t generate leads if interfaces are not designed effectively. It should be user-friendly, easy to navigate, interactive, use color scheme as per the industry type and visually impressive. The homepage should be designed completely by placing all main information, navigational links, intro text, highlight latest happenings, main products as per the project type, so that users will not leave the site frequently.

The user interface should include total user experience which includes the aesthetic design with good color scheme, impressive images, useful content, call to actions, simple navigation that easily explains the business logics, encourage first time visitors and convert them into leads.

Posted in Web Usability | No Comments »

Power feast: 31 most basic SEO factors you can’t afford to overlook

In the dynamic world of SEO, where there are so many small and big things that contribute to your website’s Search Engine friendliness, it is so easy for even professional SEOs to miss out on few of the factors. So as to make sure that there is less SEO skipping and your website is fulfilling Search Engine’s basic requirements, I have compiled a really simple and most basic SEO checklist that will help you to be a little more confident about your SEO campaign. This post is a little long, so to make it more interesting, we are also serving some mouth watering snacks like – beer, chocolate, Energy drinks and what not. Relax and enjoy the feast:

1. If you haven’t booked a domain name yet, make sure you have your main keyword in it; people will link to you using your domain name as anchor text and hence giving a boost to your ranking for that particular keyword.
2. To begin with, make sure that you run a Google Adword Campaign to know the most convertible keyword theme for your website.
3. After the final keyword research, use this data to write unique and click-enticing title and meta description tag for each page. 65 characters in title tag is the maximum amount that will display in the search results but a little longer won’t hurt either. Keyword in the title tag is one most important factor you can’t afford to ignore.
4. Make sure that you haven’t overused keywords on the body copy; keyword density is a thing of past, Search Engines now use Latent Semantic Indexing instead.
5. Use keywords in alt and title tag of every image on your site (without making it look spammy).
6. Use H1, H2, H3 tags in your keyword headings. Use only one H1 tag per page with the most important keyword in it but you can use as many h2, h3 tags.

   

7. Use bold or strong tags to highlight the most important keyword.
8. Make sure all the internal and external navigational links have keywords in the anchor text and not just ‘click here’ and ‘learn more’. It gives a boost to the internal linking. You may even consider using tag clouds on your website for better Internal linking.
9. Be selective while submitting links to directories otherwise you may spoil your link profile in pursue of easy back links.
10. Use a robot.txt file to stop Google bots to index the unwanted & duplicate content.
11. Use Google and static sitemap and don’t forget to update it time to time.
12. Use keywords in bread crumb navigation.
    

    

13. Make sure you have a customized 404 error page. To make this task more interesting for you, check out these cool 404 error pages. (But please don’t forget to put a static sitemap or site search on your error page).
14. Implement Google Analytics and feed burner to monitor website stats.
15. Minimize exit links from your landing page.
16. Do your host’s IP analysis especially if you own a family of websites.
17. Write your company’s local address with your important keyword somewhere in the heading on the website and submit your website to Google local business Center for optimizing your website locally.
18. Make sure that there are no broken links. Use Xenu.

    

19. Every time you add a new blog or article (auto) ping atleast Google, Yahoo, MSN and technorati.
20. Keep your website and page URLs as simple as possible. Search Engines hate non-sense dynamically generated URLs like http://www.crapurl/114/cat223 or http://www.crapurl/view_item.php?listing_id=477443&pic_id=2. Use URL masking.
21. For usability follow these simple design principles.
22. Don’t try to rank all the pages of your website. Concentrate on five of them and keep cannibalization factor in mind while doing the internal and external linking of your website.
23. Be creative in your link building approach. One solid idea can fetch you a million dollar worth links.
24. Keep your website link worthy.

    

25. Domain age matters a lot. You can’t do any thing about it but you have to be patient. (I wish there was some aging formula for websites like anti-aging cream for women)
26. Link popularity of the website. Use Yahoo for this as it presents more accurate link profile of a website than Google.
27. Additionally, use misspelled keywords in the keyword meta tags. It certainly helps.
28. You don’t want to waste your link equity/link juice to get wasted on ranking pages like ‘request for proposal’ , ‘privacy policy’, ‘shipping policy’. It’s better to use no-follow tags on such pages.
29. Make sure you update your website content as often as possible. This improves your website bot-crawl frequency.
30. Have your website W3C compliant, it will give your website some definite future benefits.
31. Test your website on text browsers like lynx.

    

PS: These are the most basic SEO factors that I can recall at the moment according to current Big3 Search Engine algos. If you think I have missed out on any of the important factors, please feel free to add them as comments on this post.
PSS: Images courtesy: gsinc.co.uk. I hope you enjoyed the feast and don’t be surprised if you find any of these products being sold at your nearest grocery store. Cheers !!

Posted in General, SEM, Web Usability | 12 Comments »

Let’s get it right: 11 most essential design principles

Looking back at the past RedAlkemi blog posts, I think we have talked enough about SEO/SEM and I feel obligated to deviate to some thing that excites me as much as SEO does – Website Design. I understand how frustrating it can be for a website designer to limit his creative ability to create a website from search engine point of view. And likewise, it can be a real nightmare for an SEO, to optimize a website that is poorly designed and is a member of ‘usability hall of shame’. So let’s talk about some most essential principles of website designing (& usability):

1. Precedence (Guiding the eye)
Precedence is one most important characteristic that a successful website should have (if a high bounce rate is not an issue for the website owner). I believe that it is in the hands of a designer, how he controls the eyeballs of the visitor on his website. Yes, it depends on the requirement of the website owner, how much weight he would like to give to a particular section of a website. The basic rule here is – first thing should come first – for example, In most cases, company logo (and not login window) is where the visitor should immediately see, as he opens a website so that he knows, which website he has arrived to. This just doesn’t stops here, as it is the duty of the designer to guide the visitor’s eye through a sequence of steps. For example:

Following design functions control the visitor’s eye balls:

• Position – where on the website the element is located?
• Color – If the color is bold or subtle?
• Contrast – Important function in Web 2.0 layouts
• Size – Bigger the object, higher is the precedence (unless every thing is big)
• Design Elements – Arrows, flipped sticker icons etc

2. Breathing Space
So many times I come across website designers, who think website designing is all about utilizing every square pixel of the screen area by filling it with maximum stuff. But I feel that, more vacant space you leave on the screen, easier it will be for you to divert the eyes of the users on the intended objects. To create space, you can compromise on vertical scrolling (not horizontal off course). Following are the important elements of spacing:

• Line spacing
  Remember that eyes are more comfortable reading text lines with medium line spacing. Too little and too much of line spacing can equally hamper the text readability and precedence as it may spill the visitor’s eyes. You can control the line spacing in CSS with ‘line-height’.
• Padding
  With few exceptions, the text should never touch surrounding elements like table borders, images etc.
• White Space
  White space is a technical term and when I say white space, it doesn’t necessarily has to be white in color. ‘White space’ refers to empty spaces on the screen. Expert designers use this white space to give a balance to the whole design lay out and ample white space makes the design look more elegant. To understand this art, open some fashion magazine and see how the publishers use white spaces to highlight the products in car and watch Ads.

3. Navigation
This is the design aspect closest to usability of a website, when the user gets lost on the website, wondering where to go? Make sure that this doesn’t happens to your visitor.

• Navigation: Buttons and other navigation items on the website should be easy to find, identify and understand.
• Orientation: ‘Top’ buttons, bread crumb navigation, back button, sub headings, sitemap and site search are some important elements of healthy orientation on a website.

4. Worst Case scenario:
Consider these factors in advance, so as to avoid end moment surprises (some real unpleasant ones )
You might pick a dazzling font for your copy, but is it available on the user’s computer, what if not? Your design looks amazing in 1100px, but is it creating horizontal scroll?
What happens when the user resizes the window? Did you forget to keep your design center aligned?

5. Typography
This is how you can control your body copy:

• Font choice : Make sure, you are using standard HTML fonts. These fonts can make your layout look elegant, retro, flashy, professional, festive etc.
• Font sizes: Even though small fonts look more sophisticated, they are hard to read. So use a readably big font size. Modern Web 2.0 layouts allow you to use big fonts without looking ugly.
• Spacing: I have already discussed this above.
• Line length: To understand line length, if you open up a newspaper, you will notice that text is presented in small lines and multiple columns. Avoid elongated sentence lines.
• Color: Avoid extra bright, too high or too low contrast colors
• Paragraphing: Stick to left aligned text.

6. Usability

• Adhere to standards: To avoid confusions, adhere to the web standards and do the expected. For example, don’t underline a letter, if you don’t want to link it; as most people tend to expect an underlined word to link to some other page. Doing otherwise can cause confusions.
• Action blue print: Make a list of all the tasks that your customer might want to perform on your website. Then look for ways to make these tasks easy for the visitors to perform in minimum steps in order of importance of each task.

7. Alignment
Alignment doesn’t necessarily mean that the design elements should be in a straight line, but it means every thing should be consistently placed on the page in a set pattern. Aligning will make your design look more ordered and digestible.

8. Clarity (sharpness)
Keep the design sharp – pixel by pixel.

• You may want to use ‘sharp’ text in photoshop.
• Ample contrast to keep the borders clearly defined.

9. Consistency
Consistency means, you must have a clear theme in your mind before starting the design, so that you can select colors, font, buttons, spacing, illustration, pictures etc. that compliment to the website theme. An inconsistency in the design will make it look unprofessional and low in quality. So make early decision and stick to them. Smart CSS will help you achieve this consistency. Even if your website design is bad, a consistent website design will still look better then an inconsistent website design.

10. Design Maintenance
Do the design elements cross each other too much? When you make a change in one ‘div’, do the adjacent ones collapse? Keep all the design elements separated from each other (as much as possible) as the designs with the elements related to each other are easy to build but at the same time are very hard to maintain.

11. Use CSS smartly
Use CSS as often as possible, specially in the case of large websites. If you are to use buttons at multiple places of all the pages on your website, you may want to make a button in CSS and attach it to every ‘DIV’ where you want to place that button. Yes, by doing this you compromise on flexibility of these buttons, but you save a lot of time.

Posted in Web Design, Web Usability | 4 Comments »

The MaGic of Lexical clouds: for higher rankings and enhanced user experience

Web BuzZ-BuZz, Web 2.0 BuzZ-BuZz
There has been so much of buzz about Web 2.0. Many webmasters have embraced weblogs, mash-ups, RSS feeds, bookmarking, social networking, tag clouds, wikis etc. But what excites me most about Web 2.0 are Tag clouds that so many website owners are using these days, for higher website rankings and an even richer user experience. For those who haven’t heard of these lexical clouds before, this is how a tag cloud for flickr looks like:

There are so many websites today, that are using tag clouds but the reason why I mentioned only flickr is because flickr was the first Web 2.0 website to use this concept successfully. Check out the tag cloud for Technorati:

Tag clouds, for better user experience
Tag cloud according to Wikie is – “ A visual depiction of user-generated tags used typically to describe the content of web sites. Tags are usually single words and are typically listed alphabetically, and the importance of a tag is shown with font size or color. Thus both finding a tag by alphabet and by popularity is possible. The tags are usually hyperlinks that lead to a collection of items that are associated with a tag thus describing the item and enabling keyword-based classification and search of information”. Flickr says – “Tags are like keyword or category labels, and they can help visitors find items which have something in common“. The simplest way to explain a tag cloud is that it is a Web 2.0 way of categorizing, organizing and navigating your website content with keyword links.When a user saves, bookmarks or votes (what ever they may call it) for some blog post, picture, video etc on a web 2.0 website like flickr, technorati, del.icio.us etc, he/she has to enter a keyword that the user thinks best describes it.

If you look at the picture above, you will notice that each tag (or keyword link) have different font sizes. The font size of these tags depend on the number of times keyword has been used to tag that an item. More the items are associated with the keyword, the more it is popular and bigger will be the size of the font. So it’s an intuitive means of navigation on a website.

When the user clicks on a tag, he/she is navigated to a tag page which on flickr looks likes this:

The tag page comprises of the most recent items tagged by visitors using that particular keyword they have clicked on. Please note that these tag clouds are not necessarily the only way to reach to the items on the website, but they serve as an alternative & intuitive way of finding them. Most often then not, you will also find the item’s tag adjacent to the item, clicking on which will take you to the other items tagged using that keyword tag. ‘Related tags’ are the other common tags which contain that same item.
Tag clouds: not just usability, it’s also an amazing SEO tool
So you still have doubts, if you should incorporate these lexical clouds on your website or not? I will give you one more good reason to do so – With Tag clouds, you consolidate your website’s internal linking which means you have better strategical control on your link equity (juice) and since the anchor text of these tags is extremely keyword rich, it boosts the ranking of your website or weblog far more than what conventional navigation bar does and hence increases the website’s ranking for significantly larger variation of keywords. You yourself will be surprised to see the keywords tags (including long tail keywords) that people will associate your content with (even wordtracker would have failed to find those). Bloggers will be glad to know that WordPress 2.3 comes with tagging in-built. Ultimate tag warrior is an awesome plugin to create a colorized tag cloud or heat map.

Other Tag cloud resources:
How to make Tag clouds using PHP, MySQL, CSS
Tag clouds using ASP.Net

Posted in SEM, Web Design, Web Development, Web Usability | 1 Comment »

Having landing problems with your website? Try these 11 Power tips on Landing Page Optimization

Look at the picture on the right. Is this what happens to your visitors, when they land-up on your page from a Search Engine or your PPC ad? Landing page of your website is where you persuade visitors to perform a pre-defined action on your website. You may also take it as persuasive on-page copywriting, to make a visitor do what you want him to do. I find it ironical to see people wasting their landing page space by offering the visitors ample reasons to quit, rather than making them perform the ultimate action on your website. You should always look to concentrate to make every piece of your Real Estate count, while enabling your site to deliver optimum ROI on the website development process. Concentrate on writing, pushing and benefit rich headlines which clearly state the visitor – ‘What’s in it for me?’ Consider the following power tips for landing page optimization, they can increase the conversion rate of your website many folds.

1. Eliminate irrelevant navigations, sign-in boxes, and other reasons for the visitor to quit from your landing page.
2. Add your best testimonial or a testimonial from your most renowned client. Don’t forget to match the testimonial to the benefits. If your client allow, you can increase the impact of the testimonial by featuring a small, nicely taken picture of him/her along with the testimonial, this will make the testimonial look more natural and trustworthy
3. Consider multiple column format to increase the flexibility to add more features without distracting the visitors from the main call to action.
4. Use window pop-ups to provide important information like ‘privacy policy’, ‘satisfaction guaranteed’ etc to the client on the same screen without making them leave the landing page.
5. When it comes to writing the copy of the page, the content should never sound like – “what I/we give you”, but it should be say more about “what you get?”.
6. Use graphics intelligently to add as many call to actions as you can in different formats without showing your ‘desperateness to sell’ to your visitor.
7. Don’t give your visitors too much options. Only feature your best two or three offers on the landing page so that you don’t end up confusing them. To accomplish this, you need to perfectly understand your target segment (about what they exactly want?).
8. If your target is to make a client fill up a form, you’d be surprised to see how much, adding a prominent link – ‘we value your privacy’ can increase the conversion rate of your website.
9. If you are offering a guarantee, make it as prominent as you can with the help of relevant text and graphics.
10. In the offer, tell people precisely, how much they save in dollars (and not in percentage).
11. Internet Marketing is mostly about impulse buying. So you should look to convert the visitor’s interest that brought him to the landing page into an impulse and then to convert that impulse instantly into the desired action.

Thumb rule to maximize your conversion rate is to test, test & test (A/B testing precisely). I highly recommend you to refer to this Google guide which will actually help you to test your landing page and also increase your ad’s CTR at the same time. Wishing your website visitors, a very safe landing next time!

Posted in Web Usability | 1 Comment »

Maximize golden areas on your website – track customer’s eyes

Several website experts keep conducting this “eye tracking research” to find the right spot where the customers or website users always focus on. Eye tracking is used in virtually every kind of marketing – TV ads, billboards, product packaging and web sites – to determine what works and what doesn’t with consumers. What is this eye tracking? Is it really that important? Lets try and answer some of these questions.

What is eye tracking study?
Eye tracking is the process of measuring either the point of gaze (“where we are looking”) or the motion of an eye relative to the head. An eye tracker is a device for measuring eye positions and eye movements (definition source: Wikipedia).

In simpler words, the trackers record the areas (via heat sensors), where the the visitor’s eyes pays maximum attention. The image above shows the trends on search engines, which is more or less same for a website. The area on the top-left is called “The golden triangle”. This is the area which gets maximum attention

Is eye tracking analysis really that important?
Being involved in usability study and conversion improvement, I can say that this study makes a lot of sense and could help us define the important and sellable areas (or spots) on the website.
While we are trying to start a service or add a new package to the website, or simply want website visitors to focus on a thing, you should place it strategically on the area considered as the golden spots on the website. While designing the website, one could keep these things in mind to leverage certain areas to boost sales.

The eye tracking pattern may be based on any or all of the following:

• Individual perception
• Interest
• Need
• Age
• Education level
• Computer monitor
• Browser settings and others reasons etc.

It can help us find the following:

• Effectiveness of our website design
• Whether we are using the right areas for promotion
• If our users are able to find what they’re looking for
• The right content is used at the right spots
• Effectiveness of banners
• If search boxes are noticed at all

The results of numerous eye tracking studies enable web site designers and owners to optimize site pages for maximum impact and “stickiness”. Lets face it all that matters in an online business is NOT how busy you website is (traffic), but how many of them actually become customers. All versions are good as long as it is CONVERSION (hear the registers ringing:))

Posted in Web Design, Web Usability | 3 Comments »