Off the Hoof

The Failure of Empathy

I went back for a second helping of Avatar this Sunday. There’s a scene early on in the movie where one of the scientists walks across the lab carrying the “mobile computer slab of the future.” We’ve seen one of these in almost every sci-fi movie of the last 50 years. It comes free with a jetpack, I suppose. Except this time, one month later, my 12 year old son turns to me and whispers “Look Dad, it’s an iPad.”

As many others have noted, the release of the iPad might be the cannonball into the consumer device pool the iPhone dipped its toes in. It’s also been referred to as a thing that sits between that iPhone and your laptop. I see it as more of a fork in the road. It’s the thing many people will get INSTEAD of a laptop.

The iPad isn’t the future of computing; it’s a replacement for computing.

It’s the payoff to all the work done by multiple industries over the last 20–30 years. It’s the subtraction of 20lbs of textbooks in my son’s backpack, and the device I finally feel comfortable buying my parents.

That’s why I was surprised by the reaction the iPad got the day it launched. Following along on Twitter I was seeing things like ‘underwhelming’, ‘meh’ , ’it’s not open’, ‘it’s just a big iPhone’, etc. And most of this stuff was coming from people who design and build interactive experiences. As designers, and technologists we’re very much aware that the interfaces we build are for people who are “not us,’ but we still haven’t made that leap about the concept of “computing.”

The people don’t want “tablet computers” with Ubuntu and OpenID (worst name ever for a product attempting broad acceptance). They could honestly give a shit whether it’s a closed or open system. And, let’s be really honest, they probably care as much about DRM as they do about baseball players juicing; by which I mean not very much at all. They want things to work most of the time, and be easy to fix when they don’t. And if the process by which it happens is “magic” they are totally cool with that.

They want the thing in the movies.

As an industry, we need to understand that not wanting root access doesn’t make you stupid. It simply means you do not want root access. Failing to comprehend this is not only a failure of empathy, but a failure of service.

Written by Mike Monteiro on February 3, 2010 with 130 comments |

Pictures of You

What kind of white man do you aspire to be?

While conducting project research, I came across the following pitch on the L.A. Times website:

Upon clicking, I proceeded through a series of screens, each presenting a question and a grid of photos to select from as my response. The VisualDNA corporate site refers to these as “highly viral image quizzes.”

The grid above gave me particular pause. It’s asking the viewer to place themselves in one of those photos. As a white woman, I feel a little shut out. What about a black woman? What is she to make of that photo of a white guy hugging a displeased-looking black baby? How does that represent success to her?

This is a terrific example of the dangers inherent in using photos at the exclusion of words to represent the needs and mindset of your presumed audience.

It is nearly impossible to convey a generic aspect of the human experience with a photograph of a specific individual. I’ll admit an allowance for some few great artists.

Even those proffered grids pertaining to less highly-charged topics—such as choice of preferred treat or general topic of interest (books vs television)—require a lot of work and a cognitive leap. I squinted at an inch square image wondering whether it portrayed a laboratory or a prison. Once I figured out what the specific image represented, I then had to abstract to the category. Was I pondering my relative concern about prisons in general, or prison healthcare, or was that an execution chamber?

Why make people work so hard and risk neglecting or insulting huge swathes of your audience, particularly when you are trying to demonstrate how well you can learn their priorities and preferences? Is it really merely to justify a reductive, restrictive aesthetic choice?

The same technology could have easily used an interface like that of Hunch, which imposes a minimal cognitive burden on participants in its surveys and avoids the pitfalls of specific representation.

The L.A. Times serves and represents an immense, diverse population. While admirably embracing new ways to reach and understand people they stumbled into an old way to alienate them.

Written by Erika Hall on January 19, 2010 with 2 comments |

Philadelphia, my love.

