• October 20, 2011

Good design is more than just boxes and arrows

I get asked “should designers code?” more often than I feel like I should. The answer is yes. If you are an interaction designer, you should make interactive things. And if you design for the web, you should know web technology: html, css, and basic javascript. No one expects a designer to make a fully-functioning application, but you should be able to make a prototype that you can click through and evaluate. Learning basic markup and HTML is not as complicated as you think  it is, and there are countless support materials for designers who want to learn how to use basic javascript.

Visual Interaction Prototyper?

Martymoo of All Trades

I don’t think this means that specialization is a bad thing, but being well versed in interaction design / HCI skills, basic graphic design, and basic prototyping will make you a better designer regardless of where your full-time focus is.

The follow-up question I always get after giving this response is “how do I get better at x?” The answer to this is deceptively simple: you get better at something by doing it over and over. My experience running the NYC marathon is the best practical example of this: if you run a little more every week, you’ll eventually run a marathon. You have to make time to pursue personal projects, and in that act as lead designer, visual designer, and implementer (my current project du jour is Stepchart, which is ever so slowly advancing). Even if you don’t finish you’ll learn far more than just trying out tutorials, and it will be fun because you’re actually doing something rather than just learning about it.

So designers: go forth and code! It will make you a better designer, and it’s not SO hard.

  • October 18, 2011

Pop Up Cards Must Die!

… on mobile devices, at least.

Small floating panels that appear when you hover over an item (popup cards) give users instant access to information without leaving their current page. Pop-up cards have become a pretty common interaction pattern on desktop web browsers, sometimes successfully (for example, LinkedIn has a pretty decent profile card that pops up on hover) and some are nearly universally reviled (for example, vibrant media’s “landmine” hover ads). In general I think pop-up cards are OK when used thoughtfully, but can easily become confusing and distracting to users. The ultimate tip-off that hover cards have usability problems is that they often have close controls on them: anything that is triggered by a hover should not require its own set of controls to be managed.

Sometimes useful, generally annoying

I have stronger opinions when it comes to mobile devices, however. Pop-up cards rarely make sense in a mobile context. Here’s why:

  1. On a mobile device, there is no hover gesture.
    People either tap something or they don’t. Until we have some sort of crazy optical recognition (I stare hard a person’s name to see their business card!) there is only one real gesture: tapping.
  2. Who needs a middle man?
    On a mobile device, it’s generally just as efficient to take you to a new page as it is to display a layered card on top of your current interface. Profile pages in mobile UIs essentially function as business cards: don’t display a pop-up card, just navigate directly to the profile.
  3. Managing pop-up cards on mobile is frustrating.
    Dismissing a pop-up card is a pain on mobile – users may inadvertently tap another link while trying to dismiss a card, and android users may try to use their physical back-button to dismiss the card (which would navigate them back an entire page in the mobile browser).

The bottom line: not all desktop patterns make sense on mobile devices, and pop-up cards are definitely one of them. I’m hoping to revisit this in a little while to address pop-up cards and tablets. I am pretty sure they should still be avoided, but it’s possible that they might make sense given the larger screen size available.