Designing the website of Zefxis

We evaluated more than 300 parameters, so that our website becomes more usable and accessible.

Designing for better usability

The website of Zefxis was designed so that it is accessible by everyone and as usable as possible. The usability of a website is of great importance, since it can largely determine its success.

We made sure to check a few hundreds of parameters, which affect usability and accessibility and have to do with the Homepage, Navigation, Forms, Content, Search and Appearance.

Specifically, during the design process, we evaluated and implemented more than 300 guidelines. In order for our work to be as thorough as possible, we used specific guidelines, such as Userfocus's list, usability guru Jacob Nielsen's useit.com, Accessibility guidelines by W3C, while at the same time we implemented a number of rules our design people know well.

Here are some of the most important parameters we evaluated and implemented on our website:

Home Page

• The most important pages of the web site are only 1 click away from the home page. Actually, the Mega Menus we created made it possible for almost every page of the website to be accessible by 1 mouse click.
• The most important elements are on the top, above the "fold".
• There is a search feature. Even though users do not use search on our website a lot, every page, including the home page, has a search box.
• The home page contains good content, which is relevant to what the user will find on the pages inside.
• The link text starts off with the most important word, so that the user can easily understand what the links is about and make her choices faster.
• The navigation area is not visually overloaded and links do not look like advertisements.
• The main purpose of the website is clear on first sight.
• Users realize what website they are on and what it is about really fast.
• It is very easy for the visitor to change the language of the website, in any web page.
• The website contains useful graphics that have a meaning.
• The menu items are placed by the most logical order, the one a visitor would expect and the one that is usually used in a typical online navigation.
• The website is organized properly and the visitor can easily guess the main category to visit when looking for a specific item.
• The visitor can understand how to start navigating, without seeing anything else other than the home page.
• The home page provides all main options the visitor has.
• The home page has a URL address that is easy to remember.
• The home page has a good design and creates a good first impression.
• The home page looks like a home page and the inner pages are not too similar, so that someone would mistaken them with the homepage.

Orientation

• The website does not contain irrelevant, useless information or content that disorients visitors.
• The use of useless graphics, applets, flash, javascript and video is avoided.
• The information is presented in a simple way, in a logical manner and order.
• Wherever a chart is shown, the data are clear.
• Visitors can complete their actions successfully and easily.
• The Privacy Policy page is easy to find through any page of the site and its content is easy to understand.
• Visitors are not exposed to the inner workings of the website's software and do not encounter confusing errors that should never be visible.
• Actions like sending a form never occur automatically and the corresponding buttons are clear and look like actual buttons (not simple hypertext links)
• The website does not have error concerning broken links and Javascript errors.
• There is a special 404 page, in case a user lands on a page that does not exist. This page explains the reasons, for which this might have happened, provides links to the sitemap and homepage and contains a search field, so that users can search for what they were actually looking.

Navigation

• The navigation between relevant categories is easy and there is an obvious and easy way to return to the homepage, through any page of the website.
• The information is divided in a model that has shallow depth and wide range and not the opposite.
• The structure is simple and clear and there are no redundant levels.
• The navigation scheme is consistent and does not change from page to page.
• There are no dead-ends, i.e. pages that someone can only leave by pressing the browser's Back button.
• The website does not use frames.
• There is a Sitemap, which is available through any page. The sitemap provides a reference of the content of the whole website, without just repeating the main menu or displaying every single page of the website.
• The page a visitor is currently at is clearly depicted on the main and secondary menu.
• The labels of the categories in the main menu describe each page's content clearly.
• The links of the main menu include those words that make visitors easily distinguish between different (or similar) menu items. The most important word(s) of the link's caption come(s) first.
• Links do not contain redundant or useless words and do not confuse users.
• Links (except for those on the main and secondary menu) have a "visited" state, which means that they have a different color if the user has already visited the page they link to.
• Links have a "hover" state, which means that their appearance changes when the user is pointing the mouse over them. This happens for both text links and button links.
• Visitors can reach the most important pages via more than one ways. In fact, this is true for many of the website's pages.
• The Back button of the browser always behaves as expected and takes users to the page where they were before.

Forms

• The label of each field clearly shows the type and format of the information the user must enter.
• The size of each field is large enough to fit the needed information.
• Any limitation to the number of maximum characters of a field does not limit the user in typing the corresponding information.
• There is a clear distinction between required and optional fields.
• Fields are divided into logical groups and each group has a heading.
• Whenever necessary, examples are provided, which actually help users to fill in the corresponding fields.
• All questions are clear.
• Drop-downs, checkboxes and radio buttons are used when necessary, so that the amount of data a user has to type is decreased.
• In pages where the main action is filling in a form, the cursor is automatically placed on the first form field.
• The user can fill in the form by moving from field to field using either the mouse or the keyboard, but without having to use both of them.
• The current field a user is at is clearly depicted with the use of special colors and/or borders.
• The contents of every form are automatically validated before the final submission.
• When a form has fields that were not properly filled, each such field is depicted, a clear, relevant error message is displayed and users can easily correct their answers.
• Error messages are text messages that appear under each field, showing exactly what field they refer to, while at the same time the background color of the erroneous field is highlighted in pale red.
• When the form has errors upon submission, the cursor is automatically placed on the first erroneous field.
• Labels are close to the fields they refer to and are not confusing.
• All labels are HTML labels and when clicked by the user take the cursor to the corresponding field.
• Clicking on the label of a radio button or a checkbox is exactly the same as clicking on the icons of these controls, thus allowing users to fill in the form faster.

More on accessiblity

• A 'Skip to content' link is on the very top of each page, and it is the first link that gets active when the user presses Tab.
• Text alternatives have been provided for non-text content.
• Background colors are set in a way that text has high contrast and is easily readable.
• When text is lying over a background image, there is enough contrast so that the text is easy to read. Also, if images are turned off or not supported by the browser, there is a background image available which again makes the text easy to read.
• There is no content that is known to cause seizures.
• The website copy is organized in short, but not too short, sentences, that are easy to read and understand.
• The language used does not contain unusual or difficult words.
• Whenever possible, technical terms are explained.
• Whenever there is an abbreviation, its full meaning is also included either as a visible text or an alt text.
• Interactive components operate in predictable ways.
• Tables are not used for layout but for displaying tabular data.
• If a link leads to a page which is in a different language than the page the user is currently in, the user is warned by text, next to the link.
• Links always open on the same window. If a link is to open on a new browser window, the user is notified beforehand by text.
• Different links always have non-link text (or space) between them.
• Decorative images have a blank ("") alt attribute.
• There is no underline decoration for text, which would make users think the text is a (broken) link.
• The width of paragraph text is neither too short or too long. This contributes to a more readable text.
• The vertical distance between lines of text, as well as the font size and the margins around text are such that make the text easy to read.