Jon Hartmann - User Interface Design

UX Videos Article on Smashing Magazine

Tue, 05 Jan 2010 11:53:00 -0500

Check out these videos on User Experiance at Smashing Magazine. I've not had the chance to watch many of them, but there are some gems in there.

Make the Logo Bigger

Tue, 13 Oct 2009 13:18:00 -0500

Found a very funny song about web design while looking for good articles today. Perhaps it will give you a laugh too, since I found it so sadly familiar. Click here for 'Make the Logo Bigger' (warning, it autoplays).

UX Rule: Fixed Content Width

Wed, 07 Oct 2009 13:56:00 -0500

When you're laying out a site, one of the most basic questions you can ask is "Do we make this liquid or fixed width?" Do you let your site fill the user's browser, or do you hold it to a single fixed width? It's a good question, but let me make a suggestion, nay, let me suggestion a rule: Always use a fixed width for your content. [More]

Preventing Multiple Submissions with Prototype and jQuery

Thu, 11 Jun 2009 18:56:00 -0500

If there is one problem that plagues me across applications, its users that are too antsy to wait for the page to come back after hitting submit on a form. Even worse, some people just instinctually double and triple click. How do you keep these pesky users from duplicating records or charging themselves three times for that item in your e-shop? Click "more" to see how I do it in Prototype and jQuery. [More]

Royksopp On Design

Tue, 10 Mar 2009 15:43:00 -0500

Ok, so not the most serious post, but Ray Camden Twittered about this video, and I have to say that it has some amazing diagrams and charts in it. I can't help but think that Edward Tufte would like it.

UX Rules: Four Rules for Form Controls

Fri, 20 Feb 2009 12:46:00 -0500

Time again for another user experience rule, and this time I couldn't stop at just one. I've got four rules for you about forms; one of the most daunting aspects of UX design. You can save yourself some trouble with the following rules:

Rule 2: Ditch the Reset button.

Rule 3: Make your Cancel button look like a link, or make it visually washed out compared to your Submit button.

Rule 4: Make sure that there is at least a 2em distance between your Submit and your Cancel buttons.

Rule 5: Submit on the left, Cancel on the right.

Read more to see my reasonings and an example. [More]

UX Rule: Notification of Completion

Thu, 19 Feb 2009 05:29:00 -0500

So, as I move into exploring the realm of user experience(UX), I'm going to work on building a collection of rules for creating good user experiences. These rules are fast, but they aren't hard: every situation is different, and although these rules will be starting points, some negotiation may be required.

Rule One: All processing must display a notification to the user.

Read more to see my thoughts on when and how to do this. [More]

Page Layout with Body IDs

Tue, 03 Feb 2009 14:23:00 -0500

A while back I read about a technique to maximize the power of CSS: placing a unique ID on the <body> tag of your markup. Make each page have a unique body ID, and you can use CSS to override anything on that particular page if you want. I've played around with this a bit, and found it to be quite powerful technique.

[More]

Envisioning Information

Tue, 13 Jan 2009 15:25:00 -0500

I'd actually ordered this book on Amazon before I read a reference to Edward R. Tufte in Slide:ology, and so I was immensely happy when I finally got my copy in the mail. Envisioning Information is packed with rich examples of presenting complex, layered data in ways that are usable and even visually pleasing. I recommend this book to any one interested in usability and interface design. Be warned though, that this book is dense with ideas, explanations, and images. It reads more like my college biology text book than a normal design book, and the vocabulary is often times as complex. Reading this book can be daunting, but so far, the value I've gotten back out of it has been immense. I think my only complaint about this book is that it is beginning to become dated. Written in 1990, Tufte spends most of his time talking about designs created for printed media, and the examples of computer displays seem very primitive by today's standards. Luckily, media is no impediment to the concepts in Envisioning Information; "flatland" and "chartjunk" are the same if on a poster or on the web.

Slideology

Mon, 05 Jan 2009 16:52:00 -0500

