Having a good site design and content that people enjoy is important. Even more important are the subtleties of your site. A handful of minor details that can add up to make a big impact…in your favor or against it.

Subtleties are how software designers create such great interfaces and products, they’re how famous designers make purses people will pay insane prices for, and they’re probably the reasons behind why you hate or love your car. There are many details to be aware of, but here are a few simple ones that can help you give a pleasant and appealing experience to your users.

Make Your Text Stand Up

Text is what you communicate to the user through. This is why it’s important to have clear and concise text that makes sense to the user within the current context. Let’s look at an example:

Looking at Cork’d, we can see that the text existing on their site (the Good side) is very to the point and attractive, making the user want to join the community. The text on the right side (the Bad side), while clear and concise, lacks any lipstick to make the user want to initiate action.

The text on the right is, unfortunately, text that we see in many cases. This shows how easy it is to tweak your existing text to create a little bit more draw. The basic rule is to give the user a little more than the facts, but not a short-story. This is part of your site’s marketing, don’t assume your developers know how to write properly.

Continue for more…

Developing mobile websites is common these days. Devices like the iPhone allow us to have an almost desktop-like experience and devices like the Motorola Razor allow us to get basic information on the go.

In developing these sites, we must be mindful of what we are trying to accomplish with the site, but more importantly, what the user is trying to accomplish with our site in a mobile setting. These 5 tips are helpful reminders and methods to keep your mobile sites user-friendly and task-oriented.

1. The Lowest Common Denominator

Deciding which devices your site will run on is hard. As far back as last year, research showed the iPhone claiming nearly .1% of all internet traffic (including desktop browsers). Even more research showed it claiming almost 28% of the smartphone marketshare in February.

My recommendation? Develop for smart devices first (iPhone, Windows Mobile, etc.) and then, depending on your audience, support lesser browsers with a gracefully degrading presentation of your site. This keeps your advanced users happy and coming back, as well as keeping basic info available for casual mobile users.

2. Don’t Try To Do It All

You know what tasks users perform on your site. You know the pages they visit and the functionality that they need. For your mobile experience, start with the most used features of the site and leave the rest for the desktop.

The most common aspects of mobile sites that I see unused are commenting, ratings, and profiles. This could be due to users logging in to get more personalized information, but when it comes to interaction, if they’re on the go, they’re most likely not interested in contributing to the site at that moment. Keep this in mind when deciding which aspects of your site to take mobile. It can save you unnecessary effort and time.

3. The Environment

The most important aspect to keep in mind when developing a mobile experience is the environment of the user. Where are they? What do they intend to accomplish in that setting? If you’re walking downtown and trying to use a mobile site, the last thing you want is confusing navigation, lengthy pages, or to have to login for some basic information. Many sites forget this when developing their sites though, they imagine someone sitting in a cafe with nothing but time on their hands so that they can navigate a site and (maybe) get what they’re looking for.

This point pulls back in the idea of not trying to do it all on your mobile site. Having a task-oriented mobile site will ensure your users are kept first priority in the experience and it also ensures that they won’t have a hard time finding what they need. If you find that they do need more features, consider what platform they are mainly using and think about creating a native application (Windows .NET, Java, or Cocoa)

4. Mobile Advertising

Do it well or don’t do it at all. Mobile advertising is getting a bigger push as content becomes more and more mobile-centric. Google has announced more solutions for mobile adsense and more advertisers are seeing its use to get someone’s attention on the go. Ok, so mobile ads make money, but do they make sense? Not always…

I believe that in order to have effective mobile ads, the page that clicking on the ad takes you to must support the mobile experience too. I have seen many mobile ads that take you to a normal homepage that is not enhanced for a mobile experience, talk about inefficient. The ad must also act as an incentive for the user, like a coupon for a place they might be close to. To get users wanting to click on ads, we have to offer them something for doing so, not just take them somewhere pushing something new to them. It has to make them want to act.

5. Address The Address

Getting to the mobile version of a site can sometimes be a pain. Is it m.site.com? or www.site.com/m? or www.site.mobi? If you’re only catering to one address, ask yourself why. Ensuring that the user gets to where they want to go is essential and making it that much easier for them to get there is what your philosophy should be.

If your site is running PHP, you can catch the user and re-direct them based on their browser in the htaccess file. Javascripts also can lend this feature to other types of sites. Though as standard, when you set up a mobile site, set up m.site.com, www.site.com/m, and buy a .mobi address for it. It will make sure that however your user is used to getting around mobile sites, they won’t have a problem finding yours! (This also applies to iPhone sites, make it easy for them, set up iphone.site.com and www.site.com/iphone)

Quick + Easy = Great Mobile

Some of these tips may seem obvious, but the point that I’m trying to make is that a lot of times we get overloaded with feature requests for mobile sites and end up trying to do too much with them. People that are on the go need information quickly and remembering that is important and often times forgotten. Making your mobile experiences quick and painless will lead to happier users and help solidify your mobile presence.

Wireframes are an essential part of the project process that many developers tend to leave out. Wireframes can speed up project development times, create more meaningful user testing, and get programmers and designers on the same page. They create a great balance of initial function design and graphic design that gives both design and programming teams something to go off of. If you’re not using wireframes yet, my hope is that after reading this, you will!

Benefits!

By creating wireframes first, you outline the functionality (what has pagination, what happens when you click “this”, etc.) and basic layouts for pages (what goes where). You can easily move elements around and ensure that you’re creating a very usable product, while keeping everyone on the project informed. Let’s look some more at how wireframes can help.

