Transcript of "Web Design: MAKE THE BEST FIRST IMPRESSION AND KEEP YOUR AUDIENCE ENGAGED"
Your Audience Judges Books by their Covers MAKE THE BEST FIRST IMPRESSION AND KEEP YOUR AUDIENCE ENGAGED May 18, 2010 • Raheel Gauba
Overview <ul><li>Why are first impressions important? </li></ul><ul><li>Key factors that affect first impressions & how to improve them </li></ul><ul><li>Questions / Answers </li></ul>
Your Audience Judges Books by their Covers: WHY ARE FIRST IMPRESSIONS IMPORTANT?
GARR REYNOLDS Former Manager of Worldwide User Group Relations, Apple Inc. <ul><li>“ Good design must necessarily, in my opinion, have an impact on people’s lives, no matter how seemingly small. Good design changes things.” </li></ul>
Your Audience Judges Books by their Covers: KEY FACTORS THAT AFFECT FIRST IMPRESSIONS AND HOW TO IMPROVE THEM
Page Load Times <ul><li>Directly impacts user experience “ At Google, we focus constantly on speed; we believe that making our websites load and display faster improves the user’s experience and helps them become more productive.” – Google Blog </li></ul><ul><li>The age of instant gratification No one likes to wait for a web page to load – Attention span decreases dramatically after 1-2 seconds </li></ul><ul><li>Faster page loads lead to higher conversions When Google experienced their page load time to drop from 0.4 second to 0.9 seconds, it decreased traffic and ad revenues by 20% - Marissa Mayer, VP Google </li></ul>
Logo & Branding <ul><li>Your logo & brand sets the tone for the entire experience The logo is the first piece of identity that your audience looks at when they arrive on your website </li></ul><ul><li>Perception is reality Good branding creates a favorable perception in the minds of your audience – As such, good organizations with weak branding create a bad perception </li></ul><ul><li>Your brand is the foundation upon which all other activity takes place A good branding effort makes your organization recognizable - it inspires trust and loyalty </li></ul>
Logo & Branding > How to improve <ul><li>Avoid a logo designed through ‘design contests’ Most, if not all, designers do not put in the proper effort in designing your logo if they do not have any guarantee of payment </li></ul><ul><li>Avoid the low cost trap of cheap or free logos Most are recreations of artwork from stock art as well as reused or rejected logos </li></ul><ul><li>Avoid designing the logo yourself Entrust the public image of your organization to a professional </li></ul><ul><li>Go through a formal design process when designing your identity Creative Brief & Vision > Research > Sketch > Review > Render > Review > Production </li></ul>
Font & Color Usage <ul><li>Increases visual interest Good choices in fonts and colors will enhance aesthetics, increase visual interest and direct the audiences attention to the most important information on your website </li></ul><ul><li>Reinforces your brand Consistent usage of correct fonts and colors will reinforce your brand and aid in clear understanding of elements within the design of the website </li></ul><ul><li>Establish the mood for your audience Colors evoke feelings and emotions… They establish moods and communicate the purpose of your website </li></ul>
Font & Color Usage > How to improve <ul><li>Follow the style guide Ensure that your content managers are using the style guide when updating content. This ensures consistent usage of fonts and colors throughout the website resulting in a positive user experience… You do have a style guide, right? </li></ul><ul><li>Limit the color palette to what the eye can process Too many colors causes confusion, introduces chaos and disrupts the flow of the website </li></ul><ul><li>Web-safe fonts Avoid the urge to use unique system specific one-off fonts on your website – Your users may not have that beautiful, wonderful font you just found to promote your event. Also, ensure that your style-guide specifies brand friendly, web-safe fonts to use on your website </li></ul>
Layout & Visual Flow <ul><li>Guide your audience Optimal website layouts naturally guide the audience towards the most important information on your website without alienating them </li></ul><ul><li>Smooth flow of information Your audience will grow fond of your website when they are able to scan the page without having to think - A good layout gets the users to the desired information quickly and easily </li></ul><ul><li>Keep it Clean A clean and simple layout conveys professionalism and helps your audience perceive your organization to be legitimate and established </li></ul>
Layout & Visual Flow > How to improve <ul><li>The Rule of Thirds Use the Rule of Thirds, a grid based technique that helps create aesthetically pleasing positioning for important elements of your website </li></ul><ul><li>The Zen of Symmetry Introduce symmetry within the elements of your website to convey a sense of balance, harmony and stability </li></ul><ul><li>Prioritize content for Usability Take an objective approach towards your site design and develop wireframes to position elements in order of important and priority for your audience </li></ul>
Ease of Use <ul><li>Please don’t go! Most visitors will leave a website if they do not find what they are looking for within 30 seconds - .Net </li></ul><ul><li>Retention leads to recommendations It is far more likely that a visitor will come back to your website if they found it easy to use – they are also much more likely to be your advocates and recommend your website to others </li></ul><ul><li>Higher Conversions A website that is easy to use takes the audience to the organization’s desired action quickly and easily – The result is higher donations, registrations, memberships etc. </li></ul>
Ease of Use > How to improve <ul><li>Card Sorting Conduct a Card Sorting exercise with your select audience to understand how they perceive and prioritize information on your website </li></ul><ul><li>Divide & Conquer Break down text and key information into manageable chunks </li></ul><ul><li>Quick Readability Develop a design with easy-to-scan titles, headlines and sub-headlines </li></ul><ul><li>Keep it relevant Know your audience and create relevant titles and call-to-actions </li></ul><ul><li>Simple Navigation Develop a clear and concise navigation system suited to your audience </li></ul>
Quality of Images <ul><li>Make a connection through emotion The right image can evoke an emotional response and create an instant connection with your audience </li></ul><ul><li>Communicate visually Relevant images that communicate purpose have a huge impact on your audience’s perception of your goals and mission </li></ul><ul><li>Look Professional Professional photography enhances your messaging and brand – Poor photography looks unprofessional and can damage a perfectly reputable brand </li></ul>
Quality of Images > How to improve <ul><li>Images are a communication tool Take some time and think about what you want to communicate through imagery </li></ul><ul><li>Hire a photographer Try to hire a photographer to create original photography for your events as well as for your brand at large </li></ul><ul><li>Stock photography is not a bad thing Don’t be afraid of using stock photography – The art of using stock photos successfully lies in the selection and usage of the photo </li></ul><ul><li>Generic photos not permitted Avoid using generic images – everyone can, and is, doing it… Instead, use images that communicate a message and a point of view </li></ul>
Interactive Elements & Media <ul><li>The next best thing to touching & feeling Just like a picture speaks a thousand words, interactive media takes your audience’s experience to the next level </li></ul><ul><li>Captures attention Encourages your audience to explore and connect resulting in an increase in time spent on your website as well as increase the number of pages per visit </li></ul><ul><li>Creates an emotional connection Videos and motion graphics create emotional connections in a very short amount of time – this is impossible to do by simple words and pictures </li></ul><ul><li>Increases conversions An engaged audience is far more likely to take action vs. once that is doing a lot of reading and analyzing </li></ul>
Blackbaud’s 2010 Conference for Nonprofits <ul><li>Three days of educational content dedicated to your specific needs and opportunities to network and interact with your peers and industry experts </li></ul><ul><li>October 20 – 22, 2010 at the Gaylord National Hotel and Convention Center in Washington, D.C. </li></ul><ul><li>Visit www.Blackbaud.com for more information! </li></ul>
HOW WOULD YOU ENHANCE FIRST IMPRESSIONS? <ul><li>Raheel Gauba </li></ul><ul><li>Brand Leader & Creative Director, Blackbaud </li></ul><ul><li>Email: email@example.com </li></ul><ul><li>Phone: +1 (843) 697-9579 </li></ul><ul><li>Facebook: Raheel Gauba </li></ul><ul><li>Twitter: @raheelgauba </li></ul>Thank You!