Yahoo! Developer Network
Interaction Design + Art Direction + Evangelism
YUI Rich Text Editor
The Yahoo! User Interface Library (YUI) is an open-source repository of utilities and interface elements that allow a web developer to add complex features to a web page. Written in JavaScript and CSS, the library aims to provide modular code snippets that deliver consistent results on a wide range of web browsers.
Designing the interaction paradigm and visuals for the Rich Text Editor was a very different experience because the final product is not a packaged solution, but rather it is a set of APIs for other developers to build with. The design work I did was done hand-in-hand with YUI developers so that we could translate design attributes and patterns into API calls.
The process of distilling my design into a set of APIs began with a series of design explorations. Core elements such as the toolbar and object panels were iterated and alternate concepts were generated. Once a set of options had been designed, I analyzed each element of the design to extract the most primitive underlying thread. From the primitive thread it was then possible to create each kind of design direction by specifying attributes and customizing the display.
One example of this technique is the object preferences dialogue. In its most primitive thread, all that needs to happen is for the system to display a dialogue when object preferences need to be configured. The type of dialogue, however, may be a panel that points to the object, a modal container, or a drawer that slides from below the toolbar. By working closely with the developer, the API was constructed in such a way that any of these options may be defined with little effort.
While much of the interface allowed for easy customization, some parts did not. The core behavior of how text is selected, what happens when commands are issued with no text selected, and interaction with screen readers for the visually impaired, were designed to function in a logical manner. Since this is not a new problem to solve, the bulk of the interaction leveraged patterns readily used in popular word processors and operating systems.
Article: Challenges of Interface Design for Mobile Devices
The Apple iPhone breathed new life into the development of content for mobile devices. While iPhone is capable of rendering complex web pages, several devices already in use lack this ability. I wrote an article, published on the YUI Blog, that discusses the constraints and challenges of designing for mobile devices.
The article asserts that understanding context of use is a primary need for any designer. If the design is to be used on a wide range of devices, one needs to also understand the limitations of each device's event capturing model. That is, a Windows CE device may permit dragging objects onscreen, but iPhone reserves dragging for top-level page scrolling, and some devices lack the capability altogether.
Evangelism: Building a Pattern Library
I am a key member of a team that instructs organizations how to build and use a design pattern library. Our all-day seminars are targeted at large corporations and design agencies that require a system to help ensure design consistency across all facets of their products.
The session is divided into three parts: history of and lessons from the Yahoo! Pattern Library, pattern components and categorization principles, and increasing productivity and efficiency. The latter portion is delivered by me and covers the following topics:
- Design assets and documentation as part of pattern definition
- Adding links to code snippets
- Usage of code libraries
Upcoming Session: IA Summit 2008 - Preconference Seminar