IA Summit 2009. Photo by Francesco Casale.

Those of you who don’t follow me on twitter (why not?) don’t know that I had a chance to attend the 3^rd Italian Information Architecture Summit (#iias09) in Forlì this weekend. I probably would have never even heard of the event if not Andrea and Simone who not only passed me the information but also turned out to be great companions for the trip. In this article I’ll share some thoughts on the summit and sum up my favourite presentations. I will then close with some brutal type crimes I witnessed during my stay in Forlì.

KillZone2.

The IIA Summit kicked off on Friday morning with quite a few interesting presentations. Reinoud Bosman showed us preview of the new Killzone 2 website which apart from being a marketing monster is an online community for players, data gathering center and data visualization masterpiece. What it does is basically collecting game progress data sent from thousands or even millions of playstation consoles around the world and outputting it as a highly advanced leaderboard with beautifully designed interface. Just to give you a general idea imagine playing a fps game and being able to check where have you been, who and how many times you’ve killed in the game on the game’s website. Killzone 2 does just that.

Connecting the Dots.

Gianluca Brugnoli in Connecting The Dots of User Experience — The Design of Interactive Systems talked about how content is getting independent from the media and what impact it has on user experience in general.

Connecting the dots by G. Brugnoli

For a positive and fulfilling user experience, the whole is more important than the parts. […] Results are not delivered by a single device. They are the arrival point of a fragmented and random interaction flow which goes through many devices and different situations. The architecture of the system becomes a key design challenge. Before focusing on the capabilities and on the features of a single device, the design should start from the organization of the system, and from the possible relationships and connections between the parts which can be activated by the user action. […] Users are always in the center: they are the protagonist which freely and actively connect the dots, selecting and putting together the different pieces of the system.

EuroIA Network Initiative.

Søren Muss talked about the European Information Architecture Community (http://euroianet.ning.com/). His talk was very inspiring and entertaining. So were his slides. I picked these two for your pleasure.

Søren Muss about European Information Architecture Community

Divided Europe. By Søren Muss.

Versatile interfaces.

One of my favourite presentations was the one by Luca Mascaro. He talked about adaptable interfaces, ones which adjust themselves to the user based on his interaction with the application/service. Microsoft has been doing it with Windows for a quite a while (remember XP’s taskbar or start menu?). Now imagine web applications’ interfaces doing similar stuff. Think about »Upload pictures« link getting bigger and bigger every time you visit your Flickr home page because all you do from there is just… uploading photos. Picture items disappearing from your favourite webapps’ menus just because you never click them.

Luca Mascaro about Versatile Interfaces.

Somehow I find it hard to imagine versatile web interfaces becoming a standard but it’ll definitely be something that’ll make your web app stand out from the crowd in years to come.

Closing words and words of gratitude.

There was a lot going on at the IA Summit. In fact I would have never published this article if I were to sum up every single presentation. I’m hoping Andrea will cover some of those I failed to dedicate a paragraph to: “Learning to Think with IA” by Renata Durighello (slideshare), “IA and Ecosystems” by Leonora Giovanazzi (slideshare) and “Commercial Ethnography” by James Kalbach (the author of “Designing Web Navigation”) to name a few.

The Third Italian IA Summit was an amazing event. Great lineup of speaker, wonderful people and no registration fee—how often do you see that happening? I can’t imagine the amount of work Alberto, Andrea and the rest of the IIAS2009 crew put into organizing the conference. Big thanks to all of them and I’ll be looking forward to the IIAS2010!

Type Crimes.

Apart from seeing Comic Sans used for slides in one of the presentations I witnessed a few other dreadful type crimes of which images I’m sharing below.

Warning: The following images contain graphic of objectionable content.

ANTICHITÀ

BANCA di FORLÌ

…FORLÌ

…d’uso…dell’Impresa in un giorno

Forlì, that was close!

Thanks for dedicating your time to read the article! Ciao ciao!

Don’t be shy to use soft hyphens.

When justifying text there’s a risk of ending up with rivers of white space flowing between words in a paragraph^[1] (figure 1.1).

(1.1) Justified paragraph. No soft hyphens used.

Whether to throw a few & s h y ; (leave out the spaces) between the syllables of the words or not depends on your good will. I don’t recommend breaking all the words on all pages with soft hyphens not only because you wouldn’t find time to read this blog anymore, but also because there are a few search engines still having problems indexing hyphenated words correctly. However if it’s one or two paragraphs in a prominent place on a page you’re thinking about I’d give it a try.

(1.2) Justified paragraph. Soft hyphens in use.

There are also tools that can do all the hard work for you but you might want to think twice before using them^[2].

Beware of the default link underline.

Unless you want to risk compromising legibility and/or usability with an alternative link styling know that it is always ok to go with a simple underline (figure 2.1).

(2.1) Link styling at jasonsantamaria.com

Wether the default underline may cause readability issues or not is for you to judge. I strongly recommend setting text-decoration to none and replacing it with border-bottom: 1px solid; padding-bottom: 1px. This way the underline won’t cut through nor melt with the descenders^[3] (figure 2.2).

(2.2) Possible alternative link styling at jasonsantamaria.com

Be careful with Helvetica.

Helvetica is beautiful. It is also almost unreadable at smaller sizes on some machines. Consider using Arial or — if you really must — Helvetica Neue when setting font-size to less than 12px^[4]. Set your pages’ body text to Arial — if sans-serif is what you’re after — and use Hel­vet­ica only for headings.

Use better CSS font stacks.

Last year Unit Interactive published an extremely useful cheat-sheet, a reference I’ve been using since then in every html & css coding job. Better CSS Font Stacks helps you chose the right set of typefaces to use on your website. It provides you with a wide range of ideal, web-safe choices (the one you wish would appear for possibly all the users) accompanied by fitting (for when the first is not present), common and generic alternatives. You’ll find download link in the Unit Interactive’s blog post (link) where you can read all about the document and learn how to use it.

Avoid sans-serif small-caps mishmash.

font-variant property is experiencing its renaissance. No wonder, it definitely does its magic when applied to serif typefaces and tagged along with positive letter-spacing (figure 3.1).

(3.1) Serif small-caps.

Avoid applying this property to sans-serif typefaces such as Arial and Helvetica (figure 3.2). Especially at smaller sizes. If you really have no other option try using text-transform: uppercase first.

(3.2) Sans-serif small-caps.

Embrace the paragraph typography.

Text paragraphs don’t have to look dull. There is at least a dozen different ways to style paragraphs with css. Read Jon Tan’s article on The Paragraph in Web Typography & Design and take a look at the cheat-sheet accompanying the article for more information.

Experiment with different numerals.

This may seem outrageous to some of you but I’ve recently begun to enclose all the numbers I use throughout the posts here at Aesthetically Written in separate spans so I could have more control over their typographic presentation. If you have both Baskerville and Georgia installed on your machine you’ve probably already noticed that I differentiate numbers with the latter. It’s just because the Georgia’s numerals are much sexier than those of Baskerville! Try it in one of your future projects, not necessarily in the same configuration, and — I guarantee — you won’t regret it.

Style subscript and superscript text properly.

sub and sup tags may come in handy in only a few isolated cases. When they do an extra line of css is necessary. Otherwise leading may suffer (figure 5.1).

(5.1) Erroneous default styling.

Set line-height to 0 in order to avoid the leading issues. (figure 5.2).

(5.2) Correct leading.

I hope that some of you enjoyed this article and found the tips listed above useful. I’d like you to know that I plan on making Type O’clock become a series of articles published on a regular basis. Hence, I’d really use a few words of encouragement and/or constructive criticism =) Have a great day and I’m looking forward to hearing what you have to say.

Oh! And all the best in 2009!

1. There’s an almost poetic detailed description of the river problem written by John Boardley’s over at iLT. You might want to check it out.
   http://ilovetypography.com/…/extreme-type-terminology…/ up ^
2. Hyphenator.js
   http://code.google.com/p/hyphenator/
   wp-Hyphenate WordPress plugin:
   http://kingdesk.com/projects/wp-hyphenate/
   up ^
3. In typography, a descender is the portion of a letter in a Latin alphabet that extends below the baseline of a font. Read more about descenders at Wikipedia.
   http://en.wikipedia.org/wiki/Descender up ^
4. Trevor Davis prepared a couple of screenshots illustrating the issue with Helvetica at smaller sizes. There’s also a demo page for you to try Helvetica in your browser of choice.
   http://trevordavis.net/blog/web/stop-using-helvetica/ up ^