I occasionally enjoy Yaro’s blog and email newsletter for their clear demonstrations of direct marketing tactics. Most recently, Yaro pitched his forthcoming “Elite Entrepreneur Coaching Program” on this page. When it works, he’ll collect $25,000 by simply having conversations with 5 people, on his own terms.

Check it out – it’s a great demonstration of a long sales letter. After reading through it a couple of times myself, I noticed a framework emerge. This is essentially the same pitch that convinces people to part with their hard-earned cash in all kinds of scenarios:

• It begins by assuming that the reader is interested in a purchase (too many sales efforts waste time trying to lure disinterested buyers).
• The bulk of the content makes an emotional right-brained appeal while overloading the left brain with numbers and case studies.

The net effect is similar to the psych study that asked people to memorize a sequence of random numbers and then offered them a healthy snack or a slice of rich chocolate cakes. Participants whose brains were overloaded by longer number sequences (a left-brained activity) unconsciously tended to shift the decision to the relatively unburdened right brain and more often chose the delicious-but-unhealthy cake.

Step 1: set the stage for an emotional decision

1. Background = aspirational intro (“I’m rich and so can you!”).
2. Aspirational value proposition. Too many sales efforts waste time describing the product or service instead of the value it creates for the buyer. “Sell the dream, not the dirt,” declares Donald Trump as he explains his successful real estate ventures.
3. Aspirational “qualifier” questions. Begins to set a tone of exclusivity, a seller’s market.
4. Details: product description and list of problems solved. (Overwhelming the left brain with lists leads to right-brain, emotional decision-making.) Lists are key here.

Step 2: appeal to the emotional brain with a scarce luxury good

1. Velvet rope of work (“You have to really want it.”) Raises perceived value, sets luxury status.
2. “Trust me” background info.
3. Velvet rope of price (“Yes, it’s expensive.”) Reinforces luxury status.
4. No refunds. What?! Yes. It’s so good he doesn’t have to offer refunds. Reinforces luxury status, creates seller’s market mindset.
5. Charity. Reinforces aspirational tone. I’m not convinced of the value on this one, but it’s a popular sales angle.
6. “You’ll ‘know’ if this is right for you.” Or, “don’t figure it out, go with your gut!” Driving the shopper to make an emotional decision.

Step 3: Decision time

1. “Application” reinforces notion of luxury good and seller’s market – you’ll be lucky to get this!
2. Finally, pricing. At this point it’s an emotional decision. Don’t lead with the price, it allows the user to make a decision without enough cognitive load.

Below are some rules for better web and interface writing, courtesy of Jakob Nielsen and my own interactive product design experience. These are my strong opinions, weakly held – please post comments, corrections, and disagreements at the end of this article.

Here’s Jakob’s why we break the rules for better results. In summary, people scan web pages and apps instead of reading them word by word.

Create scannable text by using:

1. the inverted pyramid style, starting with the conclusion, then supporting information, then background / framework.
2. half the word count (or less) than conventional writing. Users read 20% of the words (28% at most). Total % read drops as word count increases.
3. highlighted keywords (links and bold).
4. meaningful sub-headings (not “clever” ones).
5. bulleted lists.
6. 1 idea per paragraph, in the first few words.

Here are some more “writing for the web” tips from Jakob:

1. Users scan instead of reading (though new ereaders, e.g. the iPad seem to buck this trend).
2. Best online content is linear, reader-driven, actionable content composed of specific, comprehensive data. Fragments trump sentences.
3. Write numbers as integers (1) instead of text (one). It’s better to use “23″ than “twenty-three” to catch users’ eyes when they scan Web pages for facts, according to eyetracking data.
4. Your headline text gets 40-60 characters of attention. It must stand on its own and make sense when the rest of the content is not available.

More rules for writing for the web

These are my own basic style rules, based on ad hoc experience (and therefore shakier than Jakob’s).

Design interfaces for hormonal, ADD-addled adolescents. “What would the NY Post do?” Think tabloids, not novels.

1. 1 action per page.
2. 1 idea per paragraph. This typically means 1 sentence per paragraph, sometimes 2. A 4-sentence paragraph is almost always too long.
3. Numbers, not words.
4. Lists, whether numbered or bulleted, are your friend.
5. People look at photos first, especially photos of people.
6. It’s better to display nothing than default images or filler text.
7. Semicolons are almost never okay.
8. Short lines of text are easier to read. Lines of text generally shouldn’t be longer than 34 ems long. (An “em” is generally equal to the height of the typeface – it’s a measurement based on the width of the letter M at the text’s current size.)

