We were recently asked to build a landing page by our clients (& friends!) over at Joie de Vivre Hotels.  The landing page features all of their hotel properties located in Southern California. While most of their hotels are located in San Francisco, there are a handful of hotels located throughout the Los Angeles and Orange County regions.

The goal of the landing page/micro site was to spotlight each property and provide information about dining, wedding and event facilities. We wanted to create an immersive experience that echoes the unique Southern California feeling and lifestyle.

To set the mood of the site, we used large scale photographs as background images. There are 5 background images combined with unique taglines that represent each SoCal hotel property. These images play as a slideshow and can also be cycled through manually.

All of the hotel, dining and event content can be accessed by navigation located near the bottom of the page. Once clicked, the page content appears via Ajax and jQuery. At this point the user is presented with information and appropriate calls to action.

As always, we aim to create web experiences that are engaging and easy to use. Check out the finished project here and if you are in SoCal (or San Francisco) I encourage you to stay a night at any of their properties, you won’t be disappointed!

After months of work, we are proud to announce the launch/redesign of the new Groovy Like a Movie website and homepage SlideDeck. Groovy Like a Movie is a boutique digital production company here in San Diego. Brent Altomare has been a longtime friend and client of digital-telepathy. For the past 6 years, dt has worked with Brent to help communicate the tremendous value that Groovy Like a Movie brings to their clients. They help their clients communicate their stories through video to encourage them to think, feel and do.

The main portion of Groovy’s site has been built using the SlideDeck Pro Javascript Library and integrated tightly with WordPress. Taking advantage of WordPress’ robust features, we were able to create this sexy SlideDeck based site for Groovy, with an easy to edit back-end so the client has control over their content and can edit and create with ease. The Groovy SlideDeck was designed to promote their work and feature their services in a simple and easy to use interface that we feel communicates their message and promotes their work in style.

Groovy Like a Movie Home Page

Groovy Like a Movie Our Work Slide, features custom video integration

Visit Groovylikeamovie.com and check it out, we love it, and we hope you do to.

Cheers!

Related articles

• New Custom SlideDeck: Groovy Like a Movie

Stock photos are great, but they are often abused. Too many young websites go for the boxed wine specials, when there is some great “two-buck chuck” out there. Not every project or client will be fortunate enough to have a huge collection of custom photography to fit your every need, but bad stock photography can ruin your site and your client’s credibility. (Embarrassingly enough, having a client with an infinite amount of photos may have been a recurring dream of mine.) As alluring as they may seem, don’t be tempted to use those cheap stock business photographs with the same 5 people in 80 different poses. Take your time. Do some research and set a standard for the website and for yourself.

Setting the “standard”

To set our standard for photography (and for our designs in general), we start with a vision that’s based on a concept and evolved through research. We pull all of the research together and create a digital moodboard. This moodboard consists of example photography, colors, keywords and descriptive copy. In the future, this will assist the client (after the project is handed over) and future design teams in browsing through thousands of images and selecting photographs that align with the original vision. This not only helps create the style of the website, but helps preserve it over time.

Don’t let bad stock photography sink your design. Try your best not to settle. Set a standard and stick to it. Just like you should spend some time perusing BevMo during their 5-cent sale, take your time with your photography. It’ll pay off in the end.

Here at dt we  are always looking for ways to make a user’s web experience more enjoyable and effective. Whether we are working on client projects or internal work, we are constantly trying to innovate as oppose to being just “good enough.” This has lead us to creating new solutions such as SlideDeck and our newest creation – the Hello Bar.

The hello bar is a simple message bar that sits across the top of a website. The goal of the hello bar is to grab your user’s attention and point them to an area of interest. It can be used for internal CTA’s, links to articles/blog posts, tweets, important notifications, updates or anything else that you would like to call attention to.

You have probably seen these before on other websites, browsers, or applications.  It is by no means a new idea. Our goal is to allow anyone to easily & quickly create a Hello Bar and embed it on their site. Once it is implemented, users will easily be able to manage, edit, and even view reports in a simple admin panel.

