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 Consistency: Make sure you have similar design, similar behavior throughout the site. Strive for consistency in appearance and behavior, because.
Jan 01, 2016
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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<html>
<head>
<title> Page title </title>
</head>
<body>
<p> Paragraph 1</p>
<p> <font color=”yellow”> Paragraph 2 </font> </p>
<p color=”#10B009”> Paragraph 3 </p>
</body>
</html>
Interaction Design & Text
Delivery of Text
1st Scanning – Ease the process of people finding what they are searching for. Design pages and screens to facilitate scanning.
2nd 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 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.
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 decorationLegible font
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsumhas been the industry's standard dummy text ever since the 1500s, when an unknownprinter took a galley of type and scrambled it to make a type specimen book. It hassurvived not only five centuries, but also the leap into electronic typesetting, remainingessentially unchanged. It was popularised in the 1960s with the release of Letraset sheetsDecorati f font
Lorem Ipsum i s si mpl y dummy text of the pr i n ti ng and typesetti ng i ndustry. Lorem Ipsum
has been the i ndustry's standard dummy text ever si nce the 1500s, when an unknown
pr i n ter took a gal l ey of type and scrambl ed i t to make a type speci men book. It has
survi ved not on l y fi ve centu r i es, bu t al so the l eap i n to el ectron i c typesetti ng, remai n i ngItalicized serif font
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsumhas been the industry's standard dummy text ever since the 1500s, when an unknownprinter took a galley of type and scrambled it to make a type specimen book. It hassurvived not only five centuries, but also the leap into electronic typesetting, remaining
Too small
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy textever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survivednot only f ive centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960swith the release of Letraset sheets containing Lorem Ipsum passages, and more recently w ith desktop publishing software like AldusPageMaker including versions of Lorem Ipsum
The row width
Implement easy to scan row widths (50 to 55 characters)
Too short
Too long
TextEyes do follow patternsfor moving across the visual elements of the screen
• The Gutenberg Diagram
• The F pattern
• The Z pattern
Text
• The Gutenberg Diagram
http://www.studiodino.com/info/news47.htm
Text
• The F pattern
http://www.useit.com/alertbox/reading_pattern.html
Text
• The Z pattern
http://webdesign.tutsplus.com/articles/design-theory/understanding-the-z-layout-in-web-design/
Fonts
•Text as graphics
•Font replacement
•Embedded web fonts
The text is saved as image Later it appears as image in the browserUse 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
Javascriptcanvas
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 http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/CollapsiblePanel/CollapsiblePanel.aspx
Accordion panel http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
Tabs & Drawer/Sliderhttp://www.ndoherty.biz/demos/coda-slider/1.1.1/#4
Layers
Text Areashttp://www.kirupa.com/developer/mx/dynamic_scroller.htm
Paginationhttp://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
Related Documents
