No I Don’t want to mailto:

Mailto: links are terrible. You know the ones that open your desktop email client and fill in the email for you so you can ‘contact’ whatever site has this terrible usability.

Let me back track a bit, some mailto: links are terrible. The ones that really get my hate on are not the ones that are around an email (that makes sense) but the ones that are around text like ‘contact us’.

First the fact that ‘contact us’ text opens my desktop email client is not really all that clear. Second how do you know I even use desktop email? Most users are using something like gmail, hotmail, yahoo, and probably don’t even have a desktop email client.

So with your stupid mailto: link you’re suddenly making your user scramble to figure out what the hell is happening as some random program they’ve maybe never even seen opens. Sure they figure it out eventually but I know I just give up and don’t bother getting in touch with your company.

If you’re using a mailto: link for contact at least make it be around the email that you’re sending to and make it look like a link from the rest of your site.

A proper contact page should include and email to contact along with a form and a phone number. Let the user decide how they want to contact you. Don’t enforce your terrible design/usability ideas on them.

This rant was inspired by this otherwise beautiful site. Look in the footer for the link that got my rant on.

Seriously: Just Build Applications and Interfaces that Work

Adobe Logo

Adobe Logo
The problem

So here I sit with a wonderful copy of CS4 running on my machine. I would love to scan something into my lovely version of Photoshop but unfortunately I can’t. Why is it, you ask, that I can’t scan something directly into Photoshop CS4? Well it seems that there is no official TWAIN support for 64bit in Windows so Adobe didn’t include it. I’ve never had trouble with TWAIN on my Mac so why should I install the plugin manually?

The Rant

Here’s the thing, I don’t care if there is no official support. I just spent hundreds (thousands if you bought a full CS4 package) on a piece of software and it doesn’t work. I don’t care about the reason I just want to be able to scan things directly into Photoshop. It worked in CS3 it should work now too. If there is no official support then write unofficial support for it. For the Mac have an extra check box that includes it by choice. Don’t make us dig through a disc image and manually install it.

This also made me think of Linux and Ubuntu and how I don’t care about their partially ‘holier than thou’ attitude towards flash and non-open technologies. Until Ubuntu just works with the web out of the box no one but nerds (I use it. I am a nerd) is going to use it.

My wife doesn’t care about some philosophical argument on how things should be open. She wants to get a new computer go to YouTube and watch a flash video. Sure she may have to update a plugin, but enable ‘restricted extras’, nope she might as well just toss the machine out.

Again we can relate this to the favourite philosophical argument of the web designer, dealing with IE 6. As I wrote a few weeks back, clients don’t care about the philosophical arguments. They want their site to work for their clients. So lets cut the crap and if the user base justifies it, support IE 6.

The Appeal

So here is my appeal to software companies, and web designers. I don’t want to hear the whiny crap about why things don’t work. I just want it to work. It’s not a big request to scan things into Photoshop. It’s not an out of touch request to want to watch flash videos without extra work. We’re not crazy for wanting to support the browsers our clients use. So do what’s right for your users and leave the crap for some other bad company.

The Resolution

This also means that as a web designer I need to cut the crap. Interfaces should make sense. You should look at it and it should work. We shouldn’t build craptacular philosophical arguments to justify bad interfaces. Things should be designed to make sense so just do it. The competition is only a click away.

Don’t Get Your Design’s Stuck on Language

e-commerce site
e-commerce site
demo e-commerce site

I’ve been designing lots of e-commerce projects lately and a theme I’ve been finding in the designs is the buttons. Specifically the implication of buttons.

We’ve all seen buttons on store that say “Add to Cart” or “Purchase” or whatever but does the simple word convey enough meaning?

The Thoughts

I am more and more of the mind that buttons with text on them don’t convey quite enough. Language doesn’t transcend cultures really. Sure lots of the world that is online would read English but why put that barrier in front of potential customers? I look at other UI elements from web browsers and applications and they provide more information than simple text.

Look at the back button on your web browser. No text is really needed to know that pressing the button will move you back in your browsing history. Same goes for the stop button and the home button. They stand alone without the text. Whey then do so many websites require descriptive text on the GUI elements?

The Simple Solution

Lately with my buttons on sites I’ve been working really hard to have a single symbol along with the button text to convey what is happening when a person clicks on a button. Submit buttons have typically been getting ‘>’ on them as well. I feel submit implies a forward type of motion though ‘+’ would also create the feeling of addition.

