Notes from the Design It. Build It. web conference

Last week I went up to Gateshead for Design It. Build It, a two-track web conference for designers and developers.

It was a great day, and I came a way with a lot to think about.  Here are my notes:

The Mechanical Revolution
Inayaili de Leon

• Designers can be resistant to letting technology do work for them - we often believe that hand-crafted CSS is superior to anything that can be automatically generated.
• There are parallels to the industrial revolution, when repetitive tasks were automated by machines. Some things then became so complex that they could no longer be made by hand. 
• This didn't eliminate the need for skilled craftspeople - they're still needed to design the products in the first place and innovate on them.
• Tools like CSS frameworks and preprocessors (eg LESS and Sass) can allow designers to become a lot more efficient. Instead of spending time on repetitive tasks, they can use this time to learn about user psychology, business skills, etc
• Using a framework doesn't have to mean using a generic one developed by someone else ( eg 960 or YUI). You can develop your own framework that matches your own needs.

Designing for Humans
Mike Kus

• The web is full of duplication - there are only a handful of different design styles, and everyone copies each other.
• Vodaphone and Coca Cola's corporate sites are interchangeable (and not just because they use the same colours), despite them being completely different brands.
• People form opinions based on a design, just like we form an opinion about someone based on their clothes or hairstyle.
• Randomly applying gradients and rounded corners ≠ design. Everything should be there for a reason.
• The online experience has to match the offline experience. 
• Apple understand this - they create beautiful products and their website reflects it. 
• On the other hand, Starbucks have a very strong and consistent brand in their stores, but their website looks like it could belong to anyone - if you removed their logo, you wouldn't know it was Starbucks.
• Mike took us through a "realignment" of the Innocent Smoothies homepage - another company with really strong and easily identifiable brand, but a very generic website:

Realigning Innocent from Mike Kus on Vimeo.


Designing to Where The Web Will Be
Faruk Ates

