There’s no question that audience has always been an important consideration in design. Hell, it isn’t design if there isn’t an audience. But the web has transformed that audience from a largely passive group into a powerful entity. It has tilted the balance of power back in favor of the users. Be it

• through entertaining ad campaigns going viral,
• through companies depending on super users to moderate their content,
• through small startups taking on big companies and winning market share,
• through large groups of anonymous users taking down big
  corporations’ websites,
• or through twitter beating news outlets to release breaking news,

the internet has showed us that users aren’t to be taken lightly.

Users have gotten used to that power too. The more advanced a user gets, the less accommodating they will be of a poor experience. When someone gets bored waiting for your website to load or gets frustrated when the form their filling out doesn’t remember their information, you don’t get a second chance to make things right, you lose them. Jakob Nielsen has proved time and time again that even a 1-second lag has a profound effect on a user’s perception. And after a 10-second delay, it’s a miracle if they haven’t opened a new tab already.

The WedAdvisor interface before and after the extension.

This is most evident in my own work on WebAdvisor Simplified, a browser extension that cleans up the WebAdvisor interface. Since I’m a sort of designer/hacker, I have even more ability to react to things as I speak the web’s language. When I wasn’t happy (read: disgusted) with the straight-out-of-the-90s (slash typical-enterprise-solution) interface we had to use to register for classes at RISD, I decided to create an extension that gave it a new look. From there it was easy to post a link to the extension on Facebook, and a what was a one-day project gained traction pretty quickly. (According to Alicia Lew, I even got my first testimonial the other day when a friend told her: “I feel like I’m at the Apple Store when I use this new web advisor plugin.” I’ll take that, although it’s nowhere near Apple Store level.)

Which brings up another important point: not only will users leave experiences they aren’t happy with, they’ll make sure all their friends know they left too. After all, the internet makes telling everyone you know (and more you don’t) incredibly easy.

Four recent real tweets containing “microsoft #fail” that will hopefully prove that point.

It doesn’t even matter if your product isn’t on the web. Your users are, so you’ll have to be. Big corporations have been forced at the mercy of their users to become “social” to stay in the game. But even then, users’ bullshit meters on the web are extremely sensitive. Companies that try to cut too many corners get called out quickly. People don’t aren’t looking for a mother, or worse a big brother, they want their brands to be their peers, and to do that, brands have to operate on the user’s level.

The brag screen at the end of a game of Matchuppps.

Matchuppps, a game I built for the 10k Apart contest, is a good example of appropriate tone. When the game finishes, the user is prompted to “Brag.” I could have called it “Share you score on twitter”, but that sounds lame, so people would be less inclined to act. Instead, I realized that they had just finished a two-minute race against the clock to match up images, and if they did get a good score, bragging is exactly what they’d want to do. It was about keeping the language casual and appropriate to its context.

Those challenges are especially significant for startups on the web—an area I will be joining very soon, as I’ve just accepted a leading designer position with ClassMetric. As a startup, you’re often trying to sell a product that no one knows they need yet. In our case, we’re a bit better off in that were building new solutions to problems that already exist, but the challenges remain. If the interface doesn’t make sense right away, why should the user waste their time trying to figure it out when they’re happy with the status quo?

As a designer on the web, to create “good” experiences, I need to be able to empathize with the intended audience. I need to discover and then give the audience what they want (which, as Tom Preston-Werner, Co-founder of Github, points out, isn’t always what they ask for). Everything needs to be considered, from the big picture ideas like how a user accesses the product, to smaller picture decisions like which and how many features to highlight on a products homepage, to the finest details like the degree of rotation that a Refresh arrow should have to best communicate its function.

The dynamic “Made Up Questions” on Babysquatter.

When I made Babysquatter, a web-app targeted at parents looking for a domain name for their babies, I created it with the little things in mind. In fact, seeing as it was a pretty ridiculous project, a main reason for me building it was to have fun with the details. (Because lets be honest… how soon will I need to reserve a domain name for my own child.) I took it as an opportunity to embed lots of subtle interactions into the experience. The list includes: remembering the user’s gender choice from their last visit, changing the favicon and page title when changing gender (as well as iOS icon if your on the iPhone), a mobile-friendly interface, and even a dynamic FAQ. I don’t expect every user to notice every detail, but when they do notice one, hopefully they appreciate it.

