UX Movement http://uxmovement.com User Experience Movement Thu, 19 Oct 2017 16:50:48 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.16 Why the Email Confirmation Field Must Diehttp://uxmovement.com/forms/why-the-email-confirmation-field-must-die/ http://uxmovement.com/forms/why-the-email-confirmation-field-must-die/#comments Tue, 03 Oct 2017 15:20:32 +0000 http://uxmovement.com/?p=10488

]]>
The email address is one of the most corrected form fields. It’s easy to mistype because the input contains a long string of various characters. This can lead to users submitting an incorrect email address.

Email Confirmation Problems

Designers believe they can prevent this by adding an email confirmation field. This may prevent some incorrect submissions, but not all, and at a cost.

email-confirmation-field

Many users tend to copy and paste their email field input into the confirmation field. This defeats the purpose of the confirmation field because users can end up pasting an incorrect email. The confirmation field does nothing to prevent them from mistyping their email.

One research study discovered that “60% of the test subjects consistently copy/pasted their e-mail when they retyped it in a confirmation field”. Users copy and paste their email often because retyping it is too much work. The users also didn’t believe that they would mistype their email but were surprised when they did.

The email confirmation field does not solve the incorrect submission problem. Not only that, but it forces users to do more work than they’d rather do. Users can end up making typing errors in both fields. This will cause them to spend more time correcting their input which can frustrate them.

Redesigning the Email Field

If you want to increase correct email submissions, you need to redesign your email field. You’ll need to change your email field’s placement, sizing and labeling.

Place the Email Field First

Filling out forms is a mundane task. Users tend to rush through them because they want to move on to their next task. But when users rush they’re more likely to make typing errors.

Placing the email field first can prevent this. This is because it’s the start of the form and they don’t feel the need to rush. Placing the email field in the middle or at the end of your form is not ideal because that’s when users get tired of typing and are most eager to finish.

email-field-first

Increase the Size of the Field Input

The email field is the most mistyped field on sign up forms. One study illustrates this in their data table at the bottom. It’s important to increase the size of the email field to help users notice their typing errors.

Many forms use too small of a font size for their email field input. If users make a typing error, it’s harder to notice. When the font size of your field input is larger, users are able to identify specific characters easier. This will help them spot typing errors at a glance when they check their input.

You can make your email field larger than the others but that may give your fields inconsistent styling. Instead, you should make the email field expand when the user selects it. The font size of the input should also appear larger. When the user unselects the email field it should return to its normal size.

Here’s an example of what this looks like.

email-field-input

Emphasize Input Accuracy in the Field Label

Most designers label their email field “Email”. While this is short and straightforward, it doesn’t emphasize the importance of input accuracy. If you want users to double check their input, your field label should stress that.

A field label such as “Email (make sure it’s correct)” reminds users to check their input after they type it. This is important to emphasize because most users don’t believe they’ll mistype their email, so they don’t bother checking their input.

email-field-label

All You Need Is Clarity

Not all form data have the same level of complexity. The email field deserves special treatment because its input is more complex than other fields. It contains alphanumeric characters and symbols that make it easier to mistype.

It’s time to take a new approach on how you design the email field. The solution is not another field to fill out, but to give clarity to the existing field. Prominent placement, larger input size and a specific label are what you need. Make this change and kill the email confirmation field once and for all.

___

If you liked this article please visit our sponsor


]]>
http://uxmovement.com/forms/why-the-email-confirmation-field-must-die/feed/ 15
Stockio: Your Free Portfolio of Design Resourceshttp://uxmovement.com/sponsors/stockio-your-free-portfolio-of-design-resources/ http://uxmovement.com/sponsors/stockio-your-free-portfolio-of-design-resources/#comments Tue, 26 Sep 2017 14:38:04 +0000 http://uxmovement.com/?p=10455

]]>
A great user experience is not only about ease of use but also aesthetic appeal. The more appealing your site looks the more users will perceive it as easy to use. This is known as the aesthetic-usability effect.

Stockio is a library of design resources that can give your site the aesthetic appeal it needs. They offer free icons, designer fonts, vector patterns and photo/video backgrounds. And they’re all free for personal and commercial use.

Use their photo/video backgrounds for an immersive homepage or hero image.

boatcentral-site

Use their designer fonts and icons to make a professional logo for your site.

boatcentral-logo

Sign up for Stockio to build your own portfolio of design resources. You’ll be able to keep track of your downloaded files and favorited items for future use. Stockio is so useful that you’re not only going to use it once, but you’ll use it for many projects.

___

sponsored article


]]>
http://uxmovement.com/sponsors/stockio-your-free-portfolio-of-design-resources/feed/ 0
User Experience T-Shirts for the Communityhttp://uxmovement.com/products/user-experience-t-shirts-for-the-community/ http://uxmovement.com/products/user-experience-t-shirts-for-the-community/#comments Tue, 25 Jul 2017 16:04:53 +0000 http://uxmovement.com/?p=10392

]]>
You may have a fashionable wardrobe, but you don’t have shirts that show off what you do. If you’re proud of your field and profession you should. These user experience T-shirts are a great way for you to express yourself.
 
