Intro to Design and Usability

Our focus this week will be on two interrelated topics:

• Web design vs. print design
• The role of graphics, color choices and font styles in user experience

As with Week 1, we will have two threads for discussion of the main points, and a third thread for more general discussion of these two topics. 

How print design is different from web design

Essentially, print design is static and primarily limited by printing technology and budget, while web design needs to be dynamic and is primarily limited by accessibility and bandwidth. 

• Audience attention:

With print design it's okay to design for brief interactions, because most print design is intended for that (ads, brochures, business cards). With physical objects, people will also often go back and look at them more than once.

Conversely, with web design, you need to design to both attract temporary interest and also maintain longer interactions, because the web is ephemeral and users tend to not return to look at a site without a compelling reason (usually content). Design grabs and helps focus attention, while content and ease of use maintain it.

• Canvas size:

Print design can be limited to a tiny design space (a card) or allowed an enormous one (a newspaper or magazine page, a foldout page, a billboard). The limits are only dictated by budget, purpose and focus.

While the web can allow for an infinite canvas, user behavior limits what people will be willing to scroll to see, and the user will only initially see what his screen is capable of displaying. Increasingly, that also means that designers need to design for  netbook, tablet and mobile users, whose screens are smaller than laptop and desktop users. This is a bit like set design for a play or film - you are designing for the "camera frame" of the user's screen, and trying to make it enjoyable, easy, and worthwhile for the user to scroll.

Reading:

1. 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.
2. A very basic breakdown of Web Design vs Print Design: http://desktoppub.about.com/od/transitionprintweb/tp/Print_Design_vs_Web_Design.htm
3. 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/

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

Web design is an evolution of print design.  Many things that work well in print do not work in web design, and vice versa. Fonts, graphics and color choices that work well in print need to be modified or adapted in order to make for a pleasant design and user experience on the web. 

Print layouts need modification to work on the web. For example, the print term "above the fold" now means "what the user sees on site loading"  when applied to web sites. The greatest issue that creates for us, as designers, is that “above the fold” can vary drastically by screen size, as discussed in part one. Not only screen size, but also resolution, especially given the vast increase in mobile usage of the web. While resolution is rapidly catching up to print quality, and that can mean that what used to fill a laptop screen will now fit on a screen the size of a business card, the scale is still an issue. Either the canvas is too small, or the site content becomes too small.

Example: Imagine having to fit a full size site like CNN on a smartphone screen (like an iPhone) without making it optimized for the category of display. It's like imagining a newspaper or magazine zoomed down to fit on a large business card. This is how print designers see the web, as just another rigid surface.

What makes this dramatic scaling possible is the way web design and development work together to adjust to the available display. Platform detection and appropriate css. Optimization. Print design has none of that flexibility.

Discussion point: Give an example of a site that has translated badly to mobile format.

Graphics for the web can be confusing. File formats that work best for print are not supported for the web, and formats that work on the web are not usually of sufficient resolution for print at web-friendly sizes. One format might be better for a given purpose than another. Only a few file types are widely supported for the web (we are not including media file types in this stage of the discussion):

• jpeg – preferred for photographs. Lossy when compressed. Universally supported.

• gif -Indexed colors, supports transparency and animation. Universally supported.

• png – Small file size, less lossy than Jpeg, supports transparency and indexed color. Widely supported and gaining popularity.

• SVG – not universally supported at this time, and is actually a text format that describes a vector image to the browser, which then renders it. Great for charts, infographics. Has been proposed as a scalable font format, but is not gaining favor in this use. Its text format makes accessibility an issue, though it is supposed to become more accessible in HTML5.

• Graphics should not distract the user from the content and purpose of the site. Subtlety is best in design elements (example: low-contrast is best in backgrounds) so that the user does not have to fight the design to get to the content. Images are good when necessary as content (photo galleries) or to provide further information on the site's content (product images). Avoid excessive animations and text formatted as images.

