1 / 15

Usability 2: Information Architecture & Design

Usability 2: Information Architecture & Design. Including information on writing for reading on computers and the semiotics of type. Presented by Arylene R. Westlake. Usability is a quality attribute that assesses how easy user interfaces are to use.

field
Download Presentation

Usability 2: Information Architecture & Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Usability 2:Information Architecture & Design Including information on writing for reading on computers and the semiotics of type Presented by Arylene R. Westlake

  2. Usability is a quality attribute that assesses how easy user interfaces are to use. The term “usability” also refers to methods for improving ease-of-use during the design process. On the web, usability = survival. Usability is defined by: Learnability Efficiency Memorability Errors Satisfaction Utility Usability 101

  3. IA involves the design of organisation and navigation systems to help us find and manage information more successfully. Good IA allows users to find the information they need. A well-developed IA is a planned one; users will spend less time finding information, are less likely to miss finding what they need altogether. Information Architecture

  4. Planning Your IA • The 3 basic steps to a well-developed and planned IA: • Orientation • Navigation • Route-finding Where am I? How do I get there? Where am I going?

  5. Planning Your IA: Orientation • Orientation is about helping users know exactly where they are on your website. • How orientation is achieved: • Logos • URLs • Breadcrumbs • Page footers

  6. Planning Your IA: Navigation • Navigation is about helping users figure out where they want to go. • How navigation is achieved: • Back / forward buttons • Breadcrumbs • Search engines • Top of page • Visited pages

  7. Planning Your IA: Route-finding • Route-finding is about trying to help users get from Point A to Point B. • How you can help users with their route-finding: • Effective header links • Effective contextual links • Search engine results • Recommended pages • Most popular pages • Email this page

  8. Information Design • Information Design = Navigation Design • Before designing your site’s navigation, research: • the number of pages you need to account for, • where visitors are most likely to click, • colour schemes that most satisfy users, • etc. • Tip:draw a few possible designs on paper before you even turn on Dreamweaver!

  9. Don’t make your users guess. Keep content high up. Keep content below banners. Be consistent. Don’t be too adventurous. Add a “home” button. Keep the site fast. Quality of information over quantity. Do cross-browser tests. Leave out the unimportant stuff. Effective Information/ Navigation Design

  10. Most Popular Methods of Navigation • Text-driven toolbars • Advantages:Fast-loading, perfect for screen-reading technology • Disadvantages: Can be dull • Image toolbars • Advantages: Can look great • Disadvantages: Can be slow-loading, can create problems for screen-readers if not formatted properly. • Flash menus • Advantages: Can look amazing and very professional • Disadvantages: Can be slow-loading,requires user to install Flash plug-in,impossible for screen-reading technology to read.

  11. Writing for Reading on Computers • Writing on the web should be approached differently from writing on print, because: • Users have to read from a computer screen; it is more difficult than reading print, and • Users want information very quickly; they will be less patient. • Optimise web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.

  12. The Semiotics of Type A serif typeface A sans serif typeface • Typefaces can be categorised into • Text type: main copy, 8-12pt. • Display type: headings, starts at 14pt. • Serif • Sans serif The tradition of a classic serif The modernity of a clean, sharp sans serif

  13. The Semiotics of Type • When selecting a typeface, you should consider: • The visual feel of the text • The function and purpose of the text Keep off the grass Keep off the grass Keep off the grass

  14. Typefaces & New Technology

  15. References • Dabner, David. Design and Layout: Understanding and Using Graphics. London: Quarto Publishing, 2003. • Davidson, Mike. sIFR 2.0: Rich Accessible Typography for the Masses. 2006. 26 Sep. 2006 <http://www.mikeindustries.com/sifr/>. • Hastings, Sam. Design Effective Navigation in 10 Steps. 2002. 26 Sep. 2006 <http://www.sitepoint.com/article/navigation-10-steps>. • Nielsen, Jakob. Be Succinct! (Writing for the Web). 1997a. 26 Sep. 2006 <http://www.useit.com/alertbox/9703b.html>. • Nielsen, Jakob. How Users Read on the Web. 1997b. 26 Sep. 2006 <http://www.useit.com/alertbox/9710a.html>. • Nielsen, Jakob. Usability 101: Introduction to Usability. 2003. 28 Sep. 2006 <http://www.useit.com/alertbox/20030825.html>. • Nielsen, Jakob. Screen Resolution and Page Layout. 2006. 26 Sep 2006 <http://www.useit.com/alertbox/screen_resolution.html> • Rhodes, John S. Information Architecture Revealed! 1999. 26 Sep. 2006 <http://webword.com/interviews/rosenfeld.html> • Rhodes, John S. Information Architecture for the Rest of Us. 2002. 26 Sep. 2006 <http://webword.com/moving/restofus.html>.

More Related