10 Simple Pieces of Advice on the Usability of Websites

 
By Sibers Technical Analysis Specialist Tatyana Medvedeva
Accompanied by Sibers User Experience Designer Eugene Odnoval

 

Long gone are the days when users were satisfied with a basic, working website. Users now need, not just the basics, but also a site that is convenient. Therefore, it is very important that you pay strong attention to your site’s usability, keeping in mind the user’s perspective. After all, even if you have a great design, if the information is not easy to acquire, the user will not return to the site.

So, how do you improve your website’s overall design to create the best possible user experience? Following these 10 simple tips can help accomplish this mission, and keep your users happy.

1. Use disappearing explanations in the text fields. For better usability, an explanation should disappear when the user clicks on the field, leaving the text field available for the user’s comments.
2. Avoid pop-ups. You should avoid advertisement pop-ups whenever possible. These items can be detrimental and may even force the user to leave the site. Instead, place all information and ads directly on the page layout instead of designing it to pop up when the site is opened, or the user’s mouse hovers on the page.
3. Post the publication date. Users want to know how current your information is; this helps to increase credibility and relevancy. It is always a good idea to display the date of your postings on the site.
4. Enable search functionality throughout the site. One of the most serious and common mistakes is a lack of search functionality. The availability of a search box on the page makes navigation on the entire site much more comfortable.
5. Disable automatic music intros and audio ads on the site. You should definitely give your users a choice whether or not they choose to play audio files.
6. Clearly indicate links. The user would appreciate it if it is clear what areas can be clicked and what areas cannot. Links should be highlighted in a different color from plain text, and they should also be underlined. This makes the page appear more pleasant to the eye, making it more readable, and user friendly.
7. Remember breadcrumbs. Of course, this issue has nothing to do with food, but is essential for site navigation. Visitors like to know where they are, where they can go, and how to keep from becoming lost when moving between pages.
8. Avoid deadlocks (windows can’t be closed, icons don’t work, everything freezes). If your site has a bug, you absolutely need to fix it. Of course, testing all the buttons and links should have been done in advance, before launching a live version; however, if you plant deadlocks as a strategy in an effort to trick and force the user to enter extra data (for example, you make them register for something), you can pretty much guarantee the user will never visit your site again.
9. Avoid animated ads. A lot of huge banner ads blinking with different colors and changing their size and location tend to distract and annoy even the most discreet user. Say “no” to blinking texts, and your users will thank you.
10. 10. Give your contact information. Providing contact information in a noticeable place helps visitors easily get in touch with you, as well as provides a feeling of trust. These simple details, such as your contact address and phone number will make you appear honest and friendly. Additionally, you can gain feedback, which many users like to view before deciding to apply, or contact you.

This list of recommendations is limited to the top 10 most common pieces of advice for site usability. More subtle issues are equally as important and can be discussed at a later time. That being said, if designers adhere to at least these basic points, visitors will enjoy their experience on your website and will appreciate the convenience of a user friendly platform.

8 Websites You need to Stop Building

Fabulous comics, I think I will be sending this link to anyone on Elance dreaming to create a Yahoo clone: http://theoatmeal.com/comics/websites_stop

Knocking bounce rate and rising average time spent on site

By Alex Kachko, Marketing analyst.

Today we will discuss the man’s natural obsession by reducing the Bounce Rate and increasing Average Time of visit on the Site/Page. I want to show you how simple it is to understand that something went wrong on your website and I’ll provide a piece of advice that must improve the key metrics of any website.

Let’s imagine the business of manufacturing handmade paper planes. I called it Paper Jets or shorter pJets. And for promotion we have launched a website.

Usually the first edition looks like the one on Fig.1 (all images on this page are clickable and zoomable). There is clear promotion text that positions our business and a “Submit offer” button. This is the basic thing we have to keep in mind – self positioning and a call to action message.

Ok, we made the first step. But our test website looks poor. People will bounce such web page because it is boring. Therefore it is time to do some makeup and demonstrate your experience. I added a header with flittering paper planes and simple layout of base pJet(Fig.2). I called this step “Suite up and Show up!”

Our home page will grab attention better if we use one of the key successful strategies of communication with people. For example, offering some goods for free. I decided to suggest a feature of printing a base pJet drawing, see Fig.3. Be generous and people will be grateful.

The last piece of advice will be – surprise them! Show people something exclusive, something that they will hardly find anywhere else. I put a demonstration movie of the special pJet model that can perform a “Nesterov Loop”, or a “Dead loop”. And now the homepage of our website paperjets.com looks pretty filled, please don’t confuse it with thepaperjets.com – the website of one indy-rock musical band.

