Designing the User Experience at Autodesk

Zero Touch and Electric Taste

by Ian Hooper

One of my passions is exploring the possibilities of human-computer interaction. Perhaps it is my background in industrial design, but there is something particularly interesting to me in the ways that we try to bridge the gap between our bodies and our machines. We are naturally high bandwidth, multi-sensory creatures and we are trying to send and receive information from a machine that is functionally deaf, dumb and blind.

If some of the researchers have their way, the future is going to be full of much richer exchanges between ourselves and our machines. I recently attended the CHI 2012 conference where I saw some great examples such as the ZeroTouch interface. Multitouch on our phones or tablets is not so new anymore, but it is still a rare thing to see on large desktop sized displays. The Texas A&M Interface Ecology Lab showed an evolution to an old touch screen technology which may change this situation. Using a ring of infared emitters and detectors, the team has been able to create an optical sensing solution that does not suffer from occlusion and precision problems like other bezel-based touch solutions. The ZeroTouch is fast, accurate, works on a large scale and unlike many other multitouch devices, is relatively low cost. The ZeroTouch system was originally shown at CHI 2011, where the largest display they had it working on was a 27” monitor. At this year’s event they had improved the performance and had scaled it up to work on a 55” plasma TV.

The ZeroTouch was also interesting to me because of the fact that it was a frame, and not a screen or surface. This is significant for a few reasons. Firstly, despite the growing number of multitouch displays coming to market, it will be years before any significant number of people have access to this new technology. Secondly, some people work in places that spend a lot of money to have color accurate displays. These people are not going to want to throw away that investment just to have a richer interaction modality. If the ZeroTouch were to come out as an after-market enhancement to your existing screen – and if the price were right – it might just bridge that gap between the installed base of dumb displays and the next generation of touch-enabled displays. Finally, being a frame is interesting because it does not necessarily need to be mated to the surface of a display. It can hang out front and allow for open-air gestures like you might see with a Kinnect. While it cannot sense depth per-se, it does open the possibility of something going beyond what can be done with a surface sensor.

Hand and arm gestures are a great way of enriching our interaction with computers, but for some researchers it is our sense of taste that has been neglected for too long. Hiromi Nakamura was part of the team from Meiji University who showcased concept devices that introduced electric current into food as it is being eaten. At CHI 2012 they had a cup that had a wire in a straw which would electrify lemonade as it was drunk, and a fork that had a variable slider to adjust the electrification of food on the fork. Through modulation of the electric current passing through the food, different reactions from our taste buds can be elicited. In theory this could mean tastes like the amount of saltiness or sourness could be dynamically adjusted by changing the electrical waveform and intensity. In practice I found that the natural sourness of the lemonade overpowered my perception of any change to the drink. The cheese on the electrified fork on the other hand really did taste different. While holding the cheese on my tongue with the electric fork, I could taste distinct changes in the flavor as I slid the control from low to high. It was quite a remarkable experience to have flavors change in your mouth without adding or removing anything. Unfortunately, the alteration was making the cheese simply taste more or less metallic – not exactly an appealing flavor.

The practicalities and value of allowing a computer to interface with our sense of taste may be questionable, but adding sensors and actuators to enrich our experience is a good idea. Already our mobile devices communicate across our visual, auditory and tactile senses. Maybe someday we’ll have dental implants that make us taste candy when our sweetheart calls.

Follow-up from "Agile UX Method Adaptation" half-day course at CHI 2012

by Desirée Sy and John Schrag

We would like to thank the attendees of the half-day course at the CHI 2012 conference, “Agile UX Method Adaptation,” for their energy, attention, and thoughtful questions.

As mentioned during the course, here are a collected set of references mentioned during the course, beginning with the refreshed series of slides:

• Slides from "Agile UX Method Adaptation"
  Desirée Sy and John Schrag, UPA 2011.
• “Adapting Usability Investigations for Agile User-Centered Design”
  Desirée Sy, JUS, May 2007. http://tiny.cc/agileUCD (or Sy_agile-ucd.pdf)
