Category Archives: Software Development Process

Selling the Value of Design (or Design Research)

The Challenge

Aside from “which is better for wireframing, Illustrator or Omnigraffle?”  the most common perennial question on UX design forums and list serves is some variant of “how do I convince management to invest in design?”

The reason this question comes up again and again is that the answer is not what anyone wants to hear: it can’t be done.

You simply cannot convince someone with words that design (or design research) is a valuable approach to solving problems.

The only way a person comes to believe in the value of design is to feel it for themselves.  He or she must personally go through the transformative emotional experience of watching the human centered design process do the magic it does.  Nothing else works.

This would seem like an insurmountable problem: the only way to get a sponsor to support design is to have him go through the experience of the thing that he won’t support.

OK, it is a tough problem, but it is actually not insurmountable.  Here are the three approaches that have worked for me.

Testimonial

A fact of human nature is that, except for psychopaths, no person can ignore someone else’s emotions when confronted with them.  This means that one way to get a design skeptic to give it a try is to get someone else to share with him positive emotion about his own personal experience learning about the value of design. Of course, getting the testimonial, and getting it in front of the skeptic in a format they can consume are separate challenges you must solve.

Pilot Project

The words “pilot project” when wrapped around risk, give all stakeholders a way out should the thing go south.  You still have to find executive sponsorship for your ‘pilot project’ but this is more likely to happen when that executive can explain it upward and downward as a known and contained risk.

As An Alternative to Bupkis

In this approach, you must first identify something that is well and truly broken that design might fix.  If you prove consensus that you’ve identified a real problem, and particular one costing money and time, then your new approach of design, risky as it sounds, looks like a reasonable gamble in the face of no alternative plan for an ongoing and worsening situation.  Of course, this one is something of the nuclear option: you fail here (and if the problem is that hard you very likely may), you do not get a second chance.

Good luck.

On the relationship between system, interaction and business models

A very short post to share a simple formulation I have developed for explaining the relationship between the models I find most central in developing interactive systems.

First, a high level statement presenting the models and their relationship:

<business model><interaction model><system model>.

My meaning with respect to the “><” is that you can read this statement from left to right or right to left, or start in the middle.  This is because all the models are connected through feedback loops.

Your choice about where to begin depends on what you know initially, what most interests you, or what direction you want to drive change.

A presentation of the overall system of models in a tree, with more detail about their respective composition is this:

  • Business Model
    • Value Proposition
    • Cost Model
    • Revenue Model
  • Interaction Model
    • Conceptual Model
    • Object Model
    • Data Model
    • Error Model
  • System Model
    • Purpose
    • Objects
    • Relationships

And there it is.

Getting Started with Accessibility

The Challenge

The paradox of web accessibility is that learning how to achieve it is not very accessible!

The problem is figuring out where to start. While there are a number of obviously relevant standards and examples available online, it was hard for me, as an accessibility novice, to sort through these guidelines to help our development team construct a set of concrete tasks that would return the greatest accessibility improvement for the least effort.

As it turned out, the thing I needed in order to understand how to prioritize our efforts, was to spend a day and a half sharing our upcoming release of JasperServer with a customer and that customer’s accessibility consultant. The results of this experience were both humbling and encouraging. The humbling part was the discovery that in its current state our brand new interface framework was not very accessible. The encouraging part was that with just a few hours work, once I knew what to do, I was able to use the systematic nature of our new system to make significant accessibility improvements.

The key to all this, of course, was the opportunity to work with experts in a real-world setting, and to be able to make changes and test them in real-time. While there will be no substitute for this experience, I’ve distilled my learnings into the following list, which I hope could be helpful to any web designer trying to understand how to begin improving the accessibility of his application.

Comply with Keyboard Standards

Users of screen reader software do not ever use a mouse for two reasons. First, they drive the screen reader software through keyboard commands so leaving the keyboard is awkward. Second, the rapid movement of the mouse tends to overwhelm the screen reader software which cannot keep up with the rapid change in input focus. While JAWS (a popular commercial screen reader) does have a ‘virtual’ mouse that permits a user to simulate a mouse click via the keyboard when nothing else will work, this cannot be relied upon because it is not part of any general standard. As a result, in order to be accessible, all required user events must have keyboard equivalents. In addition, these keyboard equivalents should meet the standard expectation (e.g. return key follows a hyperlink) to make them most useful and intuitive.

