John Breslin
The first talk I attended at the Future of Web Apps 2009 event in Dublin was by Eoghan McCabe and Des Traynor from Contrast. As I mentioned in my previous post, many of the speakers (in particular this presentation and the last one by David Heinemeier Hansson) urged attendees not to conform to conventional expectations. Contrast focussed on the design of web applications.
Photo by Naomi Kelly.
The main topic of their presentation was “conventions”. There are great opportunities to be had for web designers, but you must first question everything you do when building web applications: including every aspect of how you expect an application to work, where much of it is based on personal experience and familiarity. In terms of conventions, it is basically “survival of the fittest” where the most used or most popular becomes “the” convention (e.g. hashtags on Twitter).
The benefits of using conventions are vast. There will be less friction in the user experience, and using conventions reduces the learning curve. Also, the design process becomes easier and more productive due to the assumptions that can be made. For example, the Rails community have adopted a number of conventions or best practices which lead to an ease in designing applications.
However, there are some problems that Contrast see with conventions. It restricts innovation, since relying solely on conventions is lazy. If all you are doing as a designer is doing what everyone else does, you’re not a designer.
When you are coming up with a design solution, you want to find that unique but at the same time optimal solution. Most people use a local maxima (i.e. the peak in a range of known values). But there is always a better way of doing things: look beyond the local maxima in what we use right now.
If all things look the same, you will look at the price tag (e.g. most mobile phones are very similar in appearance). For commercial opportunities or wins, you must design innovatively, just as Dyson, Apple or Flip did. By doing this this, you can change the world. Breaking conventions and innovating yields more meaningful ways in which you can also enjoy making money.
In this presentation, Contrast were talking about Web conventions specifically. They listed a couple of these, beginning with the standard layout. It almost always consists of a footer, left navigation bar, a body area, and a header. Superimposed on this there’s a logo, a primary navigation bar, secondary navigation, and a search box. This convention gives you the same site again and again and again (e.g. Sky.com, Play.com, etc.). It works because it is an established convention that has been proven to make money (e.g. Amazon).
Next up was signups. For a new application (e.g. invoicing, one of Contrast’s areas of expertise), the start page is always a signup where you are asked for the same information. It is taken for granted that if you want to try out an application, you must register first.
Copy (or text phrases) was next on the list. Certain phrases are used to say something since they almost guarantee that you will know what to expect next.
They then talked about the home screen. Since a user usually starts at a home page, that page contains a whole lot of content that will cater for a wide range of users. It acts as a starting point that will draw out some content and deep links.
Page-based conventions for websites evolved from traditional flyers and brochures that migrated to the Web. We often talk about pages as discrete units, with hierarchical content. Sitemaps of these hierarchies have themselves made it on to the Web as page contents.
The last item was branding. Branding is used to take ownership of content and to “give it a voice” by placing a mass header above everything that is publish. “This is BBC or Sky or RTÉ News”, “we are an authority”, “our journalists are associated with this brand”. The header takes ownership, where the identity is always on the top left. It’s tried, trusted, true and it works.
So what’s the problem? Conventions work and they are extremely useful. But they are also unremarkable. If you lean on them too heavily, it becomes difficult to sell or market something as a special or remarkable product.
The other problem is that many of these conventions evolved when people started building websites in the 90s. Contrast argue that these are the wrong conventions, and we should break them because who knew what they were doing back then?
Why are they wrong now? Because we are not building sites any more, we are building software applications. Contrast don’t advocate throwing everything out, but you should certainly question a particular convention when it becomes obsolete. The game is changing, but we need to adapt as well. There is an opportunity for us to change these conventions as the world moves forward with increased connectivity, the Web everywhere / on any device, and loads of APIs to move data back and forth.
The presenters returned to the six conventions of websites and gave some ideas on how these could be changed.
Website layouts are normally three columns. But there are alternate ways to navigating content, e.g. by zooming. The online bookstore Zoomii.com does things differently than conventional sites, allowing you to zoom in to content items (books) using a mouse wheel. It’s easy to do the top-left branding thing, but such a navigation system can make you stand out even more. Another example is zoomism.com from BEVOdesign’s Ben Voos. Ben’s portfolio is linked all over the Web this as a result of this innovative site. Such an interface couldn’t have been created six or seven years ago as the required technology was not there.
They came back to the topic of signups, contrasting with the model we have now. If you want to encourage users to try your service, you should let them try before they buy, where they don’t necessarily buy with cash but rather with their time. We need to respect time, e.g. soup.io allows you to click “Try it now” and publish content without a user account. With no signup, a user doesn’t have to let go of personal information. drop.io is another example, a site for sharing files without registering.
For copy, there are two conventions: firstly, the text phrase is usually pretty mundane, and secondly, it has to stay the same. However, this has been ignored more and more recently. Flickr says hello to you in different languages, instead of just saying “You are logged in”. If you are as bland as everyone else, you will be ignored like everyone else.
Some examples of sites using cool copy are the Huffduffer podcasting application and the Threadless store. Instead of saying “0 items in cart”, Threadless says “I’m so, so hungry [...] feed my carty belly with delicious Threadless products”. Fender is a counter example. They should have cool copy with rocking language for guitarists. Where it currently says “Login failed” or some other robotic nonsense, it should say “Try again dude”! Contrast often use an accounting application called Freshbooks, and in this case you would use interesting but formal copy. The copy text suits the application, so you would use formal if it is a formal engagement.
On Lovestruck New York, every label has about nine or ten possible values (“I love you in that colour! Never wear anything else. Come on in.”). This makes it always interesting, creates engagement, and makes you like the site. We should build the sites that people like, therefore there is a need to think about engaging people as you are building sites.
Next under the microscope was the home page or dashboard. We need to question the idea that it has to be there, that it is taken as a given. The Harvest high-level view uses one third of screen space to promote Harvest news, but that isn’t the purpose of the site for most users who use the service (an application built for invoicing and time tracking). WordPress.com also suffers from this, promoting internal news and WordPress trivia on the dashboard of blog users (I laughed at this because I thought of it just before they said it). The first thing you see when you go to write a post is that you have 14 pages and 35 categories and 165 tags and 2636 comments, all of which is unimportant. A nice example of where Harvest have done it right is their iPhone view, which allows people to easily create solutions from scratch and to track time. (Similarly, the WordPress iPhone applications is clear of irrelevant clutter.)
The problem with page-based design, the next convention, is that we miss out on various opportunities when designing pages. You can’t design a wireframe for a zoom-in application with the current set of page-based development tools available. Prezi, the zooming presentation editor, allows you to mix all kinds of content, where everything is purely interactive. We can now give up on the convention of having a static set of navigable pages for a application, which is a big win for the Web.
Branding was the final item. The convention is that you need to give your application a voice, to say who you are. Contrast say that we need to “stop the sell”. If you keep pushing your brand on someone, it gets tiring, and you don’t necessarily have to do that (e.g. Keynote doesn’t keep reminding you of its brand all the way during a presentation). As Contrast’s work is quite oriented towards invoicing and time plans, they cited the examples of Blinksale, invotrak, and Remember The Milk who all keep reminding you of who owns the service you are using. You don’t have to keep pushing the brand: let the brand be good software.
The inspiring companies (the ones to copy) are those who provide web applications where people believe they “own” the software. An example is the Basecamp service, used by many of Contrast’s clients who are unaware that it is Basecamp. There is no hard sell, no pushing required if the service speaks for itself.
Finally, the Contrast guys spoke about the future. We have to build remarkable stuff, but we can’t do it with the current conventional templates available to us. You can throw together an application but it won’t stand out from others despite any flashy graphics you may throw in there, and this requires imagination.
Contrast are a small company of four: Dave, Paul, Des and Eoghan. In October 2008, they were effectively out of business. But they built up significant client business since then because they looked at breaking the rules (Qwitter, Exceptional, etc.), and now they have project work lined up for the next two years.
Eoghan finished up by saying: “Try it, if we can, anyone can. Break the rules, question them and have fun!”
There were a few questions, the first was about what is the required skills mix. Contrast answered that you need a small team all with a balance of skills. The next question was about other layouts apart from zoomable ones. Contrast believe that the hub-and-spokes style we now have isn’t the right one for web applications. For example, iPhone applications use back and forth, allowing you to drill down and back up again. ZUI is a technology that Des thinks will get huge. Another interesting option is layered views in web applications. His advice was not to design a navigation system before you think through it properly. Dan Saffer talks about functional carthography, i.e. how likely is something going to be hit, how often. We should also take inspiration from non-Web platforms, e.g. Mac desktops.
The last question was about non-JavaScript interaction methods, e.g. Silverlight, Flash, and if they are the way of the future. Using JavaScript restricts some options, e.g. camera or audio input are not possible. You may not need everything that Flash or Silverlight offers but they have many more possibilities. HTML/CSS/JS is a bit of a hack but it works well for web pages, if not for interactions. A good guess would be to say that other technologies will have a look in during the next few years (e.g. Adobe Air).
More FOWA Dublin 2009 posts by others:
Filed under: Social Media | 2 Comments »
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=edacd741-c521-4be9-84ba-5b4a145d6200)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=03f55b5f-9add-4933-937b-4470c810d431)
