Usability vs. User Experience

28 Feb 2010 at 10:12

Jared Lewandowski

Web Development

1 Comment

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.

What the UX?

16 Feb 2010 at 23:07

Jared Lewandowski

General

No Comments

This is more of an FYI than anything. A few weeks ago, I decided began a micro blog aimed directly at User Experience (UX). This allows me to focus on how I, as a designer, can best communicate my design efforts to the end-user most effectively. That said, the blog will serve as my primary outlet for all things UX.

http://jaredlewandowski.tumblr.com/

Now, go add it to your RSS reader!

User See, User Do

12 Dec 2009 at 22:21

Jared Lewandowski

Web Development

No Comments

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.

10 Lessons We MUST Teach Our Children

04 Nov 2009 at 12:57

Jared Lewandowski

Family

1 Comment

I love my kids. All 5 of them. Often I think about what I can do as their father to help them each grow and reach their fullest potential. That said, here’s a list of 10 things I believe we, as parents, should teach our kids while they are young (and teachable). Because before you know it, they will be on their own and even parents themselves.

For Sons

  1. Work hard, even when no one is watching. The definition of integrity is doing the right thing, even when no one is watching.
  2. Honesty actually is the best policy. Teach your son the value of honesty from an early age.
  3. Have a good handshake. Inspire confidence in your son. Encourage him to look people in the eye when he talks to them and to approach every situation with confidence (not pride, but confidence).
  4. Always treat women with respect. This is an area where your son will do as you do, more so than listen to what you say. It is essential that you talk to him explicitly about what it means to respect women – starting with his mothers and sisters – and also show him in your actions and the way you treat his mother.
  5. Serve your community. So often, the decisions we make affect so many other people. Talk to your son about how his decisions and actions affect others, and serve with him. Find a local shelter or soup kitchen, give to a clothing drive – or let him pick how he wants to serve. It is never to early to start volunteering together.
  6. Don’t be afraid of or ignore emotions. So often, it seems that manhood today is associated with “strong and silent.” However, your son will be happier and healthier if he learns to acknowledge his emotions and work through them. Encourage your son to talk to you about how he feels about certain situations. Who knows – it could be good for your emotions, too!
  7. Be able to cook and clean for yourself. Your son will probably live on his own for at least a few years. Don’t let him depend on mom for everything. Even if his cooking skills stop at scrambled eggs, it is important that he learn to take care of himself.
  8. Be smart about the risks you take. Boys tend to be natural risk-takers, which can be good, but these tendencies also need to be guided. Encourage adventure while teaching your son to think through his decisions.
  9. Know your weaknesses. Today’s culture is filled with temptations and distractions – particularly for young men. Talk to your son about the importance of knowing yourself well enough to know your weaknesses – and how to avoid and walk away from risky situations.
  10. Don’t take your blessings for granted. Remind your son how fortunate he is. It’s easy to lose sight of our blessings, and it is a good reminder for all of us.

For Daughters

  1. Work hard, even when no one is watching. The definition of integrity is doing the right thing, even when no one is watching.
  2. Honesty actually is the best policy. Teach your daughter the value of honesty from an early age.
  3. Modesty isn’t an old fashioned ideal. You can be modest and still be trendy. Emphasize that there is nothing wrong with “leaving something to the imagination.”
  4. Protect your heart. Encourage your daughter to proceed cautiously in dating relationships.
  5. Serve your community. So often, the decisions we make affect so many other people. Talk to your daughter about how her decisions and actions affect others, and serve with her. Find a local shelter or soup kitchen, give to a clothing drive – or let her pick how she wants to serve. It is never to early to start volunteering together.
  6. Focus on the beauty on the inside. Our culture puts so much focus on outer beauty and it is difficult for girls to develop positive body images. Affirm your daughter’s beauty – inside and out – and encourage her to focus on true beauty: inner beauty.
  7. Don’t be afraid to take risks. Encourage your daughter to pursue her dreams and take (reasonable) risks to advance her learning, her career, and provide enriching learning experiences.
  8. Gossip is dangerous. Girls are known to gossip. Deal with this habit early on and talk to your daughter about how destructive gossip can be.
  9. Don’t be afraid to walk into a room alone. This is all about inspiring confidence in your daughter. Teach her to have a firm handshake, look people in the eye when she talks to them, and to be able to be confident even if she’s not surrounded by her three giggilng best friends.
  10. Don’t take your blessings for granted. Remind your daughter how fortunate she is. It’s easy to lose sight of our blessings, and it is a good reminder for all of us.

Yes, some things overlap, and some things that you teach your son, you should also teach your daughter – and vice versa. It’s important to know your kids’ personalities so you can know what they need to learn and how they need to grow.