I grew up in North Philadelphia. It’s not a pretty place, but it’s where I’m from. And my Philadelphia pride goes deep.¹ Although I live in SF now, there are three times a year when I can still put on a Phillies cap and walk into AT&T Park to root for my beloved hometown team. (It’s worth pointing out that I’d never have the cojones to walk into a Philadelphia park wearing enemy colors.)

This morning I read about the Philadelphia rebranding on the always informative Brand New. Although I agree with author Kosal Sen’s main point that the logo sucks, I disagree with him on one very important point:

Philadelphia’s history does not start and end with the Liberty Bell. Any visiting tourist knows all the other historic must-sees like Betsy Ross’s house, Independence Hall, and Penn’s Landing. Conceptually, the choice of using the Bell could not be more uninspiring and obvious.

Bullshit.

We own the hell out of that bell. You can’t look at it and NOT think Philadelphia. Few cities are lucky enough to have as strong an iconic representation as that bell.

Our informal office survey came up with this short list:

• Paris and the Eiffel Tower
• St. Louis and the Gateway Arch
• Seattle and the Space Needle
• Philadelphia and the Liberty Bell

I’m sure there are a few more, go ahead and comment away, but you get the point. (There was one lone vote for San Antonio and the Alamo, and before all you New Yorkers start complaining, the Statue of Liberty is more an icon of America and not the city per se. Enjoy your apple.)

The issue here is on Mr. Sen’s use of ‘uninspiring and obvious.’ By which I believe Mr. Sen means it was not a ‘clever’ choice. And I’d agree with that. It’s not clever, but neither does it have to be. The goal of design is to nail the problem, not showcase the cleverness of the designer. There are times when the solution to the problem is such a ridiculous slam dunk that cleverness only gets in the way of good work.

The problem with the new Philadelphia brand isn’t the bell. It’s the crap execution. No doubt impaired by the committee of 65² that oversaw the project and came up with that ridiculous tagline.

Don’t blame the bell though.

^1. As proven by our I’m not angry, I’m from Philly t-shirt. Featuring the Liberty Bell.

^2. …and by the way, anytime 65 Philadelphians get together to come up with a city tagline and it doesn’t come back as “Phuck New York!” you know you have a problem.

Written by Mike Monteiro on December 8, 2009 with 27 comments |

The Death of Favrd

I awoke Sunday morning to the news that Favrd was dead. Without ceremony. Without warning. Without a chance to say goodbye. It didn’t go out for cigarettes. It didn’t tell us we needed some time apart. It didn’t become ‘Favrd from Yahoo!’ It didn’t tell us it had found its soul mate elsewhere. Dean Allen just pulled the plug and it was over.

For those not familiar, Favrd was a small but passionate community of people dedicated to amusing themselves on Twitter. Its ‘no webcock’ policy managed to keep the prancing fools who claim to have unlocked the secret genie secrets to ultimate success in 140 characters or less at bay.

And like most communities on the web built on the passion of a selected few it had to die. Lucky for us it had a smart bastard of a lovely human being at the helm. He knew when to kill it.

It’s a cliché, sure, but in the year that Favrd existed I made some really great friends. Those are mine to keep. Favrd was Dean’s to kill. And as with many community-building situations in life; summer camp, college, different jobs, conferences and prison, the relationships you build can last longer than the situation; if you’re willing to maintain them.

Now, we can all bitch about it being gone or we can go build something good enough that people will cry when it’s gone too.

Thanks Dean. You fucker.

Written by Mike Monteiro on December 7, 2009 with 6 comments |

Mule Nog '09

Mule Nog is one of the fine annual traditions here at Mule. Every year we invite our friends, families, clients, and those yet-to-be unfriended, to a grand end-of-year celebration. We offer libations, snacks, entertainment and the comfort of a fireplace (video).We make toasts, celebrate the year and have a nice time.

You’ve had it too easy.

This year we want payback. To get invited to the party you have to make a video. Like this one:

Post it to our flickr group. If we like what we do we’ll send you an invite code which you’ll want to take to MuleNog.com for party details. It’s really very easy.

The holidays are about giving. Give us videos.

