MENU

Blog Tag: home page

Tags

  • 8 Menu Types You Should Consider for Your Company Site

    The menu on your website sets the tone for all the other elements of your site. The right menu type creates an overall website hierarchy and also puts first-time visitors at ease, guiding them where you'd most like them to go.

    Once a user lands on a company website, about 50 percent of them use the navigation to get oriented with the website before moving forward. Your navigation structure is arguably one of the most crucial elements of your site.

    Choosing which menu type to use is as important as the colors and layout of your site. Here are eight menu types you should consider as you design or redesign your company website.

    1. Hamburger Menu

    You've probably noticed that more and more sites are using the hamburger icon like you'd see on your mobile device to indicate that there are more choices for navigation. A hamburger menu frees up valuable space you might wish to use for other elements while still allowing you to include important links you otherwise might not have room for.

    However, use this option very strategically. Some studies show that the use of a hamburger menu may hurt user experience (UX). If your audience is made up of older people, for example, they may avoid the hamburger icon. A mere 52 percent of those over 45 years of age know what the icon means.

    Big Spaceship offers a simplistic, almost mobile device approach to navigation on their landing page.

    Big Spaceship offers a simplistic, almost mobile device approach to navigation on their landing page. There's a round icon that says "menu." When you hover over it, the icon animates into a hamburger menu such as you'd see on your mobile device. Click on the hamburger menu, and you discover the options for contacting the advertising agency to get more information about working with them. This menu structure is simple and to the point.

    2. Menu Bar

    A menu bar is something you've likely seen frequently during your online journeys. It's a bar with navigation options that appears either horizontally across the top of the page or vertically to the side. It almost always appears above the fold and typically just under the site header. A menu bar tends to have a background with buttons or solid text on top.

    There are certain features that users expect to see in the navigation bar, so keep those in mind as you're choosing your navigation categories. For example, you'll need choices such as home, about us and contact.

    3. Mega Menu

    A mega menu drops down when the user hovers over one of the elements on the page. It's one main panel that offers all the main navigation options on the website. Think of it as a sitemap that's user-friendly. Mega menus are useful to sites that have a variety of categories with choices under each category.

    Reading truck body uses the mega menu option to highlight the products they provide.

    Reading Truck Body uses the mega menu option to highlight the products they provide. Under each main category, they offer a number of options. For example, service body trucks are available with aluminum service bodies, Cranemaster bodies or steel service bodies. The mega menu allows the company to keep their main navigation structure manageable while still showing the various styles available.

    4. Drop-Down Menu

    A drop-down menu is another way to organize a lot of categories in a way that doesn't overwhelm site visitors. Unlike the mega menu that needs a hover, the drop-down menu forces the user to take action, such as clicking on the title of the button. When the user clicks on the button, the rest of the menu appears under the button. You can still expand this menu to take up most of the page, or you can keep the choices directly under the button as a bulleted list.

    5. Animated Navigation Bar

    Another element you can add to your navigation bar that makes it more interactive is a bit of animation. For example, if the user hovers over one of the choices, the text color might change or the choice might expand slightly in size. Make the changes fairly simple so as not to bog down the speed of the site. A slight animation grabs the user's interest and makes them take action.

    jack donuts does a good job integrating just the right amount of animation in their navigation bar.

    Jack's Donuts does a good job integrating just the right amount of animation in their navigation bar. Upon a first look, the text is white. Hover over any of the choices, however, and the letters change to a deep purple to match the rest of their color scheme. For those who have animations turned off, an alt-text box pops up that has the title tag of the button inside.

    6. Separate Page Menu

    Some sites need a separate page for each category to cover all the many links on the site. You often see this type of structure with larger eCommerce retailers and blogs. For example, if you sell hats and have three dozen cowboy hat styles and two dozen fedoras, you aren't going to put those links on your homepage. What you would do is have a button for fedoras and create a page that lists the different fedoras with links to more intensive descriptions and photos of each.

    7. Circular Timeline Navigation

    Do you want to get a little creative with your navigation? Circular timeline navigation works particularly well for history-based choices and to tell the story of your company from the beginning to now. A circle puts the focus on your navigation, making it part of the entire screen rather than the top or side of your page.

    BryBry received a nod as one of the best in navigation designs from Awwwards.

    BryBry received a nod as one of the best in navigation designs from Awwwards. The navigation is certainly unique in that it plays as a video, and you have to click and hold to navigate where you wish to go. There are some drawbacks to this type of creative navigation, such as confusion on the part of the user. A better solution might be to put navigation in a circular layout but lose the video component of having to hold to go to a new page.

    8. Fixed Navigation

    Want to keep navigation available at all times? Create a fixed navigation bar that drops down as the user reads down the page. A fixed navigation bar is particularly helpful on sites with lengthy content pieces. If the user suddenly decides to sign up for your services, for example, they can get to your services page with a quick click of the button rather than having to scroll all the way back up to the top of the page.

    Menu Types

    The above are just a few of the menu types available for your website navigation. The best menu type to use is the one that matches the overall tone and purpose of your site. You may even find that combining a couple of different models has the best results. Try out a few different styles, do some A/B testing and see which performs best with your site visitors.

    Lexie 1

    Guest Blog Author: Lexie Lu

    Lexie Lu is a freelance UX designer and blogger. She keeps up with the latest web design trends and always has some coffee nearby. She writes on Design Roast and can be followed on Twitter @lexieludesigner.

    Read more

  • 8 Rules for Designing Call-to-Action Bars

    A call-to-action (CTA) bar is a widget area on your page, typically in a color that stands out from the rest of the design and invites visitors to take an action. Using anchor text in your call to action can increase your conversion rate by as much as 121 percent. Call to actions matter, and the way you deliver them matters.

    You already know that UX is extremely important – the user experience is everything if you want visitors to stay on your site. Figuring out the best way to present even a CTA bar can mean the difference between strong conversions and weak ones. If you aren’t quite sure how to utilize a CTA bar, here are eight rules you can follow to make sure yours is as effective as possible.

    Read more

  • Building a Website – 5 Keys to an Effective Homepage

    home pageYou might have heard that ‘first impressions are lasting impressions’. This is true for businesses as well as their websites. Your homepage should look professional to promote trust. When a potential customer visits your website, they should be able to identify the products and services which you offer immediately. Many websites lack in providing their users with clear information about their products and offerings. If you follow the five tips for an effective home page below, you will be on your way to generating more potential customers from your existing traffic.

    Read more

  • Building a Website – Creating Effective Calls to Action

    call to actionA call to action is a significant part of any website which is closely related to the objectives and audience of a company or organization. It is not only important for all websites including blogs, not only ecommerce websites. Every website has an objective for its visitor and calls to action nudge users to complete that objective.

    Benefits of Effective Call to Actions

    An effective call to action provides the following benefits to your website:

    • Provides focus to your site
    • Serves as a way to measure the success rate of your website
    • Provides direction to your website visitors

    Read more

  • Building a Website – What is a "Bounce"?

    Trampoline bounceOn a website, a 'bounce' occurs when people visit your website and only view one page. Google Analytics shows the ‘bounce rate’, which is the percentage of people who leave your website after visiting a single page. A high bounce rate is not a good thing. If your bounce rate is high, something is wrong, and you need to take appropriate measures to reduce it.

    Most visitors will likely arrive on your home page, and several things need to happen in just a few seconds. Unless the visitor was searching specifically for your company, then they should be able to make these three connections in 5 to 7 seconds:

    Read more

  • How to Improve Your Site's UX in One Day

    The user experience is one of the most important things to focus on if you want to grab — and keep — your site visitors’ attention. In the modern digital economy, a website is one of the most powerful tools you have to promote your business. The last thing you want is a site that is cumbersome to the user or doesn't hit all the right marks. You have one opportunity to reach the person who lands on your page.

    In fact, the average site visitor only takes seven seconds to make up their mind about a site before potentially bouncing away. Creating a site with good UX is one of the quickest ways to improve your bounce rates and keep visitors coming back time and again. Here are six ways to improve your site’s UX in a single day.

    1. Add More White Space

    Creating more space between blocks of text and/or images makes everything easier to read, which can add to the overall function of your site. Stop trying to cram everything onto your landing page. The focus of your landing page should be pretty narrow for the reader.

    we are sofa is a good example of using whitespace

    Adding white space around your text and titles improves reader attention by about 20 percent, and makes your site feel updated and welcoming. A good example of a design with a nice amount of white space is We Were Sofa. Notice how the simple design has plenty of space around images and headlines, which allows site visitors to spot what they are looking for easily.

    2. Speed Up Your Page

    One of the elements that will impact your UX is how fast pages load. Most site visitors will wait just a few seconds for a page to load. A delay of a mere two seconds can send your abandonment rates soaring up to 87 percent, which can truly impact your conversions.

    amazon.com is an example of a website that contains fast page load speeds

    When you think of some of the biggest online retailers, what is one thing they have in common? Amazon and Walmart.com both load at lightning-fast speeds. People are busy. They want their online shopping experience to be quick and easy.

    3. Add an FAQ Page

    An FAQ page can help with any anxiety a consumer might have about purchasing your product and expand on information not covered in your product description page. If you’re hearing the same questions from customers over and over again, it’s smart to go ahead and create an FAQ page. This simple step allows consumers to find answers themselves, instead of having to wait on a reply.

    glass.com is a good example of a website that contains a well written FAQ page

    An FAQ also shows you are willing to be transparent, which can add a lot of credibility to your site. Glass.com has an excellent example of an FAQ page. This FAQ outlines everything from fees to ways to get discounts.

    4. Try Out Different Call-to-Action Buttons

    You already know the right call to action can entice visitors to convert into customers, but before you unveil your CTA, you should first try some A/B/C testing with different versions of it to see what is most effective with your target audience.

    For example, try varying the color, size and wording of the buttons. Once you figure out what works best with your audience, you can easily add highly effective CTAs in a single day, driving visitors to the place you want them to reach on your website.

    5. Make Your Site Responsive

    In 2015, mobile traffic grew globally by 74 percent, which means creating a responsive site is now essential for reaching all those people browsing the Internet on their phones or tablets. There are several steps you can take in a single day to create a more responsive site. First, you should check out how your site looks on tablets, iOS devices and Android phones.

    Do the images adjust to these smaller screen sizes? Is the text legible? Can you still navigate through the site with the menus? It is important to understand how your site adapts to each size of screen.

    If your site is running on WordPress, you can try a few plugins that will help with mobile responsiveness. When choosing the size of headers and other elements on the page, use percentages rather than pixels to allow the design to adapt easily. When in doubt, pull in a professional designer to help you fix any unresponsive features so you don’t miss out on traffic from anywhere.

    6. Readability

    The average site visitor is juggling a lot of different responsibilities. For example, a parent probably put in at least eight hours at the office, ran errands at lunch, went and picked the kids up from school and threw food in the slow cooker for later. Then, there were sports practices, homework or possibly a school event to attend. By the time they got home, they barely had time to eat, clean up the dishes and collapse onto the couch for a few minutes of Internet surfing.

    People’s brains are overloaded with an avalanche of information. They want to be able to quickly skim over information and get only the main points of what they need. It is vital to make your pages readable. You can do this with clear headers and text broken into short paragraphs. Bullet points make for “skimmable” reading material as well. Keep it short, to the point and easy to skim, and your readers will thank you.

    Making your site more user-friendly doesn’t have to involve a lot of complicated coding. A few simple fixes can make a world of difference in the UX of your website. The goal is to get visitors to stay and keep them coming back, so think about why you stay on the websites you visit and how your target audience lines up.

    Lexie Lu

    Guest Blog Author: Lexie Lu

    Lexie Lu is a freelance UX designer and blogger. She keeps up with the latest web design trends and always has a cup in close proximity. She writes on Design Roast and can be followed on Twitter @lexieludesigner.

    Read more

  • How to Instill a Positive Company Culture and Receive a Strong Return

    Company Culture

    Millennials have entered the workforce, and generational stereotypes may create a clash that isn’t beneficial for positive work culture. At the same time, the generation labeled “narcissistic” isn’t unreasonable with all of their desires, such as requesting a flexible schedule. Their willingness to speak up encourages other generations to do the same.

    Companies need to avoid negative assumptions, and find out how to empower their new hires and existing employees in a growing and aging job market:

    Read more

  • Multiple Locations Does Not Mean Multiple Websites

    Whether you run a huge corporation with locations all over the world, or you started a small business that has expanded into neighboring towns, centralizing all your operations into one website simply makes sense. Not only will you reduce costs in design and web hosting fees, but customers of one location might be interested in other locations.

    Creating a separate website for each location is a bit old school, and designers did use that model once upon a time. But, with modern location tools and the ability to segment websites, it is less troublesome to serve up unique pages for each location while keeping everything on one website. Google is also shifting the way that it looks at keywords, domains and websites so that it is not as necessary as it once was to ensure you use a keyword specific to that location.

    Read more

  • Start Up Business - 5 Useful Web Services to Go with Your Business Website

    useful web servicesAre you an online business owner? If so, you must keep track of your website performance using online web services. A lot of website design tools are available online that can assist with analyzing your site.

    However, the problem is that not all of them are useful — or even effective.

    In order to save you time, we have listed some of the most useful web services for a business website.

    Read more

  • What's the Difference Between PMS, CMYK and RGB Colors?

    color profilesBefore you reach out to a designer or graphic artist, you need to consider a few things. First, you must know what you want from them, which you can show with a sample image or existing product. Second, what kind of image or content you need regarding color, format and size.

    Format and size are best left to the designer, as they’ll make sure you’re taken care of, provided you offer the right details. The color profile you need for the image, however, should be designated on your end. If you happen to be a graphic artist or designer, then you need to know what each of the profiles is used for.

    Read more

Our Before & After Designs

Look at what a difference a website redesign makes!

Before
jimromanonline.com 600x400 After

- Before and After- jimromanonline.com