UX Movement http://uxmovement.com User Experience Movement Sat, 29 Jul 2017 19:21:56 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.15 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 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 building a website? Nobody does. 
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.

squarespace_macbook

squarespace_ipad

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 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.

jobs_authentic

Authentic Jobs

jobs_coroflot

Coroflot

jobs_krop

Krop

jobs_angellist

AngelList

jobs_linkedin

LinkedIn

designerhangout

DesignerHangout

justuxjobs

JustUXJobs

jobs_uxjobsboard

UXJobsBoard


]]> http://uxmovement.com/resources/8-best-job-boards-for-ux-designers/feed/ 0