Buttons for purchasing products have been getting the + symbol along with the “Purchase” text. When you click it you are adding something. Similarly the “Remove” buttons have been getting the – symbol along with the text.

I’m simply trying to convey more from a usability standpoint. I want to make it easy on users with reading difficulties, or that don’t have a native language of English, by having a stand alone symbol to represent the action.

Am I alone here? What else can we do visually to make site more accessible across language barriers? How do you address these issues?

Designing for Small Screens

stack of dell mini 10V netbooks
stack of dell mini 10V netbooks

Netbooks are becoming very popular today because of the price and the true needs of 90% of the computing population. Most people are just checking their email, getting on Facebook, tweeting a bit and maybe wordprocessing. Most people don’t need anywhere near the horse power provided by fullsize laptops and desktops.

Even for myself the only thing I really need my desktop for is to work in some of the Creative Suite Apps (really only Ps, Ai, and Id). Most of my coding can be done just fine on a low powered laptop. Then throw in the portability and people are sold.

This brings up and interesting question for designers though. At one point the standard for screen resolution was 800px x 600px. Then more recently it has moved to 1024 x 768, this in fact is what I have been designing to for the last year or two. With the rise in smaller screen sizes (iPhones, iPod’s, smartphones and netbooks) should we be looking at the way we design our sites again?

The Example

I love the application Evernote. I use it almost daily. I most often use the desktop clients but when I’m on my Linux machine I’m stuck with the web inteface and then I have a problem. While all of the toolbars and items at the top of the screen are needed by the time I was actually editing a note I could see about ¼ inch of the editing window.

shot of the small edit window on my netbook
shot of the small edit window on my netbook

Being a fairly advanced computer user I just went in and reduce both my default system font size and then in Firefox my default browser font size and took the text labels off of the buttons. Then I flipped Ubuntu over to the Netbook desktop version and lost the bottom toolbar on the system. While all of these changes made editing a note online okay it still isn’t a great experience.

My point is this, most users just wouldn’t take the time. They just would have left the site if it wasn’t usable. Really Evernote is a decently designed site but it doesn’t take small screen size into account.

The Solution?

My first recomended solution for Evernote would be to let users toggle some of the bars at the top of the site. Add a bit of javascript in, make is persistent for a user. Problem solved. I sign in with my netbook some of the top bars are folded shut and I have a ever usable web application.

A second option would be to perform some browser sniffing (controversial I know) and present a slightly altered layout to those on smaller screens. Again we get a web app that is very usable on smaller screens without affecting the bigger screens many people have.

My Resolution

I suppose this all comes down to evaluating your user base and providing good experience for as many as possible. At the very least make sure that when you design you at least put some thought into what people will see on a screen without a lot of vertical pixels. Resize your browser to 600px high and see how usable the application or site is. If it’s not good give a bit of thought on how the UI can be improved for small screened devices.

5 Ways to Keep Your Cool

keep your cool

keep your cool
While inspired by the heat I am currently experiencing in BC this has nothing to do with that type of heat. We have all had a client that did more than ask us for a ‘bigger logo.’ You know the client that you sit with and brainstorm for new ideas for the design work. You decide on a direction, follow it and when you show it to the client they say that they do not like ‘grunge’ or it is ‘too corporate’ or whatever, despite the fact that they sent you in that direction anyway. So here it is 5 ways to keep your cool and be professional.

  1. Take a Deep Breath
  2. Do not say the first thing that comes to mind. Wait for a second think about your response and then when you have taken that 30 second pause respond. Often the first thing that come to mind is not the most desirable thing to say to a client you want to keep.

  3. Refer to the Scope and Direction Meetings
  4. This one should be your standard response. If you have provided work that meets the direction provided earlier in the relationship then you need to refer back to it as the basis on which to proceed with this discussion. Remind them you already agreed on this direction together. Get them on your side and move forward and move on to the critique for revision.

  5. Remember Revisions Should Happen
  6. I know you put so much work into the initial concept for the client but revisions should happen. It is a very rare thing that you will hit the design perfectly the first time. If the client is truly invested in the site they should question some things. Fire is what refines gold. Critique refines design so it can come out a pure, beautiful and functional as possible.

    The counter point to this is if they do not have any critique question them specifically about items on the site to get them talking about things for consideration. Do not let them just get away with “it’s perfect.” A response like that is just a recipe for disaster later when they decide the day before launch there are changes needed.

  7. Listen Deeper
  8. If revisions should happen learn to listen to the critique for more than just the words the client is saying. Sure the other designers you network with know how to express themselves when the do not think a design fits the target market but most clients will never articulate well. Part of your job as a designer is to help them articulate the items for revision. Listen for themes in the critique. I once had a client that said the whole colour scheme was wrong. After talking it over what he really meant was there was not enough contrast between background layers. With a small tweak to the shade of a colour I had a happy client.

  9. Conflict Management
  10. No matter how hard you try, at some point, conflict will happen. When this comes up you need to be more than just a designer, you need to be a conflict resolver. I have a BA in Psychology and the listening skills and conflict resolution skills I learned in my degree have helped me in more than just work. Go out and take a course on conflict management. It will help you in more than just your business life. You friends, spouse, partner will all thank you for it.

