Jared Lewandowski » Web Development

Usability vs. User Experience

Jared Lewandowski — Sun, 28 Feb 2010 17:12:46 +0000

Believe it or not, there is a difference between a high-usability level and great user-experience. Usability is about the ability to use something. Is this product usable? Does it make sense? By allowing the end user to complete a specific task, you are making the product or website usable. User experience on the other hand, is all about feelings and is focused on creating happiness. This one is a bit more of a challenge to pull off, but it’s the most important of the two.

Here’s an example: Why is an iPhone easier to use than any other smartphone? I mean the usability factor is pretty much the same. They both complete calls, manage contacts and calendars, and check email. But it’s the experience that makes all the difference.

Let’s dig deeper into the difference between the two. I recently drove to Nebraska from Utah. On my way, there were examples of both usability and user experiences. At times, the road were straight, flat, and clear of other vehicles, making for great usability. However, in other areas the road was winding, up and down mountains with trees and beautiful landscapes all around. This made for a truly great user experience.

Which do I prefer? Both. Can I have both? No. Why? You end up with mediocrity. A mild blend of of both worlds.

The best thing to do is to not focus on either of them during the design process. Instead, concentrate your efforts on making it easy to be happy. Keeping this in mind, you’ll end up with a much better end result. And a satisfied end user is the outcome of great design.

User See, User Do

Jared Lewandowski — Sun, 13 Dec 2009 05:21:14 +0000

Creating an online experience that people will use doesn’t have to be hard. However, with all the various sites and apps available on the web right now, it can be a daunting task to meet the needs of every user. But then again, that’s not the point and it never should be. Every person is unique and will do things differently, in different environments, with different hardware, and different… Well, you get the point.

Anyway, this is a small rant, but it shouldn’t be taken lightly. Some things to remember:

You are NOT the ONLY user. This is very important to keep in mind as you develop your site or application. Too many times have gone by where I have forgot to think about someone else using the site other than myself.

Users will do what they normally do. We all have habits when it comes to interacting with software and websites. Try not to reinvent the wheel when creating the process or how something gets done. For instance, we all use email the same way. Folders are on the left, messages subjects are on top, and content below that. There’s no reason to move any of this around.

Test, test, test. Don’t forget to test before, during and after the website is built. You’ll be surprised by the feedback you get along the way and will be glad you knew about early on and not after you release the site to the masses. Testing doesn’t have to be done in closed quarters behind mirrored windows either. Keep it simple. And always test the user in the environment they would normally be in.

Try to apply these tips as you develop your next website or application. You’ll build a better product and have a better reputation from your users. And remember: What the user wants, they get… Or they leave and rarely come back.

Writing Good CSS

Jared Lewandowski — Fri, 02 Oct 2009 16:54:17 +0000

It’s really easy to find yourself wondering how your CSS got to be such a mess.

Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are three tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you (or those you work with) a headache.

1.) Stay Organized

Just like anything else, it pays to keep yourself organized. Rather than haphazardly dropping in id’s and classes in the order in which they come to mind, use a coherent structure.

It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance.

Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.

Use a structure that works best for you while keeping future edits and other developers in mind.

2.) Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.

3.) Use Useful Naming Conventions

You’ll notice above where I declared a couple of column id’s and I called them col-alpha and col-beta. Why not just call them col-left and col-right? Think of future edits, always.

Next year you may need to redesign your site and move that left column to the right. You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position.

Sure, you could just reposition that left column to the right and keep the id as #col-left, but how confusing is that? If the id says left, one should expect that it will always be on the left. This doesn’t leave you much room to move things around later on.

One of the major advantages of CSS is the ability to separate styles from content. You can totally redesign your site by just modifying the CSS without ever touching the HTML. So don’t muck up your CSS by using limiting names. Use more versatile naming conventions and stay consistent.

Leave position or style specific words out of your styles and id’s. A class of .link-blue will either make more work for you, or make your style sheet really messy when your client later asks you to change those blue links to orange.

Name your elements based on what they are, not what they look like. For example, .comment-blue is much less versatile than .comment-beta, and .post-largefont is more limiting than .post-title.

With these three simple suggestions in mind, not only will you write better looking CSS, but you’ll communicate your intentions to coworkers more clearly and you won’t be lost when it comes to a future updates. Enjoy and happy coding!

Bonus: Here are 20 more useful CSS tips from HONGKIAT.com

Web Design & Development Checklist

Jared Lewandowski — Fri, 07 Aug 2009 15:23:20 +0000

Whenever I’m working on a new website, I often review it at every stage, making sure the site is W3C & WCAG compliant, whether or not the overall design is properly targeting the audience, verifying compatibility across the most common browsers (and yes, IE6 as well), and so on. I have a pretty good mental review process and every critical area is covered before deployment. I often wanted to have a list of everything I reviewed, verified and approved, but just never had the time to compile it. Then a few weeks ago, I came across a web design checklist by Mert Tol which contains a very concise and detailed list of items to look for when building a website.

I’ll forewarn you, the list is lengthy and very tedious, but all the points mentioned are spot on to ensure a smooth design and development process. And while some of you might think it replaces some of the freedom in design work, it actually gives back so much more. After all, there is balance and order in great design.

View the Design Checklist by Mert Tol >>

Web Developer Extras for Safari 4

Jared Lewandowski — Tue, 09 Jun 2009 21:30:26 +0000

I use Firefox as my regular browser, but that may be changing very soon. I recently discovered the web developer tools available for Safari and other WebKit browsers like Google Chrome. These features are almost identical to Firebug for Firefox, and that’s a HUGE plus for me.

To enable the developer extension, type the following into Terminal:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Once you restart Safari, you should see an “Inspect Element” option if you right-click anywhere on a web page. So far, I am very impressed with the interface and debugging options it provides, along with the overall speed of WebKit browsers.

Using @import in CSS

Jared Lewandowski — Thu, 23 Apr 2009 16:03:49 +0000

I’ve been using CSS quite frequently over the last few years to design my web pages. In the process of using it, I have come across some very useful features that have made my design strategy and develop phases much more enjoyable. At the top of the list is the @import rule. This rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.

To use the @import rule, type:

The url() is not required. The double quotes are required for valid XHTML, but browsers that support url() tend to support it with or without quotes.

You can also include an @import rule in a style sheet with styles:

@import rules must always be first in a document

Finally, you can also import a style sheet for just a specific media:

This acts the same as if you had defined the media type in the