Check out the landing page here and stay tuned for more to come!

After being thrown a major curve-ball with WordPress 3.0’s new post_type validation for image attachments, we needed to re-think the way that we were storing SlideDecks within WordPress. We were already thinking about making this change in the SlideDeck for WordPress plugin anyways and this incompatibility ended up moving the update right to the top of the list!

We are happy to announce that the SlideDeck for WordPress plugin now takes full advantage of custom post types in WordPress 2.7+. We no longer clutter up your database with our own custom tables and as a great side benefit we are now able to interact with the media upload/insert box in WordPress 3.0!

Upgrading is easy, just don’t forget to backup any modified skins before you upgrade. I recommend comparing side by side your modifications and the skin updates in this new version as we have improved some of the styling to prevent accidental theme overrides to the SlideDeck’s appearance. If you have made any skin modifications, just overwrite the new skin files with your updated skin files.  We also look up old legacy SlideDeck IDs for any shortcode or template level implementations you have already done and automatically get the new, imported version of the SlideDeck – no need to go back and change anything!

Upgrading SlideDeck for WordPress Lite

Just update the plugin through your WordPress control panel if you are using the Lite version and we automatically import your legacy SlideDeck entries to the new storage format.

Upgrading SlideDeck for WordPress Pro

Download the new version of the plugin from the link you received in our update email and un-compress it to your plugin directory, overwriting the old files. After you have uploaded the new files, just deactivate and reactivate the plugin from your WordPress plugin control panel.

WordPress 3.0 compatibility isn’t our only change in this version. Check out some of the other features we’ve implemented:

• Improved image scrubbing in Smart SlideDecks – We have improved the filtering options for finding valid images in Smart SlideDecks. Your RSS based Smart SlideDecks (Pro version only) should much more accurately be able to find legitimate, non “tracker” or advertisement images in your feeds. Keep in mind that some RSS feeds still don’t show images in their item descriptions (excerpts), so even if you see images in the raw feed, they may not show up in your SlideDeck. We’re working on finding a way around this.
• Improved in-line documentation – Interested in taking a crack at hacking the plugin yourself? We’ve beefed up the in-line documentation a little to help you understand what all those functions do. Keep in mind though that if you hack our code, we can’t really support it.
• Improved slide backgrounds (Pro version only) – With the new improvements to the way we are handling SlideDeck storage we are now able to easily hook the media uploader to the Beta slide background feature. Now you can click on the Upload/Set button next to the slide background field and upload a new image or choose one from your gallery as your slide background!

Apple, Amazon, Facebook and other big name websites are copied every day. They’re extremely successful, so it’s no surprise, but that doesn’t mean their design, interaction or content will yield the same success for your project. In fact, you’ll have almost no chance in matching their success since they’ve already done it.

“Good artists copy. Great artists steal.”

Pablo Picasso was essentially saying that by copying, the best-case scenario is getting the same.  The objective is to do it better. That does NOT mean just going to 5 different websites and mashing their features together. By analyzing a website’s design, user interface or code, and figuring out why it’s effective, you’ll be able to use that technique and make it your own.


PanelFly has clearly been designed with Apple in mind. The large “hero” shot presents their product and quickly describes it. Extra features that are not crucial to the user are presented horizontally, so they’re easily glanced over or scanned from left to right. Their bold, colorful design suits their industry.

Established vs Start up

As a new company or website, your message and actions will no doubt be different than those of a well-established company.

Almost everyone knows what Photoshop is, so it makes sense for Adobe’s Photoshop page to use more space in pointing out features instead of an explanation of what it does. Mint, on the other hand, is still a relative newcomer, and therefore needs to dedicate much more space to explaining its service and providing testimonials with press logos to convince users they’re the real deal.

Target your audience and your goals

Different users and goals call for different design.

Amazon sells everything to everyone, so their pages are very open and accommodate all sorts of user entered information. Threadless sells t-shirts to a younger, “fun” demographic, which is very apparent in their design and photography choices as well as their emphasis on the shirt itself. Threadless is very successful, largely because they created a site that is unique to them and their goals.

