DocuWare Design
Guidelines and resources to create DocuWare digital interfaces
Guidelines and resources to create DocuWare digital interfaces
If possible, each screen should be supplied with a unique title and provided with headings that identify sections in the information hierarchy.
When people arrive on a screen, the title is the first piece of information they receive from assistive technology. To help people understand the product’s structure, unique titles should be created for each screen that briefly describes its contents or purpose.
The user interface should not prevent users from selecting plain text on the screen.
Many users rely on using selected text as input for text-to-speech (TTS) or for looking up translations.
Purely decorative images and other elements should be hidden from assistive technologies.
Making VoiceOver describe a purely decorative image and elements can waste time for users and add to their cognitive load without providing any benefit.
Users should be able to:
zoom in up to 300% without problems
navigate most of the website using just a keyboard
navigate most of the website using speech recognition software
use most of the website using a screen reader (including the most recent versions of JAWS, NVDA, and VoiceOver)
Adequate contrast between the color of every single information-bearing element and its background should be assured.
Which UI elements need which levels of color contrast can be determined by categorizing them into two groups: information-bearing elements, and decorative or disabled elements.
The User Interface should not rely solely on color to differentiate between objects or communicate important information.
If your app uses color to convey information, be sure to provide text labels or glyph shapes so color-blind users can also understand it.
Non-color indicators such as shape, line, text treatment, size, etc., should be used instead of changing only the component’s color.
Color independence should be checked during the design by using, for instance, the grayscale test. In addition, designers can turn a design into shades of gray to check if there is something that cannot be identified or if the difference between shades is sufficiently visible.
Designers should be aware of color blindness.
Many colorblind people find it difficult to distinguish blue from orange, for example, or red from green (and either red or green from grey). The usage of these color combinations as the only way to distinguish between two states or values should be avoided. Designers must rely on differentiation with shapes, patterns, additional titles, etc.
Problematic color combinations should be avoided:
Red & Green (the biggest ones to avoid)
Green & Brown
Green & Blue
Green & Gray
Green & Black
Blue & Gray
Blue & Purple
If the design truly calls for using problematic colors next to each other, Designers need to make sure there is a high contrast ratio between the two by, for instance, darkening one color and lightening the other to make the contrast more pronounced or playing with the saturation, or sliding the hues a little one way or another.
The correct response to Inverting Colors should be planned.
Users can turn on Invert Colors when they prefer to view items on a dark background. Designers also need to own this experience and provide planned and controlled behavior.
Engaging users while waiting with Loading Patterns This section will expose the ...
Keep users on their toes using Alerts Alert is a messaging tool used to notify u...
How inform and alert users with Banners ? A banner is a powerful tool for commun...
General guidelines for writing about people without biases
