Designers Should Welcome Trouble

An absolute must watch for every designer. Every builder too. Seriously. Watch this in it’s entirety.

To say that this resonates with me is an understatement of the highest order, and the timing is particularly important for me as I look at my role, both personal and professional in life.

It strikes to my core. If it doesn’t do the same to you as a designer, then it is time to rethink your place in the world.

The Usability of the Link Icon

Peter Steen Høgenhaug has posted the results of a usability test focused “aimed at exploring how little documentation you could leave in a CMS, and still have even the most non-savvy person use it with no issues”. This lead him to discover how few people make the connection between an icon of two links in a chain with the act of creating a hyperlink to another page. It’s a quick read and a fascinating study of the cognitive association, or lack thereof when trying to extend real world imagery to represent online actions.

It would be interesting to see a study focused on users who are familiar with content management systems, to see if they find this to be an issue. Without a great replacement, we may need to rely on discovery and learning for this association.

This reminds me a lot of my previous post . So, posing the same question as we did there – what would be a good replacement? I haven’t been able to come up with a great iconic substitution and am leaning ever so slightly, toward simply using the word Link. I’m sure there’s something better though.

What do you think, is it worth changing? If so, what should it be?

Visualizing the Debt Crisis: Layers of Passion and Opinion

Screenshot Taken on NYTimes.com

I love how the New York Times uses user-generated content with real-time(ish) visualization for this piece title The Debt Crisis: What Should Congress Do?

The spread of opinion and the level of passion for each point is instantly visible at both an individual and aggregate level. The requirement that each submissions must also include a comment adds further depth and understanding.

Fixed-Width vs. Responsive, Connect Four vs. Twister

Fixed-width design isn’t going away, because it’s easy. It’s like playing the game Connect Four versus playing Twister. One is simple and straightforward, the other multivariate, so much so that you can’t really formulate a one-size-fits-all strategy. Which isn’t to say people shouldn’t endeavor to do responsive sites, just that they can’t expect the heavy lifting to be done for them.

Nathan Smith on Google Buzz for .Net Magazine’s next “Big Question

Data Will Set You Straight

We are very proud of our empirical focus, because it makes us humble – we realize that most of the time, we don’t know up-front what customers want. The feedback from testing quickly sets us straight, and helps make sure that our efforts are really focused at optimizing the things that make a difference in the customer experience

Neil Hunt, Chief Product Officer, Netflix

The rest of the response to the question “What types of things does Netflix A/B test aside from member sign-up?” is well worth the quick read.

Do You Know Your Users?

Indiana Census Taking from Life Magazine - 1940 Stop. Don’t answer immediately, take a couple of seconds to think about what that question entails and the smaller questions that come with it:

  • Who are your users?
  • How would they describe themselves?
  • Why do they visit your site?
  • What are the different types of users that you are building your site for?
  • Which are more important to you?
  • Which are more or less likely to visit, stay and use the tools you build?
  • Which don’t stay as long as you would like?

So, do you know your users? If not, here are a few methods to learn more. Some are fast, cheap and easy, others require a bit more work, but provide far more information.

Short Polls

You’d be amazed at what you could learn by a single poll question, especially over time.

Implementation Strategy

Create a series of questions to gain information you don’t already have about your users. This may vary widely, but here are some ideas:

  • Are you male or female?
  • How old are you?
  • What is your favorite part of the site?
  • What part of the site is your least favorite?
  • Is this your first time to the site?
  • How often do you visit the site?

The key is to only show one question at a time. Ideally the poll is placed prominently and consistently on the site. Placing the poll in the same spot in the sidebar and rotating the question every couple of weeks will pay rich rewards over time. Most users are much more likely to answer one short question every so often than they are to answer a full survey, which takes a larger investment of time up front.

Feedback Surveys

This longer form is useful for getting information quickly, but you may not reach everyone you’d like to. It does have the very real benefit of branching questions. If the user says they are a regular visitor, you can dig in a little deeper to determine why they come back.

Analytics

Standard analytics that report on your site’s traffic is important when you need to find the popular areas of the site. We’re going to skip that for now as I expect you already have most of that defined or can get your hands on it easily enough.

