Category Archives: design process

FAQ: Digital Machine Theory 0.5beta

What is Digital Machine Theory?

It is a method I am developing to teach systems design to interaction design students.

I believe the theory demonstrates how to connect classical systems theory of the Forrester/Meadows school to the practice of interaction design.

The primary assertion is that interaction design may be understood as the design of a digital machine defined in terms of cybernetic principles.

Huh?

I am not familiar with the terminology used to describe Digital Machine Theory.  Do you have a plain language presentation?

Why yes, I do!

I have prepared a series of 6 short lectures that explain the theory in plain language:

  1. What is a system?
  2. From System to Software
  3. The Conceptual Model
  4. The Interaction Model
  5. The Object Model
  6. The Data Model

What is the value of digital machine theory?

I propose the theory has value as:

  1. a theoretical framework to train individuals in the basics of software design practice
  2. a communication framework for planning the design or redesign of a software application

How did you come to develop it?

It is an outcome of my work as adjunct professor at California College of the Arts Interaction Design Program.  I teach a course called Systems to undergraduates.

Why are you calling it a beta release?

Because I am a nerd.  Also because I feel like beta sets an appropriate (in my world, at least) expectation for the quality level of both the theory itself and the materials I have put together to explain it.  I think it has some good bones, but the whole thing needs some banging on still.  Do so and send me comments, timsheiner at gmail.com.

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.

Sleeping Slots

Preamble

If you are a homeowner in San Francisco, then you have had this experience:

You wander upstairs, though a door you’ve never seen before and find an entire room in your house that you always knew had to be there but had never been able to find before. You are thrilled at how this space will improve your quality of life.  Then you wake up, realize you were dreaming, and remind yourself how charmed you are by the cozy victorian in which you live.

Manifesting the Dream

My family of 5 shares 3 bedrooms, 2 baths and 1500 square feet.  By world standards this is exhorbitant and I’m not complaining, but my twin teenage boys were feeling pretty crowded sharing a 120 square foot bedroom.  As one of them put it, “we’ve never had any privacy, not even in the womb!”

This summer I decided to try to find my boys some privacy by turning that dream of found space into reality.

Here is how it came out.

First, you walk into the bedroom and see two John Malkovich-sized doors, one on the north wall and one on the south.

IMG 2974

Open one to a glow of natural light.

IMG 2977

Poke your head in to a clean, cozy space with lights, outlets a skylight and enough space to lay out comfortably.

IMG 2967

Turn and shut the door behind and you are in a quiet, peaceful and very private space.

IMG 2971

The Details

Step 0: The Space

Where did I find that space?  Well, I took advantage of an odd detail of my house.  As you can see called out in the photo below, the bedrooms upstairs  do not occupy the same footprint as the lower floor, leaving these triangular shaped spaces on either side of the bedrooms.

 

HouseMarkedUp

The spaces on both sides had access already, in one case through a cupboard in the bathroom and in the other through a closet.  This was actually pretty important because it permitted me to get in there and inspect the situation, convince myself the resulting finished space would be useful, and plan my approach, all without having to do any demolition first. Here is what the space looked like before the project began. Pretty clear why they call it ‘unfinished’ space.

From the inside these spaces were about 10 feet long, and a little more than 5 feet wide with the roof sloping up at a perfect 45 degree angle to join the wall at the same distance of just over 5 feet high.  Cozy, sure, but finished out, this would be plenty of room for a twin mattress, a small bookcase and a few other personal items.  I decided that if I committed to also putting a skylight in to both spaces, these would end up being functional and pleasant private spaces for the twins.

Step One: The Rough Openings

The first step to the project was to cut the rough openings in the walls where the final doors would go.  This was essential because, of course, eventually I’d need the doors, but more importantly it would let light and air into the spaces so I could work in there without suffocating.

Here’s a first view where I’ve already pulled the baseboard.  I managed to get the baseboard out intact and was able to re-use it at the end of the project.

