10 conseils utiles pour améliorer l'expérience utilisateur de votre application Nuxt.js

Concevoir des interfaces utilisateur intuitives est un défi quotidien. Je partage des conseils pour Vue et Nuxt que vous pouvez utiliser pour améliorer l'UX de votre application.

Comme vous le savez peut-être déjà, 😅 concevoir des interfaces utilisateur intuitives est un défi quotidien. Pourtant, l’un des aspects que j’ai apprécié depuis que j’ai commencé à coder est de comprendre tous ces petits changements qui peuvent améliorer l’expérience utilisateur. 🕵🏼‍♀️

Par exemple, parce que mes créations sont orientées composants, c'est comme avoir une superpuissance 💥 pour pouvoir activer et désactiver une fonctionnalité avec juste le commutateur d'un accessoire.

C'est pourquoi je J'écris cet article, pour partager quelques astuces (10 pour être exact) pour Vue et Nuxt que vous pouvez utiliser pour améliorer l'UX de votre application. Je veux dire, avouons-le, 🤷‍♀️ cela aide d'être en mesure de surdonner votre travail, surtout lorsque vous êtes un pigiste.

Alors, plongeons-nous et profitons de certains avantages UX. 1: Utilisez des espaces réservés pour que vos utilisateurs aient l'impression que votre composant se charge plus rapidement (Vue & Nuxt)

Il y en a deux excellents packages que vous pouvez utiliser pour étendre vos composants en ce qui concerne les espaces réservés.

Les deux seront parfaits pour configurer tout type d'espace réservé dont vous avez besoin, ☝️ mais vous devrez peut-être les modifier un peu si vous êtes vous cherchez à concevoir des animations plus complexes.

