ESCAPE VELOCITY :: SnTW Inline submenus and embed tricks with layers

One of the reasons I've been so talkative about Hannover lately is that I'm deeply immersed in a lot of UI work for the Notes client myself. The system I've been maintaining & rewriting for almost the last two years is a medical practice management system which tracks patient records, medical records and accounting transactions, all while automatically processing the South African equivalent of insurance filings via EDI behind the scenes. Not surprisingly, things get pretty complicated when you're tracking both medical and accounting records in one system, so coming up with consistent and usable presentation has involved a great deal of effort over the last few months.

Tuesday, I had a bit of a revelation about one approach that I'd like to share with my (lately dwindling) readers. Click through to get my graphics-heavy writeup on some fun interface tricks with LAYERS.

My partner-in-crime here is Colin Macdonald, who has had a running joke for the last several weeks. Everytime I run into a wall, he belts out with: "Use LAYERS! Surely you can fix it with LAYERS!!" He means this sarcastically, of course, but it occured to me recently that I might be able to address a problem with exactly that!

I've mentioned elsewhere that I've become a big fan of allowing different user modes for interaction in my designs. One key concept for that is to allow movement between text-oriented actions and graphic-oriented actions. Our new version allows the toggling of static text labels on actions with a simple environment variable. So a screen like this...

A picture named M2

...can be made to look like this...

A picture named M3

(By the way, Wiaan van der Westhuizen is my boss. None of the information above has any relationship to reality except his name. Well, he's also male, if you care.)

You'll see that the stuff inside the yellow circles switches between displaying text and not. This approach is working wonderfully throughout the system, except in one troublesome case. I like to use inline-actions for certain parts of the information, to move behavior control closer to the information it affects. So, for instance, the Account Details block on this form has several actions that the user might need, related not directly to the patient but to the financial account. With labels off, it looks like this:
A picture named M4

But the descriptions of these icons are rather lengthy, so to put "Get account balance" and "Record a payment" is going to eat up more screen real estate than I can afford. What to do?

Here's where layers come to the rescue. By setting up a text-based hotspot which controls a hide-when on a layer, I can offer up this...

In designer, it's structured like this (the box is a subform, which is why the background is different.)

You'll note that I have to use a table structure to separate my "Actions..." hotspot and my layer anchor. That's because I need separate hide-whens for them. Also, I'm using an environment variable for this, so that my toggle works while in read-mode. But in other places I use temp fields. And I'm sure that a creative developer could find yet another way to control the behavior.

Also, this is the first place I've ever encountered in Notes where the drop shadow capability looks good. The item really is floating over existing content, so it makes perfect sense.

In another part of the system, I want to present a treating health care professional with some options for comprehensive history for a patient. To do this, I want to use embedded views, but I need the view out of the way unless called on. Again, the layer technique works wonderfully.

Here's the screen to record diagnosis and treatment for a patient...
A picture named M9

So when you click "Medical background", I reveal a layer anchored just below that shows the embedded view...
A picture named M10

(Again, these have nothing to do with Wiaan's actual medical background, except that he is, in fact, a smoker.)

You'll see this time we introduce another graphic to the right. That's just to close the layer. In the previous instances, we do that automatically on activation, but here, I want to let the user click around while having the window up.

"Treatment history" actually just switches the reference view for the embedded view...
A picture named M11

In Designer, this is pretty similar to what we had before...
A picture named M12

And I even have the option on that right-side column to introduce other relevant actions. For instance, I'll be dropping in a set of controls for recording other medical background information, such as additional allergies. Since the controls are only visible when the context is introduced, they're linked directly to the user's perception of context.

I've really only been exploring this idea for about 24-hours. I know that you can nest layers, so there's some interesting possibilities for hierarchical interface presentation as well. You can also use subforms in them, so there's a good deal of flexibility. One concept I'm looking forward to is to have an embedded view, where the corresponding linked Editor is tucked away in a layer. So you'd be able to toggle the preview window on a new z-axis, displaying over other related information for as long as the user keeps it visible.

Any other approaches you can think of?

Comments

1 - Impressive UI. Well done.

Posted by Rod Stauffer At 02:45:13 AM On 06/16/2006 | - Website - |

2 - Very, very nice work.

Posted by Richard Schwartz At 01:14:48 PM On 06/15/2006 | - Website - |

3 - Very nice. I even agree on the drop shadow comments <grin>

Posted by Green Jellybean At 11:24:28 AM On 06/14/2006 | - Website - |

4 - Man, that looks GREAT!! Definitely some good ideas to get out of a rut (like Ben said).

Posted by Chris Whisonant At 01:28:07 PM On 06/14/2006 | - Website - |

5 - A bit late with this comment, but ... I agree with all those before who were wowed by this UI and the layer technique. If there was a Notes UI showcase I would be nominating this.

Posted by Slawek Rogulski At 01:22:50 AM On 07/08/2006 | - Website - |

6 - Simply... wow... I'm a UI freak and work extremely hard to deliver the cleanest, most intuitive and uncluttered UI's I can. That is the best UI I have ever seen in a Notes application.

Posted by Charles Robinson At 02:04:10 PM On 06/14/2006 | - Website - |

7 - That is the sweetest looking UI!
I run into that problem a lot... there's simply too much information and it would look too cluttered. That's an awesome solution.

Posted by Jess Stratton At 11:35:55 AM On 06/14/2006 | - Website - |

8 - I tried layers before, but sometimes had problems in controling the place it will display. For sure will try it again !!
Don't you have issues/request that it also should be printable ?

Posted by Art Zoutendijk At 04:24:56 AM On 06/15/2006 | - Website - |

9 - @7 - If you do a layer in a sub form, use the auto placement, otherwise placement will be relative to the form containing the subform.

@Nathan - Sarcasm? I thought you got irony?

Posted by Colin Macdonald At 07:10:15 AM On 06/15/2006 | - Website - |

10 - Agree with Jess: lately I've been doing some Notes client development work after a long hiatus, and it's inspiring to see a fresh perspective -- I just couldn't get out of my UI rut!

Posted by Ben Poole At 12:00:01 PM On 06/14/2006 | - Website - |

11 - Very nice! I have found a lot of cool uses for layers (many inspired by the Lotusphere Sessions db), but I seldom have any real world applications, so it is very cool to see something like this. Keep up the good work.

Posted by Ben Langhinrichs At 01:19:10 PM On 06/15/2006 | - Website - |

12 - I am sitting here with a client, both going "Ooo" at the UI and layers. The only thing we both noticed was that there is no visial indicator if you are looking at treatment history vs. medical background.<br><br>But we see some immediate uses for this! (beyond my first use of a layer I gave him last week).

Posted by Christopher Byrne At 10:57:29 AM On 06/15/2006 | - Website - |

13 - Nathan...very nice work! I'd say that the biggest obstacle I have had to overcome in working with Notes is developing innovative UIs to win over a customer. This is exactly the kind of stuff Notes developers need to be thinking about. The use of layers can be tricky but as you've shown here that they can really be employed in a clever way. When I work with younger developers, I urge them to try to think of new ways to use common design elements to improve the interface and you've given us a perfect example here. Thanks for sharing!

Posted by Chris Blatnick At 01:52:15 PM On 06/14/2006 | - Website - |

14 - I remember seeing this when it was on the openntf site but now I'm not sure how to access the full article with the pictures - could someone please let me know what the new link is?

Posted by Darren Oliver At 08:43:13 AM On 04/02/2007 | - Website - |