Todd Wilkens (from Adaptive Path) presented a full-day workshop on design research for TriUPA on  Friday 2/20/09.

Todd introduced Adaptive Path’s design research process, emphasizing the importance of qualitative, contextual research.  He argued for focusing on people’s behaviors, motivations, and meanings (as opposed to a more traditional user research focus on tasks, goals, and preferences).

Here are some ideas I took home from the workshop…

Approach and framing

• One’s attitude to the research process is important. Research shouldn’t be “scary”—it’s just “going out and talking to people.”
• UX practitioners should embrace the “messy complexity of human life,” and look for behaviors, motivations, and meanings. Todd argued that using this type of language/framing—as opposed to traditional usability language of tasks, goals, and preferences—reinvigorates design practice.
• Adaptive Path won’t do projects without time and access for stakeholder interviews. They rely on these interviews to unearth assumptions, benefit from good ideas, identify landmines, and find misalignment within the client organization. They deal with conflicting stakeholder views by presenting the alternative views objectively, and helping stakeholders reach a consensus or decision.

Research methods

• Be creative and open when brainstorming research methods. Todd told workshop participants to “consider illegal ideas”—I found this approach helped to broaden my thinking, as our group considered unusual approaches such as wiretapping and disguising a researcher as a taxi driver.  These off-the-wall ideas can lead, in turn, to divergent but practical (and legal!) approaches.
• It’s important to think about the experience of research approaches and methods from the participant’s perspective. Is a survey going to be time-consuming and out of the context of use? Is an interview trying to address topics that are too personal?
• People fundamentally want to tell their stories… they just need to be in the right context to do so.
• Give team members–particularly clients–a clear role to play when conducting interviews. For example, if a client comes to a field interview with the research team, give him a camera and ask him to take photos.
• Debrief after field interviews using a summary sheet of the key, high-priority research questions guiding the project. Have each interviewer review these questions individually, noting relevant insights from the fieldwork, then discuss as a team.

Suggested resources

• “Recruiting without fear” report

Please add your thoughts, questions, and resources in the comments!

Cheers,
–Abe
VP, Professional Development Programs // TriUPA

TriUPA recently organized a viewing of the Rosenfeld Media webinar, “What Every Designer Should Know About Interface Engineering.”  Thanks to Brian Russell of Carrboro Creative Co-Working for hosting this event!

TriUPA member Scott Boggs of RTI has kindly provided a recap of the webinar.  Thanks, Scott!

The talk was basically conveying a developer’s perspective to designers (e.g. visual designers). He generally did not consider designers as the folks doing the front-end (HTML/CSS) code; but rather, the ones creating the static visual design/layout and perhaps some interaction design.

1.  The Site is Dynamic

Photoshop is static and thus can limit thinking, web sites and applications are not. Prototype early and often. Consider the dynamic nature of the site as an opportunity and challenge, not as a problem.

• Dynamic Content:
  • must “integrate content and make it functional”.
  • Suggests reading “Scalable Design” article by Luke W.
  • Must account for potentially long titles (dynamically generated).
  • Must design for potentially large data sets
• Dynamic Layout:
  • Some designs allow user to affect layout
  • Fluid layout—what happens when you resize browser
  • The visual design must account for these
• Dynamic Interaction:
  • Design for the interesting moments up front
  • Prototype, Prototype, Prototype!!!
  • Consider “micro-moments” within larger interactions, i.e. each state during a drag and drop interaction.
• Scalable Design:
  • Ensure the design can scale if/when site content grows/changes
  • Suggests book “Designing Web Interfaces” which discusses 12 screen patterns

2.  Technology is Critical

Designers must understand the “magic” that brings design to life, and difficulties such as:

• 14 known IE6 layout bugs
• 63 different rounded-corner techniques
• 9 ways to layout columns
• 3 browser rendering engines
• 34 ways to improve performance
• Etc…

Thus, opt for markup based designs; move away from graphics-intensive design. Plan for “spriting”—more efficient use of images. [ Here’s an article on spriting. ]

