Friday Oct 24, 2008

Inspiration for Today and Tomorrow

today and tomorrow is a cool blog that provides design, art and technology inspiration. Thanks Pieter, I love it.

Matthias Müller-Prove is a User Experience Architect for Desktop Virtualization at Sun. Sometimes he blogs here – sometimes at Acetylcholinesterase.

Friday Oct 17, 2008

Twittering a Usability Test

We noticed that when the Labs were running user tests, we would see a flurry of email about status and schedule. Stuff that was highly relevant at the moment and then not at all. Material that seemed like it should be on ones twitter-feed not ones inbox. So for the last two user tests , we tried something new. We created a  twitter account for the user test , got a badge for it. We placed the badge on the website we create for the client-product group. Now we could tweet about schedule changes , status, and even how a session was going. In the beginning, the badge was a marginal element on the client page, but in a matter of hours, we moved it to be the main content area. Anyone with the twitter account information could put in the updates. They could do so from a variety of platforms. and 140 characters was just perfect for our short, transient messages. A good use of web 2.0  in the company. Now if we could twitter within the intranet... we could even share comments and notes this way !

Here are a couple of screen shots , to give you some idea of how this worked visually. 

Friday Oct 10, 2008

From Sketchpad to ILoveSketch

Quite some time ago, in the early 1960s, Ivan Sutherland developed an interactive sketching system. Even if you do not consider the bulky house-size computers of the time, Sketchpad remains a remarkable milestone in HCI. Here is a short clip out of a seminar by Alan Kay "Doing with Images Makes Symbols. Communicating with Computers"(Apple 1987) where he comments on Sketchpad:

 Now please fast forward by 46 years an watch what's possible today:

ILoveSketch from Seok-Hyung Bae on Vimeo.

Amazing, isn't it? (Source: IxDA-discuss

Matthias Müller-Prove is a User Experience Architect for Desktop Virtualization at Sun. Sometimes he blogs here – sometimes at Acetylcholinesterase.

Monday Sep 29, 2008

A quick review of is geared towards rapidly creating low fidelity prototypes, including screen flow between various pages.

I decided to give it a try to see if it would help me show the flow between various portions of a screen and its associated overlays.  I wanted to create a very rough and quick representation of the screen to show the main flow between  the screen and its overlays.

Here is my first impressions:

The good

  • Fairly easy to figure out how to use
  • The run feature is nice as you can test drive the screen flow
  • It supports layers for reuse of wire frames
The bad
  • Right now there is no help.
  • There is no way to group widgets
  • There is no way to copy whole pages to another page
  • Lots of bugs still - but its in beta
  • I wish it had more widgets like tables and trees 

Nice concept and worth looking at when it matures a bit.  However, I am not sure if it is really better than my drawing a rough storyboard of my screens...

A quick example of the running application:
(marked up with the Cursor stamp using Snag it)

1. Main screen as first shownMain screen as first shown

2. After selection of OK from Search Overlay


3. Showing Add Record Overlay

4. A snap shot of a page being worked on.  I am setting  what page the OK button goes to.

Andrea Joy Kendall has been a Graphics and User Interface programmer and designer for over 20 years. She is passionate about designing for the user. Currently she is working on a Mock Up for the Open Source project Mural, Master Index Studio as part of the SOA/Business Integration Composite Applications group.

Monday Sep 22, 2008

A Day in the life in the Usability Labs

Kristin Travis has been working in high tech as an interaction designer and usability engineer for more than 15 years. She is part of the xDesign team based in Menlo Park, California.

Have you wondered what's it is like doing someone else's job? Well,
I've decided it's challenging, interesting, and educational all at once.

As a user interface designer, I'm used to dealing with design challenges
and project issues, but what is it like to shift focus and walk a mile
in someone else's work shoes? I recently was given the chance to
find out, while our very competent Usability Labs Manager was out on
maternity leave.

In contemplating the quickly passing days (and some not so quickly
passing nights), my work life has definitely been different over the
last few weeks. In a nutshell, I've :

  • helped with the creation of a number of recruiting screeners
  • brought a new recruiting firm on board
  • become overly familiar with some financial processes: POs, invoices, gift checks
  • helped to provide primary or secondary logistical support for multiple lab studies

