UI Elements: Logo Placement, Sliders, and Forms | How to Use a UI Kit

You’ve got fonts and buttons for your UI kit, but what other UI elements can you add to make sure your user interface design is the best it can be? Read on to learn three more UI kit elements to super-charge your website’s user experience.

This post is part 3 of 4 in our How to Use a UI Kit for the Best User Experience | Web Design Principles ultimate guide.

You’ve got the basic UI elements down, but what others should you consider when you’re developing a UI design kit? We suggest optimizing your logo placement, as well as including rules about slider and form design styles in your kit.

Remember, only start with these user interface elements if you’ve chosen your font and button styles first!

3 UI Elements to Improve Your UI Design Kit | User Interface Examples

Adding notes about the visual structure about your user interface (i.e., logo placement, sliders, and form design) to your UI kit can help keep your UI elements evergreen–without having to revisit or make changes every time you hire a developer to create a new landing page.

Logo Placement

While you may be tempted to centralize your logo – unless you have a very compelling reason to do so, researchers recommend you always place your logo in the top left corner of your web page.

Imagine how frustrating it would be to find yourself on a landing page with no way to get back to where you came from?

That’s why we recommend that your logo be clickable, and should ultimately lead users back to your homepage. This is a common function known to most websites, which means users actually expect this–whereas ‘untrained’ users won’t notice. There’s really no down-side.

Logo size is also important. The rule of thumb with logo placement is that you want it to align with your header / navigation bar. If the logo is too big, the menu will expand and could throw off your overall design efforts.

Because your menu is one of the first things visitors see on arriving at your page, a clean and aligned header logo is vital to your overall UI impact.

“What if I want to have my logo elsewhere?”

That’s fine too, just make sure you keep the upper left logo. Say you want to add authority or proof (i.e. client logos) to your page, keep these proportional to other design elements.

We recommend you avoid overwhelming your text or buttons with logos–and vice versa.

And of course, if you do want a center logo, it’s OK–just not as optimal as the left-aligned positioning.

Sliders

Not familiar with the slider UI design elements? There might be a reason for that.

Recently, usability studies have shown that the use of sliders can negatively impact user experience. They allegedly ‘annoy users’ and ‘reduce visibility’ of presented content.

Researchers even attest that visiting users have banner blindness–meaning they will subconsciously ignore what’s being presented on a slider UI element.

So, while sliders are designed to present either text, images, or video(s) in a ‘sliding’ fashion across your webpage, and while these ‘frames’ can be used to promote new products, services, or upcoming events, we don’t recommend you use these types of user interface elements on your pages very often.

Not only do sliders require extra code, and tend to slow page load times, but sliders are frustrating for users. They change too fast, or not fast enough. The navigation buttons are too small or only seen when the cursor hovers over them.

“Avoid putting sliders at the top of pages where you’re directing paid traffic. Thanks to the performance cost associated with sliders, you’ll end up losing the conversions you seek.”
 
– Pol Cousineau, The Digital Navigator

You’re better off using static images, videos, or text that don’t ‘disappear’ unless a user scrolls or clicks away from the page, and saving sliders for lower down.

At The Digital Navigator, we often replace slides with static HTML files unless clients insist–and even then we’ll suggest they put sliders lower on the page.

That said, there are some web page types where sliders are more appropriate.

For instance, if you want to add a testimonial block to a page that switches between quoted reviews, or if you have a photo gallery with too many photos to scroll through on a single page, a slider might be your best bet.

PS: As you begin creating your first web pages, don’t forget to keep this landing page checklist handy, to help you create high-converting landing pages for your site!

Download Free Landing Page Checklist

Forms

We think forms are one of the most important UI elements, but we left it to last to ensure you don’t skip the basics.

Why do we love forms? Because these are the lead magnets that get you the conversions and connections you’re looking for through your landing pages.

Users can submit requests for quotes, provide their email in exchange for content, or fill out a check-out form to purchase products on your website.

Since there are many types of forms, you can also get creative with where you want your forms to appear, and how you want them to look–so long as it matches the other elements of your UI design.

When you’re designing your forms, a good goal is to get contact information out of a lead. No one wants to spend a ton of time filling out forms, so here are a few key tips we recommend as you design form styles and tabs for your UI kit.

1. Only ask for what you absolutely need. Ask for the information you absolutely require to make a connection. The more asks that you make of the user, the more likely they are to drop off without completing the form. Even though more information leads to better quality leads, keeping things short and sweet increases your chances of conversion.
2. Explain why you need what you’re asking for. If you ask for sensitive information from a user, such as revenue or health-related information, explain why you need it with small print below the question, or a ‘pop-up’ help balloon to give users more info.
3. Make forms easy to use. Use larger fields that give plenty of space for the user to type and see what they’ve typed. Make sure forms are optimized for mobile, meaning you can easily click on a form field with ease. Consider using multiple choice options for simple questions at about four choices per question.
4. Include a clear “submit” button. Your submit button should be extremely clear, but the design for this button should have been built in your first steps to creating the UI elements for a UI design kit. Include a border and colors for your form that stand out from the background so it doesn’t blend in!

Form placement on the page is equally important to your UI design, and ultimately to your website’s user experience.

Our recommendation for landing pages specifically? Choose forms that require ‘two steps’ from the user. Have them click an on-page button, and then have the form appear on-page asking for email, name, and phone number.

Often, because the user has committed to clicking the form button, they are more likely to complete the form than if it statically appeared on the page. Make sure it is NOT easy to click outside of the form though–since if the form closes the user will have to start over.

All that known, for larger forms that ask five or more questions, you can embed form tabs in your website as a multi-step experience–kind of like taking a survey online. You can ask one or two questions per page, and then have the user proceed to the next portion of the form.

We suggest adding a progress bar if you are asking more than two pages of questions as well, which will help readers gauge how much more time they’ll need to add their responses.

Ultimately, you’ll want to place the form where it makes sense to the design of your page.

Usually we say to set it up as early as possible on the page, and even to include form-linked buttons if you have a long web page so they can easily return to the form if needed.

Making a checkout form or contact page form? We suggest leaving out the button, since it isn’t expected. Use multiple pages for long forms, but you wouldn’t make it a button. You would organize it as form step one, and then have it lead into form step two.

Use the UI Elements in Your Toolbox | 6 Fundamentals of a User Interface Design

So you’ve chosen some of the primary elements for your UI design kit; now you should be ready to implement the elements you’ve chosen alongside professional developers–or on your own as a website creator.

In the next chapter of this article series, we will talk about mock-ups and implementation–the final steps we use when we provide UI design help for our clients.

We’ll explore the importance of testing and feedback–and will touch base with our process to help you better understand how the whole thing works!

That said, if you’re looking for a simpler way to ramp up your UI design journey to get the best user experience for your business, we are always here to provide our expertise.

Whether you want to try exploring some of our free resource material to increase leads and sales, take a free masterclass, or want to talk to a member of our team about how we can support your UI journey–we’re here anytime you need us.

Talk with Us!

Until then, let’s keep learning about UI design kits, and how to use them.

This post is part 3 of 4 in our guide on How to Use a UI Kit for the Best User Experience | Web Design Principles. Click here to read Part 1: Your UI Kit: The Building Blocks for All Website Designs, Part 2: How to Use a UI Kit for the Best User Experience | Web Design Principles, or here to read Part 4: UI Mockups & Implementation to Decrease Design Costs.

FAQ