Posts categorized “interface”.

Flex Design After Gumbo

Flex 4 a.k.a. Gumbo will treat the major pain point in Flex development–the workflow between designers and developers–by allowing Flexers to easily make complete, detailed component skins as well as non-standard interactions and effects.

And what about Flex design? Will it be impacted? It’ll be a year or more before we know, but this post makes two predictions:

1. Flex designer will fulfill the old unfulfilled dream of Flash designers that UI will become more game-like. Flex will also supplant a lot of Flash development while still avoiding Flashiness.

2. More important, Flex designers after Gumbo will focus on incorporating the best of hypertext, the dominant and transformative mode of the web that Flash and Flex designers tend to discount. More… »

A Self-Explaining Interface

A self-evident interface is always Plan A…but a self-explaining interface is a decent Plan B. Here is one in action. (Follow the purple arrow…not optimized for start up yet.)

“As simple as possible, but no simpler.” For my current Flex project I reached this point pretty quickly. Inspired by improv, it is a chat site that creatively orders group chat. There are roles (Host, Quizzer, Conservative, Blind Date, etc.) for a variety of scenarios, mostly drawn from pop culture. Chatterers vote for a scenario leader, who plays one role and picks others for the remaining roles.

For a game, it’s not complicated. For an interface, it is. Some sort of help was required. More… »

A Stupidity-Preserving Interface

Googling is one of those things that has so saturated my life that it now seems trivial. How did programmers operate before Google? Images flit before the mind…IRC, books, co-workers…but seriously, for someone who searches hourly, the mind boggles.

If you live with Google for a while, the controversy about the Web’s inclusivity–how can we sift the smart from the dumb?–is useless. When I was a stupid programmer, I found a lot of slightly-less-stupid blog posts, tutorial and articles that spoke to the stupid in me. When I become less stupid, other voices beckoned. The web grows with me.

Lately I’ve been wondering whether the web should preserve even more stupidity. When I really look at the hours I rack up programming, far too many of them are consumed with stupid mistakes, especially when starting fresh on a new kind of task, language or project. Google is still helpful then, but all too often I find myself grinding through some stupidity alone.

This is partly due to the fact that the set of smart, conceptual mistakes is a minor subset of all possible mistakes. “It’s” v. “Its” is downright hi-concept… “accommodate” v. “acommodate”, “accomodate”, “accommadate” is nearly random in comparison. Not even the web can preserve all the permutations of sheer error.

More… »

Designing Pet 9: Transition Animations 99% Useless

In my last post, I reviewed the code architecture of my playground site. In this post, I’ll explain its design.

I fear that the site will have all the charm of exposed pipe for the average Flash designer. My fear is based partly on my primitive graphic-design skills, but mostly on the unusual nature of the interface.

Here is the interface:

site

More… »

back-button design-pattern options for Flash

I always figured it was laziness when Flash designers omitted the back button…until I considered implementing one myself. Then I realized that this is another case where the wide-open freedom of Flash leads you directly to ground-up difficulties.

The back-button works so naturally in a browser because HTML presupposes one kind of transition: one page replaces another. Take for example this navigation strand in a hypothetical medical site:

body.html–>organs_heart.html–>cells_heart.html–>cellParts_lining.html

Because pages are essentially fungible nodes in a network structure, users can swap them with ease. This holds for backwards-and-forwards tracking as well as other types of navigation–jumping back in the history, or up to the home page.

Now imagine that a mop-haired designer is charged with designing a Flash version. The result: As a user rolls over a picture of a body, the body becomes transparent. Clicking on an organ zooms it and brings up text at the side. Clicking on links in the text provoke a pop-up with a model of a cell. Clicking on selected parts of cell fades out the body altogether and reveals longer texts…etc cetera.

More… »

Yahoo redesign: return of the frame?

Everyone is pulling in the same direction: the web application, but nobody is quite sure where we’re going designwise.

