Blog

Website usability guidelines – Navigation and Hyperlinks

 

Website navigation

Navigation is a key component of a website. It’s like a road map to all the different areas and information contained within the website. It affects traffic and search engine rankings. It also affects conversions and user-friendliness.

Tip 1

Ask yourself a question: Can your user easily locate the primary navigation area? Having the navigation in an area where people expect it makes your site easier to use. The navigation isn’t the place where you want to show off how innovative you are. Moreover, the navigation should be consistent on every page within the site (location, size, colors).non standard navigation

Tip 2Convenient number of items and levels in the menuLarge number of items and levels in the menu

Limit the number of items in your menu. It’s good for visitors and search engines. The number of items in the menu should not exceed 7 items and should only be 3 levels deep.

Compare these examples to see the difference.

 

 

 

 

 

Tip 3

Is it clear for your user where he currently is in the navigation? Indicate where the user is by marking a proper navigation element. Breadcrumb navigation might be very useful as well.

image

Hyperlinks

A hyperlink is a reference to data that the reader can directly follow either by clicking or by hovering. This element can link to another place in the same document or to an entirely different document.

Tip 1Nicely presented and descriptive links

Make sure that the links on your website looks like… links. Or the other way around – make sure, that items, that are not links are not confusing your user by looking like proper ones.

Tip 2

Use descriptive link titles, avoid links like: “read more’'”, “here”, etc. That’s particularly good for SEO.

Tip 3

Clearly indicate what will happen if the link is doing something else than simply redirecting to another page (e.g. if it links to PDF documents or is triggering videos).image

Tip #4

Check if the clickable area is large enough to use it easily on multiple devices. Especially on mobile devices.Links that might be too small to use on mobile devices

Are you thinking about having your own website? In this serie of guidelines we will give you an overview of all the essentials when setting up a new website.

Read also: our usability guidelines about  standard websites elements and forms 

Technology Technology

Op 22/06/2015 door Lukasz

Website usability guidelines - forms

About forms

Forms are a very important part of the page. In general, a form on a web page allows your user to enter data that is sent to a server for processing, for instance to contact, register, provide shipping or credit card data etc. Usually, it consists of a combination of interaction elements like input text fields, selection fields, radio buttons and checkboxes.

Tips to improve forms usability

Tip #1

If you don’t want to annoy your users filling in a form on your website, you should clearly mark the required fields, validate the input values as soon as possible, highlight problems and explain what was wrong. How can you achieve that?

Form labels, required fields, validationUse client validation on top of the server validation. Thanks to that, the user will be informed while filling in the form that something is wrong. When something is indeed wrong - clearly show where and what is the problem by highlighting this field or label and adding a meaningful explanation.

 

 

Input data formatting and masksTo reduce the number of mistakes, explain what type of data is required. You can add formatting examples or even use a mask.

 

Elements grouped in logical way

Tip #2

Consistency. Keep all fields’ labels at the same place (all above, or all left, closely to the field), so the user is sure where to provide the data. Keep the same placement and coloring of cancel and submit buttons through the site. Make sure that a submit button is easily distinguishable. You don’t want users to miss-click cancel/submit buttons.

Tip #3

Group the elements in a logical way. If you are asking for contact details, ask for all the data in the same block of input fields.

 
 
 

 

Tip #4

Allow your users to navigate using only their keyboard, not every user prefers to use his mouse to jump around fields.

Form navigation

Moreover, it simply might be faster to use the keyboard navigation while filling in data. Make sure that using the TAB button will allow them to fill in data in a logical order and the ENTER button will allow them to submit the form.

 

 

 

 

Ask for confirmationTip #5

Prevent doing things by an accident.

The user tries to close his browser or clicks on the back button while having entered but not submitted data? Let him know what is going to happen and ask for a confirmation.

Disabled submit button

 

How long does it take to submit your form? Consider disabling the submit button to prevent multi-clicking and multi-submitting your form.

 

Tip #6

Final confirmationFinally, when the user filled everything in correctly and submitted the data – confirm that. Make sure that user knows that the process ended up successfully. There are several ways to do that. It can be a a summary page, a pop-up window etc.

 

 

 

