Pavé tactile ergonomique + disposition des boutons pour la télécommande Smart TV
Je développe une application iOS de contrôle à distance qui sera utilisée pour contrôler un navigateur Web fonctionnant sur un téléviseur intelligent et j'ai besoin d'aide. Je suis intéressé par la façon dont je peux placer les commandes de telle manière qu'elles soient à la fois intuitives et ergonomiques pour une utilisation répétée.
Fonctionnalité indispensable:
- Trackpad (comme Mac - déplacer le curseur, toucher pour cliquer, défilement à deux doigts)
- À distance clavier - utilisez le clavier de l'appareil pour taper du texte dans un champ distant
- Bouton Fermer pour fermer le contrôleur
Agréable d'avoir:
- barre d'adresse avec retour et rechargement
- Possibilité d'ouvrir un téléviseur intelligent à l'écran men
J'essaie de disposer toutes ces fonctionnalités dans un espace variable (famille iPhone de 5 à 6 plus, portrait et paysage).
Mes tentatives jusqu'à présent:
- Le design le plus propre, mais le moins de fonctionnalités et aucune option pour revenir en arrière ou ouvrir le menu. Cette recherche de conception a incité
- Fonctionnalité complète, la mise en page est intuitive (imite Chrome). Les commandes supérieures sont très difficiles à atteindre
- La fonctionnalité partielle, identique à la n ° 2, sera rétablie et rechargée
- Fonctionnalité partielle, pas de barre d'adresse, les utilisateurs confondent le bouton de retour du navigateur avec le bouton X pour fermer le contrôleur.
Existe-t-il de meilleures façons de disposer les boutons de manière ergonomique et intuitive sur un grand écran de téléphone?
Quelques cartes thermiques de référence pour l'ergonomie de l'écran tactile mobile:
Critique rapide:
Richesse des fonctionnalités vs minimalisme ergonomique est un compromis clé ici. Vous voulez que la télécommande soit complète, mais assez simple à utiliser pour ne pas intimider. C'est un équilibre que la plupart des télécommandes n'atteignent PAS.
Les formes circulaires sont problématiques ici . Je comprends pourquoi vous utiliseriez des formes circulaires car elles sont "amicales". Mais une fois que vous avez plusieurs cercles à l'écran, cela commence à être vraiment encombré à moins que les cercles ne soient très soigneusement disposés, généralement dans une structure de grille régulière.
- Votre mise en page comporte des cercles ET des quart de cercles de différentes tailles dans une mise en page non quadrillée, ce qui conduit à une interface désorientante. Regardez l'espace négatif (blanc) dans votre mise en page, par exemple ... c'est un moyen facile de dire à quel point la mise en page est confuse.
Masquer ou afficher les boutons? Différents utilisateurs ont des compétences/besoins différents, il est donc difficile de déterminer s'il faut afficher ou masquer les boutons (par exemple, disposition # 1 vs # 4)
Pourpre sur blanc à contraste élevé provoque des limites très nettes, donc l'interface est un peu discordante.
Une approche conçue (cliquez pour agrandir):
Remarques:
- Utilise des boutons rectangulaires pour un meilleur alignement de la grille et une meilleure utilisation de l'espace. La symétrie verticale et une palette monotone avec moins de contraste apaisent davantage l'interface.
- Crée un grand pavé tactile carré , qui est une priorité de conception pour vous.
Permet à l'utilisateur d'afficher ou de masquer des boutons supplémentaires , en fonction de son niveau d'expertise. Il s'agit d'une approche empruntée à l'interface TouchWiz de Samsung.
- Les boutons sont "collants", donc une fois que l'utilisateur les agrandit ou les cache, ils le restent la prochaine fois que l'on accède à la télécommande. C'est un moyen simple pour les utilisateurs de personnaliser l'interface.
Fournit une barre de navigateur familière qui suit idiomatiquement les navigateurs (Chrom, FF, Safari) que les utilisateurs connaissent déjà.
Conforme à la disposition en forme de pouce que vous avez essayé de concevoir.
BTW J'aime l'approche de gauche beaucoup mieux que l'approche de droite (elle est moins intrusive, respecte mieux la zone du trackpad, etc.), mais j'ai pensé donner 2 alternatives.
Je suis d'accord avec les commentaires mentionnant la nécessité de capturer les fonctionnalités du navigateur fréquemment utilisées mais étant donné les contrôles affichés dans votre maquette (7-8 éléments), je pense qu'une solution possible pourrait se concentrer sur les points suivants:
1. Regroupement des contrôles en un seul endroit: En procédant ainsi, vous pouvez éliminer l'encombrement, conserver une certaine marge de manœuvre pour augmenter l'échelle si vous avez besoin d'inclure des fonctionnalités supplémentaires et ouvrir la voie à:
2. Remise du contrôle aux utilisateurs: avoir des contrôles à un seul endroit pourrait fournir aux utilisateurs des moyens de décider exactement comment ils aimeraient utiliser la télécommande en commandant les articles dans l'ordre qu'ils désirent.
La maquette ci-dessous intègre ces réflexions:
