UI Guidelines - Aplopio/rbox-zen GitHub Wiki

This page attempts to establish the rules of thumb, that can be used for any UI design in Recruiterbox or in general.

Note: Items marked with 🚧 are currently not followed in Recruiterbox. We should incorporate them ASAP.

The UI should work smoothly in all screen sizes

Any element that triggers any kind of update (submitting a form, deleting an object, etc) should have a loading state, unless it's a pure UI change that is really instantaneous.

Disable the button and change text to present continuous form of the original text, followed by an ellipsis (Save Changes -> Saving Changes...)

The item should be faded with all interactions disabled and an overlaid loading indicator (typically a gif and a message saying "Deleting...")

• When an element is clicked, once the corresponding action is completed/canceled, the focus should be retained on the original element

  Ex: Attach files link - once you click on the link, and choose some files, the focus should remain on the link

  This can be extended for more complex actions too, like writing a candidate message. This would go a long way for accessibility (for people who prefer navigation using keyboard)

• Whenever a form is shown, the first (or the most appropriate) field in the form should be auto-focused

• 🚧 Whenever a confirmation modal is shown, the focus should be on the safer option (the primary button in most cases, except when the action is very serious/irreversible)

• Whenever a new UI element is shown, the first (or the most appropriate) focusable element (if any) in the UI should be auto-focused Ex: dropdowns which have input elements, like the "Filter by Openings" dropdown in reports page.

• Pressing Ctrl+Enter from any textarea should submit the corresponding form

• 🚧 Textareas can auto-grow when the content exceeds, in appropriate places.

  Could use this standalone lib or these react components - react-growable-textarea, react-textarea-autosize

• A date/time value representing a point-in-time action in the past should be of the format x <unit>s ago.

  Ex: a few seconds ago, 20 minutes ago, 17 hours ago, 2 days ago, 6 months ago, a year ago

  💡 Use moment's fromNow.

• 🚧 When a formatted date/time value is hovered on, the complete date-time value must be shown as a tooltip, in the format of Sat, May 2, 2015 at 5.15 PM.

• Once a relative date value (like 5 minutes ago) is rendered, the value should update itself as time passes, if the page is kept open. React component to do the same: react-log-time

When a particular action is not available or is irrelevant in a given scenario,

• disable the element
• show a tooltip on hover, explaining why it's disabled

Don't hide it completely. If an element is present in some scenarios and not in others, it would confuse the users. More detailed explanation here

• In a modal or in any UI which is clearly demarcated from the rest of the page (ex: popovers, Bootstrap-style dropdowns), keep the buttons right aligned, with the primary action at the right edge and the cancel or secondary action to the left of it.
• In other in-page forms, keep them left-aligned.

Related discussion with Girish, viky and Anenth

Same conclusion reached independently by ux.stackexchange.com

• Don't leave spaces before punctuations, except for some separators like hyphens. (Often repeated mistake).