Awesome right? I wonder if this has been applied to web applications?

It was freezing the other day at the office, it hasn’t stopped raining since 8am. So I decided to a pour myself a warm cup of tea, It just might hit the spot.

As water dripped down my mug I noticed the heat was switched off. I should turn it on, simple enough right? Staring at the back of the water dispenser I scanned for the switch. There glaring right back at me were two vaguely familiar symbols.

A round shape and a line? which one was suppose to turn the thing on or off? Being human I just went in and satisficed(yes it’s a word) along the way. Now supposedly if this was any other water dispenser turning on a switch would give a visual feedback by activating a tiny glowing light to indicate that it is indeed activated, but this wasn’t an ordinary dispenser, it was broken.

“Which symbol means On or Off? Is it this circle or this line?” Thinking loudly. I know I’ve seen these symbols before, being the computer geek that I am I never really thought about it. Luckily after overhearing my rant a workmate answered me, he said that the line was meant to be a connotation of ON. But how did he know? Well, he explained that growing up he used to help his uncle, who was an electrician, with circuit boards so he got familiar with these symbols

What we thought it meant?

“But what do these symbols mean?” I asked, He also was unsure, this spurred in a long discussion of guesses on what it was suppose to be. Here are some of the guesses we made.

• Could the circle be short for open?
• Could the circle be meant to represent an unpressed button?
• Could the circle be short for Off?
• Could the Line be a pressed button from the side?
• Could the Line be short for Illuminate?

Finally we decided to look it up on wikipedia

What it really meant (wikipedia)

IEC 5007, the power on (line) symbol, appearing on a button or one end of a toggle switch indicates that the control places the equipment into a fully powered state. It comes from the binary system (1 or | means on)

IEC 5008, the power off (circle) symbol on a button or toggle, indicates that using the control will disconnect power to the device. It comes from the binary system (0 means off)

Aha!

Aha! this symbol is based on binary numbers or the Boolean logic! A fine example of the Implementation model thinking, A gush of thoughts came that this mental model should never belong on any mass market product, A simple On and Off label would suffice, there was even lots of whitespace or there could have been more visual feedback to help me understand. Also made me realize that the simplest of appliances has IXD needs.

Then after a few more minutes of thinking, I realized I completely forgot about my tea! Dammit! Anyway my thoughts are captured here anyway.

Designing a Unified Experience

Kim Goodwin is the Vice President of the best UX consulting firms I know of. I found her talk educational plus each section is accompanied with on the field examples. Sweet! This gave me lots of ideas on how I can improve my current process for designing interactions. I must read her book Designing for the Digital Age: How to Create Human-Centered Products and Services
.

Notes

Project Planning Research

• who are the users and what do they really need
• depending on how much you need it
• ethnographic studies
• watch how people in context of they would use the product
• if product doesn’t exist yet use analogous products
• look for emotion and brand context
• pattern what users often see and use in their lifestyle
• spot patterns on most users

Modeling

• how to do people work, whats their workflow today, where can i make it more streamlined
• what information do we need
• check users mental models
• how people imagine the process would be
• modeling in the form of personas
• different workflows into separate personas

Requirements Definition

• what do we need to accomplish for MVP
• storytelling
• scenario persona test then generate requirements
• what do we want our product to say
• write down all the words on a white board about what our product is about / what do you want the product to say
• make experience attributes
• use imagery to evoke attributes (how attributes feel like)

Framework Definitions

• visualize the whole product
• high level sketch, assess cost and feasibility
• prototype
• based on the requirements see the pieces what we need to build
• use scenarios to determine what kind of tools and information people are using at the same time
• use sketchy wireframes
• make visual language studies

Detailed Design

• Documentation of product
• chunking design into pieces for production
• grids/color schemes
• intense collaboration everyday

Implementation Support

While trying to describe why the film that both my friend and I saw was “good” I observed that often the adjective “good” is horribly useless. The essence and beauty of the experience couldn’t be encased in such an undermining word. Often speechless, I try to describe specific scenes or awkwardly rephrasing lines that moved me and unknowingly weaving a story, albeit a sketchy one, of placing my emotions to words and action. 

I find that great stories allow me to project myself in a situation, the refreshing jolt of humanity and spirituality that leaves me suspended in vulnerability.

I must learn to tell stories better or tell better stories. 

After hearing Eric Ries talk about his experience with start-ups and how his method of Build Measure Learn helped him succeed, i wished i had heard this guy sooner! Excited, I immediately shared the same link to my partners at 3 different start-ups.

Being a UX oriented designer I immediately felt the need to nudge the project to the “users” point of view and get affirmation if we are going the right direction and how we can gauge if our product is worth running with. A very interesting debate cropped up, somehow it involved Steve Jobs, Mark Zuckerberg and Bill Gates. I’m sure this Henry Ford quote was sorely to blame for it.

If I had asked people what they wanted, they would have said faster horses.

I love debates with people i trust, you get to learn different points of view especially when both of you are passionate, by passionate i mean sticking to your answer no matter what, and insist on separate points. 

Luckily my friend found a post by Eric Ries, the man himself, talking about this very subject! 

A very enlightening piece of work i would say, go read it if you are having the same argument with your partners. All i know is I’m very excited to experiment on this. Will post updates soon hehe.

What first seemed like a ritual weekend experiment turned out to be jeremiespoken version 3. Such a roller coaster ride the past two weeks have been, from feeling design incompetent to indestructibly awe-inspired then back to depression. At least i finished this and im pretty proud of it. Personal projects always help when im stuck in a bit of a rut. yuck. 

Ah yes my perpetual sandbox. Still need to fix some parts of the site but it’s already 3:11am and i feel lazy. Will do that tomorrow. Been playing around with jQuery with tight single column layouts for content centric information, CSS3 animation as well. 

Try and scroll around and see if you like it, anyway going to bed now.

A little visual exercise fit for your desktop based on the subject of simplicity. Been inspired by Dieter Rams lately, glaring at his elegant design solutions to everyday objects gives me great pleasure, and just look at his sweet muted color scheme!

Download it here

With every new project comes a continual struggle, the conflict between different design styles. The visually complex against the visually simple, the literal against the symbolic. Why would i choose one style over the other or does any of it really matter?

Curious, I had to understand how humans perceive, how we react to design how it affects our behavior. Dipping into the human psyche this wonderful book by Don Norman Emotional Design: Why We Love (or Hate) Everyday Things led me to the right direction. He figured out that there are three levels of Design. Taking advantage of all three levels could produce the highest level of engagement to your audience.

Compare these two websites, one takes advantage of the richness of modern graphic effects while other takes advantage of basic design elements. Which of the two gave you a desire to explore and understand what else was going on in their minuscule corner of the internet.

Compare Deaxon and Made By Shape websites.

Both examples have the same goal though taking varied visual solutions. The first example displays more decorated design aesthetics that gives visual interest while the second example uses abstract design elements to separate or join the content. Finding balance between the two is always a ambitious and amusing mission. 

Like a great story ending, I found out that there aren’t any straight answers to my questions. For now I have come to the conclusion that It really doesn’t matter which style you choose, just striving for a Design that is centered on the message rather than visual aesthetics to give meaningful experiences and engagement is all that you need.

References:

Emotional Design: Why We Love (or Hate) Everyday Things
Understanding Comics: The Invisible Art