-
Get a monthly update on best practices for delivering successful software.
At Pathfinder, we do our best to help our clients experience the software through the eyes of the user. Defining a feature includes explaining who will be using it, what they need to accomplish, why they need to accomplish it and how they’ll actually do it.
We start with personas (who) — they define the user base and let us identify the primary users whose needs we should focus on, which in turn drives the feature list. Personas also bring the human element into software development. Rather than using a vague term such as actor or user, terms that can easily be dismissed, we now have Myrna from Accounting, a numbers guru who is the primary user of the new software. Myrna is not so easily dismissed, especially once her needs and goals are identified.
We move onto user stories, all of which are written from the point of view of the personas: Continue reading »
Topics: user centric design
I was starting up one of the Adobe apps the other day when this somewhat troublesome message was displayed:

Ack! On the one hand, good for them for alerting me that an error had occurred. On the other hand, what's up with that message? I had no idea what I could do beyond clicking ok (and after reading the message I wasn't sure all was ok). A bit unnerving, but it did get me thinking about how applications deal with error messages.
The idea that non-technical users will be viewing error messages is one of those things that tends to be overlooked. You’re so focused on getting all the features up and working that dealing with errors on the presentation layer are often left out of both design and implementation.
Even if time is crunched on a project, however, here are three scenarios you should always cover in a user-friendly fashion: Continue reading »
Wireframes are the bare-bones schematic of the presentation layer for an application or web site. They are the visual interpretation of the user and business needs for any given feature. At a basic level, they show the page layout and placement of various elements on the page. At a more detailed level, they identify user interactions and the expected behavior.
Wireframes are a great communication tool for all members of a project team. Instead of an abstract list of requirements or a verbal description of a concept, the visual nature of a wireframe allows everyone to see exactly what it is they’re discussing. They are usually black and white (sometimes with shades of gray) schematics because we want to get feedback on the page structure and behavior, not the visual design. However, wireframes created for mature applications can readily incorporate existing visual design since that language is already defined and shouldn’t divert focus from the reason we’re looking at wireframes.
Although a picture is worth a thousand words, adding annotations to a wireframe lets the viewer immediately know the expected user behavior of various elements on the page. While a more detailed explanation of the behavior is generally contained in the design specs, adding a shorter version here is extremely helpful.
Here's an example of what an annotated wireframe can look like:

