Intro to Design and Usability

This includes reading, video, audio and interactive resources.

Resources are given in assignment order.

Pre-Opening
Week 1 Why Design is Important
Week 2: Web vs Print Design
Week 2: The role of graphics, color choices and font styles in user experience
Week 3: User Behavior
Week 4: Supplementary Content
Week 5: Online Tools and resources 

From course description:

• Web Pages That Suck Vincent Flanders' rather in-your-face site . 
• UseIt.com: Jakob Neilsen's publicly available content
• Wikipedia article on Web Usability
• Usability Body of Knowledge 
• Copyright vs. creative commons resources:
  • 10 Big Myths about copyright explained
  • Creative Commons

From application task:

• http://www.useit.com/alertbox/9605.html
• http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html

Week 1: Why Design is Important

• http://www.useit.com/about/nographics.html which explains Jakob Neilsen's purpose behind a text-only site.  

Week 2: Web vs Print Design

• Jakob Nielsen on Print vs Web Design, in 1999: http://www.useit.com/alertbox/990124.html Much of this is still applicable, especially if you are designing for mobile users
• A very basic breakdown of Web Design vs Print Design: http://desktoppub.about.com/od/transitionprintweb/tp/Print_Design_vs_Web_Design.htm
• An excellent discussion of the disconnect between the two types of design, professionally: http://www.myintervals.com/blog/2010/06/16/web-design-vs-print-design-and-the-wired-interactive-magazine/

Week 2: The role of graphics, color choices and font styles in user experience

• How newspapers need to evolve for the web http://blog.ted.com/2009/04/02/the_fate_of_the/
• designing for people :http://www.ted.com/talks/lang/eng/david_kelley_on_human_centered_design.html
• Discussion of several common image formats and their best usages: http://www.acasystems.com/en/web-thumb-activex/faq-image-format.htm
• Wikipedia entries on graphic file types:
  • jpeg http://en.wikipedia.org/wiki/JPEG
  • gif http://en.wikipedia.org/wiki/Graphics_Interchange_Format
  • png http://en.wikipedia.org/wiki/Portable_Network_Graphics
  • svg http://en.wikipedia.org/wiki/SVG
• SVG support in IE9 beta http://channel9.msdn.com/Blogs/Charles/In-your-hands-IE9-and-SVG-Past-Present-and-Future-of-Vector-Graphics-for-the-Web
• Jakob Neilsen on changing link colors: http://www.useit.com/alertbox/20040503.html
• Discussion of contrast with demos: http://www.webdesignref.com/chapters/13/ch13-16.htm
• Color theory in general usability (short, easy read): http://www.colormatters.com/usability.html
• Color meanings as generally accepted: http://www.webdesignref.com/chapters/13/ch13-16.htm
• Color blindness and usability resources and tools http://www.stcsig.org/usability/topics/colorblind.html
• http://www.cooper.com/journal/2009/09/shadow_of_the_moon.html a discussion of typography and how it relates to web design, including the future use of fonts on the web
• CSS support of webfonts: http://www.html5trends.com/tutorials/all-you-wanted-to-know-about-web-fonts/
• On Web Typography is an excellent discussion of font choices and how they affect users: http://www.alistapart.com/articles/on-web-typography/
• Real Web Type in Real Web Context describes the practicality of the Web Font standard: http://www.alistapart.com/articles/real-web-type-in-real-web-context
• Cufon: http://cufon.shoqolate.com/generate/
• SVG fonts in Mobile Safari: http://opentype.info/blog/2010/04/13/the-ipad-and-svg-fonts-in-mobile-safari/

Week 3: User Behavior

• http://experiencedynamics.blogs.com/site_search_usability/2006/04/designing_for_t.html
• Eyetracking and Web Site Design  at Usability.gov http://usability.gov/articles/newsletter/pubs/032010news.html
• Eyetools: http://eyetools.com Understanding Eye Tracking blog series (all are short)
  • part 1 http://eyetools.com/articles/p1-understanding-eye-tracking-misinterpreting-data
  • part 2 http://eyetools.com/articles/p2-understanding-eye-tracking-what-you-can-learn-from-eyetracking-data
  • part 3 http://eyetools.com/articles/p3-understanding-eye-tracking-what-is-a-heatmap-really
  • part 4 http://eyetools.com/articles/p4-understanding-eye-tracking-what-is-a-scan-path
  • part 5 http://eyetools.com/articles/p5-understanding-eye-tracking-time-and-heatmaps
• Impact of Aesthetics on Attitudes Towards Websites at Usability.gov http://usability.gov/articles/062009news.html
• User Behavior and the "globalness" of Internet http://jcmc.indiana.edu/vol7/issue2/taiwan.html - dry, scholarly, but informative regarding languange and culture's impact on usability 
• Credibility at Usability.gov http://usability.gov/articles/102009news.html
• ROI on increased usability http://www.useit.com/alertbox/government-nonprofit.html

• http://interpixdesign.com/_usability-video-newsletters
• http://www.reelseo.com/usability-web-video/
• http://webstandards.psu.edu/accessibility/tech/audio