Tuesday Jan 29, 2008

Didn't get what you wanted for the holidays?
How about some new UI components?

Back in October, I talked with Chip Alexander and Karen Stanley about the Sun Web Application Guidelines going public. This move was to support the open source development of the Woodstock component set. Both the guidelines and the UI components had been under development for many years inside of Sun, and last year, they were made available to everyone else.

Then, in December, while everyone else was finishing up holiday shopping and attending parties, the team who creates the components and the most dedicated of the folks who write the guidelines were hard at work on their 4.1 release, which was quietly published on December 19th.

What's new in the Sun Web Application Guidelines, you ask? Quite a few components were added to the existing set, most of which include functionality using AJAX technology. Not all of these designs will be incorporated into the 4.1 Project Woodstock components. Some will be added later, while others will be phased in progressively.

So, as my Dad used to say ... especially after the holidays ... don't say we never gave you anything ;)

Monday Oct 15, 2007

The Sun Web Application Guidelines go public!

A few weeks back, I had the opportunity to sit down and chat with my colleagues, Chip Alexander and Karen Stanley, about the Sun Web Application Guidelines.

Picture of ChipChip Alexander is the User Interface Architect for Sun's Web Applications and co-led the user interface design for the Java Look and Feel Design Guidelines: Advanced Topics.  He has 21 years of experience designing intuitive user interfaces and leading user interface design teams, 6 of them here at Sun.

Picture of KarenKaren Stanley is the former Project Manager of the Web Application Guidelines, and has been the lead for making the guidelines available externally. She has worked in the HCI field for 20 years, with experience designing software applications and user interface components, usability testing, and project management.

Jen:  Chip, Karen, how do you describe what the Sun Web Application Guidelines are?

Chip: They are a set of building blocks for web applications that have been designed by user interface specialists, thoroughly thought through and usability tested.  They can be used for developing full web applications, allowing designers and developers to focus on their application's particular needs rather than the design of all the controls and elements inside.

Jen: So how long have they been under development at Sun?

Chip: Over six years -- they were started by Robin Jeffries (now at Google) and Tom Spine (now at AutoDesk). The guidelines came first and then the User Interface Review Board (UIRB) was established to help ensure compliance with the guidelines.

Karen: Tom and Robin started seeing applications built for the web, but every group in Sun was designing them differently. Tom saw an opportunity to align the look and feel of web applications at Sun before things got too out of control, so Sun could show a single face to the world.

Jen: Over the years, who else has contributed to the guidelines?

Chip: I've been the architect for the team for the last 5 years or so, and the project management was done by myself, then by Karen Stanley, and now by Liz Clayton. We have the full list of contributors included in the guidelines.

Jen: I know that the guidelines have been Sun-internal all this time, so why are we releasing them now?

Karen: The project Woodstock components are available under an open source license, but there are no guidelines on how to use them. We wanted the open source community to benefit from the guidelines. We've had a close relationship with the Woodstock team during the development of the components — there's been a lot of give and take, back and forth.

Chip: The Woodstock web app components are based on the guidelines, which explain the specifics of how and when or where to use them. The benefit is that web app developers can draw on our design expertise and years of work, giving them more time to build their applications.

Karen: And to see how the designs were intended to be used. We're trying to share our internal work, so that anyone using the Woodstock components will have examples of the components being used in context. The guidelines provide numerous screen-shots showing the components used in the context of an application.

Jen: So why not publish the guidelines as a book, like Sun did with the Java Look and Feel Guidelines?

Karen: The environment is changing. Mary Lautman, the manager of the Woodstock team, has been asking for these guidelines to go public since the components went open source. The amount of work it would take to publish the guidelines as a book is prohibitive. It would take too long — they would be out of date as soon as they were published. This way, we can update them more quickly. The guidelines can be revised as the Woodstock components are revised. Not creating a book and instead releasing our work to the public allows more agility for Sun and ensures that web app developers always have the most up-to-date tools for building their applications.

Jen McGinn is an interaction designer in xDesign who is working to improve the user experience with the Java Enterprise System installers. She has an MS in Human Factors in Information Design and works out of Sun's campus in Massachusetts.

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

Wednesday Aug 01, 2007

Deconstructing the www.netbeans.org Redesign

Jiri Mzourek is a senior manager in xDesign, responsible for Sun Developer Products and SOA/BI. In his spare time, he evangelizes usability in the Czech Republic by organizing SIGCHI meetings, World Usability Day, and working closely with the Czech Technical University on usability and accessibility related projects.

In May of 2006 Jan Rojcek began a redesign of the netbeans.org web site based on the results of some out-of-the-box usability tests that we'd conducted. You can find one example of the test on our opensource website ui.netbeans.org.

The main issues were:
  • The design didn't work well for a new visitor (potential user)
  • To see a NetBeans screenshot, a visitor had to select the correct link from the 42 available links on the home page, and 38 links on NetBeans product page
  • A visitor had the same problem (choosing the right link from 42 or 38) when trying to get to a comprehensive feature description
  • There were 4 pages describing what NetBeans was (First time here?, IDE, Switch, About)
  • Download took at least 3 well-aimed clicks
  • Usability study findings:
    • 3 participants (out of 8) couldn't find how much NetBeans cost!
    • 5 participants reported missing screen shots and too much text on the web site
    • 3 participants reported they had to browse too many pages to find basic information

With this (scary) list of issues, Jano got a "go" to go ahead with the redesign.

He worked with the stakeholders (NetBeans engineering, marketing and webteam) to agree on the main goals of the redesign:

  • New visitor (potential user – not currently using NetBeans) is our primary target
  • Make the basics clear
    • “What is it NetBeans?”
    • “How much does it cost?”
    • “What is so good about it?”
    • “Why should I start to use it?”
  • Make download straightforward
  • Make NetBeans.org more attractive
The redesign was focused on the homepage, product page, download page, docs and support page.

Jano created the first sketch of the new homepage:

He sent it to Leos Tronicek (a visual designer), who created two options:

Stakeholders picked the blue one. So Jano, Josef Holy (another interaction designer) and the NetBeans web team fine tuned that one and created a prototype, which was put on staging server.

So, what was next? Of course, Jano wanted to make sure the redesign met the design goals, so he created a script for a second usability study, which was then conducted in September 2006 by Jakub Franc (a user researcher) and Josef Holy. Sorry, that test report is not public, but here is a list of the main issues found with this design for the homepage:

  • The upper banner with the main download button seemed to be ignored by significant number of participants.
  • A majority of participants complained that information on the homepage did not inform them about NetBeans sufficiently. They expected "short", "summarized", "introductory", "high level" information about the product.

Based on those results, Jano polished the design:

The new website was launched on October 30, 2006, on schedule.

For NetBeans 6.0 there will be couple of new changes, driven mainly by simplified NetBeans packaging and download. We'll get rid of the whole "Add-on" section which will mean updating the layout of the whole front page. Details are still TBD.


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


« October 2015