Your friends at Viget present Inspire, a Design & Interaction Blog

Beyond Empathy: Approaching a New Career in UX

So you're starting a career in UX. You’re empathetic, detail-oriented, and a stellar organizer to boot, and you want to combine these skills into a career. Welcome, New UX Designer! We’re so happy to have you in the industry.

Now, I’m sure you’ve heard that empathy is at the core of the UX process; this is one thing we’re great at communicating to designers who are just starting out. However, UX requires more than empathy, and it’s hard to know what else to prioritize when you’re new in the industry and there’s so much to learn. Where do you begin?

Here are a few additional lessons I hope will serve you well as you start out in your UX career.


A Skip Link Primer

Of all the accessibility enhancements that can be made to a page, adding a "skip to content" link is one of the easier wins. These links allow keyboard-only (non-mouse) users to quickly jump to the page's main content or other important sections.

In fact, if you need to conform to WCAG, Level A or above section 2.4.1 requires it.

"A mechanism [...] to bypass blocks of content that are repeated on multiple Web pages."

There's some important nuances to this seemingly simple feature, both in use and implementation, that I'm going to explore.


Testing Accordion Menu Designs & Iconography

Figure 1

Figure 1 - Animated gif of 7 landing page designs. Each frame represents a separate test conducted with 20 participants.

Among UI patterns, the accordion menu is a workhorse. Its ability to collapse long lists into manageable groups is really useful for navigation menus and particularly for search filters. Beyond the decision to use an accordion menu, I often find the specifics of actually designing one to be a little murky. What icon should I use? Should the icon go on the left or right of the menu item? In terms of usability, is an icon really necessary at all?

Seeking some certainty on these questions, I decided to do some testing.


Designing Experience Layers

Yesterday afternoon, I posted a little jab at Vine. What you see in that screenshot is a Vine video page completely devoid of usable content owing to a JavaScript error. I’m attempting a pretty typical task and a primary function of Vine’s service: I want to watch Jay-Z’s reaction to Kanye reprising his schtick at the Grammys. As you do.

But I can’t. Something went wrong. You see, Vine’s video pages are built in a way that expects everything goes off without a hitch. The web browser will receive all the necessary assets in the necessary order and execute everything exactly as the developer intended. Unfortunately, that’s not the way the Web often works.

(For those curious, I was using the most up-to-date version of Google Chrome on a MacBook Air running the latest operating system on my home’s broadband Internet connection. Pretty optimal conditions, right?)

So I post about it on Twitter. Friend and colleague Helen Holmes saw my post and kicked off a lengthy back-and-forth that convinced me to commit my thoughts to the page. I’ve been meaning to write about this particular topic for a while and here’s what’s been rattling around in my head.


Easy Textures with CSS Masks

We recently worked with The Nature Conservancy on a microsite and campaign strategy to promote a new PBS series, “EARTH A New Wild.” One small detail of the overall design language was a gritty, earthy texture, which was reserved for use on headlines, buttons and icons, and the brand’s identity marks.

There are a few different ways to achieve this effect in today’s browsers, from CSS background-clip and mask-image, to SVG <clippath>, <pattern> and <mask>, and even canvas. Each have their own varying levels of support and implementation peculiarities; however, one of these rises above the rest in terms of its ease of implementation and flexibility of use.