• “Case Study of Customer Input For a Successful Product”
  Lynn Miller. Agile 2005. 
• Agile manifesto
  http://agilemanifesto.org/
• Mike Cohn's site, http://www.mountaingoatsoftware.com/, has a lot of helpful information if you want to learn more about the Scrum flavour of Agile Development.
• “Interaction Designers and Agile Development: A Partnership”
  Lynn Miller. UPA 2006.  
• “Using Formative Usability Testing as a Fast UI Design Tool”
  John Schrag. UPA 2006
• “Using the RITE method to improve products; a definition and a case study”
  Michael C. Medlock, Dennis Wixon, Mark Terrano, Ramon L. Romero, Bill Fulton.
• “Formative usability investigations for  open-ended tasks”
  Desirée Sy. UPA 2006
• “Usability Testing with User Proxies: When is ‘Close’ Close Enough?”
  Desirée Sy. DUX blog.
• Recurring user studies
  “It's Not Rocket Surgery - First Fridays in the U.S. Government”
  Nicole Burton, Steve Krug et al. UPA 2010
• "Distributed Scrum Primer"
  Pete Deemer et al.
• "Taking Aim: The Power of User Experience Goals"
  John Schrag, UX magazine, Volume 7, Issue 1, 2008

 

My First Plug-In

My First Plug-In

by Lillian Smith

As architects become more knowledgeable about sustainable building design, they are becoming familiar with metrics such as Energy Use Intensity (EUI). EUI measures the energy a building consumes relative to its size and can be used to compare the energy use of different buildings. Users of our Conceptual Energy Analysis tools in Revit and Project Vasari are using EUI to compare simulation runs. Users often comment that an overwhelming number of results are returned by our analysis tools and they ask, "What do they all mean; why can't I just see this one EUI number really big?". They want a simplification of the complex data that we currently return which would highlight one particular piece of the data to make it easier to compare different designs.

 

 I am an architect and user experience designer and have been working on the Conceptual Energy Analysis tools in Revit and Vasari for the past few years. Through this process, I, like many of our users, have learned a great deal about building science and energy use simulation and analysis. Interpreting analysis results is an exciting area for our field because there are many new user experience paradigms to explore. In addition to learning about building science, I have also wanted to learn more development skills so I could build and experiment more quickly with my own UI prototypes. I thought that building a simple app to display the EUI number really big might be a good beginner's development project. The new Autodesk My First Plug-In Training and a class I took on Expression Blend gave me the skills to get started.

As I worked on the project I learned how much I don't know about coding and why people get degrees in computer science! I was able to build a basic UI in Expression Blend, but the back end was still difficult for me. Luckily, we had really sharp interns over the summer who were able to help fill in the gaps to get my little app up and running. It was fun to be able to make tweaks to the UI myself and get results from simulation runs in this simplified UI.  

Once the app was complete we handed it over to the energy analysis experts on our team to see if they might want to consider this prototype for use in our products. They brought to our attention some important points we had not considered. They felt that showing this one number in isolation, while seemingly simple and convenient, could lead users to incorrect conclusions. Just looking at EUI can be misleading. Actions like removing perimeter zoning from a building lowers the EUI, however this is actually harmful because it underestimates simulated energy use. EUI doesn't always paint the whole picture either: EUI can go down, but energy costs can actually go up if the mix of electricity (more expensive) and fuel (less expensive) changes. Our colleagues explained how important it is to understand the interplay of the results rather than just looking at a simple EUI number. We learned that while many users may want to see a simple number, they are better served by looking at a more comprehensive set of simulation returns.

While we ultimately decided not to include the app in this incarnation, in the future, I hope to build on the new prototyping and simulation analysis knowledge that this experience taught me. Then I’ll be able to redesign the app to include a wider set of simulation data that satisfies the user’s desire for better guidance from the data without sacrificing good building science.

 

 

 

HTML5 and CSS3 for Web Designers

by Alan Millar

