In this recipe, we'll review some design guidelines in order to present a uniform user experience.
<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>
<sheet>
<div class="oe_left oe_title"> <label for="name" /> <h1> <field name="name" /> </h1> </div>
<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" />
<group name="some_fields"> <field name="field1" /> <field name="field2" /> </group>
</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.