Presentation given at ILUG2008 in Dublin. Talk about moving from being a coder (plumber) to being a designer (painter). This is the text that goes along with the slides.

1. Slide – I am a plumber...
I am a plumber. You probably know me better as a developer, but for all intents and
purposes, I'm a plumber. You probably are, too. We have our toolbox filled with devices
that allow us to build and repair systems. With a plunger I can clear out sinks and toilets
that are backed up. Wrenches to tighten pipe connectors. Heat guns to melt frozen
pipes. All sorts of cool things. We have our Domino Designer, Firefox FireBug to walk
through JavaScript and Cascading Style Sheets. The LotusScript debugger allows us to
find those backed-up agents that run slow or overflow on us. Agent profiler to tighten
up those loose Domino Object Model connections. All sorts of cool things.
For us plumbers, we get our kicks in making things work. When we turn on the faucet
after spending all day running pipe, we want to see water come out with no drips from
the start to the end. When the toilet is backed up and we finish our job, we want to push
down on the handle and see the water swirl down. When I spend all day coding and get
to the point where I fire up my application for the first time, I want to see all the
functionality work flawlessly. When I have an agent that's taking far too long, I want to
use my debugger and profiler to clean up the clogs and make the agent run the way it
should.
For us plumbers and developers, we're most interested in making sure the infrastructure
of the project works in the most efficient way possible. Water flow, pressure,
performance, speed. Handles should work, faucets should flow, forms should load,
users should be notified. If everything functions the way it should, we're happy. The
things we do are extremely interesting to us and other plumbers. We can spend all day
talking about the latest pipe technology, problems we had to overcome, the newest
features in the latest release that will make our coding even easier and more efficient.
There's only one problem... If we start to talk about the guts of our job to our customers,
the people who are paying the bills, something strange happens. Their eyes glaze over.
They start looking for an excuse to get away. In their minds, they're thinking “I don't
care why the whatzit wasn't working with the thingamajig”. They don't care about your
details, because they don't see your work. They see the effect of what you do, but they
just expect it to work. Your work is mostly hidden behind walls, under floors, and
buried in the ground.
It doesn't mean what we do isn't important. It's very important. If our work fails, the
customer's system doesn't work. But the things we think are important are not the same
things the user thinks are important. They're interested in other things...

2. Slide – I need to become a painter
I'm comfortable being a plumber, but that's not adequate any more. What we need to
become are painters. Painters are the people who create the visual impact of what
happens when you step into a room. Whether it's a painting in a frame or the colors on a
wall, it's the paint and design that creates the mood. It's tempting to think that our
plumbing work is more important, as the room wouldn't be functional without what we
do. But if the room isn't aesthetically pleasing, the user isn't going to want to use the
room anyway.
So instead of being “just” a plumber, we need to add another skill to our portfolio. We
need to become painters, interior designers. We still need to be top-end plumbers.
That's a critical skill that's needed in order for the house to be inhabitable and usable.
But that's not good enough any more. Having it work properly is just expected. It's the
cost of entry for what we do. Other plumbers may be impressed with our ingenuity and
hacking skills. It'll be lost on the customer, however. They want to be wowwed by what
they see when they walk into the place.
So if the bar has been raised, what do we need to do?
We're going to look at color, fonts and typography, graphics, white space and layout, and
user interface. These are the things that the users see when they step into your
application, and they will (for better or worse) make or break the way your application is
perceived by your customers.
I'm not an expert on this painter thing by any stretch of the imagination. I'm a born and
bred plumber, and I automatically think that users should be much more thrilled and
interested in my work than they should of the work of the painter. But that's not the way
it works now. The Web 2.0 apps out there have redefined what's to be expected in look
and feel. Apple has made it such that everything should be intuitive, seductive, and it
should “just work”. The path from plumber to painter is a journey, and it's one that I'm
stumbling my way through.
It's my hope that this session will start you thinking about that path, that journey. If you
haven't started it, you should. And if you've started it, there may be a few things here
that will help you along the way.