You’re always better minimizing visual emphasis. Focus on using fewer words, so they aren’t all competing for the reader’s attention.

1. You can center 1 piece of information per page. Centering breaks a design grid and thereby becomes the most important thing on the page.
2. Stick with bold for emphasis.
3. Don’t present text in all caps unless you know the reader will stop – it destroys the letterforms. Sentence case is best. Possible exception – small words in buttons.
4. Italics are almost never a good idea. Italic sans-serif is a typographic foul and italics generally distort letterforms too much for pixelated screens. Stick with bold. If you need a backup, try changing your emphasis style to display a highlight color on the text rather than italicizing it.
5. Use bold sparingly. Words, not sentences.
6. Don’t use bold, italics, and/or caps together on the same word.

Links are often the victim of “form before function” design thinking. Keep links visible!

1. Use a very different color from the text.
2. Include verbs in links.
3. Include the destination page title in the link.
4. If you hide everything else on the page, the reader should still know what the link will point to by reading the link text.

Grammar for teh internets:

1. Log in is a verb. Login is a noun. Same with sign in, back up, etc. You almost always use the verb form.
2. A lot is always 2 words except when it’s a verb, which is probably not what you mean. Remember it this way: “a pound, a bunch, a lot.”
3. “It’s” is the contraction, “its” is the possessive pronoun. Possessive pronouns never have apostrophes: his, hers, its.
4. When creating possessive nouns, use “‘s” for singular nouns, even if they end with s, e.g. “my dog’s collar is silver” or “Chris’s tutorial is helpful.” The latter is optional in some books, but if you always do it this way (“‘s”) you’ll avoid some crazy coding whenever you have to build an interface that creates a possessive noun from dynamic values like usernames. Put an apostrophe after the s if the noun is plural and ends in s, e.g. “the 7 dogs’ collars were all silver.”
5. 1 space after periods, not 2. Too much spacing creates visual “rivers” of whitespace within large blocks of text.

1. A video of Kathy Sierra at Carsonified 2008 – How to grow and nurture your community
2. Notes from a presentation by Kathy Sierra in 2008 – Storyboarding for nonfiction

Before the purchase – sexy marketing material is aspirational.
After the purchase – help docs are not sexy, all about mastering the tools, not why you want to use them.
(Seems like Apple has mastered the post-purchase sexiness factor.)

misattribution of arousal – the brain can’t distinguish between something that caused a strong feeling and everything else around it, e.g. remembering music that played when something important happened in our lives.

Therefore, if you help someone have a great experience, YOU are linked to that great experience.

The more you learn about something, the richer your experience is with that thing.

You win when you create better users, not a better company / product / brand.

Word of obvious, not word of mouth. Don’t make users explain what they’re doing – make it obvious that they’re benefitting from your service / product. Make it obvious to others, and make it obvious to themselves. Get the user to upsell themselves.

Motivate users past the “suck zone” – get them to keep using the product even when it’s not pleasant / meaningful / awesome yet.
Kathy Sierra has discussed this before – find examples.

The superset game – make people better at the bigger, cooler thing that your product / service is a subset of. E.g. photography and self expression instead of just using your camera.

Make your user a superhero of your product / service. What would live on their shirt? E.g. Pivot Table Man.

Talk to the brain, not the mind.
Remember, it’s brain behavior (unintentional), not mind (intentions, goals). Lizard brain, not frontal lobes.
This is important because learning requires that we get past the (lizard) brain’s preference to only focus on fight / flight issues. Life-threatening issues.

“I will learn what I feel.”

What do people pay attention to?
– Emotions – fear, sexiness, etc.
– Cute things – babies, animals, etc.
– Faces.
– Narratives.
– Things that are unresolved.
– Anything out of the ordinary.
– Combo – cute things in trouble!

Brains prefer to conversation not formal.

1. Focus on what the user does, not what you do.
Don’t build a better X, build a better user of X. Alternative from Joel Spolsky: Help $typeOfUser be awesome at $action. If you focus on product you do too many features and disenfranchise users.
Not “what problem do we solve” but “what bigger cooler thing is enabled”.

