brunobergher::blog

Dutch publisher Onomatopee has in their catalog this interesting poster/pamphlet:

Text by Max Bruinsma and design by the Strange Attractors.

I find it interesting how the attributes of each of the companies which logos are mimicked highlight a few of the many characteristics attributed to the concept of God: Lego brings up God’s aspect of kindness, perhaps, while IBM suggests an all-knowing, designer-of-huge-things God.

Oddly enough, I’m not sure of exactly how Google’s God echoed upon me. I think the logo design itself isn’t as strong as the brand name for Google as it is for older companies, or companies that rely in a heavier way to the visual presentation of their names (as Coca-Cola most certainly does).

I hope this is isn’t offensive to anyone. : )

* The simple header in Onomatopee’s website is nice; very ‘soundful‘ in a strictly typographic fashion.

I signed up for Twitter a few minutes ago (I’m arriving a bit late to this, I know). So far I have no opinion on the service/phenomenon itself, but there’s one thing I can tell. When loading contacts from other services, this screen is presented to you:

And this kind of witty copy writing (the ‘popular’ thing) is inviting in a whole different level than unusual. It can make you like the service before you even start using it. And a user with a positive stance towards the application is as good as it gets for the first step for a successful interaction.

A friend sent me today a link to the just-redesigned website of Boston, Massachusetts base advertising agency Modernista.

All of the content of their website is actually off-site: text in Wikipedia, videos in You Tube, stills in flickr; the site is just a tiny red JavaScript-based menu with an iframe behind it.

Creative director Gary Koepke says in an interview to Creativity:

“There’s such a challenge for ad agencies to be known as digitally savvy and understand what’s going on the medium. We wanted to prove to people that we understand a way that we can have a transparent, open source and highly successful site.”

Well, I think they nailed it.

This approach has at least two great qualities:

• It absolutely expresses how up-to-date the company is, not in terms of visual communication (which should be a commodity in their playing field), but in respect to deeply understanding the way information finds it’s way around nowadays and how open to comments and participation any enterprise must be to succeed in this community-driven world.
• This is a unique solution to their problem, which can’t quite be ‘borrowed’ or ‘be of inspiration’ to the competition. I mean: there’s nothing that can be similar to it: it’ll be either exactly the same or something entirely different. Anything in the middle would be seen as a blatant rip-off. Achieving this in an environment in which stuff is copied all over fast and easily is quite an accomplishment.

I look forward to see how this echoes around the web.

Jeffrey Mindich contributed to this post in the Freakonomics blog over at the NYT website with an interesting story about Taiwan’s solutions to traffic accidents.

About a year ago, in order to reduce the number of accidents in some intersections in the country, they introduced traffic lights with countdowns of two kinds, one in which the light counts down to zero until it turns green, in the other until it turns red.

What’s really interesting is the difference in the results with the two varieties of lights:

• In the first one, countdown to green, the number of accidents was cut in half;
• In the second one, the number of injuries doubled.

People clearly speed up when facing a green light about to turn red, but get calmer when they know in how many seconds it’s going green, and are less likely to gun it.

This translates easily to interfaces. A while ago Chris Harrison published a study called ‘Rethinking the Progress Bar‘, which shows that a progress bar that is slower towards the beginning of the process and faster towards the end is perceived by users as much faster than a linear progress bar, even if the actual time spent in both are exactly equal.

I think these are two practical examples of the same principle:

1. When showing progress to users, make it seem as fast as possible, even if it brings along a slight distortion of the actual progress;
2. Provide the user with practical checkpoints in the process, to discourage her from giving up on a computer-intensive or remotely processed task that invariably takes some time.

Either way, never forget you have an implicit deal with the user of never lying to her: the goal here is to improve perceived performance, not to fake benchmarks.

(This is the first of what I hope becomes a series of posts on books I finish reading. I hope any of this ends up being useful to someone.)

I don’t plan to review Steve Krug’s Don’t Make Me Think: A Common Sense Approach to Web Usability in any new way; 411 people have done it so far in Amazon.com alone. Considering at least 100,000 people have already read this, you can take it for granted that it’s a good book. I guess I’m writing to convince you to read it as soon as possible (if you don’t have already, of course).

Upon receiving it at home, I was surprised to see how thin it is: the Brazilian edition which I bought (I’ll get back to it shortly) is only 127 pages long; it seemed like a very introductory, superficial book. I guess I’m more used to judging a book’s by it’s length than I thought, and got punched in the face with that unfair assumption later on. In fact, the author himself aimed to conceive something ‘that could be read in a single airplane trip’.

Let me just tell you this: just 50 pages on, I was already quoting Krug all day long in discussions at work. His ideas are so simple, make so much sense and are so generic that, if you’re designing/developing interfaces (web-based or not) you’ll see yourself constantly in situations where Krug can help you. His common sense approach just becomes something you take with yourself, and put before the many obscure considerations people end up having when discussing project details.

It’s also interesting to see how the examples in the book—which are only two years old in many cases—are already outdated, while the principles he shares are more up-to-date than ever. His ideal definition of a home page has become the standard template of Web 2.0 sites (big, clear company statements with big call-to-action buttons and links); and even though Krug barely mentions web-apps in the text, everything he writes just fits in perfectly to them.

Summing up: huge recommendation, for anyone involved in sites/software design/development/management/conception.

