Aside

As I drove home from my weekly game night, I caught the tail-end of FutureWork airing on OPB radio. In the 10 or so minutes that I caught, my career decisions were validated. It feels nice. Here’s a transcript excerpt:

Robert Reich: Now let’s return to this idea of what exactly the workers of the future will be doing. Marina Gorbis, a noted futurist and executive director of the Institute for the Future in Silicon Valley. She says tomorrow’s workforce will need to be part artist and part technician.

Marina Gorbis: There’s still need to create the machines. There’s still need to create the software. So there’s a whole batch of jobs relating to designing, creating, coding, and working with these machines.

Susan Hassler: But it’s more than just designing the machines. We’ll need to become experts at understanding how machines interact with people.

Marina Gorbis: I think that it’s clear the kind of skills we’ll need and the kind of jobs we’ll have will require connections. We’ll need more and more people that we call transdisciplinary people. So they may have skills and expertise in one area, so psychology, but they may also need to understand computer science. It may be an artist but who also understands technology. So it’s being able to sort of transition and connect multiple disciplines and multiple understanding of different domains is what becomes critical.

Validating a UX Career

Rich web interaction mockups

I’ve talked before about how much I like Keynote. Although it’s somewhat ridiculous, this tool is a one-stop-shop for mockups. For my usage, it contains just the right balance of speed and fidelity. But I’ve struggled for a while to find a way to mockup interactions. Specifically animations as things became more complex and harder to grasp with a simple mockup or even a series of mockups.

More after the jump

Continue reading

When to user test and when to A/B test

I sometimes see A/B testing and user testing being talked about interchangeably. These two types of testing are approached differently and at different times in a project lifecycle. Depending on what is being tested, their goals may be different.

Difference between A/B testing and user tests

User testing is really a specific method of usability testing. It implies a single user completing a series of steps provided by the tester. Although there are different techniques — moderated, un-moderated, speak-as-you-go, timed — the goal of the researcher is generally the same: we’re looking for things standing in the way of usability.

A/B and similar tests, such as multivariate testing is part of an optimization strategy. Researchers are looking to see if a specific variation can get more conversions — visitors moving toward a specific goal — than the original.

When to test

A/B testing requires traffic. All, or a portion, of the incoming traffic is randomly assigned to either the test (variation) or control (original) and we track the aggregate number of visitors in the test and control that perform the action the researchers are hoping to improve. Because it requires traffic, A/B testing can only happen on a site that is both live and is receiving sufficient traffic.

User testing, on the other hand, only requires some type of visual aid. Generally a functioning website is preferable, but user tests can be done on static comps or even a napkin drawing. Ever shown someone a quick sketch and ask “what do you think?” Try instead giving them a little background and ask them to describe how they’d accomplish a task. That is user testing — it can be done at any stage in a project.

before-after-testing

Use Both

User testing is great for validating or testing a new feature. Ensuring that it’s discoverable and straightforward. A/B testing does no good if no one can even use it. Then, if it’s a feature that has a conversion aspect, A/B testing can be done to tweak the feature until it converts better.

User testing is better at giving a big picture: how all the elements work with one another. It provides a human insight that conversion numbers can’t. On the other hand, user testing is anecdotal and qualitative. A/B testing provides quantitative numbers.

On the other hand, keep in mind that A/B testing may favor pushy and aggressive UI. While you may optimize conversions, especially in the short-term, it’s just as easy to lose sight of a product that is a joy to use.

How to Use

I suggest user testing new features: anything significant enough to change how someone interacts with the product. Then A/B test any conversion funnel on the affected pages. If A/B testing seems to indicate better performance with more dramatic changes, I suggest making a very dramatic change in that direction, then user testing, then A/B testing the (significant) variation.

But that’s a perfect world with a very testing-centric organization. Personally, I find more value in user testing once there are in-browser comps to test against. Then, if the project includes an e-commerce component, A/B testing the purchase funnel. If the project is relying on pageviews, Google Analytic’s bounce rate and pages-per-session are effective metrics to look at.