The more interesting data comes from user-specific analytics that will help you answer questions such as the average age of your visitors, whether they are male or female and how interested they are in participating in the community. Working with this data will allow you to decide which groups of users visit one area of the site more often or take part in you discussions more regularly.

User Interviews

If you’re able to talk to your users directly, you can gain a wealth of information. This can be a complex undertaking requiring a lot of effort, so I recommend working with your passive data before you decide to invest the time and money interviewing your customers and prospects. Additionally, you won’t capture data from those casual visitors who stumble upon your site through a search result, so the data is incomplete when thinking about the largest area for growth.

Tie it Together

The best of all possible worlds would be to tie your direct questions (polls and surveys) with the information gathered from your analytics. If you can determine which questions to show a user based on how often they visit, you’ll have better data. If you can present questions based on how many friends the user has connected with on your site, you have a whole new axis of data to learn from.

Now That You Have Data

With the information you gathered you can prioritize where you spend your time and effort. Revisit the questions at the beginning of this piece to see how your answers differ and think about how you can use this knowledge to craft your site so it delights your users and achieves your business goals.

What Have I Missed?

This is by no means a comprehensive list of methods and ideas, and I bet that some of you have other (better?) ideas and experience to share. I’d love to hear what you think in the comments!

Image courtesy of Life Photo Archive

Replacing the Save Icon

Floppy Disk IconThe Save icon – that little ol’ floppy disk that exists in nearly every application sitting on your computer and on the Web. A representation of a piece of technology so utterly out of date that it’s meaning has shifted away from its physical existence into a concept of safety and permanence.

As a means of storage it was convenient by the standards of the day, but not necessarily that reliable and yet we’ve held onto it as a symbol, in large part because everyone who uses a computer recognizes it. So I recognize the fact that we’re unlikely to actually change it any time soon, I thought it would be fun to explore alternatives, so I asked the members of Refresh Austin, those who follow me on Twitter and my friends on Facebook for their ideas on a replacement. Those conversations generated some great ideas, which I present to you.

The Question

I asked “If it were up to you to change the old floppy disk as the “save” icon across all Web and desktop apps, what would you choose?”

The Answers

Physical Representations

Hard Drive icon Several responses recommended a hard drive, replacing one form of physical media with another, more accurate version. Though as William Yarbrough noted, it may not work as well for apps in the cloud.

safe-icon.png Keith Aric Hall was the first of many to recommend a vaults or safe. I like this idea as it reinforces the concept of “save”. As Frank Robinson noted, those also imply encryption or file-locking, so he suggested a two-drawer filing cabinet.

Terry Brown brought up the idea that since the Open icon is often an arrow pointing out of a folder, then having an arrow point into the folder would make sense for Save.

entry_saved.png Michelle McGonagle recommended a document with a checkmark and then took a larger step outside of the normal bounds by suggesting a treasure chest or empty jar, both of which are technology-agnostic. Keith noted that many CMSes use the document with a check icon to denote “Approve for Publishing”, which could be problematic.

Mental Concepts

box_address.png Clouds and Boxes proved popular, often accompanied by an arrow.

Diana Dupuis suggested a red “S” in a thin black circle.

The response from Steven Harms is too good to not quote outright:

The notion that is important is the locking of bits into a static form: stored in a cloud, stored on a disk, stored on a CD. The trouble is that those icons would be “lock” or “frosty-ness.” The former is visually synonymous with “security” and the latter with Wendy’s, so neither has quite the right visual glyph-set.

Other Notes

Annette Priest brought up some great points, including the fact that we’re on the verge of needing to replace phone icons as well. She also noted that perhaps we should look at a shift towards gestures for the action instead of an icon. Follow a certain pattern with your mouse or device and your work is saved.

Ryan Joy brought up the point that sometimes “save means ‘save draft’ or state and other times it’s intended as ‘publish’”. So, a bigger question may arise as to how and if we differentiate those concepts via icons.

What Do You Think?

A definitive answer was never the point, rather the conversation is the key, and it has been great so far. I’d love for you to jump in with your ideas to keep this going!.

Credits

All icons except for the safe, which is from VisualPharm are available as a part of the Flavour Extended Icon set by Oliver Twardowski.