Voici comment faire basculer un espace réservé à l'intérieur d'un composant lorsque l'accessoire de chargement passe de «vrai» à «faux».

 < template > 
   < div > 
     < content  -  placeholders v  -  if [19659015] =  "loading" http://www.telerik.com/[19659015—2012>[19659018[]<[19459004
       "loading" [19459010[19459004 img  =  "true"   / > 
       < content  -  espaces réservés  -  text :  lines  =  "3"   / > 
     < /  content  -  placeholders > 

     <  div v  -  else >  Mon composant  < /  div > 
   < /  div > 
 < /  template > 

 < script > 
 export   default   {
  accessoires :   {
    chargement :   {
      type :  Boolean 
       default :   false 
    } 
  } 
} 
 < /  script > 

⚠️ Remarque: Si vous utilisez Nuxt, assurez-vous de bien connaître les fonctions d'extraction et $ fetchState.pending . Il vous permettra d'afficher un espace réservé lorsque fetch est appelé côté client.

Astuce # 2: Ajouter un accessoire spécifique pour inverser vos boutons (Vue & Nuxt)

Lorsque vous devez afficher deux boutons à côté de entre eux, il est évidemment important que l'utilisateur puisse les différencier. L’erreur d’un débutant 😔 est d’utiliser la même couleur pour les deux. 😕 Une autre erreur UX est d'utiliser deux couleurs complètement différentes qui n'ont aucune relation l'une avec l'autre.

🤓 Ce que je recommande de faire à la place est de créer un état inversé pour chaque couleur avec un accessoire inversé. Cela vous permettra de vous concentrer sur le bouton rempli tout en gardant la beauté de vos interfaces.

Astuce n ° 3: Ajouter un état de chargement à votre bouton (Vue & Nuxt)

Vos boutons déclenchent généralement des appels asynchrones vers votre serveur . Cela signifie que l'interface sera suspendue jusqu'à ce qu'une réponse soit reçue. ⏱ Étant donné que le temps d’attente varie en fonction de la vitesse du réseau d’une personne, vous devez informer l’utilisateur de la réussite de la requête. ✅

👐 Une façon simple et rapide de le faire est de fournir un support de chargement à votre composant de bouton afin qu'il affiche une double flèche à l'intérieur.

⚠️ Remarque : Si vous voulez que votre bouton garde la même largeur lors de la transition d'un état à un autre, vous pouvez changer l'opacité du contenu à zéro lorsque le bouton charge et centre le spinner en utilisant un positionnement absolu.

Astuce n ° 4: Prérécupérer certaines de vos données côté serveur (Nuxt)

Une erreur courante que j'ai vu des gens faire quand ils construisent leur système d'authentification par eux-mêmes (par exemple, ne pas utiliser nuxt-auth ) est 🙄 de charger les données utilisateur côté client.

Le problème avec ce processus est que lorsque vous actualisez la page, vous devez attendre la réponse du serveur ⌛️ avant d'afficher le éléments qui ne sont utilisés que lorsqu'ils sont enregistrés. 😥

Pour éviter cette transition sur le client, ☝️🤓 une solution est de récupérer les données côté serveur avec l'action nuxtServerInit .

De la documentation:

Si l'action nuxtServerInit est définie dans le magasin et le mode est universel, Nuxt.js l'appellera avec le contexte (uniquement du côté serveur). C'est utile lorsque nous avons des données sur le serveur que nous voulons donner directement au client.

 export   const  actions  =   {
  
   async   nuxtServerInit [19659043] ( context   { req } )   {
    
     if   ( req  &&  req .  headers .  cookie )   {
       const  cookie  =  cookieparser .  parse [19659043] ( req .  headers .  cookie ) 

       if   ( cookie .  token  )   {
         try   {
           await  context .  commit  ( 'auth / setToken "http://www.telerik.com /   { token :  cookie .  token }   { root :   true  } ) 

           wait  context .  dispatch  ( 'user / fetchUser "http: //www.telerik .com /   {}   { root :   true  } ) 
        }   catch   ( error )   {
           return  Promise .  rebut  ( error ) 
        } [19659119]}   else   {
         wait  context .  commit  ( 'user / setUser "http://www.telerik.com/ [19659043]  { utilisateur :   false  }   { root :   true  }  ) 
      } 
    } 
  } 
} 

Désormais, lorsque vous actualisez la page, l'utilisateur est déjà dans le magasin, et tous les composants nécessaires lors de la connexion sont instantanément affichés. 🧙‍♀️

Astuce # 5: Utilisez TailwindCSS pour obtenir un site Web propre et réactif avec Sizzy (Vue & Nuxt)

Cette astuce concerne davantage la productivité, mais il était essentiel de l'ajouter à cet article. Ces deux outils ont facilité mon travail quotidien et m'ont aidé à concevoir de meilleures interfaces. 👩🏽‍💻✨

Si vous n’avez pas entendu parler de TailwindCSS je vous recommande de jeter un œil à ce framework CSS . Surtout si vous devez concevoir des interfaces réactives, son principal avantage réside dans la façon dont vous pouvez appliquer une propriété CSS spécifique pour un point d'arrêt particulier. 👁 Regardez les screencasts TailwindCSS si vous voulez vous plonger dans ce cadre. Croyez-moi, vous ne le regretterez pas.

🎬 Screencasts: Conception avec Tailwind CSS .

En combinaison avec le navigateur Sizzy vous verrez comment chaque interface est rendue pour chaque appareil spécifique. 🚀 C'est puissant!

Le défilement est généralement plus rapide que de cliquer (en particulier sur les appareils mobiles). C'est probablement pourquoi le chargement infini est devenu un modèle si populaire pour afficher des données supplémentaires sur une page Web.

Mais gardez à l'esprit que lorsqu'un utilisateur fait défiler pendant quelques minutes, il peut simplement vouloir accéder à quelque chose en haut de la page. Pour lui faciliter ce processus, vous pouvez simplement afficher un bouton «Faire défiler vers le haut» ⬆️ une fois la troisième page atteinte.

👉🏼 Voici un package Vue que vous pouvez utiliser pour implémenter ce comportement: vue- backtotop .

Astuce # 7: Chargement paresseux de vos images et scripts (Vue & Nuxt)

Vous êtes probablement déjà en train de charger vos images paresseux. Mais si ce n'est pas le cas, voici comment le faire sans utiliser de bibliothèque externe:

 < img   src  =  " image.png "    chargement  =  " paresseux "    alt  =  "… "  [19659152] largeur  =  " 200 "    hauteur  =  " 200 "  >  

⚠️ Gardez à l'esprit que cette méthode ne fonctionne que pour les navigateurs modernes .

Pour accélérer encore plus votre application, vous pouvez également charger paresseusement vos scripts tiers. Voici une fonction simple qui inclut une promesse que vous pouvez utiliser pour y parvenir:

 export   const   loadScript   =   function  ( src  ] force  =   false )   {
   return   new   Promise  ( function  ( resolution  rejeter )   {
         laisser  existingEl  =  document .  querySelector  ( `script [src="http://wwwtelerikcom/ $ { src }   "]`  ) ; 

         if   (  existingEl  &&  !  force )   {
             if   ( existingEl .  classList .  ] contient  ( "est en cours de chargement" http://www.telerik.com/[19659043Often)[19659043Often)[19659039Oft{
                existingEl .  addEventListener  ( "load" http://www.telerik.com/[19659043edral resolution ) ; 
                existingEl .  addEventListener  ( "error" http://www.telerik.com/[19659043edral refuse ) ; 
                existingEl .  addEventListener  ( "abort" http://www.telerik.com/[19659043unity refuse ) ; 
            } [19659038] else   {
                 resolution  () ; 
            } 
             return ; 
        } 

         const  el  =  document .  createElement  ( "script" http://www.telerik.com/[19659043edral)[19659043Often;

        el .  type  =   "text / javascript" http://www.telerik.com/[19659043[];
        el .  async   =   true ; 
        el .  src  =  src ; 
        el .  classList .  add  ( "is-loading" http://www.telerik.com/[19659043edral)[19659043Often;

        el .  addEventListener  ( "load" http://www.telerik.com/   ()   =>   { 
            el .  classList .  remove  ( "is-loading" http://www.telerik.com/[19659043Often)[19659043Often;
             résoudre  () ; 
        } ) ; 

        el .  addEventListener  ( "error" http://www.telerik.com/[19659043edral rejeter ) ; 
        el .  addEventListener  ( "abort" http://www.telerik.com/[19659043edral refuse ) ; 

        document .  head .  appendChild  ( el ) ; 
    } ) ; 
} [19659139] Maintenant, 🤓 nous pouvons charger n'importe quel script comme celui-ci: 

 loadScript  ( "myscript.js" http://www.telerik.com/[19659043unity)[19659043unity puis  ( ()   =>   {
   console .  log  ( "script chargé" http://www.telerik.com/[19659043edral)[19659047[/19659043)[19659304[19659043 ( "myscript.js" http://www.telerik.com/[19659043[] )
console .  log  ( "script chargé" http://www.telerik.com/[19659043edral)[19659139Oftensilescriptexistedéjàdanslapageilsechargeraunedeuxièmefois
 Astuce # 8: Aidez les utilisateurs à savoir où ils se trouvent sur votre site Web 🧭: Utilisez Breadcrumbs (Vue & Nuxt) 
  < template > 
   < div  class [19659015] =  "flex items-center px-4 py-2 mb-6 bg-gray-200 border arrondi select-none" http://www.telerik.com/[19659015[/19659015] div v  -  pour  =  " (item, index) in itemsWithHome " :  key  = " item.label "  class  = " flex items-center "http: // www .telerik.com / > 
       < composant
        :  est  =  "item.to? 'Nuxt-link': 'div'" "
        :  class  = "  [
           {
             'font-bold "http://www.telerik.com/[19659043</font>: index  +   1  ! ==  itemsWithHome .  longueur 
            underline :  index  +   1   ===  itemsWithHome .  length
          } 
        ]  "
        :  à  =  "item.to" 
         class  =  "text-xs uppercase shadow-none last: mr-0" 
      > [19659109] { { item .  label } } 
       < /  component > 

       < span  class  =  "mx-1" http://www.telerik.com/[19659015</font>>>[19659015Often<[19659015</font>/[19459004Often[19459010[19659013)] < /  div > 
   < /  div > 
 < /  template > 

 <  script > 
 export   par défaut   {
  calculé :   {
     itemsWithHome  ()   {
       const  routeItems  =   this .  $ route .  chemin .  split  ( '/ "http://www.telerik.com/[19659043Often)[19659043[19659079] ( ( item )   =>  item ) 
       const  nonRouteItems  =   [ 'lists "http : //www.telerik.com/ ] 

       const  items  =   [
         {
          label :   'Accueil "http://www.telerik.com/[19659043[/19459004]
          lien :   {
            nom :   'homepage' 
          } 
        } 
      ] 

      
      routeItems .  forEach  ( ( routeItem  index )   =>   {
         if   (  index  ===   0 )   {
          éléments .  push  ( {
            label :  routeItem 
            à :   {
              nom :  routeItem
            } 
          } ) 
        }   else   {
           const  item  =   {
            label :   this .  $ filters .  unslugify  ( routeItem ) 
          } 

           if   ( !  nonRouteItems .  inclut  ( routeItem ) )   {
            élément .  à  =   {
              name :   this .  $ route .  name 
              params :   this .  $ route .  params
            } 
          } 

          articles .  push  ( item ) 
        } 
      } ) 

       return  items
    } 
  } 
} 
 < /  script > 
 Astuce # 9: Utilisez des accordéons pour compresser du contenu volumineux pour les petits appareils (Vue & Nuxt) [19659052] 
 Les accordéons sont probablement votre meilleur choix 👌 lorsqu'il s'agit d'organiser plusieurs informations dans des interfaces conçues pour les petits appareils. ] Ils réduisent la quantité de contenu affiché et les gens savent déjà qu'il suffit de cliquer dessus pour en savoir plus sur la section.
 Si vous ne les utilisez pas encore dans votre application et / ou ne Je ne sais pas comment les implémenter, 👉🏼  consultez cet exemple Codepen .
 Astuce n ° 10: Autorisez l'utilisateur à partager 📢 Pages avec du contenu filtré en ajoutant des paramètres de filtre à vos URL (Vue & Nuxt)
 C'est une astuce intéressante que j'ai apprise de mon mari lorsqu'il implémentait un système de segmentation pour son CRM. 🌝 Lorsqu'un utilisateur commence à utiliser des filtres, vous pouvez enregistrer les paramètres dans l'URL, ce qui vous donne quelque chose qui ressemble à ceci:
 https://www.mywebsite.com/companies/?c1=country,fr,equals, ou & c2 = social_networks.name, behance_page, facebook_group, equals et & page = 1
 Ainsi, lorsque l'utilisateur a besoin de partager un résultat de recherche filtré avec un collègue, il lui suffit de lui envoyer le lien (sans avoir à lui donner aucune information supplémentaire) 😎 et l'application peut le reconstruire exactement tel qu'il était en lisant chaque condition à l'intérieur des paramètres de requête.
 Faites ceci, et vous faciliterez la vie de votre utilisateur lorsqu'il souhaite partager une page spécifique avec ses collègues ou l'enregistrer pour plus tard. 😜
 🙌🏼 C'est tout pour moi aujourd'hui!
 J'espère que ces conseils vous aideront à améliorer l'expérience utilisateur de votre application. Si vous essayez continuellement d'améliorer votre UX, vos clients utiliseront votre application et vous aimeront encore plus à chaque amélioration incrémentielle que vous apportez! 🖤 ​​🔜 💲
 Vous pouvez commenter ci-dessous cet article si vous souhaitez partager l'un de vos conseils UX. Vous pouvez également me joindre sur Twitter  @RifkiNada .