SlideShare une entreprise Scribd logo
1  sur  11
LeFiveBackoffice
Planning: Optimisation de l’UI
Hiérarchie du contenu
1. Type d’évènement
2. Typologie de résa
3. Résa validée / Non-validée
4. Payée (solution existante Ok)
5. Heure de début
6. Nom du client
Résas:Vue3Jours/7Jours
Recommandations
• Largeur minimum 80px (Vue 7j/3J).
• Troncature du nom en“...”
• Les icônes doivent être réduit (28pxX28px) afin d’être visibles dans la plupart des
cas
• Les icônes doivent être centrés afin d'être visible malgré le système de frame de
full calendar
• En fonction du nombre de terrains, et du nombre de jours, un scroll horizontal
doit être activé
Hiérarchie du contenu
1. Résa validée / Non-validée
2. Payée (solution existante Ok)
3. Heure de début / Heure de fin de Résas
4. Type d’évènement
5. Nom du client
6. Mode de paiement
Réservations:Vue1jour
Recommandations
• En vue 1 semaine, au delà de 204 px de large (en fonction du
nombre de terrain), on affiche le type de paiement.
Quand le scroll est activé
les absices et ordonnés du tableau
doivent être fixées afin de toujours
gardé ces infos visibles. Présence
d’une légère ombre afin de suggérer
cela.
Absiceetordonnéedutableau
Choix du centre et type de sport
• Suppression de l’image de fond
• Drops downs moins haut (50px)
Dropdownmenu &menuduplanning
Choix des terrains
• Meilleur mise en avant du nombre de
terrains sélectionnés
• Ajout d’une checkbox « tous les
terrains »
• Ajout d’un bouton“collapse”pour le
détail des terrains.
• Utilisation de“toggle button”pour
activation désactivation d’un terrain
Planning:Vue1J/12terrains(terrainexpanded)
Planning:Vue7J/12terrains(terrainexpanded)
PlanningMobile:Vue1Jour/12terrains(terrainexpanded)
28px
28px
95	px80	px
(largeur	minimum)
1h 30mn
80	px
(largeur	minimum)
47px
Canaro Bold 14px
Canaro book 14px
Validée En attente
Team
game
Pick up
game
Full
field
16	px
14px
Anniversaire
#187cef
#1781fc
Joueur
#51792f
#5c823d
Réservation	club
#14d5e8
#42ddec
Réservation	club
#ffad28
#ffb53f
Ecole	de	foot
#fd87f6
#fd90f7
Offre	spéciale
#d00a0a
#d41d1d
Zumba
#fc7100
#e97d26
Terrain	Fermé
#727272
#787878
Ligue
#9d0894
#a11398
Tournoi
#410808
#4a1414
Bubble
#23cc92
#3ad19d
Play	race
#044188
#1b5293
Autre
#121212
#171717
Canaro bold 24px
Canaro bold 22px
1px	/	#ffffff /	Opacité:	50%
1px	/	#103a6e
#081b33
#040d19
Radius	4px	/	#ffffff /	Opacité:	60%
Merci!

Contenu connexe

En vedette

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software
 

En vedette (20)

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 

Ui planning optimization

  • 2. Hiérarchie du contenu 1. Type d’évènement 2. Typologie de résa 3. Résa validée / Non-validée 4. Payée (solution existante Ok) 5. Heure de début 6. Nom du client Résas:Vue3Jours/7Jours Recommandations • Largeur minimum 80px (Vue 7j/3J). • Troncature du nom en“...” • Les icônes doivent être réduit (28pxX28px) afin d’être visibles dans la plupart des cas • Les icônes doivent être centrés afin d'être visible malgré le système de frame de full calendar • En fonction du nombre de terrains, et du nombre de jours, un scroll horizontal doit être activé
  • 3. Hiérarchie du contenu 1. Résa validée / Non-validée 2. Payée (solution existante Ok) 3. Heure de début / Heure de fin de Résas 4. Type d’évènement 5. Nom du client 6. Mode de paiement Réservations:Vue1jour Recommandations • En vue 1 semaine, au delà de 204 px de large (en fonction du nombre de terrain), on affiche le type de paiement.
  • 4. Quand le scroll est activé les absices et ordonnés du tableau doivent être fixées afin de toujours gardé ces infos visibles. Présence d’une légère ombre afin de suggérer cela. Absiceetordonnéedutableau
  • 5. Choix du centre et type de sport • Suppression de l’image de fond • Drops downs moins haut (50px) Dropdownmenu &menuduplanning Choix des terrains • Meilleur mise en avant du nombre de terrains sélectionnés • Ajout d’une checkbox « tous les terrains » • Ajout d’un bouton“collapse”pour le détail des terrains. • Utilisation de“toggle button”pour activation désactivation d’un terrain
  • 9. 28px 28px 95 px80 px (largeur minimum) 1h 30mn 80 px (largeur minimum) 47px Canaro Bold 14px Canaro book 14px Validée En attente Team game Pick up game Full field 16 px 14px Anniversaire #187cef #1781fc Joueur #51792f #5c823d Réservation club #14d5e8 #42ddec Réservation club #ffad28 #ffb53f Ecole de foot #fd87f6 #fd90f7 Offre spéciale #d00a0a #d41d1d Zumba #fc7100 #e97d26 Terrain Fermé #727272 #787878 Ligue #9d0894 #a11398 Tournoi #410808 #4a1414 Bubble #23cc92 #3ad19d Play race #044188 #1b5293 Autre #121212 #171717
  • 10. Canaro bold 24px Canaro bold 22px 1px / #ffffff / Opacité: 50% 1px / #103a6e #081b33 #040d19 Radius 4px / #ffffff / Opacité: 60%