ESCAPE VELOCITY

1 - Ugh.. you would throw down the gauntlet when I'm trying to get three projects out the door by the end of the week. :-P

I know how I'd do it conceptually, but I haven't built it. Does that count?

2 - LOL. I didn't mean that as a gauntlet, Charles. I just meant that if some of the stuff was obvious, I didn't want to have to detail it all. And I'm more interested in seeing what people actually ASK about in this case than simply covering everything.

For instance, there's an interesting indentation technique on the "THIS STUFF" section. There's a couple of ways that this might be feasible, but the approach I used is actually pixel-wise.

I suppose I should point out that this form is fully fluid. The screenshot is about 700px wide, but I've blown it out to 1400 and it fills the screen nicely. I took a shot of it here { Link }

Obviously a good deal of it is also in my presentation. I just find myself relying more and more on border controls to tweak to perfection, and I want to see if people notice and/or like the technique.

3 - I did some posts on rounded, folded, etc. borders a while back, but I wonder if you saw the one on adding text to your border. That is kind of slick if you want to either add a copyright or annotate the table somehow. See { Link }

4 - Yeah, I remember when you posted that, Ben. I wish IBM would tell us the rules for how they expand the bounding box. It's EXCEEDING difficult to work out by trial and error. For instance, one technique that I didn't post can be seen here { Link } where I've done a grooved rounded border. First let me say, this is a HUGE pain in the neck. Second, if you look closely, you can see some artifacting on the right side that I can't get rid of precisely because I don't know the rules for this image border behavior.

That being said, a cooler technique for that text overlay (and it would be nice to see the source image you used for that) would be as a section header that identifies the bordered content. That's a very web 2.0 styling technique, and I've been meaning to get around to trying it.

However, my anal retentive nature keeps kicking in, and I can't bring myself to do it by actually embedding the text into the graphic. I really want to figure out a way to do an overlay on a Z-axis with a layer, but I haven't been able to coax that into working just yet. :) But then you could actually put, say, a combobox over the border's edge. That makes for some pretty interesting bounded progressive disclosure techniques.

5 - Well, I guess there's always one more way to do it, right?

{ Link }

6 - Nathan, you're not anal retentive. You're a freak of nature. I just wanted to get that out of the way.

A lot of the stuff you're showing is cool, but can you give any use cases that would employ it? It's some interesting proof of concept work, and it is amazing that you can do some of this in the Notes client. I'm just not sure of the usefulness. Oh, and I'm a little concerned by the amount of work required and the maintenance burden it imposes. I don't get to bill for my time.

7 - The usefulness, in my opinion, is dependent upon the value a given organization places on improved perception. A company ditching Notes in favor of Web 2.0 apps simply because they look more modern - and I daresay there are CIO's out there making decisions solely on that basis - is going to spend a heck of a lot more money on the migration and ongoing maintenance than they would if they just allowed their Notes developers more time to spend on interface development. Trouble is, because Notes is such a rapid development platform, users tend to get spoiled by (and therefore insist upon) quick turnaround... then whine later that "Notes is ugly". The sad truth is that a prettier interface increases the likelihood that users will embrace a given solution, and users that embrace a solution learn to use it more rapidly, which makes them more productive.

8 - I should have shown you some of the progressive disclosure tricks I've been working with when we were at Lotusphere. I'd like to see what you could do with them. I'm better at developing the tricks, not so good at turning them into good looking designs.

9 - Charles, I'll have something for you tomorrow that's a concept demonstration where this technique is directly useful. Basically, it's a data-driven tab field concept that will be easier for users to understand.

10 - @NTF,

I think you can do better. I love your work dearly but I do still think your are in a UI rut. /bruce grabs a drumstick

Personally I find small little groups of fields hard on the eye (yes one eye). What I would like to hear from you is a list of some non-Notes applications and websites that you use frequently and which ones you like the UI of.

11 - I'll be damned. It's a freaking fieldset in the Notes client! Only much better because you can put anything you want where the fieldset label would go. A Z-layer with a buffer? Excuse me while I go sit down - I think my brain may explode...

12 - @7 - Where I work isn't quite that elevated in its thinking. End users care what things look like, upper management doesn't. I get caught in the middle.

@9 - I'll withhold any further comments until I see what you've come up with.

13 - I went through a suite of 20 applications with loads of forms and views ripping out Verdana fonts and reverting everything to default Sans Serif. The reason? If you specify the font for a field then you can't use extended character sets (well that is unless you specify a font which contains them). Leaving the choice of font up to the preferences of the user allows people to choose stuff like MS Mincho or Arial Unicode as their default font so that they can type Japanese, Chinese, Korean, Arabic etc. By all means set the default font in the preferences to be Verdana for those who don't care, but specifying the font restricts the users to the set of glyphs in your favourite font rather than their favourite font. I have lots of truetype fonts on my Linux box, but I think Verdana is not a free font, it is just included with some Microsoft stuff. I tend to use Deja Vu sans on Linux.

14 - I went through a suite of 20 applications with loads of forms and views ripping out Verdana fonts and reverting everything to default Sans Serif. The reason? If you specify the font for a field then you can't use extended character sets (well that is unless you specify a font which contains them). Leaving the choice of font up to the preferences of the user allows people to choose stuff like MS Mincho or Arial Unicode as their default font so that they can type Japanese, Chinese, Korean, Arabic etc. By all means set the default font in the preferences to be Verdana for those who don't care, but specifying the font restricts the users to the set of glyphs in your favourite font rather than their favourite font. I have lots of truetype fonts on my Linux box, but I think Verdana is not a free font, it is just included with some Microsoft stuff. I tend to use Deja Vu sans on Linux.

15 - OK, I'll bite. How did you get the "Aerostyle" box to float over the border like that? That's the only thing that I can't really figure out.

16 - Nice stuff. We developed a design standard last year. Now, after your presentation at Lotusphere, we're having to revisit.

We've used images fo rounded corners which gets tough with gradiants. Do you have a simpler way.

17 - Hi Nathan,

This is great stuff. I was able to duplicate much of it thanks to your other post on progressive disclosure, but am just stuck on a couple other things you did here.

Is there a chance you could make a simple download available, containing only this form, so we could see exactly how you achieved some of these effects? If not, thanks for the inspiration!