web-dev-qa-db-fra.com

Comment suggérer visuellement au spectateur qu'il y a plus que ce qui paraît à l'œil d'une manière élégante et soignée?

Du point de vue de la conception de l'expérience utilisateur, quelle serait une bonne façon de faire savoir au spectateur, ou mieux, je veux que l'utilisateur "l'obtienne comme il le voit" sans autre explication que ce que je montre n'est pas le tout image, c'est juste un recadrage (c'est-à-dire une petite zone de l'image entière). Mais en même temps, l'utilisateur doit savoir que cela fait partie d'une image plus grande et il doit avoir une idée de la quantité d'image "invisible" qui existe.

J'ai besoin de quelques exemples .. des conseils, vous pouvez être large ... donner des exemples d'autres domaines.

Je joins une capture d'écran de ce que j'ai jusqu'à présent, la façon dont je l'ai fait est que j'ai ajouté un cadre de l'image entière, puis à l'intérieur de ce cadre, il y a ce recadrage dont je parlais .. Mais je ne suis pas si satisfait de le résultat, je suis à court d'idées. Toute aide est très appréciée.

ne plus grande partie de l'image sera révélée lorsque l'utilisateur interagit avec elle de différentes manières.

enter image description here

J'ai également posé cette question sur le site Web Graphic Design StackExchange .. Je trouverai un moyen de lier les réponses si quelque chose de bon en sort.

MERCI.

7
Flavius Frantz

Une façon d'améliorer l'efficacité de la découpe est d'augmenter la différence entre le ' figure et sol ' et cela peut être fait en ajoutant une perception de la profondeur en utilisant des ombres portées pour éloigner la superposition en tant qu'entité distincte à l'image ci-dessous.

Par exemple: enter image description here

11
Roger Attrill

Une approche que vous pouvez adopter consiste à estomper la partie de l'image tout en affichant un teaser afin que les utilisateurs sachent qu'il y a plus à ajouter à une image. Voici un exemple que j'ai fait:

enter image description here

Un site Web qui utilise cela à bon escient pour inciter les utilisateurs à s'inscrire est quora comme indiqué ci-dessous

enter image description here

Notez, il y a des avantages et des inconvénients à simplement montrer un contenu partiel pour amener les utilisateurs à s'inscrire comme mentionné dans cette question Afficher le contenu partiel des utilisateurs pour les inciter à s'inscrire? mais je pense que vous devriez aller bien depuis vous montrez juste un teaser et ne les forcez pas à vous inscrire pour voir le tout.

7
Mervin

Vous pouvez mettre une image de fond avec votre logo ou des panneaux de signalisation

enter image description here

2
sergeydyadyul

Exemples/idées

Puzzle

Utilisez une forme de puzzle pour indiquer qu'il reste des puzzles à découvrir.

Décoller le papier

Peel off paper effect

Scratch Hint

Appoday

Overlay effect

2
Ivan Chau

J'utiliserais un image ou texture d'arrière-plan générique qui est choisi de sorte qu'il n'y ait pas de confusion entre celui-ci et la vraie carte ou image, tout en empêchant les blocs stark sur blanc que vous avez actuellement.

Une possibilité consiste à choisir une texture en niveaux de gris bien sûr pendant que l'image focale est en couleur.

Quelque chose comme celui-ci: enter image description here

2
JohnGB

Vous pouvez accomplir cette tâche de manière dynamique si vous commenciez par afficher toute la zone que l'image remplirait, puis après un retard, zoomez sur la partie que vous souhaitez qu'ils voient en premier. Cela leur indiquerait explicitement qu'ils ne voient pas le tout.

Une autre option si l'expérience est interactive est de placer des flèches près des bords. Cela indique à l'utilisateur qu'il y a plus que ce qu'il voit actuellement et lui donne également une méthode conventionnelle pour le voir.

Si vous révélez aux parties utilisateur de l'image en réponse à d'autres entrées (par exemple: les temps de chargement ou les réalisations), un ensemble de tuiles vierges qui sont supprimées pour découvrir l'image au fur et à mesure de la progression communiquerait également le message souhaité.

J'aurais besoin de plus de détails sur les raisons pour lesquelles vous restreignez la partie visible de l'image et sur ce qui doit se produire pour étendre cette partie avant de suggérer d'autres solutions possibles.

De quelles autres façons l'utilisateur interagirait-il avec elle? Les méthodes que l'utilisateur devra utiliser pour interagir avec votre image informeraient grandement toutes les idées sur la façon de suggérer qu'il ne voit pas l'image entière.

2
brnnnrsmssn

Je voudrais vraiment savoir:

une. Quelle est la raison d'afficher la moitié de l'image? b. L'utilisateur doit-il faire quelque chose (acheter, attendre, terminer un puzzle/une tâche) pour voir le reste de l'image. c. Quand l'utilisateur pourra-t-il voir l'image complète?

dans le scénario actuel, l'utilisateur novice peut penser que l'image est trop lourde ou bloquée

cependant, vous pouvez penser aux solutions suivantes:

  1. Afficher l'image avec une icône de verrouillage, vous pouvez fournir une info-bulle sur la souris sur l'icône de verrouillage. enter image description here

  2. comme suggéré par "Roger Attrill", vous pouvez utiliser l'ombre portée.

1
Awesh

Le Overflow Pattern est vraiment bien pour ce problème.

Autrement dit, vous laissez une suggestion qu'il y a plus à révéler sur le côté de votre conteneur.

Je ne peux pas vraiment dire ce que vous essayez de réaliser à partir de votre image; Je pense que quelque chose comme ça pourrait vous aider?

1

0
Jon Gold