The key point here is that by using the screen reader experience as the baseline design context, we will also achieve accessibility for the larger community of users who are sighted but must, or prefer to, use a keyboard and not a mouse.

Embrace ARIA

The ARIA standard (Accessible Rich Internet Applications) is being widely adopted by the accessibility community. We tested ARIA markup with two screen readers, JAWS and NVDA (an open source screen reader) and found that both were well along in supporting the ARIA standard by providing appropriate context-specific instructions when encountering ARIA markup.

In general, adding ARIA markup is very low risk as it takes the form of element attributes that have no direct effect on rendering or behavior. Some of the attributes—particularly those targeted at improving orientation (ARIA ‘landmarks’)—improve accessibility instantly. Other attributes, such as those associated with what ARIA terms as ‘widgets’ can’t be added until supporting interactive scripting is also added because these attributes cause the screen reader to announce behaviors that must be supported with custom scripting.

Add Headings

Adding heading tags to the markup was a simple and effective method for improving a screen reader user’s ability to navigate pages. We also learned that it was not a problem for the headings and the ARIA landmarks to provide essentially redundant information. Screen reader users have the ability to navigate by heading or by landmark, often switch between the approaches depending upon what appears to be working best and don’t have a problem sorting out any redundancy.

Provide Non-Visual Feedback

It is common now in web applications for a user event to trigger an update to only part of a page. While this change is generally obvious to a sighted user, it is completely hidden from a blind user. There are ARIA standards for dealing with this exact issue by triggering alerts that will be spoken by screen readers. These attributes must be added to any scripting that dynamically updates pages, or generates error messages and alerts.

Fix Links

Web applications can be written to assign HREFs to anchor tags dynamically. Unfortunately, anchor tags without HREF attributes are not recognized by screen readers. This limitation can be addressed by adding empty or dummy HREF attributes to anchor tags but the implementation must be tested in all target browsers as there is inconsistency in how browsers treat the placeholder HREF attributes.

Develop Internal Best Practices for Accessibility

One cannot create an accessible application overnight. It will happen over time as long as an organization has a development culture in which accessibility is given priority. This can be helped along with simple tactical steps such as ‘Accessibility Checklist’ for developers and more strategic ones such as requiring that QA personnel, designers and developers build up a comfort level with using screen readers for testing prototypes and production code. In order for this to happen along with other priorities the best approach will be to establish that accessibility is neither an afterthought nor a special case, but part of creating semantically sound markup that benefits all users.

Work with an Accessibility Consultant

To achieve more than perfunctory accessibility compliance it is crucial to develop an ongoing relationship with an Accessibility consultant. There are several reasons for this. First, building a culture where accessibility is a core value requires that development personnel meet and observe individuals who rely on assistive technologies. Second, while QA tests can be created to validate standards compliance, observing real disabled users is the only way to know if an application has achieved real world accessibility. Third, as standards and assistive technologies are still in a significant state of flux, any organization, but particularly one where the understanding of how to implement accessibility is immature, will benefit from advice and guidance from an expert source.

Conclusion

The reality of accessibility is that it is no different from usability or simplicity or any other system characteristic: it can only be achieved by making it an ongoing and central priority.

While this might sound as if accessibility will then compete with other priorities, in fact improving accessibility helps to advance the quality of the user experiences for all client applications. In essence, accessibility is about delivering markup to assistive technologies that is appropriate for those technologies. Seen in this light, there is little difference between designing for accessibility and designing for mobile or any other experience. In all cases what needs to happen is that the application server delivers to each interface client code appropriate to its particular capabilities. As there is no doubt that support for a diversity of devices is the future for all software applications, all that needs to be done to improve accessibility compliance is to always consider assistive technologies in the mix of supported devices.

Why Renovating the UI Layer is Hard

Summary

About one year ago I was extremely excited that my colleagues and I at Jaspersoft were about to embark on a re-design of the UI for our flagship product, Jaspersoft Report Server.

Actually, it was more than a re-design, it was a complete renovation of the UI layer.  All of our existing markup, styles and script would be replaced with a standards-based framework of our own creation.

