java eclipse - Les meilleurs conseils pour concevoir des interfaces graphiques?





netbeans exemple (9)


Une fois la conception terminée: demandez à quelques personnes de s'asseoir devant votre logiciel et laissez-les essayer de résoudre une tâche pour laquelle votre logiciel a été conçu (un par un, pas tout à la fois…). C'est absolument incroyable ce que vous allez apprendre en les regardant.

Si possible, les testeurs doivent correspondre au profil de votre groupe de clients typique. Le plus de personnes que vous pouvez trouver pour ce type de test de convivialité sont les meilleures, mais même une simple poignée de personnes par itération de produit m'a été très utile par le passé.

Il y a quelque temps, j'ai lu (avant que je ne le perde) un livre génial intitulé GUI Bloopers qui contenait de nombreux exemples de mauvaise conception graphique, mais aussi plein de détails utiles, comme Ne pas appeler quelque chose .

Quels conseils donnerais-tu pour concevoir / documenter une interface graphique? Il serait particulièrement utile d’entendre parler des widgets que vous avez conçus pour créer des informations lisibles dans un espace aussi réduit que possible.

Je vais le faire avec un des miens: évitez les arbres (par exemple JTree de Swing) à moins que vous ne puissiez vraiment pas l'éviter, ou ayez une hiérarchie de choses illimitée. J'ai constaté que les utilisateurs ne les trouvent pas intuitifs et qu'ils sont difficiles à naviguer et à filtrer.

PS Je pense que cette question diffère de celle-ci car je demande des conseils généralistes




Pour résoudre votre problème avec JTree (avec lequel je suis d’accord), vous devriez vous pencher sur l’utilisation de listes vitrées si vous souhaitez une interaction JList et JTable agréable dans votre application: http://publicobject.com/glazedlists/

Vous obtenez beaucoup de fonctionnalités (en-têtes de table triables, par exemple) avec quelques modifications de votre code.

En dehors de cela, restez simple.







N'oubliez pas que le but de l'utilisateur n'est pas d'utiliser votre programme. Leur objectif est autre chose, et votre programme est simplement un outil pour les aider à atteindre cet objectif. Faites de votre mieux pour les rendre réussis et heureux.




Utilisez le moins possible d'interface utilisateur.

Je pense que nous oublions que les ordinateurs sont des machines d’ information, c’est-à-dire qu’ils sont censés fonctionner pour nous .

Avez-vous déjà vu Shazam sur l'iPhone? Il a pratiquement un bouton. Vous appuyez dessus, tenez le téléphone sur un haut-parleur en train de jouer une chanson et, en 10 secondes environ, il vous indiquera quelle chanson joue.

Incroyablement utile, pratiquement aucune interface utilisateur. Tout le dur travail continue sous.




Juste une astuce plutôt concrète que j'ai eue une fois grâce à un technicien talentueux:

Lorsque vous avez un dialogue / formulaire avec des boutons, des champs de texte, des listes, etc., essayez de garder un espace cohérent et symétrique entre eux. Par exemple, essayez d'utiliser la même distance entre les widgets dans toutes les directions, et si un groupe de widgets est séparé d'un autre en augmentant l'espace entre les groupes, essayez de faire de cet espace une copie de l'espace entre les contrôles des groupes. Par exemple, si tous les boutons d'une section sont séparés par 16 pixels dans toutes les directions, essayez de placer le plus grand espace dans le groupe suivant, 32, 64, 128 pixels environ.

Il est beaucoup plus confortable pour l'œil humain d'interpréter quelque chose qui est lié à une symétrie distincte.

Depuis que je l'ai essayé, j'utilise toujours cette méthode avec de très bons résultats. Je suis même retourné et j'ai retravaillé des interfaces graphiques plus anciennes et j'ai été surpris de voir un tel remodelage uniquement à partir de cet ajustement.

MODIFIER:

J'ai oublié de mentionner une leçon importante que j'ai apprise de la méthode ci-dessus:

Lorsque vous organisez tous les widgets en fonction de ce système (en particulier lors du traitement d'anciennes interfaces graphiques encombrées), vous risquez de manquer de place et votre boîte de dialogue doit être gonflée. À un moment donné, on peut avoir l'impression que la boîte de dialogue devient trop volumineuse (par exemple, en bloquant l'interface graphique d'arrière-plan associée ou les widgets associés se terminant trop loin l'un de l'autre). Cela pourrait être un bon indicateur que vous devriez peut-être diviser le dialogue en onglets, déplacer des éléments dans le menu ou simplement en faire un concept de type assistant, etc.

Cela n'a rien à voir avec l'espacement des widgets mais touche le sujet de moins-interagir avec lequel l'utilisateur peut interagir à tout moment. Il est intéressant de noter que lorsque vous commencez à faire les choses correctement, cela "fait des vagues" et vous oblige parfois à faire plus de choses (un peu comme si vous corrigiez la précision des constants: p).




eh bien je suis personnellement ces règles simples:

  • être cohérent tout au long de l'application NE CHANGEZ PAS LE COMPORTEMENT / LA MISE EN PAGE
  • flux d'informations: de haut en bas de gauche à droite (dans les pays occidentaux)
  • pas trop d'informations sur une page (comme une présentation ppt)
  • grandes lettres (pour que les personnes âgées puissent les lire aussi)
  • KISS (quiconque peut utiliser un magnétoscope peut utiliser cette page / formulaire / etc.)
  • utiliser des couleurs relaxantes comme le bleu, le vert, etc. (pas de rouge vif ou de rose fluo)
  • Structure (peut changer de cap mais comme première ébauche la plupart du temps):
    • top -> navigation / menu
    • gauche -> navigation / info
    • milieu -> contenu
    • bottom -> status
    • en bas à droite -> boutons



Ne changez pas les couleurs par défaut. C'est important pour les personnes daltoniennes .




Ignorer et ignorer la méthode d'extension pour .NET 3.5+

using System;
using System.Windows.Forms;

public static class ControlExtensions
{
    /// <summary>
    /// Executes the Action asynchronously on the UI thread, does not block execution on the calling thread.
    /// </summary>
    /// <param name="control"></param>
    /// <param name="code"></param>
    public static void UIThread(this Control @this, Action code)
    {
        if (@this.InvokeRequired)
        {
            @this.BeginInvoke(code);
        }
        else
        {
            code.Invoke();
        }
    }
}

Cela peut être appelé en utilisant la ligne de code suivante:

this.UIThread(() => this.myLabel.Text = "Text Goes Here");






java design user-interface swing