UX Movement http://uxmovement.com User Experience Movement Sun, 25 Jun 2017 12:50:17 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.15 5 Common Design Mistakes on Navigation Bar Buttonshttp://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/ http://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/#comments Wed, 29 Mar 2017 17:40:50 +0000 http://uxmovement.com/?p=10222

The navigation bar is one of the most important elements on a site. Users rely on it to find the information they need. When designers don’t design navigation bar buttons correctly they force more work on the user.

This can lead to users getting lost and not knowing where they are in the navigation flow. It can also make it hard for them to read the labels and click buttons.

Below are the 5 most common mistakes designers make on navigation bar buttons. If you’re making these mistakes, it’s time to fix your navigation bar.

1. Not Highlighting the Selected Button

Many designers fail to highlight the selected button on their navigation bar. When users click on a button, they need visual feedback on what they selected.

Without it, they won’t know where they are in their task flow. They could mistake the page they’re on for another similar looking page.


Use both shape and color contrast to highlight the selected button. Using color only may make it hard for colorblind users to distinguish it.

The standard way to highlight with shape is to place a strong underline under the label. You could also place an outline around the label. But make sure it doesn’t compete with any call to action buttons in the bar.

The button label should also appear as the main page heading. But highlighting it in the navigation bar makes it extra clear to prevent any confusion.

2. Low Color Contrast on Selected Button

Many sites use low color contrast to distinguish the selected button. This is a mistake because it slows users down from recognizing where they are in the site hierarchy.


The low color contrast makes the button label hard to read. This forces the user to have to recall what they clicked. It’s much faster if users can recognize the selected button through a visual cue.

The selected button should have the highest color contrast of all the buttons. This allows users to recognize the active button at a quick glance.

Use a contrast checker to get the contrast ratio between the button label and background.

3. Low Color Contrast on Inactive Buttons

The color contrast of inactive buttons should have lower contrast than the selected. But not so low that the labels are hard to read. Too low of contrast can make users miss buttons and think they are disabled.


4. Not Making Area Around Label Clickable

Navigation bar buttons have whitespace around it that separates it from other buttons. You should make each button’s peripheral whitespace a clickable area. This will give the buttons a larger click target so that users can navigate faster.


5. No Hover and Focus Effect on Buttons

Putting a hover effect on your navigation buttons makes them easier to click. This allows users to know when they are in a clickable area. Without a hover effect, users will assume they always have to click the button label to activate it.

Not every user uses a mouse. Screen reader users who use a keyboard to navigate need a focus effect when they tab between options. The focus effect is a good accessibility practice for all types of clickable elements.

Treat Navigation Bar Buttons Right

The navigation bar is often the first thing the user clicks on a site. Users need clear visual feedback when they click a button. And they need a visual cue of what button they clicked afterwards.

Make your buttons intuitive by fixing or avoiding these common mistakes. No longer should designers neglect their navigation bar buttons. Giving them proper care and attention will make your site a breeze to navigate.

]]> http://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/feed/ 2
Squarespace: Build a Beautiful Site in Half the Timehttp://uxmovement.com/sponsors/squarespace-build-a-beautiful-site-in-half-the-time/ http://uxmovement.com/sponsors/squarespace-build-a-beautiful-site-in-half-the-time/#comments Tue, 21 Mar 2017 15:27:57 +0000 http://uxmovement.com/?p=10206

Who wants to install software, apply security patches and manage bandwidth when starting a site? Nobody.
Squarespace is your all-in-one solution that removes these headaches. All you have to do is upload your content, customize your design and you’re ready to go.

Think of Squarespace as your very own IT department, with free, unlimited hosting, top-of-the-line security, an enterprise-grade infrastructure, and around-the-clock support.

Award Winning Templates

Squarespace websites look stunning no matter what device or screen. Their award-winning templates are the most beautiful way to present your brand or business.

They offer more than 45 beautifully designed templates to choose from. Each come with hundreds of customizable features that you can style it to look any way you want.



Secure Your Own Domain

Squarespace domains start at $20/year and max out at $70/year. The domain will always renew at the same price with no hidden fees. (Free custom domain for one year with annual website or online store purchase).

They’ll generate and configure SSL certificates for your domain for free. SSL means connections to your Squarespace site are secure, and your rankings on Google will be boosted.

At Squarespace, they believe you should be able to control how much of your personal information is shared online. That’s why they will automatically provide WHOIS privacy free of charge.

24/7 Customer Support

Unlike many of their competitors, their award-winning customer care team serves customers 24/7 via email and live chat. Get personalized support from highly-trained professionals, designers and engineers who have a deep knowledge of Squarespace.

Get Started with Squarespace

Start your free trial today. No credit card required. When you sign up, use the coupon code ‘UXMOVEMENT’ for 10% off your first website or domain purchase.


sponsored via syndicate

]]> http://uxmovement.com/sponsors/squarespace-build-a-beautiful-site-in-half-the-time/feed/ 0 8 Best Job Boards for UX Designershttp://uxmovement.com/resources/8-best-job-boards-for-ux-designers/ http://uxmovement.com/resources/8-best-job-boards-for-ux-designers/#comments Tue, 14 Mar 2017 22:33:36 +0000 http://uxmovement.com/?p=10184

]]> Finding a job as a UX designer is no easy task if you don’t know where to look. There are many job search sites, but many of them display cluttered and hard to read results. They also don’t offer enough UX design jobs to choose from. Below are the best job boards on the web for finding your next UX design job.


Authentic Jobs















]]> http://uxmovement.com/resources/8-best-job-boards-for-ux-designers/feed/ 0 Depositphotos: Download Pro Stock Photos for Any Projecthttp://uxmovement.com/sponsors/depositphotos-download-pro-stock-photos-for-any-project/ http://uxmovement.com/sponsors/depositphotos-download-pro-stock-photos-for-any-project/#comments Tue, 21 Feb 2017 17:00:26 +0000 http://uxmovement.com/?p=10143

]]> A professional website not only has great content but great photos as well. Photography has become more important than ever in web design, advertising and social media. If you’re not using professional photos on your site, you’re not communicating with users on a deep, emotional level.

Regardless of the field you work in, photography can help you improve user engagement and even acquire new clients. If you’re ready to go on this journey, you need a useful resource to turn to.

Despositphotos is one of the largest stock photo banks in the world with over 50 million files. It’s the place to go when you have a constant need for visual content. The website not only sells photographs but also videos, vectors and illustrations. It has everything you need in one place for any type of project.

Professional Stock Photos Vs. Outdated Stock Photos

When choosing stock photography, look for professional photos instead of outdated ones. They are better in quality and give a better impression of your website.

Professional stock photos are more modern and authentic looking because they use natural lighting in a natural environment. This makes the photos relatable and popular with clients.

Outdated stock photos have an artificial and phony vibe to them. They look unnatural and are hard to relate to. These images don’t contribute to your message and probably won’t be given a second glance.

pro_stock_1Source: Despositphotos
pro_stock_2Source: Despositphotos
pro_stock_3Source: Despositphotos

Download Professional Stock Photos

Sign up for Despositphotos. They offer a flexible plan of 30 images per month for $29. If 30 are not enough, you can download more at $1 per image. No download limits or expiration date. Keep your plan active, and all unused downloads will transfer to the next month.


sponsored via syndicate

]]> http://uxmovement.com/sponsors/depositphotos-download-pro-stock-photos-for-any-project/feed/ 1 Why Your Form Only Needs One Name Fieldhttp://uxmovement.com/forms/why-your-form-only-needs-one-name-field/ http://uxmovement.com/forms/why-your-form-only-needs-one-name-field/#comments Tue, 14 Feb 2017 13:34:37 +0000 http://uxmovement.com/?p=10134

]]> Does your form have two separate fields for first name and last name? If it does, you are making it harder for users to fill out your form. But there’s a better way.

Split Name Fields Cause Problems

Not every user has a first and last name. Their cultural background determines how their name is formed. For example, if you’re from Latin America, chances are that you have two last names, one from each parent. If you’re Chinese, your family name is first, personal name is last, and they’re always used together.

Requiring every user to type their name into two separate fields is an impossible task. Some users will be able to do it, but others won’t know how to split their name into first and last. These users will get confused, leave a name field blank and won’t be able to submit the form.

Single “Full Name” Field

A single field labeled “Full Name” is more culturally inclusive. Full name may include first, middle, last, family and other given names. It allows users to type in their name without splitting them into first and last. This is aligned with how users perceive their name as a single coherent entity.


Sometimes you may want to split name fields so you can refer to users without using their full name. Instead of asking for a first name, you can give users a “What should we call you?” field. This avoids the first and last name confusion and allows users to specify how to address them.

Cultural Inclusivity

The structure of a name is not the same across cultures. Users who visit your site will consist of a broad range of people from different countries. Your name field should be culturally inclusive so that no one struggles to fill out your form. With most things in life two is better than one. But when it comes to name fields one is better than two.

]]> http://uxmovement.com/forms/why-your-form-only-needs-one-name-field/feed/ 10