I had conceived and sold this project to Engineering, Marketing and our senior executives because I truly believed this renovation was the required and foundational enabler for a host of initiatives.  Primary would be the development of a great user experience, but I also expected it would enable greater community involvement in our development process, more efficient development cycles, faster prototyping, and better stakeholder communication.

I still believe all that.

But man oh man, at what a cost!

The official project estimate was 6 months. My belief was that it would actually take 8. In reality, all said and done, it will take us 12!

We began the project with a team of 4.  We will end the project with a team of 12.

Words of wisdom from my former manager at Apple, Bob Baxley, ring in my ears daily. When I arrived at Apple (for my brief tenure there) the store website had just undergone a major re-design. Discussing that experience with me, Bob said “those of us who were here for the re-design feel more like it was something we survived rather than something we accomplished.”

With our UI renovation nearly behind me, I now fully appreciate the feeling that Bob was trying to explain.  I also have a pretty clear idea of why this project was so much harder than we expected:

  • We did not, and frankly could not, accurately understand the true amount of re-work that was going to be required
  • In trying to create a state of the art result, we sometimes had to innovate, but had not accounted for the time of the resulting iteration cycles
  • We could not always keep ourselves, or our internal partners, to the limited project scope we had set
  • We overestimated the efficiency that standardization would bring to the design specification process.

Rework

We knew from the outset that we were going to replace every single line of markup and css during this project.  We also knew we were going to replace the lion’s share of the javascript. We even anticipated that we would be creating a new kind of an ‘API’ between the javascript and the css selectors to be able to use class names to trigger certain UI behaviors (e.g. anything with class ‘button’ will automatically get mouse event handlers applied).

We actually did a decent job estimating this work, and we even structured the project schedule to include two entire phases devoted to designing the CSS/Javascript API and then testing it by building two workflows before applying the new framework to the entire product.

However, the piece we did not truly consider in our planning was the cost of re-writing all the logic embedded in the markup itself.  We are a Java shop, so we use JSP files to create the markup delivered to the browser.  In this project we did not correctly estimate the time cost to re-think, replace, and modify the logic in these files.  I think our mistake was to base our estimate on an extrapolation of our experience converting over a few pages.  The problems with this procedure were, first, that in our test pages we did not actually change all the little things we needed to change in the production version so we ended up with an overly optimistic effort/page factor.  Second, the ‘average’ page was a myth.  Every page took at least as much time to re-write as our ‘average’ estimate and many took far, far longer.

Cutting Edge or Bleeding Edge?

Our goal in this project was to create a modern UI framework, comparable in concept, if not scope, with YUI or Dijit/Dojo or MochaUI.  Why we rolled our own is another post, but the point here is that these things are still quite new and it isn’t always clear what is the best way to solve the various issues involved in creating them.  While we could rely on standards documentation to help us conceptually, transferring those conceptual ideas to an actual implementation involved innovation and risk.

For example, we had ambitious goals with respect to improving the accessibility of our interface during the re-design.  However, as we progressed we learned that without experience doing this work, ambiguity in the accessibility standards documentation meant that we spent a considerable amount of time debating the best implementation approach, testing ideas, re-doing work and even ultimately giving up on some goals as we ran out of schedule time.

Scope Creep

The agreed scope of this project was to renovate completely the interface framework, while leaving the fundamental application navigation and workflows intact.  In practice it turned out that we could not keep to this restriction for 3 reasons.  The first was simply that sometimes it was not possible.  Our new framework includes forward looking design concepts and interactions and in some cases we could not map our older, circa 2002 UI directly onto the new framework.

The second reason was sometimes it was just too painful to leave the old design in place.  For example in situations where it was clear that we could replace a 3 step wizard (complete with 3 page loads) with a single, reasonably simple form, we went ahead and did just that.  Each time we made this kind of usability improvement we cost ourselves the time involved in re-writing page logic.

Finally, our internal partners had trouble keeping to the original scope agreement.  During this project nearly the entire marketing team at the company turned over and the new team chose to re-open some of the design decisions we made with the previous team.  Discussing and implementing these changes cost us several man-weeks of effort.

Not Cookie Cutter

A major driver for this project was to improve the consistency of our interface.  The old UI had been built up over several years by different developers working without any design management so different sections of our product had different design conventions, interactions and even look and feel.

Our assumption was that cleaning up this inconsistency would be straightforward once we had designed and built a systematic layout structure and a standardized set of components.  In practice we found that the application of these standards to our existing pages and workflows was more time consuming than we expected.  As we began to convert pages we found that we were missing both layouts and components.  We also learned that even our augmented set of standards still only applied about 80% of the time–nearly every page had some particular feature that required some custom layout work or specialized markup.

There were also a few unfortunate cases in the oldest part of the application where what was expected to be a simple task turned into days and days of unplanned code re-factoring.  This occurred where our state of the art approach to  separating the logic, structure and presentation layers of the UI required us to untangle monolithic server code.  For example, in the section of our application that displays paginated reports, the trivial sounding task of making the pagination controls into a general component, instead of a custom element embedded in each report, took literally 10 times the expected effort.

Conclusion

Anyone who has ever been part of renovating a house has experienced the budget-busting moment when opening up a wall reveals an entirely unexpected set of existing conditions.  These painful moments serve as humbling (and expensive) reminders that it is simply not possible to anticipate all the risks involved in a truly complex project.

We discovered that a home renovation was an excellent analogy for our experience replacing the UI layer for JasperReports Server.  The project took far longer than we expected, and was much much more painful that we anticipated.  The outcome, however, like a lovely new kitchen, will be a pleasure to work with for years to come.

Experience Requirements Document

One of the most significant organizational challenges I encounter as a professional software designer is that, almost universally, the business environments in which I work do not have an established first class design document.

By this I mean there is no existing expectation in the product development process for a document that is intended to capture the design intent of the project.  There will nearly always be an expectation for a document capturing the business justification and market needs for the product–this is usually called the MRD or Marketing Requirements Document.  Commonly  there will be one or more engineering responses to MRD called things like the PRD (Project Requirements Document) or the TS (Technical Specification). And then there is some kind of quality assurance document, often called the QA Test Plan.

But, aside from Apple, I have never found at any software company for which I have worked either full-time or as consultant, a formal, first class design document as part of the established development process.  In this respect, software development is sadly unique.  Pick any other engineering endeavor and you will always find, built-in to the development process, an expectation for some kind of formal design documentation that has the role of conveying the visual and experiential aspects of the proposed project.

In my effort to enlighten the backwards software development world, I have championed the need to include design documentation in the standard project documentation. Generally the first question asked when I introduce this idea is ‘what would this document look like?’ Here, below, please find my latest version of the answer to this question.

Experience Requirements Document

About this Template
This template contains 5 sections. They are structured to present information ordered from highest level to lowest level of abstraction.
The document begins with a discussion of project scope, then moves to a context section that is intended to clarify the fundamental environment and constraints in which this proposed design must succeed.
After describing context, the final three sections are organized around the concept of a house.
The foundation section should define the basic concepts upon which your planned experience depends, in the same way that a house is utterly dependent upon its foundation in order to stand.
The framework section should describe the kinds of affordances, layout and navigation your experience will provide in order to meet user needs. This section is analogous to the framing, plumbing, wiring, fenestration, etc that provides structure, access and functionality to a house.
The finish section describes the presentation and labeling that combine to provide what the user perceives as look and feel. The analogy here is to the paint, trim, moulding, cabinet hardware and other details that are the things people actually touch and see in a house.
This document structure is loosely adapted from the work ‘The Elements of User Experience ‘ by Jesse James Garret.

Tips
  1. Don’t re-invent the wheel. If you can ‘complete’ any section of this document by referencing a previous project, or an existing element in the product’s UI framework, definitely do so!
  2. You don’t have to fill out every section. Some may not be relevant to you. Leave the heading, but note that no information is required.
  3. In general, focus on describing the new things your project is adding to the product user experience. Particularly with respect to the Finish section, you may find you are not adding anything that is not already part of the existing UI framework. If this is case, simply state this and be done. If however you are extending the framework, be very clear about how.

Scope

Design Issue

Explain the fundamental design issue that needs to be addressed with this project. You may be able to draw from the MRD here in terms of the business case or user scenarios.

Proposed Solution

Describe the design proposal in a nutshell. You’ve got the entire rest of the document to provide details so here just create the ‘elevator pitch.’ Just one or two sentences capturing the major UE impact and benefits.

Context

References

Links to relevant documents. Definitely include other internal planning docs like MRD & PRD but also any design references, examples of the experience you plan to create, etc.