Are you thinking about having your own website? In this serie of guidelines we will give you an overview of all the essentials when setting up a new website.

Read also: our usability guidelines about  standard websites elements and navigation

Technology Technology

Op 15/06/2015 door Lukasz

Website usability guidelines – standard website’s content

 

Are you thinking about having your own website? In this serie of guidelines we will give you an overview of all the essentials when setting up a new website.

First we’ll guide you trough the standerd website’s content.

Pages

This may sound obvious: every website should have a homepage. Explain there who you are and what you do, but keep it short and simple. This page should be easy and quickly digestible. It’s a good idea to include a one sentence tagline.

Put only necessary data and tools on the particular page. Make sure that the page is not overwhelming. The goal of each page should be clear for your page visitors.

Try to avoid using elements that look like an advertisement or may somehow mislead your visitors - this will only annoy your users.

Compare the examples below to better understand what we mean:

Nicely designed homepageOverwhelming website

‘About us’ and ‘Contact us’

The ‘About us’ section should explain who you are and give your users an overview about the company and links to relevant details about your products, services, company values, business proposition, management team, and so on.

The ‘Contact us’ section should include all contact information (such as a phone number, email adress, mailing address, opening hours…).

Both should be easily accessible – these links can be placed in the header or the footer. So they are accessible from every subpage by just one click.

Company logo

Place the company name and/or logo in a reasonable size on a noticeable location. Make sure that clicking on the logo redirects the user to the homepage. You can also consider customizing your favicon. This will make your page look good on a tab bar.

Styles and Titles

Styles should be used in a consistent way. Headers, paragraphs etc. should be clearly distinguishable within the site.image

Use meaningful titles, by adding keywords and avoiding linking words. The <Title> tag content is presented in the search results and the tab description in the browser, so you should avoid starting it with “Welcome to our…”. The <H1> title is visible on the page and its content should correspond with the <Title>. Below you can find an example of meaningful and meaningless titles:

image

image

Search

The search bar is available on almost every page. But there are some rules that should be applied. The search field should be placed in a clearly visible place (usually the top right corner). There should be a search button or an icon placed next to it to trigger search engine. Besides that, the search should be triggered by the Enter keyboard button – that is very handy for your users. The input field itself shouldn’t be too wide cause then users tend to search for whole sentences instead of keywords, what can result in less relevant results. A field box size of 27 characters would accommodate 90% of the queries.

clip_image007

As the initial search should be straightforward and simple – it should be possible to narrow search results using filters, facets, etc.image

imageWhat about the search results? First of all, results page should indicate what was searched and it should be easy to edit and resubmit the search. The results page should present results in clear blocks, with a teaser of the article that it points to, where the link will lead user, what kind of result it is, etc.

 

Error pagesclip_image014

Avoid presenting the technical details of an error. This is considered as a website’s vulnerability and might be used by hackers to attack. The error page should be customized and helpful. Inform your user about problem but also lead him to a solution.

 

Read also: our usability guidelines about  forms and navigation

Technology Technology

Op 14/06/2015 door Lukasz

Load testing in the cloud

Visual Studio performance and load testing capabilities

Visual Studio offers performance and load testing capabilities since 2005. It allows you to record series of interactions simulating users accessing your website. All executed requests are recorded one by one and stored in your performance test. Then you can scale that up to simulate tens, hundreds or thousands of users accessing that site concurrently during the load test. As simple as that.

However, the biggest challenge is to setup and maintain an environment in order to simulate this user traffic. Basically, it’s a set of virtual machines or physical machines that can be used to generate virtual user requests.

Using Visual Studio Online

Cloud based load testing services are now available as a part of Visual Studio Online. It takes the advantage of elastic scale offered by Windows Azure to generate the desired traffic requirements. Firstly, dedicated virtual machine that hosts test agents is assigned for a particular run. Then test agents simulate the load against your web site by creating the virtual users and executing desired actions. Moreover, you can manually increase the number of agents in use, depending on your load test.
How can you configure your project to run load tests in the cloud?

  • Connect to Visual Studio Online
  • Edit your local test settings:

