LinkedIn’s Weird UI Shadows

linkedinshadow.png

Is it just me or does anyone else find LinkedIn’s new design tweaks weird on the perspective front?

This rounded-corner box has a couple of random shadows at the bottom. The impression is that the bottom corners are lifting up, but the box remains square and the top has no shadows. Logically, that can only mean that the background curves away from the box, except it has no gradient or shadows either.

It really niggles me for some reason and does my eyes in like some crazy M. C. Escher picture. Or am I being too anal?

SVA to offer Interaction Design MFA

sva_logo.jpg

New York’s School of Visual Arts has just announced that they’re offering a Masters of Fine Arts in Interaction Design as of Fall (or Autumn as we Brits quaintly like to call it) 2009.

It will be chaired by Liz Danzinco who co-conceived the course with Steven Heller. The impressive faculty line-up includes: Christopher Fahey, David Womack, Jason Santa Maria, Karen McGrane, Khoi Vinh, Paul Ford, Matt Owens, Rachel Abrams, Jeffrey Zeldman according to Liz’s post about it.

Zeldman alone is worth signing up for. I wonder if they’ll be uploading them to the SVA iTunesU account? (Account? Site? Podcast? Station? - What do you call it?).

Design is Money - ATM Design

ATMs in Germany are lame, I have to say. They’re slow and clunky and appear to be designed by software engineers rather than UI designers.

wellsfargo.jpg

So I wish interaction designer, Holger Struppek, Design Director of Hot Studio, was working here. He has written a explanatory piece for Physical Interface about the re-design of Wells Fargo’s ATM machines by Pentagram (where he was at the time of the design).

It’s quite a nice example of a classic interface design process for an interface that has a lot of pressures on it: multiple locations, different hardware, security issues, time pressures, accessibility, broad audience.

The jury in the comments seems to still be out about how successful it is – I find the grid of buttons a bit visually cramped – but it’s much better than the previous version. However, this part of the article about the colour-scheme favourites during user testing caught my eye:

Blue seemed to be a color that was genuinely pleasant to look at, and even though it was “off-brand”, everyone could live with it. It provided great contrast to the red Return Card button and the yellow alert boxes. During user testing, we presented participants with our color choices and got the same results: “It’s calming”, “I like the blue sky”, … and so we went with it.

Surprisingly, Wells Fargo recently switched the UI to the current tan color scheme. I don’t know what prompted that decision, but it does bring it back in line with their brand.

Surprisingly? Not really. Some brand managers will always want their brand colours to be in your face however ugly they are. Note to brand managers/marketers: If your brand colours are important enough to throw user testing out the window and infiltrate the UI, remember to choose some decent colours for your brand in the first place.

Maybe ATMs should look like this:

wwtbam_gamescreen.jpg

Why Good Looking Error Messages Matter

baggage_error.jpg

Almost anything involving computers falls over once in a while, but it’s how you handle it that makes all the difference.

I spotted this in Newcastle airport the other day. I see a crappy broken Windows system almost every time I travel. I imagine travellers going through Heathrow’s Terminal 5 saw quite a few too.

Now, not only could someone have done a better job of handling the error on the application coding side, it’s also such shitty branding for Microsoft. Every time I see one of these I think: “Microsoft products can’t run enterprise systems without falling over - I wouldn’t let them near any project of mine.”

Given the massive wads of cash companies spend on those inane glossy business-management-enterprise-big-dick-corporation ads you always see in airports, this would seem to unravel the band promise it all pretty quickly. With all the new tech, it’s only going to get worse.

(Sorry about the crappy picture – I wasn’t too sure about taking photos in the airport. You know, just in case I got shot by the British Police or something).

Information Design for NGOs

visualisingadvocacy.jpg

The Tactical Technology Collective have released a great little PDF booklet online called Visualizing Information for Advocacy: An introduction to information design.

It was designed by John Emerson, who writes the blog, Social Design Notes and is a pretty good intro to information design for anyone, not just advocacy organisations.

Because of the subject matter, it demonstrates very well how good presentation of information can be very powerful indeed. It’s packed full will lots of great examples. from the now famous Hans Rosling work on debunking myths about the third-world, to John Snow’s mapping of cholera deaths in London, made famous by Edward Tudte in Envisioning Information.

You can download it from the Tactical Technology Collective page or head straight to the direct link to the PDF.

Iron Man’s HUD and interaction design

The current issue of Desktop has a snippet from my interview with Dav Mrozek Rauch from The Orphanage talking about their work on the HUD for Iron Man. If you click on video and then “Run Before You Can Walk” in the widget above, you’ll get a reasonable taster of it.

One of my favourite parts of chatting to him was hearing about the interaction design issues that came up in terms of the relationship between the suit known as Jarvis – the computer that Downey Jr.’s character, Tony Stark, interacts with – and Stark. For example, what should come first when his eyes look in a particular direction? Is he looking at something and then the HUD responds, or does the HUD show him something and he looks at it?

“We would just get these plates of him in front of a green screen and say, ‘Okay, now he’s looking to the left, what should he be looking at on the HUD? Put something cool in.’ But no matter how cool the thing you put in it’s not going to look right or seem real unless you know what story it should be telling.”

“I asked John Favreau and he said, ‘He’s having a conversation with Jarvis, it depends on who’s asking the question’,” says Rauch.

“If Tony asks a question then Jarvis responds, if Tony is flying and he’s hit then Jarvis throws up some information and Tony looks at it. Once I started looking at the shots like that it became so obvious. What was really interesting for myself and the team is that we weren’t just making visual effects, we weren’t just doing design, we were filmmaking and we were making stories and doing it in a very collaborative way.”

It’s an interesting set of interaction issues to deal with and they’re only a tiny bit in the future. We’ve all seen disastrous versions of this with Microsoft’s Clippy, after all.

I also found the discussions they had about interface colours and design approaches insightful:

“Amber is kind of the 80s and cyan is the 90s, what’s the colour of the future going to look like? What’s the next iPhone or Motorola going to look like? We really had to pull out all the stops for the Mark II and then think about how to make things more simple for the Mark III, because that’s how design usually works. It’s starts out complex and then gets more simplified.”

In midst of the searching for the perfect user-experience I think we forget how influenced we are by fashions and also how fashions and Hollywood movies affect audiences’ and users’ mental schemas of interfaces – think Minority Report and multi-touch, for example.

In a few months I’ll be able to post the whole interview here – Dav also chatted about some of The Orphanage’s commercial animation work and their experiments with a kind of 2D/3D hybrid.

But for the moment go and buy a copy of Desktop!

3M Interface - Reverse Multitouch

3m_interface.jpg

My brother, Matt, just e-mailed a link to this interface on the 3M website. Given the multitouch hype at the moment, it’s quite a clever little riff on the theme.

Basically it’s as if you are standing to the rear of a multitouch screen. Your mouse controls the finger movements of the person blurred out in the background and a selection does the old two-finger click-and-drag-larger movement that seems to have become a multitouch standard.