Here is what it's felt like most days:

Lab activities

Has it been worth it? You bet. In addition to seeing our Usability
Labs being used frequently by dedicated designers and
development team members, seeing how our customers use our products
remains a critical part of the design landscape.

Thanks to everyone who uses or supports the Labs in some way or another.


Monday Sep 15, 2008

Project Kenai Goes Live!

Jim Berney is a senior user experience designer working on Project Kenai.  Jim's been designing both consumer and enterprise applications for over 20 years.

Friday, September 5th, the switch was thrown to make Project Kenai live.  Given that over a year has gone by and lot's of hard work by all, it was an exciting moment.

Since one of the original goals for Project Kenai was to demonstrate web2.0 technologies, the project followed the Agile Development model.  Coming from 8 years of supporting the Java ES middle-ware products where design/development cycles could span over a year, the quick pace of the Agile model was something new.   Design cycles are weeks, not months, or even years.  Instead of one huge delivery at the end, the site functionality and UI evolve.  This allows a much longer alpha period where users can begin to engage with the site, and in the case of Kenai, create new projects and begin working with the features to provide feedback. 

The Project Kenai team set aside the time to perform usability testing after key milestones to obtain additional feedback and to validate design.  Two usability studies have been performed to date, one at the beginning of the private beta period and another just recently in July 2008 before the public beta began.  Also, Project Kenai is using an interactive tool from to collect user feedback in real-time, allowing users to submit, vote, and comment on issues.  Take a look at the preliminary results.

Assuming that user experience design is iterative, the Agile model fits nicely.  Instead of spending a lot of time delivering a fully designed specification (that is never right the first go around), you spend shorter durations of time working on specific layout, component, or page design.  In an Agile model, each new feature, component, or element of design is allocated into a design iteration (the team refers to an iteration as a sprint).  Each iteration is given a concise start and end date.

Deciding how to chunk your design into iterations requires some thought and planning.  In some cases, a single iteration may not be enough time to complete the design features allocated for that iteration.  For example, let's say you're designing the Search feature and how search results will be displayed.  This effort may require multiple iterations both for design and engineering.  Some chunks may also require longer periods of time than originally anticipated.  Leaving slack time in each iteration to support some amount of catch up from the previous iteration is a good idea.  If at all possible, use your bug tracking tool to capture and repackage the unfinished work from each previous iteration.  As you plan your iterations, assume design rework.  Design is going to change, and that change will have ripple effects throughout your interface.

The Agile Model doesn't come without challenges.  Since design is approached as a series of chunks, each containing a discrete set of features, an overall design road-map is important.  Otherwise, your design will come across as piece meal and may not fit together well at the end.  A style guide (brief specification) and set of design templates (e.g., using Illustrator or Visio) can help ensure your design stays on track.  As decisions are made, the style guide and templates are updated accordingly.  I have found that using a wiki to post wireframes, design rationale, and team discussions to be a quick and effective means of communicating.  The wiki, coupled with the wireframes and style guide become the design specification for the project.  Since each project created in Project Kenai is provisioned by default with a wiki, I was able to create a xDesign project, then use the wiki for specification.

Your design road-map must include the visual design for the project.  Once you start to move a design from wireframe to implementation, some level of visual design is assumed.  Thus, unless you plan on lot's of rework, effort should be spent in the beginning of the project to ensure that your visual design is adequate for the first phase of the project.  This is not to say that visual design will not change, but that site-wide changes are major and will disrupt an Agile model.   Each rev of your visual design should be planned and scheduled into the project delivery.

Another problem to guard against is "style creep", where you start off using one style for component design or layout, then as the design matures, the style creeps or morphs into something else, leaving your site with inconsistent look and behavior and requiring a lot of rework across the site.

Reusable components may seem a no brainer, but selecting, customizing, and implementing them isn't.  Since Project Kenai was unlike any other web project at Sun, there wasn't a style guide or UI toolkit just sitting on the shelf waiting to be used.  Everything had to be redefined.  Sure, you can attempt to use third-party widgets and toolkits, but rarely do they just drop in to your design.  Finding and implementing the right components is a critical dependency and must be scheduled.  This was in stark contrast to the Java ES environment where there was an established style guide (Sun Web Application Guidelines) and toolkit (Woodstock).

Early on, the Kenai Project organized a UI team (referred to as a scrum in the Agile Methodology) that included interaction design, product marketing, and engineering.  This team meets at the beginning of each design iteration to specify and design new features, pages, and interaction for the upcoming design/development iteration.  Wireframes are produced that allow the team to visualize and refine the design.  Once the design is approved, engineering begins implementation.

Over the past year xDesign has worked as an integral part of the Project Kenai team to lead the user experience design.  This effort has included user research, conceptual and page level design wireframes, visual design concepts and production artifacts, usability testing, and much of the html/css markup embedded in the rails applications to implement each page.  Design and change take time, but the Project Kenai team is dedicated to collecting and taking action on user feedback.  

Now that Project Kenai is in public beta, the next few months will be spent refining the navigation, refining the layout of key pages, implementing usability enhancements, and enhancing the visual design.  Watch the beta evolve with each new build!

Sunday Sep 14, 2008

Bill Verplank sketches metaphors

That was quite a remarkable evening, Bill Verplank presenting at BayCHI on Sketching Metaphors. First of all his presentation style. He had an overhead camera connected to the projector in a way that the audience could follow all his actions on the desktop. This gave him the flexibility to simply point to images in a book, show his note cards, or develop (and explain on the way) something entirely from scratch. For example on the image above Bill describes the origin of the window scrollbar and the dead metaphor of an elevator for the thumb control in the bar to the right [metaphors in italics ;-) ]

In a closing section he provided an enlightening diagram on various computer paradigms.