3. Slide – Blank
Some things before we start down that path...
You are not going to see too much in the way of bullet points and endless text during this
presentation. But don't panic and think you have to take notes on everything I have to
say. I'll be posting this presentation as well as a PDF file of the speaker notes on my blog
after I finish here. You only need to remember my blog location. http://
www.duffbert.com. Feel free to take notes on things you want to do when you get home,
but other than that just relax and get involved.
Books... For those who have followed my blog, you know I read and review books... A
lot of books. Through the generosity of some of the publishers I work with, I have some
books I'll be giving away over the course of this session. Last chance to put your name/
business card in the drawing box here. I promise the names will be destroyed after this
session and will not be used to contact you later for future business. I already have a job.
(go over books)
And finally... Learning happens best when you're involved at multiple levels. I don't
want to have you sit here for an hour and listen to me, as you'll forget most of it far too
soon. If you have a question, raise your hand and hopefully we'll have enough time to
cover it. And if I don't know, maybe one of your fellow colleagues might. The more
involvement you have, the more the content will stay with you.
So with that, let's get started.

4. Slide – Color
Color is one of the core elements in an application design, and strikes at the heart of my
journey from plumber to painter. The ongoing joke in my office, which I've perpetuated
is “I'm a plumber, not a painter... you don't want me choosing your colors or graphics.”
But it's gotten to the point where I know I can't live with that joke any more. I've tried to
hide my incompetence with color by reverting to a “clean” design with little color at all.
My “color palette” that I live with tends to be greyscale (grey scale slide). While it is
somewhat hard to screw up greys, it also doesn't do much for the user when they first see
the application. Think of it as the “safe choice” when you don't know what you're doing.
You probably won't get yelled at, but you won't get many kudos either.
At least I know enough not to head to the other extreme of the spectrum (color zebra
slide). I laugh at this, but unfortunately I've had to go in and clean up some applications
where this wasn't far removed from the truth. I used to work with one developer who
chose some, shall we say, “interesting” color combinations. When we'd bring it to their
attention, the answer was always amusing to us... “I'm color-blind... what do you
expect?” They actually thought they were playing in my grey-scale palette. :)
Now I can't claim color-blindness as an excuse for not using appealing color
combinations in an application. I just have to start figuring out what makes for a good
color palette that won't blind the user or put them to sleep.

5. Slide – Color Theory
I think the first place you should start if you're not chromatically-inclinded would be the
worqx.com site and their tutorial about Color Theory. (URL – http://www.worqx.com/
color/index.htm). This is one of the better sites I've seen that explains why some colors
look great together and some just cause your teeth to grate together.
It starts out by giving you some of the basic terminology to describe a color... chroma,
saturation, intensity, luminance, shade and tint. You may think that getting that far into
color is not necessary for what you need to do, but trust me it comes in handy. Either
you'll need it when you talk to a graphical artist, or you'll use it when you're trying to
work with your graphics package to alter an image.
Color systems come up next, explaining the differences in colors used on computers vs
what's used in print.
The color wheels are where we start to get into the proces of learning what goes with
what. The basic color wheel lays out the colors according to their chromatic
relationship. We've probably seen the color wheel a number of times going through
school art classes. Primary, secondary, and tertiary colors show the relationship
between colors on the wheel based on where they are in relation to each other.
Complementary and analogous colors line up either opposite of each other or next to
each other. It's this placement that cause certain colors to flow together, and others to
collide vibrantly.
They also explain how each color has an opposite, and how those opposites cause
different reactions in the eye. In this case, stare at the picture for about 20 seconds
before I advance the screen.
Color combinations start to get into what I consider the palette-choosing activity. Using
the examples here, you can see different choices that may revolve around a
monochromatic theme (everything the same base color with different hues), an
analogous scheme (next to each other on the wheel), or complementary (opposites). The
one you use will be based on what you're trying to portray in your application.
Learning about contrasts is very important, as this is where you'll start getting into
usability issues if you have someone who is color-blind. Using red and green with little
contrast may mean that your user just sees a blob of grey out there. Using a high level of
contrast means that the grey shades will stand out more, and a user with visual
difficulties might well be able to understand your site even though they don't see it as
you designed it.
Proportion and intensity shows how certain color combinations appear darker or lighter
when used in combination with each other, based on what color is dominant in the
scheme. Contrast and dominance I find myself using when I'm trying to take an image
and make it a background for something I'm doing. If I have a dark value dominance,
it's a sure bet that putting any text on top of the image is going to look really bad.
However, if I use a light value dominance, you'll be able to place text over it with fewer
problems. Think of the Notes templates like the Discussion database and the side
navigator. Those background images use a light value dominance to allow there to be an
image, but not so much that the whole text portion of the navigation is swallowed up.