In reality, designing for the web isn’t that hard; you just have to cut all the bullshit. The web is bullshit-adverse (and sadly the offline world isn’t), so you need to be real with your users if you want to succeed. This is one area startups tend to get right because they’re designing products they’d want to use themselves. That’s one of the reasons I’m incredibly excited to join the ClassMetric team. We are college students building a solution for college classrooms. The current system is fresh in our minds—horrible enterprise solutions and all—and we know we can improve it. We are our own audience, and that’s a huge advantage.

So, after all that, how does audience relate to my work? Well… without it I wouldn’t have work in the first place.

However, before Carroll’s thesis can be applied to the iPad, its artificial barriers need to be expanded to encompass different audiences. Carroll’s thesis hinges upon the claim that the “innate human tendency to follow glances” and the ability to decipher facial expressions account for point-of-view editing’s success,²Toward a Theory of Point-of-View Editing: Communication, Emotion, and the Movie by Noël Carroll (pp. 123–141) which I find limiting and unnecessary. If we think of Carroll’s target audience of the entire human population as the extreme of mass design instead of the norm, his thesis can be adjusted to the Fishian idea of “interpretive communities”. With the entire human population as a target audience, it makes sense that only innate human tendencies would be effective tools. However, when aiming at a smaller target audience—but not so much smaller as to no longer be a candidate for mass design—such as Apple’s target audience of the middle and upper class American population, culturally specific tools become appropriate for use. With this new understanding, it follows that innate tendencies are not the only methods by which mass information can be transferred, but that learned tendencies, such as those of reading a book or writing on a note pad, are also effective. While Carroll refers to the area as “mass art”,³Toward a Theory of Point-of-View Editing: Communication, Emotion, and the Movie by Noël Carroll (p. 124) I will refer to it as mass design, as “design” alludes to the decisions made in crafting the experience for the audience and allows us to apply the concepts outside the realm of art. It is my goal to show that the interface metaphors Apple employs and advocates in their applications are a tool successfully used to achieve mass design.

To evaluate Apple’s promotion of real-world interface metaphors, we must first establish what their goals were for the iPad. As with any company, Apple’s primary goal is to maximize its profits, which requires engaging as many consumers as possible. The iPad itself has to be immediately compelling to be able to convert “tryers” to buyers. To do that, it has to be easy not only to show its features in use, but also for consumers to understand how to use an iPad right away. What is more is that the uncharted territory that comes with releasing a brand new type of product means that getting the users to acknowledge its necessity in the first place is a goal unto itself. For this reason, although it may not be to the liking of designers, Apple would stand to gain from designing for the short-term “wow factor” at the cost of long-term user experience on the iPad as a way to increase adoption rates. With this goal, Apple attempted to make the iPad “consumable by the maximum number of people employing the minimum effort”, just as Carroll’s movie-makers did with their movies.

Even before Apple designed the interface for the applications on the iPad, the interaction on the device was geared towards real-world metaphors. The “multi-touch” gesture input that Apple has patented is doing exactly what interface metaphors do, only in a physical sense: taking real-world interactions and applying them to user input on the iPad. Before multi-touch, tablets used styluses—or worse: touch screens with pointers. In the model, where you actually swipe to turn the page of a book, it makes to extend the metaphor into the interface as well and animate the turning page. The two go hand-in-hand, and they do so brilliantly to create a very enticing first encounter with the device, exactly what Apple was aiming for.

One feature of the iBooks application that has been met with significant criticism is the bookshelf metaphor used to display your collection of e-books. Critics argue that as soon as your collection is greater than a handful of books, the view becomes increasingly harder to navigate.⁴How Real by Neven Mrgan And they are absolutely right, but it does not mean the system was poorly designed by Apple, as it does not take their goals for the interface into account. It doesn’t take a genius to conclude that the system would fall apart with larger collections, but Apple didn’t need to design for larger collections. The bookshelf view was designed to elicit immediate positive reactions, not to organize information in the most efficient way. Seeing representations of physical books that glide into place and animate unfolding when opened is much more appealing to a user than a plain-text list of book titles. Neven Mrgan rightly asks, “If your booklist was also available as a boring (and useful) black-and-white table, would that be the screen you’d show your friends?”⁵How Real by Neven Mrgan Apple chose to do exactly what Carroll argues that movie-markers do; they “favor design elements that render their narratives accessible to large audiences”,⁶Toward a Theory of Point-of-View Editing: Communication, Emotion, and the Movie by Noël Carroll (p. 137) even if the elements don’t appeal to the avant-garde. So interaction designers can complain all they want about the experience with larger collections, but Apple wasn’t targeting that experience, they were targeting first time users, and they did so extremely well. Think of it this way: after being enticed into buying the iPad to read books, are you going to throw it away when you realize it doesn’t handle large collections well? Sure Apple could have added a “list view” that allowed for easy browsing of many books—and they did in a subsequent application update—but for the iPad’s release, the feature wasn’t a top priority.

Apple’s release method also accounts for why they strongly recommended developers use interface metaphors in their Human Interface Guidelines. Because of the secrecy surrounding Apple’s product releases, developers often don’t know there is a new platform to develop for until very shortly before it is released to the public. In the iPad’s case, there was only just over two months to build applications between its announcement and its public release.⁷Apple Launches iPad by AppleiPad Available in US on April 3 by Apple Not only that, but developers had no way of receiving an iPad to test their applications on before the public release date, so anything they built was built “blind”, in other words without being tested on the actual device.⁸Designing for iPad: Reality Check by Oliver ReichensteinFor this reason, the recommendation to use real-world interface metaphors in iPad applications was also a precaution by Apple, as it knew all applications would be developed blind. Instead of guessing on new interaction methods that might not function as expected on the real device, it was safer to suggest falling back on the tried-and-true use of metaphor.

While the usefulness of strong interface metaphors may not appeal to interaction designers who see the iPad as a completely novel device requiring novel interface solutions, the usefulness of real-world metaphors should not be overlooked. Apple did not decide haphazardly that interface metaphors were the way to go on the iPad. They did so because the metaphors provide the user with immediate information about how the application is structured and because they create an inviting first encounter. When designing for a completely novel device you can’t expect mass-adoption if you employ what Carroll calls “class-specific” techniques, only understandable by interface elites. Instead, you have to seek to make the experience “accessible by large numbers of untutored audiences” in the same way that movies are. That is exactly what Apple did, and, after a year’s worth of sales, we can look back and see that it worked.

Try it on your iPhone too!

I absolutely agree that spec work is bad, and that some reactions from designers were unprofessional and undermine design in the public eye. But I think certain redesigns, notably those posted on Dribbble, are perfectly acceptable because there is a fundamental difference between crowd sourcing and Dribbble. And that difference is audience.

Dribbble is a community for designers. It allows us to share our work with each other and to receive feedback. Although everyone can view Dribbble shots, it is a closed community with a specific audience. When someone uploads a Gap redesign idea to Dribbble they aren’t talking to Gap, they are talking to other designers. It’s not the equivalent of “Hey Gap, I want this to be your new logo, here it is.”, it’s more “Hey guys, I know we all hate the new logo, here are my ideas.”

And that is where it is completely different from spec work. The designers had no intention of giving their work away for free, they were simply adding to the discussion. This is something we do all the time in design. Were the iTunes logo redesigns spec work? Was Dustin Curtis’ note to American Airlines spec work? Is the Dollar Redesign Project spec work? I don’t think so, they are all examples of designers talking to each other and attempting to strengthen the importance of design in the public’s mind; counteracting the consequences of working for nothing.

What’s more is that these shots on Dribbble are not complete identity solutions; they are mere sketches of concept. The designers didn’t take into account different scenarios, or the direction Gap wanted to steer its brand, or create a set of brand guidelines. All they did was post a quick concept on Dribbble for other designers to look at. People who are outraged act like they just did all the work for Gap for free, when they barely started process. There’s no need to acknowledge the shots on Dribbble as finalized solutions in the first place. It could even be argued that those who have treated the concept sketches as finished logos have their own share in the undermining of design.