• Example: Netflix’s star rating display used to use an image file with 51 lines of stars that moved to display different ratings. Thus when they modified something, they had to update the 51 sub-images. Now they use 2 images—1 of 5 blank stars, 1 of 5 full stars. They position the full-star image over the blank stars and adjust the width of the full star image to display more or less of it. They can show more states with less images.

Designers should know how stuff gets used: he suggests using Firebug (FF add-on) to explore elements.

Know what is challenging, i.e.:

• Vertical alignment
• Rounded corners and drop shadow
• Columns aligned at bottom
• Pixel perfect widths
• Specifying max/min width
• Taming IE6
• Hard to layout against browser flow
• Height is harder to control
• Etc…

Tips

• Know what technology can and can’t do.
• Not all designs cost the same
• Know what your engineers can and can’t do.

Plan for quick, early iterations and test the prototypes.

Ultimately, “the most important thing is to get things done”;  i.e. don’t be a CSS (or other kind of) preacher.

3.  Components are Key

Components and template mean reusable modules, templates, layouts, etc… Developers tend to think in terms of reuse; designers tend to want variety. Components generally refer to reusable chunks of code, templates to a reusable visual designs  (and also the HTML/CSS code to display it).

• Embrace Components—design for each component and its reuse throughout the site.
  • e.g. Netflix maps all pages into templates, and have named and defined the sections on each template.
  • e.g. the display of DVD covers with “Add/Play” buttons is a component reused throughout the site.
• Embrace Grids
  • It’s the right way to design anyway
  • Grids map to templates
  • Reference grids and components in visual designs
  • Suggests book, “Principles of Beautiful Web Design”
• Component/Template resources
  • Blueprint CSS framework
  • Yahoo User Interface Library, i.e. Grid Builder
  • PLUM: “a new, free, all-in-one “magic bullet” for ColdFusion developers.”
  • 960 Grid System—similar to Blueprint
  • jQuery—“jQuery is not hard for designers to pick up to add behaviors and interactions to pages”

4.  Partnership is Imperative

“The magic happens with collaboration.” “Communicate and iterate.”

Communicate:

• There is a power to naming things, i.e. a name contains a concept.
• Explore or develop pattern libraries
  • e.g. Yahoo Developer Network Design Pattern Library
  • Be aware of “anti-patterns” like “hover & cover” (pop up content that hides important elements, like a link or button)
• Suggests a book “The Non-Designer’s Design Book” [ probably more for developers ]
• (Designers) “talk to your engineers.”
  • They hold weekly roundtable to throw around and explore new ideas and also to air frustrations and difficulties.
• Practice transparency—get your design “into the wild”. i.e. make it visible, let it generate conversations, print it huge and post it in hallways or meeting rooms.
• Make designs URL accessible, not trapped on a hard drive somewhere.

Iterate (Prototype):

• Can use Keynote, PowerPoint, Flash, Fireworks, jQuery, [ or paper, or other methods ] to make prototypes
• e.g. Netflix created 150 variations on a button prototype (in 1 week) and then tested/accessed them before choosing one.

5.  Yes, We Can.

Given ongoing advances in technology, interface engineers have the power to say “Yes” more than ever.

• IE8
  • has accelerators and visual search
  • is fully CSS 2.1 compliant
    • CSS based table layouts more functional
    • Fixes margin collapsing
    • Fixes the “hasLayout” issues
• Safari/Webkit
  • Has more CSS goodness
    • i.e. masks, reflection, canvass drawing, gradients, marquee
  • Safari 4 just released
  • Generally font-scaling is now being handled by newer browsers
• Chrome
• Firefox 3.1
  • Faster JavaScript engine
  • Support for HTML 5
  • PRISM
  • “Weave”—pushing metadata into “Cloud”
• Yahoo Browser Plus
  • Rich web app.s with desktop features
• HTML 5
  • Canvass tag
  • Offline storage
  • Drag and drop
  • Etc…
• Silverlight
  • Rich set of controls
  • Zooming
  • Rich media support
• Flash 10
• Flex for Flash Platform development
• Adobe Air
  • Blurring lines between web and desktop app.

Expect to see more rich media and video integrated into web sites/apps.