Small image hero

So you want to create a really large hero component or call to action with a focus on images to perhaps add some visual interest to the area or break up an otherwise fairly boring sea of flat boxes.

One big challenge will be to get really large images, in the correct (very narrow) aspect ratio, that are art-directed so they don’t cause problems with your text. Once that’s done, now you’re going to need to contend with the large file (and thus download) sizes of that hero image.

Okay, so there are some challenges. Hit the jump to see how I solved it.

Continue reading

Don’t use target=”_blank”

I’ve been asked a few times in the past year about opening links in new windows. Just because a tag, property, or attribute is there — even valid — doesn’t mean it’s appropriate to use. For instance, did you know there’s a valid CSS property to make things blink a’la the infamous <blink> tag? Doesn’t mean that’s okay.

Anyway, I wrote a blog post for 10up on the topic in case you want to know what you should be doing.

WordCamp Portland

I just posted on my company’s blog about attending and speaking at WordCamp Portland.

“Why We Click Publish: Advocating for User-Centricity through Interaction Design”

I’m trying to learn and practice more and more Interaction Design and have been fortunate with 10up to have the opportunity to put theory into practice on a few projects. This session is only 30 minutes, so there isn’t a ton of time, but we’ll talk about what IxD is, how it can help improve human computer interaction, and some tools to get started right away regardless of budget or time.

I’m very excited to be speaking and volunteering at WordCamp Portland. Let me know if you’ll be there, we’ll have to meet up and toast to Beer, Portland, and WordPress.

Cheers!

One simple trick to find design issues

Two times in the last few hours I’ve found areas of a design that could be improved by using one simple trick:

By shifting my perspective, literally, I was able to see the design in a different way. Here are some practical exercises to literally shift your perspective:

  • Turn the entire design upside down. While it may look funny to turn a laptop upside down, it’s totally doable and allows you to see how a design flows vertically.
  • Look at the design on the screen from an extreme angle left or right to see how the design flows horizontally.
  • Zoom way in and pixel-peep design. I did this to confirm the baseline was consistent by zooming in and literally holding a ruler to my screen.

Do you consistently use any of these tricks to help you look at design?

Wireframe stencils full of old-school win

I joke about these awesome metal wireframe and mockup stencils being old school like anyone was designing websites in the hayday of engineering stencils and whatnot. But putting together a wireframe in any of the many online wireframing tools has one, big problem for me…

Beautiful iPhone stencil kit from UI Stencils

They’re online, in front of a computer screen. (That’s actually two problems, but whatever). That’s a problem (for me) for a number of reasons. Distractions is one obvious one, online/offline is another, and my last “issue” is somewhat of an intangible.

I can easily find myself distracted by Facebook, email, and the 27,000 open browser tabs. It’s not a question of willpower — when I’m doing there is no issue. The distraction pops up when I’m thinking, trying to solve a problem, drawing inspiration. Once that happens… In fact, I’m working in the WordPress distraction-free mode right now, with my browser full-screened. So, working with a stencil kit, on grid paper, will help ideas flow more easily.

Beautiful metal stencil for hand-drawn awesomesauce
The second issue is the need to be online. One of my favorite places to draw inspiration is the outdoors, nature. Or maybe that’s just where I can breathe easy. Whatever the case, it is somewhat inappropriate to pull out a laptop. Hippyism aside, it’s also much more conference-table, dinner table friendly.

Finally, while it may be a bit hipster, I think working a wireframe on a computer isn’t limiting enough. The constraining medium of paper allows me to just work, moving from element to element, jotting quick notes in the margin, free-form random arrows from place to place. Not only can I work in a way that mirrors how I think, but also in a way that frees me from perfection. It’s impossible to be pixel perfect on wood fiber… even recycled ones.

So I’ve purchased the UI stencil kit for browsers, iPhone (to represent mobile in general), and some of their sketch books from UIStencils.com. I’ll try to revisit this post after I’ve had some time with them and see if what I’ve written here still holds true.