Summary Consistency: Make sure you have similar design, similar behavior throughout the site. Strive for consistency in appearance and behavior, because it facilitates the credibility, usability and reliability; Visibility: Provide cues to know when and where can users interact; Learnability: Meaningful and unambiguous labels, content, and interactions make it possible to quickly understand and repeat the experience; Predictability: We want to be able to set expectations so that people know where they are, where can they go, what can happen, and what the outcome of their actions will be; Feedback: Acknowledge interactions, make sure users know that the interface realises that they have interacted with it, as well as provide information such as error messages, dialogs and comptetion messages (status, location, progress, and completion)

Summary Is not about the presentation of aestheticaly pleasing visuals but efficient delivery of a content,

Summary Page title Paragraph 1 Paragraph 2 Paragraph 3

Interaction Design & Text Delivery of Text 1 st Scanning – Ease the process of people finding what they are searching for. Design pages and screens to facilitate scanning. 2 nd Reading – Use effective layout and typography to ease the process of reading.

Delivery of Text Headers and sub-headers Bullet lists Line height and whitespace Font face, size and decoration Text line and row width Scan first read later

Headers and sub-headers

Bullet lists Lists are processed faster than paragraphs of continuous text: There was a dog, a cat, a parrot and a cow. Dog Cat Parrot Cow

Line height and Whitespace Ease the reading speed with the layout of line height and whitespace Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Font face, size and decoration

The row width Implement easy to scan row widths (50 to 55 characters) Too short Too long

Text Eyes do follow patternsfor moving across the visual elements of the screen The Gutenberg Diagram The F pattern The Z pattern

Text The Gutenberg Diagram

Text The F pattern

Text The Z pattern

Fonts Text as graphics Font replacement Embedded web fonts The text is saved as image Later it appears as image in the browser Use cautiously – drawbacks of acessability And with the optimization for search engines Standard font The text is saved using a standard font Later, in the browser this text is converted using flash or javascript's canvas to draw Converted text Javascript canvas Non-standard font Non-standard font The employed font is saved in an external server, and is downloaded during the reading process

Patterns for presentation of (long) text: Hide Show (less more)/ Collapse panel Accordion panel Tabs & Drawer/Slider Layers Text Areas Pagination