clip_image002

Now you can run your tests. While executing tests, you can monitor the performance using the performance graph and the throughput graph.

clip_image004

clip_image006

When the load test is finished, you can download the report and analyze report.

Pricing

The price calculation is done based on the virtual user minutes (VUserMinutes). To calculate how many VUserMinutes your run will use, you need to follow this equation:

VUserMinutes = (Maximum User Load for the run) * (Duration of the run in minutes)

Each Visual Studio Online account includes 20,000 VUserMinutes per month for free. Additional VUserMinutes are calculated as pay per use service:

clip_image008

How do we do load tests at Orbit One?

We are using both: Visual Studio and Visual Studio online for performance and load test purposes.

  • Visual Studio Ultimate is used by QA department to create, maintain and trigger performance and load tests.
  • Visual Studio Online project is used as a repository.
  • Visual Studio Online is used to run tests in the cloud.

Thanks to that we can easily create and maintain tests. We have access to the performance lab in the cloud in (almost) no time with just one click and this doesn’t require any maintenance from us.

Technology Technology

Op 20/04/2015 door Lukasz

How to configure your Azure environment to meet the performance and load goals of your web application

About Azure 

Azure Websites is an enterprise class cloud solution for developing and running web apps. You can stand up a website on Azure in seconds, without having to manage Virtual Machines, network load balancers or deployment infrastructure yourself. All of these capabilities are built in and provided by the Azure Websites service.

Scaling 

Scaling options 

There are two options of scaling: 

  • Scaling Up – aka Vertical Scaling (Increase resources capacity within existing node). It means going from a small dedicated instance to a medium one and to a large one.

  • Scaling Out – aka Horizontal Scaling (Increasing resources capacity by adding nodes). It simply means going from 1 machine to 2 machines all the way up to 10 machines.

Autoscale 

Autoscale helps you to survive load peaks. It allows you to grow resources with incoming traffic. If it’s configured correctly – it will save you some money. The reason for that is the fact that it will never use extra resources unless needed. 

How does it work? You have to specify a range of instances that can be used and some metric criteria defining when extra instances can be used.

Azure Autoscale options

Figure 1: Azure Autoscale options

Service Tiers

The Azure Websites service is available in Free, Shared, Basic and Standard editions. 

  • Free and Shared - The Free and Shared tiers are ideal for experimenting with the platform and for development and test scenarios. This article will not focus on those.

  • Basic Tier - Designed for web apps with lower traffic requirements, and which don‘t need more advanced autoscale and traffic management features.

  • Standard Tier - Designed for production web apps.

Pricing

 Available plans and their features with estimated pricing: 

Figure 2: Azure pricing plans

How to select the best plan for your web application? 

You can clearly see that each ‘better’ plan is twice as expensive. How to avoid unnecessary costs then?  

  • Design and develop a set of thorough web performance tests, which will reflect the users visiting your page. Then create load tests based on your performance tests.

  • Execute load tests for the maximum number of users that your web application was designed for.

  • Compare the received results with the expected results

First thing to check are the results of performance tests if the received response times are meeting your expectations. 

Check the statistics provided by Azure portal - what was the memory and Cpu percentage usage. 

Memory percentage and Cpu percentage usage

Figure 3: Memory percentage and Cpu percentage usage

History of resources usage

Figure 4: History of resources usage

 

If the received results are not satisfactory – reconfigure Azure and execute the same set of tests again. Of course we assume that the web application was developed according to the performance standards. 

How do we do it at Orbit One? 

We create performance and load tests using Visual Studio Ultimate. We execute load tests using the performance lab in the cloud offered by Visual Studio Online. 

Based on our own experience you can receive better results by investing in Scaling Up than Scaling Out. It’s simple: The tests that we have executed, demonstrated that it’s more efficient to select an instance with more resources than to add another instance of the same level. It’s also a good idea to use the auto scale option. However, it’s important to check first how your web application will react at the moment of the switch.

Technology Technology

Op 19/03/2015 door Lukasz