> For the complete documentation index, see [llms.txt](https://dev.xena.biz/xena-developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.xena.biz/xena-developer/the-possibilities/user-experience.md).

# User experience

Using Bootstrap – or any other design framework – help styling components quickly and consistently. But it is not a user experience framework. The following will help you use the provided design to create a good user experience in Xena.

### Primary action

There can be many buttons and links in a view, but only one primary action.

| <img src="/files/-LnrGcN9pC0qMILP_q4n" alt="" data-size="original">                                        | <img src="/files/-LnrGthpxzPDnbvoJR3j" alt="" data-size="original">        |
| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **DO:** Clearly highlight the primary action the user can perform. All other buttons are not as important. | **DON'T:** Do not give every button the styling for a primary button.&#xD; |

### &#xD;Colors for buttons and alerts&#xD;

For most part, only the default styling and the primary button styling is needed. However, careful use of colors can in some cases communicate urgency or importance to the user.

| <img src="/files/-LnrHBaTKicczJ4QbZbx" alt="" data-size="original">                                                                                              | <img src="/files/-LnrHEoCqb1Ql4fwJ81r" alt="" data-size="original">          |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **DO:** Use "danger" colors when performing a delete action or something an action failed. Use "success" colors when a job or action was completed successfully. | **DON'T:** Do not use different colors for the sake of decoration.&#xD;&#xD; |

### Accessible on all devices&#xD;

Xena is available on computers, tablets and smartphones. It can be a challenge to accommodate much information on a small screen. Take this into consideration when you design your app, plugin or integration.

|                                                                                                                |                                                           |
| -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| **DO:** Make views and actions accessible to users using their fingers and users with mouse and keyboard.&#xD; | **DON'T:** Do not make the UI dependent on hovering.&#xD; |