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?

  • 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 May 19 '19 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 May 19 '19 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. Feb 20 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 Feb 21 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 Feb 21 at 14:43
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 | |
  • On small screen sizes this can be challenging to pull off. Here's how things look on my iPhone SE. – J86 Feb 24 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 | |
  • 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 Feb 28 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 | |
  • 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 Feb 28 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 Feb 28 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 Feb 28 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 Feb 28 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, privacy policy and cookie policy

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