Slide – I am a plumber...

I am a plumber. You probably know me better as a developer, but for all intents andpurposes, I'm a plumber. You probably are, too. We have our toolbox filled with devicesthat allow us to build and repair systems. With a plunger I can clear out sinks and toiletsthat are backed up. Wrenches to tighten pipe connectors. Heat guns to melt frozenpipes. All sorts of cool things. We have our Domino Designer, Firefox FireBug to walkthrough JavaScript and Cascading Style Sheets. The LotusScript debugger allows us tofind those backed-up agents that run slow or overflow on us. Agent profiler to tightenup 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 faucetafter spending all day running pipe, we want to see water come out with no drips fromthe start to the end. When the toilet is backed up and we finish our job, we want to pushdown on the handle and see the water swirl down. When I spend all day coding and getto the point where I fire up my application for the first time, I want to see all thefunctionality work flawlessly. When I have an agent that's taking far too long, I want touse my debugger and profiler to clean up the clogs and make the agent run the way itshould.

For us plumbers and developers, we're most interested in making sure the infrastructureof 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. Thethings we do are extremely interesting to us and other plumbers. We can spend all daytalking about the latest pipe technology, problems we had to overcome, the newestfeatures 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'tcare why the whatzit wasn't working with the thingamajig”. They don't care about yourdetails, because they don't see your work. They see the effect of what you do, but theyjust expect it to work. Your work is mostly hidden behind walls, under floors, andburied in the ground.

It doesn't mean what we do isn't important. It's very important. If our work fails, thecustomer's system doesn't work. But the things we think are important are not the samethings the user thinks are important. They're interested in other things...

Slide – I need to become a painter

I'm comfortable being a plumber, but that's not adequate any more. What we need tobecome are painters. Painters are the people who create the visual impact of whathappens when you step into a room. Whether it's a painting in a frame or the colors on awall, it's the paint and design that creates the mood. It's tempting to think that ourplumbing work is more important, as the room wouldn't be functional without what wedo. But if the room isn't aesthetically pleasing, the user isn't going to want to use theroom anyway.

So instead of being “just” a plumber, we need to add another skill to our portfolio. Weneed 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 thecost of entry for what we do. Other plumbers may be impressed with our ingenuity andhacking skills. It'll be lost on the customer, however. They want to be wowwed by whatthey 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, anduser interface. These are the things that the users see when they step into yourapplication, and they will (for better or worse) make or break the way your application isperceived by your customers.

I'm not an expert on this painter thing by any stretch of the imagination. I'm a born andbred plumber, and I automatically think that users should be much more thrilled andinterested in my work than they should of the work of the painter. But that's not the wayit works now. The Web 2.0 apps out there have redefined what's to be expected in lookand feel. Apple has made it such that everything should be intuitive, seductive, and itshould “just work”. The path from plumber to painter is a journey, and it's one that I'mstumbling my way through.

It's my hope that this session will start you thinking about that path, that journey. If youhaven't started it, you should. And if you've started it, there may be a few things herethat will help you along the way.

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 thispresentation. But don't panic and think you have to take notes on everything I have tosay. I'll be posting this presentation as well as a PDF file of the speaker notes on my blogafter 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... Alot of books. Through the generosity of some of the publishers I work with, I have somebooks 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 thissession 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'twant to have you sit here for an hour and listen to me, as you'll forget most of it far toosoon. If you have a question, raise your hand and hopefully we'll have enough time tocover it. And if I don't know, maybe one of your fellow colleagues might. The moreinvolvement you have, the more the content will stay with you.

So with that, let's get started.

Slide – Color

Color is one of the core elements in an application design, and strikes at the heart of myjourney from plumber to painter. The ongoing joke in my office, which I've perpetuatedis “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 tohide 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 issomewhat hard to screw up greys, it also doesn't do much for the user when they first seethe 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 zebraslide). I laugh at this, but unfortunately I've had to go in and clean up some applicationswhere this wasn't far removed from the truth. I used to work with one developer whochose some, shall we say, “interesting” color combinations. When we'd bring it to theirattention, the answer was always amusing to us... “I'm color-blind... what do youexpect?” 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 colorcombinations in an application. I just have to start figuring out what makes for a goodcolor palette that won't blind the user or put them to sleep.

Slide – Color Theory

I think the first place you should start if you're not chromatically-inclinded would be theworqx.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 colorslook 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 intocolor is not necessary for what you need to do, but trust me it comes in handy. Eitheryou'll need it when you talk to a graphical artist, or you'll use it when you're trying towork with your graphics package to alter an image.

Color systems come up next, explaining the differences in colors used on computers vswhat's used in print.

The color wheels are where we start to get into the proces of learning what goes withwhat. The basic color wheel lays out the colors according to their chromaticrelationship. We've probably seen the color wheel a number of times going throughschool art classes. Primary, secondary, and tertiary colors show the relationshipbetween 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 toeach other. It's this placement that cause certain colors to flow together, and others tocollide vibrantly.

They also explain how each color has an opposite, and how those opposites causedifferent reactions in the eye. In this case, stare at the picture for about 20 secondsbefore I advance the screen.

Color combinations start to get into what I consider the palette-choosing activity. Usingthe examples here, you can see different choices that may revolve around amonochromatic theme (everything the same base color with different hues), ananalogous scheme (next to each other on the wheel), or complementary (opposites). Theone 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 intousability issues if you have someone who is color-blind. Using red and green with littlecontrast may mean that your user just sees a blob of grey out there. Using a high level ofcontrast means that the grey shades will stand out more, and a user with visualdifficulties might well be able to understand your site even though they don't see it asyou designed it.

Proportion and intensity shows how certain color combinations appear darker or lighterwhen used in combination with each other, based on what color is dominant in thescheme. Contrast and dominance I find myself using when I'm trying to take an imageand 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 fewerproblems. Think of the Notes templates like the Discussion database and the sidenavigator. Those background images use a light value dominance to allow there to be animage, but not so much that the whole text portion of the navigation is swallowed up.

Shade and tints along with Color studies goes into the subject even deeper, but I thinkwith what you'll pick up on the first few pages of this tutorial, you'll be well-equipped tostart making better color choices.

Finally, you get to a color picker page that allows you to start playing around withcombinations. You can try out some complementary colors to see how they might makethings seemingly vibrate when they are next to each other. Or you can stay in aparticular 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.

Slide – kuler.adobe.com

Now one of the really cool things about working on the web is that you can steal andborrow great ideas from people who are far better at things than you are. Choosing colorpalettes are no exception, especially when you're first starting out. One of my favoritecolor sites hands-down is http://kuler.adobe.com.

At kuler, people are able to build five color palettes and submit them to the site. Theyalso name the palette, along with adding “tags” that give ideas as to what the colorscheme meant to them. Add in comments from other people, and you have a greatresource 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 thesmall snippets and expand one that may be a good match to what I want. Clicking on thearrow icons bring up the colors with the RGB values so that I can use them in myapplication. 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 anolder, nostalgic look, so I decided to go with a sepia tone. I searched on sepia, found ascheme 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 thetheme of the site. That's perfectly fine, as there aren't any “perfect” choices out there solong as you're staying true to color theory. At that point, it becomes more a case of whatdo you like best?

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 pictureout 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 thecolors.

Where this might fit in is if you have some sort of image that you want to have as a focalpoint of your site. You can choose a palette that won't contrast badly with the picture. Orsay you have an image that evokes some strong emotions, and you'd like to capture thosecolors. This site can help you do that.

The main thing to take away from this color section is that choosing colors is not justsomething you either do or do not have the talent for. There are some sound reasons whycertain things work, and with a little knowledge you can become much more competent atit. You may not be the next Picasso, but you won't have to resort to black and white,either.

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 knowEVERYTHING there is to know. But the choices you make in the world of fonts is muchmore limited.

Or at least it's harder to REALLY screw things up!

Slide FONTS

A quick fonts 101 course.

