Start designing emotions

, , ,

Despite the somewhat provocative title, you shouldn’t really stop designing aesthetics.

Gradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions.

Discussing emotion in design is a bit of a hot topic at the moment, it seems to be popping up in more and more blog posts and speaker sessions. In fact I saw at least three different web designers say that it was the subject of the talk which they had recently submitted for next year’s SXSWi.

So what’s all the fuss about? Today we’ll take a look at what that means, how you can do it and why you should. This is taking design to the next level, beyond the norm.

Emotion Design

1

Emotions are important in design because emotions are important in absolutely everything.

Everyone is trying to make their brand, their website, their name the most memorable thing possible but how are they going to accomplish that? Think of the most memorable times in your life, right now, go ahead.

I’ll wager a good amount of money that the three to four things that you just thought of all involved a lot of emotion. The death of a loved one, the birth of a child, your wedding, the day you bought your first car. We remember the things which instill powerful emotions within us.

In his book, The Alchemies of The Mind, Jon Elster emphatically states that “Emotions matter because if we did not have them nothing else would matter. Creatures without emotion would have no reason for living, nor, for that matter, for committing suicide. Emotions are the stuff of life…. Emotions are the most important bond or glue that links us to others…. Objectively, emotions matter because many forms of human behaviour would be unintelligible if we did not see them through the prism of emotion.”

Using Emotion in Web Design

2

As a web designer, it’s very easy to get caught up in just the design of the graphics. Of course the next step beyond that which everyone gets stuck on is usability.

So many people talk about usability like it’s the be-all and end-all of web design. As one speaker at the Future of Web Design in London succinctly put it this year: “Designing a website to be usable is like baking a cake to be edible. It’s simply not enough. A usable website should be the minimum requirement, it should go without saying that a website should be absolutely usable. It’s time to look beyond that.”

At the most basic level of considering your users’ emotions, you can consider letting them choose how they want your site to work. What content do they want to see on the home page? What order do they want to see it in? What’s their favorite color? Allowing users to customize your site to their preferences (without having to sign up for anything) creates and emotional attachment to the site with which the user is interacting. They’ve just invested time, however little of it, to make this site perfect for them. They’re going to remember that. Check out the BBC website if you want to see this in action.

What about making users happy without them having to do any customizations though? What about creating something that is so naturally pleasurable to use that people can’t put it down? Well, allow me to introduce you to my good friend: The iPhone.

The iPhone isn’t actually the story here, it’s the touch based device, regardless of who it’s manufactured by. As human beings we live in a real world, touching real things, moving them with our hands. In fact, if you think about it, computers are incredibly unnatural to use: We move one thing on our desk that moves another thing on a screen, and we spend hours pushing complex button combinations with our fingers whilst looking in a completely different (vertical) direction.

People are enthralled with touch based devices because they make computers work in a way that we’re naturally programmed to understand. We see something, we touch it, and it responds in some way. I recently watched a three year old girl navigating her way around an iPhone with absolutely no problems at all. The best part? No one had ever taught her to use it.

Touch based devices create emotions within us: joy, intrigue, and surprise. We understand them perfectly and yet they still thrill us because they’re so clever.

 

Creating Emotions

3

So how can we create emotions for users of our websites outside of the UI? Well, to an extent you need to put your marketing cap on here. You need to think about people, not design.

You need to think about perception, not composition. If you can ask yourself a few vital questions about how your users are feeling, then you can go a long way to pleasing them.

Consider FreeAgent for a moment, a fantastic piece of accounting software in the UK, they know that typically people who visit their website are angry, frustrated, and fed up with trying to do their accounts (and failing). Their website is targeted almost solely at cheering you up and telling you not to worry, there’s an easier way to do things. They win.

 

Desire

4

But what about creating emotions at more of a root-level? Apple (yes Apple, no article about design would be complete without some mention of them, so we might as well get it over with) create astonishing levels of desire and jealousy amongst their customers.

Despite producing over-priced, under-performing, over-rated products they still retain unprecedented success, constantly. Apple are the biggest fashion label of the tech world. That’s not an insult by the way, sex sells, and everyone else needs to catch up. Apple makes desirable products.

“Thin, beautiful, portable, durable, accessible, powerful, unlimited, magical, revolution.“

Sound familiar? All of those words and sentiments were used in Apple’s 30 second advertisement for the iPad, and not a single one of them has anything to do with what the product does.

 

Sympathy

5

Another common case study of companies creating emotions in customers, and this is going to be a controversial one, is with charities.

Charities instill sadness and sympathy from deep within you, in order to make sales. Think of every advertisement you’ve ever seen for a charity… most of them go like this: “Sally is a [starving child / stray dog / person with a terminal illness], she’s all alone. Her parents died just after she was born and she’s been living on the streets like this ever since.”

The cause may be just, but don’t mistake the marketing tactics as legitimate sentiments appealing to your moral integrity. The people who create those advertisements know exactly what they’re doing. They’re making you sad, they’re making you sympathetic, and they’re making you want to reach out and help – with your wallet.

 

Anger

6

Possibly the most interesting way to look at deliberately instilling emotions in users is from the perspective of anger.

Now, this has been suggested before, but to my knowledge never confirmed. What do we consider to be great customer service? Usually it’s when a company gets something really wrong, they own up to it, give you a full refund and treat you really well.

It’s unexpected and we absolutely love it. It may be cynical, but is it really unreasonable to think that companies may now be screwing up your order on purpose? If I was running an ecommerce store I would deliberately screw up about 5% of all my orders – then give the customer a full refund and send them the product anyway.

You can’t buy publicity like the way they’re going to talk about that to all their friends.

by

How changing a button increased a site’s annual revenues by $300 million

, , ,

It’s hard to imagine a form that could be simpler: two fields, two buttons, and one link. Yet, it turns out this form was preventing customers from purchasing products from a major e-commerce site, to the tune of $300,000,000 a year. What was even worse: the designers of the site had no clue there was even a problem.

The form was simple. The fields were Email Address and Password. The buttons were Login and Register. The link was Forgot Password. It was the login form for the site. It’s a form users encounter all the time. How could they have problems with it?

The problem wasn’t as much about the form’s layout as it was where the form lived. Users would encounter it after they filled their shopping cart with products they wanted to purchase and pressed the Checkout button. It came before they could actually enter the information to pay for the product.

The team saw the form as enabling repeat customers to purchase faster. First-time purchasers wouldn’t mind the extra effort of registering because, after all, they will come back for more and they’ll appreciate the expediency in subsequent purchases. Everybody wins, right?

“I’m Not Here To Be In a Relationship”

We conducted usability tests with people who needed to buy products from the site. We asked them to bring their shopping lists and we gave them the money to make the purchases. All they needed to do was complete the purchase.

We were wrong about the first-time shoppers. They did mind registering. They resented having to register when they encountered the page. As one shopper told us, “I’m not here to enter into a relationship. I just want to buy something.”

Some first-time shoppers couldn’t remember if it was their first time, becoming frustrated as each common email and password combination failed. We were surprised how much they resisted registering.

Without even knowing what was involved in registration, all the users that clicked on the button did so with a sense of despair. Many vocalized how the retailer only wanted their information to pester them with marketing messages they didn’t want. Some imagined other nefarious purposes of the obvious attempt to invade privacy. (In reality, the site asked nothing during registration that it didn’t need to complete the purchase: name, shipping address, billing address, and payment information.)

Not So Good For Repeat Customers Either

Repeat customers weren’t any happier. Except for a very few who remembered their login information, most stumbled on the form. They couldn’t remember the email address or password they used. Remembering which email address they registered with was problematic – many had multiple email addresses or had changed them over the years.

When a shopper couldn’t remember the email address and password, they’d attempt at guessing what it could be multiple times. These guesses rarely succeeded. Some would eventually ask the site to send the password to their email address, which is a problem if you can’t remember which email address you initially registered with.

(Later, we did an analysis of the retailer’s database, only to discover 45% of all customers had multiple registrations in the system, some as many as 10. We also analyzed how many people requested passwords, to find out it reached about 160,000 per day. 75% of these people never tried to complete the purchase once requested.)

The form, intended to make shopping easier, turned out to only help a small percentage of the customers who encountered it. (Even many of those customers weren’t helped, since it took just as much effort to update any incorrect information, such as changed addresses or new credit cards.) Instead, the form just prevented sales – a lot of sales.

The $300,000,000 Fix

The designers fixed the problem simply. They took away the Register button. In its place, they put a Continue button with a simple message: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.”

The results: The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.

On my answering machine is the message I received from the CEO of the $25 billion retailer, the first week they saw the new sales numbers from the redesigned form. It’s a simple message: “Spool! You’re the man!” It didn’t need to be a complex message. All we did was change a button.

by

Creative QR code business cards

, ,

There is a lot of buzz around QR codes at the moment, so we thought we would take a look at some of the most creative and stunning QR code business cards on the web.

We love QR codes as they connect offline and online while challenging traditional design at the same time.

First of all, in case you have been living under a rock, let’s answer the obvious question. What the hell is a QR code?!

A quick response (QR) code is a two dimensional code that can be scanned and read by smartphone cameras to transfer information. The information can then be encoded to text, add a vCard contact, open a URL or much more.

So, by placing them on a business card, you can digitally pass on your contact details, direct people to a website, send them to a Flickr photo set or Facebook fan page or offer a special discount etc.

Hopefully the examples below will help to inspire you on how QR codes can be incorporated creatively in your designs. Or at least, provided a few interesting ways that they can be used to connect offline and online media.

Shelby Montross QR Code Letterpress

This card is a QR code that has been letterpress printed. It fits perfectly with more classic styling and design. Sweet.

 

Nightshade Labs

We liked this original card as it incorporates the companys’ beaker logo into the QR code (and yes it still works as well!).

 

Wanda Digital

The white QR code against the grey background on the back of the card matches the color scheme of the logo and looks great to boot.

 

Reblis

The QR code here is art in itself. Simple, but extremely artistic.

 

Big Fat Media

This card is on ultra-thick 4 ply cotton providing a premium appearance and touch. Absolutely stunning.

 

Perforated Business Card

We liked these cards from the Aquarius Club as each card has a QR code with meCard information of the person ready to be scanned and uploaded directly into a phones address book.

 

Peipei Yu’s Cards

We love what Peipei Yu did with not just the QR code itself, but the paperboard stand built in and box! Original, creative and fun.

 

Fridgehead

Cut out the QR code and it still scans…!

 

Tom Neal Film

We really liked the simple messaging on this card alongside the code. The rounded edges of the card also match the rounded edges of the QR code in the centre.

 

Digibrand

Beauftiful cards. The QR code sits nicely next to the cut out logo. The attention to detail on this card is really inspiring.

 

Soren Ragsdale

These cards are really clean and simple with no color. Yet they stand out!

 

23rd and 5th

Would you throw away business cards that looked this stunning? Thought not. The red QR code matches 23rd and 5ths logo perfectly.

 

Drew Hornebin

Drew included a couple of QR codes on this design with the logo in the background which shows off a real creative edge.

 

Kayma

Doko Dare used the QR code to direct users to their place page.

 

Casey Templeton

We really like the faded, old skool design on these cards. The QR code doesn’t look out of place at all.

 

Barefoot Media

Barefoot Media proudly use the QR code as part of their bold design.

 

Monkey Simon

Monkey Simon makes you want to scan it to know what it is…!

 

