NYX Ditech

Lets Talk!

Tag: UX debt

Categories
UI Design UX UX Design Web Design

7 Best Practices To Design Dropdown Menus

Dropdown Menus

Dropdown menus are an integral part of website design and user experience. A clean, well-structured dropdown menu helps navigate visitors through a website, narrow their choices and save screen space easily. It is widely used in navigation bars, search bars and tab bars. However, it’s a perplexing task to design simple, effective and attractive dropdown menus. Even the simplest looking components can be tricky some times when designing for usability. Here are some best practices for designing effective and user-friendly dropdown menus.

Avoid Long Dropdown Menus

Using dropdown menus in forms is quite apparent. Forms don’t take much space on the interface, all browsers support them, and users are acquainted with them. It’s all right if you have 10-12 option, but it could be overwhelming for users to navigate when they have to choose from more than 15 options. Users face a hard time reaching to what they’re looking for. Also, there are scrolling issues where the user has to keep the mouse cursor within the dropdown box. They may end up scrolling down the page instead. 

The most classic example for long dropdowns is the country selector which has more than 100 options typically. Generally, it sorts by alphabetical order, but sometimes the most popular countries are placed at the top. That may look like a convenient practice but can confuse the users sometimes. The dropdown menu isn’t the best choice in this instance. A text field option with autocomplete functionality is more user-friendly here. The user already knows his choice and can input it quickly.

Grey Out Disabled Options

This one is a no-brainer, but still gets missed out by many designers. If you have an option that is disabled or unavailable, it should not be removed but greyed out. If disabled items are removed, the interface loses spatial consistency, and it becomes more challenging for the user to learn. When you grey out the disabled or unavailable options, it is more purposeful and adds to the user experience. You may choose to show a tooltip to indicate the reason why that option is disabled and how to activate it.

Use Clear Hover States

Designing an “active” class for hovered menus keeps the attention where it belongs. Most designers use the ‘CSS :hover’ pseudo-class, which works great for actively-hovered links. However, keeping the main link highlighted when the user is hovering submenu links is also a good practice. It acts as a clear path of activity where users can glance at the menu and quickly determine which primary link is active and which sub-menu link hovers. You can design hover states with many techniques like font color changes, text underlines, background color changes, highlights, box shadows, and more. The primary objective is to keep the parent link active even when it’s not hovered directly.

Avoid Dropdown Menus Where Typing Works

There are many situations when typing might actually be convenient and faster than using a dropdown menu. For example, inputting the credit card expiry date or entering birth dates. It is definitely much faster to type the dd/mm/yy or mm/dd/yy formats, rather than scrolling through two dropdown menus and selecting the month and year. Although a free-form input field does require data validation, in some form at least, it’s still a better alternative from usability and convenience point of view.

Keep The Number Of Actions To A Minimum

A dropdown menu must be customized based on the information required. This ensures that the user takes a minimum number of actions. A classic example is the “date selection” field, where you would need 3 dropdown menus (month, day, and year) if a normal list menu is used. This can annoy and frustrate users. Instead, the menu components must be customized, and users must be able to enter the date using only one dropdown menu.

Make Seamless Dropdown Menus

Dropdown menus should appear seamlessly and without interruption. Dropdowns should load immediately. Many times website developers end up overloading the menu, making it too heavy for instantly loading upon hover. The last thing you want is users waiting for something to happen with their cursors on dropdown menu title. Transition effects like wipe down or fade can be the other options to display the change. They look really cool but ensure that the transition is quick and not disruptive.

Use Clear And Concise Labels

Labels on menu options initiate the action. Users choose the menu option based on their labels, so it’s vital to make them accurate and informative. It’s best to use sentence case in labels. Avoid uppercase letters. Keep your labels short and crisp. Concise labels that clearly indicate the purpose of the selection must be used. As part of best practices, use verbs for action menu items. It should describe the action that will occur. For links, use nouns to identify the page that the user will be directed to. Exclude articles in menu items; use “delete page”, instead of “delete the page”. Lastly, keep menu items to a single line of text. Don’t write a story there.

Using these best practices, you can design dropdown menus that are attractive, user-friendly and purposeful. For more, feel free to get in touch with our design experts.

Read about Mega Navigation menu here

Categories
Technology UX UX Design

Creating Fantastic Frictionless User Experience

