Basecamp: Next Shows Off Rapid UI Prototyping Process

37Signals have long been proponents of doing design prototyping in HTML, and this video is a great example of how that is more effective than a traditional photoshop method. Their lead designer, Ryan Singer, has shown this technique off nicely at various conferences and also captured it in two videos for Peepcode: UX Sketching and UX/UI Prototype

This isn’t an easy process to implement, and working in HTML/CSS as your initial mockup takes a bit of mental gymnastics and abstraction to get it right, but it can be a powerful tool if done correctly.

2011 In Review; 2012: The Year of Shipping It

2011: The year is almost over and looking back, it’s been a pretty good awesome year. I married a wonderful woman in August, moved to LivingSocial in March (via the Infoether acquisition), and moved from The Farm at Oatlands Mill to Alexandria. A lot of work went into The Rails View book for Pragmatic Programmers and I finished a few freelance client sites for EFM, Market Street Advisors, and Guggenheim Securities.

But 2012? I’ve resolved that 2012 will be the year of shipping stuff. There’s far too much stuff sitting around on my hard drive that’s in a partially finished state and it needs to be delivered or abandoned entirely. And to that end:

The 2012 SHIP IT List

  • Relaunch Boboroshi.com
  • Relaunch Meticulous.com, including new MeticulousTalent.com
  • Ship “The Rails View” book including TheRailsView.com site
  • Redesign WeLoveDC responsively
  • Setup a new ongoing site for JohnandWhitney.com
  • Finish the Eden Soundtrack
  • Finish the Rotoscope record
  • Ship the Juniper Lane “Standing on the White Line” record (with remixes)
  • Finish at least a Boboroshi & Kynz EP
  • Ship FlickrFndr, a Flickr/Creative Commons utility
  • Ship the first version of an iOS gardening app

And a few other projects I’ve got on a list on my wall. In addition, I’ve got a lot of training to do on various topics. This may seem agressive and optimistic, but if you shoot for the moon, you at least get into orbit.

RubyConf 5k Site Live

!{border:1px solid black;}http://boboroshi.com/assets/2009/10/22/rubyconf5k.jpg (RubyConf 5k)!

Chad Fowler asked me to put together a quick site for the RubyConf 5k that will occur during Ruby Conf in San Francisco in November. If you’re there, please think about running, as it benefits Leukaemia and Lymphoma research. Need to get up to 5k from walking up the stairs making you winded? Look at Chad’s link that he sent me: Couch to 5k

MacRuby Site Live

The new MacRuby website is alive and kicking with a new look and feel (courtesy of me) and a nice Webby-based backend (courtesy of Rich Kilmer).

Webby is a Ruby framework that allows the user to work with model files to build a static site. We have a lot of helper methods and ERB that ends up dumped out as HTML when we run the deploy command. It’s similar to WordPress in that way, and it is a phenomenal tool for building static sites that feel dynamic. While it does support things such as HAML and SASS, we relied on good old Textile to get the job done.

The site is run without a database. It uses structs and helper methods to generate everything. For example, if Rich wanted to add someone to the “Project Team” list, he would simply update the Ruby array of people objects and the helpers loop through and make it all nice and styled. There was more info presented on this page initially, being the name, URL, focus and company affiliation, but it was simplified down for some of the presenters. The Special Thanks are handled in the same way.

We’ve been very happy to see some of the recent press about MacRuby as well. If you haven’t seen it, please check out:

Upcoming MacRuby Implementation to be Substantially Faster (at ArsTechnica)

Creating a Harvard Rule with CSS

Having grown up with pica sheets and crop slides with wax pencils, I come from a world of print design effectively dead with the advent of QuarkXPress, Pagemaker and InDesign. I still remember learning the rule types in high school yearbook design sessions and in some cases, I’ve recently implemented what’s known as a Harvard Rule line in a design.

What is a Harvard Rule? The old yearbook publisher I worked with defines it nicely:

A standard rule line is any printed line that is less than two picas wide. These rule lines can also add variety to your page. Common rule line weights are one, two, three, six, nine and twelve points. Rule lines are intended to unite design elements, not separate them. A Harvard rule line is two parallel lines, with one line wider than the other. Standard widths are one, three, six, nine and 12 points. When used as a border, the thin line is usually inside.

First off let’s get these terms right. A pica is 12 points. There are 72 points in a printed inch. (Sorry Windows users, someone back in the day thought 96px to an inch was better than 72. Apple is 72px/inch.) There are, therefore, 6 picas in an inch.

I didn’t want to use an image to do this, and wanted to accomplish it with html and css. Luckily, there’s an HTML element called “HR” that is a horizontal rule. These, in their basic implementation, are plain and simple ugly:


but some CSS can make it pretty:


That’s not nice to use. So with some HTML and CSS hackery, we can get something that looks a lot nicer. In your HTML, you first want to call the rule:

<pre> <hr size="0" noshade /> </pre>

Since it’s XHTML we’re using here, this is a self-closing element. The CSS for this isn’t too complex. We need to define the base colors to hide the original element. We then need to apply borders to finish the magic. You can alter the margins to space it out from other elements.

