Wednesday Aug 20, 2008

JavaFX Project Nile Screencast

Jeff HoffmanJeff Hoffman is a senior user experience designer working on JavaFX. He's been designing both consumer and developer oriented products since before the boom.

Check out my debut screencast!

I introduce Project Nile, which is a piece of the JavaFX story.  I then describe how it integrates a couple of well known designer tools (Photoshop and Illustrator) with the NetBeans JavaFX developer tools.  

Project Nile, like the rest of JavaFX, is currently in its Preview release, so I encourage you to try it out and post your feedback on the Project Nile forum.

 

You can see this and other screencasts on the NetBeans.TV site.

 

Monday Apr 28, 2008

NetBeans Accessibility Plugin

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.

Exciting news!!!

Have you ever dreamed of developing an accessible Swing GUI the easy way? Stop dreaming and checkout the new NetBeans a11y plugin!

Let's start from the beginning:

The xDesign team in Prague has a long history of cooperation with our local Czech Technical University in Prague, Department of Computer Science and Engineering. For example, together we built the first usability lab in our region, organized a local World Usability Day, and ran Czech SIGCHI. The last 12 months we also cooperated on the a11y plugin for NetBeans. The main goal for this plugin was to allow Java developers without any special knowledge of accessibility to develop accessible Swing GUIs in NetBeans.

After a year we are proud to announce the availability of version 1.0 (for NetBeans 6.0 and 6.1)!

How you can use it:

1) If you don't have it already, get NetBeans 6.0 or 6.1 from www.netbeans.org.

2) Download the a11y plugin from a11y.netbeans.org , or use the AutoUpdate (Beta) functionality built into NetBeans. If you downloaded it manually, once you're running NetBeans, from the pull-down menus go to Tools -> Plugins, select the "Downloaded" tab, and click on the "Add Plugins" button; then browse your disk for the downloaded plugin (nbm file) and select it.

3) Now, start the NetBeans GUI Builder (for example add a new JFrame file into an existing Java project.)

4) Go to the Window menu and select "A11Y Result Window". That's it!

plugin

Now, when you edit the GUI it will automatically be checked for accessibility. The findings will be sorted into 3 categories (Errors, Warnings and Infos), which will be described and also will have a suggestions on how to fix them. By double clicking on the findings, you accept the suggested fix (for example, double clicking a "Name" error would add an appropriate accessible name). More details (for example checking of tab-traversal) is described in the documentation.

Enjoy!

Many thanks from all of us to the Sun External Research Office for their financial support, Tomas Pavek (NetBeans engineering manager) for technical support, Max Sauer and Martin Novak - who wore two hats during the process (Sun QE and CTU students) and for their contributions and cooperation with all of the other CTU students.

Tuesday Jan 22, 2008

Design of the NetBeans download page

Jan Rojcek is the Chief Architect for the NetBeans IDE User Experience, and works directly with the Chief Product Architect at Sun's Offices in Prague, Czech Republic.

Recently we announced a new release of NetBeans IDE, so it seems like the right time to look back at the design of the new NetBeans download page I was involved with. When I started working on this project, it seemed like a straightforward design exercise. Put a few well-named and well-positioned download buttons on the NetBeans.org web site and you're done. I should have been cautious given the NetBeans team's desire for achieving excellent out-of-the-box experience. Here's how it all evolved.

The NetBeans IDE is a very large suite of software used by Java, C/C++ and Ruby developers. Normally we would just offer a single download option similar to other complex software like Office suites. But developers love speed and simple tools and we were also concerned about the download size of the suite which could have been a problem for users with slow and unstable internet connections. So we decided to explore the idea of distributing the suite in a way that would perfectly suit the needs of individual developer. And that's how it all began...

The Online Installer

The obvious idea was to give the user control of selecting individual NetBeans components for download and installation. One of the solutions was to use a so-called online installer. The user downloads the installer, and during installation selects components the installer then downloads and installs. Well, sounds like the right way to go, but not everyone is online during installation. We decided to pursue a Custom Download solution instead...

Custom Download

Another obvious idea was to let the user select the NetBeans components he or she wants to download right on the download page. The only design concern we had was around the fact that it wasn't a very standard way of downloading software. We were not sure if users would understand it and whether they could use it effectively. To find out, we did a usability study where we tested the download page prototype and it turned out to be well received. But a much bigger concern was the actual implementation of this solution as it either involved preparing all possible download combinations in advance (literally terabytes of data) or having an active server that prepares the download based on the individual user's request. As both approaches seemed a little too risky, we decided to try an "editions" solution...

Editions

This is basically a well known way of downloading different configurations, or "editions" of the same product. Each edition has a fixed set of components and the user downloads the edition that works best for him or her. We started with three editions called "Basic", "Standard" and "Full", and used a download page layout that looked like a table with each column representing one edition. That worked okay, but then we decided to align editions better with the needs of our target audience. We ended up with 6 editions: "Java SE", "Web & Java EE", "Mobility", "C/C++", "Ruby" and "All". At this point the table with 6 columns started to look like a brain teaser, which is not what we wanted for an easy product download. Thus we tried a List Layout...

Editions - List Layout

We tried many different layouts of the page to best reflect that the different editions are actually the same product. We also tried to communicate the difference between editions without the need to read the description of each edition five times to notice the difference. All that, plus a vertical space limitation as we wanted to fit all download buttons on the page without vertical scrolling (worse case was ~570px height on 1024x768 screens running Firefox with tabs open). As we were unhappy with the designs we came up with, we went back to the Table Layout...

Editions - Table Layout

