7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid!
Jan 11, 2008 by Patrick Winfield | DesignDesigning content whether it be an article, landing page or a website you want to evoke a certain image. If you are selling then hopefully your image has a lot to do with trust. What makes one design more trustworthy than another?
Many things come together to form trust. Starting from the design of the logo to the text and what it reads, all the way to the amount of white space around all the elements.
Professionally designed work looks solid, the same holds true with the written word. Typos and grammatical errors express a disregard for the user and effects the image of your company being able to deliver good service. Some of these practices may be obvious, but worthy of review.
Consistency. This comes up a lot, you may even say it consistently appears. The more a website works the same every
time the more the user feels comfortable with a design. If a user is taken mysteriously to another page, that looks foreign from the original, this trust is broken and they will question the experience.
The user must feel in control at all times. Inconsistencies just lower the perception of quality.
Place your name and logo on every page of your site. Make the link back to the homepage when on an internal page.
About Us Photograph. When I see a photo of the real person or team of people on an about us page I feel like I am getting to know them and trust them more. How do I know it is real? I don’t, but I like to think that it isn’t that hard to tell the difference from a stock photo and a genuine picture. This really applies to small businesses or bloggers, but can be used anywhere there is an about page. While you are at it, keep it up to date.
High Quality Photography. When you are selling and need to showcase products, use the best quality photographs you can. User can not touch and feel your product like the may be able to in a store so detailed close-ups and large images help. Use screen shots for service or software.
Text/Writing. Words are meant to be read. Making text size small may look good to a certain degree but ultimately hurts when trying to read. Contrast is very important, if it is low then eye strain is an issue. An interesting study done by Alyson L. Hill from Department of Psychology of Stephen F. Austin [State University] on Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles points out these issues.
Spell checking should be done always, as well as the correct use of grammar and formatting. Here is Jakob Nielsen’s research on the subject of writing for the web.
Jakob Nielsen’s Useit.com addresses the issue of Usability for Senior Citizens. Eyesight and lack of simplicity is something that makes most websites unapproachable to seniors. Remember that older people are the fastest-growing group of Internet users. 
The image to the left is an example from a Breville product of text that is a bit small, thus hard to read. It would be much easier to read a point or two larger.
The look and design is clean and very nice aside from the legibility issue, but it is also done in Flash so it can’t be enlarged within the browser.
Navigation. This goes back to consistency. When a user comes to your page, article or site they are coming in from all the other pages, articles or sites out there. If you are selling do no deviate from them that much.
Do not reinvent a websites navigation. If the user has to figure out how to move around within a site you have lost. Keep it on the top or the sides,but don’t make someone figure out how to navigate your site or you will surely lose them in seconds. Let them know where they can go and where they have been using breadcrumb trails and site map.
Whitespace. If you look at the design or layout of any luxury or high end brand you will see whitespace. Designers use this to create room to guide the viewer’s or user’s eyes around the various elements. If all the content is cluttered or cramped together it looks cheaper and low quality.
Design By Hümans, where you will find unique high-end t-shirts designed by artists from around the world, has a great showcasing of how the empty space helps the flow and leads the eye. Also look at the prominent placing and size of the price.
When a design uses whitespace effectively it allows for precise placement of products/words making the user/viewers job that much easier in getting the main idea. For further reading on whitespace visit this article from A List Apart.
Use of email. Let a user know how you will be using their email. Let them know you will not be spamming them or selling them out to another party. People are cautious to give out an email, so reassure them. Of course you can fool someone into giving you their email, but that is short-term thinking and will surely cripple your brand and ruin any long-term relationship.
Avoid Welcome Pages/Pop Up’s. Limit the amount of clicks it takes for the user to get to the reason they are there. If I have to wait 15 seconds for a page to load or have to decide if I want to view the site in HTML or Flash I usually leave, or pick the HTML version.
Avoid Gibberish. Don’t weigh down the user/reader with all this scientific mumbo jumbo, unless that is the service. Talk like your target market or crowd you are going after. I would rather read something that feels comfortable and familiar than cold and distant. If you have to hunt for a word in the thesaurus, it is the wrong word to use.
Avoid the Unnecessary. Blinking text or flashing colors are annoying. If that is the only way you think you can direct the user you are doing more harm then good.
Music should be controlled by the user at all times. If you have content that starts automatically this can deter someone to leave, instead have the user control the experience by being able to start or stop music or video.
Does that window really need to pop up? Can that information be given some other way? The moment I see a pop-up I tend to close it before I can see what it is.
Avoid Hiding Information. When a price or an essential piece of information isn’t given you break a connection. We all know Amazon and how all the information is easy to see without digging.
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
61 Responses to “7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid!”
Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!
This is even better than yesterdays post. Not only are the tips great but the combination of graphics to space the piece out looks terrific.
Nice model for a well designed post.
this is web design 101
Patrick,
What a WONDERFUL post! You illustrated these concepts so beautifully and concisely (something that is not easy at all).
Have a great weekend!
found your blog from stumble. really cool post and i love the part about ‘avoiding gibberish’. it seems like sometimes people think that quantity is more important than quality.
you got a new subscriber here!
This is a great post Patrick! You are correct to point out that layout, navigation and copywriting are the HUGE factors in building trust + good bios with photos is always a great way to go too. Well done.
@ sir jorge – I’m always amazed by how many organizations actually do not follow through with the basic principles.
@Michael D- thank you, that is great to hear you are enjoying these posts!
@John Amore- I set out to do a simple post then several hours later finished with this, thank you for reading and commenting! You have a great weekend also
@Tristan- Yes, the gibberish factor is so critical to me. so happy you are a subscriber, thank you!
@Jake- thanks for reading!
Blinking text is the devil!
Great post dude
I really like your headers, but noticed they are images – I assume you’ve made a conscious decision to sacrifice the seo benefits of text for an improved design. Is that right? Also, do you find the extra time to create the graphics pays off?
Awesome post. Just disagree with 2 things.
1. For an e-commerce store online I do not think it is necessary or even recommended to put a picture and a description about you in the “about us” page. I think this will ruin the image of your website as being a small operation, and may not be up to par with other websites.
2. If you are an e-commerce site it is essential, and I mean essential to have a web-security seal or a HackerSafe logo. I beleive somewhere about 60% of online shoppers will not shop and an e-commerce site without feeling secure about the site. It should also be placed somewhere on the site where it can be seen at all times, making the customer feel more secure about the shopping experience.
Here is an example. It basically has everything you discussed, but I want to emphasize the Verification seal.
http://www.heyyoubaby.com
But really awesome post! I also submitted it to Digg for you!
[...] 7 Essential Web Design Principles to Earn Trust: Excellent post by Patrick on how to design your website in order to evoke the greatest amount of trust from customers/clients/users. Designing content whether it be an article, landing page or a website you want to evoke a certain image. If you are selling then hopefully your image has a lot to do with trust. What makes one design more trustworthy than another? [...]
Hi,
This is a great article, and your site is a fine example — except for the following perhaps:
In the opening you said, “Typos and grammatical errors express a disregard for the user”
But then in #3 point you write, “User can not touch and feel your product like the may be able to in a store”
Well, I suppose this shows that it is easy for anyone to make these errors, but oh so important not to — especially in an article like this.
Sorry, I couldn’t resist pointing that out
Thanks for the article. It will help me with a site I am about to develop.
John
@ John- Thanks, and I agree!
@ Ben- With the header graphics I am just repeating what is already in the text title. I strongly feel that the graphics make a big difference, the content must still be the king though.
@ NewSkill21- If your company is small and you want to give the feeling of being a larger company than you would be correct. I was eluding to the idea of transparency. I %100 agree with the Hacker Safe logos and SSL certs on all shopping sites. Thanks for reading!
@ John- You got me
I should have seen that one, wow! I did set out to write a short post and it did turn into a larger one so this slipped- thanks for pointing it out! Good luck with your new site.
Great!..very helpful especially for newbies like me..^^..Thanks for being so generous!..^^
@ Joy- Thank you for stopping by and reading, I hope you continue to visit!
Patrick, I am awaiting a new article already!
[...] 7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid! | 10e20 Blog Professionally designed work looks solid, the same holds true with the written word. Typos and grammatical errors express a disregard for the user and effects the image of your company being able to deliver good service. Some of these practices may be obv (tags: tips Trust web2.0) [...]
Great post
Thanks everyone! New post coming up Friday, I hope you can stop by and read it. Have a great rest of the week.
Nice article. Check for misspellings. Section 2: “While your at it, keep it up to date.” Your should be “you’re,” a contraction of you are.
Thanks Michael, you are correct. I appreciate it, have a great day!
[...] a post have too many graphics? Posted by Sapphire January 17, 2008 Take a look at this post from 10e20. I’m just curious about something: do you find it easy to read the [...]
[...] how many people fail to recognize web design as an integral part of any marketing strategy. Learn from the masters so you don’t get left out in the [...]
[...] how many people fail to recognize web design as an integral part of any marketing strategy. Learn from the masters so you don’t get left out in the [...]
[...] 7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid! Om att använda design för att förmedla att din sajt är att lita på. Samt några tips på vad du inte bör göra. [...]
[...] 7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid! [...]
First off, this was a good, thoughtful post that I think provides solid guidelines for anyone doing web development. That being said, as John wrote, if you’re going to recommend proper spelling and grammar, you better triple-check your own writing. Sorry for the nitpicking.
- “While your at it…” should be “you’re”.
- “…you will surely loose them in seconds” should be “lose”.
- “…guide the viewer or users eye around” should be “guide the viewer’s or user’s eyes around”.
Thank you Alex I made the revisions. I appreciate the commenting and I will surely triple-check my writing next time
“…effects the image…” should be “…affects the image…”.
Very good tips. Simple but a lot of common sense
Thanks Patrick, each one of the 7 points are good. Images between the points does enhance your article. I appreciate you sharing these to us. Have a great day.
Great post,
Thank you.
The Bloggers Times
Another grammar correction: Put that apostrophe away! (In the image header for “Welcome Pages/Pop Up’s”)
Why do “pop ups” get the possesive apostrophe, but not “welcome pages”, eh? Other than it being incorrect?
Also, as a graphic designer and a writer, those headers shouldn’t be inter-capitalized like that. For the most posh polishing, grammer rules hold for headers in all layout domains, be it for print or web.
All caps for headers with an appropriate headline font are acceptable for style as are other stylistic methods such as all lowercase, but if you’re going to point out the importance of text in earning trust you might as well go all the way. Un-needed inter-capitalization is just one of the things that’ll drive someone like me crazy.
I would like to add avoid linking services and web directory submittal sites.I have just found out that my webmaster is considered bad neighborhood and is bring my pagerank down cause he has his link on all my pages.
7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid!…
This post on the 10e20 blog lists 7 web design principles that will increase your trustability and 4 things you should avoid….
“Welcome Pages/Pop Up’s” should be “Welcome Pages/Pop Ups”, unless the Pop Up is possessing something
Very valuable and frank. Thanks for the post!
Another mistake. In the third paragraph, “Typos and grammatical errors express a disregard for the user and effects the image…”. `effects’ ought to be `affects’. It was unfortunate to make a slip right there, or was it humour and I’m just slow today?
Erm – persuade them to leave perhaps? Is this another example of gibberish?
[...] being able to deliver good service. Some of these practices may be obvious, but worthy of review.read more | digg [...]
Great post.
Although in general your references are good, the one related to color usage is really horrible.
Spoting that out I sould sugguest you to add one more tip to be avoided, a fith one:
Avoid!
Having Low Quality External Links
Thanks for this post anyway
Thank you everyone for commenting and sharing your thoughts and ideas. I appreciate all of your responses.
[...] 7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid! | 10e20 Blog (tags: webdesign tips toread) [...]
I think you should also avoid the use of the unnecessary apostrophe in “Avoid Welcome Pages/Pop Up’s”
[...] 7 Essential Web Design Principles to Earn Trust: Excellent post by Patrick on how to design your website in order to evoke the greatest amount of trust from customers/clients/users. Designing content whether it be an article, landing page or a website you want to evoke a certain image. If you are selling then hopefully your image has a lot to do with trust. What makes one design more trustworthy than another? [...]
I read somewhere that it’s also a good idea to follow the format of a newspaper layout. It makes it more familiar to read, but is this true of all webpages, design systems?
[...] Link: 10e20 [...]
[...] 7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid! [...]
Excellent ides thanks everyone for sharing this nice info with us
Nice post Patrick
“High Quality Photography” is not only necessary “When you are selling and need to showcase products”. I think you need to use quality photographs with correct meaning matching to your website all the times because it enhances the beauty of the website and at the same time expresses perfectly your offerings.
[...] Web Design Principles  [...]
Great points! These must be taken into account in every step of the process to be a top tier provider. I especially agree with "If a user is taken mysteriously to another page, that looks foreign from the original, this trust is broken and they will question the experience." I find myself doing this all the time. If the page I'm taken to looks sketchy I'm closing the window quick like.
Thanks Austin web design! It is always a bad experience, I agree!
Hi,
Strongly agree with u. I want to say that In this web 2.0 design is essential. Traffic will be good if ur design,Font,navigation etc is extra ordinary. I think template selling business is going to rock now..
Hi,
Strongly agree with u. I want to say that In this web 2.0 design is essential. Traffic will be good if ur design,Font,navigation etc are extra ordinary. I think template selling business is going to rock now..
Quote: The look and design is clean and very nice aside from the legibility issue, but it is also done in Flash so it can’t be enlarged within the browser.
I have to disagree with you on that. Browsers support the zoom in function that comes with the flash player component. Also, Firefox supports additional zoom by using the special keys Ctrl and + or Ctrl + mouse scroll.
But I can totally see your point, fonts should be a little bigger than that. After all we write content for our readers and we want them to have a good time on our site.
yeah i agree with Mike, the design cant be enlarged ….
[...] http://www.10e20.com/blog/2008/01/11/essential-web-design-principles-to-earn-trust/ [...]
[...] 7 essential web design principles to earn trust. And 4 things to avoid! – Link. [...]
Good tips…making myy ste look "alive" was always a problem to me…