In this view, I’ve put down rosin paper to protect the floors.  The trick here is to first lay down the removable blue tape, and then use duct tape on top of that to hold the paper down.  That way, when the project is finished, you can just pull the blue tape up and duct tape and paper comes with it without hurting the finish of the floor.  I’ve used this technique in the past with great success but the lesson I learned on this project was stick with the 3M branded products.  In this case I used off brands of blue and duct tape from Lowes much to my regret.  The duct tape didn’t stick very well, so I had continually re-attach the rosin paper and the blue tape stuck too well, marring the floor finish when I eventually removed it.

In this view I’ve framed the rough opening from the inside, but have not yet removed the lathe and plaster.  I had to cut through several studs and wrestle them out to create an opening wide enough for a doorway: lots of sweating and cursing.

Here you can see more clearly the studs I had to cut through resting on the header I made by doubling up 2×4′s.  I thought about making the headers out of 4×6 stock but I did some rough load calculations and convinced myself that though perhaps a little lightweight, this approach would be strong enough to support the few feet of wall above the opening and the associated roof load.

The next step was to remove the lathe and plaster in front of the newly framed openings.  I laid out the edges of the openings with blue tape, both to serve as a guide to cut along and also to help hold the plaster left behind in place.  The best way to proceed is to take a utility knife and, beginning with light pressure, score the plaster repeatedly until you cut all the way through it to the lathe underneath.  You will go through plenty of blades in this process.

Once the plaster is cut all the way through, you strike the center with the flat a hammer and watch in satisfaction as the material tumbles to the floor.  Pull the remaining bits off the lathe, bag it up and get it out of the way.  It is always a shocker how heavy and horribly dusty this material is.  Even in an open room with good ventilation, you will want to wear a cartridge dust mask for this phase of the demolition.

Once the plaster is removed, it is a simple matter to cut away the lathe with a sawzall or jigsaw, using the rough framing to guide the blade.  And there you are, access to the space is complete.

 

Step Two: Electrical

As it happened, in both cases there was already wiring running through the spaces so the only electrical work I had to do was tie into the existing circuit and locate junction boxes for the outlets, light and light switch that I needed.  This work is not complicated, but definitely something where you want to be shown how to do it by someone who knows what he is doing.

On one side I had a Romex circuit to tie into, but on the other I had to junction into the old knob and tube wiring.  Here is a picture showing some of the porcelain ‘knobs.’  The tubes are also porcelain and are used where the wire has to pass through framing.  People often have a reaction to this kind of wiring as if it is more dangerous than the modern version using Romex, but I think this perception is incorrect.  In fact, this older approach is probably more robust than the modern standard, just as the old 2×4′s shown in this photo that are a) actually 2 inches by 4 inches and b) made of old growth, vertical grain douglas fir are more robust than the modern 2×4 that is actually 1.5 x 3.5 inches and made of soft, young wood. Similarly, while Romex places the conductors directly next to each other separated by a thin sheath of rubber insulation, in the older wiring style the conductors are physical separated by several inches, often up to a foot, and covered in two layers of a heavy woven insulation material and located to the framing with ceramic insulators. Really it is that the older approach turned out to be overkill, and modern codes provide for a less expensive, less material intensive way to build.

Here the old and new are married together in a junction box.

While the final lighting was going to be halogen track, once I had the box in place to feed the lights and the light switch I was able to install a temporary work light.

Step Three: Subfloor

It turns out, unsurprisingly, that climbing around on joists is awkward and painful to feet, hands and knees, so I was very excited once the electrical was done and I could install the subfloor.  First I laid fiberglass batt insulation down between the joists.  As the spaces were directly above insulated space below, the purpose of this insulation was more to muffle sound than control temperature.  I moved the blown paper fiber insulation already in the space out of the way of the fiber glass insulation by scooping it up and using it to fill uninsulated areas behind the building facade.

Here the subfloor is going in.  An amusing anecdote is that the plywood for the subfloors was recycled from sets used at Armory Studios, a porn production facility.

Step Four: Skylights

One piece of the project that made me a bit nervous was the skylights.  However, it turns out that except for having to cut a hole in a perfectly good roof, this is not such a challenging thing to do.  First, you frame the opening.