The NetBeans Evangelists team felt like the table design best reflects "the only IDE you need" story and it also best describes the difference between editions, so we decided to improve it with better wording and rollover effects. Then we did a usability study and we were quite surprised that the study yielded great results. The download page itself was not an issue at all. Users quickly understood the concept and downloaded what they needed based on their preference. Eventually, we used it for the release of NetBeans IDE 6.0.

Recently we got some positive feedback from a user praising our great download and installation experience, as well as negative feedback citing confusion with the download page where at first sight the user wasn't sure where to click to download NetBeans.

Thinking about this design exercise again and looking at the statistics that majority of users download the "All" bundle, I would tend to say that we should really focus on making the full IDE suite faster, consume less memory, and have simpler menus which would allow us to get rid of the specialized downloads and end up with the simplest and easiest download page with a single download button.

Tuesday Nov 13, 2007

Designing a Color Scheme for Netbeans 6.0

Stepan Doubrava is an interaction designer located in Prague, Czech Republic. He is currently working on improving the user experience for SunStudio and other developer tools at Sun.

As NetBeans began to be a multi-language IDE, we realized it was necessary to make all the syntax highlighting in different editors visually consistent. While creating this new color scheme, I came across several different, and sometimes contradictory, requirements:

  • Lots of colors were needed for different tokens, but not so much as to make the editors look like a crazy fruit salad.
  • The colors needed to be bright and contrast enough so one could recognize the colors on various monitors, but not so bright as to irritate developers who stare at it the whole day.
  • A balance was needed between highlighting everything for expert users, or only the most important tokens for less experienced users, so that everyone could remember the meanings of all the colors.
  • The amount of bold text needed to be reduced due to it's poor readability while keeping the visual structure of the code.

As expected, I came across numerous arguments, where everyone had their own opinion on proposed colors and was eager to share it. In the end, though, we were able to agree on several points.

Here are some of those points and concepts that made it into the current design:

  1. All the spots requiring user intervention are wavy underlined. Errors (red underline), Warnings (yellow underline), Unused fields (gray underline), Deprecated (should have been brown underlined but I had to use the old syntax (black stroked) for deprecated as a trade off for the developers to accept the gray underline for unused fields. I am hoping to bring it up again in the near future.)
  2. Embedded or inactive content has a different background color. For example in HTML, code snippets in JavaScript or CSS Styles are in a sense embedded, therefore highlighted with a different background color as well as guarded blocks in Java.
  3. The selection has a light blue background but the selected text doesn't change its color.

Unfortunately, items (2) and (3) in some sense clash in the current implementation, because when embedded content is selected it has a blue background, which was different from the original intent of showing the original background + blue ... Hopefully we can improve this for the next release.

In the longer term, I believe the concepts used for these design decisions should be reviewed to address the points where we compromised, which would further fine-tune the implementation.

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.


Monday Jul 30, 2007

Blogging by Design

Nalini Kotamraju is a user researcher in xDesign, and a PhD in Sociology. She has a penchant for research methods and telling it exactly like it is.

Recently, I had a conversation with Anant Kartik Mithal, who is Director of xDesign (Software Experience Group) at Sun Microsystems, Inc. xDesign provides a wide range of design services for Sun's software products including visual and motion-graphic design, interaction design, usability reviews, user research, web development and assistance with accessibility compliance.

Nalini: Why launch Design@Sun, a blog by and about Sun's Software User Experience Group (xDesign)?

Kartik: xDesign does an incredible amount of absolutely fascinating design work. As I spend time talking to all kinds of people across Sun — designers, engineers, managers — I listen to the problems they're trying to solve, and the problems are simply fascinating. I think a lot of people inside and outside of Sun would be interested in them. It’s interesting to understand what problems people are solving and how everyone solves them differently. And it’s fascinating to see how people think through the solution process. Look at the design for Solaris’ start-up, for example. I would have done it differently. It’s wonderful to see an absolutely fantastic design that’s different than what I might have done. And the same goes for the work in the Tools space, in the Web Admin space.

Nalini: What kind of problems and solutions will Design@Sun cover?

Kartik: The designers in xDesign, for example, are looking at how we can turn Solaris into a modern operating system and what that means. How can we get the Solaris start-up experience to be fun? Something like start-up poses an interesting design issue. It’s something a user has to go through; it's not something the user necessarily wants to go through. This kind of design problem that’s a little different than those users encounter when executing tasks. If I’m using JavaFX to create an animation, I’m actually getting work done. But if I'm doing start-up and install, these are wasted steps. So how can you make them interesting for users? How can you give the user something back while they're happening? If you take our individual software products, they’re all very different. What we’re trying to do is be as similar as possible across our products. So if you learn to use one of them, you can learn to use all of them. That’s something we achieved in the productivity apps a long time ago, and we’re doing it in the admin apps now.

Nalini: What will people get from Design@Sun?

Kartik: We hope to share with our readers a bunch of interesting problems that Sun is trying to solve. A lot of our stuff is open source so people can follow along as it shows up and comment if interested. Sun is all about making our customers more successful and more productive. And design is all about supporting that.

Also, one of the things that some people have lost sight of is that Sun invests a great deal in its user experience. Whether it’s the hardware or the software. It’s very important to us. It’s very important to us that administrators are able to assemble and disassemble systems as easily as possible. That system administrators are productive with Solaris. That developers are productive with NetBeans. That everyone is productive with StarOffice. We want everyone to be productive.

We were at CHI this year, as we are most years. I was a little shocked when a few people came up to me and said that they didn’t know that Sun had HCI (human-computer interaction) professionals. Very prominent people in the field of HCI work at Sun. Sun has been very active in this field, and maybe this blog can provide people with a better idea of what Sun is doing in design and user experience.

About

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

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today