Oh, hey. As a special added bonus we’re co-hosting this year’s party with our neighbors Kicker Studio. They couldn’t be happier.

Written by Mike Monteiro on November 18, 2009 with 1 comment |

Putting the SEO in Awesome

Recently, there was a renewed disturbance in the force around Search Engine Optimization and whether it is a legitimate endeavor. On its face, this seems like a peculiar thing for Internet professionals to be fighting about, still, in 2009. People turn to search engines—and for 65% of searches, Google specifically—as the first step to solving a problem they don’t already have the answer to. If you are in the business of providing something to people on the Web, you ought to be doing everything you can to make sure these people find what you are offering.

Of course it isn’t so simple. In the wake of search engine dominance, a lot of “consultants” popped up making unrealistic claims about guaranteed high search rankings using questionable or downright deceptive techniques. [See: the current rush to redirect all the links pointing to over 7 million defunct Geocities URLs]. This harmed the overall search experience, and damaged the experience of using the Web in general.

The snake oil salespersons still exist, but the situation overall is getting better. Businesses are learning the difference between bad tactics and unrealistic expectations about ranking (“black hat” SEO) and better tactics connected to longer-term strategies (“white hat” SEO, social media marketing, etc). Search engines are constantly adjusting their algorithms. People are getting better at sifting through the results.

We see optimizing websites for findability as a genuine distinct practice and a good thing. SEO is merely a tool. Specifically, SEO is a marketing tool. And the moral value of marketing flows from the mission and values of an organization (adjusted for ineptitude and greed on the part of individual participants conducting the marketing activities).

Also, SEO is not necessarily obvious. Everyone involved in design and development could be doing everything “right” in terms of their craft, and you might still be hiding your offering under a bushel. The set of things we consider to be “search engines” and the range of techniques that count as “optimization” change on a daily basis.

We happily join the chorus recommending that you make something awesome. But if your product is merely legitimate and useful, you probably won’t be social media linkbait without a lot of thought and work. (Apple products are awesome, right? And their marketing is at least as good.)

So, to solve the philosophical debate, the moral dilemma as it were, around this term, we propose rallying around user-centered SEO.

User-centered SEO starts with considering who you want to find your business online and how you need them to interact with it to succeed. You also have to consider the landscape: from your target customer’s point of view, where else might they turn to solve the problem you want to solve for them? How will they articulate this need and where will they turn to fill it? This should inform how you approach your entire strategy, including your SEO. There is no one-size-fits-all solution.

Most of our business here at Mule Design comes through referral. Our new clients typically don’t find us through keyword search on Google. For a business like ours, the big search engines come into play in terms of reputation management. When someone searches for us specifically, we want them to find only good, and possibly amusing, things.

However, for an e-commerce retailer, or advertising-supported editorial site, or Web-based product, it’s a whole different picture. They should do everything ethical and effective to make sure that potential customers find them instead of their competitors. And that benefits the end-user, too.

As a potential customer, the sooner I find something substantive that matches my query, the sooner I’ve fulfilled step 1 of a goal. In many cases, people can articulate very specific personal needs. They then turn to search engines to translate personal needs into sources of solutions. For example, Zappo’s is awesome and customer-centered. They communicate directly to their customers through social media, and they have a huge base of evangelists. And they are using every SEO tactic they can get away with, sub-domains, brand category pages. This can be a huge user benefit if it helps the person trying to find a particular type of shoe find it faster.

On the question of whether independent SEO consultants are necessary, it’s a matter of goals, complexity, and scale. Just as everyone designing and developing websites should know the basic principles of usability and user research, sometimes you need a dedicated specialist. The same goes for SEO, and many, many other practices.

Besides, it’s 2009. Time to move on and start hating the Twitter consultants.

Written by Erika Hall on November 12, 2009 |

Design & Banding