Type on the Web – An Evolutionary Shift

For designers and anyone interested in typography on the Web, I highly recommend you check out Web Font Specimen and the A List Apart article “Real Web Type in Real Web Context” that explains it. As we near a point where real typographic controls and options are available to us, its pivotal time for professionals to step up and gain (or remember) skills that haven’t been of use on the Web. The gap between good and great designs and designers will grow and the differences will be much more apparent at a glance and in the details.

If you haven’t had a chance to play with Typekit or learn about the various font embedding options (see The Potential of Web Typography: and Bulletproof @font-face Syntax) recently layered into browsers, now’s a good time to fatten up a few brain cells.

Drop the Lorem Ipsum – Have fun with Placeholder Text

“Lorem ipsum dolor…”

If you’re a design, build wireframes or prototypes, odds are good that you are all too familiar with the de facto standard for placeholder text. It works, especially if you want to ensure that people don’t focus their attention on the text itself. But it quickly gets old.

Sometimes you just need to shake things up and add some personality to your work, and there are some great resources for interesting text that serves the same purpose – it fills up the space, but isn’t the least bit related to the purpose of the page itself.

Here are a couple of my favorite resources for alternatives to Lorem ipsum:

The Proceedings of the Old Bailey, 1674-1913

As noted in the site’s description, this is a searchable collection “detailing the lives of non-elite people…containing 197,745 criminal trials held at London’s central criminal court.” Here’s one of my favorites, from the case of John Harris, tried for Seditious Words on September 8th, 1714:

John Harris , was indicted for speaking scandalous Words relating to her late Majesty, viz. God d – n the Queen, she may kiss my A – se . The Evidence was a Constable, who swore, That the Prisoner came raving and swearing along the Street late at Night; and among others, us’d the Words in the Indictment; whereupon he thought it his Duty to secure him. It appear’d upon his Trial, that he was somewhat Lunatick, and had been under Cure for the same; whereupon he was acquitted.

And another case from May 10th, 1676:

Three women of Stepney were indicted (one as principal the other two as accessaries) for stealing Hemp enough to make Halters for all the Rogues in Christendome, that is to say, no less than four thousand weight in one Indictment, and three thousand in another. It being suggested that they had got a Key to a Rope-makers Warehouse, whence at several times they purloyned those vast quantities. But no direct proof appearing, they were all acquitted

Movie Descriptions and Commentary

The worse the description the better. A bit of time on IMDB or Amazon can net you some jewels (typos, poor grammar and all), such as these:

C.H.U.D. 2 – Bud the Chud

From IMDB comes this plot summary:

A couple of teenagers break into a secret government science lab and steal a frozen corpse for a high school prank and accidently awaken the corpes which turns out to be a CHUD, ironically named Bud, who goes on a killing spree and making his victims also canabalistic CHUD’s and its up to the teens to stop him.

The Brain from Planet Arous

Another one from IMDB:

A powerful criminal brain from the planet Arous, Gor, assumes the body of scientist Steve March. Thru March he begins to control the world by threatening destruction to any country challenging his domination. Another brain, Val, works with Marchs future wife Sally to defeat Gor. Val explains that Gor will be vulnerable when he is forced to leave March at intervals to re-energize. Gors vulnerable spot, the Fissure of Orlando, is described in a note left by Sally in Steve’s lab.

A Scathing Review of “Shadow of God”

And should you need a longer passage, check out this review posted to Amazon. Here’s an excerpt:

And the dialogue. Oh dear, the dialogue.

“That’s probably the fiercest dragon known to man,” Craig tells Todd toward the end. Because, you know, we have so many different kinds of dragons in the world with which to compare.

Okay, so he uses the wrong word and his characters are morons. You can overlook a misused word here and LOTS of writers are horrible with characters. Hell, I’m guilty of this myself. But sometimes he just
plain gets his facts WRONG:

“The stranger was beastly in size with thick, bushy eyebrows, a prominent protruding forehead, and a thick, black coarse beard. His gait was that of a mammal–a Neanderthal.”

I know I never went to college, but um . . . do you think Rayburn knows HUMAN BEINGS are mammals as well?