Why it Matters

By specifically designing a website with the business goals, strategy, and potential users in mind, you’ll create a better experience and drive more conversions. Obviously there’s still nothing wrong with drawing inspiration and “loosely” copying styles or rough layout from other great websites; but only do it when it’s effective for the website being designed.

Sign up forms are extremely important on user driven web sites. They are the first point of contact between website and user – like a first date. Some sign up forms are intimidating, ask for too much information or confuse users. Take it slow on the first date and don’t make it too involved; the best sign up forms get your users in and using the product/service quickly and easily.

Foursquare’s registration form asks for too much information; some of it quite personal! Why do you need my gender, location and birthday? We don’t even know each other yet! The additional gray bars to the left remind you that there are even more things to do when you’re done with this already lengthy form! Would you really give your date a 5 page questionnaire before you even order drinks? Give it a break already! It’s best to ask for this information later on, maybe on the second or third date champ.

Gowalla’s registration form asks for essential information and looks like an easy, quick and simple process. It further streamlines registration by giving you hints as you enter information, even showing (in real time) if your desired username is already taken. In general the process is much less intimidating and easier. Talk about a first date with no fear of commitment!

At the risk of copying Gowalla’s approach, I took the liberty of mocking up a simplified version of Foursquare’s sign up form. Let’s start with Name, Email, Password. You can upload a photo if you’re the outgoing type; maybe you should use the one from your eharmony.com profile

To make the sign up process easier, remove superfluous information from the form, giving users less reason to abandon the process. Ask the users for more information later on when they’re logged in and ready to play!

Make the first impression count and start a great relationship with your users. Asking for extraneous information or making them fill out a lengthy survey is a great way to screw up that first date.

Related Reading

Signup forms must die – here’s how we killed ours!
Web Form Design Patterns: Sign-Up Forms

I’ve been checking out thebolditalic.com a lot lately for design and typography inspiration. Browsing through their articles, I appreciate that they often alternate their text layouts into 1, 2 or 3 columns. Column layouts have been in the web for a very long time (tables anyone?), but using columns for text alone hasn’t been popular in the mainstream until recently.

Now I’m not saying text columns are appropriate for every site or any section with more than a few sentences; but under the right conditions they can be aesthetically pleasing, easier to read, and with more recent CSS developments, relatively easy to code for.

From the Designer’s Point of View

The dreaded generic “content” page is usually no fun to design for. Typically sites just strip down the homepage and throw in a large title with paragraph after paragraph of text. Multi-column layouts can be a simple way to make copy more interesting to look at, as well as help break up the content and make it easier to digest.

From the Developer’s Point of View

Coding an extra column in html/css really isn’t a big deal, but no one wants to add more code if it’s unnecessary. Multiple columns also mean someone needs to make sure the content is flowing into columns correctly, especially if it’s dynamically loaded.

So when it comes down to it, multi-column layouts are more work, but not so much that they should be avoided. There are even easier ways to code columns with CSS3, now with a property for multi-column modules! Here’s a relevant article from A List Apart on that topic.

From the User’s Point of View

Multi-column layouts are definitely more interesting to look at. Usability studies also show that multi-column text layouts are easier to read and readers typically have an increased comprehension of the content.

For more information on the actual study of multi-column text layout readability, you can check out the following articles:
Text Columns: How Long is Too Long?
Is Multiple-Column Online Text Better? It Depends!

The single most important aspect of a website is a clearly defined Call To Action (CTA). Every website Calls their users to Act on at least one thing. A CTA usually employs a button and has many forms;  Read, Follow, Call, Sign Up, Contact, Buy, Add, Share…etc.

Now this is nothing new. It’s web design 101. However, more often than not, websites are littered with way too many CTA buttons, each with the same priority and level on the page. CTA buttons have become highly distracting and feel more like a sales pitch than a shopping experience. It’s like a bad acid trip on the Vegas strip.

I say you can do more with less. Reduce the number of calls to action to one main button and increase the options within that button with a simple dropdown. Give each CTA dimension and enable users to choose how they want to contact, sign up, download…etc on your website without giving them a smorgasbord of single level choices.

