zastica

I just spent the last few minutes reasons Jakob Neilsen’s Alertbox on newsletter usability. I always find the Alertbox fascinating and insightful, but this one is particularly informative. For me, it put into words exactly how I feel about a few topics in web design, not just newsletters.

Use good subjects

Probably the most important part of your newsletter is the subject. It’s the first thing your users see, and you never get a second chance to make a good impression.

But while dashing through their inboxes, people simply don’t have time for word plays, puns, and the like.

Be clear and concise, and avoid wordplay. You might think it’s clever, but your users will treat it like spam and are more prone to ignore the entire newsletter.

In addition to subject lines, users now pay more attention to message previews

Technical and usability improvements have lead to showing the first few words of an email along with the subject. The first few words of any email are very important to users when they decide whether or not to open the email at all.

Newsletters or social media?

I’ve had a few people ask if they should start a newsletter, or just use facebook. Data from the Neilsen’s study shows that newsletters are vastly more important to loyal customers than social media:

In our latest study, we asked users to “receive updates” from companies. Only 10% elected to do so through Facebook, while 90% opted for a newsletter.

Social media should be seen as engaging with potential customers, to entice the to try your business or service whereas newsletter are better for communicating with current customers.

Your newsletter subscribers are usually your most loyal customers and fans, so it’s important to treat them better than the more fickle audience on social networks.

But you should also make sure to send out the newsletter announcing, say, sales or new products before tweeting such news.

Video on the web

I’m quoting a quote here, but this perfectly sums up how I (and I would guess a large number of people) feel about video on the web.

As one study participant said, “I probably wouldn’t watch this. It’s a video, not text. I expected an article, not a video. With video, you have to watch the whole thing. Even if it’s just a minute, I’m not into watching video.”

Users were hesitant to click on videos within newsletters if they weren’t sure what they would get.

It’s not just newsletters, it’s the web in general. You can’t scan a video, so users have to make he choice to read it or not before seeing any of it. Most of the time, hey choose to not watch. Essentially, users will watch a video only when they know why (for example a friend suggested it) they should watch it in the first place.

Today, I’m happy to launch the new redesign of my site. There were a few major motivators to doing the redesign now, and a few more minor ones.

First, I felt that my previous design was a little too limiting, and wasn’t flexible enough to do everything I wanted to with the site. This new design is much more flexible, using even more CSS to provide embellishments than before.

Second, I wanted to draw on ideas some other people in the web design and dev community have come up with, and use them on my site. In a way, I’m paying homage to my elders.

Finally, my hard drive crashed twice in the last 6 months, causing me to lose all my old design files, so I needed some new assets. I could continue with minor changes, but as long as I was opening up photoshop and tweaking the images, I figured it was time to redo everything as well.

zastica has changed from this:

To this:

(Posting static images becuase this design will probably change over time and I want to archive what it looks like now, and what it used to look like)

Inspiration

The inspiration for this design comes from two primary sources. The first is Jason Santa Maria’s site. I’ve always admired his skill as a designer, but only recently come to appreciate the simple power that his site design has. It works extraordinarily well, and I hope to use and learn from what he is doing.

The second major source of my inspiration is mozilla.org. This is another fantastic site. I like the header especially, and that’s were mine came from. The nuts and bolts (HTML and CSS) of their header is actually pretty surprising, and I think I learned a thing or two about creating interesting effects from that site.

I know that these two sites are remarkably similar to my site, and that is something I can potentially see people having an issue with. To anyone that does take offense to that, I say that this design is a first step. I’ve set it up so that hopefully I can pull of major visual changes without much work, and continue to grow and experiment as a designer. If you still take issue, please use info on my about page to contact me and let me know how you feel.

What’s changed

Pretty much everything. The site tagline is gone, the navigation has moved down, the dragon graphic is gone from the main content area. The background is separated from the content container background with the use of a text-shadow. I have wanted to use web fonts, so the header font is League Gothic.

What’s the same

