UI redesign: getting rid of the outlines

In my last post I outlined a problem I had when trying to replace an outline with a combination of caption tables, tabbed tables and embedded views. Even using one of the hacks I came up with I still had one problem: tables cannot be made to fit to the screen height, and embedded views in tables do not implement the size to window properties correctly. I found a solution, thanks to SnTT, Don McNally and Slawek Rogulski. (Follow the link to Don's blog for a more complete write-up of what I'm about to discuss.)

The implementation is pretty trivial. A form can have a header. You put your navigation bits in the header of the form. The remainder of the form contains a computed embedded view. When configured in this way embedded views do implement the size to window properties correctly. If you set the left margin of the embedded view to 0.75" it lines up with the left margin pretty well. Here is what I have come up with so far.








Everything in the top blue section is in the form header. The rest of the form is taken up by the embedded view. The button panel in the top left is for one-click access to creating new records. I'll probably replace that with something like Create new [-----] [GO] and let them select from a list and click the GO button and just leave it at that.

Embedded view bug

I have an old app that I'm redesigning and consolidating multiple lightly-used databases into one. The old design was a typical three-panel layout. I wanted to do something fresh and easier to understand. I decided that instead of the typical tree hierarchy I'd flip it sideways, with a caption table replacing the top-level tree items, and tabs inside the caption table to represent the lower-level views.


It looked good on paper, but in Domino Designer 8, 7.0.2, and 7.0.3 there is a bug with this configuration. When you...

1. Select a tab with an embedded view and
2. Select a different row in the caption table
3. You get this

It's a little hard to tell what's going on here, so let me explain. The caption rows expand and collapse properly. The tabbed table in the previously selected caption row disappears. But the embedded view stays put, covering the newly expanded caption and any others below it. I can't select any other caption row and I can't add anything to the current caption row.

Now for the real kick in the rubber parts: it only does this in Domino Designer. It works perfectly in Notes 8 Basic/Standard, 7.0.2 and 7.0.3. So far I have come up with three workarounds in Domino Designer:

1. Close the form, and save it so the currently expanded caption will be visible when you reopen.
2. Use a blank dummy tab at the end, and select that before changing caption rows.
3. Scrap this altogether and find another solution.

I chose option 3, partly because of this bug and partly because it's still not intuitive enough. I'll blog more after I have that built later this evening.

Imitation is the sincerest form of flattery - Part 2

Subtitle: Why Development by Collaboration Is A Good Thing

First I borrowed from Notes 8 to update the UI for an app. Now I'm borrowing even more heavily from Ben Langhinrichs to make that application even more functional.

The challenge: Take four databases that have been in development for over five years and slowly grown into one application and provide a single cohesive interface. Provide a compelling UI that is intuitive and, well, prettier.

It's a pretty tall order, and it's something I have wanted to do for years. The core to these records is the workflow section, which was really rather simplistic. It consists of anywhere from two to six steps, with different groups responsible for each phase. The challenge was to present this in a coherent way without unnecessary screen clutter. The previous implementation was like this:

Lots of redundancy, lots of visual clutter. I started thinking about how I could use layers, and I remembered Ben's use of layers to put controls beside a section title. Perfect! It took some work to get it laid out (and a couple of e-mails to Ben), but I finally got it.













I came up with a technique I call section tables. This lets you present a single cohesive table to users, but they break apart to provide more information. I am using it for workflow. Here it is all collapsed...






And with a couple of sections expanded.












Here is a sample database for you to look at while I'm finishing up this application. I'm still pulling everything together to make it cohesive but I'll be doing some posts detailing how I did all this. Without the resources offered by the community I don't think this would be possible in such a short amount of time, and I'm humbled to be standing on the shoulders of giants.

Imitation is the sincerest form of flattery

The Notes 8 Home page includes some cool button icons. I'm reworking some of my own apps (more on that shortly) and wanted to include a launcher page that has the Notes 8 look and feel. I trust Mary Beth Raven's team did some extensive studies of what worked on the Home page, so (without getting too cliche) why reinvent the wheel and recreate everything from scratch?

Start with a blank canvas

The icons on the Notes 8 Home page look like this:





In order to create your own it's easiest to wipe out the default icon. This proved easier said than done for me because the button background is a gradient. Yes, it's extremely subtle, but trust me, it's a gradient. I use Fireworks for my very rudimentary graphics work and couldn't figure out how to select an area and fill it with a gradient, so I went through and overlaid it pixel by pixel. Yeah it was tedious, but here's the final result:





Yay, a blank canvas!

Build a better button

Finding images that work was a little challenging. The icon in the center is 32 x 32 pixels. Through lots of trial and error I determined that you can go as large as 40 x 40 pixels, but after that it starts crowding the frame and looking constrained. A while back I stumbled across some really cool icons from Rokey.net that I've been using for some internal apps at work, so I thought I'd use some of those here. It is important that you pick something that has transparency, and that will scale down to at least 40 pixels (32 pixels is ideal) without getting too ugly.

Here is what I picked (from the wifun PNG library)









Cute, huh? There is also a 32 x 32 version, and when I put it on the button here is how it ended up.





Tip: Each button is 48 pixels wide, including the borders. To put a 32 x 32 image in the center of the blue button it should be positioned at 8, 8 (X, Y). For the orange button it will be 57, 8. And here's another tip: after you position the image on the left, do a copy and paste of it. In Fireworks this puts a copy of it on top of the original, so then all you have to do is move it horizontally using the arrow keys. This is easier than trying to drag it around and position it. Since I already did the calculations for the offsets for you, you could just as easily type in the coordinates, too.

Conclusion

When you're working on updating applications don't feel like you have to continually reinvent the wheel. Lotus misses the mark on some UI queues, but for graphics and iconography they do pretty well. And don't dismiss the usability studies and other work that went into the Notes 8 UI.

Keeping things consistent for users increases their rate of adoption and lowers the barrier to entry. And hey, reusing other people's work just makes it easier for you. :-) If you can, have fun with it even if it's just for the early releases and demos. Who knows, maybe the stuffed shirt who designs the TPS reports might actually like to see a screaming box of chocolates as an icon.