The computer as a tool you can use, the computer as media for information sharing and communicating with each other, and the computer as an intelligent person to interact with. If you go a step further the tools become vehicles, media becomes fashion (take Apple's iPod as an fashion statement for example), and person becomes life – and ecosystem of self organizing systems.

Thank you Bill, for this framework of computer paradigms.

>> The entire photostream can be found at flickr.

Interaction Design Sketchbook by Bill Verplank

Matthias Müller-Prove is a User Experience Architect for Desktop Virtualization at Sun. Sometimes he blogs at Acetylcholinesterase. Sometimes he doesn't.

Monday Sep 08, 2008

Page Thumbnails for UI Design

Early in a UI design project, it's efficient to be able to quickly arrange and rearrange the high level navigation and flow of the application or site without getting mired in the details of each page. You can accomplish this by drawing plain old lines and boxes with descriptive labels, but odds are that you have a general idea of what you expect the page to do, e.g., it is a form, or a table listing a bunch of objects, or just a page full of text. It's at this point in design where Page Thumbnails can come in handy. Basically, these are just shorthand visual representations of particular types of pages that, unlike a plain old boxes, imply functionality or purpose of the pages. Drawing the navigation flow using these makes for a more informative and visually compelling view of the proposed design.

I created an initial set of Page Thumbnails as an OmniGraffle stencil. OmniGraffle is a Mac application that works great for wireframing, page layout and vector-based drawing. One cool feature is that it allows users to create custom stencils of reusable objects that can be dragged off of a palette and into your document. The stencils can then easily be shared with other users via websites like You can read a bit more about it and download the Page Thumbnails stencil from Graffletopia.

Here's a snapshot of the thumbnails as they appear on the stencils palette:

Page Thumbnails Stencil

These were created based on my experience in web application design and in messing around mapping some existing sites, but the stencil is certainly not complete. The applications that the xDesign group designs at Sun share a lot of common structure (e.g., navigation schemes, page layout) and this constrains the set of thumbnails needed -- so a small set can go a long way. Web sites, on the other hand, are far less constrained in terms of purpose, scope, navigation, etc., and so the potential set of representative thumbnails is broader. To make this stencil (and the method) more broadly applicable, I included a couple of blank objects on the stencil that can be customized and saved for reuse.

I put together an example of a fictitious site to illustrate the idea, and you can see a bit of that below. The full example is also available as a pdf file.  I hope you find the stencil useful. Feel free to leave comments/complaints/questions in the comments section.

Example of Page Thumbnails in action

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.


Wednesday Aug 06, 2008

JavaFX Preview Release

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

Sun has released the preview version of the JavaFX SDK. JavaFX is a client scripting technology for creating rich Internet applications (RIAs) with immersive media and content across the multiple screens of your life (that currently means the web and Windows/Mac OS X desktops, but will soon include mobile and TV as well).  You can create applications that look like these:

StockWatcher (JavaFX Sample App) 

JavaFX Clock Sample

The xDesign team has been involved in creating the developer network website that you can check out here. We have also worked with numerous writers and engineers on tutorials and samples to show off some of the great features of JavaFX.

Of course, you'll need to have the Java runtime on your system, and the beta of our upcoming Java 6 Update 10 release can be downloaded from here (click on the first orange button labelled JRE 6 Update 10 Beta). And we've already blogged about our involvement in this release.

If you're a blogaholic, then click on over to the JavaFX Blog for lots of interesting stuff.

Wednesday Jul 09, 2008

Livescribe 1GB Pulse™ Smartpen

I recently purchased the 1GB pulse smart pen. In this bog, I want to focus on my initial concerns and reaction to the product.
I had two concerns about the smart pen that I could not test before placing my order. Those related to the design of the pen and it’s recording quality. I was worried that the pen would feel awkward and bulky and that the recording might not be as good as advertised on the product website. After viewing all the demos on, I decided to take a chance and proceed with the purchase of the smart pen.

The cost of  $149.95 was reasonable for what it was promising to deliver. I felt that it would be a valuable tool to use in a virtual work environment. What excited me about the smart pen was partly the interactive note taking ability and mostly the focus on how this might help enhance collaboration and concept sharing. I wondered what it would be like to share and transform design concepts in an interactive manner where others would not only see the end result of a design but be part of the thinking process that went into it. They could then share their thinking in a similar manner, go back in time and hear my voice as I was outlining a concept for a design. The possibilities were too exciting for me to ignore this technology and not place the order. So I did.

After 4 week wait, the Pulse smart pen arrived at my door. I eagerly opened the box to find a well-designed pen with setup instructions. I couldn’t wait to get started. I was pleasantly surprised to find that the pen fit comfortably in my hand. I didn’t feel constricted or awkward when I began to interact with it. The user experience in regard to setting up the device was fantastic, simple and to the point and yet engaging and playful. With each tap of the pen, I heard myself say: “how cool is that” or “did you see that” and “I can’t wait to share it with…” I found myself responding with the eagerness of a child that just got their new favorite toy. It was great, I was beginning to worry and think that this is too good to be true.

As I continued to interact and setup my pen and explore all the various features, I was impressed with the sound quality of the recordings. Whenever I was not sure about a task, there was an icon that I could tap on that would give me clear, simple and straightforward instructions. What a relieve; somebody actually has taken the user experience into account here. The entire setup process of the pulse smart pen was excellent in its simplicity and ability to engage the user in play. My compliments on the team that design this, it really is fantastic from a device standpoint, marketing and branding message.

Another aspect that I found very interesting in regard to the integration of the device into ones life was the integration of 3D audio. Imagine, you don’t only record what is happening in the room but can also define where a particular sound is coming from. If someone were to sit behind you and begin talking, you would sense that in the playback of the recording. It gave the sense of actually being there in time and really did create a 3D experience of space and time.

Once my Pulse smart pen was set up, I was ready to just doodle and explore the navigational schema. It too was as intuitive and fun as the previous setup process. I was fascinated to be able to draw a menu anywhere on my page and have it actually be recognized by my pen. I felt a sense of freedom of choice and a sense of integration that I have not experienced before. It really did feel like I had access to technology that was seamless and transparent and yet empowering me to be creative and unique in my expression.

Unfortunately, there were a couple of shortcomings that I will go into more detail with in the next blog. Those relate to actual audio recording quality and the software UI design. The audio recording constraints were somewhat expected. When I was just recording my own voice as I was taking notes, the sound quality was excellent. It still remained at a good level with three people talking next to each other, but when testing it in a conference room, the sound quality dramatically dropped. It was difficult to make out some of the voices that were further away. Surprisingly this is not a deal breaker for me since I have found a lot of other wonderful means of using this device in a more intimate setting that focuses more on collaboration then note taking in lecture halls.

What was more distressing is the UI design on the software front. It lacked the out of the box thinking that I had experienced so far. I felt that few of the navigational schemes and user experience/expectations where taken into consideration on the software front. I was disappointed since my expectations were set very high by now and this portion of the interaction felt like a let down. It didn’t capture any of the intuitive and transparent navigational schemes that were introduced earlier. There is a level of complexity and lack of intuitive play leaves the user much to be desired.

Sunday Jun 29, 2008

Recent redesign

I have been working on Java deployment for more than 2 years, and it always happens that the web site is updated just in time for the JavaOne conference. Last year, we improved the download user experience and slightly rebranded the web site; this time was similar.

Actually, I would be lying if I said that this time was not so different. It was -- we were requested to do more changes in a shorter timeframe than last time. However, we succeeded! The big thanks should go to a lot of people who contributed to this effort, especially to Mary Kawahira, who really made the difference. She was working through nights and days to make this project a great success. 

This time, we rebranded the whole web site and further simplified the download user experience. In addition, we removed distracting things from the user's flow and made some other small tweaks. For those who have never visited or who do not remember the previous design, I enclose screenshots (before & after) of the home page. 

previous design of page Current design of page

There is still a continuous effort to further simplify the download user experience and make the web site more simple and useful.

For those, who have the Deployment Toolkit (part of Java 6 Update 10 release which should be available around September; Beta is already out) installed, the user experience will be further simplified. This simplification is for those who run Windows and is not related just to the download flow, but also to the help pages where we will ensure users get the most appropriate information without any effort. We are going to have a user study for this project this week, so we will know more after that. Meantime, I can share some screenshots of the help pages that users are going to evaluate.

The first image shows the suggested appearance of a new help landing page (current design can be found here),

suggested help landing page

another one shows the suggested appearance of a help page when a category is selected (current design can be found here).

 suggested help page 2

If you have any comments or questions on the design of, please comment on this entry. 

Jindra Dinga improves the deployment experience of Java for both developers and end users.

Tuesday Jun 24, 2008

Build social applications with Zembly

After more than a year of being in stealth mode, Zembly was launched earlier this month. As the interaction designer on the project, it was fun being part of a talented and driven team to deliver a platform for easily creating and hosting social applications. Using just your browser and your creativity, and working collaboratively with others, Zembly let's you create and publish Facebook apps, Meebo apps, OpenSocial apps, iPhone apps, Google Gadgets, embeddable widgets, and other social applications.


Zembly provides several features that allow you to get started quickly building social applications. Applications in Zembly consist of widgets, which are reusable pieces of user interface, and services, which are reusable server-side logic that ties everything together. Using just these two concepts, you can create social applications that run in many of the major social networking platforms. You also have access to what other users create on Zembly and the large number of APIs and data from anywhere on the web. These are available contextually from a find & use pallette while you build your application. Results from leading web API providers like Amazon, Flickr, Google, Twitter, and Yahoo appear alongside remixable pieces and parts from other zembly users. Just click to add the line of code that lets you call that provider from your application.

Zembly is in private beta mode and there are still invitations available. Go over to Zembly to know more about the product and to request an invitation. There is also the Zembly blog where you have access to documentation to get you started building widgets and applications. The Zembly team is always looking to improve the product, so your feedback is always welcome. Let us know of your experiences with the product at the Zembly forum or at GetSatisfaction. If you are on twitter and would like to follow Zembly, head over to the Zembly twitter page.

zembly_pic     Prasant Sivadasan is the user experience designer for Zembly

Tuesday Jun 17, 2008

Tools: Learning with Lynda

Recently I've been going through some of the tutorials at If you haven't heard of lynda, or haven't checked it out lately, you should take some time and look around the site. There are tutorials for all levels of expertise, and just about any tool you've heard of has been covered.

So far, I've gone through some of the content for Flash and Dreamweaver. Both of these tools have some excellent tutorials, and the presentation is very good. I've found though, that in the attempt to cover these tools comprehensively, I end up skipping around looking for the bits I don't know while trying to skip the bits that I do.

One of the nice things about the site is the way they've organized their content. Each tool has several tutorials aimed at users with different experience levels. For instance, the Flash tutorials focus on Actionscript, Mobile, Illustrator, and Flash in general. In each case, selecting a tutorial gives you a very nice table of contents for that "class". The "chapters" are organized well and generally fit my expectations.

In my case, as I knew very little about flash I chose to start with Flash fundamentals. As I began the tutorial, I quickly figured out I couldn't do these "start-to-finish" like I might normally take a class. What I learned (outside of new bits of Flash goodness) is that the sections for beginners generally cover all of the functionality in the tool, so users who've done work with other similar tools (like MDI based windows) will find these bits are called out and explained in painful detail.

The flip-side to this is that in order to learn something quickly, you need to skip some of the individual sections like "Understanding file types", "Exploring the toolbar" or "Working with ...". For me this was quite frustrating as I typically like to master the basic disciplines (with anything I do) before moving on to the more advanced bits. I'm usually just a little paranoid that I'll miss some tiny, innocuous step that then enables some of the more advanced functions.

What's worked for me here is using a different approach to absorbing the tutorial content. I'll find a section I'm unfamiliar with and start after the bits about "Understanding...", "Exploring...", etc. Usually the "Using..." type sections are just about right. In some cases I've found there's that innocuous bit that I don't know and can't infer from context, and so I'll stop the tutorial I'm running and go back to the section that covers what I missed.

Overall this is a new way of learning for me, somewhat uncomfortable, but none-the-less effective. It seems to take less time to get something new, but it's definitely not a linear learning process. I expect as we become more accustomed to using computer-based training, we'll also start changing the way we learn new things. "Change" still seems to be the only thing that doesn't.

Loren Mack is a design architect in xDesign who creates strategic and tactical designs for the Service Oriented Architecture/Business Integration group at Sun.

Monday Jun 09, 2008

How did our JavaOne talk go?

JavaOne 2008 is done...and there are lots of good memories. Jindra and I spent the week learning and practicing our talk, as well as wandering the pavillion and attending sessions. Our slides can be accessed here on the JavaOne Online site (note that you will need to log in as an Sun Developer Network member to view the slides -- registration is free and you won't be spammed so go for it). Also check out the slides for the other User Experience related sessions (TS-6929 Creating a Compelling User Experience, TS-6470 The Layperson’s Guide to Building a Better User Experience, and TS-5500 The Desktop Java Technology Lovers Survival Guide)

Speaking at JavaOne is totally exhilirating. Our session took place in a large room and was well attended. This year's JavaOne enabled folks to "pre-register" for each talk for guaranteed admittance, so we watched the number of prospective attendees grow during the week. In the end, about 600 folks signed up and 500 actually showed up. Neither of us has presented to this large of an audience before (we were really excited last year when our BOF had around 150 people). Since we were both new to delivering a technical session, we went through the material much more quickly than during our rehearsals. Next time we will be better prepared by making sure we have some extra material in case we finish too early -- it's easier to keep talking about stuff than to make things up.

Jeff and Jindra during Q&A

Here is a photo of us during the question and answer period of the talk. We definitely have a bit of that "deer in the headlights" look. One disadvantage of having your talk scheduled on Friday of JavaOne week is that you are nervous with anticipation for pretty much the entire conference. There are certainly benefits to presenting early and getting it "out of the way".

JavaOne attendees have high expectations, and since this year's conference featured a set of good user experience sessions, we were in very good company. Our audience was very supportive and we didn't lose many people after we started talking... If anything, I believe the folks wanted more details than our 101 level talk provided. Once we've reviewed the feedback on our audience response cards, we'll start planning for next year's session and take their comments in to account.

If you have some ideas for user experience topics that would be of interest to the wide range of Java developers who attend JavaOne, we invite you to leave your comments on this blog.

Jeff Hoffman is the lead user experience designer for Java Standard Edition.

Jindra Dinga devotes his time to improving the deployment experience of Java for both developers and end users.


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


« August 2016