We’ve all fumbled through a poorly designed, difficult-to-use product, satisficing along the way to do what we needed to get done, but unless you’re a usability expert you probably haven’t systematically determined why the product was difficult to use. A heuristic evaluation is a time-tested and structured way for usability experts to tease out the big, red-flag usability issues in an interface. Usually, 3–5 people inspect the interface for compliance with 10 fundamental usability principles. If the interface is complex, each person attacks the interface in sections.
I recently had the opportunity to perform such an evaluation – with a twist – on a client’s product. Armed with Jakob Nielsen’s ten heuristics and a set of frequent user tasks, I set out to run the product through heuristics such as ‘recognition over recall’ and ‘consistency and standards’. Structuring the evaluation around tasks gave this evaluation an extra boost from its classic execution. In doing this exercise, I was reminded of the tremendous value of performing such an evaluation.
Since you’re running the interface through a script of sorts, and structuring it around tasks, there’s a clearly marked path, beginning, and end. You aren’t aimlessly bouncing around the interface like a billiard ball in hopes of hitting upon the errant problem. Nor are you limited to the quantitative evaluation of some other user testing methods, which brings me to the next benefit.
A heuristic evaluation is a usability testing method. Performing such an evaluation and fixing the issues found will definitely get your interface in a minimally viable, usable state.
I think of performing a heuristic evaluation like casting a wide, sturdy net. If the heuristics are robust and relevant, you can feel quite confident that you will catch the most important issues, and a good deal of smaller ones as well. Combining the heuristics with the tasks ensures that your users will have a usable experience when they are deeply entrenched in their workflow.
With heuristics guiding you along the way, it’s difficult to justify making subjective statements such as ‘It needs to pop more’ or ‘The button should be red instead of green’ because each issue you find needs to be backed up with a heuristic (not to mention, the issue should be derived from the heuristic, not the other way around). The evaluation keeps your opinions in check.
In the course of compiling your stack of issues, certain issues will crop up over and over again. This is a good indicator that these issues may be worth investigating further. Spotting and prioritizing these repeat offenders will give you a good bang for your buck. You may not have the time or resources to fix every issue, but prioritizing the issues based on severity and frequency will help you funnel the issues into a more manageable handful.
As a quick and dirty discount usability method, heuristic evaluations produce a great deal of usability goodness for the effort. This isn’t to say that they are the end all be all of user research methods. For one, they do not address the larger issue of user experience; they deal primarily with usability, not with the ‘stickiness’ of an interface or how engaging the experience may be. For another, the user experience community would benefit from revisiting and updating the heuristics for modern-day interfaces. Mobile interfaces, web applications, tablet interfaces, and information visualizations each represent their own unique challenges and deserve their own sets of heuristics. With that said, heuristic evaluations are quite a powerful and handy tool to have in your back pocket, whether your mission is to test out a scrappy new interface or peer at an established one under the microscope.
Ah the one-way mirror. Also, confusingly, called a two-way mirror.
Iconic in traditional usability testing practice and imagery. But do we really need two rooms to conduct valid product testing anymore? Not just as a convenient room for observers, but to actually moderate from ‘behind the glass’, separated from the participant, communicating via mics and speakers?
Was this merely a quaint effort to legitimize usability testing as a ‘scientific’ practice and is now laughably passé? Or are there logical and enduring reasons why moderating from the ‘control room’ is best practice for summative / benchmark types of tests?
Let’s listen in on a prototypical conversation between two UX Testing pros – often, but not always, representing different generations (such as X vs Y/Z) or different program backgrounds (such as Cog Psy vs. Design Thinking)….
Behind the Glass
SCENE: A chance meeting at a Palo Alto coffee shop
… with Kevin! The highly-skilled, well-respected UX veteran
…and Katya! The sharp, young UX researcher
Link in case the above embed doesn’t work: http://www.xtranormal.com/watch/14382433/behind-the-glass
Morale of the skit?
I firmly believe either physical setup is suitable, and will yield completely valid and useful results, assuming the moderator has appropriately established rapport and set expectations to offset the potential negatives of each approach.
So what matters then?
Beyond the most obvious factors of type of test and actual availability of a fancy lab, it comes down mostly to preference. I’ve summarized my learnings below. You’re welcome
Vel’s guide to choosing your side of the glass
Ask yourself these simple questions to gauge if moderating from ‘behind the glass’ could be right for you!
Might I want or need to have discreet communication with other observers, such as a notetaker, client, or product experts during testing?
- to clarify a path or feature
- to acknowledge an issue together
- to ensure an error, comment, etc. is captured (if a notetaker is assisting)
- to troubleshoot a system issue
- to gather and plan for any follow-up questions in real time
Is the lab setup adjustable enough / ergonomic to sit with the participant?
- sitting right next to the user can strain the neck (especially with multiple tests in a day)
- might have to balance your laptop on your lap
- have to ensure participant doesn’t view your note-taking screen
- sitting behind the user might feel creepy
- can be hard to get an unobstructed view of the screen without getting ‘too close’
- hard to change positions mid-test if you’re uncomfortable
- small rooms can become uncomfortably warm with two people and the heat of equipment
Do I like to have more privacy while I test (especially if there are no other observers with you) ?
- to munch that Cliff bar
- scratch your nose
- take off your shoes
- yawn and stretch
- freely face-palm and head-desk
- stress less about bodily noises
Am I sensitive to hygiene variability?
- the user that just ‘came from a run!’
- came from the bar
- came from the burrito bar
- came from the cigar bar
- isn’t quite over that phlegmatic cough (!)
- all of the above at once in a perfect storm
If few or none of the above are super-important to you, or you have work-arounds/solutions for them, then you will probably not perceive any benefit to moderating in a separate control room. Or perhaps you discovered a few benefits that you hadn’t thought about. Either way, happy testing!
Fireworks isn’t perfect, but I’ve come to believe it’s better than the alternatives for user interface and web design. Here’s why:
1. Responsive Designing
You can have a different screen size for every page in a Fireworks document, if you want, as well as taking advantage of the Master Page functionality. Unfortunately Photoshop doesn’t allow you to have different screen sizes for various layer comps (Photoshop’s take on “pages”). The closest you can get in Photoshop is having a large canvas that will fit the various comps. Besides, Photoshop layer comps are a pain in the ass since they break anytime you move or edit anything. Not an issue in Fireworks.
Symbols can be created from an instance of any graphic. This includes buttons, layouts, containers, icons, whatever. After creating a symbol you can copy and paste that symbol as many times as you want to any page of your document. Any change made to a symbol will cascade through every single other instance of it in the document. If you want to make an independent change to a symbol without affecting the others, you can do that too.
3. Object Selection
Similar to Illustrator — and unlike Photoshop — you can click around a canvas and easily select any layer on it to edit and move. Yes, you can (sort of) do that in Photoshop, but because you have to regularly toggle direct select on and off to select the desired object. Because of the more usable and intuitive selection capabilities in Fireworks, it’s not as important to organize and name layers or even really worry about them. You’ll find that the only time you have to dig around layers is to find something that was locked that needs to be unlocked, which is easy because you can simply scan for the lock icon.
4. Path Tools
Path tools in Fireworks are very similar to Illustrator’s tools and have been for several versions. Fireworks also includes a ton of other useful tools such as Sharpen Points and Filet Points, which allow you to round or sharpen the corners of shapes.
5. Clickable Prototype Creation
One of the handiest tools in fireworks is the ability to create hotspots through your document, linking various pages to others and exporting them all as HTML and CSS to create a quick and dirty prototype for usability testing. This is incredibly useful when validating workflows before going into full-bore coding.
6. CSS Sprite Export
Another handy tool in the Fireworks toolbox is the ability to select any number of slices and export them as a CSS Sprite with designated spacing and alignment.
You can save styles quickly and easily to apply to other objects throughout your document. This is faster than copying and pasting styles.
8. Document Size
Storage space is pretty easy to come by, but there is a big difference between waiting for a 30- to 90-MB Photoshop file to sync up on Dropbox vs. an 8-MB Fireworks file. And all but the largest Fireworks files will fit in an email attachment.
9. Illustrator Imports
If you enjoy building vector assets and icons in Illustrator, you can copy then paste them directly into Fireworks. The difference between Fireworks and Photoshop is that you won’t lose any of the attributes of the vector work. Photoshop drops colors and won’t allow compound shape import. Fireworks does.
Fireworks is not the silver bullet for UI design, and I wouldn’t pretend that it is. But these (and other) reasons do make it a clear choice for me to use as my primary design program. I’m writing about it to hopefully help fellow designers find a similar experience and improved workflow efficiency.
Some of my complaints about Fireworks:
1. The text anti-aliasing blows
2. It crashes all the time. If you’re not a reflexive saver, you will be, or your laptop is going through a brick wall.
3. Not as widespread as other tools. Most of the design community produces freebie asset kits for Photoshop. You can open these in Fireworks, but the import PSD function is far from perfect and tends to leave important layer styles out so it’s almost not worth the time. Also since it’s not as widespread there tends to be a quick training period with development teams that are used to PSD deliverables.
4. Layer masks are awkward and cumbersome.