Substance151 Best Web Practices


Published on

Successful web design combines intelligent planning, effective design and technical expertise – all seamlessly integrated to deliver your company’s brand message and value proposition directly to your customers. This presentation offers best practices for web design and development process.

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Substance151 Best Web Practices

  1. 1. Website Best Practices 07.24.08 Ida Cheinman
  2. 2. WEBSITE PLANNING <ul><li>GOALS </li></ul><ul><li>AUDIENCES (USERS) </li></ul><ul><li>TEAM </li></ul><ul><li>INFORMATION ARCHITECTURE </li></ul><ul><li>NAVIGATION </li></ul><ul><li>DESIGN </li></ul><ul><li>CONTENT </li></ul><ul><li>Search Engine Optimization and Marketing </li></ul>
  3. 3. GOALS Website Strategy, Vision and Goals – what do you want your website to do: <ul><li>Inform, educate </li></ul><ul><li>Establish credibility </li></ul><ul><li>Build brand awareness </li></ul><ul><li>Grow your mailing list </li></ul><ul><li>Convert leads </li></ul><ul><li>Generate traffic </li></ul><ul><li>Minimize phone calls </li></ul><ul><li>Sell products </li></ul><ul><li>Etc. </li></ul>
  4. 4. GOALS What problems does it solve for your audiences and how? <ul><li>Corporate Goals </li></ul><ul><li>Marketing </li></ul><ul><li>Business </li></ul><ul><li>Operations </li></ul><ul><li>Sales </li></ul><ul><li>Etc. </li></ul><ul><li>User Goals </li></ul><ul><li>What do you want them to do, learn, buy, etc. – desired action and outcome </li></ul>
  5. 5. USERS Effective websites are those that are user-centric – your website’s structure/navigation, look & feel, and functionality should address the needs of the users. <ul><li>Audiences: one, two, multiple, internal, external – prioritize </li></ul><ul><li>What is each of the user categories looking for? </li></ul><ul><li>What is their level of expertise in your subject matter? </li></ul><ul><li>Demographic, online experience, internet & computer technology available to them </li></ul>
  6. 6. WEBSITE GOALS ASSESSMENT <ul><li>Assess overall vision for project </li></ul><ul><li>Identify and define all tangible & intangible objectives </li></ul><ul><li>Establish major project milestones and deadlines for key deliverables </li></ul><ul><li>Assemble a team </li></ul><ul><li>Define overall feasibility and budgetary requirements </li></ul>
  7. 7. TEAM EXPERTISE The following disciplines are critical in the web design and development process. Whether hiring an agency/consultants, pulling internal resources, or combining the two, make sure to cover the following capabilities: <ul><li>Strategy (brand, marketing, web, technology) </li></ul><ul><li>Information Architecture, User Experience </li></ul><ul><li>Design </li></ul><ul><li>Technology </li></ul><ul><li>Content Development </li></ul><ul><li>Project Management </li></ul><ul><li>SEO/E-marketing </li></ul>
  8. 8. TYPICAL PROJECT PHASES <ul><li>Pre-build: </li></ul><ul><li>Strategy, Technical Requirements, Information Architecture, Usability Testing, Prototyping, Content Checklist </li></ul><ul><li>Build: </li></ul><ul><li>Design, Copywriting, Development, Testing, Launch </li></ul>
  9. 9. INFORMATION ARCHITECTURE A well thought-out structure and meaningful, consistent navigation is one of the main paths to happy users. Site Architecture is a blueprint that is used to develop a website’s content, visual design and functionality. <ul><ul><li>Site Map </li></ul></ul><ul><ul><li>Page Wireframes </li></ul></ul><ul><ul><li>Content Checklist </li></ul></ul><ul><ul><li>Usability Testing & Prototyping </li></ul></ul>
  12. 12. NAVIGATION BEST PRACTICES <ul><li>How many main links? </li></ul><ul><ul><li>Too many – overwhelming, no clear path </li></ul></ul><ul><ul><li>Too few – make sure it doesn’t take too many clicks for your users to get to all critical information </li></ul></ul><ul><ul><li>Just right…generally 5-10 is a good number </li></ul></ul><ul><li>What are they? Think like your users, try to predict what they want to see and where they want to go. </li></ul><ul><li>Naming: Use short, precise and self-explanatory link names. </li></ul><ul><li>External Links: For links going outside of your website make the destination website open in a new browser window. </li></ul>
  13. 13. NAVIGATION BEST PRACTICES <ul><li>Navigation Design: Make sure it’s always clear where you are on the site and how to get back to the other sections. </li></ul><ul><ul><li>Use breadcrumb navigation </li></ul></ul><ul><ul><li>Differentiate rollover and ”on” states, mark links to PDF & Word documents as such </li></ul></ul><ul><li>Visual Hierarchy : </li></ul><ul><ul><li>Primary Navigation (main sections) </li></ul></ul><ul><ul><li>Utility Navigation (legal, about, sitemap, etc.) </li></ul></ul><ul><li>Allow for user interaction: Make it very easy to contact you – you can’t overdo this one! </li></ul>
  14. 14. DESIGN Your website is the online expression of your brand. The same rules of branding and good design apply to your online communications. Web Design Myths: <ul><li>On-screen design quality standards are lower </li></ul><ul><li>72 dpi/web resolution = poor quality design </li></ul><ul><li>Web imposes design limitations </li></ul><ul><li>Technology imposes design limitations </li></ul>
  15. 15. DESIGN – HOME PAGE Home page is your only chance to make an impression and compel your visitors to dig deeper. <ul><li>Use the valuable space wisely </li></ul><ul><li>Remember that you have just a few seconds to convince your visitors to stay </li></ul><ul><li>Don’t overload with information – consider having lead-ins to places within the site that you want your users to visit </li></ul>
  16. 16. DESIGN BEST PRACTICES <ul><li>NO SKIP INTRO’s!!! No browser size requirements either! </li></ul><ul><li>Avoid using graphics where the same result can be achieved through CSS/HTML (use CSS/HTML to style color areas and type). </li></ul><ul><li>Avoid pop-ups unless there’s a very good reason for it – many users have them turned off, and for those who don’t, it’s generally annoying. </li></ul><ul><li>The site should not scroll horizontally AND vertically – a vertical scroll is more common, make sure that the navigation stays within a single screenshot. </li></ul>
  17. 17. DESIGN – FLASH CONTENT <ul><li>Flash (or not)  depends on your users and goals: </li></ul><ul><ul><li>Great marketing tool to communicate multiple messages, or tell a story </li></ul></ul><ul><ul><li>Adds visual interest and interaction </li></ul></ul><ul><ul><li>Allows to build on-screen applications and interactive demos </li></ul></ul><ul><ul><li>Easy to overdo and make it be a distraction </li></ul></ul><ul><ul><li>Not as SEO friendly </li></ul></ul><ul><ul><li>Generally, more difficult to edit/maintain </li></ul></ul><ul><li>Use Flash to do what HTML can’t, such as applications and interactive content </li></ul><ul><li>Don’t make it load forever </li></ul><ul><li>Make sure to have a “m u sic off” function </li></ul>
  18. 18. CONTENT <ul><li>It’s hard to read on computer screens – chunk it up, be concise, use lead-in copy and links, use enough contrast. </li></ul><ul><li>Make it a dialogue – invite users to start a conversation; make it easy to contact you; include acknowledgement pages for all sign-ups. </li></ul><ul><li>Avoid forms, unless you can offer a benefit to the user; don’t make all fields required – get only the info you absolutely need in order to go to the next step. </li></ul><ul><li>Achieve a balance between </li></ul><ul><ul><li>not enough substance / way too much copy </li></ul></ul><ul><ul><li>too many clicks / a lot of scrolling </li></ul></ul>
  19. 19. TESTING <ul><li>Test, test, TEST!! Windows and Mac, IE, Safari, Firefox – at the very least </li></ul><ul><li>Use software virtualization solutions that allows to run multiple operating systems simultaneously on one workstation </li></ul><ul><li>Web-based BROWSERCAM provides cross browser compatibility testing tool – </li></ul>
  20. 20. CASE STUDIES How it all translates into an actual website
  21. 21. DELTA CARBONA RE-DESIGN: before <ul><li>Site Goals </li></ul><ul><li>Brand revitalization </li></ul><ul><li>Connect to the audience – busy women, younger generation </li></ul><ul><li>Stain removal education </li></ul><ul><li>Repeat business </li></ul><ul><li>Encourage to buy in stores </li></ul><ul><li>Sell more to small businesses </li></ul>
  22. 22. DELTA CARBONA RE-DESIGN: after <ul><li>Communicates brand personality, appeals to the target audience </li></ul><ul><li>Added Stain Removal Tips section </li></ul><ul><li>Added Frequent Buyer Program </li></ul><ul><li>Prominent “Where to Buy” directory </li></ul><ul><li>Prominent Business Account </li></ul><ul><li>Overall streamlined site structure, navigation and visual hierarchy allows for quick and easy access to all key areas of the site – saves time, reduces frustration, and creates superior user experience </li></ul>
  23. 23. ECO-COACH RE-DESIGN: before <ul><li>Site Goals </li></ul><ul><li>Establish credibility and expertise </li></ul><ul><li>Look professional, established company, do not look like a start-up </li></ul><ul><li>Appeal to larger corporate clients </li></ul><ul><li>Education </li></ul><ul><li>Fresh, relevant content </li></ul>
  24. 24. ECO-COACH RE-DESIGN: after <ul><li>Education: What is/Did you know? </li></ul><ul><li>Expertise: news section/feature, speaking engagements, blog </li></ul><ul><li>Business Services: separate section and a home page feature </li></ul><ul><li>Design: fresh, clean – looks like an established professional company, communicates the idea of “green” and “indoor air quality” </li></ul><ul><li>The site allows for frequent updates by the in-house staff to keep it fresh and relevant </li></ul>
  25. 25. ARISAPH PHARMACEUTICALS RE-DESIGN: before <ul><li>Site Goals </li></ul><ul><li>Look professional, established, credible, bigger than they are </li></ul><ul><li>Attract investors & large pharma </li></ul><ul><li>Help Recruitment </li></ul><ul><li>Communicate Arisaph’s expertise and their advanced technology </li></ul>
  26. 26. ARISAPH PHARMACEUTICALS RE-DESIGN: after <ul><li>Design conveys a sense of “professional” & “established” positioning Arisaph as a major player that would be an attractive investment or a great partner </li></ul><ul><li>A new large Careers section and a prominent Hiring feature on the Home Page </li></ul><ul><li>In addition to the R&D main link, a Pipeline lead-in on the Home Page, giving interested parties a quick overview of Arisaph’s expertise. </li></ul>
  27. 27. Website Best Practices 07.24.08 Ida Cheinman [email_address]