Bad Forms Provide Bad Feedback

Lately I’ve been looking at my site and coming up with a few pain points that I’d like to address with some small redesigns of the site. My footer contact form (and it’s ‘contact page’ counter part) are two items I would like to address. While they aren’t bad they could definitely use some refinement.

So I have been doing what any designer does. I bought a copy of Snagit, which I will review later, and started capturing contact forms and form fields that I liked. I also tried to interact with the forms to see how they worked overall.

The Finding

Do you know what I found??? Lots of very beautiful contact forms that really were not very nice from a usability perspective. Sure the forms fit well with the site. Yeah they are gorgeous but they provide little to no visual feedback regarding which form field you are in. They provide no tooltips (a note for myself as well). All you have is, in some cases, a very tiny blinking cursor to tell you where you are on the form.

The Need

As designers it is our job to ‘make things pretty’ as much as we hate hearing that. But more than that we need to make things easily usable. You don’t have to be a usability expert to do this. Rollovers are a very common thing to include in a site design. Any good design puts them in their navigation. We put them on links. Why no love for contact forms and form fields in general.

The Resolution

Here is my resolution. I am going to ‘pretty up’ my forms and form fields but not at the expense of usability. The next versions will offer tips for content entry. They will have rollover and active states. I will not be lazy.

Now I said it so hold me to it.

5 Blogs for Web Designers to Follow

shot of the nettuts site
shot of the nettuts site
  1. Nettuts
  2. Nettuts is part of the Envato network. Nettuts covers all sorts of web design and development. Everything from WordPress to posts on Coldfusion. Articles are well written and frequent.

  3. A List Apart
  4. Published by Happy Cog A List Apart covers all topics dealing with web design. From usability to introductions to Ruby on Rails. While only published a few times a month each article is packed full of knowledge and is good for reading more than once.

  5. Digging Into WordPress
  6. Although this blog is a newcomer to the scene the authors are not. Follow this blog for lots of neat little tricks to use in your wordpress development.

  7. CSS-Tricks
  8. Another blog by Chris Coyier (Digging Into Worpress is also by Chris) but a bit more generally focussed on CSS. A great all around resource for design and coding tips. Also check out the forum for lots of helpful people.

  9. Wireframes Magazine
  10. If you are looking to learn more about wireframes and information architecture look no further. One of the things I love about this blog is that it shows examples of how other people do their wireframes. Launched launched launched

This was the second site I did for Chris, first was Dadzillatv. This is Chris’ personal blog on social media. Chris is seriously passionate about media and building your marketing potential. His passion comes across in his posts.

For this site Chris wanted to go with Thesis as a base theme and then perform some customization (really most Thesis themes look the same). We targeted the header and the navigation as those are the most distinctive parts of Thesis. We also installed Google Analytics and Feedburner so that site traffic can be tracked.

Visit the site and get some great tips on marketing and hopefully his excitement catches you too.

WITA Launched

wita launched
wita launched

Just a few weeks ago I launched WITA a blog on video games, comics and pop culture by WITA.

This was one of the most collaborative designs I have worked on. In fact most of the initial design work was done by WITA herself. I walked her through the process of deciding what the most important things were for her users then through the design process. She came to me with her final design and we made a few tweaks before I implemented it into WordPress.

It was a joy to work with WITA and get a great clean but fresh design for her site. Go check it out.