If any of you are following the Tweetdeck-Twitter-Ubermedia battle then you may recognize this as a bid to get current Twitter.com users to go with an “official” mobile Twitter app when accessing the service on the go – rather than a Tweetdeck, Hootsuite, Cotweet or other third-party application. As the need to monetize grows, these other companies- like Twitter itself – are recognizing that advertising dollars will go to whoever controls user eyeballs. And with so many people accessing Twitter’s services through third-party applications – whether mobile or desktop – Twitter is realizing that unless it grabs the reigns, they may not be able to cash in on their own members.

You May Also Be interested In:

• Twitter Statistics and Info on Usage
• How Does Twitter See Itself and What Are Its Plans and Priorities?
• Twitter Promoted Trends and Keurig’s Coffee and a Cruise Campaign
• 8% of online Americans Use Twitter. Are Your Customers There?
• When is the best time to Tweet, Blog and Share Content?
• Jack Daniel’s hopes to garner buzz on Twitter and Facebook with new Honey Liqueur

You’ve probably encountered a 404 or “Page Not Found” error in your web browsing experience. It is an HTTP standard response code indicating that “the client was able to communicate with the server, but the server could not find what was requested. 404 errors should not be confused with “server not found” or similar errors, in which a connection to the destination server could not be made at all. A 404 error indicates that the requested resource may be available again in the future.” This kind of error is commonly displayed after you click a broken link or follow a link to a page that has moved or no longer exists on a website. (If you want more technical details, check out Wikipedia.)

Of course no one wants their website to have errors, but sometimes they occur. There is definitely value in taking a little time to dress up your “Error” or “404″ page to decrease the frustration when a user encounters it. So what can you do to make the navigation process on your website less of a headache to users?

1. Brand your error page.

I am always amazed that companies don’t brand their error pages. Technically that page is still a part of your site and therefore a part of your interaction with a potential client. Don’t launch an interested user off into the interwebs – use your logo, colors, brand language, visual elements, even the whole design theme. Show them they are still connected to you.

The image below is a 404 Error Page from Wufoo, an online form builder site. You can see it is well branded, keeping with their site design. It even has the main navigation links to their site at the bottom to encourage users to keep looking through the site.

2. Give Users a Place to Go

At the minimum, provide a link back to your homepage. Include contact information or links to similar material or popular articles. Have a search box for them to manually locate the desired material. Don’t force users to click the “Back” button which may take them back offsite – you have them on your site so keep them there by offering them another entrance to your environment.

Below, internet radio site last.fm has an error page with their sites navigation on top and potential content links below.

3. Be informative

Tell users what the problem is (or might be). Chances are, your visitors are not as well-versed in programming languages as your developers are so be clear and keep it simple. Share ideas on what could have cause the problem, and what they can do to fix it – and provide a way for them to let you know its broken!

The image below is an error page from web design community CSS Tricks, and while I love the idea, its not very useful nor informative.

4. Be funny – or at least entertaining!

Have a sense of humor with your error page.  Write a haiku, include clever commentary, post a funny picture or cartoon! You can be informative and witty at the same time. I would caution against making a user feel stupid however. It may be funny, but if a site tells me “Way to go, moron”, I’m more likely to click away then try again. Check out these entertaining 404 Pages.

The image below is an error page from Econsultancy a Digital Community of Marketers. You can see they have their logo, contact information, suggestions to fix the issue, and a funny video of their CEO wiping out in the snow.

Do you have any advice for better 404 pages? Any tales from your web surfing adventures? We’d love to hear it! Leave a comment!

The questions/statements above are typical questions/statements that a designer can be faced with day and day out from project managers, clients and the dev team. Creating a color palette isn’t as simple as opening a crayon box and picking out your favorite colors.  There is actually more thought to what color means and how it should represent the client, the brand and the product of the site.

What is color? According to the dictionary, color is defined as: The characteristics of light by which the individual is made aware of objects or light sources through the receptors of the eye, described in terms of dominant wavelength, luminance, and purity. Thus a color can be represented from white to black with all the colors in the rainbow in-between. Now that we defined the word color what does each color represent? Let’s separate the colors into color families: warm colors, cool colors, and neutral colors.

Warm colors: Red, Orange and Yellow

Red is the color of fire and blood, so it is associated with energy, war, danger, strength, power, determination as well as passion, desire, and love.