6. Shade and tints along with Color studies goes into the subject even deeper, but I think
with what you'll pick up on the first few pages of this tutorial, you'll be well-equipped to
start making better color choices.
Finally, you get to a color picker page that allows you to start playing around with
combinations. You can try out some complementary colors to see how they might make
things seemingly vibrate when they are next to each other. Or you can stay in a
particular color choice, using different hues to come up with a monochromatic option.
Obviously,it's better to make your mistakes here, than to make them on your application.

7. Slide – kuler.adobe.com
Now one of the really cool things about working on the web is that you can steal and
borrow great ideas from people who are far better at things than you are. Choosing color
palettes are no exception, especially when you're first starting out. One of my favorite
color sites hands-down is http://kuler.adobe.com.
At kuler, people are able to build five color palettes and submit them to the site. They
also name the palette, along with adding “tags” that give ideas as to what the color
scheme meant to them. Add in comments from other people, and you have a great
resource for coming up with an appropriate color scheme without a whole lot of work.
For instance, let's say I was trying to come up with a Guinness color scheme for a site.
With little surprise, there are some people who have already done that. I can look at the
small snippets and expand one that may be a good match to what I want. Clicking on the
arrow icons bring up the colors with the RGB values so that I can use them in my
application. I can also tweak the color scheme from here if I so choose.
This is how I chose the color scheme for the application I'll show at the end. I wanted an
older, nostalgic look, so I decided to go with a sepia tone. I searched on sepia, found a
scheme that was perfect for what I wanted, and my work there was done.
It might be that two different developers would choose different schemes that still fit the
theme of the site. That's perfectly fine, as there aren't any “perfect” choices out there so
long as you're staying true to color theory. At that point, it becomes more a case of what
do you like best?

8. Slide – DeGraeve.com
Finally, one more site that I found rather interesting. At DeGraeve.com (http://
www.degraeve.com/color-palette/index.php), you can point the site at a particular picture
out on the web. It will then break down the photo and give you a “dull” and “vibrant”
color palette based on the picture. Really it's a matter of high and low saturation of the
colors.
Where this might fit in is if you have some sort of image that you want to have as a focal
point of your site. You can choose a palette that won't contrast badly with the picture. Or
say you have an image that evokes some strong emotions, and you'd like to capture those
colors. This site can help you do that.
The main thing to take away from this color section is that choosing colors is not just
something you either do or do not have the talent for. There are some sound reasons why
certain things work, and with a little knowledge you can become much more competent at
it. You may not be the next Picasso, but you won't have to resort to black and white,
either.

9. Slide – Font and Typography
Font is something I'm a bit more comfortable with. I'm familiar with serifs, point sizes,
the standard recommendations for print vs. monitor. It doesn't mean that I know
EVERYTHING there is to know. But the choices you make in the world of fonts is much
more limited.
Or at least it's harder to REALLY screw things up!

10. Slide FONTS
A quick fonts 101 course.
When you hear the words serif and sans-serif, they are talking about those little
flourishes on the ends of letters. Those are called serifs. If you're working with a font
that does not have those little details, it's called a sans-serif (French for “without serif”).
It's generally said that using a serif font in print and a sans-serif font on a monitor is a
good practice. There's a good reason for that. Print resolution tends to be pretty high,
like 200 dots per inch (or DPI). Because there's so many dots pressed together, each dot
has to carry less of the load in terms of the character formation. Monitors are a different
beast. Resolution on a monitor is much lower, say like 72 DPI. Because of that, each dot
on the screen has to do more. The serif fonts on a monitor can get somewhat messy as
it's not as easy to define the small details of each letter. That can lead to eye strain.
Sans-serif fonts on the monitor don't have as many details, and as such is easier to read
for longer periods of time. As monitors improve, it's becoming easier to read fonts that
are more detailed. But it's still not on par with the printed page.
Having said that, it's not a case of “never use a serif font”. If a font has a strong serif that
doesn't get muddied up at lower resolution, then it can look really nice online. I'll cover
a few of those when we hit a web site in a minute. I'll admit to being hooked on the
Georgia font (a serif font), and I've gotten a number of compliments at work for how
easy it is to read. It's just one of those things you have to be careful with.
There are also script fonts and novelty fonts. Generally (more so than staying away from
serif fonts), it's a bad idea to go down that path for apps. Script doesn't translate well to
online viewing in many cases, and it's a risk to use it unless there's a really good reason.
Same with novelty fonts... If the user doesn't have it loaded on their computer, you may
well end up with something you weren't expecting. And even if they do, it's one thing to
see a headline in a font named “Terror” or something like that. It's another thing to
wade through a site that's made up completely of that font.
And a pet peeve of mine... remain consistent in your font selection and sizing. There's a
number of apps I run across that have been updated over time, and have picked up a
rather unique collection of font styles. Views have fonts in 9, 10, and 11 pt sizes with no
real reason behind it (other than when a new column was added, that happened to be the
size that you copied from). I'll find a collection of fonts that are similar (Arial, Helvetica,
Default Sans-Serif) all used in the same view. The sizing is the same, so it doesn't stand
out too badly. But it just looks “off” when you stare at it for any length of time. And
then there are forms... Times New Roman next to Default Sans next to Arial next to
Comic Sans. Don't do this! Don't let Notes be labeled as “ugly” due to some really bad
choices the developer made. And if your users ask you to do this, put up a fight (yes, I
have had this happen).
And whatever you do, don't use comic sans.

