Slide – I need to become a painterIm comfortable being a plumber, but thats 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 its a painting in a frame or the colors on awall, its the paint and design that creates the mood. Its tempting to think that ourplumbing work is more important, as the room wouldnt be functional without what wedo. But if the room isnt aesthetically pleasing, the user isnt 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.Thats a critical skill thats needed in order for the house to be inhabitable and usable.But thats not good enough any more. Having it work properly is just expected. Its thecost of entry for what we do. Other plumbers may be impressed with our ingenuity andhacking skills. Itll 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?Were 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.Im not an expert on this painter thing by any stretch of the imagination. Im 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 thats not the wayit works now. The Web 2.0 apps out there have redefined whats 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 its one that Imstumbling my way through.Its my hope that this session will start you thinking about that path, that journey. If youhavent started it, you should. And if youve started it, there may be a few things herethat will help you along the way.
Slide – BlankSome 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 dont panic and think you have to take notes on everything I have tosay. Ill 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 Ill 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 youre involved at multiple levels. I dontwant to have you sit here for an hour and listen to me, as youll forget most of it far toosoon. If you have a question, raise your hand and hopefully well have enough time tocover it. And if I dont know, maybe one of your fellow colleagues might. The moreinvolvement you have, the more the content will stay with you.So with that, lets get started.
Slide – ColorColor 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 Ive perpetuatedis “Im a plumber, not a painter... you dont want me choosing your colors or graphics.”But its gotten to the point where I know I cant live with that joke any more. Ive 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 doesnt do much for the user when they first seethe application. Think of it as the “safe choice” when you dont know what youre doing.You probably wont get yelled at, but you wont 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 Ive had to go in and clean up some applicationswhere this wasnt far removed from the truth. I used to work with one developer whochose some, shall we say, “interesting” color combinations. When wed bring it to theirattention, the answer was always amusing to us... “Im color-blind... what do youexpect?” They actually thought they were playing in my grey-scale palette. :)Now I cant 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 wont blind the user or put them to sleep.
Slide – Color TheoryI think the first place you should start if youre 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 Ive 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. Eitheryoull need it when you talk to a graphical artist, or youll use it when youre trying towork with your graphics package to alter an image.Color systems come up next, explaining the differences in colors used on computers vswhats 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. Weve 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. Its 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 youre trying to portray in your application.Learning about contrasts is very important, as this is where youll 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 dont 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 Im trying to take an imageand make it a background for something Im doing. If I have a dark value dominance,its 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, youll 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 youll pick up on the first few pages of this tutorial, youll 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,its better to make your mistakes here, than to make them on your application.
Slide – kuler.adobe.comNow 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 youre 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, lets 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 Ill 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. Thats perfectly fine, as there arent any “perfect” choices out there solong as youre staying true to color theory. At that point, it becomes more a case of whatdo you like best?
Slide – DeGraeve.comFinally, 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 its 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 wont contrast badly with the picture. Orsay you have an image that evokes some strong emotions, and youd 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 wont have to resort to black and white,either.
Slide – Font and TypographyFont is something Im a bit more comfortable with. Im familiar with serifs, point sizes,the standard recommendations for print vs. monitor. It doesnt mean that I knowEVERYTHING there is to know. But the choices you make in the world of fonts is muchmore limited.Or at least its harder to REALLY screw things up!
Slide FONTSA 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 youre working with a fontthat does not have those little details, its called a sans-serif (French for “without serif”).Its generally said that using a serif font in print and a sans-serif font on a monitor is agood practice. Theres a good reason for that. Print resolution tends to be pretty high,like 200 dots per inch (or DPI). Because theres 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 asits not as easy to define the small details of each letter. That can lead to eye strain.Sans-serif fonts on the monitor dont have as many details, and as such is easier to readfor longer periods of time. As monitors improve, its becoming easier to read fonts thatare more detailed. But its still not on par with the printed page.Having said that, its not a case of “never use a serif font”. If a font has a strong serif thatdoesnt get muddied up at lower resolution, then it can look really nice online. Ill covera few of those when we hit a web site in a minute. Ill admit to being hooked on theGeorgia font (a serif font), and Ive gotten a number of compliments at work for howeasy it is to read. Its 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), its a bad idea to go down that path for apps. Script doesnt translate well toonline viewing in many cases, and its a risk to use it unless theres a really good reason.Same with novelty fonts... If the user doesnt have it loaded on their computer, you maywell end up with something you werent expecting. And even if they do, its one thing tosee a headline in a font named “Terror” or something like that. Its another thing towade through a site thats made up completely of that font.And a pet peeve of mine... remain consistent in your font selection and sizing. Theres 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). Ill 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 doesnt 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. Dont do this! Dont 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, dont use comic sans.
Slide – Fonts.comMuch 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 doesnt 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. Ill admit that I always thought that “a letteris a letter”, but as with most things in life, theres 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 doesnt 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. Its 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 youre 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 youre 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.comNow 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 Iwouldnt suggest using those as the font type on your site, there are a few other reasonsthat this would come into play.Lets say youre 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 dont 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 dont go too much more overboard than that. Unusualfonts follow the rule that “less is more”.
Slide – GraphicsThis is another area thats close to color in my book of what I need to learn. I wont 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 dont 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.comOne 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 youll 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. Youll 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.Its important to read all the information on licences and use permissions. Its temptingto think youll just use a picture and no one will notice or care. In some cases, youreallowed 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. Its really not worth therisk. If you see something youd like to use, just pay attention to the rights, askpermission when necessary, and cover your bases.
Slide – stock.xchngAnother option for finding quality graphics is the stock.xchng site (http://www.sxc.hu).This is similar to iStockPhoto, only you dont have to pay any costs to use the photos.Again, search on the term youre 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, Ill reiterate... read the permissions and rights about how you can use the photos.Even though it doesnt cost you anything to get it, there are restrictions about how theimage can be used. Dont make the mistake of having someone causing you legalheadaches.
Slide – flickr.comAnd if youre 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. Youll get everything and anything in terms of what isphotographed, and youll 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 someones 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!Thats 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, Im running a theme here), youll find a few shots that areincredible. On the other hand, a picture of a pre-teen holding a bottle of Guinnessprobably isnt 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 (ifyoure 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 doesnt mean youre free to usethem for whatever purpose youd like. The same rules in terms of rights applies herealso. Flickr does have something called Creative Commons licensing. Thats 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 dont let that stop you if you find the perfect picture that doesnt have the CreativeCommons link. Most of the full-screen images youll find in this presentation came fromFlickr, and theyre 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. Its a win-win for both parties... you geta stunning image, and they get the satisfaction of knowing someone found andappreciated their work.
Slide – GIMPYoure 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 its familiar to me and it does what I want to doquickly. But you dont 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. Its an open source graphics package that has a huge following, excellentsupport, and features that will do just about everything youll need to do on a day-to-daybasis unless youre 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 Ive 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 everythings above the fold... and your clean design is absolutelytrashed. Because everythings 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 theyre looking at and for most users, its not worth the effort. They maybe forced to use your application, but I can tell you they wont like it. And if they dontlike it, theyll 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. Youre all aware of the search engine wars. Google leads the pack, Yahoohas lost their past luster, and Microsoft... well, they just cant 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 Id 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? Itsthat sliver of real estate at the top. Whats going on here? MSN is trying to monitizetheir search traffic. Theyre trying to capture your traffic so that you return again andagain and click on sponsor links. Whos 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, its that sliver ofreal estate on top of the page. Again, the user is visually assaulted with so much stuffthat theyre pulled away from their main task... searching. Theyre trying to monitizetheir traffic right up front, just like MSN. Could it be that this approach has beenresponsible for their slide?OK... Now lets 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 Im not about to claim that Google isnt 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 its my choice. I can use that orthe classic look. If I can do that on MSN or Yahoo, I certainly havent found it.I think theres a lesson to be learned here.Continuing with the minimalist thread, lets 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... Thats 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). Ivenoticed 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, Im probably not doing as good as job at this as I need to. In fact, I knowIm not. Its 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 reallydoesnt care how that happens.
Slide – User InteractionHere is something that Im finally starting to understand and focus on... userinterface... usability. As a plumber, Ive been in the camp that so long as it works, itsOK. Slightly quirky? Theyll pick it up. Different? Thats not bad. Four steps instead ofone? Its 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 didnt 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. Its 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.Itd be possible to turn this single subject into an all-day session, and Im 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 siteShort of buying a whole library of books (many of which Ive read and reviewed,although you wouldnt know any of it sunk in), Id 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 Nielsenssite (http://www.useit.com). Im really torn on this guy.Hes 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 dont fully appreciate any more because hisideas have become conventional wisdom.But I really get turned off by what I perceive as a “Im right because Im 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 wouldnt 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, its 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 Im 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 “Im the expert” tone, there is food for thought here.Consider it the “brussel sprouts” of advice... Its healthy and good for you, but the tasteisnt wonderful and you dont necessarily have to enjoy it.
Slide – Interfacematters.com/IdeaJamThe last two sites I showed you are definitely focused on “web usability”. Does thatmean that the information they give you doesnt 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 Blatnicks 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 youre at Lotusphere or another conference hesspeaking at. Youll learn both solid usability skills, as well as picking up a number ofreally cool programming tricks for things you didnt think you could do in Notes...I also recommend that you visit IdeaJam if you havent already. (http://www.ideajam.net). No, you wont visit this site to get the latest on how to design usableNotes applications. At least not directly. Instead, youll find a stellar example of aNotes/Domino application that doesnt 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. Its 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, theyll be MOREthan happy to talk with you. Or if youve seen and used the app and appreciate theservice they provide, thank them.... Its good karma.
Slide – Before and After through After version of Notes applicationThis 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 1900s.Some considered it the West Coast version of New Yorks 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, its 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 years event. In the past, its 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 its 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. Youll see the “before” image here. Ill 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 plumbersperspective, you can put up the sheetrock and start living in the place. The faucets workand the toilet flushes.But theres this attitude among some of our management that Notes applications are“butt-ugly”. Since weve had Notes since v3, there are some applications out there thathavent been updated much since then. We also havent paid much attention to visualdesign. Weve learned as we went along, and there arent any design standards or bestpractices that weve had to adhere to.So what to do? This RSVP app is going to be seen by a lot of employees. Shouldnt 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 wouldnt 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 youre 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, Im 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 wasnt 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, Imsure they would come up with something that would put this to shame. But its 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, well be pushed to improve our painting skills.And I think thats good for everyone involved.
Slide – Your Fork In The RoadSo we come to a fork in the road. Which path do you take?Do you stay on the same path youre 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 whats 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 its certainly not easy forme. But Im fully convinced that its the way we have to go in order to stay relevant toour customers. Were not developers developing for other developers. Were designersbuilding for end users, and whats important to them isnt the same thing thatsimportant to us. Guess which one we have to pay attention to?
Slide – Picture CreditsThis had better be the only place you see bullet points in this presentation!