Funny IM "Away" Message
I'm just throwing this out there since it's funny and I haven't seen it anywhere before. Thus, I claim it as my own work. Of course, I apologize if you are offended...but it's still funny! :-)
"I'm not spanking the monkey...I'm just giving him a stern warning!"
I've gotten more than a few LOLs from that one!
P.S. If you are offended, it just means you have a dirty mind.
permalink | leave a comment
Lotusphere Demo: Drag, Drop and More
One of my cooler demos from BP101 (in my opinion), was the drag and drop processing demo. This was in no way as cool as Nathan's
, but there are some fun little tricks here which you might find useful. Again I'm making the non-polished version
available right now so you can play with it, but I'll emphasize that this really hasn't been tested too much.
For those of you who couldn't make it to the session, here's the scenario I envisioned and the functionality that is available. Basically, I came up with the idea of a corporate "library" where you can browse through the books and if you want to "check one out", you do so by utilizing a drag and drop function to put it in your "basket". When you are finished, you can click a single button, which will check all the books out to you. Once again, I wanted to show you that it's not just the Web 2.0 crowd that can do cool interfaces. For this example, I chose to replicate the drag and drop functionality
demoed by the script.aculo.us
There's a lot going on in this little demo, so I'll walk you through each feature (uggghh...why do I keep doing this to myself...lots of screenshots to make! ;-)
(1) First up is the drag and drop processing itself. To add a book to your "shopping cart", you grab the doc from the embedded view and drag it over to the icon on the right side of the screen. You can see a sweet little Flash version of this by clicking the image below.
Click for animated demo
Effective use of drag and drop is a balancing act. The physical action of moving something from one place to another is a good metaphor from the real world, but in the electronic realm this presents some difficulties, at least the very first time the user sees your app. In cognitive psychology, there's a concept known as affordance. Affordance basically deals with whether the actions that an object can perform are obvious based on the object's physical properties. As it relates to our interface design, being able to drag an object (something on the screen) is usually not
Many of us know from past experience that we can drag a document to a folder in Notes, but if you were seeing this for the first time you would not have a clue this is possible unless you started playing around. Thus, if you decide to use drag and drop document processing, make sure you provide some kind of visual clue that this is possible. On the web, you can usually manipulate the properties of an object much easier than you can in the Notes client, so for client work, you'll probably have to settle for a message that tells the user what to do.
In this example, there's some text that says "Drag a book from the list and drop it on the button below to add it to your Shopping Cart". As long as the user sees this message, they'll be good to go. Once they perform this action the first time, they won't need help anymore. Drag and drop is a simple act that users remember quite well...and it's usually one they like too! (Don't forget to do usability testing to make sure your users concur). One interesting fact about drag and drop is that it is actually a slower
process than the equivalent action of clicking a button. Usually, slowing the user down is the opposite of what we want to accomplish, but in this instance, it is a common and memorable action that many users prefer.
(2) "Check Out" is performed via the button under the items listed in your cart. Clicking this button gets all of the documents that you have placed in the cart (a private folder) and sets a field with your user name. The embedded view is then updated to reflect that the documents are now checked out.
(3) I wanted to provide the users with a little abstract about the book they are interested in. If the user double-clicks on a book in the view, a little popup appears (done via a layer, of course) with this content. Ohhh...ahhhh.... I like it! :-)
Click for animated demo
What's that you ask? Why, yes...yes there is a sample database available. Here you go
...I hope you find some useful ideas within. If you are interested, here are some of the tricks I used.
* We don't get much in the way of drag and drop controls within Notes. However, we can drag documents from one folder or view to another easily enough. I utilized this fact to accomplish everything you see in the demo. The "Shopping Cart" is an embedded outline with a single entry that references a folder called "ShoppingCart". Since there's some logic I wanted to invoke when you try to drop a document on this outline, there is code in the QueryAddToFolder event of the embedded view. This code is responsible for things like checking if you are trying to add a document that is already checked out, making sure you only try to drop a document into the Shopping Cart, etc. Because I wanted to display the books added to the cart, I used a second folder called "ViewCart". The code in the QueryAddToFolder event actually adds the document being dragged to that folder if it is not checked out. Thus, we get the effect of the document immediately appearing in the area below the Shopping Cart drag target if the action is allowed.
* I didn't want users to be able to open the "ShoppingCart" folder directly, so this folder has a single line of code (Continue = False) in its QueryOpen event.
* If the users want to remove items from their cart, there is a place under the view where they can drag the documents out. This area is just another embedded outline, this time referencing a folder called "DropRemove". Since you can drag docs from one folder to another, this provides an elegant way to "remove" an item from the user's basket. Although I didn't do it since this is a demo, you'd probably want to provide some code to periodically clean that folder out. I also set Continue = False for the QueryOpen event of this folder so the user doesn't click the outline control and accidentally open the folder.
* The popup abstract is accomplished with an embedded editor placed on a layer. All of the content on the main book form is hidden when embedded except for the abstract field itself. The layer anchor is hidden and only displayed when the user double-clicks the document. To accomplish this, I placed code in the QueryOpenDocument event of the embedded view. First, I grab the container uidocument and set a field called "txt_ShowDetails" to "1" and refresh the hide formulas. In order to prevent the document from opening, I just use Continue = False again. The hide-when property of the layer anchor references the "txt_ShowDetails" field and only displays when this value is set to "1". Depending on your situation, it may be more advantageous to use environment variables. For this demo, all of the action is taking place on a form that doesn't get saved, so I chose to use a field.
* Notice that the embedded view has rounded corners (woo hoo!). Too bad it's not really an option in the client. This is accomplished by using an image for the embedded view's border property.
* In case you didn't know (I had a few people ask at Lotusphere), you can have graphics in your view...they just need to be set as Image Resources. Here's some additional detail
... And here's some more
* Just for fun, I wanted to see how to maneuver through the view without scroll bars. Check out the action buttons which move you up and down. Also, notice the formatting of the embedded view, which I think is kind of nice. This is accomplished using categorization. If anyone can tell me how to prevent the categories from collapsing when clicked on, that would be really cool. Obviously the utility of this idea is limited, but it works nicely if you only have a handful of documents to deal with.
* For your testing purposes, I added an action in the embedded view to "return" a book. If you've ever had a problem targeting a document that is highlighted in a view, you might want to check out the code in this action button. The trick is to use CaretNoteID of NotesUIView.
Well...I think that about wraps it up. Have fun playing around and, as always, if you find any good uses for these techniques, I'd love to hear about it.
Labels: layers, Lotusphere2007, UI design
permalink | leave a comment
Recorded Here For Posterity...
The stunning interface we came up with on the fly for BP101 - Designing The User Experience! ;-)
And of course we go to 11!
Thanks to Michael Kohn for capturing it in action
permalink | leave a comment
Lotusphere Demo: Enhancing A Template UI
My perfectionist tendencies usually keep me from posting things until I'm almost completely satisfied with them. However, since so many of you have been clamoring for the demos from Lotusphere, I'm going to start putting them here, even though they are far from perfect. First up is the remake of the Document Library template that I started working with on the plane down to Lotusphere. We showed this one really fast, so let me preface this with some quick background. Sitting in the airport, I was thinking about the idea that I bring up often regarding interfaces in Notes. Basically, I think you can really push the boundaries of what you have seen with the UI...you just have to be willing to put forth the effort. Sometimes, it's not really even that hard. By the time I got on the plane, I decided that I wanted to take a stab at modifying one of the default templates that Lotus provides us. I chose the standard Document Library.
Now don't get me wrong. I think the out of the box templates are very powerful and are a great way to get up and running with Notes. The user experience, however, leaves something to be desired. They worked great 10 years ago, but are now beginning to show their age. I specifically chose the Document Library because...ug...look at that color. Yikes! :-) In case you forgot, here's what it looks like populated with some documents.
I love the color scheme even more with the pink unread marks! :-D
Anyway, this isn't the worst Notes UI I've seen by far, but there is much improvement that can be made. I decided to model the new UI after a commercially available app, just so you could see how easily the UI can be tweaked to look like almost anything. I'm a big fan of the work the guys at 37signals
do, so this updated Document Library is a homage to their Basecamp
app. By the time we were in the air and laptops could be turned on, I had a rough idea of the changes to make. I fired up my machine and worked for the next couple of hours on the main layout. Since I returned from Lotusphere, I had a couple of ideas to tweak it a little more, adding in some neat functionality (although whether or not this would be practical in the real world would of course depend on user testing). After all is said and done, I ended up with something like this:
While I made a few underlying changes to the design, I tried mostly not to touch any of the existing things. Looks a bit nicer I think.
Alright...here's the database
so you can open it up and play around with it. Again...I'll throw out the disclaimer that this isn't close to done, but if you had to wait until I felt comfortable with it, you'd be waiting a long time! :-)
I did come up with one cool new technique that I'd like to point out (new for me anyway). Check out the little "Abstract" box to the right of the view. I did this, of course, with an embedded editor/embedded view combo. I wanted to make sure, however, that only the abstract appeared in this box. Luckily, there is a hide-when property to hide information when it is embedded. This becomes problematic, unfortunately, when you have a rich-text field, since each paragraph of the rich text has it's own hide-when property. Another challenge I had here was that I wanted to format the abstract text in a particular way, with a fixed width and with a little gradient shading. I didn't want this to appear when the user opened the document though, but there's not an option to "show information only when embedded". After I thought about it for a little while, I remembered one of my favorite design elements...programmable tables!
To get the functionality I was looking for, I created a programmable table with 2 rows. The first row should be visible when the user opens the document for reading and editing. The second row contains the formatted abstract area and should only be visible when the document is embedded. Here's where a handy trick comes into play. In the PostOpen event of the "Document" form, I placed the following code:
Sub Postopen(Source As Notesuidocument)
Dim workspace As New NotesUIWorkspace
Dim uidoc As NotesUIDocument
Dim doc As NotesDocument
Set uidoc = workspace.CurrentDocument
If uidoc.Document.UniversalID <> Source.Document.UniversalID Then
doc.~$AbstractTable = "Row2"
This LotusScript was converted to HTML using the ls2html routine,
provided by Julian Robichaux at nsftools.com.
When a document is in an embedded editor, uidoc refers to the container document, while Source refers to the document that is embedded. If the document is opened and it is not embedded, then these two objects reference the same thing. So, I check the UNID and if they are different, I assume that the document is embedded and thus show "Row2" instead of "Row1". Pretty cool, eh?
There's probably some major deficiencies in this that I haven't encountered, but so far in playing around with it, it seems to work pretty well. In any event, the technique may have some useful applications in the future. Let me know your thoughts.
OK...I'll sign out for now. Enjoy playing around with the demo and feel free to share any comments or modifications that you've made. Note that I didn't make any changes to the form yet. That is a challenge unto itself. First I want to get some of the other things out there. The drag and drop demo is coming up tomorrow...keep an eye out for that. Cheers!
Labels: Lotusphere2007, UI design
permalink | leave a comment
Speaking at Lotusphere: Some Final Thoughts
I just posted my overall wrap up of Lotusphere 2007 and what an incredible experience it was. Next time, I am going to try and do a lot better job of recording my thoughts at the time, since I probably forgot half of the things I wanted to talk about.
The highlight of this Lotusphere for me, of course, was getting to speak at the conference for the first time. I had the pleasure of working with one of the greats in this business, Mr. Nathan T. Freeman
. Nathan's breadth and depth of knowledge in Notes is incredible. He is a really funny and entertaining guy and has a great presence on stage. He said that he was anxious before our sessions, but he seemed totally natural and spot on from my point of view. I really hope we'll get to work together again in the future! I want to publicly thank him here...It was great presenting with you Nathan! :-)
Our first gig of the show was BOF202 - Designer's Unite. This was 7 AM on Tuesday morning, so I wasn't sure we'd get many attendees. About 20 people actually showed up. We had an excellent discussion and Nathan and I didn't have to do all
the talking. It was great to put a few more faces with names as well (Kevin
, Richard). As soon as we came into the room, Nathan started rearranging the chairs, having everyone pull them into a circle. :-) It was a great idea, really, as it helped to stimulate the conversation.
Now on to BP101 - Designing the User Experience. I am overwhelmed by the response to this session. I thought it went pretty well, but evidently our lack of being able to rehearse in person didn't put a damper on the enthusiasm of the attendees in receiving the information. Nathan and I were reading through your comments in the evaluations and I am very humbled by the praise you heaped upon us...keep it coming! :-D (hehe...just kidding)
For those of you who attended, thanks very much for showing up. Please remember that the whole point of this session was to inspire you to try and start experimenting with UI constructs. You definitely can
create compelling interfaces in Notes...it just takes some persistence. Several attendees commented to me afterwards that they just "can't do UI", but I think if you keep at it and continue to study sites with good design, you most certainly can improve your skills. If you are here looking for the full slide pack and my demos, please just give me a couple of days to catch up and I will post them (although Nathan is so on the ball he probably already has them up). I will be doing several follow up articles in the new few weeks to drill into much of the theory in more detail, so keep an eye out for that as well. I also invite you to share with the community. If you have a UI that you'd like to show off, send me some screenshots along with a short description. I'll start profiling them here and maybe together we can start to assemble a nice gallery of UI material.
Finally, it was a pleasure getting to meet so many new people this year...thanks for coming over and introducing yourselves. For those of you finding this blog for the first time, Welcome! Below is a quick index to a few of my past postings which relate to some of the topics covered in the session. Cheers!It's Got LayersEmbedded Editors That WorkRethink Your InterfaceCascading Navigation In NotesUsing Border Captions To Make Better Use Of Your ScreenQuick Tip: Simulating A Frozen ColumnSometimes, It's About What's Not There
permalink | leave a comment
Lotusphere 2007: That's A Wrap...
Looking back on it now, Lotusphere week was absolutely amazing and the best one I've attended yet! For one thing, this is the first Lotusphere where I feel that there was so much good stuff to see and do that I probably missed out on half of it. You most likely have already read the announcements of upcoming new products like Quickr and Connections. Both look exciting and promise to help bring in the next wave of collaboration. They do look like true "Enterprise 2.0" applications! I still need to sit down and get my head around them more before I can offer up any helpful opinions, but I do know that after this week, any thoughts of getting out of this business have been banished from my mind! Now the trick is to find the company that will embrace these new technologies and exploit them to their full potential. Composite applications were very much on everyone's mind at this Lotusphere and this is a space that promises to revolutionize our current work in Notes. Once again, this is an area that I really need to study in more detail before I can comment in a meaningful way.
The Blogger Q&A with Mike Rhodin, Doug Wilson, Carol Jones and Jeff Schick was a first time event that I hope will be repeated in the future. It was great to have direct access to these people, but it was unfortunate that we only had 30 minutes, which is far to short of a time for the Lotus blogging community, who we know have an issue with brevity (although Mr. Rhodin had that problem too)! ;-) Mike reiterated the point that 99% of the stuff they are introducing at Lotusphere will be shipping by summer, which is pretty exciting. He also mentioned that the new product announcements represent the largest expansion of the IBM Lotus product line in the company's history! Important to many of us is a question asked by John Head
. He inquired as to how Lotus will be bringing the world of Web 2.0 to Domino and the answer was that a strategy is being developed but that backward compatibility has to be at the forefront of this work. This is a great point I think people sometimes lose sight of as they complain about Domino's web framework, but it is absolutely essential for the large enterprises that rely on it. In case you missed it, Mike Rhodin also just started blogging
Gurupalooza was a fun event, although the time sure does fly. Some of the speakers obviously love
getting a hold of the microphone, although no names will be mentioned... ;-) Kevin Pettitt was live blogging the session
, so make sure to check that out.
booth crew were great and I'm glad I finally got to shake hands with the amazing Bruce Elgort
. I know they gave out all of their T-shirts, so I hope that all of the folks who grabbed them also take the time to check out what OpenNTF has to offer. Speaking of OpenNTF, the BOF had a great turnout, completely filling the room and generating some neat ideas for continued expansion and collaboration.
I had the pleasure to meet up with Jess
in the hallway outside the product showcase for a quick "2 Minutes with the Gurus" podcast
(although refering to me as a guru is probably stretching it quite a bit!) :-)
I didn't get a chance to get to as many sessions as I thought I would, but best ones would be:
- Alan Lepofsky's ID109 - IBM Lotus Notes Hints, Tips, and Tricks
- Ed and Julian's ID212 - How to "Sell" IBM Lotus Notes and Domino Inside Your Organization
- John and Sean's BP304 - Blog It Up, Baby! Extending the New IBM Lotus Domino Blog Template
- John and Alan's BP204 - Integration of OpenOffice.org and IBM Lotus Notes and Domino and
- Julian and Rob's BP312 - Trap and Manage Your Errors Easily, Efficiently and Reliably.
There's some amazing stuff coming in OpenLog
. If you are not already using this awesome, FREE tool to manage your errors, get on over to OpenNTF
and download it today!!!
If I had to sum up Lotusphere in a couple of sentences...I would have to say that one of the coolest things is that there were tons of smart people there and I'm not just talking about the speakers. So many of the attendees had great ideas and have given me many things to think about. The Lotus space is more energized than I've ever experienced and it's quite exciting to be a part of it. I can't wait until next year!!!
permalink | leave a comment
Dateline: Sunday - Lotusphere 2007
Wow...Lotusphere is off to a great start! The place seemed pretty packed throughout the day. No wonder...according to Ed
, there were a lot more folks here than expected for a Sunday. This is great news...can't wait to hear the official tally of attendees.
Only got to attend one session today, as Nathan and I were working on our presentation. We're really excited to introduce this material to people and hope that they are equally excited to check us out. (Here's a hint: If you come to our session, you'll learn the secret to getting a cool Lotusphere goody.)
I met some great folks today (Jess
...very nice to meet you all) and had a chance to reconnect with several old colleagues. That's one of the great things about the 'sphere...the chance to meet friends both old and new.
Keep an eye on this space in the coming weeks, as I hope to bring you some cool UI ideas from our session. Cheers!
permalink | leave a comment
Bruce Elgort - We Knew Him When...
How cool...opened the latest print edition of eWeek
that came yesterday and started reading the cover story on RSS in the enterprise. When I turned to the second page, I was greeted by a familiar face. Our very own Bruce Elgort
is pictured in the article and is quoted a few times. Also very cool is that it mentions Bruce is co-founder of OpenNTF.org
, "an open-source community for IBM's Lotus Notes and Domino developers." Sweet! Congrats Bruce...nice job! :-)
You can find the online version here
.Image Copyright 2007, Christopher Byrne. All Rights Reserved. Used with Permission.
Labels: Lotus Notes, OpenNTF, RSS
permalink | leave a comment
Interface Matters When Taking Notes...
Thanks to Nathan's unmentionable favors
, last night we were the featured guests on the latest edition of the Taking Notes
podcast. We had the opportunity to discuss a little of our user experience philosophy and give listeners a sneak peek into what we'll be covering in our Lotusphere sessions. Please kick back and take a listen
Thanks to Bruce
for the opportunity!
Interface | Matters @ LotusphereBP101 - Designing The User Experience: Why Your Interface MattersBOF202 - Designer's Unite: Developing Innovative Interfaces In IBM Lotus Notes
Labels: Lotusphere2007, podcasts, Taking Notes
permalink | leave a comment
More on whitespace...
If you're interested, there's a nice article on A List Apart
that came out a yesterday. A little different slant (with some examples from print design) and well worth the read. We disagree slightly in our use of the term "passive whitespace", but the general concept is the same. If you missed it, I discussed this topic
last week with some before and after screenshots.
Labels: UI design
permalink | leave a comment
Five Things You May Not Have Known About Me
Alright, I'm game (I was tagged by Nathan
). Let's see...five things you may not have known about me.
I'm so mean, I once shot a man just for snoring...no wait, that was someone else
. Um...I was born a poor black child. I remember the days, sittin' on the porch with my family, singin' and dancin' down in Mississippi. Dang...that was someone else
OK, OK...for real now. Hmmm...I'm pretty boring, actually, but I'll try.
1. Growing up, I was painfully shy. This was true all through high school and probably would have continued into college had I not met my wife, who is one of the most talkative people you will ever come across! I had to learn to get over being quiet if I ever wanted anyone to hear me ever again (although she still dominates the conversation to this day ;-) A few years ago, getting up on stage in front of a handful of people would have had me quaking in my shoes. Now, I'm totally pumped to get in front of the Lotusphere crowd. Funny how these things work.
2. I was inspired to become a "rocket scientist" (my degree is in Aerospace Engineering
) by Mr. Scott
from Star Trek. Seriously...I remember at the age of 6, when I faithfully watched reruns of the show, thinking that he had such a cool job. From that point forward, I never wavered from one of two choices for a career: engineer or doctor. I ended up going with engineering, with an emphasis on propulsion and spacecraft dynamics. Unfortunately, life doesn't always work out as you plan. The aerospace industry is very cyclical, and I graduated from the University of Arizona
during one of the all time lows. So, my first job out of college (after 5 grueling years of study and having no fun) was working in a video rental store in Las Vegas for $5.00 an hour. Talk about a downer! I guess the only benefit of my degree at this point is that I can say "it isn't rocket science" and really know what I'm talking about. :-)
3. Besides my family, my main passion is music. I love listening to and playing music, although the playing part is pretty poor these days. I enjoy many kinds of music, but I mostly gravitate to stuff that is more technical in nature. What most people don't know is the fact that I am a die-hard metal head. This is especially surprising to people since I am pretty mild-mannered and certainly don't look the part. However, metal is in my veins. I generally can be found listening to progressive metal
, due to it's complexity and depth, odd time signatures, etc., but I like almost all genres of metal. For me, the perfect night out is attending a live show. Some of my "musical stats":Favorite Bands: Symphony X
, Dream Theater
, Pain of Salvation
, Iron MaidenFavorite Artist: Frank ZappaBand seen most often: Dream Theater
(7 times)Longest distance traveled to a show:
3990 miles one way (traveled from Cleveland to Gothenburg, Sweden to see Evergrey
record their first live DVD)Cool musical memory:
Attending Mozart's incredible opera "The Magic Flute" then rushing from the venue to grab a bite of pizza before seeing Mötley Crüe
open the Dr. Feelgood world tour (November 16, 1989).
4. As of Christmas, my wife Maria and I have been together for half our lives...yikes! We met while working at a movie theater the summer after high school and we've been together ever since. We dated for a few years, then got engaged and finally married during my last semester of college, over spring break. We had our first kid about 15 months later, then the next two each 22 months apart. Word of advice for the younger people out there: Don't get married when you're in college. All your friends are broke, so you get shafted when it comes to gifts. Plus, they drink all your beer, then leave when it's time for the big basketball game! ;-)
5. Although there is absolutely no one famous in my family, my wife's grandfather was Fred Waller
. Fred was an amazing man and I would have loved to have been able to meet him. He was the person who patented water skis (although he was thought to be the inventor for many years, he was actually beaten to this by Ralph Samuelson). He was also the inventor of the Waller Gunnery Trainer, which was one of the first simulators and is credited with saving thousands of lives in World War II. After the war, he used this technology to develop Cinerama
, which in some ways was the precursor to things like IMAX. He was a prolific inventor with over a thousand patents and overall a pretty brilliant man. He also directed many of the "Negro Featurettes" that played in front of movies in the 30s, working with jazz greats like Billie Holiday and Duke Ellington. He won an Academy Award for his technical work and my father-in-law has the Oscar at his house today (I've tried to lay claim to this...it would be soooo awesome in my movie room!). He knew Rube Goldberg
and Rube once drew him a custom contraption (also something I'd love to get my mitts on!). My son is about to start working on getting Fred into the Inventor's Hall of Fame
Well, there you go...more than you ever wanted to know. We'll return to our regularly scheduled interface stuff now. Before that, I guess we have to continue the game, so I'll tag some bloggers that are writing some cool stuff. How about Jane Griscti
, William Beh
and Eric Mack
permalink | leave a comment
SnTT: Sometimes, It's About What's Not There
Well...it's the first Thursday of the new year, so what better way to kick it off than a show and tell post. Lotusphere always seems to energize people, so I'm looking forward to lots of great SnTT posts from fellow bloggers within the next few weeks.
Today, I'd like to address a topic that is fairly nebulous and certainly open to interpretation by the designer, but one that is very important in user interface development.
Have you ever seen a page or form in a Notes/web application that looked pretty good, but you could tell that something was off? Maybe you couldn't say exactly what, but you might have thought to yourself that, "it just doesn't look quite right". If you've encountered this (or perhaps find this in your own designs), then you've experienced the powerful effect that whitespace can have in an application UI. Whitespace (also referred to as negative space), is defined as the parts of a page that are absent of any content. What's really important about this is that whitespace isn't just blank
space, but space that the designer purposefully
left empty to provide an appealing and usable application interface.
In general, whitespace in UI design is used to:
*Logically separate content areas
*Provide margins and padding
*Aid in reducing strain on the eyes when reading text on the screen
*Help guide the user through the page's layout via subtle visual cues
In simple terms, whitespace can be thought of as the part of the design that helps frame the content and anchor the various elements on the page. Thoughtful use of whitespace can make a good design great, while poor use of whitespace can just make the page look empty or off balance. Whitespace is very important in defining a page's "flow", guiding the user's eye around the page, almost as if there was a dotted line trail saying, "follow me this way--->". As developers, there is often so much we need to fit into our designs...action buttons, fields, text containers, photos, etc. Our general tendency is to want to cram as much as possible into the available screen real estate. This is a bad idea, however, since it usually leads to visual overload for the user. The end result is that their productivity while using your application is diminished. Ever hear the saying that it's the notes that a musician doesn't play that is the true music (the exact quote...attributed to Claude Debussy is "Music is the space between the notes.")? Basically, that's what whitespace is to UI design.
First, lets look at a very simple example...some text within a box.
This is about as simple an example as we could get, yet it is extremely effective in demonstrating the power of whitespace. If you're like most people, just looking at the first box puts a strain on your eyes. This is because you are trying to process where the text begins in relationship to the boundary of the box. In addition, since the text runs up against the border, at every line beginning and ending point, it's like your eye is hitting a brick wall. In the second example, whitespace has been added to pad the text on all sides. This very simple change has made the text far more pleasant to read. You can just flow through the entire block of text very smoothly.
My blog design (which is basically hacked together from a blogger template...I'll update this someday I swear! :-) actually shows poor use of whitespace over on the right hand side of the page. The content, such as my photo, RSS feed, etc., butts right up against the edge of the column. Putting some whitespace in there would enhance the design. Here's a before and after mocked up with a graphics editor. The effect is subtle but effective.
Let's take a look at some more examples I've created. Two images are shown...the original and then one I've fixed up (click the picture to view it full size). Pick which one looks best to you in each set. See if you can identify the reason why one design stands out over the other.
This example shows a personal document database I use to store good articles, blog entries, etc. that I come across. In the first screenshot, the design uses a standard view in the right-hand pane. Since the content extends beyond a single page, one problem I see is that the scroll bars make an ugly, off balancing border around my content. What would look much better is to have some simple whitespace (padding) around this element. With an easy design change (using an embedded view on a page), we get the second example, which has a much better flow. [ Yes, Nathan...I know...I'm going against Fitt's Law regarding the scroll bars ;-) but it looks better...especially with the thin scrollbars of the embedded view. ]
Even more readily apparent is the use of whitespace in the design of a Notes form. Take a look at these two snippets:
This is from the Application Activity Tracking app
that I have on OpenNTF
. The first shows a dashboard screen that is all crammed together, something I see all too frequently in Notes databases. Notice how it is not readily apparent where sections begin and end. If you contrast that with the second screenshot, you'll see that adding a little whitespace around each bordered element makes them appear as discrete containers. Your eye naturally figures out and signals to your brain that each of these boxes actually represent something different. Again, a small change, but one that helps a great deal.
Here's one more...a form with a bunch of fields.
In the first screen, there's lots of misuse of white space. First, there are many places where it's just absent (similar to the other examples) and makes the form look really crowded. Then, there are a couple examples of passive whitespace, which is also something you should try to avoid. Passive whitespace is whitespace that was not intentionally created by the developer. Rather, it's just space that is there due to the way the form is laid out. It's not really very extreme in this example, but it gives the sensation that something is missing. Usually, playing with the alignment and sizing of your layout can correct passive whitespace problems pretty easily.
[ Bonus points go to those of you that realized there's a more egregious error than whitespace on the first form...improper alignment! Those fields being misaligned creates a great sense of imbalance on the form (I'll talk about this more in another post). ]
So there you have it...a relatively simple overview of whitespace and it's use in design. As with much UI stuff, it is really just "advanced common sense"
. Readers who mostly like to sling code are probably rolling their eyes right now, but believe me, this stuff is important. I'm far from a great visual designer, but I endeavour to improve my skills with each assignment I have. Hopefully, as I try to introduce the basics of these concepts, you'll find some value in trying these techniques yourself. As always, I'd love to help you with any questions you might have. Feel free to leave a comment or drop me a line (email@example.com).
Labels: Show-n-tell-thursday, UI design
permalink | leave a comment
Happy New Year (and Reflections On the Old One)
Happy New Year everyone! I hope you've all had an enjoyable holiday season with best wishes for an incredible 2007!
For me, this year is really starting off with a bang. First up is my youngest daughter's 9th birthday. She is autistic and provides our family with many challenges, but her unconditional love for everyone and her humor makes every day an exciting prospect. She definitely has a unique view of the world and it's quite fun (and sometimes sad) to try and see things through her eyes. Next week, we have an exchange student from Costa Rica coming to stay with us through the month of January. This is all thanks to my son, who so generously volunteered for the task earlier in the school year...without asking us first, of course! ;-) I'm sure my wife won't mind having a fourth kid to run around and keep track of as I head out for a week of
fun and sun
hard work and learning at Lotusphere
! From the sounds of it, this is going to be one of the best Lotuspheres in many years and I'm especially excited since I'll be presenting (along with the legendary Nathan T. Freeman
). I hope our session on interface design
will help spark the imagination of more people in the Notes community to work on innovations in this space, as it is the collaborative nature of how we build upon each others' successes and ideas that makes doing this blog so exciting.
On the work front, this should be an interesting year as well. Since my company
is in the midst of a large-scale integration
, there are many uncertainties. At this point, I don't know that Notes will have a place in our future and if that's the case, will I? I already find myself wondering if now is the time to start casting nets to see what opportunities are out there. Should I do the independent consultant thing for awhile? Is now the time to leave Notes or should I throw myself behind the technology even more, using the momentum I've gained through this blog and other activities that have been going on the past few months? All good questions that will need to be answered...probably sooner than later.
As far as this blog goes, I hope to continue to deliver some interesting technical content to you. In addition, I am going to try and discuss more of the UI design ideas that I use frequently, as I have been asked about these topics by many people. This includes more detailed examination of low-fidelity prototyping, usability testing, etc. I've got some good ideas lined up and I plan to begin sharing these shortly after Lotusphere ends (I'll be busy preparing before then...not to mention chauffeuring an additional kid around ;-)
Now for the obligatory 2006 year in review...I promise to be extremely brief so as not to bore you (as if I haven't already). 2006 was an amazing year for me, in that I really rediscovered my love for Lotus Notes. I had wanted to start a blog for many years, but didn't really feel I had the voice I needed to get it out there. Part of the problem was the number of great sites...I didn't think I could add much to the conversation. However, I finally decided that I could focus on a niche aspect of Notes development that was my true interest...interface design. So much of my success in the Notes world has been in applying the principles of usability and good design to Notes applications. I figured that I could start to share some of my ideas with the community in a way that would enhance what others were already doing. Hopefully, I've met that goal at least a little bit. I'm very happy to say that my being asked to speak for the Lotus Developer 2006 conference was a direct result of this blog. Also, through this site I've met some amazing people and that itself is worth it.
In writing some of my posts during the year, I was continually reminded about how cool Notes really is. My hope for 2007 is that IBM continues to succeed with this amazing product.
I also started a new project over at OpenNTF. The Activity Tracking application
has been well received and I think has a lot of great potential, as just a standard productivity analysis tool or even as part of the approach to your company's business compliance needs
. (Thanks for the shout out, Chris!). Look for future enhancements to this tool...additional announcements to come soon.
So overall, yes...it was a great year. Thanks to all of you who stopped by to read and/or comment. Here's to an awesome 2007!
permalink | leave a comment