* Note on the Brazilian edition: if you’re a fellow Brazilian, avoid the AltaBooks edition at all costs. Really. Run from it like you’d run from the devil. Page layout is terrible, with no margins whatsoever, reaaaaaaaaaally long sentences, the footnote references are all screwed up, a lot of bad translations. In many cases the book tears apart the usability principles Krug is explaining in that very page. I’m thinking of warning him about this, if can manage to get in touch.

If you can read the English in this blog, you deserve a good edition—as I believe the original one is. So go for it.

I’m really proud to officially launch my friend and fellow designer Liana Nigri’s portfolio website, fully designed and developed by yours truly. The site has actually been up for a week now, but I just managed to sit down and write a post about it.

Liana approached me in need of a very simple website that should showcase some of her projects as both textile and graphic designer, while focusing on the former. She has a great body of work on textile patterns developed in some big Rio de Janeiro fashion houses as well as her current studies in London. Her main goals was to have a place where she could point new contacts to, and to have something she could edit on her own.

The result was this cute little website, highly interactive and inviting, which, as far as Liana has told me, is doing well towards some very specific goals of hers.

Backend developing was made as simple as possible—considering the big proportion of images vs. text content—and I chose a basic PHP/XML structure to handle the data. There’s a simple experimental admin tool (Liana is my friend, she told me I could test some new stuff with her) with lots of drag and drop functionality, which I plan to write about in a future blog entry. In the next few paragraphs, I’ll try to write a brief summary of the main considerations of this project.

Getting the design right

Liana’s line of work is mostly of colorful, vibrant, complex images, full of detail and interesting shapes and arrangements. Almost all of these images are repetition-based patterns, which can only really be fully understood and appreciated when visualized in side-by-side repetitions.

I realized then that I should create a design that was the least obstructive as possible allowing Liana’s work to shine without being obscured by the site interface. The result was this very simple interface, very application-like, which allows the user to see the patterns in a variety of sizes, zooming in and out as desired, and dragging them to get the best view. And even allowing the main window to be dragged around to get the best framing possible.

Since the site design itself was so minimalistic (in both quantitative and qualitative senses), the execution was pretty simple, with some nice use of CSS and lots of unordered lists, in 100% valid XHTML, no question about it. The central point to execution was adding interactivity.

Getting the interaction right

In order to have the level of interactivity I wanted, I certainly had to turn to JavaScript. Flash was available but was not adequate in some other aspects, mainly time. And considering the website has a 100% visual goal, the use of JavaScript became a non-issue regarding browser accessibility considerations.

There was no doubt I’d use the great jQuery library, to which I’m a huge fan, but there seemed to be a lot of UI to develop. jQuery UI to the rescue! This is a great set of extensions and plugins to jQuery which allowed me to include some advanced functionality, such as the resize slider and the background dragging. There’s no question my job would be infinitely harder without this.

jQuery also helped me add some animation to parts of the interface, and the AJAX-candy in the contact form.

From that point on, the frontend process became basically of adjusting some minor details, and getting on to developing the backend and administration.

Handling of images and javascript files

Liana’s site is very easy on the server: no database access, no complex calculations on the back end; but there are a lot of heavy images (to get the details right, some pictures are 500+ KB) and a lot of JavaScript, which could make the site very heavy to load. Fortunately, I developed these two simple scripts, on which I plan to get back to in a later article, which negotiate this heavy lifting.

One of them handles the resizing of max-size pictures in the server to the needed smaller sizes, generating cache files which can later be served directly, with no image processing on the server.

The second one handles just-in-time, server cacheable cacheable, javascript compression, which groups all of the needed scripts and then compacts them using Dean Edward’s packer port to PHP by Nicolas Martin, dramatically reducing the final file size and the number of requests needed to load the page. There are some current issues with browser caching with this script, which I intend to correct soon, and then release here.

Summing up

It’s been a pleasure working on this project, and I hope it goes on to fulfill it’s owner goals. If you have any comment, question or find any bugs, please don’t hesitate to comment here or contact me.

So I finally got to try Buzzword. And believe be: at least my first impression is that it’s really something amazing. A sleek, intuitive interface, features that are both handy and easy to use, document sharing, fast loading. You know, it’s all that. The reasons why Adobe has acquired Virtual Ubiquity, the company behind this software, are cristaline now.

Some features I’d highlight so far:

• The interface, of course: it’s not only beautiful, but very intuitive, hiding what doesn’t need to be used at the moment, while making it very easy to get to the other features whenever needed;
• Real fonts: you’re not stuck with Times, Verdana or whatever’s bundled with your OS. The starting pack offers Adobe Garamond, NewsGothic and Minion, among others all in Opentype format. And the Adobe acquisition surely has much more good things to offer in the typography department;
• Offline editing;
• Easy to use commenting system, ready for multiple users;
• Simple but comprehensive history for tracking changes in the document;
• Very good printing quality and fidelity to the original document;
• The insightful vertical scroll-bar, which shows page numbers;

And all of these in a seamless, ‘just-feels-right’ way that GoogleDocs has not be able to achieve so far. The only feature I missed was paragraph/character styles. For the remaining, it does a remarkable job on the set of features that matter for 90% of the users.

Microsoft, watch out. The online office is just around the corner, and Adobe is going strong at it.