Here are the (slightly updated) slides from my RailsConf 2008 presentation. You may miss some of the humor from the live version but I've also annotated some of the slides so they make a little more sense without me talking to them.
Here are the (slightly updated) slides from my RailsConf 2008 presentation. You may miss some of the humor from the live version but I've also annotated some of the slides so they make a little more sense without me talking to them.
When we discussed patents last time we went straight to the source. We'll do that again for copyright law. Stay with me though, this is going to be a bit long to cover everything.
From the U.S. Copyright Office FAQ:
Copyright is a form of protection grounded in the U.S. Constitution and granted by law for original works of authorship fixed in a tangible medium of expression. Copyright covers both published and unpublished works.
Copyright, a form of intellectual property law, protects original works of authorship including literary, dramatic, musical, and artistic works, such as poetry, novels, movies, songs, computer software, and architecture. Copyright does not protect facts, ideas, systems, or methods of operation, although it may protect the way these things are expressed.
If we delve a little deeper into Copyright Basics we find a disclaimer of sorts and another list of protected items:
These categories should be viewed broadly. For example, computer programs and most "compilations" may be registered as "literary works"...
Before we delve any deeper lets have a quick refresher on what Jason has said on the matter (from the 37s blog):
We're often victims of design piracy. Roughly once a week someone emails us with an anonymous tip that someone has ripped off our "UI look and feel" and is using it for their own site or their own app. It's amazing what people and businesses think they can get away with.
From the Highrise Terms of Service:
Update: Yes, I had originally quoted Jason here from an e-mail exchange with myself. A few people pointed out that could be consider bad form. So I am replacing that quote with the above content from the Highrise Terms of Service. I only quoted his e-mail to help clarify the 37s position on copyright but I think the Highrise ToS makes it abundantly clear.
It seems the assertion is literally that their overall layout, design, "look and feel", etc. is copyright 37signals. But are designs really afforded the same protection as words?
Since he doesn't really say we'll skim the lists we looked at earlier to see if we can find any copyrightable items that might support Jason's claims.
I see "pictorial, graphic, and sculptural works", "literary works" (the disclaimer says this can be applied to computer programs and "computer programs" are also explicitly listed in the FAQ). A little more digging provides us with a longer list of literary works including such things as "online works" and "automated databases".
Perhaps a 37signals design could be considered a "pictoral or graphic" work so lets check out the Visual Art Works page as well:
Make sure your work is a visual arts work. Visual arts are pictorial, graphic, or sculptural works, including 2-dimensional and 3-dimensional works of fine, graphic, and applied art.
I don't see a lot of room there for web app "look and feel" but thankfully another detailed list of visual arts examples has been provided for us.
You can read thru it yourself, but the only related thing I see is "computer artwork" which is listed under "Holograms, computer and laser artwork". So that leaves us with the following to investigate further:
We'll examine all three of the above one at a time.
The definition of artwork (as provided by answers.com):
1. Work in the graphic or plastic arts, especially small handmade decorative or artistic objects.
2. An illustrative and decorative element, such as a line drawing or photograph, used in a printed work, such as a book.
To me it seems that "computer artwork" as a term would be definition #2 plus "created using a computer". I don't think a login screen can be construed to be artwork; or a milestones screen, or a file upload form.
Even if I'm mistaken this wouldn't be a copyright on "design" or "look and feel"... but rather a copyright on the overview page, a copyright on the milestones page, a copyright on the file upload form, etc... sounds a bit ridiculous and doesn't sound like what Jason is asserting.
We'll drop this now as we'll find something later that will make it clear "artwork" isn't meant to be understood in this context.
The U.S. Copyright Office regarding Online Works:
For all online works other than computer programs and databases, the registration extends only to the copyrightable content of the work as received in the Copyright Office and identified as the subject of the claim.
This seems specifically to exclude web apps since a web app is an online work that is both a computer program and a database.
We're also given a specific definition of a computer program:
A “computer program” is a set of statements or instructions to be used directly or indirectly in a computer in order to bring about a certain result.
Copyright protection extends to all the copyrightable expression embodied in the computer program. Copyright protection is not available for ideas, program logic, algorithms, systems, methods, concepts, or layouts.
Interesting... layouts can't be copyrighted? Like sheet of paper layouts?
But it's about to get more complicated when we find the term Screen Displays...
The Copyright Office has consistently believed that a single registration is sufficient to protect the copyright in a computer program and related screen displays, including videogames, without a separate registration for the screen displays or a specific reference to them on the application for the computer program.
Notice it's "copyright in... screen displays", not copyright of screen displays. Let's keep reading.
This description will cover any copyrightable authorship contained in the computer program and screen displays, regardless of whether identifying material for the screen is deposited.
Now notice that it's not the screen displays themselves that are copyright but rather any copyrightable material contained there-in. In 37signals case this might include body copy of sufficient length, their tour videos, etc... In the case of a video game obviously it might include movies, computer artwork, etc. Obviously as stated above 37signals "layout" is not copyrightable.
The registration will extend to any related copyrightable screens, regardless of whether identifying material for the screens is deposited.
Here we learn that there exist copyrightable as well as non-copyrightable screens. What might a non-copyrightable screen be? Easy, a screen without any copyrightable content:
Where the screens are essentially not copyrightable (e.g., de minimis menu screens, blank forms, or the like), the application should not refer to screens.
For example the following Highrise "Add a new person" screen contains no copyrightable content that I can see (other than potentially the two longer phrases). It's the perfect example case of the above... it contains only navigation (de minimis menus) and a blank form.
It's also possible to separately register screens displays (in addition to registering the software itself) but note the examples given:
In such a case, the application should describe the nature of authorship appropriately, for example, “text of screen displays” or “audiovisual material.” Identifying material for the screens containing copyrightable authorship must be deposited.
Again we have the concept of a screen having copyrightable content (such as "text of screen displays" and "audiovisual material") but yet not being copyrightable content in its own right.
I think it should be clear at this point that copyright explicitly does not cover layout... and it definitely doesn't cover "feel"... you can patent how something works and functions but not copyright it. I think the above material regarding screen displays makes it clear that "look" is out as well. Screens can be copyrighted but only in so far as they contain actual elements that are themselves copyrightable. Not the screen itself.
If you start to think of "look and feel" as a design methodology or a collection of design concepts you'll also start to see why it is not copyrightable (you can't copyright methods, concepts, or ideas).
The following I found interesting as well (although it makes perfect sense):
Registration of a computer program used in an online work does not automatically cover any visible or audible copyrightable elements that are generated by the code. To register those portions of an online work, the entire copyrightable content must be deposited.
I'm pretty sure this just means that MS Word's copyright doesn't extend to my .DOC biography, Garage Band's copyright doesn't include my new hit single and Backpack's copyright doesn't include the random thoughts and musings I keep there. The content created with software is it's own entity and would have to be protected as such.
Copyrights, like patents, also seem to be publicly searchable. Of course it doesn't appear strictly necessary to register your copyright to enjoy the protection of copyright law. However, you will need to register if you plan to bring a lawsuit against someone for infringement. But it does bring us to an interesting question: Has 37signals copyrighted any of their products?
Other than their book it appears they have no copyright registrations filed. If that link doesn't work (it may require a session) then you can either take my word for it or perform the search yourself if so inclined. I found the book under "37 signals" (with a space).
This of course leaves me really curious exactly what the "1% of the time it requires legal intervention" they mention in their blog post refers to exactly. Maybe just a scary letter from their legal team?
Let's have one last quick glance at that Highrise ToS quote:
I can't find anything that even hints that "look and feel" is protected under U.S. Copyright Law. The law is also very clear that you can't copyright "concepts".
I think good UI design should be something we all freely share. I don't want to use a poorly designed UI anymore than the next guy. Yes, I have asked people in the past not to copy my HTML or CSS. At the same time though I suggested they feel free to come up with similar designs.
Why is it that uniformity of the UI is embraced on other platforms (think Gnome HIG, Apple HIG, Microsoft User Experience Guidelines, etc) but there is this vibe that every application on the web should look and feel noticeably different than every other application? It all seems a bit ridiculous to me.
Next up we'll touch on morality, ethics, and my thoughts on stealing. Stay tuned...
A commenter recently responded to one of my previous posts with the following (edited to remove the focus from any specific app and put it back on the whole community, which has always been the focus of this series):
I perceive the whole "Design Piracy" series to exist for the purpose of building the case that [the apps you've been discussing] didn't lift 37 Signals' Intellectual Property. But if it can be shown that 37 Signals pioneered the look of their apps, how can we build apps that look exactly the same and claim them as our own?
I also take argument with the phrase "exactly the same" as I think that is not the case for any of the apps we've been discussing. But lets talk IP.
First we need to learn what Intellectual Property actually is. From Wikipedia on Intellectual Property:
Intellectual property (IP) is a legal field that refers to creations of the mind such as musical, literary, and artistic works; inventions; and symbols, names, images, and designs used in commerce, including copyrights, trademarks, patents, and related rights. Under intellectual property law, the holder of one of these abstract "properties" has certain exclusive rights to the creative work, commercial symbol, or invention by which it is covered.
But what is IP itself?
The term "intellectual property" denotes the specific legal rights described above, and not the intellectual work itself.
Intellectual property can consist of patents, trade secrets, copyrights and trademarks, or simply ideas.
In the various sources and definitions I read there seems to be disagreement on whether IP includes the actual idea, invention, or design itself (what I've always thought) or is only the specific legal rights to protect that idea, invention or design.
Let's think about both. I think they're inseparable.
I have a great invention. It's really truly amazing. It will blow you mind and it's my "intellectual property", dude. But what does that really mean? Is my idea protected by "God" himself? If I talk about my idea what prevents it from becoming your idea or "intellectual property" as well? The problem is the word "property" can really take on no deeper meaning than "idea" until we have laws and rights in place to legally define and protect "property".
I have a great invention. I also have 10 design patents and 3 utility patents documenting that invention in great detail. I can now discuss my idea with you and I have a specific legal right to exclude you from making, using, offering for sale, selling or importing my invention. After we talk you may think it's your idea too, but it is solely my IP and I can defend it legally as such. Hurray for me!
I don't see how... To say "that is my IP, hands off" and then be unable to point to any legal protections to show in what way it is truly "yours"... Who is to say it really belongs to you at all and doesn't belong to all of us? Thankfully it isn't yours just because you say or think it is. This is why we have laws and specific legal rights in the first place.
It wouldn't matter if 37signals pioneered the "look and feel" in question or not. That would not automatically make it their own intellectual property (unless there is some law to this effect). To accuse anyone of "stealing 37signals intellectual property" and not at the same time point to the specific legal rights 37signals has to even claim it as their own IP is a very hollow argument. As we've seen above Intellectual Property can not really exist in any meaningful sense apart from the laws and legal rights to define and protect it.
Thankfully 37signals is not making this same hollow argument. They have said very clearly that they believe their "look and feel" is protected under U.S. Copyright law... that's the claim we'll be examining next.
Just having an idea does not legally make that idea your own "property". Your idea could already be someone else's "property" (think existing patents) and you just don't know it yet. It could also be that your idea simply isn't protectable as "property" under current law and therefore you could in no legal capacity "own" that idea as "property".
It could be there are steps you are first required to take before you can claim the idea as your own "property". Perhaps it's not your property yet, but it could be in the future if you were to file a patent before someone else, etc.
A patent for an invention is the grant of a property right to the inventor, issued by the United States Patent and Trademark Office... What is granted is not the right to make, use, offer for sale, sell or import, but the right to exclude others from making, using, offering for sale, selling or importing the invention. Once a patent is issued, the patentee must enforce the patent without aid of the USPTO.
It turns out there are three specific types of patents.
I'm pretty sure plant patents aren't relevant to our discussion so that leaves us with utility and design patents.
The USPTO addresses this in their guide to design patent applications:
In general terms, a “utility patent” protects the way an article is used and works (35 U.S.C. 101), while a "design patent" protects the way an article looks (35 U.S.C. 171). Both design and utility patents may be obtained on an article if invention resides both in its utility and ornamental appearance. While utility and design patents afford legally separate protection, the utility and ornamentality of an article are not easily separable. Articles of manufacture may possess both functional and ornamental characteristics.
I would think that any web application interface would have both design and utility components ("look and feel", anyone?). A dropdown for example has a certain look/design, but also very specific way it is used/feels.
A patent search for "look and feel" returns 3,799 results and a search for "user interface" returns 80,439 results. It must be searching the entire body of the patents as I don't see those terms in the titles returned. Warning, the links are SLOW if you choose to follow them.
Although weak, design patents do give you the ability to use the coveted terms “patent pending” and “patent issued,” as is appropriate. I have encountered many individuals who are only interested in a design patent for this very marketing purpose.
I have also heard several others say this same thing: that design patents themselves are the weakest kind of patent. The ipwatchdog.com article does go on to say that design patents can become formidable if acquired in bulk or mixed with utility patents:
If you have 10 or so design patents on similar variations you harness the power of a portfolio rather than relying on any single patent. If a competitor were to want to step in they would have to get around 10 weak patents, a task that is not very easy to do in many cases. Similarly, if you have a utility patent, one or more design patents (preferably several) can make a nice, economical way to expand exclusivity through the leverage of a patent portfolio.
Evidentially with patents less is not better. :-)
If you're wanting to read more on the subject wisegeek.com has also written on the difference between design and utility patents and provides some examples of each type:
For example, designer eyeglass frames, the original Coca-Cola bottles, and "Pet Rocks" would have all been protected with design patents.
For example, going from LED technology to OLED would call for a new utility patent. ... Other examples would be a better carburetor, a new type of self-fastening diaper or a new recipe.
The USPTO itself defines design pretty specifically.
If you're curious here are some real life patents:
As far as I know 37signals has never claimed to hold any patents. An online search of U.S. patents seems to also support that 37signals holds no U.S. patents. If anyone knows of any patents (or if any of the 37signalers have their own patents) please let me know and I'll update this section. There is also the small chance I'm using the USPTO search mechanism improperly.
It seems that if 37signals were to acquire multiple design and utility patents on their "look and feel" they might begin to find themselves in a position to "exclude others from making, using, offering for sale, selling or importing" similar designs or a similar look and feel.
I'm not suggesting they start acquiring patents. Just saying.
I had a suspicion patents would be relevant to our discussion and I think they have been; but now it's time to move on. Copyrights, up next.
Looks like potential trouble in Mighty Mouse land as Apple and CBS are sued for trademark infringement by Man and Machine who claims to have used the name since 2004 for their very own waterproof and chemically resistant Mighty Mouse.
Anyone ready for an Apple iMouse? Move over iMouse independent software (which actually looks kind of cool if you're still stuck in one button mouse land).
Personally I'm considering ordering the original... It would go great with a Black Macbook and I can't even count the number of times I've wanted to use my Apple Mighty Mouse under water and been unable! :-)
Those of us with an Apple Mighty Mouse also know what a pain in the ass they are to clean.
This isn't a news flash or anything... just back when this happened I didn't have a blog to point it out. And I do think it's somewhat related to our overall discussion of similarity, inspiration, etc.
Not that I mind one bit... I think it's great that 37signals is using a similar design for new post notifications in Basecamp. Yes, Beast had this first. I'm more than happy to lend them a few UI goodies from time to time - or even an entire forum. :-) Referring of course to 37signals switching to Beast (written by myself and Rick Olson) for their customer support forums.
In our last post we talked about sheet of paper design, what it is, what it looks like, and why people like it.
We left an unanswered question that I'd like to address now... Does 37signals have a copyright on sheet of paper design? Of course we know the answer is either a 2, 3, or 5 letter word... but that wouldn't make much a blog post, now would it? :-)
When I want to start a new sheet of paper design here is what I usually start with:
It's pretty simple. Of course there is a certain proportion to it. Be it 66/33 or 60/40 or 70/30... I don't think it matters and I don't think there is a "golden" number. I have no idea the exact proportion 37signals uses. I tend to use what feels right over time. Pastie, for example, has a wider content area because the entire app is driven by one purpose: just pasting and viewing code.
So in review we have a white box in the middle of a grey background roughly proportioned to 2/3 the total width, that's it. A one or two element layout (depending how you count the background).
Can 37signals really copyright such a simple design? I find the very idea ridiculous - and I'm not alone. If 37signals can copyright that then we're screwed. So is every one of the sites I mention and actually most of the internet if such a simple design can be legally protected by one company exclusively.
But maybe they are trying to claim copyright on a bit more than sheet of paper design itself, so lets continue...
Let's pair any one of the tabbed headers from our previous discussion with this simple one element sheet of paper design... Let's remember we still haven't added any actual content or even any sidebar content that would differentiate our app from another other web app... nada... we just have a white box, a grey background, and a tabbed header design...
Hold up, lets not even pair it with one of those tab heavy headers. Lets pair it with a simple black header with links (think Pastie or Beast):
So what do we have below? We have something that surely bares a resemblance to a 37signals web app. We now have 2 or 3 design elements on the page. Can we copyright it yet?
I'm not sure it really matters what you put in the white or grey areas at this point... maybe 37signals would be a little less upset if we put a picture of Mickey Mouse in the white and Miney Mouse in the grey... but if you continue to use a clean, simple design there are going to be similarities to 37signals... The sheet of paper layout itself (for better or worse) combined with well-known usability guidelines constrains your choices about the placement of content, help, utility links and buttons...
Sometimes you're forced to make the same design choices as 37signals. Yes, forced. Let me just give some examples to illustrate this.
It's important. Where do we place it? What about top center of the content area (old Basecamp), or top left (new Highrise).. what about top sidebar (Campfire)... Fuck, I can't even put the title on the page without "stealing" from a 37signals design.
It should probably go near the title... perhaps under it (Highrise)... or beside it.. (Basecamp header) Thwarted again.
Well, they should probably be near the title of the content... right beside it (old Backpack todo edit links), top right of content area (Highrise), above it, beneath it (old Basecamp I think), top sidebar, bottom of content (Basecamp Messages, expanded view)... top sidebar is a bit awkward to me, but I'm trying to think hard here.
I suppose I could hide the delete button unless someone is editing the content (old Basecamp)... or not (new Basecamp). Can't win.
I think this is pretty obvious. Primary content on the left (the wide page area), peripheral content on the right... this is pretty standard with two column designs. Maybe we could put the sidebar on the left (old Basecamp projects list)... Nah, bad idea.
We're talking about the key task on a page (if any)... Like "Add a new pet" on the page that lists pets... We could put the links under the title (old Basecamp project overview), to the right of the title (new Basecamp), maybe at the top of the sidebar (Highrise), maybe even above the title, though that's a bit weird. I could use a link (new Basecamp, project overview) or I could use a button (Highrise, new Basecamp, etc)...
And what if my button reads like a sentence "Add a new pet"... where have I seen that before... hint: Apple's own software and Human Interface Guidelines.
Starting to see a pattern yet?
When you start with a sheet of paper design 37signals seems to think everything that follows results from your ulterior motive to steal their design. They are flat out wrong. The sheet of paper layout itself, usability, basic design principals and common sense guide a good designer, just like they guided 37signals.
Take someone with some common sense, mix in a good knowledge of usability and some experience with design and the web in general... and you will find a person making a lot of the same decisions regarding placement, proportion, contrast, etc that 37signals has made.
Sure you can go the Lighthouse route (no offense intended)... add more color, more boxes, more curves, more "fun"... do extra things to try and look less like 37signals (build a thermos instead of a cup). But if you just love that clean, simple look, there isn't a lot you can do.
.. and do they have a copyright on the basic decisions, placements and proportions that follow from it... in other words, does 37signals have a copyright on usability guidelines, basic design principals and common sense?
God, I hope not.
Tune in next time and we'll talk about copyright law itself, patents, and more...
Let's talk about the now famous "sheet of paper" design that 37signals claims as their own.
This blog is a great example of "sheet of paper" design in action.
What I'm referring to is a white content area (the sheet of paper) set in a sea of grey (or any color - soft grey is popular because it's a nice neutral tone). Naturally, the "paper" can be fluid or fixed width and as tall as necessary to fit the content; that's a given.
These are silhouettes of some of the same apps we've been talking about so far in this series. You'll notice the headers are all pretty uneventful... I probably should have cropped them from the snaps.
You'll see some of the designs are more "frilly" than others... The apps I've designed from scratch or been involved with (Beast and AutoRaptor) tend to keep it simple where as apps like Lighthouse and Boxcloud mix things up a little more by adding multiple bars of color, additional boxes of content, etc. At the core all these examples are still "sheet of paper" designs.
Here it is again, this time the bare minimum:
I'm sure 37signals would like to claim that honor... but I don't know. Obviously fluid two tone/two column designs have been around before Basecamp was introduced... but did someone else float the content area before 37signals thought to? If you have the answer, please share it in the comments.
It's clean, it's uncluttered, it provides natural design constraints, and I think it helps encourage minimalism and creativity within the space available. I've worked with apps that try and "box in" the entire layout and I just feel trapped... I've worked with apps that use 99% of the width beneath a tab bar for one giant column... and I just feel lost... I can't think with that much space.
I think most designers (websites and web apps alike) recognize that one large column can be a bit daunting. That is why we see so many two column app designs.
Update: I've updated this section to remove any direct quotes of Jason from e-mail correspondence as some have suggested that might have been bad form. I've tweaked the content a bit as well to support my new quotes. I do still mention the discussion, just not quote Jason.
In their design piracy post Jason states:
We’re often victims of design piracy. Roughly once a week someone emails us with an anonymous tip that someone has ripped off our “UI look and feel” and is using it for their own site or their own app. It’s amazing what people and businesses think they can get away with.
From the Highrise Terms of Service:
In an e-mail discussion I had with Jason regarding Pastie and Beast he expressed frustration with the similarities to 37signals products and again mentioned that their designs are copyrighted. Of all the apps we've been discussing though I actually think Beast and Pastie happen to be the least similar to 37signals overall "look and feel".
It helps that they both have a much simpler header and that neither are very complex apps. Less on screen means less similarities. The most obvious thing that Pastie, Beast, and 37signals apps have in common is we're all using sheet of paper design. Judging from my e-mail exchange with Jason I think that 37signals does seem to interpret their copyright as also referring to sheet of paper designs in general.
Does 37signals have a copyright on sheet of paper design? They certainly seem to think they do.
Seriously, I'm not just evading the question. I'll be discussing the legal and moral angles of this in the next post or two. Stay tuned.
Last time we talked about why I think all headers pretty much look the same. Perhaps you found yourself thinking "Ok... I agree they are all really similar and that's ok, but man... some of them are like almost identical. Surely this must be the design piracy 37signals keeps talking about?"
So let's have another look - this time without colors distracting us. 37signals products provide multiple color schemes (or even the ability to set your own colors) so a "you stole our colors" argument would be silly. I've chosen to just remove colors from the equation entirely.
Lets see exactly what these apps did to pirate 37signals header design.
Now, we could remove the titles/context from all the headers if we want... but then 37signals could just say we borrowed from Backpack as it happens to forsake a title and go with just tabs and links.
The middle three things I mention above are the basic building blocks for almost any header in almost any web app. I mentioned in my last article that these are common web app design conventions and well-accepted best practices.
Notice that we still haven't done a single thing to consciously "pirate" the 37signals look or feel.
Let's say 37signals designs a simple, usable cup... they start with an open cylinder... they add a bottom (so our fluid of choice stays in the cup)... they add an interface (the handle)... and then it's done.
Announcing: teacupHQ.com: pretty, shiny, and only $5 a month with a free 30 day trial. :-)
Now lets say we also like simple cups... so we set out to make one also. We add a bottom, and then a handle... and guess what. It looks a lot like the 37signals cup. And now they are telling us we pirated their cup design? They want us to change our simple cup...
So perhaps we add a fancier handle... or change the shape... or add a lid... or a straw... anything at all to disguise the fact that really it's just a plain simple cup - just like the 37signals cup. Why oh why...
We both set out to build a simple, usable cup. We both succeeded. We both got incredibly similar results. Neither one of us did anything wrong.
Of course it's not a perfect analogy. We're not both building cups... 37signals is building chat, intranet, and project management software... The rest of us are building paste sites, forums, automotive sales force tools, invoice generators, bug tracking sites, file sharing sites... we're not trying to take business from 37signals. In fact most of us send business to 37signals all the time (I do multiple times every month).
So, we didn't set out to copy 37signals, but now it's suggested that to avoid looking similar we need to add more crap to our already perfectly minimal design.
We could add a logo... we could add curved tabs... we could make the tabs really funky looking... we could add more space between the tabs... we could add a whole other row of color (like Harvest)... but what we can't do is give 37signals back what we stole, because we didn't steal anything.
Simple no-nonsense, no additional fluff headers look like 37signals headers because 37signals has a preference for simple no-nonsense, no fluff headers. If 37signals wanted to build funky looking, graphic laden headers... or add a logo... or add a background pattern... they might suddenly find their design more distinctive and less prone to unintentional resemblances.
I don't blame them for wanting to keep it simple, but they shouldn't blame others for wanting to keep it simple too.
Next up: sheet of paper design. The big picture.
Ok, I'm not the first person to have this problem... skip to bottom for my solution. I'm just getting this out there... it might be my unique problem of everyone on the Internet.
Some people reported that plugin support just got turned off... and using Preferences to re-enable it fixed it. My problem however turned out to be much more complex.
I finally stumbled across the fact that Help -> Installed Plugins on my MBP was entirely blank... not a single plugin was working... so I moved them all... and then just put Flash back... it worked. So then I started putting all my other plugins back and restarting Safari each time. When I copied JavaPluginCocoa.bundle back the plugins page went blank again.
Since I had just installed a Java update earlier I downloaded that same update from apple.com and re-installed.
Problem fixed. Ugly test flash graphic you've never looked so good.
Update: I just found out my sound (YouTube, etc) still didn't think. This fixed it.
Previously I discussed tabs, now it's time to look at where tabs live.
The header is arguably an important part of any application. I'm going to stop and be honest here. I have designed some headers that look a lot like Google. Yeah, that's right, Google... bet you were expecting me to say 37signals, right? But let's have a look...
Updated: Someone just linked me to slate blog so I added it as yet another example.
Looks like most of the headers (including Basecamp and Blogger) have a lot in common...
These are easy to spot:
* Log-out link in top right (all)
* Name of who is logged in at the top right (50/50)
* Help link top right (all except Beast which doesn't have help)
* Help link on orange or other bold color (50/50)
* Tabs for navigation (all but Beast)
* Large title above tabs for name of app or project or context (all)
* Logo to the left above tabs (every app with a logo that's where they put it)
* Solid color background (all but Harvest - I count Blogger because the graphic is subtle)
* My Account / My Info / My Profile link top right (all, in Beast you click your login name)
You have to get picky, but they can be found. Harvest is pretty radical with it's two tone colors. Some apps offer Help as a normal link, others highlight it prominently. Blogger includes a link next to it's tabs and Lighthouse adds a image inside the Dashboard tab. Each app has it's own colors.
Re-read the list of similarities... I think you'll recognize most as common web application design conventions or well-accepted best practices. It's no surprise these apps embrace those and therefore no surprise to find their headers all look quite similar. I think it would actually be bad for the state of web applications if we started finding massive differences from one app to the next.
Yes, I'm aware that I chose the samples... but many are well-known sites, and they weren't hard to find. It's not like I had to scour the Internet for hours to find matching headers. Blogger's actually caught me by surprise as I tried to start this blog there before failing because of their miserable WYSIWYG editor.
All and all, way more similarities than differences. If 37signals is upset about other apps headers resembling their suite of products... then they have a lot to be upset about indeed.
Next, we'll take a deep breath and imagine a world in which we all design everyday drinking cups instead of web apps.
Ok, lets take a look around the web and see how people are doing tabs in apps these days.
You are going to see a lot of similarity. You'll see that even the CSS Tab tutorial (2nd search result via Google) bears a resemblance to 37signals own tabs - just change the colors a bit. Beast's links may look a bit out of place... but since that's one of my apps that's been mentioned in "rip off" circles I thought I would include it in this comparison.
CSS Tab Tutorial
The 2nd result in a google search for "tabs css": Updated Simple CSS Tabs | silverorange labs
Example found here as they have changed their site design.
Working With Rails
Tabs are all about the same everywhere.
CSS tabs on a solid color background... Design Piracy? NO. Wait, there is a difference though...
I think it's a less is more thing. I personally find the square look cleaner. And of course it's just good usability that the tab's background color flows into the content. This makes it as more like a real life tab and not just disconnected navigation.
37signals gets that right and we all do likewise (most of the examples do). Beast doesn't bother because really those are navigation links, not tabs.
So it looks like 37signals doesn't have a corner on the CSS tabs industry... but maybe Jason doesn't mind the tabs...
A friend reminded me that Jason actually addressed the issue of tabs in an open discussion panel at SEED this year in Chicago. Evidentally similar tabs didn't bug him too much.
My friend: he [Jason Fried] laughed and said 'no' and like 'how could you really do them differently?'
I'm glad we agree.
I'm starting out a series of posts in response to:
37signals leads with:
We’re often victims of design piracy. Roughly once a week someone emails us with an anonymous tip that someone has ripped off our “UI look and feel” and is using it for their own site or their own app.
You need only read the comments on that post itself for a plethora of good arguments against 37signals' position. (You won't find a lot of sympathy). I agree there are any number of ways to build a watch but...
Which watch do you want to wear? Pick any two...
I think we can all agree that while there may be 100s of ways to build a watch the goal should not be endless variation for variation's sake. Even a quick glance at Jason's own sample of 100 watches leaves something to be desired design wise in many cases.
I believe this holds true for web apps. While there are no doubt 100s of ways to build a web app I think there are a few good ways and a lot of bad ways.
We set out to build a simple, clean, usable watch... and then we find out it looks a lot like 37signals watch... Sure it would be possible to make our watch different just because... but then it would start to suck because the simple and clean decisions we've already made weren't the wrong decisions. The fact that most watchs look the same overall isn't design piracy, it's design practicality.
That is neither illegal or immoral IMHO.
I'll expand this list and link things up as I post on each topic in the next few days.
Why have I chosen these things? Well AFAIK Jason has never come out directly and said:
Stop stealing xyz and abc
Jason: I'm saying that the overall structure of the page, the style of the page, and the composition of the page is roughly the same as ours. Lots of people have commented on it and sent us emails about it so there's definitely confusion in the marketplace.
It sounds like it's a "little bit of everything" mixed with the "sheet of paper" layout that gets him upset. I think it's the combination of the header, tabs, and sheet of paper layout that he's come to so closely associate as belonging exclusively to 37signals. We'll delve into each of the above areas and also touch on a bit of miscelaneous UI goodness.
I've removed this section at the request of my client. I should also take the time to state that this blog reflects my thoughts and opinions alone and not necessarily those of any of my clients or employers past, present, or future.
I will say that I've been wanting to blog about this matter for a very long time but only recently found the motivation to make it happen. I hope now that I'm here you all enjoy the ride...
The opinions I state here are my own and do not necessarily reflect the opinions of my clients, friends, lovers, employers, employees or anyone else.
Copyright © 2008-2009 Josh Goebel. All rights reserved.