<pre> hr { /* Faking a Harvard Rule */ color: #fff; background-color: #fff; height: 2px; /* this is teh white space between the lines */ border: 0; /* this removes left and right borders */ border-top: 4px solid #aaa; border-bottom: 1px solid #aaa; } </pre>

With that in place, we can give these unique styles and flip the lines as needed.



You can also accomplish a double rule this way:


These are all being used in the forthcoming MacRuby redesign.

Enjoy!

The Debacle Over Facebook's Terms of Use

About week ago Facebook changed its Terms of Use. Their Corporate Counsel, Suzie White, announced this on the company blog and explained what they had done and why in their minds the changes were necessary. This massive sweep up was to consolidate various documents into one central document and to “simplif[y] and clarif[y]” the terms and information contained therein.

They didn’t have to provide notice, but they did, and for that, I applaud them. You don’t have to agree to the terms, and they are non-negotiable. Use implies acceptance, and says so in the first paragraph of the Terms. If you don’t like that, you can go elsewhere.

We reserve the right, at our sole discretion, to change or delete portions of these Terms [of Use] at any time without further notice. Your continued use of the Facebook Service after any such changes constitutes your acceptance of the new Terms.

The new Terms document has some serious issues with the way it handles content that users upload. “Content is king,” as the old dot-com era adage states, and without content, Facebook wouldn’t really be all that. Why do we return to Facebook? Why do people spend inordinate amounts of time locked into the site?

Content.

We return to read about what our friends and family are doing. We check out their pictures from vacation. We comment back and forth over the most inane status messages. We used to engaged in Scrabulous tourneys, but of course, that was a copyright infringement. I’m sure something has replaced that in the past months.

So content brings eyeballs, and Facebook sells advertising to those eyeballs. That is how and where Facebook’s income stream resides. Advertising. Without content, that advertising stream would dry up. We post content and Facebook places advertising around it. We find that to be okay because the service is free and actually works pretty great. That seems to be a fair trade. I’ll look at the ads on occasion and might even click on one.

The Rub

So what happens with the content you post? Facebook, according to their new Terms, for all intents and purposes, owns it.

You hereby grant Facebook an irrevocable, perpetual, non-exclusive, transferable, fully paid, worldwide license (with the right to sublicense) to (a) use, copy, publish, stream, store, retain, publicly perform or display, transmit, scan, reformat, modify, edit, frame, translate, excerpt, adapt, create derivative works and distribute (through multiple tiers), any User Content you (i) Post on or in connection with the Facebook Service or the promotion thereof subject only to your privacy settings or (ii) enable a user to Post, including by offering a Share Link on your website and (b) to use your name, likeness and image for any purpose, including commercial or advertising, each of (a) and (b) on or in connection with the Facebook Service or the promotion thereof. You represent and warrant that you have all rights and permissions to grant the foregoing licenses.

This is the problem with contracts. Legalese and contracts are written in order to protect the interests of the individual (be it a person or a corporation, which is seen as an individual under the law) from legal issues. Contracts are supposed to stop people from going to court. Usually, these contracts are negotiated between two parties. When one term dictates the terms and you must accept (e.g. a software license, terms of use, etc.) you have what is, in effect, a contract of adhesion.

adhesion contract n.(contract of adhesion) a contract (often a signed form) so imbalanced in favor of one party over the other that there is a strong implication it was not freely bargained. Example: a rich landlord dealing with a poor tenant who has no choice and must accept all terms of a lease, no matter how restrictive or burdensome, since the tenant cannot afford to move. An adhesion contract can give the little guy the opportunity to claim in court that the contract with the big shot is invalid. This doctrine should be used and applied more often, but the same big guy-little guy inequity may apply in the ability to afford a trial or find and pay a resourceful lawyer.

The Consumerist and the Cnet have both taken the company to task [ 1 | 2 ] over this and it got the CEO to come out in an attempt to put out the fires. Mark Zuckerberg posted on the corporate blog saying that Facebook would never do anything of the sort and they just wanted to make sure they could deliver things appropriately to other users. The problem is that what Mark says here is not legally binding. The parol evidence rule clearly states that no matter what a party to a contract states verbally, the written contract is the determining factor. The Terms of Use, constituting the contract between you, the user, and Facebook, are the only things that matters. Let’s look at some examples:

The Musician

Effectively, as a musician, if I post an mp3 on Facebook of Juniper Lane’s new song “Don’t You Give Up”, and it becomes a big hit, Facebook can make money off that and I can’t say squat about it. Although, if it were a big hit, I’m sure my record label would take Mr. Zuckerberg, et al to the bar in short order and have more paperwork filed in the first 24 hours than most people see in their lifetime.

The Photographer

Let’s use a more common example. You’re a decent photographer. You take a picture. Facebook likes it. They use it commercially. You’d get paid right? Nope. That nifty little phrase “including commercial or advertising” covers them in that. You’re simply out of luck. All for uploading a picture via Facebook to show your friend.

The Reality

Most of us aren’t a record label, or Facebook, or have deep pockets for legal fees. We’re people. In modern courts, it comes down to paperwork. A friend of mine, working as a paralegal in downtown DC, described it as “it’s not who’s right, but he whole files the most paperwork that wins.” With things such as “boxcar discovery”, where a side will deliver, in effect, a warehouse of paperwork to go through, it’s almost impossible to take on a company like Facebook. WHile this can go in both directions, Facebook could simply bury a Plaintiff in an excess of paper, unending in the reply to simple requests for production.

So my challenge to you, Mr. Zuckerberg, et al: Say what you mean, exactly, in your terms of service. Strike overreaching phrases such as “including commercial or advertising” and remember that those people you have as your users provide every penny of your current valuation. Start driving them away, and you may have larger problems than content lawsuits on your hands.

UPDATE Facebook has decided to revert to their old Terms for the time being and established a public working group entitled the Facebook Bill of Rights and Responsibilities group. THis already has over 30,000 members but sadly already has drivel in the discussions of “Can someone give me one logical reason to believe in God?”

InfoEther Website Launch

!{border:1px solid black;}http://boboroshi.com/assets/2009/2/17/infoether_site.jpg (The new InfoEther website design)!

For those of you who don’t know, I started working at InfoEther last fall as their UI/UX/Design guy. One of the floating projects I had been tasked with was the redesign of the InfoEther company site. In light of getting me back into Ruby on Rails, they also decided that I should be the one to code it.

The site is done and up and will probably expand as we have time and new things happen. Now it’s off to work on wireframes for our new product.

You can see the site at infoether.com.

Richmond Sunlight Redesign Launches

!{border:1px solid black;}http://boboroshi.com/assets/2009/1/2/sunlight_launch.png (A shot of the Richmond Sunlight site)!

I designed a mockup for Waldo earlier in 2008 and today it launches on Richmond Sunlight. Erik Kastner did the HTML/CSS sexiness for it.

For those of you not familiar with the Sunlight projects, they are sites dedicated to increased transparency in the legislative process. This particular site focuses on the Virginia General Assembly. For more information you can read about the Sunlight Foundataion.

Check it out live: Richmond Sunlight

RubyConf Design

The website for RubyConf has gone live. I did the design for my friends at InfoEther. I’ll be down in Florida for the event (baring unforeseen circumstances) but will not be talking. I’m not the Ruby programmer you may think me to be. I make pretty pictures for Ruby programmers. And dabble a bit when i have time with archaeopteryx and MaxMSP.

Hyphenated People's Usability Prix Fixe

Hello, friends. We’re your usability consultants.

Is your web app tired? Run down? Listless? Does it poop out at diggings? Is it unpopular on del.icio.us?

The answer to all of your problems is in this little bottle consulting package. Hyphenated People Prix Fixe. Yes, Hyphenated People Prix Fixe contains vitamins, meat, vegetables, and minerals and 150% of your daily dosage of usability expertise.

Yes, with Hyphenated People Prix Fixe you can buy your way to web application health. All you do is take a big dose after every meal once. It’s so tasty, too. Tastes just like candy. So why don’t you join the thousands of happy peppy people and order your Hyphenated People Prix Fixe today. That’s Hyphenated People Prix Fixe.

Hyphenated People Prix Fixe

Over at Hyphenated People, we’ve been spending the summer cooking up something new: a fixed-price deal. Fun and challenging for us, and affordable for you.

For a flat rate, you can choose either:

  • The Inspector. In which we explore and analyze your entire application1 and deliver to you a fancy report including a written analysis (including callouts and sketches) and suggestions for improvement. Topics considered include application structure, flow, individual screens’ usability and layout, insights about targeted users, and aesthetics (aka “the pretty”).
  • The Drive-By Design. In which we explore your application, and thence, with that knowledge, take any single, full page of your choosing and redesign it from the ground up to be more effective. In this case we deliver to you a fully-realized design, original design source files (PSDs) and a written explanation of our recommendations for that page and its situation in the entire application.

Either package is ideal for smaller companies and startups, and anyone who is having a difficult time loosening the purse strings for hiring usability consultants for a long-term project.

There’s no further obligation. Our reports and advice are yours. We will happily make ourselves available for further assistance (availability permitting), but you can implement our suggestions any way you want, and with whomever you want.

That Price, Which is Fixed

The price for either package is just $3,500 USD. If you’d like further details, drop us a line at yo@hyphenateme.com with your preferred method of contact and we’ll give you a prompt return call or email.

Write us now. You know you want to.

Nota bene: We’re only budgeting the time for a few of these projects this summer. It’d be a clever marketing tactic to make that up and then urge you to contact us now if not sooner, but it’s actually true. This is something we’ll be doing in addition to our normal, larger jobs. We will of course deliver our very best (as we always do), but this is an experiment for us from a business standpoint.

1 This assumes a fairly typically sized application: similar to or bigger than Basecamp, smaller than Salesforce.