• If there's a web technology that you want to be using tomorrow, you need to start using it today.
• Browsers, platforms, smartphones, etc will only get more capable, not less.
• We shouldn't care what the latest browser is - we should be designing for browsers that don't even exist yet.
• Javascript libraries like Modernizr allow you to detect what features a browser supports (whether that's advanced CSS3 properties or HTML5 features) without designing for or detecting a particular browser.

Visualising Data

Brian Suda

• Every chart or graphic tells a story, and should only tell one story.
• The same data presented in a different way can tell a completely different story
• 3D doesn't add anything to our understanding of a graph - but making a pie chart 3D means that one edge of it will now be closer to you, and will look larger than an equally sized edge that is further away. 
• Everything in a chart that isn't conveying information is detracting from the parts that are. The ideal ratio of data to ink is 1:1. 
• Data is the main character, the grid lines etc are supporting actors.
• The absence of ink is just as telling as a strong line.
• "Chart junk" can sometimes help as a visual aid.
• Web designers [should] have always considered users with visual problems or old hardware. We've now got cutting edge technology that is black and white - the Kindle.
• Tools like SVG are great for quick data visualisation experiments - you can make it look nicer in Illustrator later.

DIBI Conference: Visualising Data

View more presentations from briansuda

One Web
Jeremy Keith

• We've never known how our sites would be experienced in real life. With the advent of mobile, tablets and every other internet-connected device, we REALLY don't know how it will be experienced.
• The same unknowns as ever - speed, capability, size - but we're paying attention to them now
• WYSIWTF
• There should be one web. Not a desktop web and a mobile web (and a tablet web, and an internet-enabled fridge web).
• Responsive design isn't just applying CSS media queries.
• Start with the content and work outwards, not from the layout inwards. 
• Context isn't the same as what device someone is using. Just because someone is using an iPhone to view your site it doesn't mean that they're rushing down the street at the same time - they could be sat at home. So don't force a cut-down version of your site on them.
• People use tools like Instapaper and Readability to get rid of the rubbish that fill the screen with. We shouldn't put it there in the first place.
• Native apps or web apps? Native apps are like CD-ROMS - they'll get neglected and eventually stop working. If content is on the web, it has a much longer shelf-life.

What Makes a Design Seem Intuitive
Jared Spool

The perfect antidote to the potential post-lunch tiredness, Jared Spool certainly knows how to liven things up. If you ever get a chance to see him speak, make sure you snap it up.

• A design is unintuitive when a user has to think about the mechanics of the design (where to click, how to scroll) rather than the task they're trying to accomplish.
• Intuitive design is invisible. We only notice it when it's not working properly. 
• Intuitive design is personal.We know who we are designing for, what their past knowledge is and what words they understand.
• In every system (website, software, etc) there's a gap between the user's current knowledge and the target knowledge they need to use the system. This gap is where design happens. Intuitive design brings the user's knowledge to the level they need.
• You can reduce the target knowledge by simplifying. If you don't simplify your own product, your competitors will.
• Things become intuitive over time - we know where everything is in our own kitchen cupboards.
• Regular users of a site can lose their current knowledge if we decide to redesign a site from scratch. Can alleviate this with labels to highlight new menu items, callouts that explain what a new piece of functionality is, explanatory text about why things have changed, etc.
• Five second tests can highlight whether people "get" your design. Show it to them for five seconds and see what they remember. 

What Every Web Designer Should Know

Jeffery Zeldman

• We're not in control of the visual experience. We never were.
• Tools like Instapaper and Readability liberate content.
• Design that doesn't serve people does not serve business.
• Design without knowing about content is just decoration. The first set of blogger templates were designed by talented designers, but they don't work because they were designed without regard for content, so they're used inappropriately. The only template that has stood the test of time is the most simple and neutral one - it can work with anything.
• You must test with users - but usability testing can be a crutch when what you want to do is change behaviours and patterns.
• Learn new skills - designers need to know about content strategy just as much as they need to know about the latest CSS tricks.
• Mobile means more than just "it works on a small screen".
• Pave the cowpaths. Find out what users are doing already and make it better.

Back to basics: No surprises please - links should do what users expect

Following on from the first ‘back to basics’ post about why you shouldn't use ‘click here’ as link text, I’m sticking with the link text theme.

This time, the thing to remember is that what happens when a user clicks a link should never be a surprise to them. Users expect links to lead to other web pages. If your link leads to something else and the link text doesn’t say so, that’s going to be a nasty surprise for the user.

We often create links to email addresses. These should include the email address in the link text because this gives a big clue about what the link is to. Instead of writing ‘To find out more, contact us’ and linking to an email address, try ‘To find out more, contact us at name@address.com’. You might reasonably expect the former to link to a contact form, but there will be no surprises what the latter one does.

Links to files such as Word, Excel, PDF or MP3 can also be unpleasant surprises, especially if they are large downloads. A user might not have the correct program to open the file, or they might prefer to not download a hefty PDF and start up Acrobat Reader if they can avoid it. Instead of writing ‘find out more about our module in widgets’, try ‘find out more about our module in widgets (PDF, 700kb)’. No surprises.
PS. If you’re using the University CMS, you get this one for free - the system labels your links for you :)

New windows are another common surprise for users. If you feel you absolutely must open a new window (even though usually I would advise that you don’t), it’s much better to say so: ‘see this other website (opens in a new window)’. Pop-ups can be frustrating and confusing for users, but they’re much less so if they know what’s going to happen before they click the link.

So, whenever you create a link always ask yourself ‘What would a user expect this link to do?’ and make sure you’ve crafted it to avoid surprises.

Google dropping support for Internet Explorer 7

Yesterday, Google announced their plans to stop supporting older browsers. From 1 August 2011, only the current and previous versions of the main browsers will be guaranteed to work with Google's suite of web applications (which for a lot of people primarily means Google Mail).

For web applications to spring even farther ahead of traditional software, our teams need to make use of new capabilities available in modern browsers. For example, desktop notifications for Gmail and drag-and-drop file upload in Google Docs require advanced browsers that support HTML5. Older browsers just don’t have the chops to provide you with the same high-quality experience.

With Internet Explorer now up to version 9, this means that they will no longer support version 7 (not too surprising, given that it's nearly 5 years old).

Looking at our own stats for the University of York website, last month we saw IE7 account for 5.7% of our traffic, with ten-year-old IE6 still hanging on in there with 2.7% of our visits.

With Microsoft also behind a campaign to move the world off Internet Explorer 6, things are looking promising for getting people to move over to much more modern browsers.