Toolbox Blog: resources, tips, tricks & info for creative professionals

Posts Tagged ‘Usability’

April 1st, 2009

10 Great Contact & Comment Form Designs

Comment forms are one of the few ways readers and visitors to a site or blog can interact with those ‘in charge’, so its a little surprising that so many bloggers/designers throw together these forms and leave it at that. Once a user is at the point of commenting/contacting they probably won’t stick around much longer – that form is one of the last things they’ll see on your site. Why not leave them something to remember you by…just don’t get too carried away. Most often you’ll want to strike a balance between creativity and simplicity, forms that are confusing can lead to a drop in your conversion rates.

It’s always nice to see designers who put some thought into their comment or contact forms. Here are 10 of the AgencyTool staff’s favorites:

The comment form on NatalieJost.com is in a different layout than most, and the graphic down the side gives it a nice look.

From Natalie Jost

Sometimes it is best to keep it simple – it may not be the most exciting design element on the page, but it serves a purpose, and this well-designed comment form won’t deter any users from interacted with the site.

From Ordered List

The call to action of this comment form from RobGoodlatte.com changes; “Enlighten Me”, “Shout It Into The Forest”, “Sound Off!” and “Out With It!” are examples we took the time to find. It’s ok to have a little fun with your forms…

From Rob Goodlatte

We love how this one looks. An interesting font choice or experiment with texture can pay off big time…

From Toucouleur

The post-it look. It can be hard to be creative while still keeping a form super simple, this option pulls it off nicely.

From Point of Entry

This one isn’t live on his site anymore, but Edward Pistachio’s contact form is one of the most creative we’ve seen (thanks to swiss-miss.com for keeping it up!) While this obviously wouldn’t work for a corporate-type site, it fits in great with his site’s tone.

Edward Pistachio

Simple, to the point and just enough texture in the background to keep it interesting…well done.

From Jonnotie.nl

The comment form from Tentangrifai.com is bright, colorful and fits in with the rest of their site. It’s becoming more common for designers to throw in little extras commonly seen on forums, like the little smileys…its a trend we like.

From Tentangrifai

This one is from BlogDesignBlog, a pretty standard layout but we like the step-by-step instructions…and it’s always nice to let your visitors know you follow!

From Blogdesignblog

Last but not least, JankoAtWarpSpeed has a great tutorial for creating a comment form from images of old postcards…

From Janko At Warp Speed

March 3rd, 2009

“Interweb the Rainbow”? The Skittle’s Twitter Feed Site Re-Design

Modernista! did it first, but Skittles got the attention.

This week Skittles changed their homepage to a Twitter feed of anyone who tweeted anything with the word ’skittles’ in it and it’s created a lot of buzz.  Some people love it, saying its perfect advertising in our struggling economy.  Some hate it, more than a few social media types have called it a ‘cheap publicity stunt’ because of Skittles previous non-involvement with any sort of social media.  But, ignoring all social media banter and looking at the new skittles page from a web design perspective, we see some potentially serious problems.

First of all, control.  Your homepage is usually the #1 place people go when looking for information on your company.  Is it really a good idea to essentially give up control of the majority of the content?  Skittles has already run into this problem.  Once word got out you could get on their homepage by simply typing ’skittles’ somewhere in your tweet more than a few inappropriate links and offensive language popped up.

Usability.  The nature of this type of feed (and the sometimes inappropriate things it shows) caused Skittles to put up an age verifying pop-up before entering the site.  True, if a person can add or subtract they can trick the program, and the screen is a pop-up so you can see the content behind it anyway, but putting up a barrier to entry like this is a no-no in terms of usability.  Many users will simply not spend the time to fill it in and move on.  Also, what happens to the people who were genuinely looking for information?  They are bound to be more than a little confused on where they should go next or whether they are even on the Skittles site…not good.

The actual site navigation looks too much like a spammy pop-up for comfort.  Once you get past that and realize that it is meant to be their site nav the way they’ve labeled things can confuse people further.  ‘Chatter’ takes you to the same page you’re already on (’Home’), ‘Friends’ pulls up a Facebook page, and ‘Media’ brings in a Skittles focused feed from YouTube.  The only parts of the entire site that still resembles a company website is a contact form and somewhat lame ‘Products’ section with a few links to their parent company, Mars‘ site.

skittles-fb

skittles-home

skittles-products

skittles-youtube

They’ve created buzz and we really do applaud them for attempting to utilize social media to get their brand involved. However, abandoning current web convention all together and sacrificing usability is probably not the smartest move in the long run…guess we’ll have to wait and see.

February 24th, 2009

Creative and Fun Site Navigation

Navigation is one of the most important elements of a website design.  It provides your users with a road map and guide to your site and gives them a sense of direction.  Therefore, well-designed sites tend to have navigation menus and bars that are simple.  But as we’ve seen before simple doesn’t have to be boring.

The sites below have succeeded in creating nav menus that are creative and fun, while not confusing (and thus probably losing) their visitors.

Design Jobs on the Wall

Jobs on the Wall

Hug My Mac

hugs

Sarah Hyland

sarahhyland2

Simple Art

simpleart

Jilly10

jilly10

Kukral

kukral

Mint

mint

Waters Media

watersmedia

MB Dragan

mbdragan

Our Memory Of

Our memory of

Tasty Planner

tastyplanner

Apple

apple

July 29th, 2008

Recent Web Design Dashboard Updates!

We’ve had a great response from everyone and the suggestions are pouring in…as a result we’ve added quite a few more resources.

Under the Web Design section we’ve added a new site with over 40+ CSS Tutorials.  Also check out our newest Inspiration site Fubiz.net, with eye-catching photos, designs, new products and music samples.

There is a completely new category under Site Maintenance, featuring a list of reputable E-Commerce processing companies.  We’ve also added links to new usability testing software, Silverback, as well as The Broken Link Preventer, a program that stops broken links on your webpage in real time.

Just a few examples of how our list is growing.  We want this to become the most comprehensive resource out there, so thanks for the suggestions and keep em’ coming!

We’ll try to post all of the valuable links we get in, so keep up to date by checking the Dashboard often!

SEARCH BLOG
DreamTemplate - Web Templates     Host 6 Domains on 1 Account

Graphics.com/Learning    

Website 120x60 Logo    
ARCHIVES

SUBSCRIBESubscribe
ABOUT AGENCYTOOL At its core, AgencyTool exists to serve as a resource for creative agencies, whether they be into web design, print, advertising or anything else. Here on the AgencyTool Blog you'll find a mish-mosh of resources and thoughts that we think are worth sharing.

Feel free to comment on a post or drop us a note if you've got something to say. We love comments, so we don't use nofollow, but we do moderate - you've been warned!
 

 

How is AgencyTool.com different from other web directories?

  Quality Listings. We're selective. We take the time to individually review each submission, so you know the companies listed with us are legitimate and of the highest quality. If you list with us, you know your brand will be associated with the Nation's Premiere Creative Agency Directory. Always above the board, and always there for you... Get Listed Now!