web-dev-qa-db-fra.com

Meilleure façon de fournir des fonctions d'ajout / suppression de lignes et de colonnes d'une matrice dans une application pour smartphone

Je construis une calculatrice matricielle pour Android et j'ai du mal à concevoir une interface utilisateur graphique intuitive en raison de l'espace limité dont je dispose sur l'écran d'un smartphone.

Les 30% supérieurs de l'écran sont pris par une barre d'aperçu et les 10% inférieurs sont occupés par un panneau de contrôle (Annuler, Rétablir, Exporter, etc.), me laissant avec les 60% du milieu de l'écran pour la saisie de données. J'ai rendu la région glissable. L'utilisateur n'a qu'à interagir avec une seule grille matricielle à la fois; ensuite, ils peuvent balayer vers la gauche pour ajouter des données dans la suivante (ils peuvent toujours revenir pour apporter des modifications).

General GUI framework

Le problème auquel je suis confronté est de fournir une manière élégante d'ajouter/supprimer des lignes et des colonnes de la matrice actuelle. Les matrices dans la portée sont rectangulaires et ne nécessitent pas de contrôles pour chaque ligne et colonne.

  • J'ai considéré un système de boutons, situé en haut (Ajouter une ligne), en bas (Supprimer la ligne), à ​​gauche (Ajouter une colonne) et à droite (Supprimer la colonne) de la matrice.
  • Une région pouvant être glissée, dans laquelle l'utilisateur glisse vers le haut, le bas, la gauche ou la droite pour ajouter/supprimer des lignes et des colonnes d'une manière similaire au système de boutons. Mais je compte déjà sur les balayages pour naviguer entre les matrices (je peux cependant isoler les auditeurs de balayage)
  • Et un panneau de contrôle à gauche, à droite ou en bas de la matrice avec tous les boutons d'ajout/suppression. Le problème avec celui-ci semble qu'il ne sera pas "naturel" et peut provoquer des tapotements accidentels.

L'une des exigences des contrôles est qu'ils doivent être uniques à chaque matrice. Il n'est donc pas question de composants comme un tiroir de navigation.

L'espace pour adapter les composants est assez limité, d'autant plus que d'autres composants seront également présents autour de la matrice, tels que

  • Signe de la matrice - Un bouton qui alterne entre + et - lors des pressions
  • Multiplicateur scalaire - Une simple zone de texte
  • Opérateur entre matrices - Un bouton qui alterne entre +, -, *,/signes
  • Liste déroulante offrant des fonctions en un clic (Inverse, Transpose, etc.)
  • Et éventuellement un bouton pour ajouter plus de matrices à l'équation

Je ne sais pas si c'est le bon endroit pour cette question, mais c'est le meilleur que j'ai pu trouver. Toute aide/conseil sera très apprécié.

EDIT - Un exemple de User Story pour ajouter plus de contexte

L'utilisateur veut trouver le résultat de l'équation Sample Matrix Equation]

  • L'utilisateur ajoute des lignes/colonnes selon les besoins dans la grille, pour obtenir la taille souhaitée pour leurs matrices
  • L'utilisateur entre la première matrice et ajoute un multiplicateur scalaire 3
  • L'utilisateur glisse vers la gauche et ajoute la deuxième matrice
  • L'utilisateur appuie sur le bouton signe pour rendre la matrice négative
  • L'utilisateur appuie sur la liste déroulante et sélectionne Transpose pour transposer immédiatement la matrice
  • Enfin, ils tapent sur le bouton Calculer et reçoivent le résultat
4
Paras

enter image description here

UNE ICÔNE APPROPRIÉE POUR VOUS ...

C'est du tableur que j'utilise ...
enter image description hereenter image description here
à gauche sont la taille réelle.
En les combinant en un seul, je reçois quelque chose comme ... enter image description here

et ici c'est en bleu
enter image description here

Juste une idée que vous pourriez utiliser pour un bouton flottant "action" et des boutons de plateau si vous allez de cette façon.
Bonne chance.

1
Jedi Commymullah

Je ne comprends pas bien toutes les fonctionnalités que vous essayez d'accomplir/fournir, mais je sais que vous aurez du mal à tout faire sur un petit écran de telle sorte que toutes les options soient toujours visible. Il existe plusieurs façons d'ajouter des composants/fonctionnalités à votre application, mais et comment vous les ajoutez dépend fortement de:

  • Fréquence d'utilisation de chaque composant
  • S'il fournit un contexte/info qui devrait toujours être visible
  • Quels composants sont logiques pour grouper logiquement
  • Actions nécessitant plus d'un point d'entrée pour fonctionner

Tout en considérant ces points pour chacun de vos composants, vous avez les options suivantes pour ajouter plus de composants à l'écran:

Faites glisser les volets

Les volets coulissants sont assez courants. La plupart des utilisateurs les connaissent comme moyen de naviguer dans l'application, mais ils sont également utiles pour les composants/paramètres.

Différents "états" où l'interface utilisateur est transformée pour "l'état" actuel

Par exemple, un utilisateur appuie sur "Ajouter une ligne", puis la grille est appelée avec une superposition modale couvrant le reste des composants. La ligne suivante tapée dans la grille appelée a une ligne ajoutée au-dessus. L'État est alors rejeté et la superposition modale disparaît. (Cela peut également être utilisé pour basculer les contrôles groupés dans la barre de contrôle)

Panneau de configuration à défilement

La partie inférieure de 10% "Panneau de configuration" de votre écran. Si vous avez un quelques-uns plus de composants que ce qui peut en contenir, faites-le défiler horizontalement. Android le fait déjà nativement avec ses paramètres d'activation/désactivation.

Exemple de volet coulissant

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Je me rends compte que je n'ai pas répondu à votre question exactement, mais j'espère que cela fournit suffisamment d'informations pour obtenir votre baratte de nouilles. Si vous avez besoin de moi pour développer quelque chose, ou si vous avez besoin de précisions supplémentaires, faites-le moi savoir!

Exemple d '"États"

mockup

télécharger la source bmml

1
Daniel Brown