• Anything that looks like an ad will often be ignored. Formerly popular ad formats and placements have become “tuned out” or effective blind spots for many users, as they have been trained that objects of that size, shape and placement (banners, for example) are irrelevent to their needs. This is another factor in why it is best to avoid excessive animations and text formatted as images.

  Discussion points: Pick two websites, one as a good and one as a bad example. How do graphics affect your usage of these sites? Are they obtrusive? Do they have "ad-like" graphic elements that you have ignored? If yes, were they intended as content? How do you think that affects your experience?

Color choices influence every aspect of user experience and usability.

• Contrast affects the most basic usability of every site. Poor contrast can make even the most eagle-eyed user experience eyestrain. At best the user will force a different CSS style using their browser, and at worst, the user will leave.

• Contrast also signals importance: high contrast makes the brain want to see a given object as a foreground object and low contrast tells the brain that a given object is a background object. This is why low text contrast combined with a high-contrast page background or image nearby is jarring, even when the text is on a solid color background.

• Navigation: Linked text color (links being a different color than regular text and visited links being another color) is vital to helping users understand where they have been and when they are being directed to a link they have not yet visited.

• Color affects mood and intended message. This can be culturally influenced, but is a vital part of the design concept. Examples: http://www.cnn.com/ , the red logo bar inspires urgency and immediacy. Orange is often used on restaurant sites because it stimulates appetite, green is optimistic, blue is calming, etc.

• Color affects accessibility. Colorblind users may experience your site's design in an unintended way because colorblindness alters perception of color contrasts. Ways to work around this include running the design through color analysis tools online and designing the site in grayscale and adding color later.

Discussion points: Pick two websites, one as a good and one as a bad example. How do the colors affect your usage of these sites? Run each through a color blindness test (#10 in the reading list has several linked). How did they do?

Typography is a complex subject, but the main things to understand in reference to using them on the web is that fonts intended for digital display are relatively limited, and the vast majority of fonts are currently designed for print only. There is a movement toward making more fonts available, but it is still in development and may present more problems than solutions, at least to start with.

• Legibility, or ease of reading, is the primary focus of font choices for web design.

• Using images to show display fonts is becoming a deprecated practice.

• Elaborate display fonts that work well in print do not usually work well at all as graphic elements on the web (the exception to this is web-optimized logos)

• Using multiple font families on a site is jarring to the reader's eye. Choose one for text, and if necessary, only one other for headings/menus/etc..

• Web Fonts are one of the features of the upcoming HTML5 standard. The idea is that there will be licensable commercial, and free use, web-optimized, fonts that will be called by the browser and will display as text. This will open up a world of typography possibilities to web designers. This is dependent on browser rendering and that makes it an evolving issue. While there is some support for web fonts already (CSS), it's likely that it will change before it is finalized, like the integration of the SVG format.

  Discussion points: Pick two websites, one as a good and one as a bad example. How do fonts affect your usage of these sites? Are they obtrusive? Do they use graphics for text? How do you think that affects your experience?

Reading:

1. How newspapers need to evolve for the web http://blog.ted.com/2009/04/02/the_fate_of_the/

2. designing for people :http://www.ted.com/talks/lang/eng/david_kelley_on_human_centered_design.html

3. Discussion of several common image formats and their best usages: http://www.acasystems.com/en/web-thumb-activex/faq-image-format.htm

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

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

6. Jakob Neilsen on changing link colors: http://www.useit.com/alertbox/20040503.html

7. Discussion of contrast with demos: http://www.webdesignref.com/chapters/13/ch13-16.htm

8. Color theory in general usability (short, easy read): http://www.colormatters.com/usability.html

9. Color meanings as generally accepted: http://www.webdesignref.com/chapters/13/ch13-16.htm

10. Color blindness and usability resources and tools http://www.stcsig.org/usability/topics/colorblind.html

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

12. CSS support of webfonts: http://www.html5trends.com/tutorials/all-you-wanted-to-know-about-web-fonts/

13. On Web Typography is an excellent discussion of font choices and how they affect users: http://www.alistapart.com/articles/on-web-typography/

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

15. Cufon: http://cufon.shoqolate.com/generate/

16. SVG fonts in Mobile Safari: http://opentype.info/blog/2010/04/13/the-ipad-and-svg-fonts-in-mobile-safari/