User Testing Best Practices

User Testing Best Practices

My client is working to put together a UX department. They’re looking to start doing regularly scheduled UX testing; especially within their e-commerce funnels. I’ve already provided a bunch of links and resources regarding user testing, but they’re naturally concerned about making it as efficient as possible. I asked users different questions than what my client had been, resulting in the destruction of some assumptions.

What are your personal favorite practices for efficient and productive user testing? What are your favorite tips and tricks?

In Defense of the Mythical Unicorn

In Defense of the Mythical Unicorn

Mythical Unicorn Defined

A “Mythical Unicorn” is another term for “Full Stack” — that is, someone who can handle everything along the way.  For example, as a Full Stack Web Designer, I was expected to be able to do everything from configuring and managing the server to design and beyond.

It’s rare to find these skills in one person, thus the name: Mythical Unicorn. In an ideal world, these tasks fall to someone who specializes in these things.  Web server configuration usually falls to the IT department, for instance.  Usability issues goes to User Experience professionals.

However, in today’s competitive environment, many companies search for these fabled unicorns as cost-saving measures.  The results aren’t always pleasant nor do they reflect well on our profession.

My Life as a Unicorn

I started out my career as many computer professionals do:  A Hobbyist.

A poor college student, it was easier just to learn things myself than find the money to pay someone to do what I needed.  I quickly evolved from simple HTML and CSS to playing around with Open Source projects, including WordPress, Joomla, and eFiction.

At the time, there was no degrees in web- anything.  In fact, my academic adviser recommended remaining a hobbyist due to the Dot-com bubble crash of 2000.  In his opinion, the web was a fad that was about to pass.

Luckily for me, I didn’t listen and eventually found a Computer Science concentration program.  After graduation, I took on an array of short-term gigs and freelance projects.  I found myself frustrated as those roles typically only demanded a small segment of my skills.

In 2011, I had finally landed a permanent role as a Web Developer at a software company.  While the role was listed as a “Web developer”, my actual duties weren’t as clear cut.  I was tasked with redesigning the website, making edits to white papers, case studies, and other marketing collateral.  I made icons, prepared email blasts, and prepared webinar videos for release.  Yes, my friends, I found myself in the role of a Mythical Unicorn.

In time, I demonstrated my skills extended to Front-End Development.  I found myself adding Java and user interfaces to my growing list of responsibilities.  And that also included a budding attention to usability and accessibility.

And I loved every minute of it.

Jack of All Trades; Master of None

The downside to this huge set of skills is that without a lot of diligence and dedication, a Mythical Unicorn runs the risk of falling behind. You can’t narrow your focus and that’s a lot of constantly evolving topics to keep up with.

Having been there, that’s a huge risk and an even bigger challenge. It’s easy to become adequate but not exemplary.

It’s even easier to become stagnant.

During An Event Apart Austin 2015, I had the opportunity to speak with Jeffrey Zeldman about this topic.  He warned me of this risk of stagnancy, lack of focus and mastery.  I remember feeling angry and very offended.  Proud to be a Mythical Unicorn, I didn’t see a shortcoming.  I amazed and delighted with my skills.

However, his words resonated with me for the rest of the conference and the weeks following.  That was exactly where I realized I was.  I was stagnant.  Unable to evolve my career where I truly wanted to go thanks to all those extra skills holding me back rather than advancing me like I previously thought.

In my efforts to do it all, I’d painted myself into a corner.  The only opportunities open to me were for roles that were no longer a good fit.  The roles that would allow me to develop and grow were few and far between.

In Defense of the Mythical Unicorn

If you’ve made it this far, you must be wondering why I would defend something that’s held me back for so long?

The answer is simple:  Being a Unicorn let me explore.  It let me discover my strengths.

I would never have considered a role as Mobile UX Designer without having been all those things.  I didn’t even know the role existed until I’d been in the field a few years.  Additionally, it gave me invaluable insight into development, branding, marketing, and product design that I may not have even considered.

Being a Unicorn was a great way to gain experience and explore, but it couldn’t be my entire career.  And it shouldn’t be your’s either.

That’s my two cents.  I’d love to hear your thoughts!

Tutorial: Including Webfonts in Axure Files

Including Webfonts Axure Files

Have you ever published a wireframe in Axure RP Pro, only to have the dreaded “tofu” appear rather than the icon from your chosen icon font?  Ever tried to use your favorite (or branded) font, only to have it default back to Arial?  (Or worse, a sans serif font.)

For one of the major tools available for user experience professionals, it certainly has poor UX.  Most designers and architects I’ve spoken with have had no idea Axure supports custom fonts.  In this tutorial, I’ll show you how to include a custom webfont in Axure files.

Versions

This tutorial is intended for Axure RP Pro 7 and Axure RP Pro 8.  Having never used any of the previous versions, I can’t verify whether these instructions apply.

How to Include Webfonts in Axure Files

Step 1: In Axure, Open Axure’s Publish Menu, Select “Generate HTML Files…”

Step 1

 Alternately, you can hit the “Edit” link before you publish…

Click edit on publish screen

Step 2: Next, click on “Web Fonts”

Step 2: Web Fonts Tab

Step 3: Check out the generator if necessary (upper right corner); and hit the green plus sign to add a new Web Font

Step 3: Making your changes to the generator

Step 4: Enter the font information

Some things to know:

  1. Fonts must be mapped to their matching webfont CSS file.  You MUST name them and pair that name with the webfont CSS file.  If you leave the name as “Web Font 1”, it will not work.
  2. You must use the EXACT font name.  That includes spelling, spaces, upper / lower case.  (E.g. “Source Sans Pro” NOT “Source Sans”; “FontAwesome” not “Font awesome”)
  3. You must enter the proper CSS Webfont location. Enter the exact location of the CSS file, NOT the website it comes from.  There’s usually someplace in the web font repository that tells you how to use it in your website.  You just need the URL, no other tags.
 Step 4: Font Information

In Google Fonts, you want the information under the “Standard” tab.  Copy just the URL, highlighted above — the rest of the tag is unnecessary.

Step 5: Save, Check in, and Publish!

Note: If this is an existing project, you and the people viewing it may need to clear their cache.

To check to see if your web fonts are in your project, open the published wireframe on Axshare and view source.  Typically, any mapped web fonts are somewhere between lines 14 – 20.

"<yoastmark

Success!  My fonts are all there!