Stephanie Obodda

These minimalist cards are a real thing of beauty. Once again the QR code is the centre piece of the design and with amazing effect.

 

Tatadbb

These cards are really simple, but the combination of the extremely bright colors alongside the QR codes really draw the eye.

 

b-type design

The QR code IS the design in these cards. And they look great.

 

Metaform

The design by Mark Stokoe works perfectly with a code on the back. If you look carefully you may also be able to see the ‘M’ of the logo in the very centre of the QR code.

 

Social Bendodson

These cards are cool just because Zelda is on them… :-) .

 

Soul Visual

These cards put the code right next to the printed contact details. Online and offline pefectly catered for!

 

NightOwl Craftworks

These business cards are really cute and made us smile. The text alongside the QR code encourages you to take a picture and visit their website.

 

Geng Gao

The bright vibrant colors and QR codes just make you want to pick one up…

 

Lanec Technologies

These rounded edge business cards from Lanec Technologies include a code with contact information for each employee.

 

Marc Heatley

Marc used a lot of space for the QR code on these business cards, but it macthes the design and font perfectly to great effect.

by

Communicate from human to human

, ,

It’s not new to say that we now live in an age in which survival in business depends on your ability to communicate effectively through the internet.

What is new is the realization that just having any old website isn’t enough. The quality of your site and the nature of its content are paramount and your ability to communicate with your audience is the key.

A good website is built on two basic truths—that the internet is an interactive medium and that the end user is in fact human. In other words, it is meant to be an experience. As with any adventure, a little strategic thought is needed to ensure that the experience is enjoyable.

Respect me

Remember that the person on the other side of the computer screen is a human being. They want to know that your business understands them.

Take the time to find out who they are and what they like. Then tailor your message and design to suit them. A real-life analogy is the approach you would take to initiate a conversation with a stranger at a party (a person with whom you hope to become better acquainted). You would do well to listen intently to what interests them and then craft your conversation to suit. You wouldn’t bore them with a lengthy extolment of CSS or Ajax on a Saturday night, would you?

Try to think beyond the demographic and envisage the individual. Many web briefs contain a far-reaching description of the audience. During the briefing session, try to narrow the focus. A brief may begin at:

Intranet Audience: 20–50 year old real estate agents

This can be divided into a primary and secondary audience, as follows:

Intranet Primary Audience: 20–35 (sales agents)

Intranet Secondary Audience: 35–50 (middle and senior managers)

From that point, it helps to imagine yourself as the agent, logging onto the intranet with a cup of coffee in hand half an hour before tackling early open houses. Do you see your desire for flash animation disappear in a puff of smoke? Do you see how “get to the point fast and be obvious” becomes a distinct directive? How about the need for personalization, so the agent can see what they require immediately, for example, appointments for the day, contacts, and their sales pipeline?

Closing the gap between yourself and your audience will help you to make the right decisions and tailor the design to their needs.

Tell me a story

Harness one of the oldest and most effective ways of communicating knowledge on your site.

Storytelling is a rich and compelling way to involve the user in a design, evoke an emotional response, or enhance a user’s learning experience. The question to ask is:

Is there a more creative way to present the required information to increase the user’s involvement?

News websites are increasingly rising to the challenge. In the past a breaking story would have been a single page of written text. Now it may be enhanced with multimedia to offer alternate ways to view the story including interactive timelines, streaming web-cam, animation, sound, and video. These elements can give the audience a broader and deeper understanding of the topic and the issues, which surround it.

The most wonderful thing about using the internet to tell a story is that it can be non-linear—the user can click to view fragments of information that interest them, rather than viewing the entire story from beginning to end. By telling a story through user interaction, you enable users to choose their own path according to their preferences or needs.

Engage me

As broadband becomes prevalent, web designers have increasingly begun to combine visual design with interaction and motion. Their role has become less that of a designer and more that of a director of experiences. To illustrate the difference between those roles, let’s look at the way the creative direction of a design might be described:

To promote your strength, which is the local content of the entertainment news, we will include the cityscape of each state within your brand.

The direction of an experience, on the other hand, would require more documentation in the conceptualization stage. An experience director must pull together content, formulate an interactive approach and style, and orchestrate the creative elements in which to propel the story. The web designers of the future may even be required to write a treatment, melding the design process with that of film direction.

By attending to the entire user experience, designers can create a rich, sensory experience, which helps to immerse users and encourage them to become fully involved in the site and its message. When a site is intended to educate, immersion is particularly important, as it can increase learning speed and overall understanding—especially when a site’s main users are children.

Through immersion, the user experiences joy and satisfaction: positive qualities that will be transferred to your brand.

Inspire me

Some people believe that web design starts and stops with branding. Their view is the visual identity of the brand is easily applicable to the web through the transference of common elements such as logo, colours and typography.

Indeed a lot of the traffic that will come to your website will be people who know or chose your brand in the real world. So when they arrive at your virtual world it is an ideal opportunity to reinforce it.

However, your site can do much more than mimic your identity. It can encapsulate the brand personality, whether that is inspirational, trustworthy, or authoritative. These traits were part of the reason why they chose your brand in the first place.

During the filming of Withnail and I, the director told lead actor Richard E. Grant to “stamp the celluloid”, meaning to go full pelt, not half-measure. It’s timely advice for when you want to inspire your audience and make them take action—don’t be polite, grab them by the throat—and bring your brand to life!

Enchant me

A beautiful design will give the user the impression that the site is easy to use, whether it is or not. Also, it is more probable that the design will be used because the human psyche is inexorably drawn towards beauty.

Transactional sites often fail miserably in the aesthetic stakes. The reigning thought is that it is the domain of the usability consultant—that design is secondary and often confined to the “coloring in” of table cells.

Yet highly complicated processes and pages can look deceptively simple with the right styling. Spacing becomes increasingly important as it allows the user’s eyes to rest before taking on the next batch of information. Design can create order and instill a feeling of peace and serenity—positive attributes when you are asking your user to complete a lengthy and profit-creating form. Professional design can also increase user trust levels, the single most important trait to attain for any transactional site.

If you’re not a professional visual designer, you can engender trust and loyalty and foster attraction by consulting a high-level designer for business-critical or transactional sites.

The principles of good human-to-computer interface design are simplicity, support, clarity, encouragement, satisfaction, accessibility, versatility, and personalization. While it’s essential to heed these, it’s also important to empathize with and inspire your audience so they feel you’re treating them less like a faceless user and more like a human being. In doing so, you will extend their affinity with the design and foster positive attitudes towards your brand, company, or product.

by

How To Design A Memorable Website?

,

One of the main goals of having a website, whether it be a portfolio website or a business website, is to declare your presence on the Web. There are thousands upon thousands of websites out there; it’s pretty well established that you are competing for your audience’s interest and attention. To this end, it’s important to make those few seconds count when making a first impression.

 

How To Design A Memorable Website?

  • Make use of original and unique graphics. Having a large, punchy or slightly quirky graphic on your portfolio can help separate you from the competition.
  • Feel free to experiment with non-traditional color combinations. Experiment with various contrasts to create tension, but put readability always first. Invite the users to feel engaged, but keep the page usable.
  • Use original, compelling language to clearly emphasize your differences. Unfortunately, your visitors are likely to read only a small percentage of the text on your website. You can pack the most punch in that percentage by using confident opening statements, catchphrases or interesting summaries to pique the interest of your audience.
  • Keep things organized. This might go without saying, but if visitors can’t navigate through your website or figure out who you are from the start, chances are they won’t stay around to see your amazing portfolio.

Let’s now take a look at some recent examples of striking, memorable designs.

Zinguh! Creativ

Modern Minimalism and Cool Green Accents

Zinguh Creativ features a large, bold slide show and a memorably detailed green leaf favicon. This is a nice example of a slide show spanning the width of the page; it’s both funky and neatly executed. Notice the high quality of product images throughout the site.

Zinguh in Designing Memorable Websites: Showcase of Creative Designs

Green accents in the navigation, and in the favicon, are a unique touch, but could be improved for better readability

The green highlights for text are a bit harsh on the eye, a slightly darker green would probably work better. A minimalist arrangement of the images is a nice touch.

United Pixelworkers

Pixelly Images: A Visual Pun!

United Pixelworkers features a subtly pixellated, textured background as well as foreground images with blocky edges, creating a play on their name which is fun, cute and smart. The texture is so rich, and the information architecture so clean, that this website feels far more content-rich than it actually is.

Www Unitedpixelworkers in Designing Memorable Websites: Showcase of Creative Designs

United Pixelworks uses a static, left-aligned navigation bar

The left-aligned sliding navigation bar is an example of static navigation done right. It’s there, but it doesn’t get in the way of the content and isn’t too obnoxious or obvious. The select color palette and letterpress-style links at the bottom are a nice final touch.

Outback Creative Studio

Large Original Illustrations

Outback Creative Studio features innovative, large navigation buttons on the right side which is a fresh, colorful and inviting approach. The colors, the graphics and the blocky feel of the layout work together to create a bold and unique statement.

Outback in Designing Memorable Websites: Showcase of Creative Designs

Outback Creative Studio has “night” and “day” themes, emphasized with a rooster graphic

The “night” and “day” button allows the user to switch between themes, a creative and unique presentation reinforced by the central rooster graphic. The graded orange and purple color scheme is rich and unusual, and lends the design a unique look and feel.

Mike Kus

Right-aligned, Interactive Logo

Mike Kus has an eye-catching interactive logo with a motto that displays on mouse-over. DEAD stands for “Dreaming Everyday About Design,” which stands out and is easy to remember. DEAD is featured in the favicon too, adding more places for users to see and absorb the tagline.

Mikekus Com in Designing Memorable Websites: Showcase of Creative Designs

Interactive logo

The light background again leaves the emphasis on the work, which is strong enough to stand on its own. Punches of color and the use of images lead the eye down the page very well; notice how well each project’s description and related images are grouped, making the page flow very smoothly.

Wez Maynard

Right-aligned Graphic Mayhem

Wez Maynard uses offbeat graphics, creative layout and original content phrasing to make his website memorable. The design is completely right-aligned, which is quite unusual to see and feels truly novel. The ribbon sidebar on the left is interesting and unique, and the vintage graphics and blue, textured footer are fun and visually interesting. The quirky messaging is a great example of how to use language to create an impression. This is a nice example of an original, unique and interesting design.

Www Wezmaynard in Designing Memorable Websites: Showcase of Creative Designs

Quirky graphics, and messaging to match

Epic Web Agency

Bookplate Graphics, Rainbow Textures and Grunge

Epic Web Agency lives up to its name with its portfolio website. With grungy textures, plenty of bold, contrasting color and Spartan-like helmets as themes in the graphics and images, this site is certainly “epic.” The loud typography and punches of orange add excitement. The colorful logo adds a bit of saturated color to the header. Notice how visual tension is created with a thick diagonal line on the home page. The website uses various background images across its second- and third-level pages, all related to the “epic” look.

Epicagency in Designing Memorable Websites: Showcase of Creative Designs

Texture, color and type work together seamlessly

The artwork used here is all the more unusual because it’s in a much more traditional style, usually reserved for print media. Epic Agency uses plenty of graphics, and does so in a very original way, making for a very visually striking user experience.

Ryan O’Rourke Presents

Elegant, Dark, Responsive Layout

