Design d'application d'éditeur vidéo : refonte d'un écran de montage, avant et après

Un éditeur vidéo a une seule mission : laisser quelqu'un façonner une vidéo en la regardant. Le premier jet ci-dessous contient tous les outils qu'un créateur pourrait réclamer, mais l'image est minuscule entre des bandes noires, quatorze petits outils se disputent le pouce, les pistes n'ont aucun nom et une barre d'onglets occupe de la place sur un écran que personne ne cherche à quitter.

La correction garde chaque fonction et rend la place à la vidéo. Elle s'inspire de l'éditeur de l'app Edits d'Instagram, et chaque changement ci-dessous est copiable.

L'écran complet, avant et après

Brouillon de junior

Corrigé

À gauche, la vidéo est le plus petit élément de l'écran. L'image est une bande de 164 px de large entre des bandes noires, et presque tout le reste est un contrôle : quatre menus déroulants, quatorze outils, cinq boutons, cinq curseurs, une rangée de médias et une bannière de mise à niveau.

À droite, l'écran se lit de haut en bas dans l'ordre où travaille un créateur : quitter ou exporter, regarder l'image, déplacer la tête de lecture, choisir un clip, agir dessus. L'aperçu fait 390 par 404, le texte va de 11 à 17 px contre 7 à 11 px dans le brouillon, et il n'y a pas de barre d'onglets.

Ce qui a changé, mesuré

Correction 1 : réduire la barre du haut à l'essentiel

Avant

Après

Une flèche de retour, le logotype Cutline, le nom Untitled Project 1 (edited), puis des icônes annuler, rétablir, aide et réglages et un petit bouton orange EXPORT 1080P. Contre une simple icône de fermeture, le nom Road trip avec un chevron, 1080p et un bouton Exporter corail plus grand.

La barre du brouillon contient huit éléments dans 26 px de hauteur, et le nom du projet est écrasé par un logotype dont personne n'a besoin dans son propre éditeur. Exporter est le bouton le plus important de l'écran, et c'est aussi l'un des plus petits, une minuscule pilule au coin extrême.

La barre corrigée garde quatre choses : fermer, le nom, la qualité et Exporter. Exporter fait 33 px de haut avec un seul aplat corail, c'est donc le seul objet bruyant en haut. Le chevron à côté du nom ouvre le menu du projet, où vivent désormais l'aide, les réglages, la boucle et la mise à niveau. Annuler et rétablir sont descendus près de la tête de lecture, là où la main se trouve déjà.

Règle à réutiliser : la barre du haut répond à « où suis-je et comment je termine ». Tout le reste va derrière le nom.

Correction 2 : donner toute la largeur à la vidéo

Avant

Après

Un cadre court avec des bandes noires de chaque côté et une image portrait d'un van orange au milieu, large de 164 px. Contre la même image remplissant toute la largeur, 390 px de large et 404 de haut, avec des coins carrés et aucun contrôle par-dessus.

Un éditeur vidéo qui montre la vidéo en petit a mal compris son propre travail. Dans le brouillon, le cadre est en 16:9 et l'image en portrait, donc les bandes noires mangent plus de la moitié de la largeur. Le cadre a aussi une bordure, des coins arrondis, un filigrane et une pilule de timecode dessinés par-dessus l'image.

La correction laisse l'aperçu remplir la largeur de l'écran, sans coins, sans bordure et sans rien dessus. Vous voyez l'image que vous coupez, à une taille où l'on peut juger la netteté et le cadrage. Le timecode est passé sous l'aperçu, et le filigrane a disparu de l'éditeur.

Règle à réutiliser : ce que l'utilisateur est venu modifier doit être l'élément le plus grand de l'écran, sans rien peint par-dessus.

Correction 3 : montrer les outils du clip choisi

Avant

Après

Quatre menus déroulants pour Format 16:9, Qualité 1080p, FPS 30 et Couleur Rec.709, puis quatorze petits outils sur deux rangées de sept avec des libellés de 8 px : Rogner, Couper, Vitesse, Volume, Filtres, Ajuster, Recadrer, Texte, Stickers, Effets, Musique, Voix, Masque et Rotation, et un libellé Clip 2 avec Supprimer, Dupliquer, Copier, Remplacer et Inverser. Contre une seule rangée plate de cinq grands outils, Couper, Volume, Vitesse, Effets et Supprimer, avec un chevron de retour à gauche, qui déborde du bord droit.

Le brouillon met tous les outils à l'écran en même temps, qu'ils s'appliquent ou non à ce que vous avez choisi. Quatorze icônes de 16 px avec des libellés de 8 px, c'est beaucoup à lire et plus petit à toucher, et les boutons du clip se trouvent sur une ligne séparée en dessous.

La correction a deux états. Avec un clip choisi, une rangée plate montre ce que vous pouvez faire sur ce clip : Couper, Volume, Vitesse, Effets, Supprimer et Ajuster, la rangée débordant du bord pour signaler qu'on peut la faire défiler. Le chevron à gauche ramène à la rangée principale avec Texte, Stickers, Musique, Voix, Filtres, Recadrer, Rotation et Masque. Les icônes passent à 22 px en graisse bold et les libellés à 12 px.

Rien n'a été supprimé. Rogner est maintenant la poignée jaune sur le clip lui-même, les propriétés du clip se cachent derrière Ajuster, et le format, la fréquence d'images et la couleur se cachent derrière le bouton de qualité de la barre du haut.

Règle à réutiliser : montrez les outils de ce qui est sélectionné. Un outil qui ne peut pas agir sur la sélection est du bruit.

