Values of the Dominican Design System

We think of people as the center to achieve user-friendly and useful interfaces for all Dominicans.

Human

To know in depth the problems of citizens and build solutions designed for the people who use a service.

Knowing the needs, motivations, routines and limitations to design interfaces according to the context of the problems to be solved.

Usable

Present the elements that make up a digital interface in an intuitive and user-friendly way.

By ensuring usability, three main factors are met: effectiveness, efficiency and user satisfaction.

To generate a usable website, the following guidelines should be followed:

  1. Have a page icon or "favicon" 2.
  2. Keep the user informed at all times and in a consistent manner about what is happening on the portal.
  3. Differentiate hyperlinks
  4. Generate a navigation trail
  5. Distinguish between required and optional fields in the forms.
  6. Generate the necessary follow-up information after a form has been filled out
  7. Avoid invisible elements
  8. Use a simple and understandable language for users.
  9. The logo and name of the organization
  10. Buttons that allow the user to print the information displayed.
  11. Maintain consistency in graphic styles and functionalities.
  12. Show navigation elements
  13. Provide a user guide or instruction for each process that the user must perform.
  14. Provide a search tool.

It is recommended to:

  1. Appeal to recognition rather than memory so that the user identifies the elements.
  2. Indicate the desired result in each field of a form. 2.
  3. Avoid overloading information.
  4. Group the questions on a form in a coherent way. 1.
  5. Ensure that the text boxes in the forms are the right size for the data to be entered. 1.
  6. Avoid the use of optional fields or actions in forms that are not relevant. 1. Reduce the excessive use of scripts. 1.
  7. Reduce to no more than three the number of clicks that must be made to reach any page within the web site.

Accessible

Ensure that interfaces can be used by anyone, regardless of their condition, reducing the barriers that hinder their use.

For these guidelines, the Web Accessibility Standard of the Dominican State (NORTIC B2) is taken as a reference.

To create an accessible website, the following guidelines must be followed:

Provide an accurate description of any image or video under the ALT tag. 2.

  1. Indicate the width and height dimensions in the source code of each image. 2.
  2. Provide each input field with a label that shows precise instructions of the information to be entered.
  3. Have a navigation sequence established by code to display the content in an orderly manner.
  4. Provide instructions with more than one sensory indicator.
  5. Have a contrast between text and background with a minimum ratio of 4.5:1 or 3:1 for texts whose font size exceeds 18 point or 14 point.
  6. Offer the possibility of navigating the entire portal using only the keyboard.
  7. Name all web pages from the source code. This name should describe the content of the page.
  8. Use descriptive and user-friendly links.
  9. Set the language of each web page in the source code. Provide the user with a textual description of detected errors. 1.
  10. Define the name.
  11. Avoid broken hyperlinks.
  12. Separate presentation from content.
  13. Ensure text resizing up to 200% without loss of content or functionality. 1.
  14. Provide a tool to change text size and background contrast. 1.
  15. Prevent automatic actions not initiated by the user.
  16. Provide an alternative for the user to cancel running processes. 1. Provide the hyperlink to download the viewer program for multimedia files that require it 1.

It is recommended:

  1. Avoid overloading videos or animations on the cover page.
  2. Provide a hyperlink to the high quality image when the image has lost quality in an optimization process.
  3. Use the JPG format for the presentation of images.
  4. Use a single directory for storing images.
  5. Provide non-text equivalents such as drawings. 1. Ensure that text and graphics are understandable when viewed without color. 1. Use technologies and guidelines provided by the World Wide Web Consortium (W3C). 1.
  6. Provide assistive technology that replaces the use of keyboards such as speech recognition.
  7. Provide auto-completion mechanisms.