19

I have a music player where song that is being played is displayed on top side. Often there is a case where name of the song that is being played is long enough that it can't be shown completely due to lack of width.

To counter the situation, I thought of two ways.

1.Overflow text with dots

If song name is big and can't fit in width, ellipsis will be applied to it. If user puts mouse over on the overflown text, complete song name will be displayed in tool tip. Something like this.

enter image description here

2. Marquee

If song name is big and can't fit in width, Marquee will be applied to it. Text will be sliding from right to left so user can know the full title of the song. Something like this.

enter image description here

Question -

Which one of these options is a good UX?

|improve this question
  • 16
    If you marquee, make it user scrollable. – Barry Staes Oct 29 '15 at 11:38
  • 2
    Would this be used on a touchscreen at all? I would argue that that is the deciding factor. 'Hovering' over for a tooltip on a touchscreen I would say isn't great. – Jordan Oct 29 '15 at 13:16
  • anything except a marquee that scrolls constantly by default. – user428517 Oct 29 '15 at 20:37
  • 5
    Don't just use ellipsis. Mobile Spotify does this and all my songs on one play list are called "Beethoven Symphony Number ...". – abligh Oct 30 '15 at 7:33
  • 3
    The example you show is of a bad implementation of a marquee. It looks like there will be a moment when the player displays nothing which doesn't help the user at all (and either side of that too few characters to be much use). Between the end of one iteration and the beginning of the next you only need enough space or some sort of break character (emdash maybe, though even this could occur in a track name) before restarting if you loop. Even if you don't loop, the permanent text should come in soon enough to avoid an empty uninformative box. – Chris H Oct 30 '15 at 9:59
10

Either is good as long as they are both user initiated.

If you can visually pull off ellipsis with tooltip then use that. Just be aware that the tooltip don't extend over the borders of the player, to me that just gives an unfinished touch to it.

I don't think user initiated scroll is that distracting because user knows what is about to happen so there is no element of surprise. User hovers over the partially visible title and the title scrolls in view once, then stops where it started. This is what Spotify does on their desktop player.

|improve this answer
  • 1
    "Just be [careful] that the tooltip do[es]n't extend over the borders of the player[;] to me that just gives an unfinished touch to it." I'd say the exact opposite. – Lightness Races with Monica Oct 30 '15 at 10:51
  • 1
    How do you suggest hover-triggered actions work on touchscreens? – Lightness Races with Monica Oct 30 '15 at 10:52
10

Since the user won't be looking at the title more than once(users in general) and the marque involves a moving text, I feel that you should go for the other option.

Do Marquees Have Good UX?

|improve this answer
  • 4
    Feelings are a very important aspect if you analyze user behavior, but it should not be behind the reasoning by UX experts. “I believe” would be about as bad, “I think” is better, but we should strive for “I know”. – Crissov Oct 29 '15 at 10:12
  • 5
    @Crissov when someone says "i feel", they're not necessarily describing literal feelings. in this case it obviously just means "i think". plus, they provided a link, so it sounds like they really meant "i know". not sure what you're criticizing here ... language relies on context. don't be a robot, use your brain. upvoted. – user428517 Oct 29 '15 at 20:41
4

The marquee can be really distracting. It will also occlude the beginning of the text immediately after it starts. Users may be forced to wait for it start again to read it.

I would push for the ellipsis (or another equivalent visual design) and give the user a way to easily find the name if and when they need to.

|improve this answer
  • Unless the marquee only scrolls once the user hovers... – ErikE Oct 29 '15 at 20:56
  • @ErikE: How does "hover" work on modern devices? – Lightness Races with Monica Oct 30 '15 at 10:53
  • Winamp does a marquee and I have no issue with it at all. It's much better than an ellipsis. "Distracting"? Only if you have some kind of OCD. – Jez Oct 30 '15 at 11:31
  • Or if hover is not available, on touch--as long as there is some indicator that prompts the user to perform the touch, such as an ellipsis. – ErikE Oct 30 '15 at 15:48
2

Neither truncation nor marquee provides a good UX in general, so avoid both. Try to show as much of the info as possible, if it will be of interest to users. Even if users are checking metadata much less than once per track played, they will probably use the other parts of the GUI even less.

Some text lines will be longer than you can reasonably support, though. You would then prefer automatic scrolling (old CNN) or flipping (new CNN) in a scenario where the user avoids interacting with the player, e.g. in a car stereo, and static truncation with overlay or other means of expansion for more interactive setups.

What are the major purposes of a music player?

  • Select which music to play.
  • Control playback (mostly start and stop, but also skip, rewind, repeat etc., maybe volume).
  • Inform about music playing (now, next, before).

Optimize your UI for (your refined version of) that.

Regarding the specific example

You’re wasting a lot of space on the progress bar and additionally have the run time (or time left) on display. Both are usually less important than title info, incl. artist. (For the album, which is also less important, you got cover art and probably a tooltip with name, release year and possibly album artist.) The progress bar, at least, often doubles as a quick seek widget – consider moving the skip buttons next to it since they provide similar functions, and also move the timer there.

