- Dec 2016
-
techwritingf16.robinwharton.net techwritingf16.robinwharton.net
-
This article was a guideline piece on how to best represent information, particularly with web designers. However, while a lot of the data is useful, some of it is a bit dated.
-
QUICKLIST FOR DISPLAYING INFORMATION ON THE WEB
Basically, this is a summary of the whole article in outline form.
-
USING ANIMATIO
Dynamic content can draw the eye, but should be used sparingly. I've seen these work really well in graphical headers and as interactive data, but they can be too distracting or not load some times.
-
Further confusing the interpretation of iconic signs is the simple fact that, even within a single culture or discourse community, the logic of the system by which a sign is mapped onto a referent often differs from sign to sign— even in the same icon set. In other words, some icons may be representational, some analogical, some metaphorical, and so on. Does a sign showing a knife, fork, and spoon denote a shop selling silverware or a restaurant? Most icon sets comprise a mix of mapping systems and seldom provide any clues to the user as to which logical relationship is to be used for which icon.Finally, icons are not particularly' good at standing in for verbs (predication). When they attempt to convey action, they typically do so by showing the results of it. Many' actions in a digital environment, however, have no picturable results, and icons then often become no more than little picture puzzles that confuse rather than inform. Other claims include those that icons increase search speed and that they are more memorable than text. This section exa
Nowadays, icons are typically marketing brands, such as Twitter's birds and Facebook's f. They're used as stand-ins for the company name.
The other use for icons are "like" buttons, such as thumbs up and hearts. They intuitively mean that somebody agrees with written content in some form or fashion.
However, a lot of times (like the article mentions) they are bad at conveying certain kinds of meaning. For example, I've seen people push the "like" button on facebook for events are typically really sad. Furthermore, they fail to convey the extent of empathy a person has for the topic at hand.
-
Supplement visuals with explanatory text ortext labels
Captions are really important for most visuals because they explain the relevance of a graphic. Without them, people naturally make assumptions about a graphic that doesn't necessarily comply with the author's intent. This is a rhetorical flaw that many make when non intuitive graphical information is present on something.
-
Major headings, for example, might be larger or bolder than subordinate headings, or might be centered or displayed in caps.
I've also seen sites that color headers so that they help users find information faster.
-
Except, perhaps, for headings, avoid lines oftype shorter than 40 characters and longer than60 characters
This is very specific. Personally, I think the amount of characters to a line doesn't really matter as long as the visual's margins allow an easy read.
-
3.4 Avoid setting type in all caps
This is another outdated guideline. A lot of modern web designs have all-caps fonts that don't look too bad. Of course, some paragraphs are still a bit hard to read.
-
Both bold and italic typefaces are used for emphasis and, consequently, should be used sparingly. Bold and italic letterforms also are often poorly formed on a screen—bold because the algorithm that creates them may simply add pixels to a letterform designed for and intended to be displayed at normal stroke widths; and italic because the oblique orientation of the letterforms doesn’t mesh well with the constraints of a vertically and horizontally oriented pixel grid.
Of course. They should only be used for important/specific points of interests on a page. In other words, use only for emphasis.
-
3.2 Use 12- to 14-point type for continuous text
This is actually kind of ironic, considering that the page looks to be 8 or 10 pt font.
-
NSURING THAT TEXT IS READAB
A lot of this section is subjective.
-
3.1 Use sans serif typefaces for display onscreen.
I don't really agree too much with this article. While sans serif is typically easier on the eyes, I don't think serif has too much of an impact on problematic screen viewing with today's technology. I still use it for headers and the occasional website.
-
s Dillon (1994) notes, the basic finding that people do, indeed, read more slowly from monitors appears to be disappearing as the quality of text displayed on screens improves.
In the Kliever article, it was really important to choose a readable font in addition to choosing a font that conveyed the rhetoric the user is looking for. This could make or break a website's usability/popularity. Every design element is audience oriented!
-
Sequences can be “coded” w7ith letters or number
Or bullets! Like this series here. :) It has logical flow and has structural organization.
-
Consistency7 has some other advantages for the user, as well. A consistent format speeds searching—it sets up expectations about where certain kinds of information or elements such as menus, navigation aids, or site maps can be found (Tullis 1988). Consistency, then, should exist not just within individual screens but among all screens in a Web site; therefore, secondary7 screens should be logically, visually, and structurally derivative of home or primary page
Consistency also looks a lot better. That's why designers try not to incorporate too many complex design elements on graphics; the amount of fonts are limited to three max (in most cases) and people strive to keep to a coherent color scheme. Having too many different styles creates chaos.
-
Graphically reveal the relative levels ofimportance among elements or groups ofelements in a display
Visual elements affect the rhetoric of anything on the website. They way you alter visual elements affects how people perceive things, so things that are altered can be made more or less eye catching/important to people.
-
Space is a particularly compelling tool for organizing a display because the visual system automatically attempts to group elements that are close together. In fact, elements that fall within five degrees of visual angle (an area that can be processed by the eyes in a single fixation, and one that roughly corresponds to an area equivalent to six or seven lines of single spaced type, 12—14 characters long at a viewing distance of about 18 to 20 inches [45.7 to 50.8 cm]) appear to be grouped automatically.
This is typically why people use things like text boxes, charts, margins, etc.; people perceive things that are close to each other as "grouped." For example, on the first column of this page, the image and caption are close together and separated from the body text. there are columns and spaces to separate paragraphs. People use text boxes on visuals (powerpoints, websites) to show that all the words in the boxes go together.
-
The display problem is not qualitatively different from that confronted by the designer of a paper document, but certainly the parameters within which the designer of a screen must work may well be narrower simply
The display size information is largely correct where it describes how it affects viewers. However, to my knowledge, this problem is gradually solving itself through the development of new website design media. Many common websites are using design tools that allow websites to seamlessly adapt to any screen in ways that very little changes will occur, in spite of size. However, the different screens will definitely still have different perceptions of rhetoric.
-
Good design reveals structure when it visually mimics the logical relationships that exist among elements in a display. The human visual system attempts to find the structure of information—whether in a scene, on a page, or on a screen—very early in its efforts to process it, and it does so by looking for visual patterns. Importantly, the processing that occurs in this first stage of perception—a stage that takes only a few fractions of a second—occurs automatically and in such a way that interpretation of the display is dictated largely by the characteristics of the display itself rather than by the viewer’s prior knowledge or expectations (Bruce and Green 1990; Goldstein 1996; Wade and Swanston 1991).
In our website design piece, we did our best to utilize logical structure for our mockup. For example, we were asked to potentially fix the navigation. We redid the order of the navigation so, logically, the most important details were listed first.
-
Blue is an acceptable background color for other reasons, as well. First, while only about four percent of the color-sensitive photoreceptors (cones) lining the inside surface of the eye (the retina) are sensitive to short-wavelength light, they are nevertheless distributed farther into the periphery7 (60 degrees) than are those cones sensitive to medium and long wavelengths. The cones we have that can process blue color, consequently', are relatively far apart, making it difficult for the eye to see distracting patterns (to find boundaries, in other words) in a blue background. (Lansdale and Ormerod 1994; Sekuler and Blake 1990; Thorell and Smith 1990)
This could also be why a lot of social media websites are blue. Facebook, Twitter, and Tumblr are very blue.
-
figure where there isn’t one. Backgrounds, consequently, should be, as far as possible, devoid of pattern or, if esthetic considerations demand that they be patterned, be very7 subtle or muted (Lynch and Horton 1999)
This is definitely a must. Some pattern "textures" are typically find as long as they don't affect the readability of the page. Photos tend to be busy, but if they're only visible on the extreme margins, they tend to be fine. At the very least, the text box where words are must be a solid color.
-
f a display must consist of very' small colored elements, however, the detectability and discrim- inability of those elements can be improved to a limited degree by displaying them on a black, rather than white, background. (Thorell and Smith 1990)
Even if black and white are the highest contrast, they can still strain the eye if the font is too thin. However, they are the safest choice for readability.
-
pro
1- Making display elements legible This is a no-brainer. Websites are largely visual rhetoric oriented, with kinetic, audio, etc. elements weaved within. Without legible visuals, they are inaccessible to a large population and what could possibly be its largest audience.
-
on
This is another guideline genre piece- this time on troubleshooting display elements on a website for the purpose of making the webpage easier for users to utilize.
-