Yahoo’s portal redesign is a milestone: the first major long-standing site to take definite, Ajaxed steps from hypertext to web application, and it’s made me review some very basic principles.

What is hypertext? It’s a networked cluster of pages. Some pages are full of links to other pages, other pages are end nodes of content, and still others contain both links and content. User navigate by bookmarks, or by climbing down hierarchical branching, then climbing up those branches with back button clicks.

What is a web application? Our first guess is that it will approximate a desktop application, that is, a stable interface that users can manipulate rather than a series of pages that users can jump through.

So, for instance, the Yahoo redesigners use accordian menus that resize when content comes up, preserving the interface and available choices.

This is just one possible solution to a more general problem: you have content, then you have more content. If this isn’t one page after another, what is it? Displacement, appending, overlaying, etc?

The Yahoo designers also use tabbed windows, in which tabs instantly bring up different content in the same window. The lack of refresh feels good, very good, better than I expected. It’s like a Windows desktop application, obviously, but on the web. I wonder if this isn’t the slinking, sidewise return of the frame, a site-within-a site, this time tabbed instead of scrolled?

complexity v. simplicity, Take 153

Inspired by Chang Heavy Industries, I’ve been experimenting with RSVP (Rapid Serial Visual Presentation), which flashes words or images in a rapid sequence.

So I’ve been wondering, what kind of picture is grasped most readily–a line drawing or a bitmap?

The research indicates that our minds turn the continuous bitmap known as seeing into a series of line drawings, so one might expect line drawings to be grasped more readily, since they cut to the chase, as it were.

I’m not so sure. The mind might generate its line drawing more quickly from a bitmap than a pre-existing line drawing.

Maybe a morass of details provides multiple entries to a pattern. Take the face, for example. As soon as we recognize a nose, we can process the details and mentally construct the rest of the face rapidly. And–importantly–the same goes for any individual feature.

So maybe the details aren’t helpful because they are complete, but rather because they provides redundant, start-anywhere access to a pattern.

Details as pattern traction…as a lover of elegant and simple design, I’m resisting this right now.

touching computers, a costly Cintiq

The designs I've been playing around with lately have all put navigation controls at the bottom of the screen (like the Mac Dock).

I was wondering why. A hypothesis: As I've become more comfortable with computers (I'm a late convert), I've started using keyboard shortcuts extensively, so in placing controls at the bottom of the screen, I am in essence putting them within "hand's reach," as if the proximity of the pixel-created buttons to my flesh-and-blood hands mattered.

Before, when I was less comfortable with the keyboard, it might have made more sense to put navigation up high…perhaps because the controls would meet a horizontal eyebeam..or users start reading at the top. (A web page being a "page," after all).

I think, however, that even inexpert users long to touch computers directly, rather than have their interactions mediated via the mouse.

Last year I bought a Cintiq. Given that I was scraping by, it was a huge expense, and totally unjustified except in the sense that I know I'll be doing Flash or something Flash-like for the rest of my life.

I've used this device to help me learn to draw…and, BTW, to impress anyone who happens to come by my apartment.

Here is the inevitable result: Peeps are fascinated by their ability to touch screens directly…and WITHIN ONE MINUTE, they will make this mistake: with the Wacom pen in one hand, they will press the screen WITH A FINGER of their other hand, as if it were an ATM screen.

Clearly, touching is primordial.

When I was considering a Cintiq, I asked an illustrator at an ad agency where I was working what he thought. He was against Cintiqs for 2 reasons: 1) your hand gets in the way (it's like actual drawing this way…your hand blocks the picture you're working on), and 2) your hand gets tired (again, like actual drawing…it's quicker to jerk a mouse with your wrist).

I love my Cintiq and you'll have to pry it from my cold, dead hands, as Moses used to say, but I found out that the illustrator was spot-on…and think touchable interfaces will always be limited.

Still, as a designer, I'll design with the urge to touch in mind; it matters even when there is no touching.