This was a fantastic slide deck, definitely recommend anyone who cares about both design worlds for mobile and the web, and how they relate to one another.
There is a thread on Forrst right now, asking people to share their top 10 design tips. So, I thought I’d write it out as a blog post and share with whoever can read this. I wrote this list fast, and probably could think of another 10, but lets start with this:
1. Get good at color.
Its important, and hard (at least for me it was). Start reading books, something by Pantone, and while you are there, start understanding the Pantone palette, if you have Photoshop, its built in (look for color libraries in the picker). Also colourlovers.com is a great website to browse and get inspired by.
2. Start thinking about texture.
http://bjango.com/articles/noise/ Filters > Add noise, monochromatic, 1.8%, get a felt feel or play around with it and find a plastic feel. Texture and depth are powerful design tools in a two dimensional world. Shadows behind text, 1px horizontal offset, 1px vertical offset, 0px blur, embosses text, makes it slightly more readable depending on the colors and backgrounds. try light colored text shadows against dark text and medium color backgrounds, they will start to pop more.
3. Configure your tools properly.
http://bjango.com/articles/roundrect/ Want great rounded rectangles? You need to configure your Photoshop to give them to you. Not everyone realizes this, I didn’t.
4. Use a stylesheet framework/system.
(Sass/Compass) For some, Sass might seem confusing or weird to use, but it you are a dev/design hybrid, it starts to make immediate sense. Compass is a framework on top of Sass that has amazing goodies baked in, ie: “mixins” for your stylesheets to get you rounded corners, in every browser possible, using CSS. They have entire CSS3 support via mixins, read to setup for every browser, with 1 line of code. Killer.
5. Design with the grid.
http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html) That is an amazing article on how the BBC uses the grid to design their entire visual language. My personal belief is that good design is constrained design. Grids provide a design constraint/thought methodology/process to any design task, and that can help you start moving in a direction more quickly, than say, a blank canvas. Also, many grid systems are available for CSS, and Compass/Sass has native support for all the popular grid systems out there (960.gs, Blueprint, 1kbgrid, etc ..)
6. Make your personal design elements repeatable.
Another plug for Sass, but it really changes my workflow. If you create an aesthetic over time (which you will), Sass lets you encapsulate it into “mixins” or functions that you can simply invoke in your stylesheets, this gives you a ton of flexibility and head start when working with designs, and keeps your design thinking at a higher strategic level, rather than “ugh text-shadow, blah blah”
7. Read about design AND usability, as much as you can.
Books I recommend:
- “Design of everyday things”
- “Graphic Design, the new basics”
- “About Face 3”
- “Designing Web Forms”
- Everything by FiveSimpleSteps.com
8. Follow great designers on twitter, and see what they are reading/thinking/doing/making.
9. Watch the documentary “Objectified”.
http://www.objectifiedfilm.com/ This is a great documentary about design, industrial design, and product design. I find, for myself, that thinking holistically about design is a great way to cross pollinate concepts/models into the web.
10. Go through a large body of work, and never stop.
The best way to get better is by doing. Don’t wait to do all of these things, just start designing, suck at it for a while, push through that gap between you being bad at design and you being happy with your design aesthetic. Its hard, you’ll feel discouraged, but its the only way to make progress.
I am done rambling, go make stuff.
Caring.com is currently in the middle of an A/B/C test of our new homepage. A and B are completely redesigned, with minor layout variations, and C is our control to the test; our existing homepage.
We’ve been running this test for a week and found very interesting results so far. We intend to do another iteration, based on the feedback we’ve seen, and I’ll post the next iteration as well. Maybe I can post our results, too! I built out both of these pages in about 2 weeks, used Compass/Sass for all CSS on these pages. Also got a chance to play with Typekit a bit for some custom typographic headers.
click the photo above to visit the actual page
I have not been writing very much lately because I’ve been doing a lot of building. This is a screenshot of one of the things I’ve been spending a lot of my time on. Our team has been focused on improving the user experience of our editorial content at Caring.com. If you are interested in seeing what the old version of this page looked like, I saved a screenshot of it here.
We’ve spent a lot of time on…
- typography, we moved to Helvetica for all content bodys (from Trebuchet, yuck)
- we moved away from 3 column content, to 2 column content
- reducing unnecessary noise on all templates
- simplified our on page/contextual navigation
- improved the usability of our pagination system
- simplified our sharing tools to only the ones users actually use (iteration!)
- completely redesigned the look and feel of our content toolbars, site-wide
- redesigned our question and answer experience
- redesigned our blog experience
The site has such a calm feeling now, its easier to read and consume our content now than ever before. I am really excited to see how these changes impact the usage of our site. My hope is that we see a bump in pageviews, at a minimum.
We have a few more launches coming this week at Caring.com, I’ll be posting about those as they happen. So glad to finally have some of this work out in the public. There are some interesting architectural changes that we’ve also been working away at, and its spawned an open source project for Rails that I will write about in the coming weeks.
Call to action / conversion / user acquisition, whatever you want to call it. Its probably crucial to your web-based business strategy. 98% of the time, if you have not caught my attention on your homepage, in less than 3-5 minutes, you probably won’t see me again; This is probably a typical consumer on the web.
I ran across Zumbox.com, I’ve heard of this business model before, its a very narrow market (digital postal mail service) that was popularized for a time via a television show known as Startup Junkies. Startup Junkie featured EarthClassMail.com, the initial pioneers in this field, which offers a nearly identical product.
Zumbox.com These people get conversion. Video is really important! This is a new market/product space, we need to convince Joe Consumer Internet that this is a problem they are having, in plain English. Nothing does that better than video, with a disarmingly friendly female narrator. Unfortunately, The woman moves around (silently) for a few seconds, totally distracting me from the big pitch text on the top left, so I don’t even read it initially.
However, there is nothing else to do here, its learn and convert. there is no top nav to distract, no giant intimidating blocks of text, just simple pitch, simple sign up. ALWAYS start the signup process on the homepage. take them to another page if you must, but at least there is psychological buy-in immediately. I don’t love Zumbox’s buttons, they are not bold enough, they don’t scream “you want to click, nay, you NEED to click me.”
Nothing below the fold! I feel like I cognitively understand the entire homepage at a glance, which lowers mental overhead and anxiety of potential data overload. The homepage is almost like a lead gen form, which I think works to their advantage.
EarthClassMail.com This page intimidates me, immediately. TWO columns of points? I am not going to read this. Personal? Small Business? Enterprise? I am not sure I care? Hiding below each of those tabs is 7 items that roll out below them, most of them seem to refer to the same set of information.
Information Overload. there is too much information and text thrown at me. This concept of digitizing postal services is new to the average user, however, they do not need a PhD in the concept. You can tell they are very concerned about you groking the business model, they give you a toll free number to ask them what the hell its all about!
Their call to action is barely a call to action, however I prefer their button style. Speaking of buttons, Sign up should not be the same size as tell me more, I can’t tell if orange is more important than green, and both feature bolded text.
Their is a hidden sign up button below the fold, I’ll forgive them for putting it their twice, but why not start the user on the sign up process? No form fields on the homepage.
EarthClassMail was definitely the pioneer in this field, so I give them credit for having to carry the burden of teaching their users the benefit of this service, however, too much data is going to make the user think this is going to just create more problems, or requires too much effort and up front investment to even justify signing up.
Zumbox.com, to the pre-acquired user, is perceived as a free product! Now, clearly, there most likely is a “pro” featureset you upgrade to, or features you probably pay for per user (maybe the pay your bills feature?). This again relaxes the user, I can try this out, free of charge, and my commitment level pre-signup is very low.
Ouch, no free plan? How about a trial, not even 30 days? I’m sure if I called their 800 number, they would set one up, but clearly they want to make me call them to set that deal up. Setup fees! ewww. Again, this page has two CTA’s for the signup form. No form in sight, come on!
EarthClassMail Sign Up Process
Well, since I have to go out of my way to experience the signup cost/overhead associated with EarthClassMail, I felt it deserved to be reviewed in its entirety.
Page 1: Preamble?! Are you kidding me?! I click sign up and the first thing I DO NOT see is the sign up form!? Okay, I understand, this is going to be legally hairy in a moment, but this could just flat out scare me away. Also, why have a cross-cutting copy page? Sign up for biz and personal can and should be different, make the copy specific to the conversion flow.
Page 2: Step 1 (hah) Choose your plan This should really have been the initial signup bootstrap, I shouldn’t have to pick this now, I should have picked from one of these to start with from the initial CTA. I find this version of the form easier to read than their website, honestly. A lot less clutter. Lets choose essential.
Page 3: Step 2 Begin to tell us who you are This form is boring. Forms are boring, make this more fun to complete. clearly, everything is required, why not just say that once and eliminate the noise? Also, I am now on page 3, and I have no idea how much longer this form is going to take. I need to know how many pages this is out of, at this point.
You get the point. the next page is billing and account setup.
Billing as Conversion Overhead
This is an interesting concept to roll around during your user conversion flow. If you do not offer a free entry point into your application, you require the mental overhead of setting up and entering billing information, before your user can even try the application. I would suggest this tactic be avoided whenever possible on the web.
Zumbox.com literally has no other steps to their conversion process, than the one you see on the homepage. After that form is completed, you are inside the application, and looking around at the features, first hand.
There is no silver bullet in user conversions and landing pages! A/B Test everything you can, and learn from you users at every step of the way. What sort of stories/ideas/anecdotes do you have to add about user conversion?