New magneticNorth web site

by Andy Polaine on April 30, 2009

in General

mn_scribble_interface.jpg

Great to see magneticNorth’s new website live. Brendan gave me a sneak peek of it yesterday and I love it.

The navigation is very playful and intuitive. Actually it is intuitive because it is playful. You basically scribble a doodle and this makes a mask into which a piece from their portfolio opens. You can then click on that item to view more info about the work or simply make another scribble to look at a new piece. The navigation across the top is a history that you can move back and forth through or reset.

What is nice about the whole thing is that you just don’t have worry about doing anything ‘right’. You can scribble any shape and you can scribble over the top of other scribbles and everything automagically sorts itself out.

Go and have a play yourself and tell me what you think.

[UPDATE: Quite some debate started about this, which I’m very happy to be part of. I wrote a long response, which is almost a post in itself, but decided to leave it in the comments.]

{ 16 comments… read them below or add one }

1 Karl D.D. May 2, 2009 at 1:05 am

Very nice.
I am a super-fan of drawing interfaces :)
And this works nicely indeed.

The only thing that bugs me with Flash drawing is that no one ever bothers to smooth the lines and make them more sketch-like. They therefore always have these sharp edges. It is actually quite easy to do, forgive me for posting code but…

// Determine the next point by averaging the lastPoint and the currentPoint
newPoint.x = (lastPoint.x + thisPoint.x) / 2;
newPoint.y = (lastPoint.y + thisPoint.y) / 2;

// Add the Quadratic curve – control point x1, y1 and actual point x2, y2

path.curveTo(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);

This was actually Java code but the same goes for flash.

The other really cool drawing thing I have seen in Flash recently is this:
http://soytuaire.labuat.com/
A bit on the heavy side but well worth the wait.

2 Andy Polaine May 2, 2009 at 11:01 am

The Labuat piece looks quite a lot like Rob Hodgin and Eric Natzke’s ribbons stuff. I find it okay for a while but I really admire the way mN have used it for something.

The lack of curves might be deliberate to make sure its fast.

3 Gary Burgess May 2, 2009 at 12:52 pm

The paths appear particularly angular in this case as the mouse is only sampled when it moves 20px from the last point – if we sampled all the mouse moves the XML generated when saving the state to the server would be massive, and there might be some slowdown when doing the “shape tween” when opening the content items.

I admit I hadn’t thought of trying to smooth out the drawing using the quadratic bezier method though! I just quickly tried it – it looks good, but there are a few problems that would need sorting. I have an idea how we can get sort those though, thanks for the suggestion.

4 Andy Polaine May 2, 2009 at 2:57 pm

Quadratic beziers huh? Of course, of course… :-)

5 Karl D.D. May 2, 2009 at 3:33 pm

I see what you mean Gary, wacom tablets especially can return a lot of points.

Probably the best way would be to draw the line to the screen using that flood of all the points, then when the 20px threshold has been cleared, register the new smoothed point for the server XML, and finally update the display getting rid of the flood of points and replacing it with the new smooth curve.

This way it will seem responsive (no more waiting for 20px worth of movement) but at the same time will produce a small set of points.
Using this technique it appears to the user like the line is smoothing itself, but you will need to test with different thresholds and drawing speeds to make sure the line smoothing feels natural.

6 dylan May 4, 2009 at 10:31 am

6 out of 8 australian designers who expressed a preference disliked it
http://forums.australianinfront.com.au/ShowPost.aspx?PostID=335154

dylan’s last blog post..Capatcha EP now as free mp3

7 Andy Polaine May 4, 2009 at 10:53 am

Ha ha, I see AIF’s level of critique is still at the level it always was.

Most of them are missing the point, but that’s okay, better to polarise than to produce something average that nobody has an opinion about, which is what so much Aussie design does.

8 dylan May 5, 2009 at 3:28 am

i agree with most of them tbh, its hard to guage what the goal of site is, maybe to win awards, thus get more work.
I cant see that many clients spending time there, so maybe its a designer’s site for other designers.
I agree that http://www.red-issue.com uses the draw interface much more successfully.

