Design and Website Best Practices
-
At Blackboard, we are passionate about high quality design and delightful user experiences. Whether you are an existing or prospective client, we'd love to assist you in making the most of your website. Below you will find a comprehensive list of recommendations provided by our experienced and award winning UI/UX design team.
Responsive. Accessible. Intuitive.
We consider these non-negotiable requirements. Responsiveness is essential for a great user experience on tablets and mobile devices and your users will absolutely expect this. Accessibility is not only a legal requirement, but a moral and ethical mandate as well. If you care about your users and their ability to consume your content, you should be proactive in your pursuit of having an ADA compliant website. Usability is a basic requirement of every website. If your site is not intuitive, it will frustrate users and prevent them from accessing important information.Tips:
- Ensure that you have a prominent, user friendly mobile menu, your content stacks appropriately, and design elements scale as needed to fit within smaller device windows. Learn more.
- Links need to be obvious - utilize an underline, font weight, or unique font style. Color can also be used to distinguish links from static text, but should not be the only style difference as users with vision impairments may not be able to differentiate the color difference.
- Use appropriate font sizes on both desktop and mobile and choose widely supported, clearly legible fonts. We recommend size 16 for body copy, but 12 - 16 is acceptable.
- As a general rule, clickable items should have a hover effect (animation of some sort) and non-clickable items should not.
Example Sites:
- Remix - MyWay Ultra template (Check out the user friendly mobile menu on smaller views)
- Matrix - MyWay Ultra template (See how content stacks in an intuitive manner on mobile devices, providing a consistent user experienec when moving from desktop to smaller views)
- Academy - MyWay Ultra template (Every clickable item has a hover effect, making interactive and static content very apparent)
Navigation
Clear navigation is essential for a successful website. It is the method in which users access information and needs to be designed and organized in a manner that helps, not hinders, the user. A considerable amount of thought should be put into how the navigation looks and functions in addition to how content is organized. When planning site navigation, be sure to consider more than the main menu bar. Navigation can also include breadcrumbs on interior pages, links built into the header or footer of your website, icon areas, etc.
Tips:
- A persistent (sticky) navigation bar enables access to the main menu from anywhere on the page without having to scroll back to the top. Learn more.
- Anchor tags (styled links or buttons) such as 'scroll down' or 'back to top' reduce manual scrolling.
- Breadcrumbs on interior pages indicate the user's click path and make it simple to backtrack.
- Icons add a visual element to text links and help draw attention to high priority content.
- Site Shortcuts are ideal for highlighting your most accessed links, but avoid flooding the homepage with too many links outside of the main navigation bar.
Example Sites:
- Nashua School District (Features a well organized navigation dropdown with accent photos - what we refer to as a channel bar mega menu)
- Jackson Public Schools (The sticky navigation bar remains accessible as you scroll down the page)
- Fulton County Schools (Sections display in three columns, which utilizes more of the screen real estate and prevents users from having to scroll through one long vertical list)
Content
At Blackboard we often stress that content is a separate entity from the template, which is true from a website management standpoint, but content is often considered part of the design by end users. Every organization has unique content, but following general best practices will help your website look its best.
Tips:
- Utilize whitespace and color banding to create digestible sections of content. Learn more.
- Include padding! We can't stress this one enough. Content needs to breathe and should have ample negative space around it (but avoid going too far with padding or users may think something is missing from the page).
- Features such as More buttons, arrows, pagination, accordions and tabs help keep homepage content concise, organized, and attractive.
- Avoid animated graphics and auto scroll content (such as horizontally scrolling announcements).
- Understand your target audience and tailor your content to meet their needs.
- Consider audience/persona based navigation and keep staff or faculty content seperate from general user content. Learn more.
Example Sites:
- Everest - MyWay Premium template (A tabbed content region overlays the photo rotator and helps get important content above the fold)
- Elevate - MyWay Ultra template (Homepage regions vary between white and colored/photo backgrounds, dividing the page into easily distinguishable and digestible sections)
- Premier - MyWay Ultra template ('More' buttons keep news stories limited to a reasonable amount, but enable users to access additional articles)
Layout & Components
Layout refers to the grid or region struture that your content sits within. Components are the parts and pieces that make up the website. When it comes to layout, we encourage creativity and thinking outside the box, however, it's important to consider what users will expect to see and where they will anticipate finding it.
Tips:
- Scrolling on a website is something all users are accustomed to, but your logo, site name, navigation, search and translator are key features that should always be in a prominent location above the fold.
- We recommend a mixture of horizontal (wide) and vertical (skinny) content regions on your homepage to accomodate all varieties of content.
- Utilize the full screen real estate by designing your website at wider widths (1200 pixels is a common standard) or opt for fluid width, which is when content expands to fill the entire browser window rather than being constrained within a maximum width.
- Every website needs a grid structure, even if it isn't readily obvious to the user.
- Don't be afraid of scrolling! Everyone using the internet knows how to scroll, but keep the amount of scrolling reasonable and utilize sticky navigation bars or anchor tags to assist the user.
- Keep in mind that items located in your website header or footer will show on all pages. Contact information, social media links and legal links are items users expect to see in the header or footer of a website.
Example Sites:
- Discover - MyWay Premium template (Key features such as the translator and search are located in the header, while social media, contact information and legal links are located in the footer where users expect to find them)
- Aspire - MyWay Premium template (The homepage structure features a mixture of horizontal and vertcial regions for maximum content flexibility)
- Monument - MyWay Premium template (Features a fluid width, which means that content expands to fill the full width of the browser window)
Branding
Your brand tells the story of who you are. Your logo, color palette, and supporting design elements impact how your organization is percieved. Never underestimate the power and importance of high quality and consistent branding.
Tips:
- Your logo should represent your organization as accurately as possible. It can be fun, traditonal, modern, etc., but it needs to be professional (and you need to own the rights to use it). Need a new logo or mascot? We can help! Check out our logo package and logo refresh services.
- Consistency with branding is key. Your website, print materials, signage, etc., should all have a consistent aesthetic. The website shouldn't feel like a complete departure from all other branding. Utilizing a consistent color palette is one way to tie all of your materials together.
- Add design elements and visuals that tie into your logo, speak to your geographic location, or highlight what makes your district unique. Ideally, you want your website to be easily recognizable and memorable. Custom illustration, photos, watermarks, and integration of branding related elements are all great ways to personalize a template.
Example Sites:
- Pittsburgh Public Schools (The shapes from the logo are integrated throughout the design in creative ways, creating a heavily branded aesthetic)
- ESC19 (The star from the logo is used throughout the design for subtle brand incoporation)
- Cherry Creek Schools (The illustrated footer depicts an actual mountain range in Colorado near Cherry Creek, which is a fun, personal touch)
Multimedia
Photos, videos and graphics have the power to make or break a website. A well designed template and strong branding will be quickly overshadowed by low resolution photography, grainy videos, and tacky graphics. Yes, some graphics are just plain tacky!
Tips:
- Visuals are meant to be eye catching and engaging. They should add value to your website, not detract from its aesthetic. Avoid adding graphics or photos that don't support your content or branding in a meaningful way.
- Only utilize high quality imagery and graphics and be sure to crop them to proper size dimensions. Nothing is worse than a stretched or distorted image! Learn More.
- Illustrated graphics should be used sparingly and the illustration style should be kept consistent.
- You do not need a supporting graphic for every piece of content on the website. Photos and graphics draw the eye, but if every piece of content has an accent image, nothing will stand out and your page will look busy and overwhelming. In some cases, a simple text link is the more effective option.
- Keep videos an appropriate length, and avoid adding an excessive amount of photos to your homepage rotator. Realistically, users will probably not watch a one hour video or scroll through 100 photos, so it's best to keep multimedia limited to easily consumable amounts.
- Homepage photo rotators are typically located above the fold, in a prominent location, so you want to make the most of that screen real estate. Whether your goal is to collect donations, target prospective students, share news, etc., you can utilize the rotator app to direct user traffic to your most important content.
Example Sites:
- Richmond Public Schools (Great use of the photo rotator to promote district news and events)
- Lindbergh Schools (High quality photos that support and add value to news stories)
- Belton ISD (Very engaging and attractive visuals used in the rotator, news area, and photo collage)
Interactivity
Functionality and interactivity are what give your website 'wow factor,' but they also have a huge impact on user experience. If your website is lacking interactivity, it will feel very static and unengaging to the user. If your website has too much interactivity, it can be distracting and confusing.
Tips:
- As a general rule, clickable items should always have a hover effect and items that are not clickable should remain static so as to avoid confusion.
- Clickable items should be intuitive. It should be obvious whether content is static or interactive.
- Your content needs should influence your design decisions. Don't try to force features that don't work with your content just because they are trendy or impressive. Functionality features should add value to the user. Jump on the trend bandwagon only if it suits your district vision and user needs.
- Understand that the homepage of your website is meant to be visually engaging and interactive, while the interior pages are more static and content driven. It's still important to have attractive and engaging content on interior pages, but users will expect less interactivity and more strightforward information.
Example Sites:
- Tuscaloosa City Schools (Streaming video and photo collage features on the homepage are engaging and interactive)
- Saraland City Schools (Homepage is simple and clean, which lets the video be the main focal point)
- New Caney ISD (Obvious hover effects on all clickable items)
Inspiration
School district, university, or education affiliated websites will often have consistencies in the type of content they feature, and because content drives design, there will be similarities in layout, functionality, etc. It can be challanging to stand out from the crowd, but luckily there are a lot of great sources of inspiration on the internet. Whether you are designing your own website or collaborating with a designer, we recommend doing research and looking at inspiration websites before starting the project.
Tips:
- Don't be afraid to be the first to do something! Obviously you want to follow the general best practices listed above, but think outside the box rather than emulating what's already been done. Get creative!
- Trust your designer! The Blackboard design team has won more than 60 awards and is an industry leading team. They are experienced professionals who have your organization's best interests in mind.
- Higher education websites often feature impressive functionality and cutting edge design, so they are great sources of inspiration, but don't be afraid to look outside of education affiliated websites.
Example Sites:
- Enjoy Illinois (Really bright and interactive, great use of photography, icons and typograhy)
- Loyola Marymount University (Very modern and organic layout, subtle content animations, great use of white space with minimal color)
- Travel Texas (Visually engaging, high quality photography, and a unique navigation menu)
Maintenance
Every website needs a maintenance plan. The web world moves at lightning speed and even well designed websites will show their age after a certain point. We recommend proactive maintenance, rather than waiting for your users to report a negative experience.
Tips:
- The average lifespan of a website is 3.6 years. At Blackboard, we recommend redesigning your website every 3-5 years, or sooner if it is no longer meeting the needs of your users or representing your organization in the best possible way.
- During the 3-5 years, you should consider making updates to add features, refresh the appearance, or reorganize content. Continual maintenance and small updates will prolong the lifespan of your site, but it's important to identify when it's time to start fresh with a new design. If your template is more than 5 years old, it's not in your best interest to try to refresh it.
- Keep in mind that accessibility requirements may change during the lifespan of your website and ensure that your site is being continually evaluated and updated to meet those requirements.