UX/UI principles for INSPIRE

The following principles should be taken into consideration when a new page is created. Make sure your page complies with them.

1. design elements

• Do the user interface elements follow the reading pattern from upper left to lower right?

• Consistent grouping of features and functions; are there visual distinctions that separate elements from one another; for example, group boxes, tabs, expandable sections, or areas with different background colors?

• Consistent labelling; are all labels correctly aligned with their user interface elements? Check the horizontal alignment of labels with boxes, check boxes, and option buttons.

• Is the vertical spacing between individual elements the same for similar elements?

2. visual elements

• Did you use consistent, familiar, and recognizable images for common functions? For example, although we no longer use floppy disks, that icon is instantly recognizable as a Save icon.

• If images don’t display, what happens to the user interface? Does it display alternate or title text, or do you get a placeholder box?

• Test how the pages display on various devices and various browsers.

• Validate all Web pages. Use some of the markup validation tools that validate a page’s DOCTYPE, HTML, and CSS, such as the W3C Markup Validation Service and CSS Validator,

• Resize all resizable windows. Do the elements in the window resize appropriately?

3. text elements

• When reviewing text user interface elements, consider the following: clarity—The textual messages a user receives from an application must be clear. consistency—Use terms and labels for user interface controls that are familiar to users. conciseness—Be as brief as possible, but don’t sacrifice meaning for brevity.

• Appropriate use of Language: Ensure the user interface uses simple language. Watch out for abbreviations and acronyms. Avoid using them unless you are absolutely sure your audience understands them.

• Look for: misspellings and typos; consistent spelling of product names and terms; appropriate use of Fonts

• Error messages must be clear and useful. Good error messages tell users what went wrong—and possibly why—provide one or more solutions for fixing the error, and offer a set of buttons that relate directly to the next action a user should take. The possible responses to a question should be Yes and No.

4. link elements

• Make sure the text matches the link’s action.

• Check the behavior when users hover over links.

• Test All Buttons, Links, and Keys - do they take the user to the expected site/tool?

• Review the font, color, and style of active and visited links.

5. user interactions/forms

• Take the time to evaluate every question you are adding to your forms. Be vigilant about removing everything that isn’t necessary.

• Ensure that the titles of your forms match people’s expectations and succinctly explain what each form is for.

• For forms with a known sequence of multiple Web pages, include progress indicators that communicate scope, status, and position.

• Use the right input field for the type of question you are asking: Does it require a yes or no answer (e.g checkbox); a selection from mutually exclusive options (e.g radio button); etc.?

• Concise help text visible and adjacent to the label (not the input field) provides the most clarity for people.

• See the full design principles for forms (Important!)

Source: http://www.uxmatters.com/mt/archives/2009/02/reviewing-user-interfaces.php

Resources and tools

1. INSPIRE Labs Style Guide (http://labs.inspirehep.net/style-guide)

On that page you can find the current Bootstrap styling of INSPIRE Labs. Be consistent with it and propose changes if needed.

2. W3C validation

Use a tool to validate your HTML pages. A recommendation is to install a Browser extension that will do the check for you, like Validity for Chrome.

3. Mobile-friendly

Make your pages mobile-friendly so that search engines like Google will index your page better (and more importantly, not penalise it) - read http://googlewebmastercentral.blogspot.ch/2014/11/helping-users-find-mobile-friendly-pages.html for more information.