Skip to end of metadata
Go to start of metadata

A single page can wrap a lot of content related to a specific issue. If you feel it makes sense to display this content on "sub pages", create a navigation element with "tabs", where each "sub page" is placed on a single tab.

Right after the header (or whenever you want to delimit a new section on the page content), there should be an heading (h3) naming what follows it. If you're about to wrap a list of items on a table, consider to attach a counter (the "badge" element) of the total items to it; when your table isn't displaying any items yet, include the value "0" on the counter anyway.

If you have a primary action for that section you should place a button right after the title (left aligned), whenever possible including an icon emphasizing the task (a "plus" icon for adding new items, a "pencil" one for editing them). Avoid to name this call to action with more than two words; the context for the task the user is performing by clicking on the button is given on the preceding title as explained before (example: if the main task on a given section is to "Create a new grade result", you should name the title "Grade results" and the button with "New" and the "plus" icon only).

Secondary actions related to the section should be next to the primary button, with a neutral appearance (default). What the user isn't allowed to do, only due to permission issues associated whit his profile on the system, shouldn't even be displayed. 

Since you now have a title (and eventually a primary button too) for a new section, you either have content about that and want to display it or you don't have any and want the user to create some.

— no content — write an "empty state".

— a list of key-value pairs — use a definition list to display static information about something. Usually it should be the type of content you see when you previously selected an item on a table to view details about it.

— a table — you want the user to compare, at a glance, some attributes associated with items. It also should be the element chosen to show a list of dinamic content (so the user can filter/search through it and add/remove items).

— a form — the call to action is associated with some fields the user has to previously fill to filter the content he can access to.

  • No labels