Voice

Andrew Maier – @andrewmaier – Polishing Interfaces: Visual Design

• Application interfaces often have no overarching design
• Application interfaces leave a lasting impression
• Polished interfaces make good use of motifs
• Polished interfaces follow conventions

1. Establish a theme/style
2. Wireframe your elements
3. Begin adding layer styles
   • 1-pixel highlights
   • Gradient overlay
   • Inner shadows

Scott Jehl – @scottjehl – Rich UI Design: An Access-Oriented Approach

Download the Presentation from the Filament Group website

• Should test pages on screen readers
  • Jaws is most popular, 40 min trial available
  • NVDA is open-source
• All or nothing is a bad approach to accessibility
• Consider Universal Access in all stage of development
• Instead of asking for browser, run tests to determine browser’s capabilities. Available at filimentgroup
• If browser fails tests, serve “basic” version with “Safe CSS”
  • No floats
  • No dark text on light backgrounds
  • No background images
  • No positioning
• If browser passes test:
  • Add class “enhanced” to html element
  • Dynamically load CSS and JavaScript
  • Cookie the results
  • Provide link to low-bandwidth version (which will change cookie and remove enhanced class)
• If building widgets not included in jqueryui themeroller:
  • Replicate behavior before you extend
  • Proxy back to native control
  • Follow conventions and user expectations
  • Consider the mouse optional
  • Use WAI-ARIA

Jeff Croft – @jcroft – Beautiful Layouts Through Beautiful Type

This presentation was eerily similar to my Typography for the Web presentation, so here are notes on the other things that I found interesting during the talk.

• Absolute vs. Relative font-positioning: because page-zoom is now in most modern browsers, we can choose which one we want to use per situation. There’s always a balance between accessibility, ease of use, etc.
• Be careful of contrast! Pure black on pure white is usually too high contrast
• Tufte’s idea is that we should use the smallest effective differences for hierarchy. We don’t have to make huge differences in type to indicate hierarchy.
• Links need to stand out, but shouldn’t distract the reader.
• WP-Typography is a WordPress plugin that does hyphenation, gets rid of orphans, replaces with smart quotes and dashes, and wraps initial quotes for individual styling.

Jina Bolton – @jina – Mastering CSS Layouts

• Mastering CSS is really about mastering your workflow. Have a system for starting each project.
  • Idea: Keep content images and layout images in separate folders
• Comment your CSS!
  • Reference colors at the beginning
  • Use CSS Flags to organize sections
  • Make a “table of contents” so other team members know where to find things
• Balance readability and optimization
• Avoid using floats so that you don’t have to define widths for your elements; let elements use normal flow
• On outermost containers, set line-height: 0–then assign actual line-heights to your individual elements. This helps avoid gap-issues
• Sometimes using a “safe hack” is better than creating another stylesheet for something.

Lou Rosenfeld – @louisrosenfeld – Marrying Web Analytics and User Experience

• WA and UX people should not work in silos. They need to be managed and integrated together.
• UX is about the WHY: user motivations. WA is about the WHAT: user actions.
• It’s not useful to know what is happening if you don’t know why. Conversely, it’s not useful to know why users act if you don’t know what it is that they’re doing.
  • What are the most common search terms on your site? Why are people searching for these items?
  • Use these search queries (what) to drive your task analysis (why)
• WA use a top-down approach with data: defining metrics and analyzing them. UX use a bottom-up approach: looking at data to find patterns and conclusions. Both of these approaches are necessary! Top-down makes sure you’re achieving you goals, bottom-up catches outliers.
• Stay away from them middle data–look at the short head instead of the long tail.
• Canned reports such as Google Analytics are only a starting point. Use this data as an opportunity to do top-down and bottom-up.
• UX need to get comfortable with measuring the unmeasurable.
  • Measure your site content’s quality. Although this is subjective, use parameters and systems (currency, authority, popularity, feasibility) to objectify them a bit.
• WA need to get comfortable with stories: intuition and mistakes.