Perspective, tips, and insight

Articles to help you improve your digital marketing

Web Design Case Study: The Christ Hospital Construction

Services Provided Include:
We launched a construction microsite for The Christ Hospital earlier this month, and it can be viewed at http://www.christexpansion.com. The purpose of the microsite is to communicate and ease the DISRUPTION that the construction development will cause for employees, patients and visitors.

Christ is building a new tower on site for the Orthopaedic & Spine Center, which will a comprehensive house inpatient and outpatient services and will include visitor parking.
The microsite communicates this information and progress online.

The first step was a clean web design in effort to get the information public quickly. An upgraded design of the website will launch later this summer, and it will show off the planned new brand.



TBH Creative also designed and developed a mobile website to further communicate the information with ease to traveling users. Mobile usability was a high priority of the project.


About The Christ Hospital Construction

Starting June 2012, The Christ Hospital will begin construction of a $265 million expansion and improvement of its main campus in Mt. Auburn. The centerpiece of this expansion plan includes the development of a unique facility dedicated solely to orthopaedic and spine care, designed to support physicians, patients and families in an efficient, healing and technologically advanced environment. The new 332,000 square foot facility, which will be located just south of the main hospital, will physically connect to the current hospital but will provide separate access for patients and visitors. The orthopaedic and spine center will include:
  • 60 private inpatient rooms
  • 10 operating rooms dedicated to orthopaedic and spine surgeries, with two shelled operating rooms for future growth
  • Physical and occupational therapy services
  • Imaging services
  • Physician offices and administrative offices
  • Underground parking for approximately 150 vehicles
Completion of the facility is expected to occur in Spring 2015, and opening is expected to occur in Summer 2015.


Navigation: What works best with web design?

Navigation is a very important part of a successful website. After all, you can't move around a website without one. I will discuss four aspects of creating a user-friendly and effective navigation for a website:
  1. Easy to find
  2. Minimal links
  3. Clear naming
  4. Show hierarchy

Easy to Find: Choose an obvious placement for your main navigation bar

Your navigation options need to be as easy to find as the logo. Users cannot go anywhere on your website without finding the navigation first. The two most common spaces for navigation are along the top or left side of the website. Users won't stick around for long if they can't make their way around your website easily.

The style and design of your main choices should also be appropriate. We recommend to use tabs, buttons, or other obvious 'clickable' styles.

CIRTA's navigation uses large buttons with obvious hover and active states ("About" is the current shown active state).
"Sign the Petition" is the organization's main  objective and was highlighted with orange for emphasis.

TBH Creative's navigation bar uses tabs which are very familiar to real file folders.

Minimal Clicks: How many links should you have in the main navigation bar?

There doesn't seem to be a set "rule" on how many links you should have in the main navigation bar, and it may vary based on your company's particular needs. Our recommendation is to keep it minimal by creating primary 'buckets'. Additional pages can be placed below these main topics. A good range is 5-8 main buttons. If you need one or two more and the design will allow for it, that is okay. It is best to have less than 10 links in the main navigation. More than 10 is too much for the user to choose from.

Below is an example of a website with too many links in the main navigation:

KitchenSink.com is an example of a website with too many links in the main navigation.
KitchenSink.com could have added some drop down menus and sub-navigation to help organize their site better. Larger websites will need sub-navigation as well, which brings us to the next topic.

Clear Naming: Use obvious names for categories

This sounds like a "no brainer", but what you think a category should be named may confuse other users as to what that category actually contains. This is why it is important to conduct usability testing or gather input from others outside of the industry. For example, a good name for a page with map and directions is "Contact" or "Map & Directions". The simpler, the better when it comes to page naming.

Where would a user expect to find your store's hours? On the contact, home or about page? If you aren't sure, you should conduct a round of usability testing with users in your target audience.

Tips: 

  • Shorten longer named links or buttons to simple and clear action wording. 1-3 words is optimal.
  • If your company uses a lot of industry 'jargon', make sure the navigation wording speaks to the general public or audience, not just people who are very familiar.

Navigation Hierarchy: Are breadcrumbs needed?

It is important to identify for the user where they are on a website and within which section. This is especially important for large websites so that users do not get lost. Breadcrumbs are a great option. They are most often used in a simple form, for example: Home > Products > Bath > Towels. This shows which section the user is in and how they got there.

Below are some examples of showing hierarchy.
Apple.com has a very beautiful and clean navigation bar,
and they use very traditional breadcrumbs on deep level pages of the website.

Target.com uses traditional breadcrumbs with a very nice style.
They also make it very clear which section the visitor is on using the large section title in banner bar (see 'bath safety').

Imaging Office Systems' uses visual breadcrumbs to show the user which section they are in.
See the active tab state, section identification on the left, and highlighted tab on the left as well.

Interested in learning more about navigation? One of our previous blog posts, 3 questions a good navigation system should answer, further discusses the importance of great navigation on a website.

Web Design: How Do You Decide On A Typeface?

Typeface infographic by Inspiration Lab.
There are a variety of font options available these days, but how do you choose the right one? When making type decisions for your website, it's important to consider readability, pairing, kerning, and more.

Readability

Avoid using a small font size for the main sections of website copy. Aim to keep your text between 12 to 14 pt to maximize readability. To help make scanning easier for your users, consider setting your headlines and subheads in a different typeface or style.

Pairing

If using multiple typefaces, spend time seeing how they look together as you develop your CSS. Play around with font choices. Sometimes two different serifs look great, or one serif one san serif, or two san serifs. Don't just settle because it looks "alright." Make sure each font compliments the other.

Unless it's completely necessary for branding purposes, try not to use more than three different fonts on a website. Simplify your font choices to make your website seem more cohesive and thoughtfully put together. Too many typefaces on a website can make the design confusing for users.
An physical example of what kerning is: the spacing between letters.

Kerning

Kerning is the spacing between letters. Some fonts are kerned in a very condensed manner, and others can be spaced far apart. If you find your typeface hard to read, investigate its kerning to see if adjustments can be made to make it more legible.

Style

You need to be sure to match the design of your website. Is your website clean and contemporary? Traditional and classic? Full of character and edgy? There are fonts out there for any brand.

If you have a limited budget typefaces and Google Web Fonts aren't meeting your needs, here are some websites where you might find some free or affordable alternatives:

Social Media & Your Business: Blogger (or any other sort of blog)

This month, I am writing a series of blog posts on social media and your business.

Blogs are a great way for businesses to increase search ranking. They also engage your audience and keep you on your toes with what's new in the industry. Customers are always interested in the newest products and keeping up with the latest trends.

There are several free blog services out there: Blogger and Wordpress, just to name a few.

Advantages


  1. More traffic to your site - Blogging can increase your search engine rating. The more posts, the better. Make sure you create relevant blog posts. Creating posts no one will read doesn't make much sense.
  2. Position yourself as an expert on the subject - By creating new content for your business' industry, you're building credibility with potential customers. Customers want to hire professionals who know their stuff.
  3. Engage your audience - Ask questions. Have a contest. Start a dialogue about a certain topic. Create a poll. Communication between customers (and yourself) can help you decide what approach is best for your business.

Disadvantages


  1. Not enough time - If you don't have enough time to write at least a few posts a month, you probably shouldn't have a blog. Users get turned off when they go to your blog and see it hasn't been updated in over 6 months. If you can't keep up with posts, we suggest you don't add a blog to your website.
  2. Spam - Spam comments happen all of the time on blogs. An easy way to avoid this is to moderate all comments that come through. This way you can easily pick out the spam and delete those comments before they ever get posted.
  3. Negative feedback - If you put your opinion on the Internet, you will probably get a few users who don't agree with you. This is completely okay. You just need to make sure you respond well. No one has the same thought process you do.

Examples

TBH Creative's blog fits seamlessly into the website design.

TBH Creative's blog.


Kermans Fine Flooring's blog also matches their website design.

Kermans Fine Flooring's blog.


Receive articles in your inbox