Substance151 Best Web Practices

Website Best Practices 07.24.08 Ida Cheinman ida@substance151.com

WEBSITE PLANNING GOALS AUDIENCES (USERS) TEAM INFORMATION ARCHITECTURE NAVIGATION DESIGN CONTENT Search Engine Optimization and Marketing

GOALS Website Strategy, Vision and Goals – what do you want your website to do: Inform, educate Establish credibility Build brand awareness Grow your mailing list Convert leads Generate traffic Minimize phone calls Sell products Etc.

GOALS What problems does it solve for your audiences and how? Corporate Goals Marketing Business Operations Sales Etc. User Goals What do you want them to do, learn, buy, etc. – desired action and outcome

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. Audiences: one, two, multiple, internal, external – prioritize What is each of the user categories looking for? What is their level of expertise in your subject matter? Demographic, online experience, internet & computer technology available to them

WEBSITE GOALS ASSESSMENT Assess overall vision for project Identify and define all tangible & intangible objectives Establish major project milestones and deadlines for key deliverables Assemble a team Define overall feasibility and budgetary requirements

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: Strategy (brand, marketing, web, technology) Information Architecture, User Experience Design Technology Content Development Project Management SEO/E-marketing

TYPICAL PROJECT PHASES Pre-build: Strategy, Technical Requirements, Information Architecture, Usability Testing, Prototyping, Content Checklist Build: Design, Copywriting, Development, Testing, Launch

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. Site Map Page Wireframes Content Checklist Usability Testing & Prototyping

INFORMATION ARCHITECTURE – SITE MAP

INFORMATION ARCHITECTURE – WIREFRAME

NAVIGATION BEST PRACTICES How many main links? Too many – overwhelming, no clear path Too few – make sure it doesn’t take too many clicks for your users to get to all critical information Just right…generally 5-10 is a good number What are they? Think like your users, try to predict what they want to see and where they want to go. Naming: Use short, precise and self-explanatory link names. External Links: For links going outside of your website make the destination website open in a new browser window.

NAVIGATION BEST PRACTICES Navigation Design: Make sure it’s always clear where you are on the site and how to get back to the other sections. Use breadcrumb navigation Differentiate rollover and ”on” states, mark links to PDF & Word documents as such Visual Hierarchy : Primary Navigation (main sections) Utility Navigation (legal, about, sitemap, etc.) Allow for user interaction: Make it very easy to contact you – you can’t overdo this one!

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: On-screen design quality standards are lower 72 dpi/web resolution = poor quality design Web imposes design limitations Technology imposes design limitations

DESIGN – HOME PAGE Home page is your only chance to make an impression and compel your visitors to dig deeper. Use the valuable space wisely Remember that you have just a few seconds to convince your visitors to stay Don’t overload with information – consider having lead-ins to places within the site that you want your users to visit

DESIGN BEST PRACTICES NO SKIP INTRO’s!!! No browser size requirements either! Avoid using graphics where the same result can be achieved through CSS/HTML (use CSS/HTML to style color areas and type). 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. The site should not scroll horizontally AND vertically – a vertical scroll is more common, make sure that the navigation stays within a single screenshot.

DESIGN – FLASH CONTENT Flash (or not) depends on your users and goals: Great marketing tool to communicate multiple messages, or tell a story Adds visual interest and interaction Allows to build on-screen applications and interactive demos Easy to overdo and make it be a distraction Not as SEO friendly Generally, more difficult to edit/maintain Use Flash to do what HTML can’t, such as applications and interactive content Don’t make it load forever Make sure to have a “m u sic off” function

CONTENT It’s hard to read on computer screens – chunk it up, be concise, use lead-in copy and links, use enough contrast. Make it a dialogue – invite users to start a conversation; make it easy to contact you; include acknowledgement pages for all sign-ups. 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. Achieve a balance between not enough substance / way too much copy too many clicks / a lot of scrolling

TESTING Test, test, TEST!! Windows and Mac, IE, Safari, Firefox – at the very least Use software virtualization solutions that allows to run multiple operating systems simultaneously on one workstation Web-based BROWSERCAM provides cross browser compatibility testing tool – www.browsercam.com

CASE STUDIES How it all translates into an actual website

DELTA CARBONA RE-DESIGN: before Site Goals Brand revitalization Connect to the audience – busy women, younger generation Stain removal education Repeat business Encourage to buy in stores Sell more to small businesses

DELTA CARBONA RE-DESIGN: after Communicates brand personality, appeals to the target audience Added Stain Removal Tips section Added Frequent Buyer Program Prominent “Where to Buy” directory Prominent Business Account 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

ECO-COACH RE-DESIGN: before Site Goals Establish credibility and expertise Look professional, established company, do not look like a start-up Appeal to larger corporate clients Education Fresh, relevant content

ECO-COACH RE-DESIGN: after Education: What is/Did you know? Expertise: news section/feature, speaking engagements, blog Business Services: separate section and a home page feature Design: fresh, clean – looks like an established professional company, communicates the idea of “green” and “indoor air quality” The site allows for frequent updates by the in-house staff to keep it fresh and relevant

ARISAPH PHARMACEUTICALS RE-DESIGN: before Site Goals Look professional, established, credible, bigger than they are Attract investors & large pharma Help Recruitment Communicate Arisaph’s expertise and their advanced technology

ARISAPH PHARMACEUTICALS RE-DESIGN: after Design conveys a sense of “professional” & “established” positioning Arisaph as a major player that would be an attractive investment or a great partner A new large Careers section and a prominent Hiring feature on the Home Page 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.

Website Best Practices 07.24.08 Ida Cheinman [email_address]

Substance151 Best Web Practices

More Related Content

What's hot (19)

Viewers also liked (8)

Similar to Substance151 Best Web Practices (20)

More from substance151 (9)

Recently uploaded (20)

Substance151 Best Web Practices