Usability principles for interface design

Interpretation of user behavior. For example, shortcuts keyboard must maintain their meaning.

invisible structures. It refers to actions associated in a non-existent way. visible to interface elements. For example, if the user can resize the application window by dragging the contour, this control must always be maintained (it would not be coherent if sometimes could do it and other times not, without there being a graphic element that indicates it).

Small visible structures. It refers, among others, to icons and scroll bars, which must keep its appearance. Generally, the position of these elements on the screen is also must be respected.

Design elements, that is, the visual style that defines the application.

A set (or suite) of products. It refers to a set of applications that are part of the same system (Microsoft Office, for example, is a suite composed of Excel, Word, Power Point and others utilities). The consistency must be maintained among all applications that are part of the suite, although with the appropriate variations to promote flexibility of functions.

Installation. Variations that the application may suffer must be anticipated. when distributed. By For example, if fonts are used that depend on the user's system, they should not There may be important variations depending on the installation conditions.

Platform. Refers to maintaining consistency on platforms different, like Apple/Windows.

Do not show unsolicited windows or graphics. They should not appear windows or graphics superimposed on the page without the user has previously requested them (it is a resource that is used, for example, to show advertising). This type of effect is very annoying for the user, since it diverts the from the center of attention and can hide areas of the page that the user is reading.

Increase site credibility. It is important that a web page Provide confidence to the user. The factors that contribute to credibility are the following:

• Provide access to the most frequently asked questions (FAQ or frequently asked questions), with their corresponding answers.

• Make sure that the website has a logical structure that is easy to understand. understand for the user.

• When the content corresponds to a quote, include the reference (respecting the bibliographic citation standards).

• Show the information of the author of the contents.

• Make sure the website has a professional graphic design.

• Provide access to previous content, if applicable (for example, in the case of electronic diaries).

• Ensure that the website is always kept up to date.

• Provide links to external materials and sources of information.

• Make sure the site links to sources that are credible.

Helps with user terminology. Helps from a website should have clear language, close to the terminology that is commonly used by the user. The use of specialized terms should be avoided and, if unavoidable, they must be explained.

Structure of tasks by steps. When a user has to develop a task that contains several steps, these They must be ordered following the same order that the user would follow in other contexts, whether they are digital (if the same type of task is usually done elsewhere and there is an order that has already been standardized) or real (if the task that is performed on the web has a parallel in the real world).

Therefore, it is essential to take into account the user's previous experience in similar tasks. Additionally, the order of the steps should be obvious (i.e., the user You have to be able to clearly recognize what sequence you should follow).

Grouping of functionally related elements. In an interface, There may be elements that are related to each other and to which the user will interact with as a unit. For example, if the user can access to the restricted area of a website using a password, the input field The password and the "access" option are closely related.

The relationship between the elements must be evident, so they will be placed next those that have a functional relationship.

Reduce user workload. The application should run the automatic processes that do not require intervention of the user so that he can dedicate all his attention to the tasks that do need human intervention. For example, form fields prefilled with information entered on previous occasions by the user (such as the email address in the field of email) contribute to reducing the workload.

However, it is important to ensure that none of the automatic actions imply decisions that must correspond to the user.

Do not load user memory. Users should be prevented from having to remember things from one page to another website. When two contents have to be compared or are related, it is better place them on the same page so that the user can view them at the same time.

This is especially important if the focal users are older people, since that generally the ability to memorize items for a relatively long period of time length of time decreases with age.

Do not ask the user to perform various tasks while reading. If the user have to perform other tasks while reading, it will significantly reduce reading speed, as well as text comprehension. Therefore, especially On websites with extensive content, the user should be prevented from multitasking (including memorizing elements from other pages).

Minimize page download time. It is important that the pages from a site are downloaded as quickly as possible, since otherwise the possibility of the user abandoning increases. For this, The file size of elements (text and images, for example) should be limited. example) included on the page.

Provide timeout indications. In case a download or that the performance of a task by a application involves a long time, the user should be instructed to wait.

• If the process is less than ten seconds, an animated clock or a similar effect to indicate that the process is developing.

• If the process takes more than ten seconds, a status indicator should be included. progress that shows how much is left to complete the task.

If the process takes more than one minute, the duration should be indicated and the a discreet audible signal when the process is complete (as it is possible that the user is taking advantage of to perform other tasks).

Warn in case of time limit. In case a page has any time limit, user should be notified before it runs out so you can request additional time.

Design pages that print correctly. If users are expected to they will want to print the pages of the website, it is It is important that these have an adequate shape, so that the impression does not cut off contents of the page (this effect can occur if the page format is too width).

The solution may be to design the page with an appropriate format, or to provide a print-oriented version of the page (using CSS management).

Location of options. It has been proven that navigation is speeded up when the main menu is in the left area of the interface.

It is also important to group or place the secondary and tertiary menus together. These can be placed alone (for example, as a horizontal menu if the main menu is vertical) or grouped with the main menu.

This does not imply that options cannot be placed in the right area of the screen, but in the case of the main menu it is not the preferred location for users.

Dropdown menus. The drop-down menus allow access to the suboptions of a main menu without consume screen space. However, they have the drawback that the suboptions They are initially hidden, so the user may be forced to to display all the menus to find the option you are looking for. Therefore, It is very important to properly organize the distribution of the suboptions and check that both the order in which they have been distributed and their labels are understood appropriately by users.

On the other hand, cascading drop-down menus have the disadvantage of that can be difficult to use, since mouse movement requires a lot of effort. precision. They should be avoided whenever possible, especially for users with motor disabilities.

Static menus. The order of menu options should never be be modified, as it can be disorienting seriously to the user.

Even in the case of adaptive menus, where they are placed first the options most used by users (for example, Microsoft Office), it has been observed that users prefer static menus.

Using the maps. In the case of applications or websites with significant volume of content, It is advisable to include a site map (showing the hierarchical structure of the contents) or an index (which presents the list of contents). This map will be more useful the closer it comes to the user's mental structure.

Indication of user status. The user must be able to know always:

• Where you are in the application.

• Where does it come from?

• Where you can go.

For this, various resources can be used such as breadcrumbs, difference visual of the active menu option or page titles.

Breadcrumbs. The breadcrumbs (trail of breadcrumbs) are a element that allows the user to orient himself within of the website and are usually placed in the upper area of the content area of the page. page. There are different types of breadcrumbs:

• Locator. Reports where the page is located regarding the content structure of the application; It is independent of the navigation previously carried out by the user.

• Dynamic. Reports the path followed by the user until reaching the point at which it is located.

• Descriptive. Shows the user in which category the content is located that is shown. Allows that the user can access other similar or related content.

Although he breadcrumb It is a very useful element to situate the user and their app is spreading increasingly, it must be taken into account that it may be difficult to understand for users with little experience. Therefore, it should never replace navigation options usual.

Visual difference of the active menu option. When the user accesses a section of the application, it must be clearly indicated What is the menu option corresponding to the section in which it is located. For This can use graphic resources such as color change or an element that Visually highlight the active option. It is important that the graphic resource chosen is applied consistently throughout the entire application.

Clear and visible page title. The user must be able to distinguish clearly what is the title of the page, which must be consistent with the option shown active in the menu and must not be confused visually with the content text.

Provide navigation options. A menu option or link never You must go to a page that does not contain navigation options, since the user must be able to navigate freely through all the pages or screens of the application.

If a link opens a new window, it must contain a button to close the active window and return to the original window.

Differentiate and group navigation elements. Options and links must clearly differentiated from the rest of the elements assets of an interface.

Additionally, related options should be grouped visually, so that the that have a closer relationship are those that are closest to each other.

On the other hand, vertical menus are read more quickly than horizontal.

On long pages, include a selectable list of contents. When The content of a page is very long, it can be difficult for the user locate the content they are looking for. To facilitate this task, it is recommended place a clickable list or index of the sections or sections at the beginning of the page of the page, so that the user can see if it contains what they are looking for and access it directly.

Avoid pages with too much information. When the pages of a website contain too much information, difficulty increases with which the user finds the data he really needs.

Place important elements at the top of the page. The The most important elements of a page should be placed at the top and centered, since which is the area in which the user first looks. Then perform the visual sweep usual from left to right and from top to bottom. Therefore, the critical elements of the page must appear in the upper area.

In the case of menus, it is especially important that all options are visible without the need to use the scroll vertical.

Structure to facilitate comparison. When the content of a site web includes elements that must be compared, These should be placed on the same page so that the user does not have to You have to remember them as you go from page to page. For example, if you make a purchase, You should be able to see the amount of the products you have ordered on the same page than the detail list of those products.

Optimize visual density. Visual density is determined by the number of elements found in a certain area of the page. For users it is much more difficult and slow to find an element when it is in a visually very dense area. In addition, users tend to visit clear and well-structured pages more, that do not have a high density.

Align page elements. Users prefer pages in which the elements are well aligned. Additionally, the alignment must be maintained consistently throughout the different pages or screens of the application (that is, the same margins must be maintained and distances between elements).

Avoid elements that can be understood as end of page. In the design of pages of a website, the inclusion of elements that could wrongly give the user the impression that the page has ended, if not.