11. Slide – Fonts.com
Much like I did when we covered color, I want to point you to a site where you can get a
complete education of what you need to know about fonts. Fonts.com has a page called
Fonts 101 (http://www.fonts.com/aboutfonts/type101) that goes into much more detail
about what works and what doesn't when it comes to typography.
Legibility gets into how fonts are formed, how they are rounded out, and how they
interact with upper and lower case letters. I'll admit that I always thought that “a letter
is a letter”, but as with most things in life, there's much more to it than that. Once you
start grasping the basics, you start to look at fonts differently and notice things you
overlooked before.
Type for the Web goes into what I talked about in the previous slide. What works and
what doesn't when it comes to online viewing...
Anatomy of a Character is interesting, as it exposes you to the terminology that people in
the print industry use when they refer to how letters are formed. It's similar in nature to
learning the terminology about color. You may never have to use that on a day-to-day
basis, but when your graphics art department calls up asking a question, you can shock
them when you explain what you're looking for in words they can understand.
If you start getting into the whole desktop publishing world, a lot of this will come in
handy. If you're simply trying to go for a decent look on your website, learning a few
core concepts set you up well to make good decisions.

12. Slide – Dafont.com
Now having said not to use novelty fonts, I will point you to dafont.com anyway (http://
www.dafont.com/).
This font collection site has more fonts than you could use in a lifetime. And while I
wouldn't suggest using those as the font type on your site, there are a few other reasons
that this would come into play.
Let's say you're creating a banner for your site, and you want to overlay a font on the
graphic that creates a tone for the site. I can search for something like Irish and see if
there are any fonts that fit the bill. I can take that font, download and install it, and then
use that as the text on my banner in my graphics package. When I save the image, all of
images get compressed into a single picture and you don't have to worry about whether
the user has the font installed or not. For something like this, you can afford to get
creative with your fonts.
I just strongly suggest that you don't go too much more overboard than that. Unusual
fonts follow the rule that “less is more”.

13. Slide – Graphics
This is another area that's close to color in my book of what I need to learn. I won't even
venture to suggest images on a normal basis when it comes to my applications. I know
better than to think that I can create images that compete with those who are paid in our
company to do that sort of stuff.
And yet...
Your graphic artists don't build these images from scratch. They use photo collections to
get started. And guess what? You can do the same thing. Couple a great image with
some minor manipulation (if needed) with a graphics package, and you can fake it quite
well...

14. Slide – iStockPhoto.com
One of the best places to get started with quality images is the site iStockPhoto.com
(http://www.istockphoto.com). IstockPhoto has thousands of image available for
download and purchase. All you need to do is search for a term or word, and you'll have
a number of choices. Here I did a search for Guinness, and came up with some ad-
quality pictures I could use if needed.
You buy credits at the site, and the pictures and images cost x number of credits
depending on size and detail. You'll see the term “royalty-free” which means you can use
the image without having to pay a per-use charge. You can also get a subscription that
gives you a number of credits per day that you can use to download images. It all
depends on what works for you.
It's important to read all the information on licences and use permissions. It's tempting
to think you'll just use a picture and no one will notice or care. In some cases, you're
allowed to do that. But in most cases, the person who created the image owns the rights.
If you use an image in a commercial way and the person finds out, they can sue to force
you to stop using the image and possibly even seek damages. It's really not worth the
risk. If you see something you'd like to use, just pay attention to the rights, ask
permission when necessary, and cover your bases.

15. Slide – stock.xchng
Another option for finding quality graphics is the stock.xchng site (http://www.sxc.hu).
This is similar to iStockPhoto, only you don't have to pay any costs to use the photos.
Again, search on the term you're looking for, find the image that works, and start using
it. These images are contributed by people like you and I who want to share their work.
So you may not be dealing with “professional” photos, but the quality is very high.
Again, I'll reiterate... read the permissions and rights about how you can use the photos.
Even though it doesn't cost you anything to get it, there are restrictions about how the
image can be used. Don't make the mistake of having someone causing you legal
headaches.

16. Slide – flickr.com
And if you're not afraid of wading through some dross, you can use Flickr. (http://
www.flickr.com).
As you all probably know, flickr is a photo sharing site that has a huge number of
contributions out there. You'll get everything and anything in terms of what is
photographed, and you'll also get a WIDE variety of quality in those shots. Some use
flickr to store photos of events, and those pictures might suck. Just look at some of the
Lotusphere shots out there where someone's taking a shot from the back of the room
during the opening session, and they decided to use that same angle for about 500 shots.
And they posted EVERY LAST ONE!
That's not good, people.
On the other hand, there are some incredible shots out there that people have taken and
shared. Some are professional or examples of different settings or lighting. If you do a
search for Guinness (yes, I'm running a theme here), you'll find a few shots that are
incredible. On the other hand, a picture of a pre-teen holding a bottle of Guinness
probably isn't what you had in mind for material. Some of the images only have a single
size out there which might limit the amount of manipulation you can do. Others (if
you're lucky) have a wide range of sizes, everything from thumbnail to multimeg
versions. Download the biggest one out there, and start working away.
Now just because people have “shared” these pictures doesn't mean you're free to use
them for whatever purpose you'd like. The same rules in terms of rights applies here
also. Flickr does have something called Creative Commons licensing. That's a licence
that generally allows for use in non-commercial efforts without seeking explicit
permission. Usually attribution is about as much as you need to do.
But don't let that stop you if you find the perfect picture that doesn't have the Creative
Commons link. Most of the full-screen images you'll find in this presentation came from
Flickr, and they're a mix of Creative Commons and All Rights Reserved. In the second
situation, I simply sent an email to the account user, explained what I was doing, sent
them a link to the image I wanted to use, and outlined the extent of how the image would
be displayed. In every single case, I got a reply in less than a day and the person was
thrilled that someone wanted to use their work. It's a win-win for both parties... you get
a stunning image, and they get the satisfaction of knowing someone found and
appreciated their work.

17. Slide – GIMP
You're not stuck just hoping that the image you want is exactly what you want. If you
take a little time to learn the basic functions of a graphics package, you can crop, resize,
recolor, lighten, darken, etc. that “perfect” photo.
Many graphic packages are high-end and cost hundreds of dollars. Personally, I use a
very old copy of Paint Shop Pro as it's familiar to me and it does what I want to do
quickly. But you don't have to spend a dime to get all that graphic goodness. Simply go
to http://www.gimp.org and download the GNU Image Manipulation Program, aka
GIMP. It's an open source graphics package that has a huge following, excellent
support, and features that will do just about everything you'll need to do on a day-to-day
basis unless you're a professional graphical artist. And who knows... it may even work
there, too.

18. Slide – White Space and Layout (and additional slides for search share and
Google Reader)
This is something I've been accused of in the past (and perhaps even in the present!) I
put together a decent application that looks relatively clean. Then the users start having
their input, and they all have “just one more thing” that should be above the fold so that
it catches people attention. Make the font smaller, add one more table column, and it all
fits. Pretty soon everything's above the fold... and your clean design is absolutely
trashed. Because everything's important, nothing is important.
This is where white space and layout come into play.
If a user is assaulted by text, pictures, and cramped layouts, they have to work hard to
figure out what they're looking at and for most users, it's not worth the effort. They may
be forced to use your application, but I can tell you they won't like it. And if they don't
like it, they'll find a million reasons to use something else or go elsewhere.
This is where we plumbers have to start understanding a bit about painting, white space
and layout.
This whole white space and layout argument came clear to me as I was preparing this
presentation. You're all aware of the search engine wars. Google leads the pack, Yahoo
has lost their past luster, and Microsoft... well, they just can't get anything right
regardless of how many billions they spend. There are probably dozens of reasons why
this is the case... number of pages indexed, secret search sauce, relevancy of search
results, etc. But I'd like to propose one other standard that certainly stands out.
Here we have Microsoft Search. They hold a whopping 9.1% of the search traffic. I go to
their site to search for something, and what do I get? Sports! Games! Weather! News!
Financials! And I can become hot with an online degree... Sign me up! Oh, search? It's
that sliver of real estate at the top. What's going on here? MSN is trying to monitize
their search traffic. They're trying to capture your traffic so that you return again and
again and click on sponsor links. Who's being served here? Not you... Microsoft. This
visual assault takes you away from the main task you were here to do... search.
OK... we know that Microsoft is losing this battle, and that they want to buy Yahoo for
$50 billion. Yahoo must have the search market figured out, attracting traffic with a
focused approach and site. 20.1%... Far better than Microsoft, for sure. Together, over
30% of search traffic. And what do we get with the far better Yahoo search site?
The same old trash as MSN... News! Games! Sports! Celebrity Couples! Danica
Patrick... a really BAD picture of Danica Patrick... sigh. Search? Oh, it's that sliver of
real estate on top of the page. Again, the user is visually assaulted with so much stuff
that they're pulled away from their main task... searching. They're trying to monitize
their traffic right up front, just like MSN. Could it be that this approach has been
responsible for their slide?
OK... Now let's go to Google. 61.6% You go to the site to search, and what do you find?
A search bar! No clutter. No debris. Focused on the task at hand, with plenty of white
space. Coincidence?

19. Now I'm not about to claim that Google isn't after your money also. They are. But that
comes into play after you get your search results. Can I go the portal route and use
iGoogle, giving me a look like Yahoo or MSN? Yes, but it's my choice. I can use that or
the classic look. If I can do that on MSN or Yahoo, I certainly haven't found it.
I think there's a lesson to be learned here.
Continuing with the minimalist thread, let's look at another Google feature... Google
Book Search. A site designed to allow you to see the contents of a book and search on
the contents. On the screen, there are pictures of the books that open up when you click
them. Browse by category, type, subject... That's it! No ads running all over the page
asking you to buy the book. No garish widgets designed to keep you glued to the site.
An effective site is not synonymous with a complex site. In fact, the more complex it is,
the less effective people will be (or the longer it will take them to get up to speed). I've
noticed that many Web 2.0 applications are trending towards the minimalist approach.
Pick a task, focus on that task, and strip away everything else. Add white space so that
chunks of text stand out. Lay out the controls so that they are visually obvious without
searching all over the page.
As a plumber, I'm probably not doing as good as job at this as I need to. In fact, I know
I'm not. It's been said that music is the spaces between the notes. We have to start
focusing on the spaces between the data in terms of what the user sees. We can still
make things happen by magic in the backend. Just remember that the user really
doesn't care how that happens.

20. Slide – User Interaction
Here is something that I'm finally starting to understand and focus on... user
interface... usability. As a plumber, I've been in the camp that so long as it works, it's
OK. Slightly quirky? They'll pick it up. Different? That's not bad. Four steps instead of
one? It's still better than what they had...
Not acceptable any more... If the user has made the same processing mistake more than
once, it may be because I didn't design the interface very well. I tend to develop for what
I think the interface should look like, not necessarily what it should look like for them
after watching them work. It's not that I ignore the users... I listen to them, come up
with an idea, and we work from there. Always busy, multiple projects all the time.
A painter takes the time to consider the image, the canvas, the colors... In our world, it
also includes understanding how the users think and how we should build applications
that make sense to them, not other developers.
It'd be possible to turn this single subject into an all-day session, and I'm so not qualified
to teach it. I actually NEED the all-day session myself. But there are, as always,
resources on the web that you should start using to help get you moving down the path...

21. Slide – 37 Signals site/Jakob Nielsen site
Short of buying a whole library of books (many of which I've read and reviewed,
although you wouldn't know any of it sunk in), I'd recommend getting into the habit of
following a few usability sites.
The 37 Signals blog site (http://www.37signals.com/svn/) is a good reference for
designing useable applications that perform the way users expect them to, without them
realizing it. I appreciate their approach as being easy to read, practical, and reasonable.
The reason I say “reasonable” is due to the second site I have up here... Jakob Nielsen's
site (http://www.useit.com). I'm really torn on this guy.
He's acknowledged as being the “father of web usability.” OK, he did stake out that
territory before it became such an important topic. And yes, he has contributed to the
field of usability in ways that we probably don't fully appreciate any more because his
ideas have become conventional wisdom.
But I really get turned off by what I perceive as a “I'm right because I'm the expert and I
said so” attitude. One of the first books I read from him was his classic “Designing Web
Usability”. This was back in the days when 56k modems were the DSL of the day. He
had some stats in there about how long a certain size web page would take to load at
different speeds, and then made a statement that if a page wouldn't load in x.8 seconds it
was not acceptable.
For one, how did we get to a point-ANYTHING in terms of seconds and acceptability.
And second, it's a leap to go from “users seem to get distracted past x seconds” to “pages
taking longer than x seconds violate standards.” Also, when I go to his site, I must say
that I'm not overly impressed by his design skills... Notes/Domino default web views
could give him a run for the money in my opinion.
Still... if you can get past the “I'm the expert” tone, there is food for thought here.
Consider it the “brussel sprouts” of advice... It's healthy and good for you, but the taste
isn't wonderful and you don't necessarily have to enjoy it.

22. Slide – Interfacematters.com/IdeaJam
The last two sites I showed you are definitely focused on “web usability”. Does that
mean that the information they give you doesn't apply to a Notes client application?
No... good user interface skills transcend platform, and many “web” interface
techniques also apply to a Notes client application.
To pull some information directly applicable to our Notes/Domino world, you really
need to be following Chris Blatnick's blog Interface Matters (http://
www.interfacematters.com). Chris has done an excellent job over the last few years
bringing the concepts of usability to Notes/Domino developers in a way that makes
perfect sense and that can be acted upon quickly. In addition to reading his blog, take
the opportunity to see him in session if you're at Lotusphere or another conference he's
speaking at. You'll learn both solid usability skills, as well as picking up a number of
really cool programming tricks for things you didn't think you could do in Notes...
I also recommend that you visit IdeaJam if you haven't already. (http://
www.ideajam.net). No, you won't visit this site to get the latest on how to design usable
Notes applications. At least not directly. Instead, you'll find a stellar example of a
Notes/Domino application that doesn't look like a Notes/Domino application,
incorporates a number of “web 2.0” behaviors, and does exactly what you expect with no
unpleasant surprises. In fact, there are a number of effects like mouseovers and such
that are unexpected at first glance, but that pleasantly surprise and thrill the user when
they happen. It's really quite impressive.
In fact, I think the entire IdeaJam team is here at ILUG.... Bruce and Gayle Elgort, Matt
White, and Sean Burgess. If you want to know more about the app, they'll be MORE
than happy to talk with you. Or if you've seen and used the app and appreciate the
service they provide, thank them.... It's good karma.

23. Slide – Before and After through After version of Notes application
This is a short example of how much of this came into play for me recently...
Each year, our company has a company-wide picnic for the 7500 or so people employed
there. The Portland version of this picnic has been held at a place called Oaks Park for
quite a few years. Oaks Park is an amusement park that dates back to early 1900's.
Some considered it the West Coast version of New York's Coney Island. It was quite the
place to go with the family for many, many years. While Oaks Park has not been able to
keep up with the times in terms of parks like Six Flags and Knotts Berry Farm, it still
maintains some of that old-time nostalgia feeling when you step through the gates.
This year, the company has decided to hold the event at PGE Park. PGE Park also has a
long history in Portland. Starting out as Vaughn Field, it's undergone various rebuilds,
remodels, and renames as Multnomah Stadium, Civic Stadium, and now PGE Park.
Over the years, it has hosted professional baseball games, ski jumping, concerts, soccer
championships, and much more. When it was refurbished as PGE Park, they decided to
go for the retro look to harken back to the olden days. Again, nostalgia is a key to what
you feel when you go through the doors.
I was approached by a department in our company responsible for doing the reservation
process for this year's event. In the past, it's been done with intercompany mail,
spreadsheets, and all those “user tools” that you commonly see used. But you can
imagine that trying to register between 4000 to 8000 people can be rather time-
consuming if it's all manual. They wondered if Notes could do something to help them
streamline the process.
Well, duh!
I enjoy the user who I was working with on this, and she gave me the specs for what the
form should look like. Font, color, information and text... it was pretty complete. My
normal reaction was to grab a blank template, copy over a form from another app, and
give them something in an hour or two. And in fact, I really did go a ways down that
path. You'll see the “before” image here. I'll admit I finished up the before version after
I was done with everything in order to show what it could have looked like.
This version of the application meets all their requirements. It has all the fields they
needed, the color was what they asked for, and it works perfectly. From a plumber's
perspective, you can put up the sheetrock and start living in the place. The faucets work
and the toilet flushes.
But there's this attitude among some of our management that Notes applications are
“butt-ugly”. Since we've had Notes since v3, there are some applications out there that
haven't been updated much since then. We also haven't paid much attention to visual
design. We've learned as we went along, and there aren't any design standards or best
practices that we've had to adhere to.
So what to do? This RSVP app is going to be seen by a lot of employees. Shouldn't I try
something a little different? Should I use this as a chance to start to cause people to
think differently about how Notes applications look?

24. Sure... why not.
I wanted to evoke the feelings of old-time nostalgia, an “Americana picnic” type of theme
when people went into the application. The first thing I did was try to come up with a
color scheme that gave that type of feeling. I decided to try and emulate that sepia look
in an old photograph. By going to the kuler.adobe.com site, I did a search on the word
“sepia” and got some color palettes that included the type of orangish-brown I wanted. I
then went to the standard fonts we have on our PCs and chose one that was a bit old-
fashioned in look. That ended up being the Goudy Old Style font. I wouldn't have
chosen that if there was a ton of text on the page and people would spend all day in the
application. But for a registration page, it works fine. Finally, I thought that a form
banner with some sort of image would make the registration form stand out. I went to
Flickr, found a photo of the PGE Park neon sign, and trimmed/cropped it down to size.
Then using my graphics package, I applied a sepia effect to the picture to turn it into an
“old photo”. I played around a bit with the intensity of the image, and brought it down
to something that was more faint. A little color filling to match the background of the
form (based on the kuler.adobe.com color palette), and I was set.
Then I reviewed the registration form. My normal approach is just to line up the fields
down the left side of the page. Yes, I should know better, but when you're a plumber,
you tend to think in terms of function. And a straight line form works.
I brought up the person count area to make a second column of data available “above the
fold”. This has the benefit of having all the critical field information available on a single
page. And when the user prints the form out, we hide the banner from printing so that
everything prints on a single page. When they show up to pay their registration fees, you
have a single sheet of paper to hand over (if you chose to print it out). The Mark Paid/
Mark Unpaid buttons at the top of the page allow the picnic administrators to click a
single button, enter a dollar total, and click OK. Other views group total number of
people, dollars collected, and all the other important information for them.
Function-wise, I'm happy as a plumber. The application is efficient, it does what it was
designed to do, and the payback in time savings for the organizing committee is reached
in about... one day. What I wasn't used to was the reaction in terms of how it looked.
After everyone got over the shock of me doing something with a graphic involved, they
really liked it. It captured the flavor of the event, and it made for a pleasant registration
process.
Is it a stellar example of graphic design? No. If I gave it to a “real” web developer, I'm
sure they would come up with something that would put this to shame. But it's a start,
and you have to begin somewhere. Putting something like this out in front of the user
starts to raise the bar for what can be done, and for what they can ask for. If they start to
ask and expect more, we'll be pushed to improve our painting skills.
And I think that's good for everyone involved.

25. Slide – Your Fork In The Road
So we come to a fork in the road. Which path do you take?
Do you stay on the same path you're currently on? Do you remain a plumber, convinced
that the visual aspects of your application are secondary to function, and that the users
just need to be educated as to what's really important?
Or do you venture down a new path? One where both form and function are important,
and one where the user feelings are as important as the user requirements?
The second path is not an easy one for many developers, and it's certainly not easy for
me. But I'm fully convinced that it's the way we have to go in order to stay relevant to
our customers. We're not developers developing for other developers. We're designers
building for end users, and what's important to them isn't the same thing that's
important to us. Guess which one we have to pay attention to?

26. Slide – Picture Credits
This had better be the only place you see bullet points in this presentation!