dylan’s last blog post..Capatcha EP now as free mp3

9 Andy Polaine May 5, 2009 at 8:31 am

Dylan – I completely disagree. The Red Issue site’s navigation is far less playful and far less intuitive than the mN site. It basically uses the gestural commands of Firefox et al, which means you have to learn a set of gestures only to move around in a fixed way. The strength of the mN site is in its much more freeform nature and I find it a lot more engaging and pleasant to use.

I can’t say whether the mN site is a site for other designers or not. It does demonstrate their approach and style and they’re not afraid to show clients that. Some clients wont get it and they are probably not the right clients for mN. My jab at Australian studios is that they too often go for the safe route that is nice, but not particularly original or inspiring. That’s not always the case, of course. But I’ve seen it more often than not in my time there.

10 dylan May 8, 2009 at 3:12 am

quoted from that thread..
“A site designed to attract new business or engage someone in order to make a transaction should not make them think about how to find/do things – that’s not taking the end user/key audience into account. We call sites like this ‘for designers’ because usually it’s only other designers that really see the cleverness of it all….. the peep in charge of finding a studio to work with, looking for information, or something to buy, more often than not finds them annoyingly frustrating. “

dylan’s last blog post..Capatcha EP now as free mp3

11 Andy Polaine May 8, 2009 at 8:06 am

I understand exactly what you are saying and I understand the arguments those in that thread are putting forth, I just disagree. The reasons are more complex than I have space for here, but they have to do with a set of false but oft perceived dichotomies between work and play, seeking and finding, function and aesthetics.

The idea that you should be able to quickly and efficiently find what you are looking for isn’t always valid. That is a pure task oriented, tool-based approach to interaction design and ignores much of the experiential process of interaction. Yet experience is the fundamental differential between interaction design and any other kind of design.

If you are trying to find a formula for DNA, making a banking transaction, or some other very task focussed activity, then it makes sense to try and streamline the process and for the interface to disappear as much as possible (though this doesn’t happen much, despite all the interaction, experience and usability people involved in such projects).

On the other hand, if you are trying to demonstrate the kinds of experiences and alternative ways of thinking about interaction design that you can come up with to potential clients, then it makes sense to provide them with one of those experiences. Games and play are pleasurable not because you know all the rules and know exactly how to win. In fact, if that is the case, they’re usually rather boring. Finding out what you have to do is where a large part of the pleasure comes from playing them. But this isn’t something confined to games – most people have the experience of installing a new piece of software, which might be quite tool-based, and not bothering to read the manual before diving in. There is pleasure to be had finding out what the system is, what its affordances are, how the designers have gone about solving problems, even trying to break it. This pleasure isn’t just an additional nicety, it’s the difference between people using one application over another and can be the difference between entire brands and operating systems. It’s certainly the difference between Windows (very task and work oriented) and the Mac (aesthetically oriented in order to make doing tasks more pleasurable). Those little jiggly icons on the iPhone when you change their order or go to delete them, or the smooth logarithmic friction of a scrolling element in a Flash app are all examples of this.

It is entirely hypocritical, not to mention arrogant, when designers, who both employ and enjoy all these techniques themselves, assume that they are the only ones who will “get the cleverness” and that the average Joe won’t. Whilst plenty of designers have iPhones, to continue that clichéd example, the vast majority of iPhone owners aren’t designers. What the “average Joe” (who isn’t so average) enjoys most are all the “cool bits”, not the functionality alone. It’s not that the iPhone can surf the web or has different applications that makes it so successful alone, it’s the way it does it that is the big leap. Functionality, usability and aesthetics are inseparable, especially in interaction design.

I stand by my original post about the intuitive nature of the mN site. In order to explore it, you just have to scribble. I hardly have to learn any navigation and the elements that I do have to learn are pleasurable to learn and explore. So I want to explore more and go deeper into the site, which is what makes it intuitive and playful and intuitive because it is playful.