Frictionless User Experience

The digital world has become super competitive, and it’s a real challenge for businesses to keep themselves ahead of the soaring competition. One of the key propellers of attaining success in the digital world is to offer exceptional, or if not that, at least a good user experience. Companies need to understand the context that aids in creating a smooth, frictionless user experience. Designers and developers have acknowledged the importance of becoming familiar with methods to develop frictionless user experiences.

What is Friction?

NO! We are not going to discuss the scientific definition of ‘friction’ here. In terms of design and user experience, friction is anything that prevents users from intuitively achieving their goals while they interact with a product. Friction is everything people complain about when they find technology challenging. High friction is one of the major causes of cart abandonment and high bounce rates.

Frictionless User Experience

Users don’t want to stress out themselves while browsing your website. They expect simplicity while interacting with your site. Frictionless designs are synonymous with simplicity as it ensures that everything is simplified for the users. A frictionless experience is the one wherein the user needs not to learn anything. Here, the interactions are very intuitive, and every action or operation is a natural, smooth process.

How to create a frictionless experience? 

The first and the foremost step for designers and developers is to deep dive into the user interaction process. They need to understand how a user interacts with a user interface. Understanding the user journey is the key. Also, friction doesn’t need to be always harmful; it can be useful at times. They must decide when friction can be helpful, where it can be harmful, and design the product accordingly. The team can indulge in user research and testing, by creating user flows, to identify the exact places where friction might occur. 

Avoiding Frictions

1. Don’t overload users with content or features

One of the most difficult tasks of user experience is to keep the users attentive and focused. With a strong focus, users can achieve their goals without taking too much effort. The problem rises when you bombard users with loads of content and features; they lose focus.

Get rid of anything unnecessary. Follow the simple yet powerful principle of minimalism, which states that less is always more. Prioritize your content and features and place them according to user expectations. 

You don’t need to put everything on a single page. Prioritize your content and place it according to user expectations. Divide your content and other elements into chunks. For example – break lengthy and complicated forms into a few simple forms and simplify the form filling process. 

2. Users must not be guessing anywhere, anytime

A lot of UIs lack the ability to provide apt and timely feedback from the system. If users initiate action and don’t receive acknowledgment of the same, they think that their request wasn’t delivered. Therefore, they keep trying again and again, which leads to what is known as ‘rapid clicks’.

Visual or audio feedbacks are the most effective forms of feedback. Also, the loading time of the feedbacks must be pretty quick. When users have to wait for content to load, they experience friction. When the users have to wait for a long time for the content to load, they start worrying whether the app is doing anything or it is stuck. It’s essential to provide information on how much time is required to complete the operation.

3. Keep the design clear and consistent

Clarity has a direct and positive impact on user expectations. When users are aware of what to expect, they happily interact with a product. Clearly label all the interactive elements, like buttons and all, with labels that describe their function. Avoid using jargon in labels and other places.

An inconsistency often creates confusion. When the same elements in UI look different in different parts of the app/website, it confuses your users. Maintaining a consistent design approach allows users to use their previous knowledge when interacting with a product.

Simplification of navigation is another way to impart clarity. Poor navigation adds a lot to user frustration. Users should be able to navigate from one place to another easily. The app’s navigation hierarchy, at all times, must tell the users – where they are.

4. Avoid too many steps

Too many steps might also cause unnecessary friction. Right from sign-up to individual operations, every step requires some amount of effort and thus can create friction. Get rid of all the extra steps in user flow and always keep the KISS design principle in mind when designing user flows.

Use default settings, as most users rarely change them. Also, use the data you have about your users to offer a personalized experience. Amazon and Netflix provide tailored recommendations based on previous purchases and viewing habits, which enhances the user experience.

5. Anticipate errors and handle them appropriately

An ideal app prevents the user from making errors by anticipating the errors upfront and eliminating them. Still, it’s not possible to eliminate all error situations. But, a clear help text, telling them the reason for the error as well as about how to resolve the issue, can be provided to them. When you already prepare yourself for the potential errors, you design better experiences. By validating user input and providing feedback as soon as possible, you help users to detect and fix problems.

Conclusion

If there are traces of friction during user interaction, the user experience will not be smooth and enjoyable. As a designer, you must always strive to identify all possible friction elements and get rid of all of them. Discuss more about your design needs with our team NOW!!

