UX best practices to create your

module
Usability Team
 Topics

1 Usability guidelines
2 Onboarding
3 Which view ?

4 User interface elements

5 Wizards and modals

6 How do I know I’m ready to publish my module ? Testing

Usability guidelines
Usability Guidelines
 Usability Guidelines

Objectives :
1. Focus on the end user needs.
 Usability Guidelines

Objectives :
1. Focus on the end user needs.

2. User Experience : think the features as a flow, not a single functionality (fully
integrated)
 Usability Guidelines

Objectives :
1. Focus on the end user needs.

2. User Experience : think the features as a flow, not a single functionality (fully
integrated)

3. Ergonomics and intuitive interface: having the same philosophy in the whole
eco-system (colors, where do I put a button,...), easy to learn
 Usability Guidelines

Keep in mind :
1. For each screen that is designed, think about the general flow
 Usability Guidelines

Keep in mind :
1. For each screen that is designed, think about the general flow

2. How would you rate the user experience ? Why ?

 Usability Guidelines

Keep in mind :
1. For each screen that is designed, think about the general flow

2. How would you rate the user experience ? Why ?

3. Do not invent new concepts, use the ones that are already known by the
average user.
 Usability Guidelines

Ask yourself :
1. What is the purpose of my development ?
 Usability Guidelines

Ask yourself :
1. What is the purpose of my development ?

2. At first, don't think about technical limitation

 Usability Guidelines

Ask yourself :
1. What is the purpose of my development ?

2. At first, don't think about technical limitation

3. Would a non-educated person be able to use what you are developing ?

 Usability Guidelines

Ask yourself :
1. What is the purpose of my development ?

2. At first, don't think about technical limitation

3. Would a non-educated person be able to use what you are developing ?

4. Is this button/field necessary ?

 Usability Guidelines

Ask yourself :
1. What is the purpose of my development ?

2. At first, don't think about technical limitation

3. Would a non-educated person be able to use what you are developing ?

4. Is this button/field necessary ?

5. Is the business process smooth ? If not, what breaks the flow ?

 Usability Guidelines
The 5 pillars of Usability :
 Usability Guidelines
The 5 pillars of Usability :

1. Learnability
How easy is it for users to accomplish basic tasks the first time they
encounter the design ?
 Usability Guidelines
The 5 pillars of Usability :

1. Learnability
How easy is it for users to accomplish basic tasks the first time they
encounter the design ?
2. Efficiency
Once users have learned the design, how quickly can they perform
tasks
 Usability Guidelines
The 5 pillars of Usability :

1. Learnability
How easy is it for users to accomplish basic tasks the first time they
encounter the design ?
2. Efficiency
Once users have learned the design, how quickly can they perform
tasks
3. Memorability
When users return to the design after a period of not using it, how easily
can they re-establish proficiency ?
 Usability Guidelines
The 5 pillars of Usability :

1. Learnability
How easy is it for users to accomplish basic tasks the first time they
encounter the design ?
2. Efficiency
Once users have learned the design, how quickly can they perform
tasks
3. Memorability
When users return to the design after a period of not using it, how easily
can they re-establish proficiency ?
4. Errors
How many errors do users make, how severe are these errors, and how
easily can they recover from the errors ?
 Usability Guidelines
The 5 pillars of Usability :

1. Learnability
How easy is it for users to accomplish basic tasks the first time they
encounter the design ?
2. Efficiency
Once users have learned the design, how quickly can they perform
tasks
3. Memorability
When users return to the design after a period of not using it, how easily
can they re-establish proficiency ?
4. Errors
How many errors do users make, how severe are these errors, and how
easily can they recover from the errors ?
5. Satisfaction
How pleasant is it to use the design ?
 Simple Usability Rules
Key Ideas :

1. Avoid things that make us think.

 Simple Usability Rules
Key Ideas :

1. Avoid things that make us think.

2. Create a clear visual hierarchy
a. The more important, the more prominent
b. Related things are visually related
c. Nested things to show what’s part of what
 Simple Usability Rules
Key Ideas :

1. Avoid things that make us think.

2. Create a clear visual hierarchy
a. The more important, the more prominent
b. Related things are visually related
c. Nested things to show what’s part of what
3. Conventions are your friends
 Simple Usability Rules
Key Ideas :

1. Avoid things that make us think.

2. Create a clear visual hierarchy
a. The more important, the more prominent
b. Related things are visually related
c. Nested things to show what’s part of what
3. Conventions are your friends
4. Make it obvious what’s clickable
 Simple Usability Rules
Key Ideas :

1. Avoid things that make us think.

2. Create a clear visual hierarchy
a. The more important, the more prominent
b. Related things are visually related
c. Nested things to show what’s part of what
3. Conventions are your friends
4. Make it obvious what’s clickable
5. Omit needless words
 Simple Usability Rules
Key Ideas :

1. Avoid things that make us think.

2. Create a clear visual hierarchy
a. The more important, the more prominent
b. Related things are visually related
c. Nested things to show what’s part of what
3. Conventions are your friends
4. Make it obvious what’s clickable
5. Omit needless words
6. Use Breadcrumbs
 Simple Usability Rules
Key Ideas :

1. Avoid things that make us think.

2. Create a clear visual hierarchy
a. The more important, the more prominent
b. Related things are visually related
c. Nested things to show what’s part of what
3. Conventions are your friends
4. Make it obvious what’s clickable
5. Omit needless words
6. Use Breadcrumbs
7. Don’t think about a specific point but think about the process
 Simple Usability Rules
Key Ideas :

1. Avoid things that make us think.

