Presentation is loading. Please wait.

Presentation is loading. Please wait.

Summary Consistency: Make sure you have similar design, similar behavior throughout the site. Strive for consistency in appearance and behavior, because.

Similar presentations


Presentation on theme: "Summary Consistency: Make sure you have similar design, similar behavior throughout the site. Strive for consistency in appearance and behavior, because."— Presentation transcript:

1 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)

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

3 Summary Page title Paragraph 1 Paragraph 2 Paragraph 3

4 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.

5 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

6 Headers and sub-headers

7 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

8 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.

9 Font face, size and decoration

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

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

12 Text The Gutenberg Diagram http://www.studiodino.com/info/news47.htm

13 Text The F pattern http://www.useit.com/alertbox/reading_pattern.html

14 Text The Z pattern http://webdesign.tutsplus.com/articles/design-theory/understanding-the-z-layout-in-web-design/

15 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

16 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/Slider http://www.ndoherty.biz/demos/coda-slider/1.1.1/#4 Layers Text Areas http://www.kirupa.com/developer/mx/dynamic_scroller.htm Pagination http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/


Download ppt "Summary Consistency: Make sure you have similar design, similar behavior throughout the site. Strive for consistency in appearance and behavior, because."

Similar presentations


Ads by Google