The colored bars have moved up into the header. The dragon silhouette has moved from the main content area to the header, and made into a 24bit png so that it will work well with any background. I still have the ability to post hero images for special events, or to display extra bars in the header, for breast cancer awareness for example.

What’s going to change

Link colors for one need to change. I’m not sure what treatment to give them yet, but I need a way to make them a little less 1990. Fonts, colors, backgrounds, and even the layout may change at any point. That’s what I really like about this design — it’s very easy with my new tools.

Today Yesterday, I stumbled on a post by someone on reddit/r/seattle about a map of north tacoma that he made, using typography to draw out the map. Typographic maps are not a new thing, but can be very beautiful when done properly. For some examples, check out http://www.axismaps.com/typographic.php.

This is what the big map looks like:

It’s pretty incredible. Here’s a couple more close crops:

This poster is available on zazzle.com to purchase, in multiple sizes. Prices start at $18 for a small version, and go all the way up to $63 for a massive 52”×33” poster. I’m planning on getting one for myself, because it’s just too cool to pass up.

Purchase link

Edit: Also, since yesterday, I noticed the author signed up on feedtacoma.com and started a discussion about this project here

Full disclosure: I have no affiliation with the author, nor do I receive any kickbacks from zazzle, I just think this is double-plus awesome.

A couple months ago I finished up a website design for Lessa Lamb, a friend of mine who was looking for a website to publicize her artist modeling business. The site is a one page layout with some examples of art that other people have created about her, with a lightbox to display larger images. The design uses a bookmark effect for the navigation as well as headings. It also has subtle text effects to make it feel a little more engaging.

According to Lessa,

Working with Dave was an incredibly positive experience for me. He listened to my input about what I liked and didn’t like visually, and ultimately I think what we came up with is visually attractive, easily navigable, and contains all the information it needs to have… except for the information I haven’t given him yet.

I would recommend working with Dave to anyone who needs an expert eye, a knowledge of possibilities, and someone who can stay on target, even when your time and energy are else-where.

Here’s a couple screenshots of the site:

And just for fun, here’s a couple of concepts that didn’t get used:

Overall, the project was very interesting to work on, as well as challenging. Lessa wanted a simple, elegant design, but she still needed it to be a little trendy and attractive to engage and encourage visitors that they should hire her to model for their art sessions. The final version of the site sets a standard for what other artist model sites can look like.

See the site: LessaLamb.com

If you have a site where users are able to have data associated with them, you probably have a login form. You may ask users to enter their email address, or a username for your site, or even an OpenID url. If they enter the correct information, they are granted access to otherwise protected areas of the site. But, if they don’t enter correct information for some reason, they get presented with an error message and have to try again. There are two major hurdles to login form design that I am going to address.

Show their username again

When a user’s login attempt fails, it’s a pretty standard practice to unset their username and password and force them to re-enter them both. This is a bad design pattern. Users should not be forced to remember and reenter their username. Consider this workflow:

• A user comes to your site, and enters their username and password. The username is entered into a regular text input, so it’s plainly visible to the user and anyone standing over their shoulder.
• The user’s information was incorrect, so the page refreshes, they see an error message. The user thinks, “Oh, I must’ve mistyped my password”. However, both the username and password fields are now empty.
• The user tries to login again, however they are momentarily disoriented by having to remember which username they use for this site. Sometimes, users might even have multiple logins for the site, so they have to remember which one they just tried to login with, and even if that username is correct.
• The user enters their username, and the password again, and hopes to get the information correct.

If the site left the username in the field, the user would not have to remember which username they tried to use, and could focus on typing the password correctly. By leaving the username in the form, you can eliminate a point of confusion for the user, and ultimately help users use your site.

Unmasking passwords

In one off his AlertBox columns, Jakob Nielsen takes the radical position that

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures. — Jakob Nielsen, June 23, 2009

Personally, I don’t agree with him 100%, but since he’s the world’s foremost expert in usability there must be something to his claim. Security considerations aside, masking passwords does hurt usability. (Masking passwords means displaying bullets instead of letters and numbers — ‘••••••••’ instead of ‘password’) Why? It’s because it forces your users to think about typing their password correctly, and thinking is bad for usability.

