You’re reading Signal vs. Noise, a publication about the web by 37signals since 1999.

37signals

Ryan

About Ryan

Ryan joined 37signals as a UI designer in 2003. He worked closely on the design and concept of Basecamp, Backpack, Highrise, and Campfire. Also a programmer and strategist, Ryan's role includes managing product development and guiding decisions at the company.

The Design Roulette

Ryan wrote this on / 7 comments

There are sites, books, feeds, magazines, and movies about “design.” Thousands of people call themselves “designers.”
But have you noticed … “design” never means the same thing?
When I click on some “design” link, I feel like I’m spinning a roulette wheel. Will it be about:

  • Grids and Helvetica?
  • Typography?
  • How to balance trade-offs?
  • Applying engineering capability to a non-engineering problem?
  • Gradients?
  • Producing emotions?
  • Solving a business problem?
  • Posters?
  • Products?

I just saw a cool link on Hacker News. http://color.hailpixel.com/

Screenshot of the color picker

What is it?

  • An interesting implementation because it’s made in HTML5, not Flash.
  • A cool style because it doesn’t look like other pickers.
  • A novel solution to a problem because the large scale gives access to values you can’t reach in a traditional picker.
  • An emotional experience because the immersive colorfield evokes purple twilights and blue-yellow sunrises.
Continued…

Launch: The official Basecamp iPhone app

Ryan wrote this on / 28 comments

We are proud to announce the first iOS app developed completely in-house at 37signals: the official Basecamp app for iPhone.

Get it now for free on the App Store.

Basecamp on mobile devices

Here’s what you can do with it:

  • Check in on your projects from anywhere. Basecamp for iPhone shows you the latest news on each project.
  • Jump in on a discussion and post your thoughts.
  • View progress as team members complete to-dos and upload files.
  • Look up anything in a project. Refer to a document or make a decision no matter where you are.

We discovered it’s very important on the phone to make sharp priorities early in the design.

Our top priority was fast access to news. You’ll find the app makes it addictive to check in and feel the pulse of your projects throughout the day. You can quickly bounce in and out of projects. Project screens on the phone show the latest news first rather than static project contents.

Our second priority was to offer the full depth of Basecamp. After you dip into a project, you can go deeper and browse its contents. A menu offers all the project sections like Discussions, To-dos, Files, and Documents.

Iterating on iOS is tricky. The medium isn’t as flexible as HTML and CSS. To cut this down we used a hybrid approach. The page stacking behavior and navigation menus are native, while the rest of the screens are web views. Prototyping on Paper came in handy for evaluating native design ideas before committing to code.

We also used some shiny new tech. The app is built in RubyMotion. We barely touched Xcode. Look forward to some posts from Nick for details on that.

We’ve been using the app constantly since we first had a prototype in our hands. I’m thrilled to share it with you today. It’s available now for free in the App Store.

Download on the App Store
  • NOTE: Basecamp for iPhone requires an account on the new Basecamp (released March 2012). Basecamp Classic is not supported.

THAT’S THE THING ABOUT ALL OF THIS. IT’S ABOUT CHOICES. YOU CAN DO ANYTHING YOU WANT WITH A CAMERA, BUT WHEN HULK ASKS THAT ALL IMPORTANT QUESTION OF “WHY?” THERE BETTER BE A REASON FOR IT. AND WHEN YOU GET THAT ANSWER, IT BETTER SPEAK TO THE ACTUAL DESIGN OF WHAT PEOPLE ARE GOING TO FEEL FROM IT. OTHERWISE, YOU ARE NOT IN COMMAND OF YOUR MOVIE. YOU ARE NOT IN COMMAND OF YOUR CRAFT.

Dancing Without A Partner

Ryan wrote this on / 35 comments

Interface design is a two-person dance. By definition it connects two things—the customer experience and the hidden machinery. As a designer, you need a programmer to accomplish anything significant.

I’ve been thinking a lot about teaching UI lately. How do you teach interface design if you can’t get anything done without a programmer at your side? Pair beginner programmers with beginner designers? Sounds like a mess.

Then I remembered my own experience. When I started making interfaces in sixth grade, I didn’t need a programmer because I had Hypercard. Shortly after that it was Filemaker and Microsoft Access. These tools let me connect with data and display it in different ways without convincing a programmer to work with me. It was plenty to learn the fundamentals.

