Monday Jan 14, 2008

Easily Skinnable Swing Components

Dusan Pavlica is a senior Interaction Designer in the xDesign group. He moved from Prague to Los Angeles to support SOA/BI team, but he is working on JavaFX project currently.

The main idea of skinnable Swing components came up after James Gosling's presentation of Matisse (new GUI builder in NetBeans) at JavaOne 2005. Some people from audience were really excited about cool components used in the demo of the MP3 player. The components looked like rounded buttons with nice skins and completely different than the typical ugly Swing components. I would say the presentation was successful because of the cool look of the components.

So then, within the scope of the Innovation project (project focused on innovative ideas and design approaches in Prague's xDesign Group), we were thinking about some improvements of Matisse related to the ability to change components' skins easily. Then Jan Taus joined our team and was willing to work on it as a part of his Master's Thesis. I led him to implement it in a way that the user can re-skin a component easily without needing to write code.

He created an experimental NetBeans plug-in, which allows the user to set new skins of components in a visual way without coding. The user can prepare skins and even animations in a visual editor (e.g. Photoshop) and then can easily apply them to components in the Theme Editor.

There is a screen shot of the Theme Editor:

Some example of buttons in a new skin:

We presented all of the results of our research and experimental version of the Theme Editor to the NetBeans development team. They were interested in it and we discussed how to utilize the idea of easy skinning in NetBeans and the JavaFX project too. In my opinion, the improved version of the Theme Editor (e.g. its UI can be polished or it can be integrated into the Matisse better) could increase the popularity of Matisse or support the success of JavaFX.

Sunday Sep 16, 2007

Simplifying Web Services Description Language (WSDL) Editing

Leon Barnard is an Interaction Designer in xDesign, who is working on SOA/BI and NetBeans products. He recently moved from Los Angeles to Prague and is enjoying Czech food and not needing a car.

My job as an interaction designer is to create designs that help users accomplish their tasks more quickly and/or more easily. Sometimes this is done through surface-level changes like adding emphasis to frequently used actions, adjusting spacing and layout, or by using clearer instructions. The most successful projects, however, often involve taking a very complex task and changing its components so that achieving the desired result becomes less complex. This is much more difficult to do, yet more fun and rewarding. New Web Services Description Language (WSDL) EditorI was recently tasked with making the development and design of WSDL files easier. Since the task is so complex, I wanted to try to devise a better way of accomplishing it that would help novices learn the technology, as well as help experts focus on what they care about most.

WSDL ("Web Services Description Language") is a complex language used to create web services. Web services are computer programs that can be used by many different organizations or individual programmers, to perform a function they can’t perform themselves or perhaps that they don’t want to try and recreate themselves. An infinite variety of transactions and queries can be conducted quickly and efficiently without requiring any special software or network configuration. WSDL has a standard format for taking a request, processing the request, and then providing a response to the source of the request. The processing part is where a company, like Google, would provide its program’s function (called a “service”, or “web service” in this world). While the format is standard and predictable, it’s also created with the computer, not the human, in mind. So the syntax is relatively complex and unintuitive for most less-than-expert folks.

These characteristics of WSDL syntax distract users from their primary task and add confusion, especially for novices. The precise 'what', 'how', and 'where' that the user is concerned with takes up relatively little space in the code. Ideally, this content would take precedence, and the rest would go to the background or, even better, be handled "behind-the-scenes" automatically.

Our design addresses these issues. The biggest change that we made to the existing editor was to move to a more visual, connection-based presentation. In this way, users can see, even at a glance, which pieces were connected to which, allowing them to follow the stream of connections across the file. It prevents errors of mis-typing the names of objects to be connected, because creating a visual connection automatically writes the appropriate code for the user. Next, the core 'what', 'how', and 'where' elements are represented as salient visual objects that draw the user's attention, while the container objects are shown simply as dotted lines surrounding their contents. These visual representations allow users to easily see what they care about most, yet also understand how they are grouped. Finally, some workflow improvements were added to train novice WSDL users and save time for both experts and novices. These include: dragging-and-dropping from a palette, previewing valid drop locations, automatically creating objects and their containers (if necessary) when a connection is made, prompting for necessary configuration information when certain types of objects are added, and being able to collapse groups of objects that are not being worked on, among others.

In summary, the new design offers the following benefits:

  • Uses a flow/connection-based model for visualization.
  • The focus is on the meaningful elements (not the "container" elements).
  • Follows the principle of "recognition rather than recall".
  • Drag-and-drop for faster and more intuitive use.
  • Multiple steps can be performed at once.
  • Is more discoverable and approachable for novices.

Here are some more snapshots of the new design:

New Web Services Description Language (WSDL) Editor
New Web Services Description Language (WSDL) Editor
New Web Services Description Language (WSDL) Editor

xDesign is a software user experience design group at Sun.
Follow us on Twitter : Flickr : Blog (see feeds below)


« July 2016