cazmockett.com

Designing User Interfaces: Details Make the Difference

Dan Rubin

The main topics Dan covered were:

• Proportional Design
• Borders, Lines & Layer Modes
• Texture Tricks
• Other Interesting Stuff

Proportion
Creating patterns for margins and padding aids a sense of cohesion with your design – even if it’s just multiples of 5px, 10px etc. Being consistent will look better.
With typography, use relative text sizes to create balance. Use letter-spacing property (aka Tracking) to balance things.

Borders, Lines & Layer Modes
Grids – take the guesswork out of things. But they can be a bit boring – so use certain elements to break the repetition [see below]

Texture Tricks
Reality is rarely smooth – so using slight touches of texture to break up large blocks of colour can make designs seem more natural and less “flat”. Subtle lines & gradients on elements can have a similar effect, and make things feel more tactile. Depth can be inferred with a bit of subtle bevelling of buttons etc.

Almost any image can be used to make a gradient fill for a banner, for instance. Getting a natural, interesting gradient could take ages in photoshop, but sampling a single line of an image, then stretching it vertically to produce a gradient is a really quick and easy way to start. Then use layer cloning/blending to make it more interesting. It’s a trick I’ll definitely be putting to good use in due course.

Other Interesting Stuff
Finally, Dan wrapped it up with a demonstration of a redesign of the Fox News website (which he did purely for his own amusement!). Currently, it’s a mess with uneven margins, padding, borders, heading styles etc. The revamp made it all much more cohesive and easier on the eye. Nice work, Dan!

Oh dear, now I think I might have to revisit this site’s design and put some of Dan’s tips into practice

Dan’s presentation: slides (pdf) | audio (mp3)

For Example: BBC Home Page

Tom Cartwright/Claire Roberts

Tom and Claire took us through the processes involved in rewriting the BBC Home Page.

Old page was boring, tables based. New has been redone with web standards. Still looked the same, not a good plan. 9 months later, redesigned totally.

There are certain technological/infrastructure constraints which had to be worked around:

• Apache with Mod includes.
• No loops, no xml processing.
• Look like a page not an app.
• Optimisation the key.

more requests = bad

• Images – CSS sprites – 60 image requests (old page) -> 3 only now with sprites – GIFs because of cross-browser support.
• Default page is 300Kb with 30 requests

Drag and drop isn’t the core point. 5% of users have no JS. So they don’t get identical features).

The other 95%. Keyboard browsers, screen readers. Function of links can change.

.blur() is not friends with JAWS. Sends users back to top of page. Taking care for some users, builds a better experience for all (web standards).

Upcoming Stuff

• bbc.co.uk/glow – bit iffy with browser support with other JS libraries – so they wrote their own. Will go open source, hopefully.
• New platform coming up – PHP running Zend framework (instead of nasty CGI and PERL nonsense).
• Identity – implicit and explicit personalisation on bbc-wide site.
• About 60% of users have customised the page some way or another.
• Scrum development, 2 sofrware engineers, 3 client-side devs took 3 months.
• Now joined OpenID federation – it will come.
• Fixed width still – wide variety of sites, easier to try and achieve a consistent look across all sites by using the fixed width.

Tom/Claire’s presentation: audio (mp3)

For Example: Edenbee

James Box (Clear Left)

James’ presentation was about the design processes involved with developing Edenbee.

Clear Left are a User Xperience Design Conustlancy. Edenbee Tracks green stuff and shows you your carbon footprint over time. Each user has a Goals page. eg fit enery-saving lightbulbs. Built by a small team – up to 4 people. 2 clients, New Bamboo did rails backend. Clearleft doesn’t do “deliverables” – they don’t get shown to the clients.

Process

• Start with a “discovery phase” – get round a table to discuss. Paper-based to begin with. White boards. Carbon calculators. Make it social. Wanted it to be the place for your green profile – c.f. flickr, del.icio.us etc.
• amee.cc calculates the actual carbon emissions from meter readings, flights etc.
• Don’t let features overwhelm the main point of the site. Design features when the community needs them – not up front.
• No API at present, want one to be able to feed back into other areas of the web.
• Hive is the main group – aggregated content.

James’ presentation: slides (pdf) | audio (mp3)

Designing Our Way Through Data

Jeff Veen

Jeff’s opening keynote for @media was very thought provoking, as usual.

He spoke about data visualisation and how diagrams can often show us things more quickly and more intuitively than a table of data is able to.

User Participation + Mass of data = designing for data
Data + metadata = information

Make the data useable, you can make sense of it. Add some styles -> makes it more accessible. Example was a rainfall chart. Boring table gives no indication, you have to parse the figures and work it out. But make an icon in each cell instead – colour darker and a bigger raindrop for indicating more rainfall – suddenly the visualisation makes things easily understood. Beware, “prettification” can go too far, and destroy the underlying data.

Jeff also showed us some notable examples:

John Snow
A Cholera outbreak in 1854 in London killed 500 people in one neighbourhood. He figured out with empirical evidence what was happening by plotting the death locations on a map. The local water pump was infecting people  – pump handle removed -> people stopped dying. He effectively mashed up pump location vs Cholera deaths and proved Cholera was a water-born disease. Lead to the development of  Victorian sewers. Found new way of gaining meaning from data.

Charles Joseph Minard
Map and chart for Napoleon’s troops marching to Moscow [see above]. This showed graphically how the number of Napoleon’s troops dimished with time, and location, as they marched to Moscow. And it also showed vividly that thousands of them died whilst trying to cross a particular river – obviously a dangerous spot – by plotting time/deaths/geographical location, it tells you much more about the data than pure figures would convey. Minard said of his map:

The aim of my carte figurative is … to convey promptly to the eye the relation not given quickly by numbers requiring mental calcuation. Charles Joseph Minard

Harry Beck
Tube map designer – Veen showed us before and after views. The old version was very confusing. Leaving out all the dross made things a lot simpler and more intuitive.

Google Analytics
Simplified things. Don’t plot too many things at once. Inspired by Indiana Jones plane journey – dot per datum on the chart. Don’t junk up things too much – remove “chart junk” and things get more comprehesible.

When to talk to people
Lots at the beginning, tails off in a log graph – compared with cost of changing your mind – the opposite. As launch approaches, expense climbs dramatically.

• Look at history
• Look at data visualisations
• Look at users

To help give instpiration for your designs. Books – Edward Tufte:  “The Visual Display of Quantitative Information”

Jeff’s presentation: slides (pdf) | audio (mp3)