Hello! This is the Free Market team. We’re excited to introduce some design concepts you can find in our upcoming product, xDeposit. Below, we will be exploring demonstrations built with React, TypeScript and Framer Motion.
When evolving our approach to design, we try to find innovative ways to reduce the visual cognitive overload that appears to be under-addressed in the overwhelming majority of web design that we experience everyday.
One of the innovations which can reduce cognitive load is eliminating unnecessary use of modals. If you believe that modal windows are completely harmless, you might be wondering “what’s wrong with a simple modal, here and there?” It may be a surprise that there are many disadvantages to modals which may lead to sloppy UX. Modals could overload your users with too many cognitive changes.
If you are interested in UX, I highly recommend reading Therese Fessenden’s exciting write-up on modal dialogs, titled Modal & Nonmodal Dialogs: When (& When Not) to Use Them. Fessenden excellently lists some of the common problems caused by modal dialogs. Here is an excerpt:
Here are some of the common problems caused by modal dialogs, starting with common problem #1:
They require immediate attention. Modal windows, by their nature, are compulsory and require the user to act immediately. Since the dialogs place the system in a different mode, users cannot continue what they are doing until they acknowledge the dialog.
common problem #2:
They interrupt the user’s workflow. Modal dialogs force users away from the tasks they were working on in the first place. Each interruption translates in lost time and effort, not only because users must address the dialog, but also because, once they go back to their original tasks, people will have to spend some time recovering context.
common problem #3:
They cause users to forget what they were doing. Once the context is switched to a different task, because of the additional cognitive load imposed by the modal dialog, people may forget some of the details associated with the original task. If that is the case, recovering context for the original task may be even more difficult.
common problem #4:
They cause the users to create and address an extra goal — to dismiss the dialog. When the dialog is presented, extra steps are added to the user’s workflow: to read and comprehend the dialog, then make a decision on that dialog. This increase in interaction cost is likely to put off users, unless the dialog is well justified and indeed contains important information. We will elaborate more on this point later.
common problem #5:
They block the content in the background. When a dialog appears on top of the current window, it can cover important content and remove context. As a result, it may become harder to respond to the dialog when the dialog asks a question related to information that was just obscured.
Another key takeaway is Fessenden’s guideline #7:
Avoid modal dialogs for complex decision making that requires additional sources of information unavailable in the modal.
This can be challenging when building mobile-first UI, especially when many apps in DeFi require opening large menus for users to find and select specific tokens. When looking at many multi-chain apps, you will find modal dialogs which hide away important details such as the currently selected chain.
Let’s take a look at an example of a modal-like selection menu that takes the user out of context.
Above, you’ll find an example where the user can select both a chain and a network. This is where the user might begin looking for a token. After failing to find it, the user needs to start over and find the network selection menu. This is also an example where the most immediate interaction, the search box, is de-emphasized and appears last.
Next, let’s look at the sample example in a simpler single-chain swap form.
Full-screen selection menus appear to be the status quo, and they are definitely robust. Many out-of-the-box implementations are available.
If you believe that improving UX is only important for raising your conversion rate, you should know that UX optimization is also an opportunity to exercise our due diligence to humanity by reducing the psychological foot print left behind by our craft. Every experience at Free Market is built with love, React, TypeScript and Framer Motion.
Now that we’ve discussed some of the ideas behind avoiding modals, let’s dive into a similar discussion about dropdown selectors. If you have had the wonderful privilege of viewing Golden Krishna & Eric Campbell’s SXSW Keynote, You know what? Fuck Dropdowns, then you might already know some of the all-too-familiar pitfalls of using dropdowns in UI.
If you have the time, we highly recommend giving it a watch. Today, we’re going to explore a form design that simultaneously rejects the common modal and dropdown design. The end result is a beautiful experience with improved usability and reduced cognitive overload for our customers.
One of the key takeaways from Fuck Dropdowns is that many dropdowns should be replaced with a text-based input box, and perhaps autocomplete or selectable search results. You can find many great examples of dropdown alternatives in the UX of linear.app
Another problem with the common modal dialogs is presenting too much information at the same time. Jakob Nielsen has a read-worthy explanation of this in Workflow Expectations: Presenting Steps at the Right Time. Many of the token selectors use a transition animation to open their modal dialogs. Despite this, they are still revealing a large quantity of options to the user at the same time.
To summarize Nielsen’s article, it is important to understand that faster isn’t always better. Let’s take a look at some examples of this principle that we chose to employ in the design of our latest project, xDeposit.
Above, you’ll see a slow-motion replay of our opening animation for the app. Using a single square button, inspired by the flag of Japan, centers the design and keeps the cognitive load low while the user hasn’t started the app. More interestingly, once “Deposit” is clicked, we use animation to reveal multiple major changes to the user: introducing a new form, new inputs, new copywriting and a new button.
We use stagger as well to add additional emphasis to the items that appear first. This can help the user to focus on the items which requires the most immediate interaction: the form. This also allows for the copywriting and action buttons to be de-emphasized as well.
Next let’s take a look at the titular anti-modal anti-dropdown.
In the animation above, there are some takeaways that evolve upon what we’ve covered so far:
- When there are too many items, the content is truncated and scrollable. This keeps the user in context even when there is a few seconds of scrolling involved.
- Items are revealed from top-to-bottom, not all at once. If there was no animation, and the menu expanding instantly, it can create a jarring experience. Also, if items were revealed bottom-to-top, it may unintentionally de-emphasize the most important interaction items and make the overall experience feel slower than intended.
- Previous steps are actionable, future steps are obscured. In the design for this menu, the user may start selecting their token, only to realize that they want an option that is only available on another chain. This is why it is important to allow the user to immediately open the chain selector while they are selecting a token. However, to further reduce cognitive load, we use a shadow to obscure both the token and amount inputs while the chain selector is open.
That’s all for today. Stay tuned for our upcoming launch of xDeposit!
Aside: xDeposit is made with love ❤️ by the Free Market Team.