Then you make that hole in the otherwise perfectly good roof.

Then you build what is called a ‘curb,’ which is really just another frame on the outside that mirrors the one on the inside.

At this point you need to cut back the shingles around the curb to make room for the new underlayment to seal against the roof sheeting.  And here is where I brought in a roofing professional to finish the job by weaving the flashing and new shingles in around the curb to ensure the installation was water tight.  Finally, the skylight itself is set onto the curb, screwed down and skylight installation is complete.

Step 5: Rigid Insulation

This step was simple enough conceptually although a fair bit of work to do: install as much rigid insulation as I could fit between the rafters against the roof and the studs behind the facade siding.  In most cases this was 4 inches of insulation (remember those old fashioned 2×4′s that are actually 4 inches wide?), but in some places fitting 4 inches of insulation into a space that was nominally 4 inches proved too tight and I settled for just 3 inches.  I used blue foam that was 2 inches thick and yellow foam with a foil backing that was one inch thick.  It was helpful in creating the fits to have the two thicknesses to work with. This material was rather expensive, but I consider the decision to include it in the project to be one of the better that I made.  This insulation made a tremendous difference in the internal environment of the spaces both in terms of temperature stability and noise intrusion.

Step 6: Debris Removal

At this point I’d generated about all the nasty debris I was going to create so it was time to take it to the dump.  Here’s a picture of the material staged in my garage in the way to being loaded into my van.

And here it is at the dump.  Believe it or not but that is 1000 pounds of debris. The old plaster and the roofing material are really, really heavy.

Step 7: Sheetrock

I had originally thought I’d do the sheetrock, but in the end, I decided instead to hire it out.  The thought of carrying all that rock upstairs, cutting, recutting, taping, mudding and sanding by myself kind of took the wind out of my sails.  Paying for this work was my largest single expense at $1500 dollars but I think it was money very well spent.  Just avoiding all that horrible dust made it worthwhile.  Plus I knew those guys would do a better, and faster job than I could possibly do myself, even though I only paid for a quality level 2 below their highest offering.

Step 8: Flooring

For the flooring solution, I used the least expensive snap down product with real wood veneer available at Lowes.  I was completely satisfied with the quality, appearance and the ease of installation.  It really does just snap together, and as long as you have your cut off saw nearby so you waste as little time as possible making your cuts, you can lay it down very quickly.  Each of these spaces 50 square foot spaces probably took only about 3 hours to do.  One trick I learned that is worth passing on is that it turns out when you have a piece that won’t lay flat, you want to tap it in rather than down.  As it goes in, it pushes itself down.

The only challenging detail I had to deal with for the flooring was how to end it at on the side where the roof met the floor.  I was proud of the solution I came up with.  I cut blocks with a 45 degree angle on the top, and a height that was just right so that they would be covered by the baseboard I planned to apply after.  I cut a short piece of flooring that I locked in under each block and then screwed the blocks through the sheetrock into the rafters.  This made for a tight fit that held the flooring down, but allowed it to expand and contract, and also provided a nice nailing surface for the final baseboard trim.

  

Here is the appearance with the baseboard trim in place.

Step 9: The Doors

The doors into the spaces were a standard width (30 inch) but a custom height (48 inch) so I needed to make them myself.  The material I used for the rails and styles was something my local lumberyard, Beronio’s, calls ‘house reds.’  This is a pre-primed exterior trim product made from finger jointing cedar scrap together.  As such it has a density and feel much like the redwood used in the original doors in my house.  For the panel I used a 1/2″ plywood product with a name I can’t remember, but it has kraft paper glued to both sides so that it paints smooth and even.

I make a simple floating panel door where the dado for the panel is also receives the tenon at each end of the stiles.  Here are the machined parts for two doors sitting on my table saw.

Here is the glue up for one of the doors.  I’ve learned from unfortunate past experience that it is critical to clamp the door flat at the same time you are clamping the frame together.

