/ Projet

Savikings #1 : Améliorer l'expérience de l'hébergement web

Quelqu'un·es le savent peut-être, mais je bosse depuis un long moment déjà pendant mon temps libre sur un projet de panel pour gérer son hébergement web. Et ce avec le souci qu'il soit rapide à utiliser pour les développeurs ou développeuses (moins de temps dans le panel d'hébergement = plus de temps pour coder son appli) et facile à utiliser pour des profils plus néophites comme des designers ou designeuses.

C'est un projet sérieux et pas juste un concept, la gestion des problématiques d'infra et du développement est géré par Frozennide et pour ma part je m'occupe de la partie design (ergo, UI, branding, du product design quoi :D) ainsi que l'architecture frontend.

J'aimerais profiter de ce blog pour partager mes reflexions sur cette expérience au fur et à mesure.

Ça fait un certain temps que j'y travaille donc de nombreuses itérations ont été faites. Je vais profiter de ce premier billet pour aborder quelque points que je juge intéressants à partager.

C'est parti !

Pour commencer, quelque écrans que j'avais montré sur mon compte Dribbble mais avec un peu plus d'explication.

Concept de formulaire de connexion

Datant d'octobre 2016
login

  • Utilisation de labels au dessus des champs : c'est "la mode" des float label mais la disposition classique permet une clareté de qu'est-ce qu'on doit remplir et de où le remplir que je préfère.
  • J'ai utilisé un bouton à texte pour le montrer/cacher du champ de mot de passe. C'est peut-être moins esthétique mais vu que c'est une fonctionnalité quelque peu nouvelle, ce sera plus clair comme ça.
  • Mise en évidence d'un switch pour accéder au formulaire de connexion du webmail. Ainsi la confusion entre la connexion au panel et au webmail était évitée et ça permettait ainsi de rediriger depuis la landing avec un seul lien "Connexion".

J'avais déjà à ce moment là, la volonté d'enlever l'image de fond, pour améliorer la concentration ainsi que la vitesse de chargement de la page

En début 2017 j'avais un layout qui essayait de simplifier la navigation:
L'arborescence étant constituée de 2 niveaux de menu (Hosting//Domains//Mails//Support et sous-menus correspondants), j'avais voulu avoir un sens de lecture vertical (de haut en bas uniquement).

01_websites

Mais après quelque reflexions et après avoir demandé l'avis de collègues et de potentiels usagers du service, j'ai decidé de changer en isolant la navigation principale dans une sidebar. (schéma avant/après ci-dessous)

panel-mockup-presentation

Pourquoi ? Parce que la navigation principale se trouvait étouffée (au niveau UI hein :p) entre le logo et le menu utilisateur et avait tendance à pouvoir être introuvable.

La solution étant d'isoler et de mettre en valeur la navigation principale dans une siderbar. Ainsi le sens de navigation (en "Z") était bien segmenté, se faisant ainsi :

  1. Selection de la partie de la navigation principale dans la sidebar
  2. Puis utilisation de la partie droite du panel de manière indépendante

sidebar-navigation

La suite

Et bien la suite au prochain numéro. J'espère pouvoir tenir cette série d'articles à jour, en tout cas c'est déjà un début !

En attendant c'est probable que je lâche des bouts sur Twitter ou sur Dribbble donc vous pourrez aller regarder là bas aussi.

Allez, la bise !