UX principles from Ant.Design
If you’re build React enterprise applications, you may use UI framework like Material UI, or Bootstrap (which are both great).
In this post I wanted to share about the principles from Ant Design, that I discovered just recently.
Disclaimer: most of the text is coming from Ant Design website.
“Ant Design is specially created for internal desktop applications”.
In comparison Bootstrap is created with mobile first in mind, and material is an all rounder for any website. They both have great libraries for React, and I’m not here to praise or dismiss any of these two.
Ant Design has lots of components that make sense when building enterprise applications. Like a button with a loading state, which you can of course create with any other framework, but I’m always happier if it’s done for me ;)
About AntDesign, they have UX guidelines that are quite generic (no need to use their framework).
Here are the few I found the most useful:
Forms
They prefer right align label rather than label on top of fields.
It’s supposed to be faster to complete the form
Contrast Principle
“When something needs users to make decision prudently, the system should remain neutral. It shouldn’t make the decision for users or lead them to make judgement.”
Editing: Make it Direct
“Instead of editing content on a separate page, do it directly in context.”
We sometimes have applications that will open a new popup to edit the elements that were already on screen. It’s easier for the users to just edit them from the main screen.
Stay on the page
“Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user’s mental flow.”
“Change Blindness is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People’s poor ability to detect changes has been argued to reflect fundamental limitations of human attention, from the term of Change blindness“ Wikipedia.
i.e: “Using a Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.”
I tend to agree with this, we often see a popup to confirm what we just clicked. Most of the time, users will not read what’s in that popup and just click through (which defeat the purpose). It also has the effect of slowing down users. For example if you have a list and a delete button for each item. If you want to delete a few items, it’s really easy to click a few times the delete button rather than having a popup to confirm the deletion every time. And if you delete one too many, you can just undo the last action.
Of course it may not work in all scenario, but it’s good to keep in mind.
Keep it simple
Hover-Reveal Tools
“Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object.”
Transitions
use transitions to make changes appear more natural
Adding an object: When an object is added, the highlighted area shows it to the user. The highlight fades in several seconds in order not to interfere the user flow.
Deleting an Object: When an object is deleted, the highlighted object fades out in several seconds in order not to interfere the user flow.
more videos:
https://ant.design/docs/spec/transition
React immediately
When users click on a button, they expect the button to trigger an action (ie: by using a Loading Button user know an action happens in background)
While there is a possibility of too much feedback (or, more accurately, too much of the wrong feedbacks), a system with little or no feedback feels sluggish and thickheaded.
“Click Refresh: notifies the user of fresh content and provides button or tool to refresh.” This is a very good pattern if you have push notifications in your application, or want to allow multiple users work on the same screen.
Colors
Similarly to Material ui design principle, Ant Design also has a list of color palettes they recommend.
In addition, Ant Deign provide a nice tool to generate a color palette from a base color
Font
Their base font size is 14 px, for trying to ensure the best user reading efficiency.
Conclusion
Have a look at Ant Design principles, it’s straight to the point and worth the read.
Also if you’re building a new enterprise application in React, I would say it’s worth the try thanks to all the components they provide. Components that were designed with all these principles in mind.