All team members. Because they are a visual artifact of what is proposed to be built, they are an easy and cost-effective way to get the stakeholders to sign-off on how their business requirements will be translated to software, before any code is written. They also give development a heads up on what the page will look like and how it’s expected to behave; which means they also let QA know what to expect once the feature is ready for testing.
While I sometimes have to educate clients new to software development on the benefits of wireframes, once they see them within the context of a project, they're sold on the benefits and understand their usefulness.
Related Services: User Experience Design, Custom Software Development
A few years ago, I worked on a team that was trying to move the business side away from the waterfall method into more of an agile approach so there wouldn’t be such a disconnect between design and development. Since there was no blueprint on how design could be done in an agile fashion, resistance was very high. One of the major sticking points, however, was in documenting requirements. The business side controlled the process which meant no one could see or review the requirements until they were released by the analyst. In a world view of us vs. them, collaboration was not very high on their list.
Collaboration, however, is high on the list for agile development. So, how to resolve this conundrum and begin to merge the two teams. Continue reading »
Your project is going along fine. After the initial bumps, the team has reached max velocity and is running through story points like there’s no tomorrow. The demos are a success, with the client loving how everything is coming together. Communication between the team members and the client is working well, with enough give and take that all sides feel like they have a genuine stake in the project. In fact, the goal posts are in sight and we’re already scheduling a release plan. And then the client asks for one more feature. Not a tweak of something already built, but a new feature that has to seamlessly incorporate into the application and not look like a last minute add-on.
The initial response? The team to comes to a screeching halt and devolves into something resembling the stages of grief. Continue reading »
Topics: project management
“IE6 is the new Netscape 4. The hacks needed to support IE6 are increasingly viewed as excess freight. Like Netscape 4 in 2000, IE6 is perceived to be holding back the web.”
~ Jeff Zeldman, standards guru
Anyone who has worked with developing the presentation layer for web apps has become quite adept at creating workarounds in JS and CSS to try and give the user the same experience in IE6 that they’d have if they used an up-to-date browser. However, because of IE6's non-compliance with W3C Standards, a ridiculous amount of extra work (i.e., hacks) is needed in order to get the page to render correctly in this most outdated of browsers. And, as Dietrich mentioned in a previous post, the problem is that these deviations from the standard end up becoming the standard and increase the amount of time required to write and maintain code.
Continue reading »
Gauging a client’s wants and needs is as much an art as it is a science. Oh sure, establishing the requirements and needed features and potential limitations (hello legacy system) is pretty much a straightforward scenario. It’s when we get into the layout and behavior of the application that negotiating the waters can begin to get a little tricky. Bump it to the redesign of an existing application that users are accustomed to, and the trickiness factor is raised exponentially.
I’ve been lucky with Pathfinder in that my last couple of projects have been to design and develop new software. The clients come in with an idea for a better mousetrap and we build it. They’re excited, we’re excited and we get to build something shiny and new that gives the client a good experience and helps build their business. A win-win in my book.
Not all projects have such a glorious life. In a previous job, I was part of a team that was tasked with porting a legacy system over to a new framework. Naturally, there were the usual levels of complexity all projects of this type always seem to encounter. However, the most difficult obstacle to overcome was the inability of the decision maker to see anything beyond the existing user interface.
Topics: Prototype
Heuristic reviews are a great tool for finding usability issues in any existing interface, from web-based to desktop. It's a quick and relatively inexpensive way to uncover, document and prioritize usability problems.
From usability.gov:
The goal of heuristic evaluation is to find usability problems early in the design of a Web site so that improvements can be made as part of the iterative design process … The result of this analysis is a list of potential usability issues or problems.
While I use heuristic reviews and find the results to be very helpful, I've never been too thrilled with the final documentation. Even when formatted nicely, they’re nothing more than a laundry list with a bunch of words and numbers and no hints or ideas on how that information can be grouped together and translated over to an application. Quite frankly, after the second page my eyes do tend to glaze over. And if my eyes glaze over, I can't even imaging how it affects the client. So I was challenged to come up with something better.
My co-worker, John McCaffrey, wanted to give his client some ideas on how to improve their site -- a heuristic review but with a sort-of Cliffs Notes component that could highlight the value of the review but not induce eye fatigue. He was also looking for something more visual to grab the interest of the client and keep them there long enough to start looking at the data. He mentioned that he really likes our annotated wireframes and an idea was born. Create a mashup of annotated wireframes and heuristic evaluation.
'Fixin' the Start Line!' by UHLMAN
Companies (and people) new to software development tend to think that projects start with development, as in writing the actual code, as in here’s my idea … when can I see it and btw, why am I paying you for time that you’re not coding. Most are not aware of the upfront work needed to get to the point of coding or, perhaps, even the value of it. After all, they gave you the idea so let’s see less talk and more coding.
What is some of that necessary work that’ll drive us towards development? The upfront work definitely includes requirements — the details that allow us to start writing the code. But even before the requirements are started, long before diving into the wireframes and user modeling, features list or user stories, projects need to begin with a business problem and a blue-sky idea on how to solve that problem. In short, the product concept.
Continue reading »
Topics: project concept, Requirements, starting projects
At some point in their career, most everyone in software development has encountered the client who paints a very eloquent picture about their fantabulous idea that’s going to revolutionize the [insert industry vertical here]. However, as time goes on you realize the client’s staying at the 60,000 foot level, and while that may make for great conversation, it's less than ideal for actually developing something. The trick, then, is to get them to climb down into the trenches and define the details before you have to start writing the code.
At Pathfinder, we’ve been involving clients in creating business-driven scenarios to define a feature, i.e., what does ‘create accounts’ really mean. These scenarios walk through the different tasks of a feature and identify the expected behavior and outcome based on the user’s actions. Although they follow a specific format (context, events and outcomes), they are written in plain English that can be understood by all team members.
Continue reading »
Topics: Acceptance Tests, Requirements, Scenarios
The most difficult part about designing software is, well, where to begin? You have the account manager on the one hand who gives you the laundry list of items her client has been screaming about for the last n years; the marketing person who has his stack of post-it-notes listing features by competitors; and the tech lead with an itemized list of underlying functionality that must be refactored if the system stands any chance of continuing to work in the future.
Some teams combine all the lists into one main Feature List, assign a priority and tackle them one by one until either (a) all the items are completed or (b) the CEO decrees the product must be launched. On small projects with a limited set of functionality this may not be a bad approach since the overall Feature List will never be ungainly. The downside is that what you produce may not be what the user necessarily wants to use.
Continue reading »
Hmmm … is design thinking going mainstream? A recent article in the Harvard Business Review and now this from the New York Times:
So pervasive has design thinking become in the last five years that Stanford University has created an elective program it calls d.school — more formally known as the Hasso Plattner Institute of Design — that has proved wildly popular with budding entrepreneurs from all corners of the campus.
It is a time in the spotlight for a process that historically has been relegated to the end of the business planning line.
Those of us involved in design already know that design thinking is one of several tools we use to help our clients stay competitive. Nonetheless, it’s nice to see major publications picking up on not only what design thinking is, but the importance of joining it with business thinking. Read the full article for a review of how this partnership works to create new solutions.
Topics: design thinking
In most projects, it’s easy to come up with ideas but more difficult to give weight to their importance since the client (and sometimes the team) think they’re all important. So we move onto establishing a scale (1 = must have; 2 = nice to have, etc.) and then assigning values to each task/idea/feature. Generally some good discussions come out of this exercise in determining exactly what is important in creating a successful project, along with defining exactly what “success” is.
At the IDEA 2008 preconference workshop, Dave Bishop and Paul Gould from MAYA showed us another way to prioritize project tasks: a bullseye diagram. It’s still a ranking system, but done visually rather than numerically. The team first lists out all the project tasks. These are then placed in the bullseye based on where they fall in rank; the critical items are in the center and the less important items moving towards the outer rings. If this is done on a whiteboard with the tasks on Post-it-Notes, then information can be quickly be moved around in relation to new tasks that are added to the bullseye.
Once the tasks are prioritized and in the bullseye, you can organize, arrange and add structure. You can start to see relationships, which may indicate a different priority. You can start to see categories, which may affect iteration planning. You can begin to add structure. The outcome of this exercise is an easily understood diagram showing the project’s priorities. For teams that aren’t comfortable assigning a number to a task, this is a good alternative to try.
Topics: data visualization
The IDEA conference is being held in Chicago this year, and once again MAYA Design hosted the preconference workshop on Information Architecture. Some thoughts from the morning’s discussions.
For the remainder of the session, MAYA reviewed some diagrams they use in their IA practice, including some I hadn't seen before. I’ll have more on that later.
Although task flow diagrams (sometimes referred to as interaction flows, process flows or work flows) are a standard in most IA’s toolkits, it can be confusing for those unfamiliar with this particular tool to know when to start diagramming. When in the process is it started? How much information is needed before diagramming? How much detail should be added? When is it considered complete?
The short answer is to start diagramming once the task is identified because it’ll help in flushing out the requirements. The diagram starts to identify what the user and the system need to do. It delineates a repeatable pattern of activity. It answers the question: “How do I _____________”.
After you have an identified task (I like to use Use Case Diagrams to call out the high-level tasks), the start point and end point need to be established. For example, let’s say your business requirements state that the web application is only accessible by authenticated users; therefore, a user needs to successfully login in order to see the home page. The initial diagram has the user starting on the login page, submitting their information and viewing the home page after the system logs them in.

But wait … I did say *successfully* login, didn’t I. O.k., so we add a decision point to the diagram to show that only successful logins allow a user to access the web application. Don’t worry just yet what the details are for the system to successfully authenticate a user. The purpose of the diagram is to identify the process, not to define it. For now, all that's needed is to show that the login information must be vetted before the system allows access.

Granted, the previous examples are simplistic, but simple is where task flow diagrams start. This basic statement “How do I ____________” turns into an initial task flow, delineating the steps needed to complete the task from start to finish based on the information known at that time. The first iteration is generally the ‘happy path’ and identifies the main flow of a task. As more steps are uncovered through requirements, the flow is updated and modified to accommodate the new information and show the various decision points and/or alternative paths as they become known. The end result is a flow diagram that conveys both the overall structure of the main user tasks and the sequencing of activities to be programmed into a repeatable activity.
Topics: Best Practices, Information Architecture, Task Flows