Appropriate page length. The length of a website's pages must take into account the objective to the one they are designed for.

In the case of the site's home page and navigation pages (for example example, the web map), the pages should be short to facilitate their observation together.

Longer pages can be used for those that include content that must be read without interruption or that can be printed.

Include the logo or identifier on all pages. The inclusion of logo or identifier on all pages of a website provides a frame of reference for the user that allows them to verify that they have not abandoned the site.

The possibility of the user accessing directly to an internal page from an external link or a search engine, so that You have to be able to identify the site even if you have not previously visited the page initial. The logo must appear in the same location on all pages.

Arrange the elements of the page so that the different levels of the content are reflected in its graphic appearance.

Group related items.

Establish points of attention within the page that direct the user's gaze. user.

size. Larger elements are perceived as more important or first level than the rest.

The position. The elements that are located at the top of the screen are observed as top level compared to those below them. In the horizontal dimension, those located in the left zone are interpreted as first level with respect to to those located on the right.

The contrast. The elements that present the greatest visual contrast are those who are perceived as most important or first level within the page. For example, it is common report that an option is disabled using the decrease graphical feature the degree of contrast.

The grouping. Elements that are nearby are related and therefore present a hierarchy in terms of the order of content.

Delete the scroll horizontal. The use of horizontal scroll It is much more complex and tedious for users than that of scroll vertical (which is related to a much faster movement natural of the hand). must avoid the appearance of scrolls horizontal lines that are due to a page format that is too width.

Facilitate the scroll fast while reading. When a page contains extensive text, users will tend to use the scroll to scan the page in search of the content that interests them most. If he text contains visible section titles, it will be easier for the user to find the text they are looking for.

Use pagination better than scroll. In case the time page download speed is small, it is advisable to use pagination instead of scroll to display the content. Users understand better the content when it is divided into several pages that if they have to read large expanses of text in a single page.

Limit the length of the scroll. If users are searching specific information, it is advisable to segment the information in brief and well-organized pages, since the use of scroll in long pages is tedious and can be time-consuming.

Provide useful and customer-oriented content target. The content It is the most critical element of a website; a good presentation will not save a site whose content is inappropriate or irrelevant to users.

Not all interactive applications are oriented to the same target. Yes This is very general, the language has to be as clear and direct as possible. On the other hand, if the target is very defined, expressions can be incorporated that result relatives to this community (taking into account, however, that in this case there is a risk of excluding other users).

Brevity. To optimize reading comprehension, the text should be brief and should be minimized the number of words per sentence, as well as the number of sentences per paragraph.

A sentence should not contain more than twenty words. A paragraph should not contain more than six sentences.

Clear and plain language. The text should use words that are familiar and that they are frequently used by the focal users (the target).

To find out the words that website users use most frequently, It is highly recommended to use a data mining tool, which allows collect the terms entered in the search or in other forms on the site.

Avoid jargon. If specialized terminology is used, it is possible that many users cannot understand the content. It should be taken into account that the terms included in the designer or documentary maker will not always be understood by the user.

If the use of jargon or terms cannot be avoided specialized, It is advisable to include a glossary or dictionary.

Link to help information. If concepts are used technical or jargon, links should be provided to a dictionary or glossary of terms.

Use active tenses for verbs. When times are used active for verbs, sentences are more concise and clear that if passive tenses are used.

Affirmative instructions. When giving instructions, it is best to communicate users what to do instead of explaining to them what they should avoid.

However, if the consequences of a wrong step are serious, then the use of Negative instructions should be very clear.

Define acronyms and abbreviations. Acronyms and abbreviations should be avoided as far as possible. Yes are used, they must be presented to the user the first time they appear.

Organize text into sections. To promote agility in reading, The text must be divided into units of brief contents and appropriately headed by a meaningful title, which allows the user to easily locate the content they are looking for.

The main idea in the first phase of the paragraph. The first sentence of a paragraph must contain the main idea of the paragraph. When visually scan the text, users often use this first sentence to know if the content of the paragraph interests them.

Highlight keywords. When reading on screen, the user usually perform quick visual scans to locate the content that interests you. To favor this, it is very appropriate to highlight the key words, generally in bold (you should avoid highlighting them by underlining, since they would be confused with links).

Lists instead of paragraphs, whenever possible. In the cases where that a set of elements is being described or enumerated, It is highly recommended to structure the content in the form of a list, as it allows that the user understands the content more easily.

Display information in a usable format. In the case of data, they must present yourself in the most intelligible way for users (for example, using graphs or tables). In all cases The standards or conventions to which the users are most accustomed must be respected. users.

In case the target be international, the information must be provided in various formats (e.g. the units of measurement of different countries) or allow the user to choose its own format.