Interface checklist

Making new interfaces and improving existing ones

Setup

Mybring is spelled correctly.
Frontend setup is minimal for users and developers, and custom to the app. Smaller Webpack or Vite based configs are preferred; Create React App and similar are not. Mybring Experience can help, so can other teams.
Browser tab title follow this pattern: Regional name (if present) - Global name - Mybring
URL is indicative of the app name.
The global menu dropdown has the current area’s name, not the default "select area".
All React apps in Mybring have to mount the app by using the provided ID mybring-app-root from Mybring Layout. Read up on Layout setup and mounting and ensure that the direct children of the mounted app are:
- nav id="mybring-nav" class="mybr-layout__sidebar regional-nav" (if the app has a menu)
- main id="mybring-main" class="mybr-layout__main"
Dummy data is realistic.
Tip: There are many JSON data generators out there. Good test and dummy data don’t contain the words test and dummy.
Update readme, Confluence and other documentation, so new people, yourself and other teams are able to run the application six months from now.

Navigation titles give value by reflecting the content or action available on the page, not the type of interface.
Examples: Economy, environmental report, booking are descriptive; dashboard, table and form are not.
Column sorting should be relevant. It’s rarely any need to sort unordered numbers like telephone numbers, shipment numbers and postal codes.
Table headers should be clear; as short as possible, but as long as necessary. What is implied by the content? Is the meaning lost if we use screen readers?
Inputs and labels are connected by nesting or for/id attributes. This gives the input meaning and clicking the label activates the input. Input width also has a balance between reflecting content size, layout harmonisation and responsiveness.
List of common terms we use.
Labels, headers, buttons, menu items and so on use sentence case.
HTML is clean, structured and correct. Use appropriate, meaningful, semantic elements, and CSS is CSS. It’s reusable, cascading and long-lasting.
Texts are written from the users’ perspective, clear and short enough. There are no internal or temporary names in the interface. Is it clear who "Customer" is referring to?
Tip: Explaining how something works to another person is an excellent way to start writing good texts. Mybring Experience can help.
Time and date, as well as units and decimals, are in Norwegian standard.
Consider icon usage and placement, especially in buttons and similar elements.

Plan for testing. Internal testing. User testing. Test small changes along the way, texts and the complete solution, and set aside time to fix. Mybring Experience can help, so can other teams. Cross-team testing increases the total expertise and domain knowledge.
Check that keyboard interaction works and that tab order is logical.
Follow the accessibility guidelines and do testing.
Norwegian is the main language, translate to English, Danish and Swedish.
All links and requests work, especially important after updating, converting or moving.