In addition to belonging to the design team of rockstars, I also belong to a rock band of designers. My all-designer band has taken a promiscuous attitude to our band’s online presence. We’ll make a band page on whatever new music site sounds worth the set-up time and see what sticks. Like the parent who overloads her kindergartener with too many extracurriculars, we’ve signed our band up for 20+ music sites. But there is only one web-related question we get from other bands and new fans: “Do you guys have a MySpace?”

Why is ugly, ad-heavy, slow-loading MySpace still the main site people go to to hear bands? Trendy teens and clueless entrepreneurs alike have moved on from the sleaze, but not bands. It’s still the main way our band gets listened to, connects with other bands, and sets up shows. After three years with an account and an unimpressive (by band standards) 40k+ views, we get contacted by bands from Berlin to Burlingame looking to play shows in San Francisco. It’s a popularity contest, I admit, that I subscribe too. If a band has less than 5k views, I’m thinking they’re babies at this band thing.

Why do people still use MySpace to check out bands? Consistency. I can go to Beyonce’s page and Simon Lebron’s page and find their songs in the same place. There is also a high chance of finding out who’s in the band, their next show, and contact information.

Until another site can boast every band’s info like this, I will be checking MySpace. With Ugh. As a designer, there are several sites out their that are furthering design in the name of music. Here are my three favorites:

The Sixtyone is like D&D for music snobs. Quests, levels, a “music adventure”: game on! T61’s straightforward, clean design doesn’t have a ton of personality, but the site interactions are very thoughtful. Press play in the header and you’ll see what I mean with the uninterruptible music player and friendly corner dialogs. Our reoccurring user success story that we haven’t seen on any other sites (except maybe YouTube)—we get rabid fans from T61. They email us saying they remember when we were just Level 7 and they have been there bumping us (a good thing) ever since. And then they show up to our shows and tell us some more! Flippin’ awesome.

Muxtape is an elegant beauty. The site’s most recent and totally legal incarnation allows indie bands, by invitation only [hot breath on nails], to build themselves a page showcasing their songs, about information, and likely some big photos of themselves all chopped up. I love how this site encourages user-created good design. Bands are confined to a 3x4 grid to fill with whatever they please, but really what more do you need? Since the good design on Muxtape requires no hacking, the designs are usually elegant and simple.

The Next Big Sound allows you to see how a band is doing in a nice little data visualization. It surveys the views, listens, comments, and fans a band has on a handful of big music sites. The real high-school fun happens when you can compare the popularity of different bands. The graphs is usefully colorful and easy to recalculate. Unlike the other two mentioned sites, this site isn’t as interesting to folks without bands. But bands beware—NBS can be a mood-altering substance.

So what have we done with our design freedoms and constraints on all these sites? Well, if you really must know—here is my band, My First Earthquake, are on all the mentioned sites: The Sixtyone Muxtape Next Big Sound Myspace

And totally within our own control: Our site

Written by Rebecca Bortman on October 5, 2009 with 4 comments |

Writing CSS Efficiently

For the last few projects we’ve done at Mule, I’ve been able to work closer with the clients’ implementation teams than I sometimes do. They were building the site (or application) as I coded, which meant I got nearly instant feedback about whether or not a particular technique was going to work in their environment and could go back and change things on the fly. As a result I had to be particularly organized about how I set up my code — so I could find things quickly — and really careful about how I used classes vs IDs and how tricky I got with my code. These are just a few little observations that I made and have changed or not changed my habits accordingly.

Note: This is about writing your CSS in a text editor, not a CSS-specific editor.

I’ve always opted for a minimum number of stylesheets, versus splitting things like fonts and colors into separate stylesheets, for a couple of reasons. First, I think for the most part the combination of today’s average Internet connection speed and the average person’s browser cache settings, one large HTTP request is better than several small ones. Secondly, I don’t like jumping from document to document. I’d rather have it all right there in front of me in one big chunk (with the exception of IE-specific style overrides).

