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

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.


Designing for Microphones

We recently launched Shure Design Studio, a tool that lets anyone create custom microphone handle designs. Designing a fun, usable UI for this project was a blast. Possibly even more fun: the project included creating a library of built-in custom designs. To give users a range of styles to choose from, three designers here at Viget came up with custom illustrations, patterns, and textures, all designed to look badass on a microphone.


Now and Later User Experience Design

As a child, I was baffled by my parents' reluctance to feed me candy at mealtime. Candy made me happy. Didn't they value my happiness?

Of course they did, but like most parents, they knew that to make their children truly happy in the long-term, they must forego the occasional, sugary, short-term happiness.

Like parenting, modern user experience design requires a delicate balance of careful short- and long-term considerations.