Visual Language Week 2: Signage and Information Systems

This week I read the six-part Slate article The Secret Language of Signs found some signs that were successful and some that were complete failures and disgraceful embarrassments  and I fixed up one of the more pathetic signs to my liking.

I also rediscovered an incredible resource for icons called The Noun Project. Which is where I got the lovely icons adorning this post.

Broken    icon_37330 Signs

Useless. Contextless. Factually erroneous. Illegible. Irrelevant. Confusing Misleading. Ugly. Outdated. Creepy. Smelly.

These are just a smattering of insults I’ve personally hurled at bad signage. Yes, some of them are hurtful and, one could probably argue, childish. But so what? Poor signage and thoughtless information systems are frustrating timesucks (note to self: add “frustating timesuck” to list of insults for in/animate objects).

Chances are if you’ve noticed signage it’s because it caused confusion or problems. Good signs are like fine service at a restaurant or international spies: their job is done properly if you don’t notice them doing it.

Here are a few examples that I spotted this week of poor signage.

“The Foreigner”

Before you call me jingoistic or insensitive, please keep in mind that the assignment was to observe and report bad signage.

ReorderYouPhone_edit

Spelling and grammatical errors can render an otherwise fine sign laughable.

 “The Novel”

Here’s a scenario: I’m new in town. I arrived in NYC on a red eye in the early morning hours before color’s breathed into the sky. I’ve barely had time to change clothes and grab coffee. But here I am on the subway. I’m focused on one thing only. Which is getting where I’m going. I don’t have time for a litany of do’s and don’ts which seem like common sense to 99% of people.

Here’s another scenario: I’ve lived in New York for over a year and a half and I’ve never even noticed this sign before I was literally assigned to look it.

RulesofConduct_small

It’s too much information for a sign that’s trying to convey a simple code of conduct. (That’s why I’ve taken the liberty of re-designing it below.)

My Fix

Sometimes simplicity is the ultimate complexity.

RulesofConduct_Edit_1

I understand that this doesn’t explicitly cover all of the rules laid out on the original sign. And that’s kind of the point. This covers a broader and yet somehow more specific set of rules. The short, to-the-point copy is even more no nonsense than the long list. It’s also not so patronizing.

In any case, here’s the paradox: the people who need to understand that sign are the least likely to read it.

Attributions:
Broken Light Bulb by Gregory Sujkowski from The Noun Project
Sign by WARPAINT Media Inc. from The Noun Project
Sign by Murali Krishna from The Noun Project

Week 2: Animation in Processing

Circular Trajectory / Orbit

My initial idea was to have a series of small ellipses traveling around a large circular trajectory at different speeds, so as to create patterns around the trajectory.

I thought a elliptical orbit was a simple enough concept that I could knock out fairly quickly and then spend time creating interesting patterns and interactions.

Not the case.

rotate() v Parametric Equations

Initially I used rotate() to move the ellipses. But this was limiting. It seemed that this would rotate everything in the canvas as I added new elements.

The solution I came up with was to define the rotation of the orbital ellipses  around the circumference of a circle. To do this I would need an equation that would map every point around the circumference of a given circle. I did some research and discovered parametric equations.

These are the complementary equations I used :

x = (cx)+xr*cos(a)
y = (cy)+yr*sin(a)

  • x: the x-cooridinate of a given circumference point
  • y: the y-coordinate of the same point
  • cx: the x-coordinate of the ellipse’s origin point 
  • cy: the y-coordinate of the ellipse’s origin point 
  • yr/xr: radius of the given ellipse
  • a: measured angle

Here is the final sketch:

This theoretically allows me to have objects orbit independently of each other; i.e. I don’t have to rotate the entire canvas to create an orbital motion. So in the future I’ll be exploring implementing multiple independent orbits, relational orbits, and parametric equations that describe other shapes besides a ellipse/circle.

A Visual Analysis of the Last Cover of Transworld Surf

September-2013-Cover_crop copy

This is just one (and happens to be the last) example of the re-design that was undertaken for Transworld Surf by Wedge & Lever. You can see their case study here

Grid

Sept2013Cover_grid2

The cover’s grid is broken into four equal vertical columns and three major, but unequal, horizontal rows. Plus there are a few equally spaced gutters dividing and padding the space between sections. This white space gives a super clean, stark look to the cover. Which was appropriate because this was the magazine’s final issue. (Hence the image of an intense wipeout. At least they still had their sense of humor.)

Hierarchy

Sept2013Cover_hierarchy

1. The first thing that catches your eye is the big, blue image of the guy going over the falls. The implied motion of the image draws your eyes down to…