This experiment I created is based on real experience. And these recommendations could be applied to any website. But remember that you have to fill your website with content that is interesting for your visitors and potential customers, don’t concentrate on just your own perception. Of course there is a lot more techniques to hook people for a long time and convert guests into customers (subscribers, readers, members etc.). If you know any other methods, please share your wisdom in comments.

Log off the web: save the planet

A new fun project is live. Check how you destroy the Earth by browsing the internet:

www.greenormachine.com

Custom GoogleMaps integration

By PHP Developer Alexey Zabaykin

How to list clients’ feedback in a way that shows that you have many clients and they are spread globally?

Thanks to the huge amount of feedbacks, our previous edition of References page turned to look like the Star Wars story-telling.

We decided that Google Maps will do the job. I should note that the site engine, developed by Sibers, was created using Sophit framework. This engine is very flexible and pretty simple for creating administrative solutions and fully separates HTML templates from PHP code. That’s why creation of PHP administrative part doesn’t cause any problems and webmasters enjoy a huge area for professional activities.

The next point was to research the necessary interactions with Google Maps. There is a lot of abilities provided by Google to change types of appearance and various features. So, to escape the mess, I investigated a bit in order to create the optimal solution. Thus, here is a list of crucial moments of creating our References page.

Backend

Simply put, we have to insert locations and link them with needed information. Administrator has two possibilities to manage the locations: automatically, through the function

geocoder.getLatLng()

- looks for the place by name only – and manually with function

GEvent.addListener(map, ‘click’, mapClick)

- sets latitude/longitude by a click on map; coordinates then are transferred into the form by

mapClick function.

Displaying

Ok, the administration form is done. Now, in order to display feedbacks on the map, we pass them to javascript in the cities array and Google Maps start to populate with our thankful customers. For further interactivity, let’s make the bubble images change when mouse hovers it.

GEvent.addListener(marker, “mouseover”, function() {
marker.setImage(pic_hand_up.src);
});
GEvent.addListener(marker, “mouseout”, function() {
marker.setImage(marker.getIcon().image);
});

And one more tweak, image preloading:

var pic_hand_up = new Image()

Now the little green person gladly greets us and does not disappear during first loading. The customer reference can be quite large, therefore its content dynamically loads by clicking on the icon:

_getFullReferences(city_id)

Also, references with phone numbers are displayed immediately below the map. When clicking on the address line, the map centers on this location via method map.setCenter()

Time to check it by yourself: http://www.sibers.com/portfolio/references/

Our input for the global start-up conference

A startup company ExchangeP led by our friend and client Charles has been selected for TechCrunch50 from over a thousand of other applicants. Charles and his partner Saul presented their company and business plans to such fantastic people as Kevin Rose (Founder, Digg), Roelof Botha (Partner, Sequoia Capital), Don Dodge (Director of Business Development, Microsoft), and Mark Cuban (Founder, Broadcast.com, Owner of Dallas Mavericks), as well as to 1,700 of the Conference attendees, and millions of on-line watchers all around the world.

ExchangeP helps you think big and imagine a future of internet and global markets. You can tell a new story of Web3.0 with ExchangeP. Learn more about it at its TechCrunch50 profile page.

We have spent all night watching Charles’ presentation in San Francisco and congratulate him on this true success!

Download here official Press Release about ExchangeP.

Four Google Adwords Trends

We have been using Google Adwords for site HireRussians.com for more than 2 years. Now it is when ads are optimized and run with only some small everyday tweaking.

Each month, we spend no more than $400. We decided that $400 is the absolute maximum we can pay Google and in fact we haven’t yet had a chance to pay Google in full. The graph below shows our spendings since April 2007 (blue line) and exponential trendline (black).

As you can see, usually we spend about half of the amount we allow ourselves. The next graph shows Adwords conversion over the time.

First of all, check that the blue line almost exactly follows the spendings line of the first graph. If we spend too little in August, there will be not many conversions in September. And check spendings in October and then the results in December. The cycle is usually 1-2 months.

And now look at the black trendline: even though that monthly conversion varies from 5 to 10% (twice!), the trend is very stable at about 7.5%. It means that the site works stably regardless of clicks and costs.

With conversions being stable, the number of clicks on our Adwords ads becomes fewer and fewer:

This chart exactly follows the first one, demonstrating direct relation of Adwords click depending on how much money you spend on them.

However, regardless of that, number of visitors to HireRussians.com is growing:

Having done a lot of work optimizing the site for Google Adwords, we found that we optimized it for Google generic search also. The hardest thing in SEO is optimizing the site for three things: ads, search engine, and… human. Finding a balance between them is our next priority for HireRussians.com.