Personas

If personas are defined in MRD then echo them here. Add whatever special circumstances or details are needed to improve the reader’s understanding of how these personas are relevant to the project, or how they constrain the UE design.

Primary

You MUST declare a primary persona.

Secondary

Optional but do include if considerations of other personas influence this experience.

Storyboards

Add links here to attached storyboards. If possible, indicate what use cases/scenarios the storyboards cover. If you can connect the storyboards to scenarios or use cases appearing in the MRD or PRD so much the better.

Of course you may include pieces of the storyboards or any other illustrations as clarifying images in any of the sections below.

Foundation

The foundation section should define the basic concepts upon which your planned experience depends, in the same way that a house is utterly dependent upon its foundation in order to stand.

Conceptual Design

Conceptual Model

What is the process or ‘machine’ the user must create in his mind’s eye in order to understand the basic logic of this experience? If you explain this by citing an existing standard model that’s good. If you need to define a new model, explain why.

Information Architecture

What are the basic pieces of this experience and how are they related hierarchically? How does data flow through this experience?

Language

What unique terminology is used by this experience? What is the domain of human endeavor from which this terminology is drawn?

Interaction Design

Interaction Model

What can the user do? How can he do it? If he pushes on this lever, what door will open? Again, cite an existing model if possible, and if not possible, explain why you need a new one.

Error Model

What kinds of mistakes can the user make and what are the planned mitigations for these errors?

Framework

The framework section should describe the kinds of affordances, layout and navigation your experience will provide in order to meet user needs. This section is analogous to the framing, plumbing, wiring, fenestration, etc that provides structure, access and functionality to a house.

Navigation Design

Orientation

What context does the user imagine himself to be in during this experience? How does he keep track of this context? Are there places where he may lose his context? Identify any modes in this experience and explain why they are required.

Wayfinding

How does the user move through this experience? How does he arrive here, how does he leave and how does he get back?

Interface Design

Idiom

What basic type of experience is this? Is it a designer, is it a viewer, or is it more like a blog entry? Can you give examples of experiences that this one will be similar to?

Modes

How does the user switch modes, how does he know what mode he is in?

Zones

Describe the basic display areas involved in this experience. Don’t forget to include overlays, inlays, pop ups, floating panels, etc.

Modules

Provide detail as required to explain the modules found in the zones you’ve described above. Do explicitly call out any modules that are new addition to the product’s UI framework.

Controls

Provide detail as required to explain the special controls found in any of the modules. In general you will only need to detail controls this experience will add to the product’s existing UI framework.

Finish

The finish section describes the presentation and labeling that combine to provide what the user perceives as look and feel. The analogy here is to the paint, trim, moulding, cabinet hardware and other details that are the things people actually touch and see in a house.

Information Design

Presentation

Describe how the information architecture is communicated and displayed to the user. Also highlight any presentation components or designs that are novel to this experience as compared to the existing product experience.

Categories

Identify the categories that are used to organize the information presented in this experience.

Visual Design

Standards

List with references all the standards you are following in this design.

Style

Identify any planned stylistic deviations from the standards cited above.

Colors

Define your color palette or any additions to the palette identified in the standards section.

Typography

Give examples of any typographic conventions or styles in this experience not already covered in the standards section.

Simple Storyboard Production Technique

This is a simple technique for transforming a set of images into a sequenced multi-page PDF storyboard.

Limitation is that it is Mac-only because it relies on Preview, the can opener utility that ships with the Mac OS.

  1. Create your storyboard images; you are on your own here
  2. Open 1 of the images with Preview, it doesn’t matter which one
  3. Open the ‘sidebar’ in Preview that let’s you visualize thumbnails of the ‘pages’ in the document; you’ll see a representation of your image there
  4. In the Finder, select ALL the rest of your storyboard images
  5. Drag them into the Preview sidebar
  6. If necessary, drag the images into the correct sequence
  7. Select ALL the images in the sidebar (tip: select the first, scroll to bottom, shift-click last)
  8. File > Print Selected Images…
    1. this option is usually ‘Print…’
    2. the fact that it changes when Preview is displaying, and you select, multiple images is part of the secret sauce
  9. In the resulting Print dialog, make whatever formatting changes you need (i.e. ‘orientation’)
  10. Instead of pressing Print button, use menu in lower left to ‘Save as PDF…’
  11. You are done; you now have a multi-page PDF of your images.

The added bonus is that not only can you share this file like any PDF, you can also easily present it using the ‘slideshow’ feature of Preview.

New Leaf at Jaspersoft

This week is my one year anniversary at Jaspersoft as User Experience Architect.

Appropriately, but coincidentally, this week we are beginning a new approach to integrating UX into the development process.

The New Leaf

This change in methodology is our response to a failed project: a visual redesign of Jasperserver, our flagship product. In this case ‘failure’ was a schedule issue: late in the cycle we realized that we would not meet our release target unless we pulled the redesign from the plan, and reverted it out of trunk.

There are probably 5 or 6 particular reasons why this project failed.  I think it would be useful to take these point by point in some future post. Today, however, I am more interested in how our experience is part of a more general issue: how do organizations combine user-centered design with the agile development methodology?

Faced with our recent failure in solving this integration we are making two fundamental changes:

  1. We are recognizing that not all projects are created equal. Many can be done in parallel but some must be sequenced before other development.
  2. Previously we managed all projects as in terms of requirements, design and production.  Going forward we are recognizing that we need to manage certain projects (see point 1) in terms requirements, design, user experience architecture, software architecture and production.

Recognizing the Special Projects

With respect to the first point, my initial guess as to what defines a project that must be done sequentially is one that creates a change in the object model of any software layer. A sexier and more compact formulation would be to say that architecture projects must be sequenced.

You might recognize such a project because it involves changing or upgrading a named framework.  Switching from a homemade set of Javascript utilities to jQuery is a good example. Upgrading to a newer version of Spring would be another.

Our ‘Visual Redesign’ project is another good example. At one level the architecture that was changing was purely visual: the visual logic of the pages, the color palette, the typography and the massing and organization of the white space. However, the true focus of the project was to change the markup structure in order to enable the new, beautiful and flexible visual design. This is the crucial point.  Once we agreed to change the markup, we were agreeing to change the DOM structure, and this meant invalidating many of the assumptions upon which the event handling scripting was based. This in turn made it impossible to move forward with almost any other work.

It’s the interface, stupid

The simple reason parallel development was blocked was that converting over to the new framework broke the UI.  We learned very quickly that a broken UI made it challenging to progress even on initiatives that were classified as infrastructure projects. The reason, obvious in retrospect, is that in the execution of essentially all projects the graphical user interface is the primary tool developers use to evaluate whether their changes are successfully meeting requirements. In addition, without a functioning UI, all QA testing, both manual and automated, ground to a halt.

As an initial mitigation we tried to maintain both the old and new UI environments simultaneously. Within two weeks of embarking on this program we realized that rather than reduce risk, the parallel approach dramatically increased it by literally doubling our development effort. Given that the business could not double our available schedule, maintaining two environments meant guaranteeing we would miss our target release date.

This all came to a head after a week in which the entire team worked long hours and yet we saw almost no meaningful progress on new features and zero reduction in our bug count.  At this point, even I, the primary cheerleader for the project, had to admit it was time to back out.

Three Heads Are More Rational Than Two

Following this painful but entirely rational decision (OK, maybe there was a little bit of yelling) we’ve begun looking at how we are going to get the Visual Redesign into our next release. As mentioned above, in addition to realizing a visual redesign is a special kind of project we have increased the body count at the planning table.  Whereas in round one we staffed the planning phase with just myself, the UX architect, and  a software architect, this time around we are including a third player: the technical manager.

Our thought is that this addition will produce two distinct benefits.  First, it means the cycles the software architect has available for this project will be devoted to the production of his most valuable contribution: a rock-solid interactive architecture.  This time he will not have to split his effort and allegiance between producing the best architecture and planning the steps involved in implementing it within the allotted schedule.

Second, including the technical manager from the beginning means that as soon as the frameworks begin to form, be they conceptual models or interactive frameworks, they will be critiqued by a third party who has no personal investment in the vision they represent, but is simply concerned with their tactical production implications. Our hope is that this practical critique will help trim the fat from the architectural visions without producing the compromise in ideals that occurs when talented individuals spar endlessly over the myriad important, but ultimately arbitrary, decisions that comprise a holistic and internally consistent vision.

That’s the theory, anyway.