2. The high contrast “Party’s” that’s cut off. Looking at the cover you catch a glimse of the red at the top too and your eyes are drawn back up there to the iconic Transworld Surf logo and the realization that the “Party’s over.”

3. Despite being so small, this bit of type actually stand out and gains some gravitas because it’s given so much white space. Plus there’s finality in the simple visual reference to a headstone.

Typography

 Din OT Black is my guess for the logotype. (Based on a tip-off from a font search site.)

I’m guessing some lucky art director whipped up a custom font for “Party’s over.”

Color

Sept2013Cover_color

The main colors are high contrast: white, black read. The other colors come from the blues and the greens of the photo.

‘The Art of Interactivity’ by Chris Crawford

“I choose to define [interactivity] in terms of a conversation: a cyclic process in which two actors alternately listen, think, and speak.”

Interactivity as Conversation

I think Crawford’s definition of interactivity is swell. I also agree with his assessment that two (or more) actors are key for the process to work. However, I think there’s a more important factor tucked into that definition: “a cyclic process.”

Here’s where it really comes together for me. With a cycle we go from the more binary Action → Reaction (Speak → Listen; Listen → Think; Think → Speak, etc) to a more complex network of cause and effects. Especially if the actors adjust their rhythm of listen, think, speak in accordance with outside factors.

The best conversations never follow a prescribed structure. It’s never listen, think, speak. The thinking is going on constantly. And speaking frequently slides into something closer to yelling. There’s an element of unpredictability to it. You might spiral off into a tangent, go off topic, only to find a new perspective on what you had just been discussing.

Interactivity should be fluid. And dynamic. It should feel natural. And it should allow and encourage discovery. Just like a great conversation.

An Aside About the “Interactivizing Step”

It’s painful when Crawford mentions the interactivizing step in the design process. Coming from an advertising background, it’s all too familiar to here “how do we make this interactive?” As if it’s only a matter of sprinkling new, delicious and nutritious Interactivity Flakes® on whatever the idea is. When, in reality, all that’s actually being said is “how do we get people to click faster/stay longer/post on social media harder?”

If I hear “interacting with our brand” one more time, I’m going to throw a box of Interactivity Flakes® at a wall. According to Crawford, and, you know, common sense, it’s impossible to interact with a brand. A brand is the made-up face of an otherwise faceless company. A ghost putting on a sheet to answer the door.

There’s no conversation. No listen, think, speak. Only sell, sell, sell. (He’s eerily close to the future when he posits that laundry detergent boxes will soon proclaim “NEW! IMPROVED! INTERACTIVE!” Think what they/we did/let happen to organic.)

Untitled 2 (Self Portrait in Processing)

At It Again

That last self portrait was too static for my liking. I wanted something more dynamic. Something that would capture the true power and underline the essence of my hypnotic gaze.

Screen Shot 2014-09-06 at 12.02.31 AM
I explored several different versions of me shooting things out of my eyes.

Combining my learnings heretofore I was able to use variables and the random call to create the illusion of a colorful and everlasting stream of energy pouring out of my eyes. (I couldn’t figure out how to get it to restart automatically upon reaching the limits of the canvas. Or to get said energy to shoot out of my eyes in real life. But I was able to get it to restart on mouse click or key tap.)

Prepare yourself.

A Brief Reply to ‘A Brief Rant on the Future of Interaction Design’ by Bret Victor

‘Vision Matters’

Victor’s right. About a lot of things. But first about that Microsoft ‘Future Vision’ video at the top of his brief rant. It’s not all that visionary. It’s a design exploration at best. And a huge waste of money on motion graphics at worst.

(Although, actually this was probably a marketing piece much more so than any indication of what Microsoft R&D is working on, Future Vision-wise. It was probably designed by art directors in the marketing department and not user interface or user experience professionals. Which makes the video’s relevancy moot. But, at least, it’s provided us with a really interesting place to start thinking about what we want from our tools [cue: echo SFX] of the Future. )

If movies are any indication, than futuristic has always meant simpler. And simpler has meant flatter and sleeker. As if everyone designing the future has a limited palate of ideas to work with. Eventually everything is pressed into one thin sheet of glass and then that vanishes altogether and we’re left with some sort of floating projection to swat at. At one time these hardware and UI designs were visionary. But now you’ve been communicating with one of these visions for years.

Maybe it’s time to rethink simplicity. Is opening a jar simple? Yeah it is. Of course…that’s opening a jar and not sending an email or color grading an image or sequencing music. But the idea translates: it’s simple and it’s a specific interaction to get a task accomplished and it’s no where close to swiping a screen with a finger.

Giving Us The Finger

Victor makes the observation that almost all of these interactions have been reduced to the use of a finger. And really, just the tip of a finger.

