In the modern information age, we’re all experiencing information, or cognitive overload. The sheer volume of information we’re exposed to and the frequency with which it arises can be an issue, but researchers tend to agree that it’s not the volume of information; it’s how it’s organized that’s the problem.
User Experience
What You Need to Know About Information Architecture
One of the biggest mistakes we see people make when it comes to their websites is not prioritizing information architecture. While the design aspects of a website are fun, glamorous, and ultimately vital to the success of your site, it’s important that you don’t jump straight to the design and forgo the important process of building a solid information architecture and understanding the purpose behind your site and its content.
Improving Website Performance: A Site Manager’s Guide to Minimizing Downtime
Higher education institutions often have large, complex websites that cater to many audiences who depend on their successful performance: Faculty, students, prospective students, parents and the higher education community at large.
The importance of your institution’s website cannot be understated. The web is now mission-critical, meaning that if your web presence fails, your business operations suffer as well. For this reason, any downtime is an unwelcome hassle for anyone charged with managing the website.
5 Tips for Collecting Feedback on your New Website or Feature
DO Start early
Ideally, feedback should be part of your production plan from the very beginning when you’re looking to release a new website or feature. It’s not only a useful marketing activity to manage your online reputation, but it also may help you find the areas of your business that need improvement. The earlier you ask for feedback, the easier it will be to correct any problems that exist. You can monitor activities manually, or use an all-in-one monitoring service such as Sysomos or Brandwatch.
Designing for the Best Possible Mobile Experience
In recent years, desktop Internet usage has fallen while mobile usage has increased. Last year, Google confirmed that “more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan.” If you think the Internet is big, mobile is 10x bigger. Did you know that Google won’t show your website in mobile searches if it isn’t mobile-friendly? But, what does “mobile-friendly” actually mean. In this post, we’ll take a closer look at how to design for the best possible mobile user experience of your site
Website Accessibility: What You Should Know
The accessible web means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the web. This encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive and neurological disabilities. But web accessibility also benefits others, not just those with disabilities, including people with “temporary” disabilities such as a broken arm, older people with changing abilities due to aging.
The Americans with Disabilities Act (ADA) was enacted in 1990. Its effects are visible in nearly every public space in the form of disabled parking, ramps as alternatives to stairs, Braille signage, and more. Although the need to provide disabled people with reasonable accommodations has been a civil rights issue for decades, one important public space – the Internet – has been largely overlooked up until now.
Mega Menus
Navigation has always been a design problem for large websites. Mega drop-down menus are a growing trend in web design that structures navigation choices through layout, typography, and sometimes icons.
Mega menus can greatly improve navigation and usability on sites that involve a lot of pages or products. With mega drop-down menus, a visitor can see all their choices at once. For bigger sites with many features, regular drop-down menus typically hide a lot of your site’s content. You can scroll, but this becomes confusing and hides a number of choices at any given point in the navigation process. Mega menus show everything at a glance and through grouping, allows your visitors to visualize the relationships among items on your site. CSS-only dynamic drop-downs are possible, but they don’t offer mouse over/out latency or work in every browser.
While mega menus can make it easier for users to find the information they’re looking for deep within a site, a vast number of links can also overwhelm some visitors. Mega menus can help streamline the navigation process by allowing you to group menu items. Chunk options into related sets using concise, yet descriptive labels for each group. Try not to offer huge groups of options that require a lot of time to scan. At the same time, don’t make the groups so small that the menu has an overabundance of groups that your users have to spend time understanding.
Just because you can put everything in a mega menu doesn’t necessarily mean you should. The standard usability guideline to “keep it simple” also applies to mega menus. Avoid GUI widgets and other interface elements that involve a lot of interaction. Mega drop-downs are temporary – They appear on hover or click so shouldn’t replace dialog boxes, which should be used for more complex interactions. Even though mega menus have the room to support many options, it’s best to try not to overload your users.
From a design standpoint, mega menus can look great and allow you to further express your brand’s personality and creativity. These drop-down menus are a design canvas! They eliminate unnecessary scrolling and offer additional elements such as typography, icons and tooltips to help guide users to the content they came for.
Mega menus are common on e-commerce sites because they typically include many categories of products. They’re also useful on other large websites where fewer clicks should be necessary to get to a specific page. Mega menus allow visitors to reach the content they’re looking for no matter where they are on your site.
Your site may benefit from a mega menu if:
- You manage a large number of products (eCommerce sites like REI)
- You publish and manage a lot of content (content aggregators and news sites like Reuters)
- You have complex service offerings requiring a lot of supporting content (large association sites, higher education sites like Cornell, government sites like The White House)
- Your site is information-oriented, diverse, and you offer a lot of long-form web copy
You probably don’t need a mega menu if:
- Your site is small without too much content (small businesses, restaurants)
- You have fewer pages and focused content
- Your site is dedicated to a singular function, such as a tool or online calculator
Be warned: The increased ability to navigate a site will come at a tradeoff on the SEO front. Too many navigation links in a mega menu may dilute your site’s overall page rank. Google assigns a PageRank score based on the number and quality of links pointing to a webpage. A site’s internal link structure transfers PageRank throughout the site. When you distribute a site’s PageRank in a “broad” way, you dilute the page’s ability to rank competitively in the SERPs. Sites with weaker trust and authority metrics will suffer more than established sites with strong authority and trust metrics. Shoot for 100 links or less, but keep in mind that there are occasions where the SEO hit will be worth it.
Navigation has a huge impact on your website’s usability and appearance, so make sure you have the right menu for your site’s content, layout and visitors. This article features several free and premium WordPress plugin options that can help you create a responsive menu, or make your existing navigation compatible with mobile devices.
Want more? Sign up to get our newsletter delivered to your inbox the first Thursday of every month. Receive links to the latest web-related articles, best practices, and thought-leadership commentary.
Psychology of a Website: Color Palette
When it comes to web design, don’t underestimate the power of color.
Colors have a strong impact on the design solutions we produce and the experiences our users take away. As you may already know, colors help to create an atmosphere. They can radically alter our mood, our perception of value, and even influence the choices that we make. For this reason, understanding color psychology is crucial for the success of your website and its content.
Are you considering how your design and color palette influences your audience? A poor color choice can negatively change the impact of your message. Get it wrong and your messages may be avoided entirely. There’s no absolute right color choice you should make, as the way we interpret colors and their meanings is dependent on a host of factors. However, here are a few tips and considerations to help you with your selection:
Research has found that color appropriateness in relation to the product is much more important than the individual color itself. For example, someone in the market for a motorcycle would probably shy away from brands that use pink or glittery color schemes.
Choose colors that connect with your customers’ perceptions of your brand’s personality. Certain colors do align with more specific traits and it’s important that the ones you choose support the personality you want to portray, but colors aren’t exclusive to single traits. For example, green can allude to the ruggedness and environment (Timberland’s G.R.E.E.N standard) or to money (Mint.com).
Emotions people associate with color can change depending on their individual, cultural or religious backgrounds. Here are some typical associations western cultures make with color:
- Black: sophistication and power
- White: cleanliness, sophistication, virtue
- Red: courage, power, strength; can also stimulate appetite
- Blue: calmness, peace, trust, safety
- Yellow: optimism, happiness
- Green: balance, sustainability growth
- Purple: royalty, spiritual awareness, luxury
- Orange: friendliness, comfort, and food
- Pink: tranquility, femininity, sexuality
Contrast matters. People often assume that difference in color is what creates contrast, but that isn’t true. Two colors can be completely different but have no contrast because their tone is the same. An easy way to test your color contrast is to convert it to grayscale. Generally, high contrast is the best choice for important content. Dark on light or light on dark may not be very exciting, but it is legible to your users. Keep in mind, however, that if everything is in high contrast, nothing will stand out.
People like simplicity. Each color adds or takes away from your content. Too many colors make for a confusing message. Choose 2 or 3 colors to make your content easier to interpret and understand. The color wheel is a great tool for helping you make this choice.
There are a few different types of geometric relationships on the color wheel that make up what is known as “color harmony.”
- Complementary: colors opposite to each other on the color wheel
- Analogous: colors that sit next to each other. These are “related” colors that create pleasing and relaxed visuals when used together. They don’t stand out from one another, but can create subtle and beautiful content. You may need to add a complementary color to make a particular item stand out.
- Triad: a color combination made of three colors that are evenly spaced around the color wheel
- Split-complementary: Choose one color as your base, and combine with two complementary colors adjacent to its opposite
- Rectangle: a color combination made up of four colors in complementary pairs
- Square: similar to a rectangle palette, but the two sets of complementary pairs are colors evenly spaced around the circle
Caution: Color Blindness
Individuals with color blindness have a hard time distinguishing between certain colors. Red and green are two complementary colors that pose a common problem to people who are colorblind. Remember to use colors with high contrast and try to never use color as the sole information source to avoid any issues.
More resources:
Here are some tools you can use to help you choose a color palette for your site:
- colr.org – lets you upload an image and see the range of colors within that image
- colorblender – generates a set of five colors that will work well together
- Adobe Colour CC – lets you try out and create different color schemes
- Check my colours – lets you determine if you’re using the right color combinations in your web design
Want more? Sign up to get our newsletter delivered to your inbox the first Thursday of every month. Receive links to the latest web-related news and blog articles, best practices, and thought-leadership commentary.
Not Found? 404 Error Pages
What is a 404 (Not Found) Error page?
A 404 Error Page is essentially a non-existent page that returns a status code of 404. The 404 error is generated whenever a server can’t find the specified page.
How do 404 errors occur?
A 404 page can happen for a number of reasons. These reasons fall into two buckets: user errors or website glitches. Either way, an informative 404 page is the most effective solution.
A web server will typically generate a 404 Not Found web page when a user misspells a URL or attempts to follow a broken or dead link. 404 errors also occur when pages have been moved or deleted, the page has expired, or the page was blocked.
To find broken links on your site, check out Google Webmaster Tools (Crawl and Fetch). Here, you can find tools that can scan your entire website for 404 Error pages.
Why are 404 Error pages important?
One of the biggest mistakes you could make when you launch a new website is ignoring all of the links, pages, and content from your old website. If Google has Site Links indexed and listed for a website and the navigation menu changes, Google considers these to be broken links. Google will then remove the links and lower the overall ranking of your website in its Search Engine. Any links to your site from other blogs or directories will also break, and you can expect your site to take the hit.
To avoid the headache, make sure to use error pages! Adding 301 Redirects and 404 Error pages can ensure that you don’t lose business because of an upgrade to your site. A 301 Redirect is a permanent redirect which passes between 90-99% of link ranking value to the new page. This is the perhaps the best way to retain online marketing efforts from old websites. If you have redesigned, added or removed content from your site, a custom 404 Error page is essential to direct site visitors to content on your new site when they’re looking for content from your old site.
A customized 404 Error page is an advantage for your site. It can help visitors find the information they were looking for and provides them with a much better overall user experience.
What should I include on my 404 Error page?
When a user lands on an error page that doesn’t contain any helpful content, it’s very likely they’ll navigate away from your site. To avoid frustrating site users and losing out on potential business, we recommend developing a custom 404 page.
The typical content a user sees when they reach a 404 Error page is a “page not found” message. This doesn’t provide users when any helpful information or instructions as to where to go from that point. To minimize visitor loss, a good 404 Error page provides a clear, helpful message that informs the user that the page they’re looking for can’t be found and points them in the right direction. You may want to ask the user to re-check the URL they’ve entered.
It’s also recommended that you use an error page that has been designed to look like the rest of your website. Maintain the main navigation menu, logo, fonts and colors. If the 404 page looks drastically different from the rest of your site, the user may become confused and abandon the site all together.
To prevent a visitor from leaving your site, include links or other elements that requires the user to take action. Include a link to your home page in addition to your main navigation menu. You can also provide a few key links to your most popular categories or pages on the site. If you have one, feature a link to your site map or search function. This will help the visitor find exactly what they were looking for. Here’s a good example of a 404 Error page with a search function from MailChimp.
To avoid having your 404 Error page appear in Google search results, make sure your webserver returns an actual 404 HTTP status code when a missing page is requested.
It’s also a good practice to ask site users to report a broken link on the 404 Error page so consider including a link to your contact page or email address.
Build a better website and stop turning visitors away with your 404 Error pages. To learn more, contact Sanmita today!
Let us know what you think of this blog post in the comments section. We’d love to hear from you!
Texas Wesleyan Ups Responsive Design
As mobile use surges, our partners at Texas Wesleyan University are making a strong commitment to be mobile-friendly. In partnership with Sanmita, Texas Wesleyan is upgrading its entire website to adapt to any device and screen size. We are thrilled to do more with our excellent partners at Texas Wesleyan!
Sanmita is redeveloping the underlying architecture of the Texas Wesleyan website to allow the entire site to be responsive. This is our latest project with Texas Wesleyan as the school upgrades its web products. Recently, Sanmita converted the university’s homepage and admissions section to be responsive. We are also developing an interactive calendar feature that will have the look and feel of a mobile app. The calendar will be integrated into the website, eliminating any obstacle of downloading an app to use the feature.
Texas Wesleyan’s moves come at a time when it is critical for higher education to be mobile-friendly. Mobile is becoming an essential tool in higher ed marketing and recruiting. A survey of college students shows 89% own a smartphone. Younger Americans are increasingly using their mobile devices for web browsing; In 2013, 68% of prospective students said they visited college websites on a mobile device. A responsive site helps ensure these mobile-savvy students will have a positive user experience and easily access essential information. Texas Wesleyan University understands these trends and wants its website to meet these demands.