# Technical writing/UI Design

* back to Technical Writing Level 2
* back to User interfaces

## Color

Choosing the right colors to use is a very important aspect of User Interface (UI) design. Choosing a color palette that makes it easier for the user to distinguish content is essential.
Avoid using disturbing colors and try to keep the general appearance pleasing to the eye. Certain colors are extremely difficult for color blind users to read, e.g. shades of green and red.
Designers of user interfaces should try to limit the number of colors to three or four. Contrasting colors should be chosen carefully and there should be a distinct difference between the color of the text and the color of the associated background.

## Affordances

Affordances are visual clues in the design that allow users to guess the function of an object. For example, a teapot is traditionally designed with a handle on one side and a spout on the opposite side. This should indicate to an observer which part of the teapot is safe to hold.
In user interface design, such clues could take the form of embedded navigation buttons.

## Usability

Usability refers to the ease with which users can interact with the interface.
As with any form of design the key is KISS - Keep It Simple and Straightforward.
Continuing from the teapot analogy in the 'affordances’ section, it should be clear to users how they can interact with products, services, and texts in much the same way that they know intuitively to open the teapot's lid when they want to insert the tea bag and water.

## Accessibility

The World Wide Web Consortium (W3C) is dedicated to ensuring that the technology of the Web supports accessibility. It sees access to the Web as a basic human right (W3C 2009). When developing a website, there are many ways in which the Web can be made accessible. An instructional designer needs to be aware of people with disabilities and the various assisted technologies that there are.
The Web Content Accessibility Guidelines (WCAG 2.0) provide a framework which an instructional designer can implement to ensure that the courses they create are accessible to as many users as possible. These guidelines are of particular importance to those with disabilities, but also serve to make content more usable and accessible to all.
These are available at

## GUI Elements

Technical writers should be aware of GUI elements such as dialog box, chevrons, window, screen, check-box, radio button, drop-down list, field, text box and so on. This will help them to document instructions correctly and easily. Technical writers with basic knowledge of GUI elements can contribute by assisting developers and web developers in labeling their application's field names correctly.
Users should be able to navigate through user interfaces with ease, both on desktop and mobie devices.
For example, a draggable scroll bar facilitates jumping to positions in long lists, and a range selection feature would allow users to quickly select a high number of list items such as files and directories in a file manager, by highlighting only two items to select all in between.
I just don't know where to start folks, so please add some content to give me a kick start.
Thanks,
TWFred 14:25, 14 February 2008 (UTC)
* someone spare timer here and write about tabbing and skipping on UI like forms — Preceding unsigned comment added by 61.1.80.203 (talk • contribs) 17:16, 19 May 2008 (UTC)
* Question - should this be about the role of Technical Writers in UI design, or about the UI of user documentation? — Preceding unsigned comment added by Spiderling (talk • contribs) 10:56, 7 July 2008 (UTC)
* Question: Is this topic about documenting UI or role of technical writers in UI design? User: Bhavna, 12:14, 11 July 2008
back to Technical Writing Level 2
Question - Maybe something about Mindmapping-Software, Audio- and Video-Pod-Production for mobile players, the moodle-learning-platform,...???

## More
### Shadows

Shadows of overlapping user interface elements can be used to either highlight the active element or to make more overlaying elements more visually apparent.