“I think designers simply want things to look good for good’s sake at times. It’s different when we are talking about industrial design, packaging design or architecture because then aesthetics and function really do play a huge role in how people perceive things. But a logo? Logos can’t be held or manipulated. They are 2D objects on paper that we look at and leave at that.”

I don’t understand how a designer can argue that an object’s appearance doesn’t affect the receiver. If that were the case, we wouldn’t be employed. It makes no difference whether the object is three dimensional or not. We process things visually first and foremost. Consumers are affected by a brand subconsciously; they have no choice in the matter.

The idea that logos are “2D objects on paper that we look at and leave at that” is also extremely narrow-minded. Sure the example is a logo on a screen, but that logo is representative of the identity as a whole. Will it not be reproduced on signage? on clothes? in the exhibit design of the store? Identity design and a company’s logo transcend the paper it is printed on.

Down the road, that logo will appear in industrial design, packaging design, interior design, web design, and plain-old print design all at once. It falls on that logo to remind consumers of the brand that companies work so hard to create. When a logo doesn’t accurately represent its brand the company sends a mixed message. Sure it might not negatively impact their profits, but it certainly could be strengthened.

I think that is what designers are upset about. We are the people that sweat the small stuff. We don’t ignore a logo’s design because we can get away with it. I for one am glad that my designer peers are outraged and welcome their responses as dialogue. They are passionate about what they do, and they want to talk about the problems with the new identity. Do we not all notice things that could be improved and iterate on them in our minds? Why should we not further this practice and discuss our ideas with our peers?

It’s not about things looking good for good’s sake; it’s about good design down to the last detail.

If you aren’t a RISD student you can consider yourself lucky to never have had to deal with WebAdvisor, and I apologize for the exclusive target audience of this post, but something had to be done.

I’ve created Safari and Chrome extensions to simplify the WebAdvisor interface. While the pieces themselves are unchanged, their appearance has been drastically simplified—no more faux small-caps, minuscule type, or unnecessary junk. With the horrid interface gone, now all of your focus can be on clearing your cookies.

Download Safari ExtensionDownload Chrome Extension

To install these extensions you need to be using the latest version of Safari or Chrome—which you should be using anyways you fool… they are free.

Only works in Webkit browsers.

My favorite part is the diagonal bellyband and matching book jacket.

For lack of a fancy name I just call it multi-single-line CSS. The premise is pretty simple: maintain the legibility of multi-line CSS while shortening total file length. The way it works is that you group similar attributes (for example width and height) onto a single line. In doing so, you’re saving space while making connections between attributes that are often referenced together.

As you can see, it’s a nice middle ground between long and short. Here are a couple more examples pulled from my CSS file:

Hopefully you find it useful, and if you have any suggestions to make it better I’d love to hear ‘em!

“Before I head out let me say that if you are looking for ideas to write on your blog or want to test an idea out Drawar Forums is the place.”

Before I start, I want to make it clear that I’m not bashing Scrivs or the Drawar Forums. Scrivs is a huge proponent for people sharing their ideas on their own blogs and he is constantly making me think, and the Drawar Forums provide a great place for discussion.

That being said, I think the last part of that tweet sums up the problem with a lot of design blogs. You shouldn’t need to “test an idea out” before you run it on your own blog. Have people forgotten that blogs are about opinions?

If you think that your posts have to be impenetrable before you can publish them on your blog, you are setting yourself up for failure. Anything you post should definitely be well thought out, but to assume that you can arrive at the irrefutable truth of a topic is naïve. Instead, explain your opinion clearly and open the discussion to others.

The way I see it, the comments sections of my own blog posts are one of the best places to learn. It is natural to be scared of what responses you will receive, but that fear shouldn’t prevent you from posting in the first place. How will you learn if you don’t solidify your ideas to begin with?