If you narrowly think that all people care about doing is completing a task when they are looking for an interaction design agency, you’re only understanding about a quarter of what makes up a person’s experience. The reason I find the ‘critique’ on Australian InFront so lacking is because it isn’t really reasoned critique at all – on what research, information or experience is the above quote based? What is the “transaction” that DesignRonin is alluding too? It’s not a site for Amazon.com, there’s no web site shopping cart. It’s knee jerk reaction to something that, frankly, most of them wish they had done in the first place and from designers who are playing the usability card they don’t believe in themselves because it’s the trendy thing to do. And this from someone whose own site looks like an error page for which they can’t be bothered to create anything better and out of the other three sites linked to from their page, one has broken image links and another throws a Invalid Hostname error.

Usability and functionality come in many forms and they are part of a more complex mix of elements that make up a successful piece of interaction design. They’re not just buzzwords that are cool to say in a forum without any sense of understanding behind them.

Going back to the purpose of mN’s site – it’s there (I assume, albeit with some inside info) to attract the kind of clients that are going to want a different way of thinking about interaction, web and Flash design to most other agencies. If it self-selects by not attracting people who want a site that looks like every other, then that’s probably not a bad thing.

You have to pitch your wares and style and be clear about it. There’s no wrong or right there – some designers focus on very clean, simple HTML and CSS sites and that’s great because there are plenty of clients that want that. Others focus on overblown motion animation and that’s fine too, because there are clients that want that too. Others focus on interesting and novel ways of exploring interaction and that’s fine too.

There appears to be an assumption in some of the In Front thread that interaction design is a done deal, that we now know everything there is to know about it and there are a handful of approaches that work and that people follow. I know many of the founders of In Front and know many of the people on it. I also know that the age group is relatively young, even though they might have several years experience in the industry. This comes through loud and clear in much of the troll commentary and the lack of knowledge of interaction design over roughly four decades that it has existed for.

Despite those decades, interaction design has only really been an area that most designers have engaged in – in the way that we know it – in the last 18-20 years. It is still an extremely young area and there is still an enormous amount to discover and work out, not least because the technology and audience experience are changing all the time.

12 RayM May 8, 2009 at 1:13 pm

I think its always good if people critique something but sometimes it gets said in a tone whereby someone sounds like they are posing as the authority on the matter rather than being more constructive. http://thinkvitamin.com/features/hey-lose-the-pedantic-negativity/. I like the responses andy as they are fully considered and not simply one line of “your wrong”, you explain why you believe those things and it would be good if many could follow that method.

I agree with you on this and feel the learning curve is part of the experience of discovery. I would also be interested in how the people who made the comment that you shouldn’t have to work it out feel about the iPhone or macbook mousepad. For me both of those have a very slight learning curve in exactly the same way as the site however once you have made that discovery they become to many instantly more usable as a result. I miss the macbook trackpad when I go back to pc laptops that said I know my mother would probably hate it in comparison.

I think its often better to create those opinions than be middle of the road to all people and not really create any passion in anybody.

13 Andy Polaine May 8, 2009 at 2:54 pm

Thanks Ray. I agree that critique is important – it’s the only way that things really move forward. There’s no right answer to this stuff either – it’s very much dependent on context and the usability mantra, whilst important, is often misunderstood and trotted out when it suits people. The point you made about the mousepad is spot on.

14 Joseph Hallahan May 9, 2009 at 9:46 am

Andy and Dylan, brilliant discussion. Andy I really appreciate your involvement in the discussion, and I agree with your thoughts on the site. While I’m not certain they nailed it (and thats completely subjective) I, like you, appreciate the direction it took and I completely agree that this is not a site ‘for designers only’. I’ll stay tuned to your blog and look forward to more interesting conversation.

15 Andy Polaine May 9, 2009 at 10:34 am

Thanks Joseph. I think we’re probably all a long way off from nailing it – even Apple screw up and they’re one of the best in the business.

(Nice portfolio site by the way).

16 Dan Oliver May 13, 2009 at 3:05 pm

It’s a cracking site, and a perfect showcase for the innovative work the mN peeps are renowned for. With so much homogenised design out there, it’s great to see something new and playful.

Previous post:

Next post: