May 19, 2008     3 Links of the [period of time]

1. This video is beautiful.

2. This woman is awesome. (And so is her company.)

3. This Flash tutorial was written by me.
(See how I snuck that in there? But seriously, I’m very excited about it.)

May 4, 2008     Registering events on an empty div in IE 6

IE (6 at least, not sure about 7), has this behavior where it won’t register events on divs that it sees as “empty”. This came up in a project where I need to use invisible, positioned divs with event handlers on them.

But you can get around it, as long as the whole div can be invisible. The way I’m doing so is by using the star hack to add an IE-only style to the div. This style gives the div a background-color, and sets the opacity to zero. That way, the div is invisible to the user, but according to the browser there’s still something “there”, so it will properly register events.

The style would look something like this:

* html .activediv{ //star hack targets only IE
background-color:#FFFFFF; //background color makes the browser register events, like onclick
filter:alpha(opacity=0); //opacity filter hides it from the user
}

Again, I haven’t tested this in IE 7.

April 28, 2008     OS X Widget-style rotation in Flash

For my first Flash assignment at work, a designer asked me if I could work up a version of the OS X Dashboard Widget effect, where the widget rotates in 3D around the y-axis, to reveal a set of controls or additional information on the “back”. The project turned out to be more difficult than I originally thought, especially since I wanted to make it easily reusable and customizable. But hey, what better way to learn?

Since I haven’t figured out yet how to embed Flash objects in WordPress (any tips? Please?), you can go here to check out my example. Just click on the little “i” icon to see it rotate.

http://www.bri-lance.net/Flash/WidgetFlip.html

An extremely large portion of this code, probably about 80%, was taken from this tutorial by Barbara Kaskosz at the wonderful website FlashandMath.com. So lots of credit goes to them.

I basically adapted their code, which works with bitmaps, to handle any group of Flash objects. At “spin time”, it copies those objects into a Bitmap, slices up the bitmap into 1-px wide vertical slices, and distorts those slices according to some neat equations that I got from their site. (This is necessary because you can’t do a free distort on Flash objects with ActionScript alone.)

I’m throwing out the code in hopes that it might be useful, or at least interesting, to someone else.
The ActionScript file can be found at http://www.bri-lance.net/Flash/WidgetFlip.as,
and the .fla that I used can be found at http://www.bri-lance.net/Flash/WidgetFlip.fla. Every line in the ActionScript that you might need to change to customize the file for your own use is marked with a comment beginning with //CHANGE, that explains what the line does and how you can customize it.

Some ideas for usage:

1) Display data on the front, configuration or customization controls on the back (this is what my example shows)
2) Charts and graphical data on the front, tabular data on the back
3) Summary information on the front, more in-depth information on the back
4) Two disparate views of the same data

Enjoy! (I know I am.)

April 21, 2008     Meta notes

So in my last post I promised some words on why I haven’t been posting for awhile. I’ll keep this short, since blog meta chat is usually just painful.

For quite awhile I was writing mainly about UX stuff, design thoughts and speculations and what-ifs. But then I switched roles at work and started doing more programming. And the more programming I did the more I thought about programming, and the more I think about programming the less I analyze things from a UX angle. (I’ve come to the viewpoint that it’s possible to do both, but not at the same time. They require two such radically different ways of thinking — the spatial and holistic vs. the linear and analytical.)

It’s like when you’re writing fiction a lot, and you get ideas for stories constantly. But then you stop writing so much, maybe you get busy or whatever, and soon the story ideas no longer come. My point is, we think most about what we’re focused on, even when we’re not actively focusing on it.

So I hope to start posting some things that I build, like Life, and maybe some how-to’s as well. I have another Flash item that I’ll be sharing within the next couple of days. But right now I’m really just learning a lot (mainly ActionScript and Ruby on Rails), and having fun creating weird, out-there UI for the web.

Looks like I’m a programmer after all…

April 14, 2008     Fun with Flash

Long time no post. I’ll explain why, soon.

In the meantime, I’ve been occupying myself by, among other things, learning how to program ActionScript3. (I’ve been using this excellent book as a reference.)