They’re all personally designed by me. I’ve partnered with Teespring for screen printing and delivery. The material is 100% combed ringspun cotton and feels softer than your regular, run-of-the-mill T-shirts. All proceeds will help support UX Movement.

UX ≠ UI

There’s often confusion between UX and UI. This shirt depicts the difference through iconography. UX and UI are part of the same circle, but not the same side.

The shirt represents this with UX on one side of a circle and UI on the other side. The icons along the periphery each symbolize a facet of their respective discipline.

Wearing this shirt means you understand the difference and can explain it to people who ask.

GET SHIRT ›

uxnotui-icons

Trust Me, I’m a User Experience Designer

Trust is a key factor when it comes to user experience design. It’s needed to sway your clients and team to follow your design recommendations. But others can’t trust you if you don’t trust yourself first.

This shirt empowers you to trust your design skills and experience. The icons around the words represent UX and are common to user interfaces.

Wearing this shirt means you trust yourself as a designer and that others should trust you too.

GET SHIRT ›

trustmeux

I Love UX

The “I Love NY” shirts are iconic. But this shirt is for those who love user experience more than New York. The letters “UX” are the perfect substitute for “NY” to capture your love in a classic design.

Wearing this shirt means you’re passionate about what you do which is rare. This will help you stand out from the crowd in a positive way.

GET SHIRT ›

iloveux

Your Website vs My Website

What’s the key difference between a good and bad website? It’s the simplicity and clarity of the content layout. This shirt illustrates that with wireframes.

One overwhelms users with carousel slides, dropdown menus, buttons, links and text. The other displays content in a clear and deferential way.

Wearing this shirt means that you believe good user experience is what makes a good website.

GET SHIRT ›

yourwebsitemywebsite


]]>
http://uxmovement.com/products/user-experience-t-shirts-for-the-community/feed/ 0
Why Mobile Menus Belong at the Bottom of the Screenhttp://uxmovement.com/mobile/why-mobile-menus-belong-at-the-bottom-of-the-screen/ http://uxmovement.com/mobile/why-mobile-menus-belong-at-the-bottom-of-the-screen/#comments Tue, 04 Jul 2017 13:09:11 +0000 http://uxmovement.com/?p=10349

]]>
The way you use your mobile phone can affect your brain.

A research study has found that daily mobile phone users have a larger somatosensory cortex. That’s the region of the brain that controls the thumbs.

Further research has found that most users use their phones with one hand. When they hold their phone, they’ll use either their right or left thumb to interact with the screen. The thumb is like the user’s mouse but with limitations.

The Thumb is the Mouse

On desktop devices, users use a mouse to interact with the screen. They can move their mouse to a navigation menu with ease. This is because the mouse does not constrain their wrist movement.

But when users hold a mobile phone, their thumb has a limited range of motion. There are certain areas of the screen they cannot reach. These areas will vary based on which hand they use to hold their phone and the size of the phone’s screen.

small-screen-thumb

(based on average hand size and grip span)

When you place a menu in a hard to reach area, users have to regrip their phone to move their thumb closer. Or, they have to use their other hand to interact with that area. This is extra work that can make navigating harder and slow down the user’s task.

Large Vs. Small Screen Phones

The top areas are becoming harder to reach as more users opt for large screen phones. Large screen phones (more than 5 inches) have lower reachability at the top than small screen phones (less than 5 inches).

large-screen-thumb

(based on average hand size and grip span)

Large screen phones also have low reachability in the corner opposite to the user’s thumb. Whether it’s the left or right corner will depend on which hand the user holds the phone with.

If they hold the phone in their left hand, their thumb will have trouble reaching the right corner. If they hold the phone in their right hand, their thumb will have trouble reaching the left corner.

In contrast, small screen phones have high reachability in the bottom corners. This is because the device is thin enough for the thumb to reach the corner.

The Law of Thumb Reachability

Designers can’t change how users hold their mobile phone. But they can change where they place the navigation menu. Most designers place the navigation menu at the top of the screen. While a convention on desktop, it doesn’t translate well to mobile.

mobile-thumb-reach

The hardest to reach areas for the thumb are at the top of the screen. Placing your menu at the top will make it harder for users to navigate your interface. Users use menus with great frequency. It’s necessary to place the menu within thumb’s reach. This will allow users to complete their tasks much faster.

Research has found that “regions within easy reach of the thumb were fastest and most comfortable”. In other words, the closer a target is to the thumb the faster it is to hit. The easiest to reach area for the thumb is the bottom of the screen. This is where your mobile menu should go.

thumb-reachable-menu

The bottom placement of the menu allows users to tap the hamburger icon and select an option much faster. Placing the menu at the top forces users to regrip their phone or use their other hand to navigate. This requires physical maneuvering and slows down task time.

When users tap the hamburger icon with their thumb, the menu will open from the bottom. The menu options closer to the bottom are within thumb reachability. But the menu options at the top of the screen are out of the thumb’s reach.