And later we learn that Cain and Abel were Neanderthals who lived in the stone age, feared dinosaurs, and that Cain was kicked out of the Garden of Eden for slaying his brother. Dude, Cain and Abel weren’t born until a LONG time after Adam and Eve–the only two people who ever lived in the Garden of Eden–were kicked out.

Other Sources

Do you have any interesting sources for good placeholder text? Please leave a comment below.

In Search of Useful Prototypes

Dangerbird Prototype Screenshot from http://clients.athleticsnyc.com/dangerbird/prototype4/

Dangerbird Prototype Screenshot

Normally a post describing a site launch doesn’t grab my attention, as they cover the same ground (base level descriptions of the design process, technologies used, how great the client is etc.). But the write-up the launch of Dangerbird Records by Athletics, a design firm out of Brooklyn includes a discussion of their home-grown prototyping methods, which is not something you see every day.

I’m constantly refining the process I follow to create wire frames and prototypes. I’m close to a good solution, but it is continually out of reach. Much like the team at Athletics, I’ve investigated Axure RP and similar products, finding them to be much too large for my needs. They’re great for complex, enterprise apps, but they aren’t built for Web apps and sites (they are trying to shift, but I think that will merely lead to larger, more complex apps). I have tinkered with straight up comps and even light weight Web sites, but neither quite meets the need. For the moment I have settled on building wire frames in Visio, followed up by conversations that arise to discuss small details and interactions. No matter how many notes and call outs I add to a wire frame, questions arise.

Wireframes are not ideal for describing the richness and possibilities that are inherent in a Web application.

Prototypes on the other hand are great for conveying placement and interactions without implying design, but they can be time consuming initially as components need to be built and actions and results must be wired together. The Athletics team appear to have found a good method – using Flash plus a little bit of ActionScript to produce fully interactive and informative prototypes. It still requires some of that up-front work, but it is balanced by the ability to quickly revise the prototypes, and more importantly reduces misunderstandings and questions.

If I can carve out some time I will explore this method to see if it’s feasible for my work, but at a minimum it has placed Flash into the toolbox as a possibility for future prototyping projects.

This Ain't Right: Fight the Orphan Works Act

Jeffrey Zeldman pointed out the dangerous Orphan Works Acts making their way through Congress. This act has far-reaching implications for everyone, but the impact is even larger for those who work or publish on the ‘Net. Ultimately Congress is attempting to reduce your rights as a creator (whether you write, draw, design Web sites or sing), by allowing the infringer to make the distinction as to whether or not they tried hard enough to find the owner of the work and reducing the rights of the artist, designer or author.

As noted by Mr. Zeldman, so called “orphaned” content “will be made legally available for use by commercial interests, even when the copyright holder is alive, in business, and licensing the work.”

That strikes the very heart of our society. You work hard to create something, you have every right to maintain ownership and be compensated for that work. If someone steals from you, you have recourse.

It’s Easy to Fight this Law

Luckily there is an easy way to contact our representatives in Congress to educate them on the dangers of this law and to inform them that we expect each and every one to oppose the bad legislation: Go to the Legislative Action Center tell them where you live (so they can match you with your representatives) and choose a letter that you want to send – click and go.

Here’s a snippet of the letter I sent to Senators John Cornyn and Kay Bailey Hutchison and Representative Lloyd Doggett:

I am told that the Copyright Office conducted a study of Orphan Works and that these bills are based on that study. I understand that an orphan work is a work whose owner can’t be located. I am alive, working and managing my copyrights. I can be located. My clients locate me all the time. But that does not mean that anyone anywhere can find me. And frankly, why should the failure of any one person to find me be the measure of whether or not I can be found?

What if 10 people can find me but one can’t? Why should that one person get a free pass to use my work? Won’t that give infringers an incentive not to find me? And why should I be obligated to go into court to prove anything about the diligence of the searcher or the value of my work? What if the same work is found an orphan in one legal proceeding and not in another?

Join the list of groups opposing this bill, spend three minutes to protect the basic rights of those who create what you enjoy.

Searching for Findability