I used to implement Checkers whenever I was trying to learn a new GUI language, but I got bored with it. The new Checkers? Conway’s Game of Life.

Check it out! Click the mouse and move it around to “draw” a starting pattern. Then release the mouse button and watch it mutate.

Go to the Flash page.

February 14, 2008     Fiction

Fragment from a Job Board, 2018

Local media firm seeks an experienced Playlist Creator with a demonstrable track record and a strong portfolio of playlists in support of different moods, seasons, and tasks. Contract position with competitive hourly wage, flexible hours, virtual commute. Must already have commercial licenses with all of the Big 5 music download catalogues. (Will reimburse weekly for a la carte tracks.)

Desired skills:
BA in Music, Psychology, or related field
3+ years of experience in Playlist Creation, preferably freelance or agency
Experience using BPM matchers, Logitech Brain Simulator, Microsoft Mix, and iTag
Fluent in Spanish and/or Chinese
Ability to communicate with clients and create necessary documentation (personas, sample galleries, mix/flow charts)
Must know the difference between J-Pop, C-Pop, K-Pop, and B-Pop, and have a well-defined opinion on the pros and cons of each


More short fiction things in the next couple of days. I have at least 2 in my brain right now.

February 8, 2008     Bags bags bags! It always seems like you’ve got too many bags…

The good folk at Adaptive Path had an interesting recent blog post on experience design and sustainability.

I’d like to add an item to their list of ideas:
Don’t punish users for making sustainable choices.

Case in point: I’m trying to stop using plastic bags right now. I have a nice roomy grocery bag of laminated canvas, that I take with me whenever I go to the grocery store. However, I almost always run into a problem when I try to use the self-checkout machines.

The checkout machine has a clear model of what it wants the user to do: take the item out of the basket or cart, scan it, and put it in one of the plastic bags next to the machine. My preferred way of operating is to take each item out of my bag, scan it, and then either set it aside or put it back in the bag. But if you deviate from the model in the slightest, you get beeped at, error’d, and scolded to no end. I’ve had one of the machines even tell me that I needed a cashier’s permission NOT to put my item in a plastic bag!

(I honestly don’t understand why they even bother to track this. I mean, you’ve already scanned the item, it’s already registered on your bill. Why do they care what people do with it afterward?)

Sure, all of this can be gotten around. That’s not the point. The point is that it adds friction, makes it harder and less pleasant to “do the right thing”.

Let’s flip this on its head and see how we could change the checkout machine to influence people to not use plastic bags.

First, ditch the bagging requirement (duh). Let people do what they want with their stuff, after they ring it up.

Secondly, keep track of how many plastic bags people are using, and display that. If you charge for them, as many places are starting to do, you could display a running total of how much the person would save by using their own bag — maybe even the total over a year, if they use a store card that can identify them. Or you could display something on resource use, or just a persistent reminder to please bring in your own shopping bag next time.

Like before, this all seems like fairly small stuff, but. Just as the small choice against using plastic bags can affect the larger environment, small design choices can affect the user, even to the point of guiding and shaping behavior. And that’s how interaction designers can encourage sustainability, in any system where the screen mediates real-world consumption.

Now then, if we could just get around to fixing public transit…


Bonus points to anyone who got the title reference.

January 23, 2008     Some thoughts about monitors

This is another “what-if” type of post.

Monitors, in general, are getting bigger, and screen resolution is getting higher. (For example, the monitor I’m writing this on right now is 1920×1200 pixels.) The 800×600 screen is largely a thing of the past, relegated to technophobes and poor school districts — the rest of us seem to have readily moved on.

If monitors keep getting bigger, what new design challenges might that bring? Instead of struggling to cram too much functionality into too little space, might interface designers start facing the opposite problem, of being able to expose all of the functionality when maybe they shouldn’t? I could imagine it becoming a larger effort to direct and manage the user’s attention appropriately.

Let’s take an extreme example. What if monitors that were 3 feet diagonal became commonplace?