5 Eras of Applications

By Sibers Flash Team Leader Alexander Nemtsov

Mainframes. Remember the times.

Oldbies remember the times when terminals used to connect to powerful servers and the information was processed by mainframes, a thin client being essentially an input device to display data.

Gradually PCs were becoming smaller and more powerful, and it became possible to process information at work places. Thanks to traditional modern applications.

A huge Soviet supercomputer working at clock rate of 10 MHz – fastest in the 60′s. Now one of our offices is located in a room where such machine used to stay. Image courtesy of Novosibirsk Institute of Theoretical and Applied Mechanics.

Traditional Applications

It is traditional application that we access information through, are entertained by and get new potential for our work. Basically, they are the frameworks of our interaction with the PC. Any problems we might face while working with the computer arise from the way the applications were developed long time ago.

Traditional applications have been serving us faithfully for ages, but they are not absolutely devoid of drawbacks. They are tied to a certain machine and your operating and file system. They need installation, which requires special skills and takes time. Moreover, almost all the results of your work with applications are stored locally on the PC, and collective work with them runs into certain difficulties.

Thus, we have to think over main processes inside the applications. Except doing your work, you have to know something about file types, codecs, drivers and many more things having nothing to do with the task you are solving. Being an expert in your field is not enough any longer, you have to be an expert in computers as well.

Microsoft and Indian software companies are famous for developing software. This picture shows Indian developers at Microsoft. Courtesy of blogs.msdn.com/ie

Web Applications

The Internet changed an average person’s capabilities dramatically. Now we can easily find and use vast digital experience stored in the net. With standards for browsers developing, users can expect any content to be available for use any time and any place.

I realized the possibility of replacing traditional applications by web ones when I saw my friend using Gmail web interface instead of his mail client. He was not an expert in computers and I offered him my help in installing and tuning Thunderbird. My friend thanked me but politely declined the offer as the interface perfectly satisfied all his needs.

Web applications are a nice discovery, but they do not lack some problems, either.

Quite often we use the Internet as a source of information. It can as well be used as an effective tool for entertainment and improvement of our work facilities.

Just like this person in a Soviet poster says “Net” to alcohol, certain Internet users say “no” to desktop software and choose web-based applications.

RIA

Traditional web applications are built up on some well-known standard elements of interface. Hyperlinks, combo-boxes and forms are excellent for creating interactive pages, but unfortunately are not enough for editing images, showing video flow, displaying GPS data or making a phone call. Users are requiring more and more of the interface and make designers and developers provide new ways of interaction with different data and processes.

Rich Internet Applications are notable for providing you with a possibility to do your work in the Internet. The set of tools I need for my work is to be available for me everywhere regardless of the PC type or the OS version. The same refers to my data. All of my working environment is supposed to follow me like a cloud, RIA inherited this idea from traditional web applications and went further.

Unfortunately, we couldn’t find any image of a cloud of rich internet applications following their users wherever they go.

Symbiosis

Multipurpose RIAs are a new generation of applications evolving as a result of web application and traditional desktop application symbiosis.

When the applications and the data related to them are really “on a cloud”, we get radically new capabilities. It becomes much easier to share data or work in collaboration. Such collaboration can proceed either on- or off-line, with the use of audio or video flow and text to supplement the communication.

True RIAs make absolutely unnecessary an abstract concept of a file. Your data is saved and you can search it through. However, you never deal with “raw” files, you work with your “ideas” instead. Such work is much more effective as it focuses on the result and does not require a user to know something about computer processes.

The coral animal lives in symbiosis with small algae and other organisms – just like RIA with desktop applications! Courtesy of coral-reefs.org.

Star Startup

Bringing even the most bold ideas of our clients to life, we are happy to show you a new daring project – StarMashers!

With StarMashers, you can make your favorite stars say whatever you want: from unexpected political statements to shocking confessions of stars’ private life. Whether paparazzi lose their jobs, now totally depends on you – if you don’t see your celebrity listed, just upload their video and words they say, mix it up, add some spice and voila – a new sensation is ready!

Trend Or Treat?

By Alex Polezhaev

Look at this Google Trends screenshot I just captured this snowy Siberian night:

Do you see how accurately the outsourcing trend (red) follows the web 2.0 trend (blue)? Same ups and downs, same general trends: the red line looks just like the blue one was aligned, straightened and leveled.

And I am sure, that’s not a coincidence. New ways for people to collaborate (Web 2.0) demand new ways to develop them (outsource). Ease to launch a startup comes together with ease to find skilled developers. And I have come up with even more spiritual slogan: Web 2.0 is discovering new people out there, and outsourcing is discovering new talents.