I've fallen in love with Slide:ology by Nancy Duarte. This book covers just about everything you could want to know about how to design effective slide based presentations. If you have delivered a presentation or ever will deliver one, this book is for you. Whats even better is that even if you'll never deliver a presentation in your life, then this book might still be for you. While focused on presentations, the concepts and insights in Slide:ology are very easily ported to the world of web design: make your point as clearly and simply as possible; images can speak louder then words; colors, fonts, images, everything contributes to the messages you are conveying to your audience. Daurte also backs up the guidelines with tons of examples, both in terms of visual ideas to inspire you and in real-world examples of individuals who have employed specific techniques to deliver their message. Give it a spin and see what the world of Power Point can offer web designers.

Why You Must Learn to Love <label>

Thu, 04 Dec 2008 22:41:00 -0500

Once you start thinking about usability of internet forms, it starts to really stick in your head. You catch yourself filling out a form and going, "Man, they could probably get more people to fill this out if they just put a line break here, or used a different font color." Even I, a web developer, tend to shy away from forms that aren't easy to use, or ask for things I don't feel like telling them. Maybe thats why I have come to point that I actually get kind of angry when I see people skip out on using the simplest possible usability increaser: the <label> tag. [More]

The Quiet Death of the Major Re-Launch

Sun, 30 Nov 2008 17:14:00 -0500

I just saw this cool article on the User Interface Engineering website, called The Quiet Death of the Major Re-Launch. This article calls out the "big relaunch" as being a potential pain point with users, and I have to agree whole heartedly. It doesn't really mention it in the article, but I think incremental role out of new features can also help to make realistic expectations for the results of updates. Its hard to get over hyped about updates to a single navigation menu. It also doesn't say that this is the perfect way to find out what changes are increasing your conversion rate; implementing one change at a time over a period of weeks lets you know which change is having an impact, and how.

Designing the Moment

Sun, 30 Nov 2008 16:47:00 -0500

I've finished reading Designing the Moment byRobert Hoekman, Jr., and it was an excellent book to follow up Web Design for ROI. I'd read Robert's other book, Designing the Obvious as well, and this book is no less impressive. Since I spend most of my time in back-end developer land, its awesome to read books which offer not only great advice, but great advice that says that the user experience flows from the beginning to the end of the project; its not the job of just a front end developer or designer. Check it out for great advice on how to analyze your apps to make them more usable, and thus increase conversions.

BlogCFC Tweaks: Easier Category Selection

Sat, 29 Nov 2008 05:30:00 -0500

I've talked about it before, but I find classic multi-selects in HTML to be really hard to use. You invariably have to end up putting some explanation text to let a user know how to select more then one, and its easy to clear your selections everything while trying to select an additional item. I put these ideas into practice in BlogCFC to help with category selection. I replaced the following code in admin/entry.cfm starting at line 391:

With this code:


	
		
			 checked="checked"/>#categoryName#

I also added the following code the admin style sheet ( /includes/admin.css ):


ul.multiselect {
	height: 100px; 
	width: 225px; 
	border: 1px solid silver; 
	list-style-type: none; 
	padding-left: 3px; 
	overflow: auto;
}
ul.multiselect li label {
	display: inline;
	padding-left: 2px;
}

That makes it a lot easier to keep track of categories without messing something up.

My first Webkit and FireFox 3 standards let down

Mon, 03 Nov 2008 11:05:00 -0500

So today I finally found a part of the HTML 4.01 standard that Internet Explorer 6 (and 7) follows better then FireFox 3 and Webkit: <colgroup> and lt;col> tags. Apparently, neither FF3 or Webkit (and thus Chrome) bother to implement these tags. Normally, FF3 and Webkit are on the right side of standards, so its kind of a disappointment, especially when I need the functionality of those tags for a project. If you aren't familiar with them, browse on over to W3School's XHTML reference and get acquainted. Basically, with column groups you can implement nice things like setting a column's background color without adding classes to each lt;td> in that column. I hope that FF3 and Webkit see there way to implementing this feature.