Orange combines the energy of red and the happiness of yellow. It is associated with joy, sunshine, and the tropics. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation.

Yellow is the color of sunshine. It’s associated with joy, happiness, intellect, and energy.

Cool Colors: Green, Blue and Purple

Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Dark green is also commonly associated with money.

Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.

Purple combines the stability of blue and the energy of red. Purple is associated with royalty. It symbolizes power, nobility, luxury, and ambition. It conveys wealth and extravagance. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic.

Neutral Colors: Black, White, Gray, Brown, Beige and Tan, Cream and Ivory

Black is associated with power, elegance, formality, death, evil, and mystery.

White is associated with light, goodness, innocence, purity, and virginity. It is considered to be the color of perfection.

Gray is a neutral, balanced color. It is a cool, conservative color that seldom evokes strong emotion although it can be seen as a cloudy or moody color.

Brown represents wholesomeness and earthiness. While it might be considered a little on the dull side, it also represents steadfastness, simplicity, friendliness, dependability, and health.

Beige and Tan are neutral colors with a bit of the warmth of brown and the crisp, coolness of white. They are sometimes seen as dull and boring unless coupled with other colors. Both colors can be a relaxing color for a room.

As a neutral, ivory and cream are calming colors. They carry some of the same pureness, softness, and cleanliness of white but is slightly richer, a touch warmer.

In conclusion, there is more to the meaning of color then anyone gives it credit. So the next time you are asked about color, take a step back and appreciate the meaning of color and how your website should be represented. For more information about color please go to: color theory.

I found a very cool tutorial on Nettuts that helped me understand and create better sprites. Basically you recreate the navigation for Dragon Interactive, which has a perfect example for the use of sprites.

This is the final product as you can see it is all one large image. There is also a demo so you can see how it interacts when you are finished.

The above image is how your result from the tutorial should look.

Recommended Reading:

What Are CSS Sprites?

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Meet The Leanforwards.

• The A&E Leanforwards are a critical audience segment your clients can’t afford to miss.
• A&E Leanforwards are highly engaged consumers who “lean in” instead of sitting back when watching TV.
• They crave programming that’s authentic, emotional and compelling.
• Leanforwards watch A&E to connect, to be challenged and to viscerally experience every moment on the edge of their seats; people watch other networks to escape, relax and tune out – resulting in a passive viewing experience.

A&E is brilliantly (in my opinion) presenting their audience almost as a reality show of its own to potential ad space buyers. They have created an identifiable character (the lean forward) and built an entire interactive environment (in this case a “museum”) around it. Visit the website and you can see Exhibits (the current shows), learn more about Leanforwards (called that due to the fact that they are SO ENGAGED in what they are watching that they lean forward towards the TV), peruse Nielsen statistics and study videos, play a game and win “artifacts of victory” like computers and TVs, or “shop” in their tongue-in-cheek Lean-Oriented gift shop (where everything except the $9999 ENGAGEment Ring is conveniently out of stock as I’m sure some people would attempt to purchase these quirky items).

A&E has given us an excellent example of “thinking outside” of the proverbial (or perhaps quite appropriate in this television oriented case) box. They have created a highly unique campaign with great viral potential. And if you dont believe me, pretend you are a media buyer and go play Wake the Planner and see if you wouldn’t send that link to your colleagues! Especially when you can pit your company against that rival outfit… (I like to throw things at the lazy planner…)

When you first reach your Twitter page after the sign up process you will see a pop up notification asking you to “Add a location to your tweets“. This function will include your geographical location from where you MAKE the tweet. You may or may not want to add this, we can address it in a later article, for now I will click “Not now” (you can always access this under the “Settings” tab).

At the top left of the page is the question “What’s Happening?” above an empty text box. This is where you will write your tweets (which are limited to 140 characters). The “140″ above the right hand corner of the box is a countdown indicating how many characters you have left before you reach the length limits. Below your “Tweet” box is a list of the most recent tweets by the users you “Follow” – this is only viewable to you. On your right hand side panel you will see your profile picture, username and counts on the number of tweets you have made, the number of people you are following, the number of people following you, and the number of “Lists” you are on. Underneath this you will find Text labels like “Home” (which is where you are now), @username (my demo account has the username “@vampirepandas” - if you click this you will see all the times you have been mentioned by other users), “Direct Messages” (these are short

private notes sent between you and other users), “Favorites” (these are Tweets by you or others that you have “starred” as a favorite for any reason–To “Favorite” a Tweet move your mouse over the top right hand corner of that tweet and a hollow star will appear. Click the star and it becomes yellow and will show up in your “Favorites”), and “Retweets” (which we will delve into later). Below this list is a blank white search box where you can enter text and search for that term as it occurs in real time all over Twitter. Next we have “Lists” and current “Trending Topics” all over the world. If you would like to see what the Trending Topics are for your specific location, click the word “Change” underneath “Trending: Worldwide” and choose which city you would like to monitor.

At the very top of your page on the right is another navigation bar with the words “Home” (where you are now), “Profile” (which would be how others would see your Twitter page), “Find People” (which is a search tool) “Settings” (which is where we change all preferences, account info, and design of your Twitter), “Help“, and “Sign Out“.

Settings

Let’s start customizing your Twitter page! Click the “Settings” tab in the top navigation bar. The first page we come to is for “Account” Settings. Here you can change things like your email address, language, timezone, location, and make your account private or public (if your account is marked as private, users will have to request permission -Twitter will send you an email- to view your account). The “Password” tab allows you to change your password. “Mobile” will walk you through the process of setting up your phone so that you can text message your tweets to your account. “Notices” gives you control over when Twitter emails you about new followers, new direct messages, and newsletters. “Profile” and “Design” is where we will customize your page.

Click “Profile” under the Settings tab and we are greeted with the options to change your profile picture, real name, and location, add a website, and enter your short bio information. If this is a company you may want to upload a picture of your logo, enter your company name, add your company website, and provide a tidbit about what you do (limited to 160 characters).

Next click “Design” and a collection of colorful squares come into view. Each of these are “Themes” or pre-set designs that you can choose from that will change your background image and colors. (You can also get third party themes in many other places, but for now we’ll just work with what Twitter gives us.) Clicking a square will immediately change your facade. When you find one you like, click “Save Changes” at the bottom. If you want to further customize your site, you can choose the background image by clicking “Change Background Image” and uploading a different picture. You can also manually change your color scheme to match your brand’s colors by clicking “Change Design Colors“. Just be sure to click “Save Changes” when you’re done!” Click “Profile” to view what your new site looks like to the public. Click “Home” to go back to your access page.

Now that you are all set up, start tweeting! Find your friends, follow people or companies that you like. It will take a little bit of time to build up followers and relationships, but stick with it, don’t spam or overpost and be yourself!

Helpful Hint: Following is one way – if someone follows you then you must follow them back if you want them to appear in the feed on your home page.

Next Step: Anatomy of a Tweet – Definitions of Common Terms and Symbols

For more Social Media 101 advice check out our video series with Emily Paterson covering Introduction to Web 2.0, Blogging 101, and Twitter 101

The Small Print: Writing User Interface Instructions
http://understandinggraphics.com/design/writing-user-interface-instructions/

• People assume certain things about the functionality of a website.  Generally, these can be noted as common interface elements (button rollovers, selected states, etc…)
• Mental models are “general ideas about how things work.”  Think of them like muscle memory in sports only with interactions on a webpage.
• Following common mental models prevents user frustration.
• Know your audience and tailor the user experience accordingly.
• Be precise without loosing anything important.
• Descriptive words on call-to-actions improve user experience.
• Avoid passive wet noodle writing.  State what should be done don’t ask.
• Margins and padding help define content grouping
• Be a font nerd.  Don’t deviate from your site guidelines.  Make fonts readable.
• A picture is worth a thousand words to the less savvy (illustrate how to’s in less obvious situations).
• Whenever possible make calls to action “personal” targeting your user directly.  When possible I would also use personal information that you have available.  Example: “Hey [username], welcome back”.
• Instructions should be freely accessible to anyone (508 compliance?).
• Always test your instructions with those who haven’t used your product.  Do they make sense?

Here are JJ’s reflections on her e-commerce experience with Captico.

Step 1: Download the source files here: flip_this_bird.zip

Step 2: Create your own version of the bird by altering the source file.

Step 3: Submit your work to Flip This Bird Flickr photo group for the world to see.

Here’s an example of a flipped bird by Jonathan Phillips: