The Feel of Quality Online
Posted: Thu Jun 04, 2009 3:46 pm
The Feel of Quality Online was originally posted on the main page of LDSTech. It was written by Chris Mayfield.
----------------------------------------
When you shut the door of a new BMW, you hear a gratifyingly solid-sounding thump. It feels good to pick up a small, unassuming digital camera, only to find that it is surprisingly sturdy and heavy. Many companies who make physical objects use fine materials and many other techniques to give their products a sense of quality and craftsmanship.
In a world of cheap plastic and sloppy details, I’ve noticed that the feel of a nicely handcrafted object brings me much gratification—and sometimes even endears an object to me. This realization has made me wonder, “What is the Web equivalent?”
The Web’s expansion has exploded. In fact, over the last ten years, the number of Web sites has grown from a few million to somewhere around 150 million. With so many new Web sites being created daily, it becomes difficult for people who are involved in creating Web sites to find and identify a quality Web experience. It’s easy for our Web experience expectations to become low.
Even though a Web site isn’t something you can pick up and feel, there are many effective ways you can create the feeling of quality. The following attributes are just a few of the tips and tricks that I have found that work together to give a Web site that feeling of quality.
Sticky Stories
It’s common to read short bullets online. I have heard countless times that people don’t read online. Yet Wikipedia is all about reading and is tremendously successful! When Web sites use stories, they improve the experience and begin to create a tangible, even long-lasting impression.
Companies like Nike, Apple, and Adidas create stories around their products all the time. In a recent campaign, Nike created a story around one of their basketball shoes that suggests the shoe is so good that it will break the ankles of opponents. This memorable parody uses imagery from your existing knowledge as a basketball fan, which makes the story simple to tell. A picture and a headline or two are all it took to communicate an otherwise exhausting amount of bullet points.
Stories often rely on imagery to paint a more vivid and memorable picture for the user. However, if Web sites aren’t wise with their use of photography, the opposite can occur. Pictures that don’t make sense, poor-quality photography, complicated imagery, or images that take a long time to load can all lead to a very disappointing experience.
Great Typography
Great typography can quickly bring a feeling of quality to your Web site and can solve many interaction problems. Typography can also compensate for visuals when having a photograph or illustration doesn’t fit.
Hierarchy, choice of type (however limited it may be), line height, and color all work together to the detailed typographer to turn letters into beautiful communication. I have found that fine tuning typography details has been a labor of love rather than a skill I picked up after a reading good book on typography.
A few months ago, I asked readers of northtemple what quality feels like online, and many of the comments referred to type. Jared Christensen said it like this: “Nothing says quality like a Web page that treats type like a first-class citizen."
Humanistic Experience
Most Web experiences have difficult requirements. For example, can you think of a Web project you have worked on where there wasn’t a tight budget, a database, or a difficult framework to work within? In addition to technology, most Web projects have various team members with differing opinions, all trying to work together to create something wonderful. When the technology and the organization that support the Web site are completely invisible, it becomes a more human experience. Consider this analogy:[INDENT]You’re driving down a long, curvy road. The top is down and the weather is perfect. It’s just you, the road, and your favorite song bringing a smile to your face. Why should you be bothered by all of the magic going on between the gas pedal and the wheels? Who cares what great achievements the designers and engineers of the car made? When you find a car that drives well, the mechanical details are not important.
[/INDENT]Similarly, when Web sites have technical requirements and constraints that work well and fit together as a whole, it also brings a smile to my face.
I have also found that when you create aesthetics that feel organic and natural, the whole experience feels more humanistic. Emmy Southworth, a fellow design manager at the Church of Jesus Christ of Latter-day Saints, said, “It goes beyond [my needs being anticipated] for me, in making the entire page a gratifying experience – the buttons, navigation, interactions, colors, composition, flow, typography, content. When everything works together seamlessly so that I don’t realize there is a machine and code working behind the scenes, I can experience something human and beautiful. To me, that is quality.”
Intuitive Interactions
Ever spend several minutes trying to find an available user name for a Web application? You type in your user name, only to find out after a while that your clever name is taken. Then you try again—and again. Finally you are left with a user name like “chris9402.” At that point, you really don’t care about a user name and password that you will never remember because you probably won’t revisit the site.
Contrast that with the way some Web sites and applications now check your user name and password as you type. That kind of simple interaction clues me in to the attention to detail the creators had for the site and for my experience. Even the simple details like placing the cursor in the first box when you are filling out information just helps things become more intuitive.
Empathy for Your Customer
Creating experiences that use all of the elements that can create long-lasting appeal and loyalty to your product takes a lot of empathy. Many details might seem trivial, but when they are added up at the end, the sum of the parts creates a lasting impression. Pete Lasko, another fellow design manager, put it best when he said, “Quality is expressed by the care you take in all aspects of your site. People who are serious about making good Web sites care about markup and CSS. Each little pixel gets consideration. We care about the flow, the interaction, the emotional content of our pages.”
In the end, quality online means being focused on the people who are going to use your Web site. Sometimes it means staying out of their way. You become invisible. Other times it means creating an experience that brings loyalty beyond reason. Whatever project you’re working on, put your passion into your work and pay attention to the details.
Chris Mayfield is a design manager for the Church.
----------------------------------------
When you shut the door of a new BMW, you hear a gratifyingly solid-sounding thump. It feels good to pick up a small, unassuming digital camera, only to find that it is surprisingly sturdy and heavy. Many companies who make physical objects use fine materials and many other techniques to give their products a sense of quality and craftsmanship.
In a world of cheap plastic and sloppy details, I’ve noticed that the feel of a nicely handcrafted object brings me much gratification—and sometimes even endears an object to me. This realization has made me wonder, “What is the Web equivalent?”
The Web’s expansion has exploded. In fact, over the last ten years, the number of Web sites has grown from a few million to somewhere around 150 million. With so many new Web sites being created daily, it becomes difficult for people who are involved in creating Web sites to find and identify a quality Web experience. It’s easy for our Web experience expectations to become low.
Even though a Web site isn’t something you can pick up and feel, there are many effective ways you can create the feeling of quality. The following attributes are just a few of the tips and tricks that I have found that work together to give a Web site that feeling of quality.
Sticky Stories
It’s common to read short bullets online. I have heard countless times that people don’t read online. Yet Wikipedia is all about reading and is tremendously successful! When Web sites use stories, they improve the experience and begin to create a tangible, even long-lasting impression.
Companies like Nike, Apple, and Adidas create stories around their products all the time. In a recent campaign, Nike created a story around one of their basketball shoes that suggests the shoe is so good that it will break the ankles of opponents. This memorable parody uses imagery from your existing knowledge as a basketball fan, which makes the story simple to tell. A picture and a headline or two are all it took to communicate an otherwise exhausting amount of bullet points.
Stories often rely on imagery to paint a more vivid and memorable picture for the user. However, if Web sites aren’t wise with their use of photography, the opposite can occur. Pictures that don’t make sense, poor-quality photography, complicated imagery, or images that take a long time to load can all lead to a very disappointing experience.
Great Typography
Great typography can quickly bring a feeling of quality to your Web site and can solve many interaction problems. Typography can also compensate for visuals when having a photograph or illustration doesn’t fit.
Hierarchy, choice of type (however limited it may be), line height, and color all work together to the detailed typographer to turn letters into beautiful communication. I have found that fine tuning typography details has been a labor of love rather than a skill I picked up after a reading good book on typography.
A few months ago, I asked readers of northtemple what quality feels like online, and many of the comments referred to type. Jared Christensen said it like this: “Nothing says quality like a Web page that treats type like a first-class citizen."
Humanistic Experience
Most Web experiences have difficult requirements. For example, can you think of a Web project you have worked on where there wasn’t a tight budget, a database, or a difficult framework to work within? In addition to technology, most Web projects have various team members with differing opinions, all trying to work together to create something wonderful. When the technology and the organization that support the Web site are completely invisible, it becomes a more human experience. Consider this analogy:[INDENT]You’re driving down a long, curvy road. The top is down and the weather is perfect. It’s just you, the road, and your favorite song bringing a smile to your face. Why should you be bothered by all of the magic going on between the gas pedal and the wheels? Who cares what great achievements the designers and engineers of the car made? When you find a car that drives well, the mechanical details are not important.
[/INDENT]Similarly, when Web sites have technical requirements and constraints that work well and fit together as a whole, it also brings a smile to my face.
I have also found that when you create aesthetics that feel organic and natural, the whole experience feels more humanistic. Emmy Southworth, a fellow design manager at the Church of Jesus Christ of Latter-day Saints, said, “It goes beyond [my needs being anticipated] for me, in making the entire page a gratifying experience – the buttons, navigation, interactions, colors, composition, flow, typography, content. When everything works together seamlessly so that I don’t realize there is a machine and code working behind the scenes, I can experience something human and beautiful. To me, that is quality.”
Intuitive Interactions
Ever spend several minutes trying to find an available user name for a Web application? You type in your user name, only to find out after a while that your clever name is taken. Then you try again—and again. Finally you are left with a user name like “chris9402.” At that point, you really don’t care about a user name and password that you will never remember because you probably won’t revisit the site.
Contrast that with the way some Web sites and applications now check your user name and password as you type. That kind of simple interaction clues me in to the attention to detail the creators had for the site and for my experience. Even the simple details like placing the cursor in the first box when you are filling out information just helps things become more intuitive.
Empathy for Your Customer
Creating experiences that use all of the elements that can create long-lasting appeal and loyalty to your product takes a lot of empathy. Many details might seem trivial, but when they are added up at the end, the sum of the parts creates a lasting impression. Pete Lasko, another fellow design manager, put it best when he said, “Quality is expressed by the care you take in all aspects of your site. People who are serious about making good Web sites care about markup and CSS. Each little pixel gets consideration. We care about the flow, the interaction, the emotional content of our pages.”
In the end, quality online means being focused on the people who are going to use your Web site. Sometimes it means staying out of their way. You become invisible. Other times it means creating an experience that brings loyalty beyond reason. Whatever project you’re working on, put your passion into your work and pay attention to the details.
Chris Mayfield is a design manager for the Church.