And here are the finished doors.  It doesn’t show too well in this photo but I added an ogee molding around the edge of the panel on both sides for appearance.

Once the doors were done, I made the door frames and installed the doors in the frames with the hinges before bringing the assemblies upstairs to mount in the openings.

Step 10: Installing the Doors and Final Trim

Just before I began this work, a contractor friend of mine visited my job site and in an offhanded way said, “wow, you’ve still got a lot of work to do.”  I thought he was mistaken as I’d already completely finished and insulated the rough space, added the electrical, gotten the sheetrock and floors in and made the doors and jambs.  All that was left was installing the doors and the final trim, maybe two days, max, right?

Wrong!  All together this final finish work took me more than a week.  First thing, when I got back upstairs I realized I’d forgotten to think clearly about how the door thresholds would work, and so I ended up having to remove a fair bit of the old sill plate between the original bedroom and the new spaces.

Then came hanging the doors.  This is where I learned the lesson that rough openings should, if anything, err on the side of being too large.  Or actually, a rough opening can’t be too large, it can only be too small.  And if it is too small, you won’t get your door hung true.  Suffice it to say that after considerable cursing, re-adjusting framing, and adding and removing pieces of sheetrock, the doors are in true enough.

Here’s the setup I was working with in terms of having my chop saw right there for cutting the trim pieces.  This close proximity between the work and the tool saves a ton of time.

After the door frame was in, I set the thresholds down.  My technique was to use a forstener bit to make a pilot hole, then drill it through, set the screw and plug the hole with a plug made with a plug cutter.  The tail part of the threshold is actually a separate piece that I made which is located to the floor and moves in and out just a bit as the floor expands and contracts from temperature change.

Here is the final trim from the inside.  I used simple casing material for the interior side and manufactured bullnose trim to cover the old sill plate.

On the bedroom side, I used casing I’d salvaged from an earlier remodel to recreate the same trim style as surrounds all the doors in my house.  The casing is a really nice symmetrical style that for some reason is no longer available as a standard profile, even from the San Francisco victorian trim speciality house.

Step 11: Paint and Final Hardware

I never planned to paint the project myself, and so it felt like I’d reached the end of my project when it was finally time to call in my painter.  He worked with my twins to pick some very appropriate colors.  For the sleeping slot on the north side, with less direct sun, the boys picked a yellow and for the south slot, that gets sun most of the day, they chose a nice blue.

Here’s an example of the beautiful reproduction hardware I purchased from Rejuvenation.

IMG 2981

Budget

Here’s the final out of pocket expense for the project.

This price tag does not include anything for my labor.  The project took about 3 months, and for much of this I was working on it 2 days a week, so let’s say I spent roughly 30 man-days on it.  Conservatively, that’s probably about $15,000 worth of labor for a total project cost of about $23,000 or about $230/square foot.

The truth is that my twins are extremely pleased with their new spaces, and overall it has been a really good thing for family harmony.  But at that price, you can understand why, for most San Franciscans, finding that unused space in their house remains just a dream.

(special thanks to my buddies Tom Ehline, Adrian Burns and David Zapata without whose help things would have taken longer and been a lot less fun)

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.

Adding Search to Jasperserver: A Cautionary Tale

Summary

Our upcoming 3.7 release of Jasperserver includes a major new feature: faceted search.

As the first major initiative I pushed for after joining Jaspersoft as User Experience Architect, search was my pet project. While I am certain the new functionality has improved the user experience for some users, I believe, due to flaws in the design process I led, we missed an opportunity to deliver an interface that made finding objects in our system dramatically simpler for all users.

This post is an illustrated attempt to break down that design process in the hopes that others may benefit from understanding the errors I made and the lessons that I have learned (or, sadly, re-learned).

Lessons (Re)learned

To help you parse this long post, I’ll begin by listing the lessons I took away from the search project:

  • Never assume the primary persona or the essential use cases
  • Mockups are not prototypes
  • Evolution is an easy sell; revolution requires data
  • Performance matters

And most importantly:

  • NO PET PROJECTS!

The Starting Point: An Expert Interface

