Where have I gone.

I know, this is really late. But I wanted to let you know that I have been spending all of my blogging time on bildr. So…. for the foreseeable future, I won’t be updating here.

You can find me here: http://bildr.org/

bildrCode 365days later

If you can believe it – bildrCode is over a year old now. Without any major gaps in development, bildrCode has matured quite a bit. Without looking back it was hard to know how far I had come. But then I gathered all the papers and drawings I had done along the way, and it was easy to see how much I had done, and how far I had taken this.

The project is actually on beta 2 right now, and has really come alive with the recent changes. The system supports file permissions, and a host of more advanced features.

I think it would have been impressive had this been all I was working on, but the entire bildr site is starting to bloom as well, and it’s incredible how much my php SQL and MooTools skills improved through this.

hand of action

I have been meaning to write this for some time now.

Awhile back I noticed something. - Why am I being told to create rollover states for everything on the web? In fact most sites use rollovers, more so than they use active (pressed) states.

Hover around on the web, and you will see that almost anything clickable changes when you rollover or hover on it.

Now move to non-web software and try it. You are actually hard pressed to find hover states outside of the web.

The rollover is all about affordances right? After all, how will you know if you can click on something without it. But the desktop existed long before the web, and we have been doing fine without it. And then you look in the real world, and nothing has such a thing. How do you know you can press a button on your DVD player? It looks like a button. And when you press it, it moves/clicks.

So I know, i know. Hover states do add reassurance of the affordance. But the active (pressed) state does much more than that, as it shows action when you take action. It is very quick, but that adds a ton to people’s belief that they just clicked on something, the active state is software’s nice click feeling you get from pressing a button.

So if you have a website with hover states, and no active states. Do yourself a favor –  Change that hover to an active, and you can keep the reassurance of the affordance by changing the cursor icon to a hand on hover.

Need more convincing/reason? iPads, and other touch systems are becoming much more popular, and the hover state will be a thing of the past. If you don’t have an active state, you can expect your touch-centric users to be frustrated.

And before you call me out on this. I know, I know. My sites doesn’t use active states. My site is old… I didn’t know much better. And I didn’t even make this blog theme =)

Why so slow?

I often wonder why my blog posts seem to be further and further apart, and also more boring. (maybe that last part is just me). Maybe nothing can compete with last year at this time, but my lack of posting makes it seem like im not doing anything. Perhaps just nothing to report, or is it that im just too busy… maybe im lazy? However it is, what am I doing now?

Lately I have been doing one of 2 things. Reading “About Face 3” (Just finished it last night), and working on bildr, mainly from a content point of view.

About Face was really good. I think this is actually the longest book of its kind I have read cover to cover, every word minus the index. It works almost like a textbook for interaction design with a great deal of design patterns and best practices mixed in. I think it really is 2 books, and even though it is split into 3 sections, I think it should have been 2 books.

The first is all about process. What does an Interaction designer do? What is his process? Who does he work with, and how is his job best accomplished. This part of the book I think should be required reading for anyone that wants to be an interaction designer.

The second part should be names “Patterns for great interaction design”. That’s exactly what it is. This last half is all about why things are done a certain way, how we can break out of the rut, and what could be done better.

Wait… I take that last paragraph back. It did have a good amount of how things should be done. But I think it had even more of how things should not be. Why saving should be put down to rest along with alert boxes, and a horde of other things.

So all in all, it really was more about offering problems than solutions. But as a designer, that is what we need. When Charles Eames was asked “What is the boundaries of design?” he simply said “What are the boundaries of problems?” We designers go after problems like kids to the ice cream truck. But as the book points out, the problem here is that we dont see the problems all the time. If you think saving/save as is a good system, why design something different? So it does a great job of showing that.

The second thing I have been doing is bildr. bildr bildr bildr. Seems like that is all I do… right? Sadly right now I dont have too much to show off that is really cool, but I have started entering in a lot of content.

The parts that gets me is that it takes so long, and seems so small. When your project is to build a window, it seems like you work so fast. But when you are building a tower, that window dosnt seem like much has been done.

Small bildr update

Ive been working a bit on bildr lately, but most of the work has been actually inputing data, and small changes, so nothing to really show.

Nathan over at SparkFun was awesome enough to allow bildr to use their content. So Im actually using it as bootstrap content (something to build off of). The really cool thing about it is that I have input about 200 components. After adding them I tagged all of them to build up the tag system, and then went through them and found words in the descriptions that users may want to read more about, and set them as links.

Because they the page they link to does not yet exist, they are added as wanted articles. So the best part is that usually users have no clue what they should write about, but now there is this list they can look through and easily find something they know about.

Affectiva to Tellart

I didnt realize it had been so long since my last post. So to all 5 of my readers, im sorry. Luckily this time it was not because I had nothing to post about, but because I have been doing so much, and many nights it came down to work or post, and I choose the former.