Grab your popcorn, throw your dog a bone, adjust the lighting -- and otherwise prepare yourself for the briefest yet deepest of briefs on HTML5 and CSS3 and what it means to all of us in the WWW. In books one and two from A Book Apart, Jeremy Keith and Dan Cederholm put on a clinic about how HTML and CSS were dragged kicking and screaming into the 21^st Century. But before we go any farther, let us ascertain who you are and why are you reading this post, much less considering a deep-dive below the photic zone of markup and style?

I need to know if you really care WTF is the WHATWG? Do you lay awake at night replaying your carefully crafted argument for (or against) significant whitespace? Are you doing back-flips of joy because you may now wrap other elements inside a single a element?

So you’re moving from presentational to semantic markup but you haven’t found a way past the nuanced (and perhaps elitist?) comparison of b and strong, between i and em, and why big went obsolete while small survives. Before you even consider perusing the content of any web page do you nervously eye-track : ^ ? to your web developer toolbar to pre-verify that this hobo HTML has even validated???

May I ask what band was playing when you pulled off your first JavaScript rollover effect? When you dream, do your backgrounds scroll parallax in harmony with your dreamy electric sheep? Do you hanker for deep form styling? Waterboarding aside, are you gasping for subtly rounded corners?

If you answered yes, yes, yes to ANY of these questions, then the help you desperately need is at hand. So GET YOUR GEEK ON and read these books. Before I call your momma!

In HTML5 for Web Designers, Jeremy Keith begins with a wee tale on the fuss that led up to HTML5 (Chapters 1 & 2). He flies through the Rich Media markup of Canvas, Audio and Video in Chapter 3. Chapter 4 is the whatup on Web Forms. Chapter 5 is nothing much…(unless your idea of game on is the semantic web that everyone keeps Yammering about). Finally, Mr. Keith lettuce-wraps it up with a down-to-earth review of things you can actually do today in HTML5 without smoking your browsers.

CSS3 for Web Designers is by Dan Cederholm. Now hold on, because this guy is really, really into space travel. And I’m guessing wine. And definitely design with a capital Dribbble. But without doubt Dan is best known for his uncanny command of stylesheets, the lingua franca of the presentation layer. He is pretty funny too, with handcrafted topics like “Navigating the Moon”, “Hover-crafting”, and ‘The Disappearing Gnome” sprinkled throughout his book like extra butterscotch on a jam donut. Sit up and take note CSS design intern and let it be learned that ingrained in this briefest of tomes Mr. Cederholm dispenses sage advice not just on how, but also on when one should...</spoileralert>.

 

UX Matters: Knowledge / Importance Matrix for Wiki Project Coordination

Mike Myles and Karen Smith's article, "Knowledge / Importance Matrix for Wiki Project Coordination", was published in UX Matters on June 7, 2011.

The article centers on the Knowledge / Importance, or K/I Matrix, as a tool to,

• get a clear vision of overall project status at any given point
• know where to best allocate limited resources, and
• be sure you - as a project team member - are working on what you should be at any point.

A K/I Matrix is a two-dimensional graph with Knowledge on the X axis and Importance on the Y axis, where,

• Knowledge is how well a team understands a task, and
• Importance is the relative value of an item to project success.

Project teams collaborate at regular intervals in the development cycle to position work items in the K/I Matrix. In this way the team collectively agrees on relative value, and understanding of each item. This allows for more informed decision making.
 
Over the last year the K/I Matrix has been successfully incorporated into a number of projects in Autodesk's AEC group. It's proving to be useful in quickly building team consensus around project priorities, and making teams more effective in the process.
 
Read the article here.

Follow-up from "Agile UX Toolkit" tutorial at UPA 2011

by Desirée Sy and John Schrag

We would like to thank the attendees of our one-day tutorial at the Usability Professionals’ Association 2011 conference, “Agile UX Toolkit,” for their energy, participation, and terrific questions.

As mentioned during the tutorial, here are a collected set of references mentioned during the tutorial, beginning with the refreshed series of slides:

• Slides from "Agile UX Toolkit"
  Desirée Sy and John Schrag, UPA 2011.