2. Create a clear visual hierarchy
a. The more important, the more prominent
b. Related things are visually related
c. Nested things to show what’s part of what
3. Conventions are your friends
4. Make it obvious what’s clickable
5. Omit needless words
6. Use Breadcrumbs
7. Don’t think about a specific point but think about the process
8. But pay attention to details !
Onboarding
 Onboarding
- It is the user’s first steps (15 first minutes)
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
- What if I want to introduce a complex concept ?
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
- What if I want to introduce a complex concept ?
- Tooltip
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
- What if I want to introduce a complex concept ?
- Tooltip
- Menu tip
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
- What if I want to introduce a complex concept ?
- Tooltip
- Menu tip
- Popup tips
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
- What if I want to introduce a complex concept ?
- Tooltip
- Menu tip
- Popup tips
- Placeholders
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
- What if I want to introduce a complex concept ?
- Tooltip
- Menu tip
- Popup tips
- Placeholders
- Think of the main business cases. If particular cases : put it as an option in
the settings or in customizing.
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
- What if I want to introduce a complex concept ?
- Tooltip
- Menu tip
- Popup tips
- Placeholders
- Think of the main business cases. If particular cases : put it as an option in
the settings or in customizing.
- Jump to the right menu, The user must directly be in the context where he
will work everyday
 Onboarding
- It is the user’s first steps (15 first minutes)
- Be able to do it smoothly without being an expert
- What if I want to introduce a complex concept ?
- Tooltip
- Menu tip
- Popup tips
- Placeholders
- Think of the main business cases. If particular cases : put it as an option in
the settings or in customizing.
- Jump to the right menu, The user must directly be in the context where he
will work everyday
- Guide the user by highlighting buttons (next step = colored button)
View selection
 Which View
Use a gallery for context (project, sales team, …)
 Which View
Use a kanban if a business process is used for this feature (e.g.
opportunities)
o show columns in background
o let the quick create available
 Which View
Use exceptionally a form if the everyday use is a one click need (e.g, order a lunch)
o the user has to click in one button and then it is done neither more nor less
o The form view should be as close as possible from the real business document (e.g. a sale order)
o Use less field as possible. Other info should be precompleted by default value
o Hide secondary fields in an option or in tabs
 Which View
Use a calendar view if you want to link an object to a date or a period.
UI Elements
 User interface elements

Buttons
o Action button
 User interface elements

Buttons
o Action button
o Stat button
 User interface elements

Buttons
o Action button
o Stat button
o Stage buttons
 User interface elements

Buttons
o Action button
o Stat button
o Stage buttons
o Hamburger
 User interface elements

Buttons
o Action button
o Stat button
o Stage buttons
o Hamburger

Search field
o Filters
 User interface elements

Buttons
o Action button
o Stat button
o Stage buttons
o Hamburger

Search field
o Filters
o Group by
 User interface elements

Buttons
o Action button
o Stat button
o Stage buttons
o Hamburger

Search field
o Filters
o Group by
o Favorites
 User interface elements
Fields
o selection
 User interface elements
Fields
o selection
o checkbox
 User interface elements
Fields
o selection
o checkbox
o radio button
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
o toggle
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
o toggle
o monetary
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
o toggle
o monetary
o percentpie
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
o toggle
o monetary
o percentpie
Breadcrumb
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
o toggle
o monetary
o percentpie
Breadcrumb
Tags
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
o toggle
o monetary
o percentpie
Breadcrumb
Tags
Icons
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
o toggle
o monetary
o percentpie
Breadcrumb
Tags
Icons
 User interface elements
Fields
o selection
o checkbox
o radio button
o datepicker
o toggle
o monetary
o percentpie
Breadcrumb
Tags
Icons

Additional Info : http://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

Wizards and Modals
 Wizards and modals
o Try not to use it. Only if necessary. It breaks the flow and isn’t mobile
responsive.
o Wizard is for usually for advanced process
o Thinking of 2 processes : one simple and one complicated
o Option to flag in customize or settings
o Modals : Try to avoid it, unless there are too many information.
o In list : it is better to use editable list than opening a modal
How do I know I’m ready to
publish my module ?
 How do I know I’m ready ?
o Testing :
 How do I know I’m ready ?
o Testing :
o In new databases
 How do I know I’m ready ?
o Testing :
o In new databases
o In database already populated
 How do I know I’m ready ?
o Testing :
o In new databases
o In database already populated
o The module alone & in a running instance
 How do I know I’m ready ?
o Testing :
o In new databases
o In database already populated
o The module alone & in a running instance
o Pay attention to the access rights
 How do I know I’m ready ?
o Testing :
o In new databases
o In database already populated
o The module alone & in a running instance
o Pay attention to the access rights
o Do the flow, but also test it randomly (error messages should be clear)
 How do I know I’m ready ?
o Testing :
o In new databases
o In database already populated
o The module alone & in a running instance
o Pay attention to the access rights
o Do the flow, but also test it randomly (error messages should be clear)
o Test it on the main browsers
 How do I know I’m ready ?
o Testing :
o In new databases
o In database already populated
o The module alone & in a running instance
o Pay attention to the access rights
o Do the flow, but also test it randomly (error messages should be clear)
o Test it on the main browsers
o Focus on the main processes, not on the 1% case (except if you develop
something really specific)
 How do I know I’m ready ?
o Testing :
o In new databases
o In database already populated
o The module alone & in a running instance
o Pay attention to the access rights
o Do the flow, but also test it randomly (error messages should be clear)
o Test it on the main browsers
o Focus on the main processes, not on the 1% case (except if you develop
something really specific)
o Be coherent with the other Odoo applications. Use the conventions we have.