Any repeat and randomize controls belong into the playlist view in my opinion, but can also be dropdowns for the play/pause button.

Is that just a mute button? I use system keys for that, but am not sure how important other people find it. You cold probably track button clicks in a beta build to analyze which ones are not needed at all or should be done differently.

|improve this answer
1

There are lots of good answers here.

However, (as you have the standard Windows close and minimize icons I'm going to assume, perhaps wrongly, that this will be a mouse-operated interface) most of the best mouse-operated music interfaces I have seen use the ellipsis as default then show either a tool tip or a marquee on mouse-over. The tool tip will clearly also have a finite spacial limit whereas the marquee will not which is why it often gets chosen for text with an un-knowable length displayed in a limited space.

As for the comment about the progress bar from @Crissov - Are you also using the progress bar as a scrub control? If not then you might want to follow his advice and use another, smaller way to display track progress.

|improve this answer
  • Tooltips can be really quite long so this shouldn't be too much of a problem. And there are plenty of touch screen windows systems around now so the icons don't mean much. A media player is one of the few apps that are likely to be operated by touch on a touchscreen laptop – Chris H Oct 30 '15 at 10:02
  • There are three major releases of desktop Windows optimised for touch-screens. Your assumption of a mouse-operated interface doesn't hold at at all. – Lightness Races with Monica Oct 30 '15 at 10:55
1

In this case I'd go for marquee or even ellipsis right-justified as the default option. The reason is, the user is almost certainly familiar with the song titles, but some albums have different versions of the same song, so with a long title Stack Exchange Blues (impossible to read mix) ellipsis left-justified gets truncated to Stack Exchange Blu and I have no way of knowing which mix it is. With right justified I get sible to read mix) which is less clear at first use, but after I've listened to it it once, I'll remember it, and be able to differentiate it from the other two versions of Stack Exchange Blues I have.

|improve this answer
  • 1
    This seems like a terrible suggestion to me. That's a very rare problem that you're trying to solve, and probably introduces a new problem with about the same rarity (Where you put 'impossible to read mix' after multiple songs). But for typical cases this is just terrible. – Cruncher Oct 29 '15 at 18:03
  • @Cruncher Well, I may be overstating the case, but it is annoyance that should be considered. Some way of easily reading from the beginning to the very end of the song title is needed. – Level River St Oct 29 '15 at 19:12
  • 2
    I'd suggest "Stack Excha...read mix)". Both the leading and trailing portions of the name are likely to contain useful information; it may be hard to guess exactly how to balance content from those portions, but showing a little of both seems better than only doing one or the other. – supercat Oct 29 '15 at 21:10
  • 1
    A smart player could analyze the title. If it contains a pair of parentheses or brackets or sentence punctuation, the separated part will either be an unimportant subtitle of some sort, which could be suppressed, or it will be an important, distinguishing qualifier, especially if it contains digits or strings like ‘RMX’, ‘remix’, ‘mix’, ‘edit’, ‘version’ etc. – Crissov Nov 2 '15 at 12:53
1

Maybe a little reorganization and grouping could help. In this version I've put the time indicator next to the time and gained enough space to allow two lines for an even longer title. No doubt this could be further improved upon.

enter image description here

|improve this answer
0

Side note: I can see my self with a touch screen accidentally hitting the X and thereby closing the application. Have you considered moving album art to the right, so no other interaction buttons are near the [X] ?

I wonder if I would make the album art square on the right and instead of a circular album art, adding a circular multi-way button for play/pause, skip songs and mute.. (almost like if it was a game console controller or a remote with a d-pad). Then you have more room for display in the centre, along with the progress-indicator.

|improve this answer
-1

Just make it configurable, let the user choose
I know, now question "what should be default setting" arises
I'd go with Marquee myself, or you can include simple first run config wizard

|improve this answer
  • And why? It's important to explain the reason for your solution. Otherwise the answer is not usable. – Bart Gijssens Oct 29 '15 at 10:56
  • @BartGijssens little imperfections and annoyances when accumulated become dealbreakers, I'd personally be VERY annoyed that I have to hover to read, others may be distracted by scrolling, right? I'd go further and let user choose WHAT to display there, but in MVP either of two options metnioned by OP is fine – zakius Oct 29 '15 at 11:08
  • 1
    Ouch! "I just want to hear this track - I don't want all this 'set-up' stuff" - Config wizards are horrible things invented by lazy systems designers in the late 1980s before they figured out that PCs weren't just being used by people with computer science degrees! – Andrew Martin Oct 29 '15 at 11:11
  • 1
    @zakius Users generally ignore the fact that settings exist either because they don't feel that they should need to make extensive setup choices or because the settings are too difficult to find.The only times you should use any kind of "first use" sequence are when there have been dramatic use-pattern changes to an existing piece of software or when the usage model is completely new to the market - neither of these should be the case for a music player. – Andrew Martin Oct 29 '15 at 11:38
  • 2
    @zakius "software generally is unusable out of the box" - that's bad software. – Andrew Martin Oct 29 '15 at 11:45

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.