The organization of that big chunk is something I still tweak on every project: For the most part I put styles for basic HTML tags (no classes or IDs) at the very top, then the big content sections (wrappers, banner, content, footer), then break it out into sections by the name or type of template. That’s mostly for my own cognitive convenience, and it’s worked really well for me for years.

However a couple months back I saw a tip on some site (that I’ve unfortunately forgotten now, so I can’t give credit) that made a huge difference in how I work, given how laughably obvious it is in hindsight:

Alphabetize your CSS properties within your selectors.

Duh, right? In the past, I would just tack properties on to the end as I went, although I would sometimes group things in a way that made some kind of internal sense like this.

a {
    color:#ff0;
    text-decoration:none;
    display:block;
    width:100px;
    height:15px;
    padding:2px;
}

Then when I went looking for something I’d always spend time digging through lists of properties that would be in whatever order made sense at the time that I wrote them.

Now I know exactly where “height” is going to show up not only in relation to “width”, but to “color”, “position”, and “z-index”. (If I use any of the -moz or -webkit properties, they go at the end of the list.)

I was amazed and chagrined at how much sense that one practice made, but there’s a secondary effect to using it:

Keep all your properties for a given selector on one line.

I can now easily keep all my properties on one line instead of having a line-break and a tab for each property, which makes the far left column of my stylesheet a breeze to scan.