Francisco Inchauste’s article on Drawar criticizing the trend of art direction really got me thinking. Sure art direction can add to the experience of an article, but he’s right in thinking the trend it isn’t all good, and it definitely isn’t always needed. The key to art direction is knowing which articles can benefit from it and for which it will detract from the content.

Art direction doesn’t need to be an all-or-nothing treatment. Who’s to say there’s nothing between completely art-directed content and the default template? I think people get sucked into the idea that every post has to be drastically different to be a success. If there’s no reason to scrap your site’s structure, don’t do it.

That’s how I’ve decided to handle styling articles on my blog; I use as much art direction as they demand. I like to think of it as similar to the concept for the Rotis type-family by Otl Aicher:

• Templated. When your default template does the job, there’s no need to impress, just stick to the basics.
• Semi-Templated. Sometimes there’s no need to recreate the wheel but you still need to add a little functionality or flare to an article.
• Semi-Art-Directed. For when you need all the style of an art-directed article, but don’t want to isolate the article from the rest of your site.
• Art-Directed. The complete overhaul: scrap the entire structure of your blog (except maybe your navigation) and tailor everything to the article.

Of course these strict categories don’t really exist; they’re just an interesting way to visualize the idea.

The way I achieve the art direction on my blog is with two plugins: Designate by Benedict Eastaugh and Art Direction by Noël Jackson. Designate is an awesome plugin that automatically links a stylesheet with the article’s slug to the article if one exists. It would be great if it also linked javascript files, but since it doesn’t, I add specific jQuery code to articles through Art-Direction’s custom post field.

Take my word for it or try the system for yourself, but it’s very liberating. You aren’t ever boxed into a single style, yet you still have a solid template to fall back on when you need it. This allows me to use my blog as an experimenting ground as well—something that I find very important.

What do you think? Should art-direction be implemented in varying amounts?

The biggest challenge in designing for the iPhone is maximizing screen real estate and this is where my biggest problem with Opera Mini lies. One of its “features” you will notice immediately is that the title bar stays visible even as your scroll down the page. Why? It’s a waste of space. Be honest, how often do you need to look at the title of a page when viewing it? Close to never. Safari mobile does a good job of hiding the title as soon as you scroll down the page, why would Opera deviate from this behavior?

The presence of the title bar is made even more annoying by its obnoxious design. It’s almost as if Opera wanted the title bar to stay visible so that one-sixth of their logo would visible along with it. If somehow we did agree that the bar should stay visible, why would it be made red—a color that will compete (and potentially clash) with anything on the website you’re viewing. And to top it all off it’s separated by a 2-pixel black stroke and a dark drop shadow.

The only way to hide the title bar is to turn on “full-screen” mode. And in full-screen mode it simply never shows up even if you wanted to see it again. (You have to pretend to enter a new URL to get it to pop-up.) Of course, even in full-screen mode you can’t escape that ugly drop shadow.

My problems with Opera Mini’s interface don’t end with the title bar, but I’ll keep all the other points brief:

• 
  • Their logo in the top right corner is barely discernible and unnecessary.
  • What does that “recommend to a friend” button recommend… and why?
  • The icons in the bottom bar are too cramped.
• 
  • That page icon is unnecessary and old-looking.
  • The “Cancel” button is awkward sized and placed and it blends into the bar it’s on!
• 
  • Not only does this not tell me anything at first glance, but try using it… it’s a pain.
• 
  • Those icons are tacky and could easily be simplified to reduce visual clutter.
  • The active state for the menu buttons doesn’t read as an active button.
• 
  • The unnecessary icon makes another appearance.
  • Apple has gone to the trouble of designing good looking on/off switches and they were replaced by this? Seriously?
• 
  • And finally… if there was one place that might have benefited from an extra icon it is right here. A small magnifying glass inside the find bar would have been extremely helpful.

All of these findings are after having only quickly used the application; I don’t understand how the Opera team let some of these things slide. I understand that Opera Mini might be faster at loading pages than Safari, and some of the options it provides are very useful, but I really wish they would step up their interface design so I wouldn’t have to cringe while using it. What do you guys think?