I have been doing a lot on the bildr front. I finally finished some things that I had been wanting to do for some time, but I will wait until another time to do show-and-tell.

Why the post?

Last month Tellart offer me a position at their design firm.

Im starting the new job in just over a week, and though I am leaving Affectiva, it is only in body.

When I started at Affectiva last year I was eager to be this hybrid of developer and designer and I hit the ground running. Soon it became aware that there was just too much work to be done, and we hired a full-time developer so I could focus on the interaction design, and visual design of the software. It wasn’t long before I realized just what 10 years experience and a degree in computer science could do better than my 1 year of dabbling.

Over the corse of almost a year we hired many more people, and soon, everyone had someone similar to themselves working there but me. I was still the only designer. During that time, I dissected many a UI element and reconstructed them in different ways to understand just what was it about the way the pixels align that pleased my eye. In the end, I found myself creating much nicer graphics, but very similar interactions.

This, mixed with the over 2 hours of driving for the job each day, was the reason for my departure.

After graduation I was not ready to stop learning, and in no-way have I. But things have slowed down on some fronts that I didnt expect. I still push my self to near RISD extremes, but without the teachers and classmates, I was playing the same note over and over.

Tellart is an experience design firm just a few miles away from my house. The ability to save 600 hours a year in driving, and be able to learn and work with a very talented group of designers was just something I couldn’t turn away from right now.

The unfortunate reality is that in doing so I am saying good-bye to Affectiva, the company I joined on the day we got phones for the office – before we had proper desks – before we had a logo, or a website. Affectiva is now 4 times the size it was when I joined, has a CEO and some major players. The products I worked on there will truly be ground breaking.

I had my hands in every aspect of design, and almost all of it to this point was by my hands. This is something I will probably not have another chance at for a very long time.

But for now, I focus on life, growth, and exploration.

Scale 9 Grid HTML

The image to the right is the original image. The large image was scaled using HTML and css alone. At first you might not see what was going on here, but take a closer look. The tip, and the corners, the gray part… they didn’t scale with it. It is as if just the center expanded. That is actually exactly what has happened here.

In ActionScript you can scale an image just like this using scale9grid. It is really useful when you want a custom image like this and want it to scale to content. The third image with the lines shows how this works. The image is split into 9 parts. The 4 corners never scale. The top and bottom middle only scale horizontally , and the left/right middle only scale vertically. The middle scales both ways.

So … The large image is actually, the same image repeated 9 times, all placed next to each other to achieve this effect. The corners are easy, they are just CSS background images that never scale. The rest are HTML  elements (wrapper) that are set to the correct size, and have an IMG inside (like this <p><img src=”this.jpg”></p>) that is scaled to fit. This is all done because you can not scale a background image. (Lame I know)

When you scale an IMG, it scales the entire image to fit the set dimensions, but we only want to show part of it, like just the left middle side, or just the middle portion. Because of this, we scale the IMG to be big enough so that the part we need is the correct size, then that wrapper element acts to crop it so we only see the part we need. This is done by setting the wrapper overflow to hidden.

Working demo

Anyways, as of now, this was done by hand, but I think I could make a PHP or javascript thing to automatically do this.

It is ugly but the HTML ends up looking like this: (dont copy this, the ” are all messed up)

<div id="scale9grid">

	<p class="tl"></p>
	<p class="tm">
		<img src="leftWindow.png"/>
	</p>
	<p class="tr"></p>

	<p class="ml">
		<img src="leftWindow.png" />
	</p>
	<p class="mm">
		<img src="leftWindow.png" />
	</p>
	<p class="mr">
		<img src="leftWindow.png" />
	</p>

	<p class="bl"></p>
	<p class="bm">
		<img src="leftWindow.png" />
	</p>
	<p class="br"></p>

</div>

Im Back. But not back

I was on vacation last week, and just got home. But sadly I brought sickness with me.

I had a long talk with a friend (ben) while I was gone that started with the same old question about the “value of software” but soon moved to value in general.

We were at the “The Art of Shaving” store looking at finely designed razors when I asked the saleswoman if I could take a closer look at a razor they had showcased behind glass. I was expecting it to be light aluminum (the finish seemed to be) but was delighted to feel the weight of steel.

So as Ben and I talked while walking around in search for ice cream and creps, and  I mentioned this razor we had seen earlier that day. I was telling him how I was in search of weight in software, (You know, that extra sensory-nudge that adds value to the product) when ben moved it away from software completely. Ben had me take a step back and unknowingly ask myself “why is it that the weight gives the razor value?”. He then went on about how value is only in the eye of the beholder, and is only in the context of your life. The things you associate with value give an item value. But the item itself has no real value on its own. Things you don’t know, have no value to you, and so on.

