Comment afficher les résultats d'une recherche qui recherche dans deux entités
Je travaille sur un site de paroles . Le site est un travail en cours. Il s'agit d'une réécriture du site. Sur l'ancien site, Google Analytics m'a informé que 90% de mes utilisateurs étaient des utilisateurs mobiles. C'est donc sur quoi je me concentre à 100%.
Voici l'expérience mobile que j'ai actuellement en tête.
Ma prochaine chose à travailler est la recherche. Ce que je pense actuellement, c'est ceci:
Une fois que vous avez cliqué sur ce bouton de recherche jaune, le tout glisse vers la gauche et vous obtenez une zone de saisie pour commencer la recherche.
Cette recherche recherchera à la fois des paroles et des artistes. J'ai besoin d'aide sur la meilleure façon d'afficher ces résultats à l'utilisateur.
L'utilisateur doit savoir quel résultat est un artiste et quel résultat est une parole. En ce moment, ce que je pense, c'est quelque chose comme:
Mais je ne sais pas si cela fonctionne bien. J'ai l'impression qu'il n'y a pas assez de distinction entre un résultat lyrique et un résultat d'artiste.
Est-ce un bon moyen? Sinon, quelle est la meilleure façon?
Que diriez-vous quelque chose comme ça. Il a deux onglets avec les résultats de la recherche. Artiste et chanson sont les étiquettes des onglets.
Vous avez juste besoin d'avoir des titres suffisamment clairs dans les résultats de recherche pour séparer le type d'entrées ...
Comme d'autres l'ont suggéré, vous devrez présenter des résultats de recherche segmentés. Les applications musicales les plus populaires comme Spotify et Apple Music le font déjà très bien et je vous encourage à étudier ces applications et à mettre en œuvre un modèle de conception similaire afin que vos utilisateurs n'aient pas à apprendre une nouvelle approche.
En général, je suis d'accord avec ce que @Aprillion a mentionné dans les commentaires. Certaines autres suggestions semblent plus adaptées aux sites Web. Une recherche intégrée pour les chansons et les artistes, avec une différenciation via la couleur d'arrière-plan et/ou les icônes serait la meilleure car il s'agit d'une application mobile avec un précieux espace d'écran limité, bien que je préfère personnellement les icônes car elles seront plus propres.
Je trouve également que le placement du bouton de recherche jaune prête à confusion. Dans votre exemple, il peut induire l'utilisateur en erreur en pensant que la recherche porte uniquement sur "Canaan Smith". Il est probablement bon d'avoir un sélecteur de "filtre" pour que l'utilisateur ne filtre que les artistes, les paroles ou les deux, et un sélecteur de "critères de tri", au cas où les résultats de la recherche seraient trop nombreux.
Afin d'incorporer ces éléments, il serait préférable de placer le bouton de recherche jaune en haut. Ci-dessous ce que je suis sorti avec basé sur vos conceptions originales
Utilisez une combinaison d'étiquettes et de balises. Les étiquettes identifieront chaque résultat une fois présentées ensemble et les étiquettes de filtre permettront à l'utilisateur de filtrer les résultats comme il le souhaite.
Material Design utilise cette méthode appelée Filter Chips: 
Avec ces balises, l'utilisateur peut sélectionner des options telles que des cases à cocher et peut être utilisé en combinaison avec la fonction de recherche. 
Cette méthode est meilleure que l'utilisation d'onglets ou d'icônes car ils ne sont pas évolutifs. avec cette approche, s'il y a plus d'entités à inclure dans le futur, cela peut être fait facilement.
Référence: https://material.io/components/chips/#filter-chips