a { color:#ff0;display:block;height:15px;padding:2px;text-decoration:none;width:100px; }

Indent descendent selectors beneath their ancestors for some visual grouping.

If I have a bunch of styles specific to the footer (for example), I’ll format them like this:

#footer { ...properties... }
    #footer ul { ...properties... }
    #footer p { ...properties... }

I only ever indent one level because more than that and the indenting starts to become less efficient. This isn’t something that’s going to have complicated nesting like HTML can; it’s just a way to chunk up the stylesheet for scanability.

Code for IE6 as you go.

I’m happy to say that as a team, we at Mule are pretty darn good at designing sites that look fantastic while maintaining cross-browser consistency without getting into a bunch of stupid hacks. Sure, I’d love to say we’ve just stopped supporting or at least coddling IE6, but the sites we build have audiences that still use that browser in large numbers. Plus, most of the things that I end up having to fix for IE6 are required for its almost-as-bad sibling, IE7. So between those two, yeah, I end up having a few things that go into stylesheets loaded with conditional comments.

On one of our recent projects I decided to take the approach of “Make it right, then make it work in IE”. While that absolutely sped up the “make it right” period, the “make it work in IE” period was kind of drag because we had to go back and change some HTML that the dev team had already incorporated into their CMS. In this case it was a fairly easy fix, and it was only in one place, but if I had followed my usual rule, we wouldn’t have had to do it all.

So keep your problem children handy and if you do something in your code that you’re not sure about, check them right away.

If you have separate stylesheets for Internet Explorer, keep your selectors in the same order as the main stylesheet.

As with the alphabetizing of properities, this might seem like a no-brainer, but my habit has been to just add selectors to the bottom of the IE stylesheet(s) as I go (at least in those cases where the cascade wasn’t important). And while these stylesheets are rarely more than 10 or 15 lines, it’s more about handing things off to someone else in a way that doesn’t look like I just dumped a bunch of stuff in a box at the last minute.

These probably won’t save hours on any given project, but they will allow to think about something besides “Where the hell is that rule?” and it will definitely be easier to hand things off to the client at the end of the project.

Written by David McCreath on May 26, 2009 with 3 comments |

WordPress Plugin for Six Apart Services

We were happy to learn that friend of Mule Art Wells worked with our friends at Six Apart to develop a new WordPress plugin that gives WordPress users access to several Six Apart services: TypePad AntiSpam, TypePad Connect (6A’s commenting and community tools), Six Apart Media (6A’s advertising network), and Blogs.com (6A’s blog directory).

If you know our work, you know we’ve done a lot of work with Six Apart: we’ve worked on their corporate site and the most recent versions of both TypePad and Movable Type, plus we’ve built a lot of sites using both of those products. We’ve also worked spent our fair share of time working on sites powered by WordPress. We think both platforms are great, and we’re happy to have both of them in our arsenal of tools. This kind of integration strengthens both and we think it’s a really fantastic move for Six Apart to make.

And nice work, Art!

Written by David McCreath on May 16, 2009 with 1 comment |

Bookmarkable Tabs with jQuery UI

Tabs have proven to be a reliable and intuitive interface model for web pages that contain related content. But depending on how you set things up, tabs have one serious flaw: They frequently make it difficult or impossible to bookmark a specific tab. That is, if you have a page with five tabs on it, and I want to send someone to that page with specific tab showing, how do I do it?

We ran into this issue on a recent project. The client had two specific requirements for using a tabbed interface on some of their pages:

1. The URL in the browser’s address bar must update when a tab is clicked, so that your normal web user would see that each tab has a unique URL.
2. If someone sent that link around, the page would load with the correct tab content exposed, and move to the tabbed area, while leaving the tabs themselves visible so that a new visitor would understand that the were looking at only part of the page.

Working with the client’s implementation team, we had already decided to use jQuery for the site’s JavaScript, and further to use the jQuery UI scripts because they provide quite a bit of funcitonality that we wanted. Unfortunately, jQuery UI’s tab widget failed both of our requirements.

To be clear, if you use jQuery UI tabs, and someone figures out how to send around a tab-specific link, the page will load with the correct tab exposed. But it loads the page at the top of the tab content area instead of at the top of the tabs themselves. So someone who’s never visited the site before would have to scroll up to realize that there are other tabs that might contain content they’d also be interested in.

The bookmarking issue is one refered to directly on the jQuery UI pages. The script that was adapted for the tabs widget used a history plugin that needs some rewriting, and the jQuery UI team has not had time to update those scripts.

Fortunately, the jQuery scrollTo plugin and its related localScroll plugin solved both of our problems quite nicely. Those plugins provide some very slick functionality for sliding users around on web pages, but we’re going to use them in a much less flashy way.

Loading the Plugins

As with any jQuery plugin, you can keep the scripts in separate files and load them all as needed, or you can gang them up in one file. It depends whether your set up benefits from a slight larger file and fewer HTTP requests (if you’re using the plugins on all or most of your pages) or from having smaller, more discrete files.

Just make sure the plugins are loaded before or with your site’s JavaScript file.

Creating the Tabs

All of our calls happen within document.ready() function.

First we’ll create the tabs using the normal jQuery UI technique. In this case, we’ve wrapped the tabs ul and related divs in a div with a class of “tab-set”.

$(".tab-set").tabs();

Getting New Visitors to the Correct Tab

Next, we want to see if we need to load a specific tab. We’ll check to see if the page we’re on has a “tab-set” div, and check the URL to see if there’s a hash on the end of it. If yes to both, then we use the scrollTo plugin to jump us down to the “tab-set” div — which keeps the tabs visible — while relying jQuery UI’s default behavior to show the correct tab content.

if($(".tab-set") && document.location.hash){
  $.scrollTo(".tab-set");
}

Creating Bookmarkable URLs for the Tabs

Once a user is on the page, we use the localScroll plugin to update the URL in the address bar while keeping the page from reloading.

$(".tab-set ul").localScroll({ 
  target:".tab-set",
  duration:0,
  hash:true
});

What that says is “Scroll to the div ‘tab-set’ instead of the target of the link itself, do it with no animation, and add the hash to the URL”.

That’s it! All requirements met.

Demo Pages

Default jQuery UI Tabs

Bookmarkable jQuery UI Tabs with scrollTo and localScroll

Links

jQuery: http://jquery.com/

jQuery UI: http://jqueryui.com/

scrollTo Plugin: http://plugins.jquery.com/project/ScrollTo

localScroll Plugin: http://plugins.jquery.com/project/LocalScroll

Written by David McCreath on May 11, 2009 with 9 comments |

Archives