Design Rap
I'm going away for a week - so enjoy this in my absence. Something I think my clients (and project managers) will be able to relate to. www.youtube.com/watch?v=a0qMe7Z3EYg
« March 2008 | Main | May 2008 »
April 2008 entries
Forms?
There’s one thing I’m seeing more and more of – and that’s bad practice on forms. For example, a client of mine decided that on their registration form they would have over 20 fields. They had no excuse for it – they really only needed 3 or 4... But they got greedy, and now no-one fills in their form. Simple. So in the past week, I’ve put some effort into finding resources on forms, the technologies, and best practices etc. Just so I have some ammo next time I argue with project managers/clients!
Step 1 - Objective
What does the user want? What do they expect? Do we really need so many fields? What’s the real objective of this form? All these questions are imperative to designing and producing a form that will actually get users typing. So often I have clients who want 10-15 input fields, when all they need is two or three. So it’s a case of asking WHY before even thinking about design.
I’ve been listening to Ryan Singer – a designer at 37Signals, the creators of Basecamp, Highrise etc. These guys obviously pay close attention to their users needs and requirements, and pay a lot of consideration to their processes before any IA/design/development work starts. I think what’s impressed me is that a registration form, or transaction process doesn’t always HAVE to be the same. Just because your competitors have name, email, date of birth, first cat’s name – doesn’t mean you have to as well!
Check out:
This book
Step 2 – Language
I don’t mean French and English (although translations will play a part in the design process, label positions for example) - I mean the way you speak to your users. Having them signup with your company, or buy a product is a privilege you are being granted with - not the other way around! So make it easy, use your copy to guide the user through the process. Start with easy, no brainer questions, like Name or Email... get your user invested in this process. Most importantly for me, and this is something we often consider an after thought – is how we approach errors. If I spend 10 minutes completing a form to be told “NO – YOU’VE MADE AN ERROR” - I’m going to be pretty pissed. I’d never say that to someone’s face, who’s sitting beside me completing a paper form – so why do we do it on the web? So consider how you notify your users of an incorrect field – and ask them politely to return and amend.
Step 3 – Design
So I’m calling it step 3, for argument’s sake – but there are obviously loads of architecture considerations which should be undertaken beforehand. Let’s be honest here, designing a form should be quite an easy process if the aforementioned steps are done correctly. A clear and clean use of language, clever consideration and use of technology and a healthy portion of CSS will ensure that your form is easy to navigate – and friendly to use. Forms, above all, require the designer to work with their front and backend developers – so do that, if you can.
Check out:
www.rosenfeldmedia.com/books/webforms/
www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
Step 4 - Development
Standard and technically ‘simple’ forms are a thing of the past. That’s arguably a shame for the developer – but great news for the user. New developments on the web mean we can use AJAX for things like checking the validity of usernames, emails or postcodes. Doing this means our users don’t have to click submit to see they’ve made a mistake (see above). But, above all – we can use technology to reduce clicks. A fantastic example of this is PayPal;
When you purchase something on PayPal requiring a credit card, you are presented with a seemingly standard e-com form, but with one difference. There are pictures of the supported card types (AMEX, Master Card, Visa etc) - but no indication of anything clickable. You are they invited to enter your long number, and from that, the form indicates to you what card you’re using (seeing as the starting integer indicates the card type).
It’s simple, it’s straight forward – and it reduces our clicks by at least one. Which is never a bad thing!
Check out:
www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
Most of this information is taken from the FOWD presentation of Ryan Singer. Watch and listen
Listen to the Future
Although not new to 'Future of Web Design' - I am new to the MP3's on their site. As much as I'd love to attend one of their events, I'm not sure I can really afford the rediculous price it costs (hint hint). So fortunatly for me, the site has a selection of MP3's from their last event. I've been listening to them this week - and they're fantastic! Especially those by Ryan Singer from 37Signals. Worth downloading.
Paparazzi!
I wanted to quickly share Paparazzi with you. It's a tiny bit of software I use about 10 times a day. It takes full-screen grabs of websites (so you don't have to take multiples, then 'stitch' them together in PhotoShop). It's crystal clear, and is great for research and whatnot.
'Real' Shadows
A couple of weeks ago I was looking through some really old bookmarks when I came across this. The visuals are honestly quite terrible, but bear with me – because the technology is really quite cool. Basically, Markus Svilans has developed a way to pretty accurately emulate shadows. In the example he’s used an eagle, which you can drag around a sun watching the shadow move accordingly (whilst the eagle breaks pretty much every law of science). All done with JavaScript and CSS.
Although the example may be a little bit visually, er... un-stimulating – I can’t help but wonder what we could use this better on? Some kind of time-of-day specific page header? Developers are going to start hating me – I can feel it.
See the original here, or the Mozilla (slightly better) version here
Would you use this?
An interactive 'Pin-in-the-Map' style web-app that you can use to show your own travel itinerary. You would add paths, flight numbers, stop-offs etc... then have the ability to send to friends/family etc.
Would you use something like that?
I've already begun looking into it - check it out here - what do you think?
Visual Vocabulary for Information Architecture
I’m currently venturing into the bleak, scary and un-designed world of information architecture. I use this site when looking at sitemaps – it’s a pretty good guide to the visual language you should be using. Although it’s all a little bit pointless when your project managers can’t explain to your client the difference between a page, and a template. So all your hard worked ‘visual language’ goes down the pan.. still, it’ll look mighty pretty when it does!
Things you should be looking at...
If you’re a web designer, you’re going to be familiar with these websites below. But... I’m going to post them anyway. I read these on a daily basis to help keep in touch with the industry – they’re a pretty good place to start if you’re into web. Although if you’re a designer, you should probably be reading a wide variety of these blogs on a daily basis anyway. I’ll post my full list of daily blog reads at some point... although there’s a fair few!
Web Designer Wall
These guys talk about everything web-design, from coding, design, inspiration, trends and events. It’s not updated that often, but worth reading the articles. They also have tutorials on some common problems/requests that are really easy to follow and learn from. Think they also made the Bloggies!
http://www.webdesignerwall.com/
Web Creme
There are literally thousands of showcases of the best CSS websites, but most of them just list any old website – regardless of design or code. That’s why I like Web Crème. These guys post the best websites of the internet, daily. They even categorize by colour... If you’re into that kind of thing. Also, unlike most of these showcases – the site is painfully simple and easy to use. Addictive too.
http://www.webcreme.com/
Noupe
I’m pretty new to this one – but they say they are an online resource for web developers. Whatever that means. It has a nice ‘Design News’ section though which is worth checking out!
http://www.noupe.com/
Smashing Mag
Don’t need to say much about these guys – the website is genius. All kinds of news, tools and articles. Read it. Go on, go there now.
http://www.smashingmagazine.com/
CSS Globe
Most of these web blogs are always banging on about WordPress. Yes, it’s very clever. I don’t care! But CSS Globe, they don’t bother much with that stuff – we like that! If you want to learn how to do something a little bit advanced (or not) using CSS, with perhaps a little bit of JavaScript thrown in... then you need look no further than CSS Globe. These guys have all kinds of examples and tutorials showing CSS to standards. Very good, not updated that often though – which is a shame.
http://cssglobe.com/
Contrast Issues
I am a massive fan of subtle greys on websites. Huh? What’s that? You are a bigger fan, you say? You’re not.
So that’s why it pains me when I design something, and the developers tell me that it doesn’t have enough contrast, and doesn’t pass the whole W3C accessibility thing. They have a point. But it still hurts. That’s why nowadays, I use the following links to make sure that everything I do has just enough contrast to pass the test. Everyone’s a winner (unless you have sight problems, obviously).
http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
http://juicystudio.com/services/colourcontrast.php
Web 2.0 Generators
There’s got to be thousands of these completely horrible generators of things. Most of them are nasty – but a few of them can be really useful. You’ll find 25 of them listed here.
I personally use the loading icons here (www.ajaxload.info) and the striped background generator here (www.stripegenerator.com).
Things I HAVE to try!
More often than not, when I see something cool – I end up having to code it. I find that it’s the best way to understand the constraints of these things. Then when I come to design something, I know exactly what I can and can’t do (without upsetting the real developers!!). So here are some things to get your teeth into that you might want to try and suggest to your client on your next site;
Coda Bubble
You must have seen it on Panic.com? It’s amazing, I love it. Use it!
http://jqueryfordesigners.com/demo/coda-bubble.html
AJAX Instant Edit (CMS)
A good way to edit existing content in a CMS-stylee. Not sure about cross browser support though.
http://www.yvoschaap.com/instantedit/
Kwix - now for jQuery!
This was initially done within the moo:fx framework, but now it’s in the easy-to-understand jQuery
http://www.jeremymartin.name/examples/kwicks.php?example=4
Starbox (for Prototype)
Obviously everyone does star rating now... nut here are a few variations on a theme.
http://www.nickstakenburg.com/projects/starbox/
InnerFade with jQuery
A great way to present multiple images within an area. I used it recently for random quotes too.
http://medienfreunde.com/lab/innerfade/
Design Inspiration
There are some things I find myself having to design that really don’t require me to re-invent the wheel. Things like blogs, comments and footers. They’re always the same, they work, they don’t need to change. Probably means they always end up looking the same though. Right? Probably! No... I mean, WRONG! Here are some resources I use to inspire these kinds of things;
Designing blog comments:
www.blogdesignblog.com/blog-design/30-comment-designs-for-webdesigners/
Footers:
www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/
Error 404 Pages:
www.alistapart.com/articles/perfect404/
To be honest, pretty much all of the examples are terrible – but there are some nice ideas that you could develop to make something cool.
Bored of Lightbox?
When I launched v.1 of BuzzGraphics in the late 90’s it was full of image preload scripts, blank.gif’s, tables and all kinds of coding badness – and one other thing.... LightBox. Back then, the wonderment of having LightBox on the page made up for everything – it made any image look good, and would even impress your mum. But then 8 or 9 years passed, and LightBox is still being used – by everyone!
So now I’m bored of LightBox. I’ve recently moved to the amazing LightView on BuzzGraphics (because it supports way more than just images, and is easier to understand from a UI point of view) – but there’s a whole host of other JavaScript and (ahem) Flash galleries you can use. We still love you, LightBox – you’re just... old.
www.vivalogo.com/vl-resources/beautiful-javascript-flash-galleries.htm
jQuery - One step closer to becoming Apple
There are loads of JavaScript libraries out there; moo:fx, prototype, that scriptalicious business – and Spry (or whatever the hell Dreamweaver tried to offload on us in v.8). But none seem to come close in ease, simplicity and functionality as jQuery. I’m clearly obsessed. I think it stems from an underlying hatred of Flash... and jQuery is one step closer to getting rid of useless Flash pockets all together!
As I’m a designer first, and a developer second – I’m far more interested in how stuff looks and functions... rather than whether the 14 people who still use IE 5.5 can use it. I just don’t care much about that. So this gallery is great for me to see what goodies I’m going to be using on my next project. It’s 37 exmples of jQuery plugins. And as for cross-browser, usa' and accessibility issues, I’m reliably informed by Tom that the whole jQuery community is fully committed to standards et al.... it also works on my iPhone (give or take a few prods from my monkey fingers)!
As always, be aware of what your site looks like with JavaScript disabled and CSS off. So make sure there are no navigational issues when this is the case.