In a traditional menu you would place high priority options at the top. But for a bottom menu you should place high priority options at the bottom. This makes them quicker to reach and tap. The new menu hierarchy would start with lowest priority options at top and end with highest at bottom.

The Thumb Sweet Spot

The hand users hold their phone with will vary by preference. Which side should you place your menu then? The same research study discovered a “sweet spot that required movement primarily from the base of the thumb”. This means users did not have to stretch or bend either of their thumbs to reach the sweet spot.

mobile-thumb-sweet-spot

The sweet spot to place your menu is the bottom center of the phone. That’s the spot that’s easiest to reach for both left and right thumbs on small and large screen phones.

The sweet spot benefits large screen phone users more. Small screen phone users don’t have unreachable corners. But users may need to bend and stretch their thumbs to reach them.

As the trend of large screen phones grow, the thumb sweet spot seems more important to consider. The ideal is for users to navigate your interface with as little thumb movement as possible. This mechanical efficiency will lead to faster task completion.

Answering Common Criticisms

Any new recommendation that strays from traditional practice will get criticism. Placing the mobile menu at the bottom is not the norm. But it’s what should be the norm based on how users use mobile devices.

It’s clear that mobile menus at the top are hard to maneuver. But are there any drawbacks or conditions to following this new recommendation? Let’s answer the criticisms and see.

“The user will miss the mobile menu because it’s at the bottom and not the top where users are used to seeing the navigation.”

Yes, users are used to seeing the navigation bar at the top. But they’ve also seen it at the bottom on different mobile apps and devices before. A bottom navigation is not an unusual occurrence for mobile users.

mobile-bottom-bars

Bottom navigation is more of an unusual occurrence for desktop interfaces. A bottom navigation on desktop is easy to miss because the screen size is much larger. This makes it harder for users to view the screen as a whole.

It’s easier to spot a bottom navigation on mobile because the screen is much smaller. This allows users to get view the entire screen where they can spot the navigation bar with ease.

“The bottom navigation will get in the way of browser controls which is also at the bottom. The user can accidentally hit a browser button instead of the menu button.”

You won’t have browser controls that interfere with a bottom navigation on a native app. But a bottom navigation on a web app will have browser controls below it.

It’s possible that users will hit a browser button on accident. But that’s no different than them accidentally hitting a button that’s next to the intended button.

bottom-bar-padding

When two buttons are near each other there’s always a possibility for user error. That doesn’t mean designers should never place buttons next to each other. It means they should add padding between the buttons to prevent these mistakes.

You can do the same with the bottom navigation bar. Add padding between the menu icon and browser bar so that there’s visual separation. This will prevent accidental hits.

“It interferes with scrolling as the user swipes from the bottom. It can also distract users from viewing content.”

Users use their thumbs to scroll and their thumbs are closer to the bottom of the screen. This means they can hit the navigation bar when they scroll down a page. The bar can also distract users when they’re viewing content.

mobile-scrollup-bar

You can solve both of these issues by using a scrollup bar. This would hide the navigation bar when the user scrolls down the page. The bar would only show when the user scrolls back up. This is a common technique already used on mobile apps and browsers.

“It interferes with the call-to-action button on landing pages, which has higher priority than the navigation bar.”

An important call-to-action should be within thumb’s reach as well. But you don’t have to decide between the navigation bar or call-to-action button. You can put both at the bottom without interference if you use the scrollup bar.

If you don’t use a scrollup bar, you should weigh your goals. If your goal is to increase engagement, put a menu within thumb’s reach. if your goal is to increase conversions on a landing page, put a call-to-action button within thumb’s reach.

Thumb Function Dictates Menu Form

A bottom menu may look unusual compared to the more familiar top placement. But the latter ignores how the user’s thumb functions on mobile devices.

The thumb is the primary digit used to interact with mobile devices. This means thumb function should dictate menu form. Ignoring this principle leads to designing a menu that’s hard to use. A hard to use menu decreases user engagement and satisfaction.

The user experience designer’s goal is to make mobile navigation as fast and smooth as possible. Following the law of thumb reachability can make tasks faster and easier for users. Remove the obstacle of low thumb reachability with this simple design change.


]]>
http://uxmovement.com/mobile/why-mobile-menus-belong-at-the-bottom-of-the-screen/feed/ 17
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.

navbarbutton_highlighted

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.

navbarbutton_selected

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.

navbarbutton_inactive

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.

navbarbutton_peripheralarea

5. No Hover and Focus Effect on Buttons

Putting a hover effect on your navigation buttons makes them easier to click. This lets users know when their mouse cursor is in a clickable area. Without a hover effect, users will assume their cursor always needs to hit the text label to activate the button. This makes the hit target smaller which requires more precision from the user.

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.

Visual Cues on the Navigation Bar

The navigation bar is often the first thing the user clicks to navigate a site. Users need visual cues when they click a button so that they know where they are and where they can go.

Make your buttons intuitive by avoiding these common mistakes. Neglecting the visual cues on your navigation bar can affect user engagement. Without clear visual cues, users are navigating in the dark.


]]>
http://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/feed/ 2