• Users are emotional. Wireframes and prototypes are generally gray or monochromatic in color. This lends itself well to initial user testing. They/You can focus more on actual functionality than users’ reactions to colors, pictures, text, etc. User testing can be hard because people have biased and emotional responses to certain things, this helps alleviate those situations. Wireframes also help you test earlier on in the process. You can see what’s working and what needs some revising before the design is set in stone.
• Designers can make it pretty. This will give your designers a place to start, even if you both decide to move things around, it’s at least a non-blank canvas. Graphic designers typically don’t want to design forms, am I correct? This lets them do what they do best without wondering what needs to happen on the page.
• Programmers can program. Knowing what functionality needs to exist upfront will make your programmers happy and make teamwork easier for them. This allows them to breakdown what/where/when action happens and how to account for it, as well as how best to delegate the work among themselves.

Tools & Resources.

Hopefully you’re thinking, “this is great, how do I start?” Well, the good news and bad news is that there isn’t really a standard for how to draw wireframes. There are however, many people with good ideas and resources to go off of. Let’s start with the programs:

• OmniGraffle Professional - Link. This is by far my favorite. It’s very easy to get up and going with and offers many features that can save you time (manual guides, presentation mode, multi-page HTML export). Another plus is that it’s very easy to get some basic user testing done with it. There is one caveat though, it’s Mac only.
• Microsoft Visio - Link. I’ve used Visio extensively and it’s a great tool as well. It’s been the defacto standard for diagrams for a long time on the PC and a lot of people have continued to carry on with it for wireframing. You won’t get the same presentation modes that OmniGraffle offers, but you will find more stencils and templates available on the web. It’s a toss up, but Visio is PC only.
• Adobe Dreamweaver - Link. Although Dreamweaver isn’t really suited for wireframing, some people use it to easily mockup HTML and get the process going. It’s a good tool, but I think if you are serious about wireframing, you’ll have better luck with one of the two programs listed above. Dreamweaver is available for both PC and Mac.

So now that you have your tool picked out, how about some stencils and templates to get you going…

• Graffletopia is a great site with stencil kits of shapes you can use in OmniGraffle.
• Garrett Dimon has some great templates that you can start working off of, available for OmniGraffle and Visio.
• Yahoo! has an entire stencil set of their UI shapes that you can download. The nice thing about their package is that you can not only get it for OmniGraffle and Visio, but they also offer PNG and SVG versions. Great to hand off to your designers to get everyone on the same page.
• Urlgreyhot also has great stencil kits for Visio and Omnigraffle.

The thing to keep in mind is that not one stencil kit will have all the elements you’re looking for, but a combination of them will get you where you need to be. Anything else you need can be easily drawn.

A Better Start.

Since I’ve started using wireframes to start out projects, there’s been no looking back. They help to get ideas across to other team members, as well as ensure that everyone is on the same page. I’m sure you’ll find that as you move forward using wireframes, projects will get easier to get everyone moving on. There’s no waiting on comps or writing code that may not get used.

Let me know what your experience has been and if you have any tips to pass along!

Netflix is the best when it comes to movie rentals by mail. They have quick turn-around and their site is easy to use, but they sorely lack in one area…envelope design. It’s no big secret that the envelope they provide is awkward to use correctly. The envelope is upside-down when you put the movie in it from the right and it’s a toss up as to whether you have the barcode showing through the cutout on the back. It’s just plain bad design!

What’s Human Nature?

In most interaction, right to left is a common thing. Think about it…CDs, DVDs, books…heck, even the iPhone homescreen navigation makes you swipe right to left for more screens. The point is that it’s something that’s now ingrained in our culture and way of life.

When we do these actions, whatever is in front of us is still readable, right-side up.

The Problem!

If you’re trying to put the movie back in their envelope, intuitively, good luck.

First…it’s upside-down, if the address side is facing you. Then, the text on the white sleeve that the movie summary is on is facing away from you, this allows the barcode to show through their cutout, though, this is also assuming that you’re putting it in with the sleeve opening facing to the top…ugh, you see the design issues here?

Resolution.

If they would just change the way they’re printing information on the envelopes and the sleeves, this could all be avoided. It’s not a huge undertaking and it could even decrease their processing time (by a small margin probably, but hey, it helps). Here’s the change-up:

• 1. Flip what’s printing on the address side 180 degrees. This allows people to naturally put the movie in from the right-hand side. This just makes sense.
• 2. Print the barcode (the one that shows through the cutout) on the back of the white sleeve…for all 4 orientations (up, down, left, right). This would increase the chances that the barcode is showing through the cutout. It also makes it more natural for the person to put the sleeve into the envelope with the summary facing them.

People Don’t Notice Great Design

It’s true. People notice poor design, but when something just works, they’re too busy using it to notice how the design is working in their favor. It’s the same reason why companies like Apple do so well with their products and interfaces. It’s many small things that add up to make something great!

I do think Netflix is a great service, but I do think that they could spend a bit more time on making the interaction design more fluid and intuitive for people. Am I wrong?

We’re on break and drinking frappuccinos and red bull. We just got done with Rob Jones talking about web analytics. He brought up some great ideas and furthered my opinion of how important usability testing is. Even if it’s small scale and cheap. He pointed out a book that I’ll be reading when I get home: Paradox of Choice by Barry Schwartz. It talks about how less is more and the psychology behind it.

Before him, we listened to Garrett Dimon talk about the development of UI and keys things to keep in mind and how to open your mind to new things while developing interfaces. He paid great attention to subtle changes of color, bolding, typography, etc. to make impact on the interface without pulling attention away from important aspects of the layout.

He also helped me find exactly what I was wanting for my sketch book. I bought a plain page book and find it still not what I like, but he spoke about the Dot Grid Book. It’s basically a glorified sketch book with a grid of dots to help form lines and boundaries for designing UI ideas. Fantastic. I ordered one.

Next is mobile design.