The modern word “brand” is derived from the word “brandr,” a word from ancient Norse meaning “to burn.” For thousands of years, brands have been used to indicate livestock ownership. Today, brands convey the many forms of an organization’s identity to encourage consumer behavior.
For medical practices, the primary goal of website branding is to convert website visitors to new patients.
Our Philosophy:
We recommend investing in branding that will encourage website visitor behavior. We do not recommend investing in branding that will have no impact or worse – discourage website visitors from completing the ultimate goal of becoming a new patient. We rely on current research to determine which efforts are beneficial and which are not.
Notable Research:
The internet has only existed for a few decades and even Apple Computer largely ignored branding on the web until 1998. Since then, the standard for good website branding and website usability has quickly developed and dramatically changed – shaping today’s website branding best practices and standards.
Surprisingly, many web branding efforts can actually backfire, ultimately harming the business. For example, for years many of our clients requested expensive flash/splash pages for a website homepage. We looked into the research and found 80 percent of website users disliked splash pages. Furthermore, the splash pages were expensive to build, difficult to update, and unreadable by search engines. We recommended against splash pages and saved our clients from this expensive branding mistake.
Over the many years of building and managing our clients’ websites, we have discovered many more common medical practice branding mistakes – and best practices.
We’ve compiled our findings and recommendations here to guide our website branding efforts.
Frameworks
Patterns: Solutions that work
Vanguard makes use of a handful of frameworks/standards so your website benefits from extensive documentation (hundreds of pages), scrutiny (thousands of stakeholders), funding (millions of dollars), and testing (billions of website visits). Notably:
Google’s Material Design standard
Bootstrap’s underlying website coding
Font Awesome’s accessible icons
We recommend: proven frameworks
Rely on these respected frameworks so your website framework is thoroughly tried and tested to achieve optimal usability and patient experience.
Anti-patterns: Solutions That Don’t Work
We often work with organizations and industries that have struggled to negotiate the complex and difficult process of balancing competing interests (internal and external). A handful of website implementations demonstrate remarkable failure or transformation. The good news is putting an end to anti-patterns creates success stories.
In 2009, FastCompany wrote an article describing the American Airlines website abomination. Citing an open letter, the story published:
“I would be embarrassed–no ashamed–to have a Web site with a customer experience as terrible as [AA].”
One of AA’s designers responded:
“The problem [..] lies less in our competency […] and more with the culture and processes. AA.com is a huge corporate undertaking with a lot of tentacles that reach into a lot of interests. Imagine the cool stuff we could do if we could operate [according to the] Getting Real philosophy! We could turn on a dime. We could just say “no” to new feature requests. We could eliminate “stovepiped” positions.”
Although it seemed AA would remain dysfunctional, in 2013, the new AA was successfully launched after significant investment and work.
We recommend: avoid solutions and slow process that don’t work
Instead, pursue solutions that are proven to produce results (i.e. bring in new patients).
Simplicity
Navigation & Layout
Hick’s Law states that as options increase, decision time increases logarithmically. This means a navigation menu with many items doesn’t help website visitors; it frustrates them.
Chekhov’s Gun principle in drama states:
Remove everything that has no relevance to the story. If you say in the first chapter that there is a rifle hanging on the wall, in the second or third chapter it absolutely must go off. If it’s not going to be fired, it shouldn’t be hanging there.
What do you want visitors to do when they open one of your web pages? Competing interests between newsletters, phone calls, appointment requests, social media, and other content can make the decision challenging.
If everything is important, nothing is important. That’s why Hick’s Law can benefit the website user experience.
We recommend: less is more
- Less is more in both navigation and on-page content.
- If it isn’t required, don’t include it. Deliver bite sized pieces of importance.
- Limit top level navigation to four or five items and try to use single words, such as “About” instead of “About Our Organization” – following material design recommendations.
- According to Hick’s Law and Google’s “Single Call To Action (CTA)” approach, we must decide what ONE action we want the visitor to do (e.g. only have ONE colored button on a page that says “Request Appointment”).
- Writing should follow material design standards: clear, accurate, and concise.
Responsive
Think Mobile-first for Website Design
Our clients’ websites see upwards of two-thirds of website traffic coming from smartphones and tablets. Less than 2 percent of website visitors have a screen larger than a typical desktop computer.
We recommend: responsive design
Create a website design and website experience that works best for the majority of visitors (those with small screens).
Dominance
Organizations often have an affinity for dominant branding – where a brand’s primary color(s), logo, calls-to-action, etc. are a major presence on the web page. However, this affinity can actually produce worse results for website branding. For example, if all .gov websites heavily applied their main brand colors, each US government website would look like a giant American flag.
Pitfalls of dominant branding:
- Dominant use of brand colors can distract from the single (most important) call to action.
- Dominant use of brand colors can appear harsh, reducing usability accessibility, and readability.
- Too much branding or explanatory text limits user understanding, readability and engagement.
- Large logos and headers distract users, push content below the fold, and reduce usability.
We recommend: limited and focused dominance
- Use brand colors sparingly, such as in the logo and the single call to action.
- Be succinct and allow room for white space to avoid the pitfalls noted above.
Header
It is tempting to want your logo bigger. The bigger the brand, the better the brand – right? However, industry leaders are giving a strong indication that large logos do not drive positive behavior, and may actually impair results.
In fact, small logos (31 pixels in size on average) have been adopted by most all website branding leaders. At the time of this writing:
Apple logo is 20 px tall
Google logo is 27 px tall
Twitter logo is 23 px tall
Washington Post logo is 27 px tall
Netflix logo is 45 px tall
White House logo is 32 px tall
WebMD logo is 26 px tall
Coca-Cola logo is 50 px tall
We recommend: short headers and logos
- Logo 40 px or smaller in height
- Navigation / header 80 px or smaller in height
- Fixed / sticky headers less than 60 px in height
Sliders
Slideshows / Carousel
For a while, these nifty features took over the web. However, research now shows that these components have awful results:
- Sliders are bad for SEO – i.e. Google doesn’t like them and will send fewer visitors, which also results in increased costs for Google pay-per-click advertising.
- Less than 1 percent of visitors click on a slide, and less than 0.1 percent on slides 2+ – and Vanguard’s own research on our clients’ healthcare websites match other experts’ findings.
- Vanguard’s own data shows that non-slider homepage features receive twice as much user engagement. Users scrolled past the slideshow and clicked on features below at double the rate.
- Sliders impair mobile visitors with extra load times and difficult-to-use features (even if hidden for mobile devices).
- Sliders are costly to build and maintain and can introduce code conflicts on the website.
- And many, many, many other arguments against slideshows
In place of slideshows, hero design has become prominent.
We recommend: do not use slideshows
Use hero features for brand messaging.
Translations / Internationalization
How to represent languages
Developing a multilingual website can play an important role in attracting additional patients. However, improper implementation can impair the success of such an effort:
- Flags are a poor choice for representing languages.
- Languages are multinational (ex: UK or US flag for English?).
- Some countries have multiple official languages (Canadian flag should be English or French?).
- Flags change.
- In most cases, verbose listing of languages violates other principles.
- Language options should be in the header or footer (not both) so that it is easy for a visitor to change languages.
- Presenting non-English languages in the English language is confusing and counterproductive. (Ex: use Español, not Spanish)
- The “globe” icon is used by Amazon, Netflix, and is likely the most universal and recognizable symbol associated with the world’s languages. The “language icon” is acceptable, but has limited implementation with major websites.
- ISO has developed a widely used standard of codes for representing languages. The two letter representation is ISO 639-1 is available for instances with limited space (such as URL).
We recommend: the globe icon and ISO 639-1
- Use the globe icon or the language icon
- Use a drop down menu with caret to indicate additional options to the visitor
- In the drop-down, use the full name of the language in its local format. Ex: (English, Español, 中文 is correct and English, Spanish, Chinese is incorrect)
- Use ISO-639-1 in URL and when space is limited (ex: example.com/es is correct and example.com/espanol is incorrect)
Dropdown Menus
Show/hide/toggle navigation menus.
This was a minor debate circa 2012 on the use of hover/click for dropdown menus. It is now well established that click to dropdown is preferable.
- Click-dropdowns match users’ intention to perform the action of opening a nav menu
- Prominent sites, such as Twitter/Google/Facebook adopted this reasoning to eliminate hover-dropdowns
- The Bootstrap framework, used by millions, specifically chose click-dropdowns since at least 2012.
- Click-dropdowns match mobile users’ experience
- Click-dropdowns match users’ experience using select menus on web forms
- Hover-dropdowns can interfere with mobile users’ experience
- Hover-dropdowns produce unintended behavior (such as showing or hiding when the user doesn’t expect it)
- Hover-dropdowns would be costly to build and would work against our established standards
We recommend: click to show dropdown menus
Capitalization
When to use ALL CAPS, Title Case, or lowercase.
Consistent and correct use of capitalization is important for meeting a reader’s expectation and comprehension of content.
- Professional guidance indicates that all-caps is difficult to read and fatigues readers. Arguably, the varying shape of lower case words makes them easier to recognize.
- Culturally, all-caps can be perceived as “screaming” or “yelling” and can be an example of self-defeating typography. Although it is intended to get the reader’s attention, it actually encourages readers to skim/skip.
- The landmark study from Miles Tinker indicates that “All-capital print greatly retards speed of reading in comparison with lower-case type.”
- Other studies show that all-caps is read 38 words per minute slower (reducing the amount of information the reader will obtain). However, this is some evidence indicates that all-caps can slightly increase legibility for readers with reduced acuity.
- AP Guidelines, which we adhere to, have specific rules on the use of capitalization.
We recommend: AP Guidelines
- Page titles should be Title Case.
- Other headings should be Sentence case.
- Body text should use standard sentence capitalization.
- Only in very limited circumstances may all-caps be used: such as one-word navigation / buttons. However, even in these limited cases, it is often still preferable to use standard capitalization.
Funky Fonts
A nice font can improve page aesthetics, but beware of collateral damage. Font selection is complex and subject to a tremendous number of studies which debate the relative merits of various font concepts.
- Sans-serif fonts are equally readable, however serif fonts may convey formality while sans-serif fonts may convey innovation.
- Fonts can double page load times (particularly negative on mobile devices) with an additional second of load time.
- Native fonts (fonts that are included with standard versions of Windows, Mac, etc) impose no additional load time.
- Google has imposed penalties for slow desktop sites and slow mobile sites.
- Google also imposes increased advertising costs for slow sites.
- Google Fonts is free, optimized for the web, and indicates if a font package will have a “Fast”, “Moderate”, or “Slow” load time.
- Readers may be annoyed to try and decipher difficult to read fonts.
- Multiple fonts create a competition for a reader’s attention.
We recommend: Use one limited Google Font style to unsure fast load time
Pop-ups and Aggressive Marketing
Do pop-ups work and should we use them?
Aggressive messaging attracts low quality interactions and discourages high quality interactions, and can cause long term damage.
- Research shows that the very large majority of visitors strongly dislike aggressive marketing strategies.
- Modals / pop-ups are the most hated technique.
- Google is know to penalize or block sites with intrusive messaging, which may have long lasting negative effects.
- Other research shows that although pop-ups can obtain clicks, they do not drive actual sales.
- Leads generated in this manner are necessarily lower quality, impulsive, and flighty. This causes the practice to spend limited resources pursuing low quality leads instead of focusing on retaining high quality leads.
- The better ads initiative (supported by Microsoft, Google, Facebook, and the like) disallows certain pop-ups.
- Pop-ups can lower a visitor’s trust in the organization which is counterproductive to a doctor-patient relationship.
- Consider your interaction with gas station with its storefront windows littered with banners from cigarettes, alcohol, lottery prizes, energy drinks, and the like. What is the quality of customers you expect this business to attract? Is it safe? How does it compare to a gas station with clean storefront windows and attractive lighting?
We recommend: do not use pop-ups
Aggressive marketing should be very limited or eliminated