I’m willing to bet that full screen mode would become something very different. Even on my 24-inch monitor, I almost never use an application full-screen; it becomes too big of an area to look at. If I expand a website, it becomes hard to read. Instead, I use the extra space to layer auxiliary programs and windows (iTunes, AIM, the Dock, tool palettes, etc.) so that they are available without any extra effort.

I could imagine a program that really needs your focus having to dim or blank out other parts of the screen. Would full screen mode then mean that only part of the monitor gets used, only as much as we can take in at one glance?

Or maybe single screens start taking on some of the capabilities that multiple monitors have now. Maybe you get the ability to define different areas of the screen and assign different programs to them, the way people have email on one screen and do work in the other. So the monitor stops being a unified space and starts to become a segmented group of areas - like multiple desktops on Linux, but simultaneously present.

Of course, that gets into a whole different windowing system. Could you expand and collapse different spaces? How would you arrange them?

Alright, my brain’s starting to hurt. And even with all that, I still wonder about the effect on people’s attention. In order to combat information overload, I’ll bet programs will have to find a way to say, “Pay attention to me, and not anything else,” when the users need them to. In fact, that could become the biggest challenge of all.

January 15, 2008     Abort, retry, fail?

I just noticed something interesting.

I’ve been reading some research lately about how those typical popup messages don’t really work all that well, because many people click confirm without reading the message. But Firefox does something interesting, at least in one dialog: it has a time-delay of about 5 seconds before the Save button becomes enabled.

In the Firefox extensions dialog, the button includes a timer that counts down from 5 to 1, after which it becomes enabled. When I saw the timer and noticed that it was at 3, I then looked up at the top of the dialog box, probably to figure out a cause of the delay. This reminded me of the application that I was installing, and caused me to at least briefly skim over the text. Not that I could recite the dialog or anything, but without the timeout I probably wouldn’t have even looked up there at all.

I wonder about the usefulness of this technique to other dialogs where you really want to make the user read the message. Making it so that they can’t automatically and thoughtlessly hit “Yes” is probably a good idea. On the other hand, you have to balance this against annoyance, by not making the delay too long.

Still, it seems like a neat idea, and one I haven’t noticed anywhere else.

January 6, 2008     Vroom vroom (Cars and accessibility)

Recently I was having a conversation with my mother that got me thinking again about cars. She mentioned that she and Dad are thinking about getting a bigger vehicle, like a small pickup truck, because they’ve both started to have trouble getting in and out of small cars.

This led me to wonder if, given the current aging trend and people’s tendency to stay healthy and driving longer, there might not be a developing market for vehicles that are specifically tailored for older folks.

For example, as mentioned above, many older people have trouble getting into and out of small cars, and prefer vehicles that sit high off the road. However, too often the only alternative for a higher vehicle is a huge, inefficient gas-guzzler. I wonder if we might not see a growth in vehicles that are designed to sit high off the road, but are still relatively light and fuel-efficient.

Since many older folks have a fixed income, the reduction in fuel costs could be very beneficial. (And of course, it would also help reduce carbon emissions.)

Another possibility is that we could see options and add-on packages specifically dealing with accessibility.

For example, just as you have large-print books for to folks with poorer vision, maybe you could have a dash with larger numbers and simplified displays. That would be an interesting problem in information design, figuring out how to fit the necessary information, while making it as readable as possible. Maybe some information, like RPM, gets moved to somewhere else, and the key information like speed and fuel is made much larger in the display. And maybe there are added notifications if, for example, you exceed a certain speed.

Additionally, many seniors have trouble with fine motor control. What if you could upgrade your car to have larger, easy to grasp dials for the stereo and climate controls? Again, this may require the rearrangement or removal of less-important buttons and features, but in the case of many seniors that might be worthwhile for greater ease of use.

Many of these changes would not only improve the driving experience for seniors, they would also make the road safer in general, by decreasing the potential for distraction, such as fumbling with small buttons to change the radio, or increasing the rate of access to key data, such as fuel levels and speed. And with increasing numbers of seniors on the road, that could only benefit everyone.


BTW, I hope to start posting more regularly again. (Of course, that’s always easier said than done.) Coming soon: some thoughts about larger computer screens and how they change the use of full-screen mode. Also, happy New Year!

« Previous PageNext Page »