2. Give users superpowers *quickly*.
Give them an 80 / 20 document – 10 important things as a newbie.

3. Offer better gear and help them justify it to others.

4. Motivate / inspire. Motivation is for things people want do do but don’t, e.g. using your product. What is the “stuck zone” that users are chilling in? This is the real reason they don’t upgrade – because they’re competent at the basic mode.
Make the right thing easy and the wrong thing difficult.
Peter Bregman – harvardbusiness.org.
Motivation comes from belonging to a group. What does it say about your user to be one of your users.

5. Make them smarter.
Exercise makes you smarter – oxygen to the brain.

6. Shrink the 10K hours (from Outliers)
– Show them the patterns.
– Shrink the hours.
– Help them practice while doing other things.
Bruce Wilcox – wrote an AI that could play go. As a result he became awesome at go.
– Make practicing the right thing sexy, fun – contests, games, etc.
– Include cognitive pleasures – thrill, discovery, etc. – look at game design.

7. Make your product / service reflect what the user really feels, e.g. lost / confused.
– Help & FAQ are not enough, b/c written for people who are in a good place.

8. Create a culture of user’s journey. The hero’s journey.
– Be the hero.
– Get people to ask and answer questions. No dumb questions AND no dumb answers. Recently-former-newbies are best for answering newbie questions.

9. Don’t insist on “inclusivity”. Passionate users talk different. Let top users be ass kickers and different. Don’t make them dumb it down.

Evolution of awesome: products -> referrals -> testimonials / benefits.
– “Look at this awesome thing I’m doing” -> “I’m awesome”

…and that’s it. Want more Kathy Sierra? Good luck – she’s disappeared again in what is a real tragedy, but I can’t blame her after everything she’s been through in the past few years. Fortunately, she’s kept the archive of her original blog, Creating Passionate Users, alive so you can find more great writing there.

From his slideshare: the IDEO human-centered design toolkit. They offer 2 free downloads as part of the HCD:

1. HCD Toolkit (PDF)
2. HCD Field Guide (PDF)

From Dave McClure: startup metrics for pirates. A very in-depth slideshow on metrics that you can match to business success.

Matt Singley’s super fast, simple implementation of the easy power of the new Facebook APIs. I need to slap some of this Facebook stuff on Dub n Reggae – it’s summer so people are using the site! I’m considering using this Facebook Connect plugin for WordPress.

I’m also considering bumping CycloneRanger up to WP 3 so I can play with all the new toys. Also looking at Elastic Themes for design. I know it’s completely non-semantic, but most CSS layout frameworks use this methodology these days. Pragmatism 1, artistry 0.

I just got an iPad and am thinking about these “overlooked lessons about the iPad.” They’re not entirely accurate – the iPad responses aren’t snappy, there’s a significant border of nonfunctional screen space, and Win tried using the famous “Cat in the Hat” book app but couldn’t stop turning the pages backwards. Seriously, who designs an app for little kids and chooses provide “page forward” and “page back” functionality and then distinguish them only by the direction of a gesture? Sounds like a case of grown-ups designing to impress Oprah instead of designing for the end user (kids).

Also, while the point that the iPad represents a new generation of “lean back” devices (yay for media producers), the Good Experience blog overlooks the real strategic objective isn’t touch interfaces, it’s thin clients that are locked into closed cloud-based platforms. Touch screens will be commodity hardware in 2-3 years, if not sooner.

SNASK from Mike Crozier.

Croz is also an illustrator and graphic designer whose work is reminiscent of Barry McGee and the rest of that mid-2000′s illustration revolution that’s still in effect in design circles – lots of hand-drawn patterns and wrinkly, burly cartoon men. I’m a fan of his pizza box work, like this one:

See the rest of this series at http://cargocollective.com/croz#87965/Cut-It-Out-Salvage.

Thanks to Andy “The Sauce” Fisher for sending me to Vimeo’s homepage.

1. 5 characteristics of a successful OpenSky seller, part 1
2. 5 characteristics of a successful OpenSky seller, part 2

Thanks to Matt Bijur from KickApps (where I worked before OpenSky, insert shareholder disclaimer here) for talking to me about how to identify successful behavior in online social situations. Matt is a true master at creating roadmaps to building online communities around brands and organizations.

