In this recipe, we'll review some design guidelines in order to present a uniform user experience.
- Start your form with a header element:
<header> <button name="do_something_with_the_record" string="Do something" type="object" class="oe_highlight" /> <button name="do_something_else" string="Second action" /> <field name="state" widget="statusbar" /> </header> - Then add a sheet element for content:
<sheet>
- Put some prominent field(s) first:
<div class="oe_left oe_title"> <label for="name" /> <h1> <field name="name" /> </h1> </div> - Put buttons that link to resources relevant for the object in its own box (if applicable):
<div class="oe_right oe_button_box" name="buttons"> <button name="open_something_interesting" string="Open some linked record" type="object" class="oe_stat_button" /> - Add your content, possibly within a notebook if there are a lot of fields:
<group name="some_fields"> <field name="field1" /> <field name="field2" /> </group> - After the sheet, add the chatter widget (if applicable):
</sheet> <div class="oe_chatter"> <field name="message_follower_ids" widget="mail_followers"/> <field name="message_ids" widget="mail_thread"/> </div>
The header should contain buttons that execute actions on the object the user currently sees. Use the oe_highlight class to make the buttons visually stand out (that's bright blue at the time of writing), which is a good way to guide the user regarding which would be the most logical action to execute at the moment. Try to have all the highlighted buttons to the left of the non-highlighted buttons and hide the buttons not relevant in the current state (if applicable). If the model has a state, show it in the header using the statusbar widget. This will be rendered right aligned in the header.
The sheet element is rendered as a stylized sheet and the most important fields should be the first thing the user sees when glancing at it. Use the oe_title and oe_left classes to have them rendered in a prominent place (floating left with slightly adjusted font sizes at the time of writing).
If there are other records of interest concerning the record the user currently sees (like the partner's invoices on a partner form), put them in an element with the oe_right and oe_button_box classes; this aligns the buttons in it to the right. On the buttons themselves, use the oe_stat_button class to enforce a uniform rendering of the buttons.