I haven’t seen a UI course that starts with a tool like Filemaker. And Hypercard doesn’t even exist anymore.

If I was designing an introductory interface design course, I think I would start with this kind of tool. Something that lets you gain the experience of putting affordances on the screen, accepting input and displaying output, moving around and enabling tasks.

That way students could get a feel for interfaces without getting into the complicated dance of communication, programmer languages and shared requirements. That all can come later.

Tablets are waiting for their Movable Type

Ryan wrote this on / 20 comments

Remember the web before Movable Type? If you wanted a blog you had to program one. You had to know databases and webhosts and PHP or Perl. If you were “just” a web designer, or a writer with ideas, you had to hire an in-demand web programmer to make it happen. Publishing was expensive and hard.

Apps like Marco Arment’s The Magazine give me flashbacks to that time. Wouldn’t it be awesome to publish my own magazine on the iOS Newsstand? People could read my articles on their iPad Mini, pay without typing in a credit card, and automatically receive new issues as they come.

Sounds great. But here’s the thing. To be on the Newsstand you have to program an iOS app. The tech hurdle is high, and hiring isn’t cheap. iOS programmers are in extremely high demand.

Now is a great time for another Movable Type. Writers would love a way to push serialized content straight to tablets, and the experience would be a boon to readers. Tablets are the best way to read, and Newsstand is the equivalent of RSS for non-geeks. Hopefully apps like The Magazine inspire somebody to make this happen.

(Inspired by Craig Mod’s Subcompact Publishing.)

Learn essentials of product development with Ryan in Chicago

Ryan wrote this on / 7 comments

Come out to WindyCityRails in Chicago on September 6 to see me talk about “Essentials of Product Development.”

A lot of us here on SvN are product people. We know it’s not just the UI, engineering, or business idea that make a product. It’s how you bring them all together to make the world better than it was before.

I’ll share lessons from years of experience designing and building products at 37signals in the talk. Actually the things I’m most proud of aren’t even our official products. They’re the things I made on the side. It’s incredible what you can do with those few hours on nights and weekends when you have a strong hold of product development.

Many of us have deep questions that go beyond making a better product. We want to know how to make more progress on our product. Getting there requires you to bring the talents you have together at the right time, in the right order, with the right people, on the right things.

That’s the fundamental challenge, and I’ll be sharing techniques I’ve learned over the years to cut through it and make more progress on your product.

WindyCityRails is a great conference. I hope you’ll come out and see the other speakers too.

I’m speaking on September 6th at 2:15pm. You can register here before August 8th and save $150.

Offical abstract:

It takes more than talent to make a great product. You also have to focus on the right things, in the right order, with the right people at hand. Ryan will explain key points for successfully developing product so you can make the most progress on your big idea. The talk will cover common pitfalls, techniques for seeing the bigger picture, and advice on how to bring the different roles together.

See you there! Thanks to Ray for inviting me again this year.

"Sign up in seconds" ... and then what?

Ryan wrote this on / 34 comments

Today I saw a familiar pattern on a website for an analytics product. The home page pitched the product, and then above the signup form there was a headline: “Sign up in seconds.”

I see this all the time on signup forms and it makes me wonder: why did the designer put that there? My best guess is that they were trying to relieve some anxiety the customer might have. Like, “don’t worry, it’ll be over soon!”

I’ll bet that the time-to-signup isn’t an important anxiety factor. When’s the last time you shopped for a software product under intense time pressure, where every second counts?

When I evaluate web products I often feel uncertain about what will happen after the quick signup. Sure it takes seconds to create an account, but then what?

I had an idea to address this uncertainty. You could preview the workflow steps that come after the signup so it’s clear how much of a gap there is between signing up and getting value out of the product.

Check out this sketch. It shows “what happens” after you signup. Once you sign up, you get a Javascript code, paste it into your website, and then you can watch real live graphics of traffic come to your website. Sounds pretty easy right? Why not try it?

I haven’t tested this approach on any sites. Intuitively I like how it integrates the call to action with the sales pitch in a single flow. What do you think?

If something is going to be better, it is new, and if it’s new you are confronting problems and challenges you don’t have references for. To solve and address those requires a remarkable focus. There’s a sense of being inquisitive and optimistic, and you don’t see those in combination very often.