Correction 4 : rendre la timeline lisible

Avant

Après

Une règle de 00:00 à 00:40, une petite pellicule de cinq images, une piste violette, une piste verte et une forme d'onde verte, sans aucun nom, et une tête de lecture rouge de 1 px. Contre une règle à un zoom plus fin, une piste nommée Film Grain, une piste texte corail appelée Road trip, une piste musique magenta appelée Golden Hour avec une forme d'onde, une pellicule qui déborde des deux bords avec une poignée jaune et une étiquette 10.0s sur le clip choisi, et une seule tête de lecture blanche de 3 px à travers toutes les pistes.

C'est là que vit un éditeur, et le brouillon la traite comme une décoration. Les quatre pistes font 18 px de haut sans étiquette, on ne peut donc pas savoir laquelle est du texte, laquelle de la musique et laquelle un effet sans toucher chacune. La tête de lecture fait 1 px de large, et la pellicule a des vignettes arrondies avec des espaces qui la font ressembler à une rangée d'autocollants.

La timeline corrigée a des pistes nommées : Film Grain, une piste texte appelée Road trip et une piste musique appelée Golden Hour. Chacune fait de 24 à 36 px de haut et court d'un bord à l'autre sans coins arrondis, avec 4 px entre elles.

La pellicule fait 58 px de haut et se lit comme un seul morceau de rushes. Le clip choisi reçoit une poignée jaune avec un chevron et une étiquette de durée, et une seule tête de lecture blanche de 3 px traverse tout.

Le temps est honnête aussi. Le zoom est de 153 pt par seconde, donc la tête de lecture se repose juste après 12 secondes, et le temps sur deux lignes affiche 00:12 au-dessus de 00:48.

Règle à réutiliser : une piste sans nom est un mystère. Étiquetez chaque piste et donnez une seule couleur forte à la sélection.

Les petites corrections

• Pas de barre d'onglets. Un éditeur est un lieu où l'on reste, donc Accueil, Projets, Éditeur, Modèles et Profil cédaient 72 px à une barre que personne ne touche en montant.
• Un accent par fonction. Le corail marque Exporter et la piste texte, le jaune marque le clip choisi. Le brouillon dépense orange, violet, vert et rouge sur des pistes qui ne disent pas ce qu'elles sont.
• Contrôles simples. Les cercles derrière lecture, annuler et rétablir ont disparu. Des icônes simples se lisent mieux sur fond sombre.
• Filigrane et pilule de timecode hors de l'aperçu. Le temps vit sous l'image, et le message du filigrane est passé dans le menu du projet avec le lien de mise à niveau.
• Le zoom est un pincement. Le curseur de zoom et ses plus et moins prenaient une rangée entière, et un pincement sur la timeline fait le même travail.
• Sauter, c'est glisser. Les boutons de saut ont disparu parce que faire glisser la timeline déplace la tête de lecture.
• Ajouter un média, c'est un plus sur la pellicule. Il s'affiche quand aucun clip n'est choisi.
• Échelle typographique. Le texte va de 11 à 17 px au lieu de 7 à 11 px, et la règle de la timeline est en monospace à 11 px pour que les chiffres ne sautent pas.

Auditez votre propre éditeur

Récupérer le fichier Figma

Le fichier gratuit contient le brouillon de junior, l'écran corrigé et chaque élément sous forme de composant.

Fichier Figma gratuit

Refonte d'un écran d'éditeur vidéo, avant et après

Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Comment concevoir l'écran d'un éditeur vidéo mobile ?

Donnez à l'aperçu toute la largeur de l'écran, limitez la barre du haut à un bouton de fermeture, au nom du projet, à la qualité et à un seul bouton Exporter, et mettez les outils du clip choisi dans une seule rangée plate. Ajoutez une timeline avec des pistes nommées et une seule tête de lecture.

Quelle taille doit avoir l'aperçu dans une application de montage vidéo ?

Aussi grand que l'écran le permet, idéalement pleine largeur, sans coins arrondis et sans rien dessiné par-dessus. Une image minuscule entre des bandes noires rend difficile de juger le cadrage et la netteté.

Un éditeur vidéo doit-il avoir une barre d'onglets ?

En général non. Les gens qui montent une vidéo ne cherchent pas à partir, donc une barre d'onglets dépense environ 72 px pour une navigation qu'ils n'utilisent pas. Mettez Accueil, Projets et Modèles derrière le nom du projet ou le bouton de fermeture.

Comment afficher les outils d'un éditeur vidéo sans surcharge ?

N'affichez que les outils qui s'appliquent à la sélection. Avec un clip choisi, une rangée Couper, Volume, Vitesse, Effets, Supprimer et Ajuster suffit, et un chevron ramène à la rangée principale Texte, Stickers, Musique, Voix et Filtres.

À quoi doit ressembler l'interface d'une timeline vidéo ?

Une règle avec des repères de temps, des pistes nommées pour le texte, la musique et les effets, une pellicule qui court d'un bord à l'autre, une poignée sur le clip choisi et une seule tête de lecture large qui traverse toutes les pistes.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'app, Cutline, le projet et les pistes sont inventés. La timeline suit deux vraies captures d'écran iPhone de l'éditeur de l'app Edits d'Instagram, à son propre zoom de 153 pt par seconde.
• Les icônes viennent de Phosphor (MIT). La barre d'état est dessinée d'après une vraie capture d'écran iPhone mesurée.
• Les photos viennent de Pexels : Roman Odintsov, Hector Perez, Thang-Nhat Tran, Airam Dato-on et Sokil.
• Publié d'abord en carrousel sur App Brainy.