Everyone seemed to have their place in the project life-cycle at the web design agency; everyone but little Findability. Occasionally someone would notice his value to a project, but instead of giving him the care he deserved, they’d just fork over copious amounts of cash to ship him off to his sketchy uncle SEO, who tied him up and fed him keywords all day long. He spent so much time at uncle SEO’s that everyone started to think Findability was SEO, and subsequently became a little dubious of his importance.

Aarron Walter

Aaron’s article, Findability, Orphan of the Web Design Industry is a great reminder that we should not overlook the importance of findability, nor confuse it with SEO and usability as we create our designs and interfaces.

Spec Work, Pixish, Design Contests and Unicorns

Adam Howell sums up my thoughts on Pixish quite succinctly. Sure, the concept sounds great at first, as noted on the Pixish site, the community is set up as “a way to engage creative people online to submit, judge, and source amazing images.” Nice until you dig into it, just a little bit, and realize that a set of designers are all working on the same project, only one of whom will get paid. Even worse, “paid” may be a prize that is worth far less than they should have been paid.

Choices

Now, there’s a part of me that believes that it’s up to individual designers to decide to participate in something for which they may not be paid. But, in this case, as has been noted many times over, spec work weakens the profession, promoting the inexpensive option over a quality piece. Clients will view the talent pool as relatively equal, opting for a crap shoot instead of finding the right match for their needs. We do have an obligation to keep our industry strong.

For Those Starting Out

Some believe that this is a great opportunity for budding designers to build a portfolio, but as Adam notes, “We’ve got, you know, the web. Blogs. Youtube. digg/reddit/lots of other lowercase social sites. There are no longer just three ways to showcase your talent — there are three bajillion. And if you aren’t getting noticed, sorry, you either aren’t trying hard enough or you suck.”

Harsh? Yes.

True? You bet’cha.

So, do design contests have any real value? I think so. Competitions oriented towards students and amateurs to help them fill out a portfolio are great, as are contests that may benefit a non-profit, as long as the results of the contests isn’t used as a business deliverable, much less as a part of branding. That a disservice to the client who deserves nothing but the best representation of their brand and services; and it’s a disservice to the designer who should be properly compensated for their efforts.

Value

In this same vein of respect for the designer and the clients, I had a conversation recently with someone who had worked in marketing at a large tech company and was not willing to pay a designer the going rate (actually the lower end of the spectrum) for a Web project. This potential client told me that were he to interview someone who designed a site like Apple.com, he would automatically consider them out of his league. So, even though he respected and acknowledged their skills, he wouldn’t try to find a way to harness those skills, that designer would be set aside because they were too good. Anyone who wasn’t at that tier were then lumped together, as they couldn’t impress him, which means that they were charging too much.

He’s chasing a unicorn: quality and experience on the cheap.

Oh, and this is for a project that he is passionate about, and will represent him to the world. He seemed like a perfectly nice guy, but what does this say about the image he will project?

What does it say about the designers and clients using Pixish?

Quick Note

Derek Powazek has given a lot to the Web community, and I have benefited from his work in the past, so while I have a lot of respect for him, that respect doesn’t change the fact that I disagree with the concept of Pixish.

Be a Story Teller

These little behind-the-scenes battles are what turn average websites into masterpieces. When everyone else is content to say “The End,” keep bringing it all into focus. Be a storyteller. Let your point of view shine through, and everything you create will have a depth that is sorely missing on the web.

Ryan Sims – Cinematic Web Design

Perfect timing as I begin to plan a redesign of this site.

Slanty Design in the Real World and on the Web

Architectures of Control, which provides some very interesting analysis of products that are “designed with features that intentionally restrict the way the user can behave” in order to encourage the user to follow certain practices and behaviors, has posted Slanty design, which is a great introduction to the concept and bridges design in the physical world and design for the Web. It’s a quick, well illustrated article that I encourage everyone, not just designers to read.

For non-designers, it may shed some light as to why some of yoru favorite products and services act as they do.

Satisfying UI Design is Often Illogical

Scott Stevenson provides a very interesting essay, Satisfying UI Design is Often Illogical, discussing the impact and need for UI changes and the expectations of and reactions by the market to those changes. The entire piece is well worth a read by anyone interested in design and user experience, with many valuable insights. One of my favorites though is encapsulated in a single line: “The real goal is user satisfaction, and some of that is really illogical and messy.”