Rourkery.com features a vivid, majestic, theatrical theme which juxtaposes well with playful typography and colorful graphics. Using a distinct theme can be a good way to ensure that content, graphics and messaging work together in a focused way. The website’s centered logo and navbar are both unusually and elegantly done, aligned in the center and using a subtle navy pattern.

Rourkery in Designing Memorable Websites: Showcase of Creative Designs

Theatre theme keeps content and graphics focused

Potential downsides to note are the leading of the text, as well as the visibility of the home page link, which is the logo in the center of the header. Notice how well orange is used as the main color across various design elements. The layout and images resolutions also nicely respond to changes in the browser window size, responsive design at its best.

Christina Ung Illustration

Bold, Unique Use of Typography

Christina Ung Illustration is all about the typography. The liberal use of bold and lighter font-weights, along with the mix of lowercase, uppercase, and mixed serif and sans-serif fonts, all work together to make the type as visually interesting as the use of graphics would be.

Www Christinaung in Designing Memorable Websites: Showcase of Creative Designs

Bold typography logo

The clear, dark logo anchors the eye on the left-aligned navigation, which leaves plenty of room for the portfolio content occupying the main part of the page, to be the main focus. Large screenshots allow the content to be seen very easily without clicking through the actual blog posts. The pink highlights feel fun and fresh, but not overpowering.

Josh Sullivan

“Droll” is Memorable

JoshSullivan.me is a good example of how even a one-page website can pack a punch. The large header graphic is very unique and memorable, with its old-fashioned “nature book” feel. The background is an interesting mix of textures, colors, geometric shapes and historical-feeling images. While nothing is really clickable, this is just a calling card so nothing really needs to be; the social networking and email address links serve as the page’s call to action.

Joshsullivan in Designing Memorable Websites: Showcase of Creative Designs

Interesting stew of background images

The color palette may look a little offbeat, in keeping with the graphics, but this all helps make the website as memorable as it is visually appealing. One small suggestion would be to make the links on the page a bit more prominent so that users don’t end up wandering. A stronger contrast between the text color and the background color would help. The main graphic is so central that it might be a bit overpowering for some, but this really does depend on who the audience is.

Jake Przespo

Fun Graphics and Clean Organization

The portfolio of Jake Przespo features another very creative central graphic. The “fun factor” goes a long way toward making a website memorable, and this is one that adds fun, very effectively. As users navigate through the website, the graphic flips around. The words in the red banner stand out, with subtle hover effects and woodcut detail.

Jakeprzespo in Designing Memorable Websites: Showcase of Creative Designs

Whimsical central image flips around as users navigate through

The minimal colors and splash of red keep the page a clean, minimal background for the front-and-center images. The readability of the content would certainly benefit from an increased font size, though.

Cooper Graphic Design

Large, Bold Header Graphic

The colors really draw the user into Cooper Graphic Design. The shades of brown, with texture and punches of turquoise, feel very bright and upbeat. The layout is clean and systematic, while the main, large center graphic contrasts with the more subtle background graphics in an interesting, attention-grabbing way. The top-level navigation is also very clear, making this an effective and visually appealing portfolio website. Also notice an interesting background image that lends the page more visual appeal. And don’t forget to resize the browser window, too.

Coopergraphicdesign in Designing Memorable Websites: Showcase of Creative Designs

Bold header graphic contrasts with subtler background

One small usability problem, however, might be the tabbed navigation at the bottom of the page. The use of tabs often signifies internal navigation, rather than external. In this case, these tabs seem to link out to external pages, which might confuse users a bit.

Brandon J. Schmidt Design & Photo

Watercolor Graphics

The watercolor graphics on Brandon J. Schmidt Design & Photo are very prominent and visually appealing, especially on the front page. The black, white and yellow color scheme feels minimal and modern, an interesting juxtaposition with the old-world feel of the watercolor.

Brandonjschmidt in Designing Memorable Websites: Showcase of Creative Designs

Soft watercolor graphics

The logo graphic on the home page is faded into the background on the website’s second-level pages, keeping the website logo as the focus and leaving a lasting impression on users.

Water’s Edge Media

Minimal Design With Floral Illustrations

The simple, solid navigation structure and design of Water’s Edge Media stands out even without the illustrations, but the illustrations help make it more memorable. The logo, in particular, is very fresh and modern.

Www Watersmedia in Designing Memorable Websites: Showcase of Creative Designs

Fresh, modern color palette and pretty floral illustrations

The slide show of recent work is neat, but it could use some polish, especially the slider buttons. The left alignment adds a modern feel. Overall, however, a little more variance in font type and size would make the design just a bit more interesting.

Jordan Gray Creative

Minimal Design With Left-aligned Navigation

Jordan Gray Creative features seamless left-aligned navigation below a clean, minimal typography logo. This design is super-minimal, relying on the work in the slide show for content and appeal. Subtle details like the favicon and CSS spacing keep the design from seeming too simple.

Www Jordangraycreative in Designing Memorable Websites: Showcase of Creative Designs

Striking minimalism lets the work speak for itself

Eight Hour Day Design & Illustration

Bold and Colorful

Using the portfolio as the graphic element, Eight Hour Day Design & Illustration integrates a lot of color through relying only on the work. The select color palette of the page itself is crisp and bright. The type is clean and vivid. Although it’s simple, the hint of subtle patterning and shadowing at edge borders and between navigation menus effectively keeps things from looking flat.

Eighthourday in Designing Memorable Websites: Showcase of Creative Designs

Colorful elements are drawn directly from the Eight Hour Day portfolio

It’s Not My Type

A Typography Blog About Typography

It’s Not My Type makes good use of the richness of Web typography—with strong slab serif typography widely used across the various design elements, including the Web form, date and comment areas.

Www Resistenza in Designing Memorable Websites: Showcase of Creative Designs

Fonts change as users navigate through the website

The scrolling content panel works pretty well here; the colors and subtle textures are clean, and add visual appeal.

McKinney

Simple But Elegant

McKinney features a minimal design with accent graphics that are not textures, but geometric shapes like lines, circlesand triangles. The red, gray and black palette is striking yet subtle.

Mckinney in Designing Memorable Websites: Showcase of Creative Designs

Elegant touches through geometric accents

One thing that would be fun, is if the slide show controls were draggable. More hover effects would also give the page a more dynamic feel, making it more interactive and responsive (some elements do, however, respond when clicked on). The consistency of the layout and color choices of the website’s internal pages, also deserves a mention.

Shaping the Page

Playful Origami Animations

Shaping the Page uses a soothing, light and airy color palette as a backdrop for fun, whimsical, animated origami illustrations, which are a visual pun on its name.

Www Shapingthepage in Designing Memorable Websites: Showcase of Creative Designs

Elephants, butterflies and more!

The lightly textured blue background and the wispy social networking graphics at the bottom of the page are downright charming. The portfolio page is nicely organized and right-aligned, which seems to work well with the playful, moving illustration on the left to visually balance the content.

Broken Pencils

Pencil Sketch Illustrations

Broken Pencils, Inc. has a prominent and visually striking logo. Although the navigation is split into bottom and top sections, it doesn’t look redundant since the top is more understated and the bottom uses different colors. The slow color transitions on hover effects on the “Services” page are a nice surprise as well. All of the graphics are simple and modern. The most striking part of the design, however, is the pencil sketch illustrations, in keeping with the “pencil” theme.

Webreakpencils in Designing Memorable Websites: Showcase of Creative Designs

Pencil sketch illustrations echo the website theme and company branding

Who is Leon

Fun With Interaction!

The background animation of Who is Leon might be the first thing the user notices. The static background and scrolling content, combined with the slightly blurred photography, work together to create a sense of motion and excitement. Users might feel invited to click around, and many elements on the page are, in fact, interactive.

Whoisleon in Designing Memorable Websites: Showcase of Creative Designs

Hover, click and move!

The grayed out portfolio screenshots turn to color on hover. Against plain flat background this really makes the screenshots pop, and along with the prominent buttons, invites visitors to take action. The website also involves the use of several fonts, which add to the overall striking effect of the design.

David Paul Seymour

A Monster!

The portfolio of David Paul Seymour is a very fun, colorful, illustration-based website. The illustrations take up most of the page, making them the main focus as well as a design statement. The cloud illustrations for the navigation are fun and makes users want to click around. In contrast to the previous website, none of these illustrations are interactive. This feels a little bit like a missed opportunity, as some hover effects or small animations would really go a long way toward adding to the playful feel of this website.

Www Davidpaulseymour in Designing Memorable Websites: Showcase of Creative Designs

Color and whimsy make this page stand out

One other thing that stood out was the lack of a favicon. The addition of a favicon (most especially on such a graphically rich website) is a really quick and easy way to enhance brand recognition, and to add a more polished, complete feel.

Creativepayne

Bold, Unique Graphics

Creativepayne is a bit tongue-in-cheek, graphically speaking. The old-world art mixes with a variety of other styles; there is a lot going on in this design. The color palette is a subdued mix of browns and tans.

Www Creativepayne in Designing Memorable Websites: Showcase of Creative Designs

Bold, unique graphics and mix of styles

The call to action, “ESTIMATES get yours TODAY,” does get a bit lost in the top right corner; overall, if some of the other design elements had slightly bolder fonts, they might balance out the main, large graphic a little more.

Chicago Interhoods

Interactive Map

Chicago Interhoods is an example of a great marriage of design and information. The orange, cream and blue color palette is striking and fun. With a prominent, central logo and clearly organized top-level navigation, this design is a clean and effective backdrop for the interactive map. The map itself is a nice visual way to browse for information.

Chicago Interhoods in Designing Memorable Websites: Showcase of Creative Designs

Beautifully interactive design aids browsing for information

AdPacks.com Classy Sites & Classy Ads

Vintage Graphics and Type

AdPacks Classy Sites & Classy Ads features a fun, vintage feel in the graphics, fonts and textures. The visual interest created by this mix, invites and engages users to interact the website elements.

Adpacks in Designing Memorable Websites: Showcase of Creative Designs

Fun, vintage graphics and type

The visual representation of the products makes it easy for potential buyers to see and understand what the products are, while the calls to action are clearly laid out in the buttons for each section, making this a complete, well-laid out product landing page.

Min Tran’s Journal

Beautiful Typography and Unusual Textures

Min Tran’s Journal features a ribbon navigation that is sophisticated and tidy. The soft colors work together nicely; the playful typography looks informal and engaging, and also works nicely with the graphics and overall feel. The two-column layout features columns of equal width, conveying a clean, well-organized and fresh impression that is unique at the same time.

Www Mintran in Designing Memorable Websites: Showcase of Creative Designs

Camera graphic, centered two-column layout

Solid Pink Studios

Big, Bold, Diagonal

Solid Pink Studios takes the pink theme its name suggests, but takes it in a completely unexpected direction; the grumpy rock monster looks like he means business.

Solidpink in Designing Memorable Websites: Showcase of Creative Designs

The solid pink rock monster is a fun, memorable element

The diagonally-aligned text works best at a fixed width, and could present some display difficulties to users with a small screen; on smaller screen resolutions, the blog link is cut off to the point of nearly being hidden. Overall, the diagonal text alignment is is a fun and memorable way to present content and is very in keeping with the rest of the design. One final note: this is nit-picky, but it does feel a bit odd that the favicon for Solid Pink is green, not pink.

by

4 simple ways how designers should protect themselves

, ,

4 simple ways how designers should protect themselves

People who don’t understand the true value of graphic designers will try to take advantage of them, especially if they’re newbies.

Others will try to calculate the time and effort involved in designing and then assume you’ll meet their expectations, however unrealistic.

This can wear on you both financially and mentally, so you have to find ways to protect yourself. Here are four ways to keep your work and your clients in check.

Have a look through them and let us know your experiences and whether you would add anything to this list.

1. Contracts and terms of service

Whenever you land a gig, be as clear as possible with the client so that they understand what will happen. I like to have a full consultation with new clients, and once we come to a basic agreement, I go over what they can expect from me and what I expect from them.

You may want to draw up a contract to get everything down on paper and to make sure everything is clear, just in case you run into trouble later on. There are a few essential things you’ll want to put in the contract or terms of services…

Deliverables

What exactly will you be giving them when all is said and done? This is usually specified by the client; they may want your PSD files or perhaps just a format that can be printed. Let them know what they will be getting so that there is no confusion.

Contributions

In addition to the deliverables, let the client know a bit about your process and what you expect from them. One of my biggest pet peeves is clients who don’t answer emails in what I think is a timely fashion; if you’re the same, why not put that in your contract? Spell out (and agree on) what you expect from the client and what they expect from you. This alone will clear up much confusion and hold each party accountable for the duration of the project.

Revisions

This is the cause of most headaches for designers. Spell out as clearly as possible what you consider to be a revision. This is key, because one person’s idea of a revision may not be the same as another’s. Is a revision moving the logo to the left or completely redesigning the page? Once you’ve come to an understanding, specify how many revisions you think are reasonable for the project (and the budget).

I personally don’t mind minor revisions, but complete redesigns are the death of me. To avoid this, you may want to provide several different designs at once and then narrow down as time goes on. But if you do this, make sure it’s contracted. Be up front when talking about revisions as well, and when you submit updates, remind the client what you’ve agreed on.

Payment

This is probably the most important part of the contract. How do you want to get paid? Do you want a deposit? If so, how much? Answer all of these questions so that the client knows what to do.

I strongly suggest some type of deposit before you start a project, just so that you know the client is serious about getting work done. Some designers require payment in full up front, while others have certain conditions depending on the total amount of the project. Figure out what works for you, discuss it with the client, and go from there.

Cancellations

We never like to think that someone would cancel on us. It’s one of the worst feelings in the world. But the truth is, it happens, and you need to protect yourself in some way. Perhaps give the client a time period in which they can cancel, or request a non-refundable deposit. Find something that works for you, and, of course, state it clearly in the contract. You never want to do a ton of work only to have the person back out on you with no consequences. Make no exceptions.

2. Say no

Some designers are so eager to stay busy with work or make money that they have a hard time saying no to projects. Too many projects coming your way is not the worst problem to have, but eventually you’ll get frustrated or burnt out. You’ll want to avoid certain types of projects…

Baby budgets

Be absolutely clear with yourself about how low you are willing to go on price for the work involved. You may have to pass on a ton of projects, but people who are willing to pay will eventually come forward. You don’t want to find yourself zipping through a bunch of cheap projects.

Outside your skill set

Be honest about your skill set. When I started out, I took on projects that were outside my skill set, just so that I would stay busy. I had no working knowledge of Flash, but I would guarantee someone a Flash intro or banner. That was a huge mistake, because I had to learn the skill and execute the task to the client’s liking by the deadline. That’s a recipe for stress.

Only take on work that falls within your skill set. Be honest with yourself and your client. Perhaps you could convince them of an alternative solution that does fall within your skill set.

Full plate

If you’re already up to your eyeballs in work, don’t take on more. You’ll just be getting more deadlines and more stress for no reason. Pace yourself; avoid burning out or getting into a creative slump. Give yourself some breathing room between projects so that you have time to rejuvenate and come up with fresh ideas.

Speeding through projects and working at your limit all the time is not good for your mental or physical health. Don’t be so quick to accept whatever crosses your path. Just let good work come to you, and do it on your own terms.

3. Charge more

Protecting yourself has a lot to do with the types of clients you attract. If you attract ones who you just don’t get along with or who are rude and hard to work with, consider increasing your prices.

The amount you charge correlates to the value (and quality) of your product. If you charge pennies for big projects, you might attract a bunch of clients, but they won’t necessarily understand the value you are delivering. When people don’t understand your value or feel you offer little, then they will treat you accordingly.

If you purchase a $100 digital camera, you can enjoy the product, and if you drop it or scuff it up a bit, you won’t be terribly upset because it was only $100. If you purchase a $1500 camera, you’ll be much more careful with it. That’s the kind of mentality most people have with service providers.

Unfortunately for us, working with people who don’t value our services can be very stressful. Consider increasing your prices in order to attract a different type of client, one who values your work.

4. Set barriers with family and friends

This is a touchy subject for most. We all cherish our friends and family, but we are often the only graphic designer they know. And when they come to us for work, they expect a deep discount or even no charge. Figure out beforehand where you’ll draw the line.

If you offer a discount, make sure that at least your time spent on the project will be covered. Beyond that, treat them just like a regular client. Of course, you might want to be a bit more flexible in the number of revisions you allow and things of that nature, which is fair.

Dealing with requests for free work is a bit more difficult. If I accept a project for free, I treat it as my own personal project. I retain total creative control, and once it is delivered, few or no revisions are allowed — and certainly no redesigns. Again, figure out what’s best for you and your business, and sit down and go over it with your relative or friend.

by

Mobile apps vs. the web

, , ,

Pull the iPhone out of your pocket and look at the home screen. Likely, you’re seeing some well known brands on the web: Facebook, Flickr, and Google to name just a few. You’ll also see companies like Amazon, Target, and Walmart which sell a lot of products via the web.

Like you, these sites and companies know how to build an effective website using the latest and greatest web technologies. The iPhone’s Safari browser also supports HTML5 markup with CSS3 styling and is powered by a fast JavaScript engine. So why is there a proliferation of apps instead of web pages that can do the same thing?

Longtime A List Apart readers may remember the Put Your Content in My Pocket articles I wrote soon after the iPhone launched. Recently, I published a book that explains how to create products for the iPhone App Store. With this article, I’d like to share my experiences with both mobile web and software development to guide your future developments on the iPhone platform.

Apple <3 standards

From Apple’s point of view, iPhone OS and web technologies share equal footing. When you visit their developer site, the Safari Dev Center is prominently displayed. The iPhone gets all the press, but when you click on Safari Dev Center, there’s a ton of great information that explains how to use HTML, CSS, and JavaScript on an iPhone.

When you look back on your first experiences with the iPhone, one app stands above the others: The Safari web browser. Suddenly you were free from a mobile internet full of crappy CSS support or dumbed down presentation-like WAP. The iPhone’s real browser and the fact that it was in your pocket changed how you used the web.

Apple continues to invest heavily in the development of the WebKit browser engine used in Safari on the iPhone, Mac, and Windows. The result is a browser that excels in HTML5 and CSS3 support.

Apple also views HTML5 support as an important part of its marketing message for both consumers and developers.

Because it’s open source, the WebKit rendering engine also powers browsers for many other mobile platforms. If you’re surfing the web with a Blackberry, Android, or Symbian phone, you’ll find that your content looks just as good as it does on the iPhone. The only holdout is Microsoft’s Windows mobile platform which uses a browser based on the IE rendering engine.

With great HTML, CSS, and JavaScript support, developers are doing amazing things with the iPhone. Here are a few notable examples:

Pie Guy by Neven Mrgan

Pie Guy uses HTML5’s offline application cache so that it works correctly when you’re not connected to the internet, as well as CSS animations and transforms for the game’s effects. Neven also keeps track of developments in this area via the HTML5 Watch website.

Showtime by Nial Giacomelli and Benjamin Gordon

Showtime is a simple app that allows you to keep track of when your favorite TV shows are on. It uses a jQuery plugin by David Kaneda that provides many of the controls and effects that you see in standard iPhone applications.

Every Time Zone by Amy Hoy and Thomas Fuchs

Every Time Zone is a very simple, but effective, view of times throughout the world. The slider that lets you pick the time works very well on a touch screen. This web application looks particularly good on an iPad display.

With such great tools available and talented developers that know how to exploit them, the iPhone should be overflowing with web applications, right? Actually, the opposite is true: there are over 100,000 titles on iTunes and only a handful of popular applications have been created with web standards.

Apple has promoted both the App Store and web browser as ways for developers to get their creations into the hands of customers. They even gave the web a year-long head start before beginning to sell apps in the store. Clearly there’s more at play here: what attracts developers to iTunes instead of the web?

Going native

Before looking at the motivations of the move toward iTunes, we need some definitions. Developers have come to categorize the two iPhone development technologies as “native” and “web.” Web apps use HTML, CSS, and JavaScript that loads in Safari. All the examples above are “web apps.”

“Native apps” are created using the Xcode development environment in a language called Objective-C. These are the same tools used to create Apple’s own built-in apps like Mail, iPod, and even Safari itself.

Creating native apps is much different than the process you use to build web apps. Luckily, many of the underlying concepts are the same. Many web developers find that making the switch isn’t that hard:

  • Like JavaScript, the Objective-C language is a descendent of C. In addition to sharing similar syntax, both languages are object oriented. If you’re comfortable with JavaScript, you’ll feel equally at ease with Objective-C.
  • Native and web apps share some familiar design elements. On the web, you’re used to breaking an application’s functionality into pages, creating a series of <div> elements to organize the content on that page, and using XMLHttpRequest to update that content. With Cocoa Touch, “view controllers” are used like pages, “views” provide the building blocks for your content, and NSURLConnection objects act as your link to the internet.
  • Frameworks handle much of the hard work. Just as you rely on jQuery or Prototype when working in JavaScript, you’ll find yourself doing the same thing with Cocoa Touch when you work in Objective-C. Both languages also benefit from a vibrant developer community that is happy to share development tricks and source code.
  • If you’re a Flash developer who’s frustrated because there’s no way to play your creations on the iPhone, you’ll be happy to learn that ActionScript, like its predecessor JavaScript, shares the same lineage with C. The mechanisms for creating animation and other visual effects are different on the iPhone, but the concepts are the same. The recently announced Sparrow framework can help ease this transition, especially if you’re using Flash to develop games. It’s also a great example of the kinds of contributions made by your fellow iPhone developers.

To give you an idea of how similar things are, take a look at this snippet of Javascript code:

 var beAwesome = true; var myString = "chocklock"; if (beAwesome) { myString = myString.toUpperCase(); }

Now, compare it to the same thing in Objective-C:

 BOOL beAwesome = YES; NSString *myString = @"chocklock"; if (beAwesome) { myString = [myString uppercaseString]; }

In Objective-C, the variable definitions are different and function calls are replaced with stuff in square brackets. In a larger context, these are minor details. You can still see the logic that to be awesome, you just convert your string to uppercase letters.

One of the goals for my book about iPhone app development was to make this new environment accessible to people coming from other backgrounds. I dedicated an entire chapter of the book to explaining those square brackets in familiar terms.

The motivation

Learning how to use new development tools will take some effort. So why should developers go through this hassle when they could just bank on the web skills they already have?

Some of the motivation is purely selfish: Native applications give the developer more control over the mobile environment. The other incentive is altruistic: a native app is generally easier for the rest of us to use.

  • Speed: JavaScript performance has increased dramatically in the past few years, but as an interpreted language, it will never be as fast as compiled code that runs directly on the processor. In a mobile environment where processors run slower to conserve power, every clock cycle counts.
  • Data Management: Cocoa Touch has several mechanisms that make it easy to store your application’s data. This is important because caching information retrieved from a network can greatly improve a mobile application’s ease of use. The persistent data storage in HTML5 provides simple key/value access or raw database access using SQL. Core Data on the iPhone provides a much more sophisticated system where relationships between your data objects are managed automatically.
  • Animation: One of the hallmarks of both web and native iPhone applications is animation that reinforces a user’s actions. CSS3 provides ways to animate page elements, but much more sophisticated effects are possible when you access the underlying Core Animation framework with native code.
  • Resources: Mobile developers never have enough memory, network speed, or CPU power. These limited resources are much harder to control when they’re being managed by JavaScript or the browser. It’s easier for native applications to detect these situations and adapt the user experience accordingly.
  • Usability: iPhone users feel most comfortable when they’re using the standard controls they’ve become accustomed to in Apple’s built-in apps. HTML abstracts controls like <input> and <textarea> so they can work in many different environments. JavaScript frameworks, like jQTouch mentioned above, do a fantastic job extending these basic control mechanisms, but an iPhone user will still notice that they feel a bit different than platform-native controls.
  • Productivity: From the developer’s point of view, it’s typically easier to build complex user interfaces using Cocoa Touch: The frameworks do much of the heavy lifting and allow you to focus on the problem rather than its implementation. With the limited amount of screen real estate on a mobile device, a simple form on the desktop often turns into multiple views whose state needs to be managed by your application. Apple developed Cocoa Touch specifically to deal with this situation.
  • Integration: An iPhone has many capabilities that are beyond the reach of the web browser. Some simple examples are the user’s contacts, the photo library, voice recording, and device movement. Cocoa Touch frameworks are the only way to access this information.

As the web has matured, its applications have naturally split into two parts: The front end and the back end. Back end services manage the user’s data and are typically powered by racks of powerful servers. The front end of a web app takes this information and presents it in the browser: HTML, CSS, and JavaScript are all about user experience. In most cases, this front end is a fairly thin layer on top of the much larger back end.

With iPhone apps, this thin presentation layer is replaced. The access to REST-based APIs implemented by the back end is exactly the same. Yes, you’re duplicating the efforts of any front end development you’ve already done for the browser, but this extra effort comes with the benefits mentioned above.

In practice

There are as many approaches to development as there are apps in iTunes. Every product and the people who created it are different. That being said, the evolution of a product from the web to the iPhone typically goes something like this:

  1. Design the product. No matter what platform you’re targeting: Be it the web or a smartphone, your first step is always to think about the problem you’re trying to solve. Figure out what your users want before you get anywhere near implementation specifics.
  2. Implement the product using web standards. Use the tools that you’re most familiar with. This way, you also end up with a solution that has the widest reach and can be viewed on any platform with a standards-compliant browser. Think about using CSS and Javascript that optimizes the experience for users on mobile devices (including the iPhone, Android, and BlackBerry).

    As a starting point, check out Put Your Content in my Pocket and Put Your Content in my Pocket, Part II.

    As you implement this product, pay close attention to how the front end user interface communicates with the back end services. Try to use a REST API that third parties and eventually your own more platform-specific solutions can use.

  3. Launch the product. Get your work into the hands of users as soon as possible. As people begin to use your creation, they’ll start giving you feedback. This starts the virtuous cycle of iteration and refinement.
  4. Run into problems. Eventually, you’ll encounter situations that can’t be solved with web standards. Maybe it’s something like feature requests from users who want to upload photos or access their list of contacts. Some users will explicitly ask for an iPhone app because so many of their other favorite sites have customized solutions.

    There can also be internal pressures from your own designers and developers. They’ll find that navigation and data management are more difficult as the scope of the application increases. When you start to feel like you’re reinventing the wheel, sometimes it’s best just to use the wheel that Apple’s already built.

  5. Translate product design into an iPhone app. You’ll find that many of the decisions you made while implementing web pages were done in the name of platform neutrality. As you enter the iPhone’s platform-specific world, you’ll want to re-evaluate some decisions. Layouts and user interaction should be tailored to make them feel at home in a native app.
  6. Launch product on iTunes. After developing the app for the iPhone, you’ll now have an important new way for users to find your content or service. Which leads to the next section…

Takin’ care of business

The other attraction for developers looking at native apps is simple: There are over 100 million customers in iTunes who can buy your app with a single button tap. They can also pay for your content with the same ease. If you’re running a business, there are some distinct advantages to building apps in addition to your website.

Brand marketing

For brand marketers, the App Store is another important channel to get a product or service in front of millions of eyeballs. The big brands mentioned at the beginning of this article continue to have a strong web presence: their iPhone app supplements their position.

Many of these companies look at a native iPhone app as a cheap form of advertising: 30 seconds during primetime can cost upwards of half a million dollars. An iPhone app will cost much less and when a marketer sees their icon appear in iTunes, it’s better than Christmas morning.

Smaller developers can also use the App Store to find new audiences and fine tune the experience for current users. You’ve already done the hard work with your back end, so the effort and expenses to build a new front end are usually minimal.

Media matters

Many websites have found it difficult to charge for access to content. The root of this problem is a lack of a convenient payment mechanism for the end user. There’s also a history of free access to information on the web. As a result, many sites rely on advertising to pay the bills.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, iTunes offers you a simple way to charge users for content. It can be a one-time payment via app purchase, or a recurring payment (such as a subscription) with in-app purchases. In either case, a customer only has to tap on a buy button and enter their password. Apple handles all the payment processing and accounting. You just wait for bank deposits from around the world at the end of each month.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, With the recent release and popularity of the iPad, publishers both large and small are finding it profitable to repurpose content for the iPhone OS. Wired magazine’s recent debut on the App Store generated 24,000 sales in the first 24 hours. At five dollars a copy, it doesn’t take a financial genius to realize that there is some serious consumer demand for innovative content delivered via iTunes.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, If you think about it a little further, it makes complete sense from a customer’s point of view. You’re used to buying music and video from iTunes. Now with iBookstore, you can get mainstream titles delivered electronically. Adding your own content to this mix makes sense for you and your customers.

Proceed with caution

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, Getting your content into the App Store also includes a step that you’re probably not used to in the wilds of the web: Third-party review. Anything you submit to iTunes will be checked and can be rejected at Apple’s discretion. Every app you see in iTunes has gone through this process.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, The iTunes review tends to err on the side of caution: At one point political cartoons were not allowed because they ridiculed a public figure. Apple has since eased that restriction, but there are still limits that you need to be aware of. These conditions, and other nuances of iTunes, are explored further in my book.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, because you can still use Safari to circumvent the entire curatorial process.

by

How to design attraction

, , , ,

“Look at her: so beautiful, so friendly, so smart. And what a personality. She must be mine. Hooking up with her would make me the envy of all my friends. Sure, she’s young and she’s gorgeous. Besides, I can easily try something new if I get bored or something better comes along.”

No, that’s not an excerpt from Lolita. As cruel and inappropriate as they might seem, these thoughts are fairly common in our society. In fact, in the past year, millions of people have entered into exactly that type of relationship. Don’t bother calling the Special Victims Unit; what we’re discussing here is not what you think it is. It’s the Apple iPad.

Apple seems to have entranced people. It’s hard to walk down the street without passing someone who is plugged in to those iconic white headphones or to enter a coffee shop without hearing someone gabbing on their iPhone. Apple’s stores are crowded, and its products sell in absurd quantities.

Why is this? Apple might be a visionary company with a strong grasp of what’s hip. Yet I believe Apple’s appeal lies in something more than trends, something deeply ingrained in our psyche: relationships.

Relationship-engineering-title-image in Relationship Engineering: Designing Attraction

Psyche Revived by the Kiss of Love, Antonio Canova. (Image: Wikipedia)

We don’t simply own products; we have relationships with them. Intimate ones at that. We are in a state of courtship with every brand in existence. Each of them wants to be a part of our lives, and each wants love in return. Thinking about our relationships with particular products and brands in the same way that we think about interpersonal relationships yields interesting insights. When we decide to bring a person or product into our lives, we must first evaluate our options. The criteria we use to decide whether we love, hate or are indifferent to another person are the same we use to judge a product or brand.

There are many types of relationships, but we can put brand-consumer relationships into three categories: acquaintance, friend and lover.

When someone purchases a bag of apples at the grocery store, they’re demonstrating an acquaintanceship with apples. They’ve interacted with apples before, but there’s no deep attachment, and there has been very little bonding with the product.

The next step up — friendship — emerges because of branding. For example, I always purchase a certain brand of gum. I’ve come to know the brand and its offerings, and I enjoy having its product in my life. We’re friends, but that’s where the relationship ends. There’s no romance involved, and no longing or desire is felt.

Only certain brands manage to take the step from friend to lover. Apple is one of the most valuable companies in the world. It also provides a useful model of consumer courtship. Just about any iPhone user will proudly tell you, like a love-struck teenager on prom night, that they “love” their phone and would be “like, totally lost without it.” There are dozens of cell-phone manufacturers, but only one iPhone. Successful visionary companies, such as Apple, have mastered the art of relationship engineering.

Designing Attraction

Ring-of-fire in Relationship Engineering: Designing Attraction

Love is often likened to fire. In the early stages of a relationship, things start heating up. As the love grows stronger, the flames grow higher. When a relationship falls apart, we say that the fire has gone out. Whether someone lights or douses your fire has to do with the two core aspects of their being: how they appear on the outside and who they are on the inside. That is, a person’s appeal is based on two things: looks and personality. Let’s take a closer look at each of these aspects of appeal and examine how they influence people into relationships with brands and products.

Looks

Baby-got-back in Relationship Engineering: Designing Attraction

Attractiveness spurs lust. It’s a simple cause-and-effect paradigm ingrained in our very nature. We all long for the cute guy or girl in class, and that same desire guides us when choosing a product.

Since the days of Plato, philosophers and artists have tried to pinpoint exactly what makes something aesthetically pleasing. No universal formula for beauty has ever been agreed upon. Beauty is subjective. The designer’s job is to appeal to the collective subjective, or the average of personal preferences. Doing so ensures a product appeals to the largest audience possible.

Making your product visually appealing is not superficial. In fact, design is often a product’s primary competitive advantage. iPod wasn’t the first MP3 player on the market; it didn’t have the largest capacity; it didn’t have the most features; and it certainly wasn’t the cheapest. It was, however, sexy. It was simple and self-explanatory. Its scrolling wheel was as intuitive as it was revolutionary. Perhaps most importantly, it introduced a unique and (now) iconic form factor. The market had been flooded with matte gray devices with black headphones, but this entrant had a clean white front and mirrored back. Even the earbuds were white. Many people tuck their devices into their pockets, which makes the headphones the most visible hardware. Apple exploited this and turned the earbuds into a mnemonic device. Spotting someone with white earbuds, even from afar, immediately told you which brand was on the other end.

The iPod now accounts for well over 70% of the audio-device market. Why? I think it’s because the iPod is just more distinct than its competitors. In a market full of brunettes, the iPod is Marilyn Monroe.

Facebook vs. MySpace

Facebook has more than 500 million users, and that number is growing steadily. MySpace has plateaued at around 125 million. How has MySpace, once the leading social network, fallen behind by such a large margin? There are a number of reasons, but design seems to be one of the most obvious (Newsweek and Mashable seem to think so, too).

Much to its detriment, MySpace allows users to apply their own style sheets. I can imagine the brainstorm that led to this decision: “Wouldn’t it be great to let users customize the look of their page? People love to make things their own and flaunt their personalities. This will surely encourage new users and give us the edge on Facebook. Hurrah!”

MySpace somehow failed to realize that most people’s design education consists entirely of WordArt tutorials taught by Microsoft’s Clippy. Perusing MySpace profiles is torturous. Hideous background images overshadow content, while animated GIFs and illegible text make for an irritating user experience.

Facebook realized that people want to connect with friends more than they want to customize style sheets, so it offered users a clean and uniform interface. Everything was nicely designed; nothing was gaudy or tasteless. The whole experience was much more visually appealing. While MySpace was pushing personalization, Facebook was refining a community to change the way we interact.

To Sum Up

  • People are programmed to judge by appearance, so every interaction they have needs to be groomed to visual perfection.
  • To maximize appeal, designers must be observant of the collective subjective.
  • Design is not superficial. It can be your greatest competitive advantage.
  • Visual distinction becomes a mnemonic device for your product. Incorporate it to increase awareness and encourage recall.
  • Allowing others to control your appearance, while nice in theory, can lead to chaos and brand deterioration.

Personality

Arrested-development2 in Relationship Engineering: Designing Attraction

As we get to know someone, the novelty of their appearance fades, and something more substantial is required to maintain our interest. We start looking beneath the surface and noticing abstract qualities: intelligence, sense of humor, likes and dislikes, ambitions. These qualities have the power to shape how we see the true person. A person’s personality — the DNA of their character — builds lasting appeal.

Character compatibility forms friendship and love. Looks alone might seal the deal for a one-night stand, but acceptance of personality is required for healthy long-term relationships. We’re often told to “be ourselves.” This is good advice. Like a pheromone-ridden glue trap, flaunting your personality attracts and ultimately bonds you with like-minded individuals.

Personality has this effect in the commercial realm as well. Aligning yourself with your target audience is critical to success. I’m sure this is excruciatingly obvious, and many organizations are already tuned into their demographics, but many others either are too shy to display personality or fail to do so properly.

Humor is one of personality’s strongest pheromones. If done right, humor evokes laughter. And yes, laughter is enjoyable in itself, but have you every wondered why we laugh? Anthropologists are discovering that laughing is not necessarily something we do merely for enjoyment, but is actually a subconscious technique that builds rapport. By laughing, we indicate to others that we agree with or accept them. Dr. Robert Provine, who has done extensive research on how, when and why we laugh, likens laughter to a glue:

…“Ha ha ha’s” are bits of social glue that bond relationships… When we laugh, we’re often communicating playful intent. So laughter has a bonding function within individuals in a group.

Applying a coat of humor to your product or advertising campaign is a great way to spark the subconscious urge to bond. Just make sure people are laughing with you, not at you.

Going back to Apple, its “I’m a Mac; I’m a PC” ads focus explicitly on personality by actually personifying brands (Apple and Microsoft). The casual dress and easygoing nature of the Mac character exudes fun, simplicity and intelligence, especially when juxtaposed with the conservative, uptight PC character.

Also, the subtle dose of geek humor gets you laughing (and thus successfully bonding) with the Mac, and laughing at (disapproving of) the PC. These ads strengthened Apple’s reputation as a hip, intelligent, friendly company, while pegging Microsoft as uptight and out of touch with users’ needs.

Microsoft attempted to salvage its reputation by recruiting — or shall we say, throwing money at — Jerry Seinfeld, who starred in a series of ads alongside Bill Gates. For personality, Jerry Seinfeld is a great candidate. He’s famous, his show had some 75 million viewers, he understands everyday people with everyday problems, and he’s funny.

In a swing-and-miss attempt at comedy, the ads follow Bill and Jerry as they “connect” with “real” people. Is it me, or do these ads actually enhance the perception we have of Microsoft as unhip and out of touch?

Digg vs. Reddit

Have you seen the top story on Digg today? Neither have I. A year ago, I would have been able to recap all of the top stories for you. The website was powered by people like me, so I came to rely on Digg to keep me up to date on topics I was interested in. My personality meshed with those of other Digg users, and visiting the website became part of my daily routine. Yet I rarely visit this social-bookmarking website anymore. Instead, I look to Reddit for my democratically selected links.

What has changed? Ever since Digg released version 4, back in August, content quality has dropped significantly. Front-page stories lack relevance, top stories are now decided by far fewer Diggs, and the sponsored links disguised as genuine articles sour the whole experience.

Digg’s personality changed. It destroyed the very foundation upon which it was built. Suddenly, publishers could auto-submit content and bypass the users who once acted as a filter to determine whether articles were relevant to the Digg audience. No longer was Digg a democratic platform. The power shifted from user to publisher. In other words, Digg sold out.

This personality switch rightfully pissed off the core user base. Alienated users began flocking to… well, an alien. Some stayed to plead with Digg that it revert to its earlier version. Digg refused. In revolt, users began to submit direct links to Reddit. Within months, Digg crumbled and users flocked in hordes to Reddit.

Reddit offers a platform similar to Digg and, despite being owned by Condé Nast, lacks the tinge of corporate influence. Before Digg’s redesign, Reddit was serving a respectable 429 million page views per month. Condé Nast has just announced that Reddit now serves more than 1 billion. That’s more than double its pre-Digg-blowout numbers and a 300% increase over its January 2010 figures. Digg has finally pulled some of the features that led to the mutiny, but it might be too little, too late.

A valuable lesson can be learned from Digg: stay true to yourself. With followers come expectations. Personality attracted them, and every action that is out of character will push them away. Introduce advancements incrementally, and users might put up with it; change drastically, and they’ll leave.

To Sum Up

  • Personality builds rapport. Don’t be afraid to flaunt it.
  • Laughter is a powerful social glue, but use it with caution. You want people laughing with you, not at you.
  • Define your personality and stay true to it. Out-of-character actions will be seen as inauthentic and will alienate your audience.

Conclusion

Studying the art of seduction and the rules of relationships can help you craft engaging user experiences and forge strong connections with users. Getting your audience to fall in love with your product is no easy task. It requires a holistic approach involving members of every team. As interactive professionals, our work bridges brand and consumer. We are the cupids of commerce. Sharpen your arrows; it’s time to spread some love.

This has been the first in a two-part series on relationship engineering. In part two, we’ll explore the art of maintaining a relationship and how to trigger purchase recursion via timely break-ups. Stay tuned!

by

Lessons from mobile web design

, , , , ,

Mobile development is all the rage, and the interactive industry is in great turmoil as countless tablets and smartphones come to market.

Mobile app development gets most of the attention, while the mobile web somewhat quietly creeps along. But the mobile web is making progress every day as more and more developers launch mobile-optimized interfaces.

The great thing about the mobile web is that it is fundamentally built with all of the same tools used in traditional web design and development.

This makes it far more approachable than app development. Also, many users will want to visit a company’s website on the go, without necessarily needing a full-blown app.

Building websites optimized for mobile is so similar yet so different then designing for the desktop. Certain factors take on a far more significant role. For example, screen size variations, user attention spans and usability issues are more critical then ever.

These same issues are ever present on the desktop but are sometimes easier to overlook. Here we’ll look at some lessons to learn from the optimization that is happening on the mobile web. The lessons can directly inform how we design and how we think about traditional web design and website architecture.

 

Simplified navigation on mobile websites

One of the first things that becomes evident when digging into mobile websites is the extreme simplification of the navigation. Navigation not only becomes very prominent and central on a mobile website, but is also quite often trimmed down substantially to focus on only the most critical elements.

I find it amazing how top-level navigation can be boiled down to two to four items on most mobile websites. Of course, I recognize that the content on a mobile website is quite often optimized for the intended audience. For example, Truth Tabernacle Church has six options in its main navigation, only one of which has made it into the navigation for the mobile version; and the one that made it (“Contact”) is the focus of the entire home page.

The content that didn’t make it into the mobile version is, of course, still entirely relevant. The mobile interface is intended to catch people trying to find the church or check out the service times or simply contact them. These are the most likely objectives of the mobile surfer. Those hitting the full website on a desktop computer are as likely to want those things as they are to want to research the church to see whether it is the sort of place they would like to visit.

So, what is the lesson to learn? Don’t these two interfaces target totally different audiences and have totally different purposes? Perhaps, but we can learn a lot from the extreme focus of the mobile interface. Notice how everything is about the actions you can take? The church has eliminated all of the navigation elements that feel like boxes to check off.

One interesting element is the “About” navigation option on the full website. The mobile website may be optimized for people on the go, but there is no reason to assume that they wouldn’t be interested in reading about the church and its beliefs. Someone may have mentioned the church to you in passing, prompting you to look it up on your phone.

So, the navigation option for this element should be changed. What if, instead, it communicated something like, “What you should know about us”? While a bit long, it reflects a more helpful attitude. A general “About” bucket feels like a place to hold all of the information that no one reads. “A visitor’s guide to our church” feels a lot more useful and targeted.

The simplicity and focus of the mobile interface shows that everything must have a purpose to earn a slot on the website. If the same were true of the full website, we would be less inclined to fill it with seemingly important content and more inclined to make sure everything has a clear function.

This reflects a very task-oriented mentality. Every option challenges the user to take some active step. It is as though every passive option has been purged and reduced to actionable items on the mobile website. This leads us to the next lesson: be extremely task-oriented.

 

Mobile websites are task-oriented

With a task-oriented mindset, let’s reconsider the full website. While the home page is beautifully designed, the call to action is far less evident. The content is full of bits of information waiting for you to decide to be interested.

For example, the large banner highlighting a coming event fails to call me to some kind of action; very passive. With a task-oriented mentality, we could vastly improve on the “Read more” call to action. This could be as simple as making the call to action much more prominent; for example, a large button in a contrasting orange. Additionally, the call could be changed to “Learn more and sign up.”

Another example is the welcome message. I appreciate the intention and the message being communicated here. The message shows that real people are behind the website, and it attempts to make the page feel personal. But again, let’s dissect this with a task-oriented mentality. A great follow-up to an introduction like this would be a clear call to action encouraging visitors to take the next step. After all, the only people who will be reading this are newcomers. Current members will skip right past this to things like the event calendar. So, offer a conversion point for users, like “Ask us a hard question” or “What to expect when you visit.”

By contrast, the “Special guest” box is fantastic. It addresses key issues and drives people to dig deeper. I only wonder whether it could be a more prominent element of the page. Again, members will get to where they need to go; so focusing on those who are new to the website and the church would go a long way to maximizing the opportunity.

I know I am really beating this website up, but it is not because I dislike it or think that it doesn’t serve its function. My goal is only to challenge our thinking and our preconceived notions of what a website should look like and do. I actually commend this church for having a beautiful and functional website, with a mobile extension to boot!

 

Mobile websites dramatically shrink their content

Another obvious lesson related to paring down the navigation is that mobile websites invariably shrink their content. Not only are the number of options reduced to the core functionality and purpose of the website, but the copy is vastly reduced, too.

In some cases, much of the copy is eliminated entirely! This begs the question, is this content necessary on the full website if the mobile version functions well without it? Divi Aruba is a great example of this. The alluring marketing speak laid overtop the photo might seem like a must-have element for the home page, but it has been nuked on the micro mobile website.

On the mobile version, the logo is placed on top of the same image, and yet it still conveys the exact same message: if you want to go some place like this, read on. Why not use this prominent spot to drive people to the desired action? Surely the designers know what is the most critical element for converting visitors to customers. Put this information to work, and drive people there with a prominent call to action instead of fluffy marketing speak.

 

All the good stuff, sans fluff

This leads us to the next lesson: lose the fluff. The next example is a positive demonstration of this. Travel Tex is a travel information website for the state of Texas. It has a clear purpose and audience in mind. Fortunately, the designers have fully embraced the fluffy-less mindset.

Not only does the mini mobile website focus entirely on the topic at hand and the key actionable items, but so does the full website! What a relief to see almost no fluff at all. Including something dreary like a history of Texas would be all too tempting. If people wanted a history lesson, they wouldn’t come this website. You will be hard pressed to find content that is not relevant to this website’s singular purpose.

Get into the habit of questioning everything. This is the only way to really boil a website down to its critical elements, which is exactly what happens on a good mobile website. Tough choices are made and otherwise valuable content is cut in order to streamline the website. Call fluff for what it is and nuke it!

 

Branding is king on the mobile web

I am all about creativity on the web. In fact, many of the greatest changes in the industry have come about as a result of a refusal to stick to the status quo. But there is a time and place for everything. So many designers use their assignments as an excuse to release their creative juices, for no other purpose than to do something creative. This turns the website into a design for the designer, not for the client and their needs. This is one thing the mobile web warns against rather boldly.

Branding is incredibly consistent on the mobile web, and one of the most consistent parts is the placement of the logo. On mobile websites, you won’t find any crazy logos at the bottom with fixed footers. Functionality is king, and logos always appear at the top. Can you imagine hitting a mobile website and not seeing the logo right away? Yet this is commonplace on many full websites.

Here are a few websites that, while minimal and lacking in mind-blowing style, are rich in branding that can’t be missed.

The lesson here can have a profound impact on how you approach your work and on the fundamental value you pose to your clients. For every designer who figures out that the client’s needs should be their entire purpose for the project, there is another who wants to show the world how creative and original they are.

Like anyone else involved in the production of a website, the web designer should be single-minded in serving the client, helping their business and improving the bottom line. With every element you put on a mobile website, considers its role and the benefit it will bring. Apply this mentality to everything you do, and you will soon find a strong ally in your client.

The more we embrace the needs of the client and do everything we can to bring value to their website, the more we will see a fundamental shift in our work. We will go from building “cool stuff” to looking at everything from the client’s perspective. Does this feature stand to increase their profit? How can the design be changed to improve their business? If a byproduct of your work is more money for the client, then you will find opportunity everywhere.

 

Websites without the gimmicks

One of the greatest achievements of the mobile web is the total lack of gimmicks. To be fair, there is a time and place for gimmicks on the web. In fact, I dedicate whole sections of my books to them. But the lack of gimmicks on mobile websites demonstrates that these seemingly great ideas serve no real purpose.

Everything that goes on a mobile website should go through several filters. Is the content relevant and utterly useful? Is the content critical, and does it serve the core purpose of the website? Is the website easy to use and understand? Is the navigation unconventional? If so, is it critical to the function of the website? The answer may well be yes, but more often than not, it will be a decisive no.

Some gimmicks that are noticeably absent from mobile development are splash screens, unusual navigation, meaningless animations and interactivity, inline scrolling regions, odd layouts and fixed-width layouts. The efficiency of the mobile web is amazing.

 

Conclusion

As you can see, we have a number of lessons to learn from the mobile web; particularly, its ability to reveal unnecessary elements of a website. As with many things in life, a slight change in perspective often opens our eyes to the true value of things we have long taken for granted.

I am not suggesting that we have lost sight of the purpose of the web. Rather, I am proposing that we adopt a far more strategic mentality.

by

Guidelines for good web form design

, , ,

The input form is an essential element of almost any website or application these days. Input is a core method of interaction, and in many cases it represents the hard conversion point between success and failure. With the amount time and effort we put into bringing users to our sign-up and contact forms, it’s surprising that we tend not to spend a proportional amount of time on the forms themselves.

A number of techniques and elements can be used in Web forms to turn them from abject failures into successful conversion points. In this article, we’ll present some interesting examples and useful guidelines for Web form design.

A Dash Of Quirkiness

Part of Web design is about communicating personality and being relatable, because people enjoy dealing with other people. One quality that almost always helps is a bit of quirkiness and fun. A small dose of friendliness and personality will make the input process a bit more enjoyable and human.

Jarad Johnson

Jarad Johnson‘s contact form has a flavor of good ol’ post card. The visual appearance of the form makes it stand out from the usual generic forms found elsewhere. A very nice touch to an often forgotten element of Web designs. By the way, the Postage for the email postal service was already paid. Good to know. Very well done.

11jarad in Useful Ideas And Guidelines For Good Web Form Design

Red Tiki

Red Tiki‘s quirkiness is tied to the company’s brand and identity, but is powerful here nonetheless. From the frame motif to the wooden character peeking out, this form feels fun and approachable. Little colloquial phrases like “This lovely form” and “We’re always keen to lend an ear” are fantastic ways to make the company more relatable. The form is bursting with personality and flare, which helps the user complete the form and click the “Submit” button.

3red in Useful Ideas And Guidelines For Good Web Form Design

Applicom

Applicom‘s form is a great example of how to be clean and professional without being sterile. Styling the form like a letter — with a stamp, subtle paper texture, striped edge and handwritten addressee name — may seem cliche, but it demonstrates a certain level of personality and care. Language such as the “Do: Be fine, use your real address. Don’t: Be negative, spam” may seem trivial, but it’s important. At the end of the day, it makes users feel like they are dealing with people who aren’t afraid to speak to them. Craftsmanship always indicates care and professionalism. People like that.

5applic in Useful Ideas And Guidelines For Good Web Form Design

Sophie Hardach

Sophie Hardach‘s form is another example of a post card idea implemented in a contact form. The input fields are a bit clearer than one would think, yet the “Submit”-button is a bit more difficult to find. In order to send the message, a stamp in the right upper corner needs to be dragged to the Stamp area of the form. In fact, the form is not only very original, but also accessible. Excellent work.

20sophie in Useful Ideas And Guidelines For Good Web Form Design

Two Paperdolls

Two Paperdolls has probably the busiest contact form of all the forms featured in this article. However, the form fits wonderfully to the overall design of the page which is a “We Are Hiring” page for designers with strong focus on typography. Notice the clean real-time validation for the form: the error indicator is diplayed in the right upper corner of each input field. Too bad that the navigation through form fields doesn’t work properly with “Tab”.

10twopaper in Useful Ideas And Guidelines For Good Web Form Design

Kontain

Kontain uses a different kind of a date picker for letting users pick the date for the form. The designers have arranged the dates in four rows rather than displaying them all vertically. A nice idea for reducing the horizontal scrolling for the users.

16-1kontain in Useful Ideas And Guidelines For Good Web Form Design

Wopata

Wopata‘s slider for the timeframe in their contact form is much different from the generic sliders, select-menus and radio buttons. This is a proof that filling in Web forms can be fun.

17wopata in Useful Ideas And Guidelines For Good Web Form Design

Fi

The language used on Fi is more friendly than formal. The inviting nature is reinforced by the short colloquialism for each form field that illustrates why the information is being requested. The language of labels should give off a little charm, without being insincere or overbearing. Isn’t everyone more engaged in a conversation if the other person is pleasant and approachable?

2fi in Useful Ideas And Guidelines For Good Web Form Design

egopop

egopop has a very simple, perhaps oversimplified contact form which however has a nice touch. The weird character on the right side plays wonderfully together with the other characters on the site and makes the contact form less boring than it would be otherwise. The contact form opens in a lightbox.

6egopop in Useful Ideas And Guidelines For Good Web Form Design

Idyllic Creative

Some forms are boring, while some are beautiful. Idyllic Creative‘s contact form is remarkably simple yet beautiful. Another example of a design agency which integrated a character from their work in their contact form.

8idyl in Useful Ideas And Guidelines For Good Web Form Design

Tinkering Monkey

Tinkering Monkey‘s character on their contact page is another interesting example of how the contact form page can be made a bit less boring. Notice the FAQ area on the right side of the contact form. An excellent idea for helping customers quickly find answers to their questions once they feel lost and can’t find a solution to their problem.

25tinkering in Useful Ideas And Guidelines For Good Web Form Design

Ditio

Ditio‘s designers have decided to combine their sign up form and a contact form in a hidden sidebar box, very much like it’s often done with the fixed “Give feedback” buttons on the left or right side. Once a trigger button “Inschrijven” is clicked, users can sign-up for their account and even upload a CV. Notice that there is no textarea available for lengthy details.

3ditio in Useful Ideas And Guidelines For Good Web Form Design

Treehouse Editing

Treehouse Editing‘s contact form is another example of a quirky design with a clean and lean layout. When the user navigates to the page, the background changes to a spring theme, which is itself associated with making contact, thus encouraging them to fill out and send off the form. Notice that all that is necessary for initial contact fits into a couple of fields; further information can be collected in subsequent correspondence. Ask yourself whether a minimal layout would do the trick on your website as well.

4treehouse in Useful Ideas And Guidelines For Good Web Form Design

Amazee Labs

Amazee Labs doesn’t have to do much to make its form usable and inviting. The form has only a few quirks, namely the texture, the “Hi there, let’s get in touch!” line, and the “Send It!” button. It may not seem like much, but the casual language, careful color choice and overall texture help Amazee Labs instantly feel like a friendly and easygoing bunch.

6amazi in Useful Ideas And Guidelines For Good Web Form Design

Wing Cheng

The motif of Wing Cheng‘s website is an open sketchbook, with most of the sections designed as sketches and thumbnail drawings. The contact form maintains this personality and coherency by following the motif. The form is simple and appropriate. The thought diagram with the email address adds visual interest. Maintaining the hand-drawn style is what brings out the quirkiness. Imagine how jarring and uninviting this form would be if it was a default HTML field set stuck on top of a beautiful paper texture.

7wing in Useful Ideas And Guidelines For Good Web Form Design

Break It Down

No one likes a humongous unending list, especially a list of elements to fill in or interact with. Just as a giant paragraph of text is daunting to the user, so is a giant block of empty fields. To coax the user to the finish line, the designer should make them feel like they are completing steps, or bite-sized chunks. Take a giant web project: trying to wrap your head around it all at once is almost impossible. But if you break it down into goals, and then stages, and then sets of tasks, it becomes much more manageable. This is what we want in a Web form, especially if you’re asking for a sizeable amount of information. Keep in mind that you can organize a form simply by sectioning off parts of it or by arranging the content into columns.

CollisonLabs

CollisonLabs‘s contact form might appear to be a bit too complicated at the first glance, but it’s quite straightforward. The left side of the contact page contains alternative contact information as well as a map which is designed with the overall design of the website in mind. On the right side, each input field is clearly represented and highlighted when the user fills out the form. Nice, clean work.

14collision in Useful Ideas And Guidelines For Good Web Form Design

Visual Republic

Visual Republic‘s choice of design for input field labels is similar to the solution by guys over the CollisonLabs. Giving the field label a solid background with an arrow to indicate where the text would need to be typed is a nice technique that could be used more often.

26visualrepublic in Useful Ideas And Guidelines For Good Web Form Design

CSS Tricks

CSS Tricks‘s comment area is a great example of a well-organized, helpful and clean comments area. Notice how the “star” image in the text area fades away as the user types in some text in the form.

22csstricks in Useful Ideas And Guidelines For Good Web Form Design

Barley’s Greenville

Barley’s Greenville‘s form for beer rating is an interesting example of how multiple sections can be combined to make the form intuitive and easy to use. Notice the arrow-like symbol between the first and the second section as well as various shades of the brown color within the form.

23barley in Useful Ideas And Guidelines For Good Web Form Design

Blue Sky Resumes

Blue Sky Resumes uses sections to make its extremely long form much more manageable. Standard headings and horizontal rules are used to divide sections. The designer was also careful to visually distinguish the different sections so that the form doesn’t look like a long list of fields.

in Useful Ideas And Guidelines For Good Web Form Design

Validate Clearly

Users will not spend extra time making sure they have given you all of the information you need. Many designers believe that form validation detracts from the user experience, but its effects are adverse only when done poorly. When validation is simple and clear, it merely offers alerts and guidance to the user.

Make sure that you clearly mark the problem and tell the user exactly what is wrong. The fastest way to kill the user experience is with generic error alerts that mean nothing to the user. People are more than happy to quickly fix an issue if it is pointed out to them plainly.

Moody International

Moody International provides an excellent example for a contact form that nicely combines different types of contact information in one place. On the left, you’ll find a postal address along with a map, a phone number as well as the company’s email address. The right side is dedicated for more detailed inquiries and consulation requests. The form’s labels disappear once the user has provided their data. Unfortunately, the form doesn’t have an instant real-time validation and uses JavaScript pop-ups to inform the users about their input mistakes. Besides, the map on the left side could be integrated a bit better by using zoom controls as well as search functionality provided by Google Maps.

1moody in Useful Ideas And Guidelines For Good Web Form Design

El Passion

El Passion is another example of a contact form that combines various types of contact information in a very compact and meaningful way. Real-time validation in use. The map on the left side could be zoomable, though.

5elpassion in Useful Ideas And Guidelines For Good Web Form Design

Orlando Advertising

Orlando Advertising‘s form beautifully integrates its branding colors in a clean and attractive Web form. The red borders might be misunderstood and could be used to visually highlight errors in the form, but instead validation errors are displayed once the “Submit” button is clicked.

28soap in Useful Ideas And Guidelines For Good Web Form Design

Reinvigorate

There are usually two essential elements to effective form validation: identifying the specific problem, and clearly marking how and where to fix it. Reinvigorate uses an alert icon and a loud red outline to indicate the problem, and then it uses the side column to tell the user what’s wrong with the information. Moreover, the user gets a visual indication when the information is corrected. Being clear about the problem and not leaving the user in the dark make for a smooth experience.

Reinvigorate in Useful Ideas And Guidelines For Good Web Form Design

GitHub

GitHub‘s sign up form is as simple as its overall design, yet its beauty lies not in aesthetics, but in its functionality. When you enter your credit card details, GitHub automatically recognizes the credit card provider and visually highlights it in the form, thus providing instant feedback to the user. A wonderful example of invisible design.

15-1-github1 in Useful Ideas And Guidelines For Good Web Form Design

15-2-github2 in Useful Ideas And Guidelines For Good Web Form Design

Blue Sky Resumes (revisited)

I would like to point out another great part of Blue Sky Resumes‘ form. The error alert is clear and specific. By specifically telling the user that their name is missing, the user is spared confusion and is able to find their bearings quickly. To reinforce this message, the name field is clearly highlighted and marked as required.

in Useful Ideas And Guidelines For Good Web Form Design

Interactivity

A form is an interactive part of a website or application. In general, people want to interact with elements that feel alive and that follow convention. Many forms have a slight indent, creating a slight 3-D effect, whereas other forms simply show a box outline to delineate form fields. The key to any interaction is expectation and feedback. Make sure your forms react to user input, mainly by specifying the focus and hover states of input elements.

Grooveshark VIP

On Grooveshark, its styling of the focus and active element makes it clear which field is being interacted with. Besides, erors are displayed in a nice, helpful way while error messages are displayed at the top of the “window” using Ajax.

12grooveshark in Useful Ideas And Guidelines For Good Web Form Design

The design helps the user to maintain focus and to breeze through the form. It even makes it kind of fun, because the user wants to see a response when they click on or interact with an element.

Unlocking

Unlocking‘s checkout form is a nice example of how simple design can work very well with appropriate level of responsiveness. The input fields look nice, the hover state is very clear and the hints on the right side are helpful and unobtrusive. The contact form shows a subtle blue background when the user focuses on a field.

The form uses an additional color to highlight fields. As long as the interaction creates a noticeable effect, the form will be more usable.

The highlighting is not as bold as on some other sites featured above, but still effective and interactive and perhaps even more usable.

18unlocking in Useful Ideas And Guidelines For Good Web Form Design

Jason Long

Jason Long‘s form silently sits on the page, doing nothing, unless… well, unless you send it out. Jason uses an animated contact form which flips and changes as the message is being sent. An interesting, memorable tweak that makes the user experience just a tiny bit more interesting.

38-1-black in Useful Ideas And Guidelines For Good Web Form Design

38-2-black in Useful Ideas And Guidelines For Good Web Form Design

38-3-black in Useful Ideas And Guidelines For Good Web Form Design

The Finish Line

An effective Web form should get the user to cross the finish line. It might be a “Submit” button, an order confirmation button or a sign-up button. At the end of the day, the designer wants the user to hit that conversion point and be reasonably happy with their decision.

Make sure that the way of submitting the form is bold and specific. Where possible, use language like “Send email” or “Finish signing up,” so that the user understands exactly what the button will do.

Squarespace

On Squarespace, the designer has gone as far as to label the button “Finish & Create Site” and has also made note of its function just below. This page is especially effective because of the contrast: the layout is completely monochromatic, so making the button green puts more focus on completing the process.

1sqr in Useful Ideas And Guidelines For Good Web Form Design

BLITZ

BLITZ has come up with an interesting solution for their contact form. A content block appears in a lightbox and presents three different types of contact forms: inquiry about business, jus saying “Hi” and CV submission. The forms have a similar appearance but have a different structure. In all cases, the user has a checkbox for email updates at the bottom as well as postal address under the form. One confusing bit is that the form fields get a red border when you type in your data. Some users might confuse it with error notifications.

12blitz in Useful Ideas And Guidelines For Good Web Form Design

Custom Bags HQ

Custom Bags HQ has tried to combine various content blocks within one context. The “Contact” link in the upper navigation leads to a page which contains both the contact form and the “About us” information. In our opinion, “About us” doesn’t really detract from the user experience, but it doesn’t enhance it either. The link doesn’t feel right here, at least at the first glance. Interesting idea: the form contains a checkbox asking users if they are interesting in receiving an email newsletter. A smart handle to keep customers close to you and keep them informed about your updates and news in the future.

7custombag in Useful Ideas And Guidelines For Good Web Form Design

Clear Labels

Any interaction that we encourage must be as non-threatening as possible. After all, we are asking for personal information of the user. They are under no obligation to provide it. The first step to avoiding frustration and confusion is to use plain and simple language. Make it to the point and not flowery.

Foundation Six

Foundation Six‘s labeling is effective because it streamlines the process and simplifies commitment for the user. The company boils each category of information down to one word. The “Submit” button is also clear and straightforward. There is no confusion in the user’s mind. Another strength here is the balance between multiple choice and fill in the blank (which we’ll get to below).

Foundationsix 01 in Useful Ideas And Guidelines For Good Web Form Design

Bärnt&Ärnst

Bärnt&Ärnst‘s designers follow their minimalistic approach to design and provide all contact information such as postal address, phone numbers, email as well as a short form for user’s convenience. Often you really don’t need to require more information than that for the initial email.

2born in Useful Ideas And Guidelines For Good Web Form Design

Zoltan Hosszu

Zoltan Hosszu‘s contact page illustrates how icons can be used effectively to indicate the purpose of input fields. The form itself is very simple and quite unspectacular, but icons as well as some subtle textures make it a bit more distinctive and interesting.

33zoltan in Useful Ideas And Guidelines For Good Web Form Design

Stuck Axiom

The labels in Stuck Axiom‘s “New business” contact form are short and concise. The simple language and clear labeling make the form non-threatening and easy for the user to fill out. Contrasting with the gray of the form fields, the “Submit” button is set off and accented in red, making it clear where to click.

8struck in Useful Ideas And Guidelines For Good Web Form Design

Solid Giant

With clear labeling, not too many check box options and predefined budget ranges, Solid Giant can get back to a potential client with a precise offer. The “Submit” button is clear and straightforward, marking the end of an intuitive path through the form. All elements are described carefully, and there is no room for the user to misinterpret what information to enter where.

9solid in Useful Ideas And Guidelines For Good Web Form Design

Joey Rabbitt

Joey Rabbitt isn’t a fan of lengty emails. The message of the textarea can contain at most 500 characters. However, if the user would like to email Joey directly, he can use an email on the right side of the page. Joey also showcases the networks he is a member of as well as his current location. Notice how beautifully the content is designed by using icons and various colors of grey throughout the page.

4joey in Useful Ideas And Guidelines For Good Web Form Design

Multiple Choice Vs. Fill In The Blank

Selecting items from a list is naturally easier than filling in a blank. A blank sometimes raises more questions than it answers, especially if the labeling is not clear or there are too many empty fields. The user may be confused by the format, the type of information being requested or how exactly to answer a question. In general, a choice is better than a blank, especially with information that could be confusing, such as scope, budget, project type, etc. This is why most order forms do not require you to fill out every piece of information.

Pieoneers

Pieoneers uses the fill-in-the-blank format in the left column for generic information, with established conventions for format and type. On the right, more complicated questions are in the form of drop-down boxes, letting you choose between broad options, so that there is no confusion or hesitation.

10pie in Useful Ideas And Guidelines For Good Web Form Design

Information Highwayman

Information Highwayman cleverly combines multiple choice and fill in the blank. The empty fields are for simple bits of information specific to the user: name, email address, comment. These are all non-threatening and could not be formatted as multiple choice. Questions related to services sought and budget tend to be more complicated. Giving user some options here simplifies the process of explaining what you’re asking for.

Information-highwayman in Useful Ideas And Guidelines For Good Web Form Design

When Things Go Wrong: Facio Design

Facio Design‘s contact form is probably the most difficult contact form featured in this article, and rightly so. The choice of typeface and the font size is suboptimal as it is very difficult to read, especially on Windows. The designers have tried to mimic the appearance of a letter, but it doesn’t quite work here. A very simple, basic form would work better here. A nice example of how aesthetics can fail the functionality of the form.

37facio in Useful Ideas And Guidelines For Good Web Form Design

Conclusion

This overview covers a few simple best practices that you can apply to Web forms. Just remember to spend the extra time on your next website; many of these approaches are not hard to implement and will lead to much higher conversion rates, but they are often overlooked. We spend so much time getting people to the door that we forget to make the door as inviting and useful as the path to it.

by