Interested in More About UX? You might like the difference between UX and CX. READ HERE

Categories
Brand & Identity UX Web Design

Some Tips to Get Rid of the UX Debt

UX Debt
UX Debt

A lot of times you will find yourself facing a situation wherein your product will show an inconsistent behavior or performance. This occurs due to the long-term sacrifices you have made over time for short-term gains, or what we call ‘UX debt’. In our previous article, we discussed Design Debt. We covered what it really means, its identification, impact and common causes. In this article, we will cover the ways through which you can erase UX debt most effectively and efficiently. It’s very common for a company to release a bunch of features in one go to gain market share as they focus on quick user acquisition. As a result, the cleanup work gets delayed and is pushed back for later sprints.

Getting rid of the UX debt takes time, and cannot be completed in one go. If you think that you can get rid of the UX debt in your next release, then you probably need to re-think. It’s best to create a plan and follow it meticulously to eliminate your debt. Follow the below-mentioned points to erase your UX debt:

Make a UX Debt Inventory

The first step towards erasing UX debt is to understand the debt. Whether you are a new hire or an existing team member, you must be aware of what you’re up against. This starts with creating an inventory.

For this, you need to roll up your sleeves and get your hands dirty. Use the product yourself and highlight anything you find unintuitive or confusing. Keep noting down your comments as you use the product. Another great way of performing this activity is by maintaining a spreadsheet within your team’s cloud folder and evaluating the heuristics together. The team can review the system based on some important criteria including findability, accessibility, clarity of communication, usefulness, credibility, learnability, overall aesthetics, persuasive design etc.

Evaluation process

You can create a clear picture of UX gaps by involving the whole team. The evaluation process may last a couple of weeks. Once the evaluation process is over, make sure you keep a realistic and manageable target date to slowly fill up the UX gaps.

This exercise is highly informative, however, you’re not the intended user. After conducting a UX debt inventory, you need to validate your findings by observing actual users and subject matter experts. This will help you better prioritize the work with product managers for the payback sprints or the backlog.

Prioritize Your Work

Once the UX debt inventory is ready, you must prioritize the tasks in order to address them in realistic stages.

The selection must consider a few factors:

1. How severe is the issue?

The severity of an issue must be the first factor to be considered as it may create a huge impact. How critical and big is the issue? Is it stopping users from doing their work? Is there a safety or security risk? If the issue is causing a potential customer to turn around and look to a competitor’s product, then you know that it is super critical. These kinds of issues must be right at the top of the to-do list.

Now, look at the flip side. It’s not necessary that only problems and roadblocks should be considered on high priority. If some improvements save hours of time in the course of a month, reduce errors and substantially add to the user experience, they must also be considered on high priority.

2. How long is it going to take to fix?

If all you have to do is tweak the CSS, you might slip it into the next build. On the other hand, if it’s going to require a significant amount of development or will have to be thoroughly regression tested, it may make sense to hold off until it can be resolved with other issues requiring similar treatment.

3. Who will be tasked with addressing the issue?

If the task has to be done by the UX team, and they have the bandwidth, it may be given a high priority. If it requires the attention of a specific developer who is already assigned to other high-priority work, then it will have to wait.

Make And Follow a Schedule

After prioritizing your debt, the next step is to work with product management to get it into your release schedule. Agile is the most popular approach to software development these days.

If You Aren’t Using Agile –

If you’re not using Agile, your work is most likely planned basis a release cycle. The management of your organization takes a call on what will go in the next release. They consider various factors like development effort, need of the feature, selling points, what bugs exist and how bad they are, etc.

It is recommended that UX debt issues must be handled as bugs. The real benefit of this approach is that the debt items can be entered and tracked using the same tools and business processes as bugs. This ensures timely review and treatment. Ideally, a representative from the UX team should work closely with product management when releases are scheduled.

If You Are Using Agile –

Companies that employ a healthy Agile process to prioritize debt and other types of works find it easy to manage everything. They don’t face any problems in prioritizing debt with other types of work, assigning it story points, and fitting it into sprints.

UX debt should be understood as the responsibility of the entire organization and not just the UX group. There must be a great synergy between all the teams. That said, the best way to eliminate UX debt is always avoiding it in the first place. Our UX designers will be happy to discuss your UX, UI and other design requirements; talk to them now!