When you hear the words serif and sans-serif, they are talking about those littleflourishes on the ends of letters. Those are called serifs. If you're working with a fontthat 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 agood 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 dothas to carry less of the load in terms of the character formation. Monitors are a differentbeast. Resolution on a monitor is much lower, say like 72 DPI. Because of that, each doton the screen has to do more. The serif fonts on a monitor can get somewhat messy asit'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 readfor longer periods of time. As monitors improve, it's becoming easier to read fonts thatare 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 thatdoesn't get muddied up at lower resolution, then it can look really nice online. I'll covera few of those when we hit a web site in a minute. I'll admit to being hooked on theGeorgia font (a serif font), and I've gotten a number of compliments at work for howeasy 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 fromserif fonts), it's a bad idea to go down that path for apps. Script doesn't translate well toonline 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 maywell end up with something you weren't expecting. And even if they do, it's one thing tosee a headline in a font named “Terror” or something like that. It's another thing towade 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 anumber of apps I run across that have been updated over time, and have picked up arather unique collection of font styles. Views have fonts in 9, 10, and 11 pt sizes with noreal reason behind it (other than when a new column was added, that happened to be thesize 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 standout too badly. But it just looks “off” when you stare at it for any length of time. Andthen there are forms... Times New Roman next to Default Sans next to Arial next toComic Sans. Don't do this! Don't let Notes be labeled as “ugly” due to some really badchoices the developer made. And if your users ask you to do this, put up a fight (yes, Ihave had this happen).

And whatever you do, don't use comic sans.

Slide – Fonts.com

Much like I did when we covered color, I want to point you to a site where you can get acomplete education of what you need to know about fonts. Fonts.com has a page calledFonts 101 (http://www.fonts.com/aboutfonts/type101) that goes into much more detailabout 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 theyinteract with upper and lower case letters. I'll admit that I always thought that “a letteris a letter”, but as with most things in life, there's much more to it than that. Once youstart grasping the basics, you start to look at fonts differently and notice things youoverlooked before.

Type for the Web goes into what I talked about in the previous slide. What works andwhat doesn't when it comes to online viewing...

Anatomy of a Character is interesting, as it exposes you to the terminology that people inthe print industry use when they refer to how letters are formed. It's similar in nature tolearning the terminology about color. You may never have to use that on a day-to-daybasis, but when your graphics art department calls up asking a question, you can shockthem 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 inhandy. If you're simply trying to go for a decent look on your website, learning a fewcore concepts set you up well to make good decisions.

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 Iwouldn't suggest using those as the font type on your site, there are a few other reasonsthat this would come into play.

Let's say you're creating a banner for your site, and you want to overlay a font on thegraphic that creates a tone for the site. I can search for something like Irish and see ifthere are any fonts that fit the bill. I can take that font, download and install it, and thenuse that as the text on my banner in my graphics package. When I save the image, all ofimages get compressed into a single picture and you don't have to worry about whetherthe user has the font installed or not. For something like this, you can afford to getcreative with your fonts.

I just strongly suggest that you don't go too much more overboard than that. Unusualfonts follow the rule that “less is more”.

Slide – Graphics

This is another area that's close to color in my book of what I need to learn. I won't evenventure to suggest images on a normal basis when it comes to my applications. I knowbetter than to think that I can create images that compete with those who are paid in ourcompany to do that sort of stuff.

And yet...

Your graphic artists don't build these images from scratch. They use photo collections toget started. And guess what? You can do the same thing. Couple a great image withsome minor manipulation (if needed) with a graphics package, and you can fake it quitewell...

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 fordownload and purchase. All you need to do is search for a term or word, and you'll havea 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 creditsdepending on size and detail. You'll see the term “royalty-free” which means you can usethe image without having to pay a per-use charge. You can also get a subscription thatgives you a number of credits per day that you can use to download images. It alldepends on what works for you.

It's important to read all the information on licences and use permissions. It's temptingto think you'll just use a picture and no one will notice or care. In some cases, you'reallowed 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 forceyou to stop using the image and possibly even seek damages. It's really not worth therisk. If you see something you'd like to use, just pay attention to the rights, askpermission when necessary, and cover your bases.

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 usingit. 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 theimage can be used. Don't make the mistake of having someone causing you legalheadaches.

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 ofcontributions out there. You'll get everything and anything in terms of what isphotographed, and you'll also get a WIDE variety of quality in those shots. Some useflickr to store photos of events, and those pictures might suck. Just look at some of theLotusphere shots out there where someone's taking a shot from the back of the roomduring 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 andshared. Some are professional or examples of different settings or lighting. If you do asearch for Guinness (yes, I'm running a theme here), you'll find a few shots that areincredible. On the other hand, a picture of a pre-teen holding a bottle of Guinnessprobably isn't what you had in mind for material. Some of the images only have a singlesize out there which might limit the amount of manipulation you can do. Others (ifyou're lucky) have a wide range of sizes, everything from thumbnail to multimegversions. 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 usethem for whatever purpose you'd like. The same rules in terms of rights applies herealso. Flickr does have something called Creative Commons licensing. That's a licencethat generally allows for use in non-commercial efforts without seeking explicitpermission. 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 CreativeCommons link. Most of the full-screen images you'll find in this presentation came fromFlickr, and they're a mix of Creative Commons and All Rights Reserved. In the secondsituation, I simply sent an email to the account user, explained what I was doing, sentthem a link to the image I wanted to use, and outlined the extent of how the image wouldbe displayed. In every single case, I got a reply in less than a day and the person wasthrilled that someone wanted to use their work. It's a win-win for both parties... you geta stunning image, and they get the satisfaction of knowing someone found andappreciated their work.

Slide – GIMP

You're not stuck just hoping that the image you want is exactly what you want. If youtake 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 avery old copy of Paint Shop Pro as it's familiar to me and it does what I want to doquickly. But you don't have to spend a dime to get all that graphic goodness. Simply goto http://www.gimp.org and download the GNU Image Manipulation Program, akaGIMP. It's an open source graphics package that has a huge following, excellentsupport, and features that will do just about everything you'll need to do on a day-to-daybasis unless you're a professional graphical artist. And who knows... it may even workthere, too.

Slide – White Space and Layout (and additional slides for search share andGoogle Reader)

This is something I've been accused of in the past (and perhaps even in the present!) Iput together a decent application that looks relatively clean. Then the users start havingtheir input, and they all have “just one more thing” that should be above the fold so thatit catches people attention. Make the font smaller, add one more table column, and it allfits. Pretty soon everything's above the fold... and your clean design is absolutelytrashed. 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 tofigure out what they're looking at and for most users, it's not worth the effort. They maybe forced to use your application, but I can tell you they won't like it. And if they don'tlike 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 spaceand layout.

This whole white space and layout argument came clear to me as I was preparing thispresentation. You're all aware of the search engine wars. Google leads the pack, Yahoohas lost their past luster, and Microsoft... well, they just can't get anything rightregardless of how many billions they spend. There are probably dozens of reasons whythis is the case... number of pages indexed, secret search sauce, relevancy of searchresults, 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 totheir 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'sthat sliver of real estate at the top. What's going on here? MSN is trying to monitizetheir search traffic. They're trying to capture your traffic so that you return again andagain and click on sponsor links. Who's being served here? Not you... Microsoft. Thisvisual 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 afocused approach and site. 20.1%... Far better than Microsoft, for sure. Together, over30% 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! DanicaPatrick... a really BAD picture of Danica Patrick... sigh. Search? Oh, it's that sliver ofreal estate on top of the page. Again, the user is visually assaulted with so much stuffthat they're pulled away from their main task... searching. They're trying to monitizetheir traffic right up front, just like MSN. Could it be that this approach has beenresponsible 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 whitespace. Coincidence?

Now I'm not about to claim that Google isn't after your money also. They are. But thatcomes into play after you get your search results. Can I go the portal route and useiGoogle, giving me a look like Yahoo or MSN? Yes, but it's my choice. I can use that orthe 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... GoogleBook Search. A site designed to allow you to see the contents of a book and search onthe contents. On the screen, there are pictures of the books that open up when you clickthem. Browse by category, type, subject... That's it! No ads running all over the pageasking 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'venoticed 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 thatchunks of text stand out. Lay out the controls so that they are visually obvious withoutsearching 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 knowI'm not. It's been said that music is the spaces between the notes. We have to startfocusing on the spaces between the data in terms of what the user sees. We can stillmake things happen by magic in the backend. Just remember that the user reallydoesn't care how that happens.

Slide – User Interaction

Here is something that I'm finally starting to understand and focus on... userinterface... usability. As a plumber, I've been in the camp that so long as it works, it'sOK. Slightly quirky? They'll pick it up. Different? That's not bad. Four steps instead ofone? It's still better than what they had...

Not acceptable any more... If the user has made the same processing mistake more thanonce, it may be because I didn't design the interface very well. I tend to develop for whatI think the interface should look like, not necessarily what it should look like for themafter watching them work. It's not that I ignore the users... I listen to them, come upwith 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, italso includes understanding how the users think and how we should build applicationsthat 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 qualifiedto 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...

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 offollowing a few usability sites.

The 37 Signals blog site (http://www.37signals.com/svn/) is a good reference fordesigning useable applications that perform the way users expect them to, without themrealizing 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'ssite (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 thatterritory before it became such an important topic. And yes, he has contributed to thefield of usability in ways that we probably don't fully appreciate any more because hisideas 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 Isaid so” attitude. One of the first books I read from him was his classic “Designing WebUsability”. This was back in the days when 56k modems were the DSL of the day. Hehad some stats in there about how long a certain size web page would take to load atdifferent speeds, and then made a statement that if a page wouldn't load in x.8 seconds itwas 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 “pagestaking longer than x seconds violate standards.” Also, when I go to his site, I must saythat I'm not overly impressed by his design skills... Notes/Domino default web viewscould 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 tasteisn't wonderful and you don't necessarily have to enjoy it.

Slide – Interfacematters.com/IdeaJam

The last two sites I showed you are definitely focused on “web usability”. Does thatmean that the information they give you doesn't apply to a Notes client application?No... good user interface skills transcend platform, and many “web” interfacetechniques also apply to a Notes client application.

To pull some information directly applicable to our Notes/Domino world, you reallyneed to be following Chris Blatnick's blog Interface Matters (http://www.interfacematters.com). Chris has done an excellent job over the last few yearsbringing the concepts of usability to Notes/Domino developers in a way that makesperfect sense and that can be acted upon quickly. In addition to reading his blog, takethe opportunity to see him in session if you're at Lotusphere or another conference he'sspeaking at. You'll learn both solid usability skills, as well as picking up a number ofreally 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 usableNotes applications. At least not directly. Instead, you'll find a stellar example of aNotes/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 nounpleasant surprises. In fact, there are a number of effects like mouseovers and suchthat are unexpected at first glance, but that pleasantly surprise and thrill the user whenthey happen. It's really quite impressive.

In fact, I think the entire IdeaJam team is here at ILUG.... Bruce and Gayle Elgort, MattWhite, and Sean Burgess. If you want to know more about the app, they'll be MOREthan happy to talk with you. Or if you've seen and used the app and appreciate theservice they provide, thank them.... It's good karma.

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 employedthere. The Portland version of this picnic has been held at a place called Oaks Park forquite 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 theplace to go with the family for many, many years. While Oaks Park has not been able tokeep up with the times in terms of parks like Six Flags and Knotts Berry Farm, it stillmaintains 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 along 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, soccerchampionships, and much more. When it was refurbished as PGE Park, they decided togo for the retro look to harken back to the olden days. Again, nostalgia is a key to whatyou feel when you go through the doors.

I was approached by a department in our company responsible for doing the reservationprocess 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 canimagine 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 themstreamline the process.

Well, duh!

I enjoy the user who I was working with on this, and she gave me the specs for what theform should look like. Font, color, information and text... it was pretty complete. Mynormal reaction was to grab a blank template, copy over a form from another app, andgive them something in an hour or two. And in fact, I really did go a ways down thatpath. You'll see the “before” image here. I'll admit I finished up the before version afterI 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 theyneeded, the color was what they asked for, and it works perfectly. From a plumber'sperspective, you can put up the sheetrock and start living in the place. The faucets workand 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 thathaven't been updated much since then. We also haven't paid much attention to visualdesign. We've learned as we went along, and there aren't any design standards or bestpractices 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 trysomething a little different? Should I use this as a chance to start to cause people tothink differently about how Notes applications look?

Sure... why not.

I wanted to evoke the feelings of old-time nostalgia, an “Americana picnic” type of themewhen people went into the application. The first thing I did was try to come up with acolor scheme that gave that type of feeling. I decided to try and emulate that sepia lookin 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. Ithen 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 havechosen that if there was a ton of text on the page and people would spend all day in theapplication. But for a registration page, it works fine. Finally, I thought that a formbanner with some sort of image would make the registration form stand out. I went toFlickr, 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 downto something that was more faint. A little color filling to match the background of theform (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 fieldsdown 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 thefold”. This has the benefit of having all the critical field information available on a singlepage. And when the user prints the form out, we hide the banner from printing so thateverything prints on a single page. When they show up to pay their registration fees, youhave 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 asingle button, enter a dollar total, and click OK. Other views group total number ofpeople, 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 wasdesigned to do, and the payback in time savings for the organizing committee is reachedin 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, theyreally liked it. It captured the flavor of the event, and it made for a pleasant registrationprocess.

Is it a stellar example of graphic design? No. If I gave it to a “real” web developer, I'msure 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 userstarts to raise the bar for what can be done, and for what they can ask for. If they start toask and expect more, we'll be pushed to improve our painting skills.

And I think that's good for everyone involved.

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, convincedthat the visual aspects of your application are secondary to function, and that the usersjust 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 forme. But I'm fully convinced that it's the way we have to go in order to stay relevant toour customers. We're not developers developing for other developers. We're designersbuilding for end users, and what's important to them isn't the same thing that'simportant to us. Guess which one we have to pay attention to?

Slide – Picture Credits

This had better be the only place you see bullet points in this presentation!