Here are a few examples:

We used it for SlideDeck as a way to select which version or price of the software to purchase. At the time of this post, we are using a matrix but still use the CTA on landing pages.

It’s what made AddThis wildly popular and a nobrainer to add to millions of pages.

Apple uses it on their trailer pages as a way to choose your size and format.

It even works within the nav menu. This is the rollover state of the Reuters World & Markets tab.

Post a comment with other examples that you have seen or designed.

Related articles by Zemanta

• 5 Call-To-Action Lessons From Craigslist Scalpers (hubspot.com)

We’ve all been working on our newest product SlideDeck and I’ve personally learned quite a bit from our community. While working on updating the SlideDeck plugin and answering community support requests I’ve found that many of the questions and requests can be translated into features that should be put on the road map. Sometimes it’s necessary to decode these requests and figure out which to implement, as design by community can get messy if left unchecked.

Overwhelming Demand

Adding an autoplay option to our standard SlideDecks in WordPress was a “no brainer”. We got about a dozen requests directly from our users in plain English: “Can you please add the option for Autoplay in the WordPress plugin?” or “Where do I find the option for Autoplay?”
In this case, the answer is obvious: Many people want it so add the feature.

Subtle Suggestions

Other potential features are harder to decode due to the infrequency of the suggestion. One user asked about changing the length of the excerpt text (shortened summary) in our new Smart SlideDecks. He was promptly told how to do this by one of our developers, who explained that he would need to edit the code. A week later we got an email from another user asking the same thing. At this point we started to wonder if this should be added as an option.

The decision to add this as a feature needs a bit of decoding: Do I add a feature just because two users requested it? Will it complicate things? Will other users even use the feature?

Keep It Simple, Then Iterate

SlideDeck’s Smart SlideDeck feature has had an excellent reception. Its strength seems to be the near-zero effort required to add it to your WordPress site.

I am glad that we’re updating the interface in an iterative way; it could have overwhelmed the users at first if we didn’t keep things simple. Now we’re adding features on an “as-needed” basis.

Listening To Users

Design by committee or community is usually asking for trouble, but if you allow the vocal users to initiate these design and feature requests, you might be surprised at how much valuable feedback they contribute. Listen to your users, but try to filter their complaints into constructive criticism.

Related Posts:
Smart SlideDecks For WordPress
SlideDeck WordPress Plugin Now Available

Despite their major role in the web experience, forms are frequently overlooked. Whether it’s a contact form or a log-in panel, form styling often falls short of the mark. The style of your form should coincide with the style of your web page. This continuity will improve the quality of feedback you receive.

First, ask yourself these questions: “Who is going to be completing this form?” and “What is the most important data I wish to obtain?” Users don’t want to be burdened with typing a lot of information. Be tactful if you decide to force users into completing a form, as you may risk losing their attention.

Simplify your form to its most basic level

• Ask only for essential information. Review a form several times to eliminate unnecessary requests.

• Consider breaking a form down into shorter steps if instructions seem too verbose. Keep in mind: Users prefer not to think, and lengthy instructions require thinking.

Version App’s purchase form is condensed by grouping related fields
and setting field values as each corresponding description.

Gathering accurate information is critical, and you should strive to achieve this while requiring the least amount of work from a user. Guide users to submit valid information, avoiding any potential mistakes.

Obtain valid information from your user

• Tool tips are an excellent way of providing users with hints for completing forms.
• Empty space around a field can be used to depict examples.
• Auto format fields with special characters (phone numbers)
• Require users to repeat an entry (passwords/email addresses)
• Don’t forget to validate!

Wishlistr’s registration form provides tips in the far right column
and displays an error message below for invalid field entries.

Aesthetics

• Practical use of shapes, patterns and hard edges are great ways to direct the human eye.
• Eliminate clutter by limiting visuals and spacing elements appropriately.
• Graphics are sometimes more distracting than helpful, so remember that excess space can lend to good structure.
• Consider placing focus only on the contact form (lightbox effect), and making irrelevant content appear out of focus.

Grooveshark’s registration form is a pop up that sits on top of a black mask,
hiding the page content that lays beneath.

It’s no surprise that web users find forms to be a nuisance. It is your job to reduce the user’s workload and successfully obtain valid information by minimizing the chance of human error. With thoughtful form design, we facilitate clarity in communication, resulting in a pleasant user experience.

There are many times when designing for interaction where you need to make a decision between hover and click to take action. Your choice can make the difference between a good and bad user experience.

There are different types of interactions that make sense to apply on hover, and there are others that make sense to apply on a click. Typically you want to give the user a hint that there is some action to take when they hover(tooltip, color change, etc.). You want to let the user make the decision to take that action or not, giving them more control over their experience.

Of course there are exclusions to this, a drop down menu in your main navigation is one of them. Though if you are using a multi-tiered drop down, a click based functionality might be a better choice due to added complexity, giving more margin of error on the users end.

Adobe’s homepage has examples of both good and bad user experience when it comes to hover vs. click interaction.

The good:

Submenu drop downs on hover in the main nav. Drop down menus come in many varieties, most on hover, some on click. Here Adobe offers their submenu options on hover, if they were using a more complex menu structure with more than 1 tier then hover might not be the best interaction for this navigation. They stick with a commonly understood convention and execute it well. The addition of an arrow or some form of notifying the user that there is a dropdown menu might be a possible option for them as well.

The bad:

Adobe’s Products and solutions accordion changes on hover. This is not so good, it really catches the user off guard. Typically accordions are set to reveal their hidden content when the user clicks on the label, not when the user hovers. As you can see, a mere moving of the cursor to get out of the content’s way can trigger the next chunk of info to show, the user is not taking action to get this information, it is just a mistake. A better use of this feature/tool would be to set a hover state on the label, a slightly lighter color grey. This would notify the user that there is an option to click and reveal more info, but it lets the user make that decision for themselves.

In summary:

A few things to consider when in the position to make the choice between hover vs. click:

• Does your decision allow the user to be in control of their experience?
• Are you going against a commonly understood method of interaction?
• Are you forcing the information on the user when they are not requesting it?

Related Reading:

• 13 Awesome Javascript Animted Flash Like Menus – DevSnippets
• Hover and Click: Usability in Rollover Interactions – Erin Young

Your home page is a great place to display a custom feed that shows your recent blog posts, tweets and news. If you work in PHP, then there’s a great tool called SimplePie that eases the creation of these custom RSS feeds; the graphic below says it best.

SimplePie is an awesome tool for combining multiple feeds such as your Twitter feed and your blog posts feed; and it has a great caching feature. However, there is one problem: loading two or more feeds can cause an extremely long delay in your page’s load time. The caching feature works well in this case, but that still means that one of your visitors will experience a “stale” cache at some point, and that means they will have to wait an extra 4, 5, even 10 seconds longer for your page to load. This is especially unacceptable on your homepage.

How you can speed up SimplePie using an AJAX request

I recently thought of a solution to this issue and it’s quite simple. When creating a SimplePie feed and specifying options such as what feeds will be loaded, whether or not we want to cache the results, and how long the cache should last, we can play a little trick on SimplePie.

1. Tell SimplePie that it should cache its results for one, even two weeks. This means that even if I visit your website now, and then a week later, your homepage feed will load almost instantly as it’s getting the results from the cache. This does, however, introduce the new issue of the feed items being really stale.
2. Fix the issue of old feed items: when a user visits your page, we show them the stale results (which show up instantly) and then in the background using AJAX, we tell the web page to refresh the cache without interrupting the user. Specifically, we’ll tell SimplePie to fetch the results for the feeds again, but without using the cache this time. Since the heavy lifting happens in the background, it never interrupts the user and we can even display the new fresher information when it’s done being fetched. This freshly fetched data will also update the cache to a more recent state.

Using the above technique, your users will always see some sort of feed information instantly, and it’ll always be only as old as when the last visitor landed on your home page; their very presence would have refreshed the cache!

I’m sure that there are other ways to accomplish a similar result, how do you handle feed caching on your site?

Related Reading:

SimplePie FAQ
A Collection of Beginner SimplePie Tutorials

We are extremely excited with all of the entries that came through during the competition. Thank you to all who participated and our awesome competition sponsor, Media Temple, for providing fantastic additional prizes. Also, much thanks to each of the great judges for donating their time to assist us with our first competition.

The Awesome Judges:

Jeff Veen Founder/CEO, typekit

Ryan Singer Lead Designer and Product Manager, 37Signals

Paul Boag Founder Boagworld

Emily Chang Co- Founder, ideacodes

SlideDeck Skin It to Win It Competition Winners:

Congratulations to each of our winners! The top 5 winners will also receive free copies of the SlideDeck Pro jQuery library and WordPress plugin for use on their website.

All of the top 20 finalists will have their theme designs converted into SlideDeck skins. These skins will be added to SlideDeck’s public skin library for everyone to download and use!

Fifth Place: Invasion by Jacques Pena

Fourth Place: Ribbons by Artem Lapitski

Third Place: Stitch by Orman Clark

Orman Clark will receive one year of free hosting from Media Temple on a (dv) Grid-Service
($240 value).

Second Place: Voyager by Chan Karunamuni

Chan will receive one year of free hosting from Media Temple on a (dv) Base
($500 value).

First Place Grand Prize Winner: Literally by Megan Taylor

Megan Taylor is the winner of the 16GB Wi-Fi iPad
($499 value).

New Smart SlideDecks!

We’ve just made a great new addition to the SlideDeck WordPress plugin called Smart SlideDecks. You can now create automatically generated SlideDecks to place in your WordPress theme, pages or posts.

Populate Smart SlideDeck content automatically with recent, popular, or specific featured posts; you can even filter the posts you want to show by category. Configure the Smart SlideDeck to auto play and place it at the top of your website’s theme for a great looking way to show off your content!

We’ve added some great new options to configure SlideDecks as well. We have included two great new themes with three alternative navigation styles for use with Smart SlideDecks. You also now have the ability to hide slide title bars, auto-play and loop your regular SlideDecks!

New Smart SlideDeck Interface

New SlideDeck template for Smart SlideDecks

Vertical Slides Added to SlideDeck Pro JavaScript Library

About a month ago we announced that we were experimenting with some great new prototype features for the SlideDeck JavaScript library core. Now, we’re happy to announce that vertical slides like those shown on slide 2 of the SlideDeck on our WordPress plugin marketing page are part of the SlideDeck Pro JavaScript library!

Once you’ve purchased the SlideDeck Pro JavaScript library check out the usage documentation for how to implement the vertical slides on your website.

Pro WordPress Plugin Users: We’re going to be adding this feature into the Pro version of the WordPress plugin soon too! Remember that all Pro WordPress plugin purchases come with FREE upgrades to future versions of the WordPress plugin, so you can still get the plugin now and get the vertical slides feature when it is released!

New Features Added to SlideDeck Lite JavaScript Library

We’ve moved a ton of features over to the SlideDeck Lite JavaScript Library. Check out some of the features that used to only be available to Pro users, but now even Lite users can access:

• Auto Play – Have your SlideDeck automatically progress through the slides at an interval you specify.
• Hide Slide Titles – Hide the slide title bars between slides to use SlideDeck like a more traditional slider.
• SlideDeck Looping – Great when you’re auto playing your SlideDeck and have the slide titles turned off. Your SlideDeck will automatically loop back to the beginning after it has cycled through all the slides.

Check out the usage documentation to see more features that have been un-locked for the the SlideDeck Lite JavaScript Library.

SlideDeck Lite JavaScript Library goes GPL

In support of the open source community, we have decided to make theSlideDeck Lite JavaScript Library GPL licensed! Now when you download the Lite version of SlideDeck’s JavaScript core, you get the source code with it and are free to modify and distribute the code within the limits of the GPL license.

Using dropdowns in web design has been a longstanding debate in web usability.  I am not here to argue for or against them (however the links at the bottom will). As most things in design there is a time and place for everything and there are always exceptions to the rules. Instead I am here to talk about mega dropdowns or mega menus.

Mega dropdowns began surfacing in the web a couple years ago. In a nutshell, a mega dropdown is a dropdown menu that’s fully visible and structured using design elements such as typography, layout or icons. They provide the user with more information than a typical dropdown thus making their selection easier (which is what it’s all about!).

Benefits of mega dropdowns include:

• avoiding the need for an overview page (which basically serves as the middle man)
• saving space
• keeping the user on the page (login forms etc)
• providing additional information like images, icons, prices etc
• organizing & structuring content
• quick access to content – less steps for the user

Here is a list of some of my faves!

Visit Philly

npr

Boxee

hulu

Reuters

Burton

Porshe

Adidas

Related Reading:

• http://www.useit.com/alertbox/mega-dropdown-menus.html
• http://www.useit.com/alertbox/20001112.html
• http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
• http://message.uk.com/dropdown-menus-no-thanks/

Small pagination sucks. It is difficult to see, a pain to use, and can be frustrating to the user. Here are a few tips on making your pagination more usable and friendly.

1. Increase its size

If your pagination is tiny, like Blockbuster’s, it would be worthwhile to increase its size.

Tiny links, not obvious - hard to see and use - Blockbuster.com

Their pagination hides at the top and bottom of the page, not really styled to be obvious or stand out. The links are small, and they’re using their standard link style, underline for hover, which you really cannot see when your cursor is over the page number. Their hover state is not very obvious, and the links are hard to click. Upping the pagination text size from .75em to .85em is an improvement, and increasing the click-able area would help.

Not obvious and tiny - hard to use - Yelp.com

Tiny and hard to see. Item count instead of pages work due to small number of pages per item category - thinkgeek.com

2. Make the click-able area larger

A lot of pagination links are left to inherit the link style on the page, as in the case with Blockbuster. By writing some pagination specific CSS and increasing the click-able area of the link, you instantly improve the user experience. The pagination links are now easy to click, and the user does not get frustrated trying to hit your 5px wide page numbers. Here are some examples of well sized pagination:

Click-able areas larger, but no hover state. No response given to user- cssmania.com

Large click-able area - could use background color change too - smashingmagazine.com

3. Make it obvious

Style your pagination out so it is obvious that it is pagination. A nice border or background color assigned to the page numbers work well. flickr and delicious are good examples of usable and obvious pagination:

Large clickable area, obvious pagination, clear hover state - flickr.com

Large click-able areas, obvious in layout, good hover state - delicious.com

Small pagination that is un-styled just does not work. It is an important piece of your site and you do not want your users to get frustrated using it.

For further reading and inspiration:

• Pagination Gallery: Examples and Good Practices – Smashingmagazine.com
• Pagination: Best Practices for SEO & User Experience – SEOmoz.org
• 42 Pagination Design Inspiration – Komunitasweb.com
• Pagination Design Patterns – ui-patterns.com
• Reverse Pagination For SEO? – seroundtable.com

We have all faced it. Some of us more than others. That space that you find yourself in where the very thought of being creative locks the gears of your brain and no matter what you do you can’t seem to get into a groove to solve the creative challenge that you face. I am referring specifically to creativity in the realm of web site and user experience design, but really these tips should apply well to any creative task that lies in your path. These are some of my tricks, but by no means are they the only methods so please share some of your own via comments.

1. Just Start - This is the basic one that everyone is told, so I definitely wanted to list it here, because it is true that the best way to overcome an obstacle is to be in action. Thinking about it will get you nowhere if you are already stuck.

2. Do it Wrong - Lets face it, when you are really stuck, “Just Start” sucks, and hearing it can make you want to put your head through a window, which is why I have come up with “Do it wrong”. One of the biggest sources of creative block for me is being preoccupied with doing it wrong, or thinking I don’t know the right way to proceed. When this happens the wheels lose contact with the ground and you’re stuck. So sit down and do it wrong! No, seriously do it as wrong as you can within the description of the task at hand. It is at the very least incredibly liberating and the results are usually pretty entertaining. As a side effect, more often than not you will actually discover that the wrong gives contrast to the right and you soon will be on your way.

3. Get Someone Else to Do It - No…I don’t mean to pass the buck. Get out of your head and get input from others. It’s your task, and you have to come up with solutions for it, but the simple act of talking it out will get you in action (yes…that again). Collaboration is a key component of creativity and if you are not indulging in this often you have to ask yourself why not:

• Is it pride? You are afraid that asking for help will make you look less creative
• Is it lack of preparation? By the time you are realizing you are stuck, it’s 9pm the night before the project is due and you can’t really call anyone for help.
• Is it lack of information? If you can’t explain the task you have to someone else in a clear concise way to get another opinion, then you probably don’t have enough clarity on the task to guide your own creativity, which leads us to the next tip…

4. Redefine Your Task - Don’t get locked into one definition of the task. There are always multiple perspectives and if the one you are taking on does not resonate with you then you need to find a different way of looking at it. It’s not just semantics. Example: If your task is to redesign the primary calls to action of a web site home page, then your task is pretty straightforward right? But you are stuck (and its 9pm). So you redefine the task. Why am I doing this? What is making the CTA’s need more attention? Who am I doing this for? So now, maybe your task is: to make the calls to action look different from other areas of interaction on the home page so that users in a hurry see them before they scroll down the page. Not doing it for you, redefine it again. It is a game of exploration that eventually will provide you with more clarity on your task.

5. Trust Yourself –  If you’ve done the prep, and the research and thought it through thoroughly, then the only thing that is probably holding you back is that fear of getting it wrong, so let go of that and give yourself permission to maybe get some of it wrong. A key aspect of being creative is solving problems, thinking in alternatives and being flexible with reactive thinking and the only way to exercise that is to get feedback from people and respond to it with even more creativity.

I’ve learned a lot of fun little tidbits in my time here at dt. One of my favorite insights has to do with clearing floated elements. There are several ways of dealing with this issue. I used to add an empty div with “clear: both” just under the floating element.

The Better Way to Fix it

But, there’s a simpler and more efficient way to address this issue. By placing a little bit of CSS on the containing element, the height of the floating elements are magically detected.

width: 100%; (any width definition besides “auto” will work)
position: relative;
overflow: hidden;

Create a class of “container” and add that class to whatever needs to be cleared. Unfortunately the “overflow:hidden;” means you won’t be able to use positioning or margins to push elements outside of their container, so just be sure to plan ahead.

Why Does This Matter?

Code is all about being efficient. This solution is quicker for coding since it’s just an additional class and there aren’t anymore empty divs taking up space in the html. That means there’s less code to load, less to sort through when doing edits and updates, and it’s very modular.

SlideDeck is a great tool for showing progress through a process. If your visitor abandons your SlideDeck halfway through (hey, it happens) you might want to remember where they left off. That way you can start the deck on that slide when they return.

Remembering what slide your visitor is on requires SlideDeck Pro, as it uses one of the more powerful features called callbacks. Simply put, callbacks allow you to execute code every time something happens. In this case it’ll keep track of the current slide every time a new slide is revealed.

I won’t get into the code here, as it can get pretty technical; but I will post an example below and provide a link to Get Satisfaction, where you can find a code example and perhaps a discussion, too! Notice on the example below that if you navigate to slide 4 and then leave the page, the deck will already be at slide 4 upon your return… right where you left it! Alternatively, you could just refresh the page and see that it will remember your last slide.

Live Demo of Remembering Slides

Get Satisfaction Idea Including Code

Of course, you could always look at the live demo above and view the source in your browser to see how it all works under the hood.

Remembering the current slide is just one idea that I have considered to make SlideDeck better, and someday it might even make it into the core of SlideDeck; but for now you can easily add this functionality by using the provided code.

Got a great idea for how to use SlideDeck? Post a comment below.

Related Reading:
Extending SlideDeck – Part 1: Controlling The Deck