In Jasperserver 3.5 the only way users can find reports and other objects contained in the system is via an interface that looks like this:

This design is obviously modeled on a file browser.  As such, it suffers from the problem shared by all browse experiences, namely that it is a tool for experts, not novices.

Because it is designed to expose the file structure, a browse tool provides a good experience for the administrator who needs to create or maintain that structure.  However, for the business user who knows the name of a report stored in the repository, but no idea of the logic the administrator used to construct the structure, using a browse interface is a bit like an easter egg hunt. I explain this issue in more detail in this post.

As the percentage of Jasperserver users who maintain repositories is considerably smaller than the percentage of Jasperserver users who want to find the reports contained within the repositories, my feeling was that the repository interface was optimized for the wrong persona.  I believed that we could fix this usability issue by adding a search functionality to our server, and then optimizing the repository interface around the new search feature.

I made this argument in a number of product planning sessions and succeeded in getting a search project prioritized for our next development cycle.  Paradoxically, this early success was the source of my biggest mistake.  By focussing on functionality, I sold the idea of adding search, but, as it turned out, never actually got buy-in for the crucial underlying assumption that we should optimize our design for the repository user, rather than the repository creator.

The Mockups

In my initial storyboards for the new repository experience, I proposed a faceted search navigation combined with a federated results display:

The point of the default design was to present the objects in the system in terms of meta data most relevant to a business user.  However, because we did need to support the administrative workflow for creating and maintaining the hierarchical structure, I proposed that users be able to opt-in to a view of the file structure, by pressing a button:

If exposed, in addition to various management functions, the folders could be used to control the scope of the search, and, combined with the search string and the other facets used to refine the found set. I thought this design was starting a bit complicated, but as viewing the folders was an opt-in experience, I was comfortable that by default we would be offering a simpler presentation of the repository objects.

I used images like these in storyboards detailing a variety of use cases that I shared with project stakeholders. The storyboards were met with a favorable response and we moved into production.

In retrospect I now understand that this was the point where I made a second, crucial mistake.  This was that I moved directly to storyboards without first establishing with the stakeholders what the critical use cases actually were.  If I had begun by asking the stakeholders to help me define the most important use cases I think we would have uncovered almost immediately the fact that many of the stakeholders did not share my main assumption that we should optimize the design for business users.  Instead, I presented storyboards that embodied the business user persona assumption implicitly.  As a result stakeholder approval of these storyboards really only meant that the storyboards told stories that made sense.  Approval did not mean, as I assumed, that the storyboards made sense and told the stories we all thought were most important!

First Prototype and First Hiccup

This problem only began to be clear to me when we finally presented our first working prototype.  It didn’t have the all the filters working and it didn’t group the results by type, but was otherwise quite faithful to the mockups:

And, as proposed, folders could be exposed and used to set the search scope:

The reaction of several project stakeholders to this prototype first alerted me to the fact that we did not all share my fundamental assumption that we were optimizing this design for repository users, rather than administrators.

The trouble began when the stakeholders finally understood that the folders were acting to set search scope, not to define the location of the panel that displayed objects.  You can see this in the screenshot above.  The folder ‘Ad Hoc Components’ is selected, but if you look carefully at the path shown for the displayed objects, you will see that these objects are all actually located in a child folder ‘Topics.’  From a search perspective this is correct: the search is finding all objects that match the current search string (in this case the empty string “”) located within the selected folder and all its children.

However, from a browse perspective this is an incorrect result because only results located in the currently selected folder should be visible.  In this case, this would mean no results would display. Once this difference was understood, the stakeholders insisted that the administrative user could no longer use the interface effectively because it would not meet his browse expectations.

Compromise Mode

It was now clear to me that I had made strategic blunders in managing the design process for this project.  Rather than leading the good fight to improve the experience for our agreed upon primary persona, I understood that I was perceived by several critical stakeholders as forcing a dramatic change in interaction model to which they had not agreed and strongly objected.

