« Flashforward Boston: Imagination and Technology | Main | Flashforward Boston: The Aesthetics of Computation »

Flashforward Boston: What's this button do?

Rough Draft Notes
robert hoekman, jr.

Need to get user up to speed, help to get through your application.

What's this button do?
I'm feeling lucky?

suffer from a lack of explanation, or lack of context, don't install confidence

Talking about instructive text:
Using senduit as an example. (upload file and get temporary URL for that file)
Need to communicate: purpose, benefit, usage
need to keep it short

using default value in field to prompt user
show default zip code value (5, 9, 5+4)

Squidoo (create pages to market things)
inline help balloons for instructive text

command line (something that triggers action) "call to action" verb-noun pair
people don't like object based actions "page organization"

people have gotten used to dragging, almost expect it on the web. People that have been on the web a long time might not expect drag and drop may not work. Be explicit.

once over drag, cursor changes. when dragging move other modules around to show them the change.

"I'm done editing" sense of closure

Old Version of WordPress.com page doesn't have clear way to sign-up. Links hidden in text. Redesigned to big green button (contrasting color, different background) "sign up now". Jumped up 10-12%. Instructive piece more obvious.

RSS. Most web users still don't know what RSS is. Why would a user click a button that says RSS if I have no idea what this means. "Subscribe to this blog" is a better way to approach it.

Feedburner has a good approach. Creates a stylized version of your feed. "Syndication" and "content" are stuffy words. XML is a scary word.

Addthis.com has a different approach. Easy one click subscription, but doesn't help inform a user if they don't know what RSS is.

commoncraft.com/ Screencasts are a great way to explain a concept or a new idea.

BaseCamp.com: Disposable constructive element. New page has text that goes away when user performs the action.

GoogleReader for a new user has a screencast that talks about what it does with screen shots. Put a personal face on the experience.

Software for making screencasts.
Windows: Jing, TechSmith Camtasia Studio.
Mac: Jing, SnapzProX.

Flickr and most popular tag page. Size reflects popularity. No one gets tag clouds. No real life methaphor. Big doesn't mean more popular.

LibraryThing.com "What are tags" link. Very scary tag cloud page. Information overload.

NYTimes.com has explanation of tag cloud above cloud. Still a horrible interface...

miskeeto.com (new design firm)
updownrepeat.com (The art and science of web forms)

Q: How to capture the content scrolled off the web.
Snagit (handle captures all scrolling of the web page)

Tags: design flashforward2007boston flex