Thanks also to Shan for proofreading the heck out of my shoddy first draft, quietly correcting all of my typos while pretending to listen to the manifold reasons I wasn’t going to make all the larger changes she suggested, and then not calling me on it when I quietly went back and wrote exactly what she suggested.

Enter the Web Product Manager Resources page, my list of useful stuff to read if you’re a prodman.

If you have any recommendations for additions to this list, please let me know. I’d like for it to be comprehensive but not crufty.

Sketches, wireframes, and mockups are an essential part of the product development process and popular standards are beginning to emerge for web/mobile app design. These 4 videos will walk you through the process – they’re follow-up from the “Right Way to Wireframe” seminar at the recent Interation10 conference.

Will Evans, one of the presenters, recently posted 2 great articles on his blog – they more thoroughly describe his process:

• Shades of Gray: Wireframes as a Thinking Device
• Shades of Gray: Thoughts on Sketching

I think it’s important to remember, especially in a resource-strapped startup, that nearly everything described in these videos amounts to procedural overhead – the actual end user (customer) never sees these, so they’re only valuable insofar as they help you create great products. Which can be tricky, because as you’ll see, wireframing is fun to the point of distraction. As soon as you’re building wireframes, documents, or any other procedural component at the cost of building the actual product, your ship is sinking.

As a complement (antidote?) to these videos, I’d strongly recommend 4 chapters from 37Signals’ Getting Real ebook:

• From Idea to Implementation
• Race to Running Software
• Less Mass
• Test in the Wild

And now, the wireframe porn

http://www.youtube.com/watch?v=gLenYBX3Iqk
Good explicit definition of the full process, though the wireframes are a little too pretty for my taste. They’re spending a lot of time spend designing a throwaway mockup, which is poor ROI (this is likely a project with big overhead, so they can afford to fall in love with disposable process artifacts). There’s another, arguably more important cost to pretty wireframes: they have a coherent brand and design that can seem so similar to a finished product that they distract the decision makers from the final design and create unintentional biases (e.g. for minimal, grey and blue designs).

http://www.userglue.com/blog/2010/02/04/the-right-way-to-wireframe-my-video-explanation/
The hand-drawn placards are a nice touch, but this one is a bit vague regarding what’s actually going on. Process porn? There is a nice reference to card sorting and site map design as a prerequisite for individual pages, and the focus on hand-drawn sketches initially is a welcome addition to all the wireframing technophilia. Finally, the repeated start-to-finish flows from sketch to wireframe to page mockup help explain the transformation of a UI through each step.

http://www.nickfinck.com/blog/entry/creating_wireframes/
This video skips over explaining requirements and how they become page concepts, which makes it far less useful than the others. The actual page requirements are pretty lightweight too, so there isn’t a whole lot to learn here. Also falls into the category of too-pretty wireframes. Man, I wish this UX calendar were a real project though!

http://www.youtube.com/watch?v=QSxF-pISj1w
This last one is from the aforementioned and soft-spoken Will Evans. God bless anyone who includes “motherfuck” in a description of the wireframing process. Also nice that he links to the tools used – Omnigraffle and wireframe stencils from Konigi.
Will starts with sketches before moving to the computer, and 1 standout item is the flow arrows that link the initial thumbnails – it’s an excellent alternative to traditional sitemaps and better suited to application-oriented experiences (as opposed to document-oriented). Also unique in the bunch is the inclusion of blue callouts in the wireframes, explaining each feature and grounding this process in a larger dev flow.
Will’s blog post, Shades of Gray: Thoughts on Sketching, does a good job of explaining the role of hand-drawn sketches in this process, which is arguably the most valuable lesson to take from all of the information in these videos.

Thanks to Josh for sending me the initial link.

Know of any other good “how to wireframe” videos? If you share them here I’ll work them into the post.

When asked for his best interview question, Tony offered this:

What would you say is the biggest misperception that people have of you?

Really good one. I usually ask “if I called someone who reported to you at your last gig, how would they describe you?” I used to explicitly require 3 good things and 1 criticism, but once or twice I forgot to set that criteria and quickly learned hear how many people start with something critical when left to their own devices.

Tony’s question is likely to elicit even more information, as he explains:

It’s a combination of how self-aware people are and how honest they are. I think if someone is self-aware, then they can always continue to grow. If they’re not self-aware, I think it’s harder for them to evolve or adapt beyond who they already are.