It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice — Krug’s second law of usability

I don’t think that password masking is going away anytime soon, nor should it. It is still a security concern if someone can stand behind you and learn your login information. People routinely store all their life’s information in their email inbox, so if their email account was compromised by a nefarious individual… well it would be bad.

Neilsen goes on to say, “users are sometimes truly at risk of having bystanders spy on their passwords, such as when they’re using an Internet cafe. It’s therefore worth offering them a checkbox to have their passwords masked”. This is a Good Idea, and offers a sufficient compromise between security and usability.

So, for optimal login form usability,

• Don’t remove passwords after failed login attempts, and
• Unmask passwords by default, but give the user the option to mask the password, for example when someone is nearby.

Check out my new business card. I got tired of having to write down my email address or phone number on a random scrap of paper, so I went ahead and designed a “business” card for me. It’s not really for my business, since I don’t have one (except for my day job, and I’ve got other cards for that), it’s just a card for me.

Check it out:

It’s pretty simple, with just text, and the celtic knot on the right. On the other hand, it’s unique and the design is pretty striking. (If I do saw so my self.)

You might be wondering what those colored bars on top of my content are. And you’re right to wonder, because it’s kind of strange and out of place. While I was redesigning my site, I ran into a problem — I wanted to be able to add a little visual flare to my site, but I kept running into a dead end. I tried a featured photo thing from my vast collection of photography, but that ended up being too hard to maintain. Eventually, I settled on what you see now - a series of 9 colored bars, but I gave it a twist.

You see, the colors change everyday, and I don’t have to do anything to make it happen. I just defined 4 sets of colors, one for winter, spring, summer, and fall, and then wrote up some code to calculate the gradient between each set, and then I show the color set for any given day based on where today is on the line from season to season.

My base scheme looks like this (HSV values):

$this->schemes = array(
    $this->starts['winter'] => array(
        array(223, 58, 26), array(202, 53, 75), array(209, 11, 98)
    ),
    $this->starts['spring'] => array(
        array(0, 33, 69), array(83, 31, 84), array(187, 64, 66) 
    ),
    $this->starts['summer'] => array(
        array(93, 87, 100), array(349, 95, 100), array(33, 100, 100)
    ), 
    $this->starts['fall'] => array(
        array(0, 80, 85), array(35, 80, 85), array(45, 95, 60)
    )
);

I expand those sets of 3 into sets of nine by rotating the H value 36° to the left and right. Then I convert the values to RGB, and for each set I calculate the median values like this, with a distance of .5 (meaning half the distance between each point). This is done for each of the R, G, and B values.

foreach($from_vars as $i => $value) {
    if($value > $to_vars[$i]) {
        $diff = $value - $to_vars[$i];
        $from_vars[$i] = $to_vars[$i] + ($diff * $distance);
    }
    else {
        $diff = $to_vars[$i] - $value;
        $from_vars[$i] = $value + ($diff * $distance);
    }

    $from_vars[$i] = round($from_vars[$i], 0);
}

Basically, it just averages the two colors and applies those values to the date in between the start and end. It’s actually a lot more complicated than that, but that wouldn’t fit in one post.

Awhile back I did a little design work for a Seattle blues dancing organization called Burn Blue. Burn Blue is a Seattle based dance organization dedicated to teaching and promoting blues dancing.

I created a promotional business card to give to dancers, as well as partnering with about 4 other people to complete the flyer design. The business card was intended to serve as a way to entice someone into learning more (and eventually coming out to dance) about Burn Blue, while the flyer was intended as a fun way of telling people all they needed to know about the event and the space.

The flyer:

The business card:

This card was wildly successful. People love to give and receive them (obviously). The best parts of it are that it creates an emotional reaction in someone (You’re hot), and the follows up with an invitation/imperative (Come dance with me). Currently, Burn Blue draws about 200 people to the weekly (not bi-weekly like the cards say, it was expanded) dance.

I think my favorite part of this whole project was working with so many people to come up with a killer design. Also, I love that business card.