6

I am working on a lyrics site. The site is very much a work in progress. This is a re-write of the site. On the old site, Google Analytics informed me that 90% of my users were mobile users. So that is what I'm 100% concentrating on.

Here's the mobile experience that I currently have in mind.

enter image description here

My next thing to work on is search. What I currently have in mind is this:

search button on site

Once you click that yellow search button, the whole thing slides left, and you get an input box to start searching.

This search will be searching for both lyrics and artists. I need help on the best way of displaying those results to the user.

The user must know what result is an artist and what result is a lyric. Right now, what I have in mind is something like:

search results

But I am not sure if it works well. I feel like there's not enough distinction between a lyric result and an artist result.

Is this a good way? If not, what is a better way?

Improve this question
6
  • 1
    do you have an order in the results (all artists on top)? if yes, you can label the category of resutls, e.g. Artists: and then Songs:... if not, you could try labeling each result (if there is not enough space you an experiment with background colors or icons and test with users...)
    – Aprillion
    Commented May 19, 2019 at 11:25
  • I could get the API call to return to separate lists, one for artists and one for lyrics. That wouldn't be a problem, but I'm more curious on what would be the best way to display the results. Background colour is a good suggestion, I'll have a play.
    – J86
    Commented May 19, 2019 at 11:43
  • Just a side note, not sure if you already did this but I would recommend that you also create a scenario where the song / artist / band name do not fit in the blue box. I feel that the design you made is to much in a perfect scenario at the moment. What happens when the name is for instance 'The Doors of Perception' or 'One Man Army And The Undead Quartet' (I just googled long band, not sure what kind of music it is).
    – Kevin M.
    Commented Feb 20, 2020 at 10:33
  • To help with making a decision on awarding the bounty, is it possible for you to provide a tick to accept an answer?
    – Michael Lai ♦
    Commented Feb 21, 2020 at 6:51
  • Does your users acually do search or they come directly from google on specific lyrics page? To be honest sounds like you solving false problem
    – ADOConnection
    Commented Feb 21, 2020 at 14:43

6 Answers 6

Reset to default
3

How about something like this. It has two tabs with the search results. Artist and Song are the tabs labels.

enter image description here

Improve this answer
2

You just need to have titles clear enough in search results to separate type of entries... This picture is example of how is done on "UX planet" site

Improve this answer
1
  • On small screen sizes this can be challenging to pull off. Here's how things look on my iPhone SE.
    – J86
    Commented Feb 24, 2020 at 13:57
1

As others have suggested, you will need to present segmented search results. The most popular music apps like Spotify and Apple Music already do this quite well and I would encourage you to study those apps and implement a similar design pattern so your users don't have to learn a new approach.

Improve this answer
0

In general, I agree with what @Aprillion mentioned in the comments. Some other suggestions seem to be more suitable for websites. An integrated search for both songs and artists, with differentiation via background color and/or icons would be best since this is a mobile app with precious limited screen real-estate, though I would personally prefer icons as it will look cleaner.

Also I find the yellow search button placement confusing. In your example, it might mislead the user to think that the search is for 'Canaan Smith' only. It is probably good to have a 'filter' selector for the user to filter only artists, lyrics, or both, and a 'sorting criteria' selector, in case the search results are too many.

In order to incorporate these elements, it would be better to place the yellow search button at the top. Below is what I came out with based on your original designs

enter image description here enter image description here

Improve this answer
1
  • On your screens it is hard to distinguish which blocks of content relate to which part of the question. Keep in mind that the OP is asking about distinguishing the results.
    – mentallurg
    Commented Feb 28, 2020 at 18:52
0

Use a combination of Labels and Tags. Labels will identify each result when presented together and the Filter Tags will let the user filter the results as they wish.

Material Design use this method called Filter Chips: enter image description here

With these tags, the user can select options like checkboxes and can be used in combination with the search function. enter image description here

This method is better than using tabs or icons as they are not scalable. with this approach, if there are more entities to include in the future, it can be done easily.

enter image description here

Reference: https://material.io/components/chips/#filter-chips

Improve this answer
4
  • The question is The user must know what result is an artist and what result is a lyric. You approach only allows to include particular entries into result or to exclude them. But it does not allow to easily distinguish what is an artist and what is a lyric,
    – mentallurg
    Commented Feb 28, 2020 at 18:51
  • @mentallurg Read my answer properly, the label attached to the individual search results delineate the result types clearly. it's written in plain English. Not sure what exactly is your confusion is.
    – Sooraj MV
    Commented Feb 28, 2020 at 19:06
  • According to the design, the user has still has to read the text / labels to know what is what. It has the same problems as the screen in OP.
    – mentallurg
    Commented Feb 28, 2020 at 19:08
  • ... and the 1st part of the answer regarding filter labels is per se OK, but it doesn't seem to be relevant to the question from the OP.
    – mentallurg
    Commented Feb 28, 2020 at 19:10
-2
  1. Provide separate search, so that user either searches for lyrics or for artists.
  2. Provides configuration option so that user decides what has higher relevance, like "lyrics first", "artists first".
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.