Archives for category: coding

I’m terribly sorry for not writing. Let’s chalk it up to Mercury Retrograde, shall we?

A while ago I watched a short documentary called “The Science of Sex Appeal” which understandably focused part of its discussion on visual attraction, and how most people can come to a consensus about faces that are more attractive. We find the attractive faces generally more proportionate, but proportionate to what? Well apparently, faces that conform to the Golden Ratio, or “Phi”, are universally considered more appealing.

Here’s how it works:

This proportion is found more easily in faces most people consider attractive; for example, the ratio can be demonstrated by the length of the face: “a+b”, proportionate to “a”: the distance between the tip of the chin and where the eyebrows meet.

Then I started wondering how this might be applied to website design. Apparently, I am not the first to have considered this. Take for example, the homepage for Life magazine, which won a Webby in 2011 for “BEST VISUAL DESIGN – AESTHETIC”:

Now let’s apply an overlay of the Golden Rectangle over the same image of the Life homepage.

The results are interesting:

FYI, the transparent golden rectangle I used was from Joshua Garity's blog:

A great template for web design that’s universally appealing! I wonder if such a thing is now being taught in schools…

What’s more intriguing, though, is the question WHY this particular ratio is so aesthetically appealing to our brains? Humans have applied it in various examples of art, architecture and design, the Fibonacci sequence (which is an approximation of the Golden Ratio), but the ratio itself is beyond ourselves and our creation.

Approximations of “Phi” occur almost everywhere in nature, the proportions of the human body, and the dimensions and orbits of the planets in our solar system. But it’s more of a template, not necessarily a reality. It reminds me of the story of Plato’s idea of perfect forms, as well as the Allegory of the Cave. “Phi” is perhaps something to strive for, but reality (and from a more practical point of view, the needs of the business) may dictate differently.


I know, it seems like I’ve abandoned you, mon petit blog. I haven’t! I’ve just been waiting to write the perfect post.

Recently, Tim Minor at UX Booth published a post about memory recall as studied by psychologists, and how this could apply to websites:

The research suggests that the simple act of walking through a doorway creates a new memory episode, thereby making it harder for us to recall aspects from a previous episode (such as why we came into the room)!

In terms of user experience, this is like saying that every time a user clicks to a new page on your website, they forget whatever they’ve just seen or learned on the previous page. It’s also a sign that we have extremely short attention spans! If memory serves me (and it may not), The Design of Everyday Things talks about how good design creates “contextual memory” so that people don’t HAVE to remember everything; they only have to remember how to figure it out. Like opening a door — if the handle is designed properly, most people quickly process whether they should push or pull the handle to swing open the door in a given direction. Their brains create a memory in that particular context, even if they’ve never seen that particular door (or style of handle) before.

How I see numerical digits in my mind's eye.

The question is, how do you create contextual memory for the users of your website? Our memories originate from strong sense impressions, so logically one could argue that to build contextual memory online, you have to invigorate the user’s senses. The most obvious method is through visual stimulation — form and color — but I’d argue that the most memorable websites probably employ a combination of strong visual + tactile sensation (through moving your mouse, perhaps?). When you use your mouse to hover over a drop-down menu, you *almost* feel the sensation of it. Almost. Tactile sensation may be more connected to the field of haptic technology, but I’m sure we’ll soon be seeing applications (and devices) for it soon in the context of online user experience. One great example is the Wii (and other) game controllers, how they vibrate or rumble when you move a certain way within the game — they create a more realistic, memorable impression.

But I wanted to say something a bit more personal about visual memory. About 10 years ago, I learned that I had a particular condition called synesthesia, where I see graphemes (numbers and letters) in very particular, permanent colors in my mind’s eye, and even when I’m reading text on a page or screen. It’s hard to describe, especially because I always assumed everyone saw things the same way I did. At a recent lecture however, I met several other synesthetes with similar or varying types of sensory mixing.  The author/lecturer Maureen Seaberg discussed how researchers estimate that about 4-5% of the population has this experience, although some people’s brains combine music with color, or shapes with taste. Many of us argued vehemently about our color schemes for the letter “A” (it’s always light blue for me), and found comfort in our shared experience.

My own synesthesia has helped me create certain memories, I believe. Because my characters are always colored the same, I can more easily remember numbers, or tell when something is misspelled, or wrongly coded. I think it enables me to fix code bugs faster when I’m scanning the page, and in the past it definitely helped me find errors in my college research papers when editing. There’s also a fascination for me with poetry, and the way certain words appear on the page. I know e.e. cummings explored this quite a bit, so perhaps he also had it.

The BEST, most sensible, UX-friendly website would perhaps be one where I could PERSONALIZE my own graphemes/characters according to how I see them. That would make reading or typing or coding so much EASIER! A girl can dream, at least (sigh).

Sorry I’ve been away — moving and traveling — aren’t those life’s constants, anyway?

InteractiveWall from Festo HQ via A List Apart on Vimeo. The wall reacts to the presence of users, just like responsive websites should.

Last night B and I re-watched Inception, and I was thinking this morning that it probably wasn’t as popular or deemed Oscar-worthy as it could have been, potentially because the film didn’t use universal archetypes to create its dream space. The few characters that were fleshed out had flaws and attributes, but they weren’t necessarily the kind that most people identify with. It’s the universal that draws people and allows them to engage with a film or product, but in order to access the universal, you have to truly know your users (audience).

Along this same note, earlier I was reading about responsive web design, and how web designers need to be aware that they don’t know much info about the user; and many times, they don’t have a clue what kind of device or screen resolution the user uses.

The idea is that you now have to design for every single variable and difference — for devices that don’t yet exist, that will react to users who may not exist yet either!

So perhaps the lesson is that the future of web design and user experience is HOW to create and architect a (white) space that allows the User to dream his own dream — to fill a universal space with his or her own particular subconscious. Easy, right?

I recently heard about a company that uses neural networks and software to predict movie ticket sales based on words in the movie title and plot synopsis.

This has got to be where most things are headed. My initial thought is, this is exactly what’s missing from website development! Granted, people use SEO methods and meta keywords to improve their Google search rankings, but what if there was a method of analyzing the design elements and user experience of a website as a predictor of website a) sales b) returning users and c) customer-initiated viral marketing?

That would be a great way to sell design AND improve user experience, and it could be industry-specific. Perhaps one design element works better with online clothing retailers than it does with luxury car sites, for instance.

Glad I signed up for that artificial intelligence class at Stanford!

What is “white space”?

White space is commonly referred to as the space between things, such as words of text, or images, or radio frequencies. For a long time I’ve been interested in what’s left out of conversations, design, or print. What are those unspoken messages that we process, information we read between the lines, or visual cues we intuit without actually seeing?

As a web developer, I’ve become very interested in how a user experiences a website, without knowing what’s behind the scenes. Code itself contains a series of spaces (or non-spaces) that define its characteristics, how it displays on a page, and the functionality it enables. When I’m coding a widget or description, I must pay attention to the visual spacing the code will create for the user, as well as the spacing of the code itself (so it remains valid and parses). Luckily, however, as a developer I can validate or parse my code before it goes live; if the spacing is incorrect, I receive an error message:

A website user, unfortunately, doesn’t have the option of validating the messages they’re receiving; they have to make sense of what limited information they’re given to make purchases, find information, or communicate with others. How does a website make a user feel? How does a user figure out how to use a site and its tools? Can we define it?

When I was in college, a few of my English courses focused on post-modernism and deconstruction. One of my professors loosely defined “deconstruction” as explaining or recognizing what’s not being said or talked about in the story. What’s the elephant in the room?

In this blog I’ll attempt to deconstruct — or decode — what’s happening for users in terms of usability and emotional experience. You know, the sound of silence.

Thanks for reading.

%d bloggers like this: