Creating Human-to-Human Design

by in Design on 12th Aug 2011 · Comments

In the ever-changing and expanding world of the web, reaching the end user effectively is paramount in the minds of businesses. We are entering a new age of Web design and development where this concept is apparent now more than ever. It’s not enough to have any old website – it must communicate your goals seamlessly to your audience through its rich content. When you take into account the diversity of methods used to access a given website – such as mobile devices – the result is a more dynamic and engaging web that must respond to the end users needs as quickly as possible.

Creating Human-to-Human Design


Paramount to the concept of reaching the end user successfully is the notion of Human-to-Human Design – that is, creating websites whose message is tailored to suit a particular audience. Instead of preparing a website for search engines, the goal is to write to human readers, and the content is considered with this strategy in mind.

At the core of everyone is a feeling that they want to be understood, and by a business figuring out who these users are and what makes them tick goes a long way in empathizing with them. They will return the favor in associating your brand with a positive experience.

Tell a Story

The more personal details, examples, and overall context of the situation are laid out for the user, the more human it feels. They will be able to relate to it and understand how it can help fill a need in their own life. Instead of relying on dry facts, the compelling route of storytelling can allow you to showcase the context of a problem in a relatable way to the user.

Take Starbucks and Dunkin Donuts for example: Both make great coffee whose stories are much different from each other. One is all about the café experience, the origin of their beans and the process from which they produce a line of hot beverages, while the other is known for their sinful delights in addition to their coffee, but doesn’t offer a back story as to where they get their beans. I’m sure the two brands conjure up different images in your head by saying their name.

Zipcar
Zipcar is an example of a service developed for and by the community that wants to transform urban life and drive social change. It’s branding is fun, conversational, and clever – even the cars have names! This strategy is meant to humanize the service and guide users through the site easily. The Web site brings a fresh and conversational voice that educates and engages.

Zipcar

Calls to actions on the site are fun and persuasive, inviting users to 'hop on board' to join the service. For the uncertain prospective member, a is Zipcar for me section presents eight scenarios from the serious (I want to save money) to the entertaining (I want a cute car to match my shoes).

Zipcar Is It

Who are You?

Understanding who you are will help others understand your brand positioning. Think beyond personifications by looking into things that people use everyday. If you were a coffee shop would you be Dunkin Donuts or Starbucks? If a car, would you be a Porsche or a Toyota Yaris? Most users want to know why they should invest in your business, product, or service. In developing your brand image, consider the following:

  • Who are you?
  • Why should I care?
  • What can you do for me?
  • Why is it good/effective/worth it?

Goodsie
Goodsie

Onavo
Onavo

Illyissimo
illyCoffee

The above examples illustrate the idea of stating your value immediately and clearly to answer any initial questions the user may have. Each message is tailored to the needs of the audience (i.e. a busy professional who needs that extra boost of coffee, etc)

As a designer, the key is to understand how your product will speak to consumers and how you can help make it do so. Such discussions with your client can open new doors of conversation and be great cues to stylistic thinking as the design process comes together. Take the time to discuss the possibilities and give the client, the product, and your design the attention they deserve.

Enhance Your Story with Multimedia

Interactive timelines, streaming web-cam, animation, sound, and video can be used to enhance a story. These elements can give the audience a broader and deeper understanding of the topic and the issues which surround it.

Remember the Zipcar website I showcased above? They went a step further and explained to their customers just how Zipcar works. The presentation is quirky – something you’re not accustomed to seeing from Car Rental services – but helps humanize the service.

Customize It

Instead of showing the entire story from beginning to end, allow users to view fragments that interest them. This allows them to view information according to their own needs and preferences.

LA Times Newsmatch

The Los Angeles Times, for example, worked with VisualDNA to create Newsmatch – a visual quiz users take that learns their personal tastes and interests and creates a personalized page of content that they are likely to be interested in. After a reader takes the quiz, the site remembers them and offers a page of personalized content for their reading.

User Experience is the Brand

How a user interacts with your product or service online is an extension of your brand. The user interface is as much about the branding of your business as the logo, and should be carefully considered to create a positive customer experience. As the web expands, so does the role of a web designer. Combining visual design with interaction and motion to create rich sensory experiences that will help engage and encourage users to become fully involved in the site is a modern trend in human-to-computer design.

Understanding User Behavior

The more you find out about your users, the better you can target the information and design it to fit their needs. Measuring user behavior is critical to fine-tuning your site’s ability to turn clicks into closes. Once you know what people are doing on your site, you can refine your content and design to better reach your goals. The following are tools that make this process easier:

Google Analytics: Lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications. In using this free application, you’re able to see which browser you’re visitor is using, their screen resolution, platform as well as other variables to give you insight into where your visitors are from.

A/B Testing: A lot of savvy marketers and designs are using A/B testing right now to gain insight into visitor behavior and to increase conversion rate. A/B Testing lets you compare several alternate versions of the same web page simultaneously and see which produces the best outcome, e.g., increased click-through, engagement, or any other metric of your choice.

Engaging the User

To help immerse users and engage them with your content, there are many tools available at the user’s disposal to help them become fully involved in the experience. Some of these handy tools include:

Facebook Integration on Your Blog: Integrating with Facebook is a great way to get additional exposure for your content, whether you re-publish your blog content directly on Facebook, or you use something like Facebook Connect to add the Facebook login/profile experience to your own site.

Social Media Sharing: It appears at the bottom of each post and allows readers to instantly share our posts to Facebook, Twitter and just about every other social network, with just the click of a button.

Contact Form: One of the simplest ways to get in touch with someone is through the contact form on their website. Feedback is always important which is why it’s necessary to make sure that web forms are easy to understand and intuitive to use.

Interactive Flash Introductions: Flash is a compelling way to spruce up your website and add a sense of dynamism. For non-flash devices such as the iPhone you have to be careful. You’re animation you spent so much time perfecting will render as a black, blank page on these devices. Whenever possible, include the flash movie within the homepage itself, with a backup image for browsers without flash installed. While flash can be used for simple to complex animations, you also must consider the loading time and whether your target audience will truly benefit. When used properly, however, flash has the ability to transform your website or game into a truly unique, interaction experience that engages the user.

Galleries: Another method of sprucing up your site and impressing visitors is through Javascript interactivity. The benefit of using galleries through javascript is they can be seen on most browsers without updating anything. You don’t have to rely on third-party products like Flash does. Images can be preloaded, so you don’t have to worry about slow loading times and these galleries can also be seen on mobile devices such as the iPhone. The overall benefit is an enhanced dynamic user experience.

Generating Trust

If you’re interested in the psychology behind building trust online, and how users perceive human images as one element of website design, here’s a very in-depth article about building trust and building confidence in your website. Using eye-tracking methodology, we’re able to see how emotional appeal is created amongst users.

Making It Accessible

The web landscape shifts constantly, and with it comes the inconsistent window widths, screen resolutions, and user preferences to name a few. Within the past couple years mobile browsing has become increasingly more prevalent and designers are tasked with responding to the shift.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Features of a Responsive Web Design

In order for a web design to be considered "responsive", it needs to have three key features.

  • The site must be built with a flexible grid foundation.
  • Images that are incorporated into the design must be flexible themselves.
  • Different views must be enabled in different contexts via media queries.

Creating Responsive Web Design

Flexible Grids
The basis for creating Responsive Web Designs starts with a fluid layout. You’ll need to accommodate to changes based on screen resolutions and device types.

Tiny Fluid Grid is a great tool for creating fluid grids. It lets you make grids with up to 1200px maximum widths, and is based on 1kb grid.

Tiny Fluid Grid

Fluid Images
Creating images that adjust to the size of the column or div that they’re in is another important aspect of creating a more responsive design within a fluid layout.

Unstoppable Robot Ninja has a simple script that automatically resizes your images. Zomigi allows you to selectively hide parts of your image dynamically.

Fluid Image

Additional Resources

Examples of Responsive Web Design

Clean Air Challenge
The grid here shifts from four columns to two to one based on the screen width.

Clean Air Challenge

Psdtuts+
The Psdtuts+ website (along with all the other Tuts+ sites) resizes and restacks their sidebars based on the width of your browser window. They also change the width of the main content column to accommodate different sizes.

Psdttuts Wide

Psdtuts

Build Guild
The grid here shifts from two columns to one based on the screen width.

Build Guild

Teixido
The grid here shifts from two columns to one based on the screen width.

Teixido

Electric Pulp
The grid here shifts from three columns to two to one based on the screen width.

Electric Pulp

Colly
The grid here shifts from four columns to two to one based on the screen width.

Colly

Owltastic
The layout here adjusts image sizes based on width, as well as shifting columns around for narrower screens.

Owltastic

Sasquatch
The grid here shifts from four columns to two to one based on the screen width.

Sasquatch

Ribot
The layout here adjusts image sizes based on width, as well as shifting columns around for narrower screens.

Ribot

Stephen Caver
The grid here shifts from four columns to two to one based on the screen width.

Luck

Resources

Summary

In designing websites with the end user in mind, it’s important to take into account principles such as simplicity and clarity, with a focus on accessibility and customization. By tailoring your website to the individual, they’ll feel more appreciated and less like a faceless user who chanced upon your website. This translates into a positive experience for them as well as your business, brand, or service.

As both Human-to-Human Design and Responsive Design steer toward each other, we will have more of an opportunity to build a Web that is more dynamic, engaging, and personalized.

Stephanie Hamilton is a freelance Graphic and Web Designer by day and a blogger by night. Holding a BFA in Graphic Design, she has several years experience designing the latest in print and building better user interfaces and websites. She also enjoy writing as a creative outlet and blog regularly for her business and contribute to others as well.