• “Adapting Usability Investigations for Agile User-Centered Design”
  Desirée Sy, JUS, May 2007. http://tiny.cc/agileUCD [OR link: Sy_agile-ucd.pdf]
• “Case Study of Customer Input For a Successful Product”
  Lynn Miller. Agile 2005.  http://tinyurl.com/4xx8zle
• Agile manifesto
  http://agilemanifesto.org/
• “Interaction Designers and Agile Development: A Partnership”
  Lynn Miller. UPA 2006.  [link: Miller_AgileAndID_partnership.pdf]
• “Using Formative Usability Testing as a Fast UI Design Tool”
  John Schrag. UPA 2006 [link: Schrag_FormativeTesting.pdf]
• “Escaping the Design Traps of Creeping Featurism”
  Dong-Seok Lee, David Woods, Daniel Kidwell, UPA 2006.
• “Using the RITE method to improve products; a definition and a case study”
  Michael C. Medlock, Dennis Wixon, Mark Terrano, Ramon L. Romero, Bill Fulton. http://www.lutin-userlab.fr/gamelab/IMG/doc/Medlock-RITE.doc
• More on confidence levels at:
  http://www.measuringusability.com/wald.htm
• “Formative usability investigations for  open-ended tasks”
  Desirée Sy. UPA 2006 [link: Sy_OpenEnded_usability_investigations.pdf]
• “Usability Testing with User Proxies: When is ‘Close’ Close Enough?”
  Desirée Sy. DUX blog.
• Slides from "Big Picture Design without Big Design Up Front"
  Desirée Sy. Agile Roots 2010.

 

Powerpoint for Prototyping: Part 2 of 2

by Tom Vollaro

In the first part of this blog post I wrote about the advantages and disadvantages of using Microsoft PowerPoint as a prototyping tool. I also provided some low, medium and high fidelity examples. In the second part, I am going to delve into specifics of various techniques for creating these prototypes. Keep in mind, much of this could be done with other presentation tools (Apple Keynote, Open Office, and even Google Docs) but having worked on a Windows-only desktop application for five years, PowerPoint was the most readily available.

Hot Spots

 

Guided Hot Spots

 

Animation

 

Animation with Motion Paths

 

Animation with Video

 

Sharing Your Prototype

With your new prototype freshly minted, you are now ready to share it. For traditional user testing, this is straightforward. As long as you are testing with a dedicated machine (either in a lab or with a laptop in the field) you can just put it in front o the participant and click F5. If you need to share your prototype with remote colleagues or place it online for un-moderated testing, you are in luck. PowerPoint provides a wide range of export and publish formats. Here is a short list of the most useful:

• PPSX: Useful for distributing a fully featured slideshow to someone without PowerPoint. A download of a free viewer is required
•  Save to Web: You can save to Microsoft's SkyDrive, which allows you to edit and view a presentation on the web
• Other web options include exporting to PDF and/or uploading to SlideShare or Google Docs, but these convert the slides to bitmaps, so animations, videos, and hotspots will be lost.

I am curious to hear about other tools and techniques for creating quick and dirty clickable prototypes.

Recommending Net Promoter

by Erin Bradner

I have just one quick question for you:

"Would you recommend this blog post?"

Wait, I’m ahead of myself. Net Promoter fever is getting the best of me. Technically, I should let you read this blog post before I collect the one number I need to grow my readership.

Perhaps you've already been exposed to Net Promoter fever? The symptoms are:

• A compulsion to ask, "Would you recommend this product?"
• A maniacal classification of the respondents into three categories: promoters, neutrals and detractors
• Followed by an irresistible urge to subtract the percent of promoters from the percent of detractors to get your Net Promoter Score

Last month, my colleagues and I caught the fever. It all began when we used the Net Promoter method to analyze user satisfaction with a feature in our product.

We chose Net Promoter because we wanted more than an average satisfaction score. We wanted to understand how a specific feature, the L&T feature, factored into our customers’ total product experience. Through an approach called key driver analysis - frequently used with Net Promoter - we identified the experience areas that inspire customers to actively promote our product.