So the perception of value, right? The razor felt more valuable because it was heavy. But weight is no more valuable than color, unless through society we associate it with value.

So my wedding ring. I looked at a lot of rings before I decided on one. What I got was a very inexpensive tungsten carbide steel band. To me it had 3 things I was looking for. The color, shine, and hardness. I didn’t want  it getting scratched, and I really like the color/look of polished steel. But the cost of it compared to any other metal used is nothing. If I got anything else, it wouldn’t have met the goal of the ring. But it lacks one thing needed to give it a higher price, right? Of course I speak of rarity. Platinum and gold are much rarer, and therefore have higher value, even though they scratch easily, and so on.

But what about palladium? Palladium is a precious metal 30 times rarer than gold. It shines and looks similar to platinum, but is less than a third of the cost of gold. So what we have is something that on paper should be of a much higher value, but isn’t because people don’t see the value in it as they do gold. This is known by Dan Ariely as “The Fallacy of Supply and Demand”

Granted, the weight of the razor played to my memories of weight equating quality, but this is very rarely actually the case, and if we look in the consumer electronics area, it is often is the complete opposite.

I think what happens is that we build personal dictionaries of overly simple ways of determining value in the objects we interact with. It allows us to make decisions about what we want without spending too much time hashing over it. And even though these dictionaries are ofter wrong, and many parts are actually dictated by society, we knowing accept this because it beats spending a week to make each decision. I know that steel is inexpensive, but I still get the feeling of quality.

We as designers use these commonalities about the perception of value all the time when working in the physical world. They help us craft better experiences for our users. So may the problem is just that software is too new, and our dictionaries are just empty.

Then the question becomes: How do we help build the perception of value around software?

it’s a service!

Ok, so just as I’m about to go to sleep last night, it hit me. TiVo is a service. Services are intangible, and the hardware items are just touch points.

So while you may love the service, the connection is with the intangible, and not with the touch points. I even said in the post that the hardware was generic. So it makes perfect sense that I wouldn’t feel attachment to it. After it stopped working, or the service is turned off, that part I love is gone. It’s not like I could keep it on my shelf if I wanted to.

What about my TiVo?

Have you ever used a TiVo? Not a DVR, but a real TiVo? This may be the best example of interaction design I can think of, and it has been under my nose for a good 10 years. (I got my first one when it was brand new).

The tivo is… Well to me it is a system. But let’s break this down. The tivo is a great remote, pretty generic hardware, software running on it, and a subscription service. But when you talk about it, you really are talking about the entire thing. I think regular DVR customers may not understand this, but if you replaced the remote with something generic, you just have a great DVR and lousy remote. If you replaced the software, you have a so so DVR with a great remote, and if you replaced the hardware or service, you have a tivo with an ugly box. I think most DVR owners think of the box as their DVR but tivo is the system not the item.

Just to note. The remote is not special. It does not do anything a normal remote SHOULD do, but it does do something most remotes do not do… work well, and allow you to use the system well.

So anyways… This could be software I really enjoy using, and actually rave about. It has actually made me hate watching regular tv.

But what is it about this that makes it so great to use? When watching live tv, it is completely transparent. Changing channels is actually made easier, as you can read what is on other channels before you leave that one. I haven’t channel surfed since I bought it. But really, when it comes down to it, it is the fact that hitting that tivo button at the top of my remote brings me to a list of the shows I want to watch, and have been recorded for me that makes it great. (I know other DVRs do this too)

So when I turn on the tv, im not doing so because I want to watch just anything, Im turning it on because I want to watch something I like. And tivo turns my tv into something that does just that. So in the end the tivo, actually just makes my tv a better tv, and that’s why I love it.

But… doing this is half the battle. Now that we have enabled the experience, we cant ruin it. We need to ensure follow through for that experience reflection. So this is where the the typical DVR tends to break down. When you begin to watch your show, the tivo software disappears and the tv takes over until you see something you want to see again or a commercial comes on and you want to skip it. Tivo went through such great lengths to make sure that this works so well, you will never notice it.

Fast forwarding on a tivo has three settings of speed as many other systems. But it is when you hit play again that this really shines. Tivo knows that you hit play not when you know the commercials about to end, but when you see the show has started up again. So instead of leaving you a few seconds into the show, it actually jumps back a few seconds knowing your reaction time is not perfect. So when you hit play again, you see maybe the last 2 seconds of that last commercial, and never miss the show. It is these subtle polished areas that make tivo shine.

To recap… What is it that makes it so great? It gets out of my way when I want it to, helps me accomplish my goal faster and easier than without it, enables a better experience, and doesn’t ruin it in the middle.

But sadly, with it being so great, I have had several, and have upgraded through the years.

I still feel no attachment to it.

————————————————————

If you are interested in physical electronic products, and why we lack connection to them, I highly recommend following Matt Cottam – http://www.openarts.org/matt/