Writing Good CSS

02 Oct 2009 at 09:54

Jared Lewandowski

Web Development

No Comments

css_reset

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.

best-css-02

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.

best-css-05

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

Busy, Busy

03 Sep 2009 at 21:51

Jared Lewandowski

General

No Comments

Sorry for the lack of updates the past few weeks. I have been busy working on so many things that I barely have time to keep up. I hope to be able to dedicate more time to focus on the blog in the months ahead.

Of course, you can always catch me babbling at twitter.jaredlewandowski.com

Web Design & Development Checklist

07 Aug 2009 at 08:23

Jared Lewandowski

Web Development

No Comments

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 >>

Keep Your Characters Straight

16 Jul 2009 at 09:11

Jared Lewandowski

General

No Comments

dock

Twenty-six letters aren’t enough for many of the projects I work on. I need accented letters, symbols and all the characters that make up a full character set. I also need a way to easily use those characters that don’t appear on my keyboard. Not all software apps come with built-in glyph tools and, if you routinely switch back and forth between different programs, a built-in tool may not be enough. Whether you’re typing up a technical document or laying out an ad, having a character selection tool that beats the standard Character Map can help you get the right glyph every time.

Character Tools on Mac

Since I’m an avid Mac user, I’m going to focus on the software I use first. And surprisingly enough, there are a number of character management widgets for Macs. Personally, I use Symbol Caddy — it’s a Dashboard widget that allows you to copy symbols from the widget into whatever app you’re using. It also offers an HTML mode, which provides you the HTML entity code for the character. It’s particularly easy to use, with characters organized into specific groups.

The fact that Symbol Caddy is located on the Dashboard makes it easy to quickly access and then switch back to the program I’m working in. It significantly speeds up my work because I don’t have to launch a separate program or hunt around for where Character Map might have hid a particular symbol.

An alternative that also operates through the Dashboard is CharacterPal, which provides shortcuts for individual characters as you mouse over them. CharacterPal offers a few more tools than Symbol Caddy, including the ability to view special characters in different fonts before copying them as well as the ability to choose between a variety of different keyboard layouts. There are also other character management tools available for Macs, including both stand-alone applications and other Dashboard options.

Character Tools on Windows

While the various versions of Windows come with Character Map, there have been some efforts to improve on that particular tool. GlyphThis is one alternative, offering features like the ability to change grid dimensions as well as improved capabilities for including symbols and characters from Wingdings and other glyph fonts without having to constantly switch back and forth between fonts. GlyphThis is the work of one person, Matthew Fowler, but he’s been very good about updating the program as needed.

The alternatives beyond GlyphThis for PCs are relatively limited. The updates made to Character Map in recent versions of Windows does make it a more useful tool than previous versions. Depending on how heavily you use special characters — and how willing you are to memorize a long list of keyboard shortcuts — you can make Character Map work for you if need be. Additionally, many font management applications can provide you with a way to look through individual characters. A few options include Suitcase and MasterJuggler; prices can vary significantly.

Protecting Your Child’s Privacy Online

15 Jun 2009 at 08:50

Jared Lewandowski

Family

No Comments

My 8-yr old son, Nicholas, on the laptop.

My wife and I have five kids, all under the age of 10 years old. The three oldest (ages 5, 8, and 10) are already familiar with the Internet and Google for searching for kids games and activities, and the eventual school report. We have recently taken the steps to ensure they will not accidentally stumble across a inappropriate sites by configuring OpenDNS on our home network. Also, we’ve found there are additional methods we can take as parents when it comes to protecting your child’s personal information and privacy online.

  • Check out sites your kids visit, and see what kind of information the sites ask for or allow kids to post.
  • Talk to your child about the risks and benefits of disclosing certain information, especially in a public forum.
  • Take a look at the privacy policy, which should say what the site does with the information it collects. Then you can decide how you feel about it.
  • Ask questions. If you’re not clear on a site’s practices or policies, ask about them.
  • Be selective with your permission. In many cases, websites need your okay before they’re allowed to collect personal information from your kids.
  • Know your rights. For example, as a parent, you have the right to have a site delete any personal information it has about your child.
  • Report a website. If you think a site has collected or disclosed information from your kids or marketed to them in a way that violates the law, report it to the FTC.

We’re all familiar with the web by now and over the years have come to know first-hand the dangers that are out there. When it comes to our children, we can never to be too safe.

To expand on the points above and to learn more about how you can protect your child’s online privacy, please visit OnGuardOnline.gov.

Web Developer Extras for Safari 4

09 Jun 2009 at 14:30

Jared Lewandowski

Web Development

No Comments

webdeveloperI 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.

← Older Entries