How and what did we measure? We launched a survey aimed at measuring customer satisfaction with discoverability, ease-of-use and relevance of the L&T feature.

We also included rating questions on overall product quality, product value and product ease-of-use. We then calculated mean satisfaction scores for each experience variable. Satisfaction is plotted along the x-axis in the chart below. Next we ran correlations between each satisfaction score and the question:

"Would you recommend this product?"

Those correlations are plotted against the y-axis in the chart below. We call the y-axis Importance because correlation to the question, "Would you recommend this product?" is what tells us how important each experience variable is to our customers. Moreover, it tells us what is important in a way that is meaningful to both our business and our customers.

The gist of it is that no one is going to recommend a product without really liking it. When we recommend something, especially in a professional setting, we put our reputations on the line. Recommending a product is admitting we're way beyond satisfied. It signifies that we are even willing to do a little marketing & promotion on behalf of this product. This altruistic, highly credible and free promotion from enthusiastic customers is what makes the recommend question meaningful to your business, and to businesses like Autodesk. Promoters are going to encourage others to purchase our product and are likely to re-purchase. Great products that ignite promoters are the products that drive the growth of our business.

I'm in the software design group, not in the executive suite, but I had to slip in the term driving growth to decode the method I referred to earlier as key driver analysis. This is because plotting satisfaction for the L&T feature against willingness to recommend showed us that the L&T feature is lower on the y-axis relative to the other measures. Since we have determined that satisfaction with L&T is not as important as willingness to recommend; it is therefore not as important to driving growth of product sales. At least not when L&T is compared to measures higher on the y-axis like product quality and product value.

            Figure 1 - Some graph data is simulated

 

Keep in mind; this analysis is not inferring there isn’t any work to be done on the L&T feature. On the contrary, the quadrants on the graph tell us exactly which aspects of the L&T feature to work on next. If something popped up in the upper left quadrant, labeled FIX, that would be the highest priority area. I've heard this quadrant affectionately called the FIX IT YESTERDAY! quadrant. Nothing showed up here, thankfully.

Still, we plan to invest design and engineering time on the L&T feature so our next priority will come from the LEVERAGE or MAINTAIN quadrants. We'll pick L&T RELEVANCE since that's what showed up there. Discoverability and ease-of-use of the L&T feature are in the HOLD quadrant so we'll prioritize those last.

Figure 2 - Some graph data is simulated

 

Next we got curious how much the user experience contributes to a willingness to recommend the product. We knew from previous research the strongest predictors to willingness to recommend are helpful, responsive sales support (in our case, resellers), and substantial functionality at a good price (value). We ran multiple-regression and found that the variables for user experience contribute 36% to recommendation scores (n=2170). Value and reseller support accounted for another 18%. Surprised by the significant contribution of product experience variables, we ran another multiple regression on a different data set (n=1061) and found the contribution of user experience variables to be 40%.

Now let's get back to the Net Promoter score. Or…let’s not. It turns out that calculating the net promoter score isn't as important as graphing and using the key driver charts. By graphing the charts over time, we see how our investments in key areas pay out. We can watch features move from the FIX IT YESTERDAY! quadrant safely into the LEVERAGE quadrant. Inspiring more customers to promote our product is what motivates us. It's not about the score; it's about how we use it. Try it yourself.

“I highly recommend it.”

The Road to XAML

by Matt Stein on March 16, 2009

Design teams working on projects that employ a purely sequential development process – such as the waterfall model – are challenged to deliver the right solution the first time. This is unrealistic with regard to user-centered design methods, which rely on an iterative feedback-and-refinement loop. On a sequential project, however, requests for changes to a design that is already in the Development phase are weighed directly against stability, performance, and overall completeness. What if designers could own more of the UI work that developers normally must do, for example change the layout of a dialog, adjust the look of a control, or change a few text strings?

Enter XAML.

XAML stands for eXtensible Application Markup Language and was created by Microsoft. It is currently the primary mechanism for declaratively creating the user interface in a Windows Presentation Foundation (WPF) application.  WPF is part of the .NET 3.0 framework. Why discuss these very technical things in a design blog post? The answer is simple: because XAML is designed for designers. It has other uses of course, but one of its main tenets is that XAML enables the separation of UI and logic (code).

That is a very powerful concept! In this and future posts, I will explain how a few of us at Autodesk are using XAML in our design process as a way to enable design refinement during the Development phase.

Separation of UI and Code

What does it mean to have a separation of UI and code? Typically in an application, code for the UI and code for the logic and data handling is tied up together. The two might be in separate files, but it doesn’t mean they are separate. The UI is created by using code. For example, code to create a button can look something like this:

Button okButton = new Button();

What if you want to change the location of the button or the appearance of all the buttons in a dialog? There is code for that too. Inevitably, as we refine designs through usability tests and customer validation, we create the need for someone to make changes to code. Using XAML, we designers can make our own UI changes without the need to rely on the programmers. Let’s look at some XAML to see a simple example of how this works.

XAML is XML and is stored in a file with an extension of .xaml. The following snippet of XAML adds a ingle button to a grid:

  <Grid> 

    <Button Name="myButton" Width="130" Height="35">

This is a Button

    </Button>

  </Grid>

This XAML creates the following output when displayed:

 
What if we wanted to add an image inside the button? This is easy to accomplish in XAML:

  <Grid> 

    <Button Name=”myButton” Width="135" Height="40">

    <StackPanel Orientation="Horizontal">

      <Image Width="30" Height="30" Source="icon-checkmark.gif"/>

      <TextBlock VerticalAlignment="Center" Margin="2">This is a button</TextBlock>

    </StackPanel>

    </Button>

  </Grid>

The updated XAML produces the following:

As you can see, most of the attributes in the XAML are easy to understand: Width and Height, for example. The basics are accessible enough for any designer to manage; more technically oriented designers can go deeper with XAML for additional control of UI elements.

So how does XAML help to separate the UI from the logic? Notice there is nothing in the XAML snippet that relates to event handling, which is still mostly handled in the code along with anything logic oriented. The look and feel of the user experience – ranging from the location of controls to rollover animation effects - is all handled in XAML.  Designers can even control button- click behaviors as long as the associated events affect UI elements that are also defined in the XAML.

A single attribute of the Button creates a bridge between the UI and the logic, which enables the separation. The ‘Name’ attribute (in this case “myButton”) enables a developer to handle all events for the button, for example the click event.  A developer makes changes to the click event in the code file; a designer changes the look-and-feel and location in the XAML file. The Name of the button in the XAML or the code file must remain unchanged by the designer or developer.

Many simple design tweaks such as change of location and appearance are easy with XAML, but these examples only begin to tell the story of XAML and WPF. In future posts, I will describe how designers use animation, control templates, data binding and styles in XAML to take full control over the user experience.

For a more comprehensive examination of XAML and the designer/developer relationship, check out this article by Karsten Januszewski and Jaime Rodriguez.

MindMeister - A New Addition to Our Toolbox to Support Remote Collaboration

by Jason Winstanley on March 13, 2009

Like many companies, we are being more mindful of our expenses. One challenge this creates is fewer opportunities for face-to-face interaction with our peers from across the company. With design sites on three continents we're constantly on the lookout for tools than support the engagement of remote teams in creative activities such as brainstorming.

We recently tested MindMeister from MeisterLabs. It is a Web 2.0 mind mapping tool that supports real-time collaboration between remote participants. Setting up an account was a snap, as was creating our first map, and giving team members access. With a group of 14 participating in a brainstorming exercise, the phone lines fell silent as team members became engrossed in adding and then organizing concepts. Surprisingly, there was little lag to interrupt our work; the tool supported the flow of the exercise well.

In three 15 minute brainstorming sessions, we generated over 300 ideas. I think we were all pleased with our first outing with the tool and expect to spend more time exercising its capabilities. What new tools have your teams been using to support design collaboration between remote workers?  Let us know.