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.
| Developers |
Designers |
| Code: DHTML, XML, JavaScript, PHP/JSP/ASP, HTML, CSS, Frameworks (i.e. STRUTS, JQuery), etc… |
Visual Designs, i.e. Photoshop, maybe Flash, Illustrator, Fireworks, etc… He generally thought of (and critiqued) static designs coming from designers. |
| Implementation Focus |
Inspiration Focus |
| Generally Logical |
Generally Creative |
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
- 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.
Triangle User Experience 