“Hands feel things, and hands manipulate things.”

Why is this when our bodies are so capable? We have an amazing ability to sense and decode feedback from the word around us. Weight, thickness, friction, density, balance, temperature, texture, etc. These are the world’s ways of transferring information.

This Proverbial Wallets Project from the MIT Media Lab is a great example of using dynamic object properties to convey information about the world. It might seem odd or just an interesting exercise, but from Victor’s perspective, an inflatable wallet is way more of a window into the future than the flat pieces of glass we’re used to.

Untitled (Self Portrait in Processing)

Processing

Processing is a programing language. It also comes with its own development environment. Which is a convenient place where you can write a program, compile it (or, convert the programmatic code into machine language, e.g. 01100101 00101110 01100111 00101110 ) and run your code. It also has libraries that allow you to call functions that would otherwise be a pain in the ass or impossible to write into your own program.

Week 1 Assignment: “Create your own screen drawing: self-portrait, alien, monster, etc. Use only 2D primitive shapes…”

We begin with our canvas.

Screen Shot 2014-09-04 at 12.35.25 PM
This would produces an 800 x 800 pixel canvas.

I thought a grey square might be a little boring. Drab. Uninspiring. Dull. Call it what you will. So I went shopping on the Processing Reference site. I came across the background function. One of the examples demonstrated how to pull in an image as a background. That sounded interesting. So I did.

Screen Shot 2014-09-04 at 12.57.16 PM
Code to pull in an image as a background.

Screen Shot 2014-09-04 at 12.57.06 PMThis background is objectively awesome. (It’s a glitched-up American Flag I made using a pretty incredible tool called GlitchMap.) Keep in mind that background is a “basic color function” and therefore this is a totally legal move. Now that we have our canvas, the artist emerges and prepares to do its art.

I chose to attempt a self portrait…or, rather the self portrait  organically emerged from the mind of the artist (me). Screen Shot 2014-09-04 at 1.26.30 PM

Screen Shot 2014-09-04 at 1.26.34 PM

You can see there’s an ellipse, a few quads, an arc, and a triangle. Placing everything on the canvas using x,y coordinates is fairly easy one you mentally set the bounds of whatever size your window is. There’s are a lot of minor tweaks, a few pixels up or down, left or right to get your shapes where you want them.  You can see that I started to play around with the stroke and strokeWidth functions a bit too.

The arc was a pain in the ass. At first I couldn’t get it to show because I was putting the final 2 floats (start, stop) in as numerals. I saw they need to be in radians…which I was under the impression were the standard numerical measurements of an arc. But boy was I mistaken. They need to be entered as text using a measure of PI. I get it the what now, but I’m not so clear on the why. I’m gonna probably need this explained at some point.

Side note: (And this might eventually be pointless once we move on from static 2D images, but) it would be cool to see a a dynamic set of coordinates next to the cursor as you mouse over the sketch window (e.g. when in screen grab mode on a Mac). That  would make it easier to know where exactly you’re trying to place things.

Next, I added in some small ellipses and used fill to add some color. Screen Shot 2014-09-04 at 1.44.54 PM

Using color to really accent the mood of the piece.
Using color to really accent the mood of the piece.

At this point the broad strokes are all there. It’s expressive. It’s intriguing. It looks exactly like me. Now it’s time to go in and put the finishing touches in. Really get granular and add in the details that are going to make this piece great.

All about the details.
All about the details.

So I put in a lightning bolt. Which obviously represents the raw, elemental power of code. And because lightning bolts are cool.

C.Z. Nnaemeka

Some Thoughts on Power

C.Z. Nnaemeka, author of the article The Unexotic Underclass, spoke yesterday in our first Applications class. She gave a short, apt presentation entitled, Some Thoughts on Power. It was a simple, honest reminder that we are lucky to be here.

She’s right. We’re crazy lucky.

She posited that despite whatever smarts we possess and however hard we’ve worked and whatever privilege we may or may not come from, there’s an undeniable aspect of luck that’s led us to ITP. Just based on the volume of applications, we know for a fact, that for every one of us there are at least 10 others (probably a lot more) who are as smart or smarter, who’ve worked hard or harder and who have the means and the ways to attend as well. But we’re here. And they’re not. We’ve been given this power. And they haven’t.

Let’s not be assholes about it.

Let’s practice empathy. Let’s think beyond the 4th floor. Let’s find problems to solve, not make them up. Let’s be uncool. Let’s not play into the scene. Let’s listen intently. Let’s consider the Other, the Different, the Marginalized, the Disenfranchised and the Invisible. Let’s make people care.

Let’s press our luck.