Suddenly finding myself without consensus regarding the primary design persona, and lacking data demonstrating that the change I proposed would be acceptable to the existing administrative users, I decided that the most responsible thing for me to do was find a compromise design that would quell the stakeholder rebellion and move the project forward.

The first step towards this compromise was the addition of a means by which a savvy user could switch the experience from search to browse mode. While I accepted the political need for this adding this mode,  I knew it probably meant my vision of using search to simplify the repository experience was out the window.

That said, I continued to hope we could still offer a simpler default display.  Here, in the next working prototype, the initial view continued to look like the storyboards, including the results grouping:

However, when folders were exposed, a mode switch was also revealed:

If the user switched to browse mode, then the results display only showed objects located within the current folder (in this case no objects):

The search field and filters would continue to work in this mode, but would be of limited utility as they could only be used to refine the display of the objects within the current folder.

This prototype was a failure for two reasons.  The first was that in playing with it, it became clear that the hidden mode switch was totally confusing. The second issue was that several stakeholders continued to object strongly to the idea that one had to opt-in to see the folders because to quote one “folders are first class filters.”

After presenting this prototype I realized my belief in compromise was overly optimistic.  In fact, what was required on my part, given the political situation, was complete capitulation.  I needed to accept that in order to close this project I had to re-set my fundamental assumption and accept that most stakeholder believed the primary persona for this project was the administrative user, not the business user I had been designing for.

Evolution not Revolution

With this insight, it was clear to me what I needed to do to get to a design all the stakeholders would accept: treat search as an incremental evolution of the existing experience rather than a revolutionary change.

The next prototype looked like this:

The functionality was the same as the previous prototype but the presentation was now designed to promote folders as the primary organizational structure.  The interaction mode was still by default search, but the mode switch was made more prominent and visible at all times.

With this presentational change, stakeholder resistance evaporated.

Performance: the unkindest cut of all

Having accepted the shift in priority, I had made my peace with the new presentation when a final problem surfaced: performance.  It turned out that for technical reasons having to do with how the repository database stored object meta data, creating the object type groupings was extremely inefficient.  The user experience impact of this was that a search that attempted to bring back all types of objects and group them by type would take a very long time when the repository got large.

This discovery came very late in the the production process when no appetite remained for any further design changes.  As a result we settled on the expedient solution of breaking the simple faceting model for object type.  While the rest of the filters defaulted to some kind of ‘all’ setting, the one for type would default to a custom group named ‘Visualizations’ that contained the object types most interesting to business users: reports, dashboards, and analyses.  You can see this change if you compare the screenshot above which shows a filter set to ‘All types’ versus the one below that shows the same filter set to ‘Visualizations.’

With this change we knowingly made it harder to understand the conceptual model underlying the filters.  The only other short-term alternative would have been to abandon the grouping concept entirely, but, lacking any kind of ‘popularity’ algorithm (an earlier sacrifice to project schedule, deemed acceptable because of the grouping concept) this would have meant that by default searches would return arcane object types (e.g. JDBC connections) with the same priority as frequently used types (e.g. Reports).

Conclusion

The conclusion I draw from this post mortem is that the last lesson I listed above is really the most important: no pet projects.

The bottom line here is that, because I was personally invested in this project, I skipped or at least shortcut, a number of steps that I know are part of a successful design project.  Probably the most critical error I made was to confuse the process of selling the project to stakeholders with the user and stakeholder research I should have done, but didn’t, before beginning the design phase.   I compounded this error by relying on mockups, rather than prototypes, to communicate status until far too late in the development phase.  Finally, I did not engage deeply enough with the technical aspects of the project to avoid being surprised by last minute performance issues.

Shifting to the bright side, the early feedback I’ve gotten from users familiar with our product is that faceted search does, in fact, materially improve the experience of finding and interacting with system objects.   In other words, what we did achieve with this project was a tangible improvement in user experience compared to our previous product release.  While my initial design aspirations were larger than that, this positive outcome raises the perennial question of design leadership: when is the incremental, but safe, value offered by evolution a more responsible strategy than the dramatic, but risky, value offered by revolution?