Player User Interface Guidelines

For details on the organization of content see UserInterfaceHierarchy.

The remainder of this page describes guidelines for the user interface for the Squeezebox (Classic, v1, v2, v3, Boom), Transporter and SLIMP3 player display and remote control as presented by SlimServer.

The player user interface is based on the idea of a large navigable space made of lists that the user can scroll through. The UP and DOWN buttons scroll the user within a list. The RIGHT arrow button takes the user into the item displayed, the LEFT arrow takes them back out. (If you know the iPod UI, this roughly maps to the scroll wheel for UP/DOWN, the center button for RIGHT and menu button for LEFT.)

Display

The player typically displays two lines of text and symbols. An example:

Browse Albums (1 of 20)
Hot Rocks                                                ->

The elements on this screen:

• Line 1 - "Browse Albums"
• Line 2 - "Hot Rocks"
• Overlay 2 - "->"
• Scroll Indicator - "(1 of 20)"

Line 1 is used to display context, to give the user an idea of what list they are viewing. It's the name of a place (in this example the area in which to browse through artists).

Line 2 is used to display the current item in that list that's selected. If the user chooses an action now this is the "object" that gets used. For example if the user pressed PLAY now, the album "Hot Rocks" would immediately be played.

The Scroll Indicator gives the user an idea of where in the current list the user has scrolled to. It should be displayed on all screens, when possible.

Overlay 2 in this example is a right arrow symbol and indicates that this list item is itself a list and can be explored by pressing RIGHT. Overlay 2 may be blank if there's nothing to navigate into. (In this case if the user presses RIGHT, a bump-right animation should be displayed.) Overlay 2 may also contain a note symbol to indicate that the item displayed in Line 2 is a song. Additional symbols may be added later for other non-container items (i.e. not albums or playlists), for example a radio symbol to indicate that Line 2 is an internet radio station.

On some occasions there may be an overlay in the first line if the Line 1 text refers to a song or radio station name or title, in this case it would be a note symbol (or radio symbol, see above). Also, progress indicator or playback status information is displayed in Overlay 1 if the current screen is the Now Playing screen for the currently playing (or paused) song. Finally, a bell symbol may appear in Overlay 1 on the Date & Time screensaver to indicate if an alarm is set.

Animation

Whenever possible, the display should give the user animated feedback about their actions. Standard animations are:

• Scroll up/down - When the user presses UP or DOWN, the second line is scrolled vertically to the new text to indicate the transition to the new item in the list.
• Push left/right - When the user presses LEFT or RIGHT to navigate out of or into a new list context, the entire screen scrolls right or left respectively to show the user that they have moved to the new context.
• Bump up/down/left/right - When the user presses RIGHT when displaying item that can't be navigated into, a bump right animation is displayed to show that the button press was registered, but that the operation isn't possible. When the user has navigated all the way out to the top-level Home menu, pressing LEFT will display a bump animation to show that they've reached the top-most limit. If the user is in a context with only one item (for example an album with only one song) bump up or down animations are displayed to indicate that there's no scrolling to be done. Note that lists with more than one item "wrap around" so bump up and down are not used when trying to scroll up past the first item or down past the last item in a list.
• Show Briefly - replaces Line 1 on the display with feedback indicating the operation that the user triggered, leaving Line 2 in place. For example, in the example above, if the user pressed PLAY on the remote, the following would be displayed for one second:

Now Playing:
Hot Rocks

Note that Overlay2 is removed (since the arrow was used to indicate an operation, which is not appropriate for a brief notification display.) After a second, the display reverts to the original text.

Settings

Shuffle (1 of 3)
Shuffle by song                           (o)

Overlay 2 may also have a current status for a multiple choice selection which is a circle. If the circle has a dot in it, that means that this item is selected. Pressing RIGHT should mark that item as selected. No "show briefly" or bump necessary.

Random Mix Genres (1 of 74)
Blues                                     [x]

A radio box graphic should be used to indicate the on/off state of a non-exclusive setting, similar to radio buttons on a desktop interface.

Some settings may benefit from display of the value on the right instead of a radio button or check box:

Settings  (1 of 20)
Repeat                    Album

or

Settings  (2 of 20)
Alarm                     Off

Pressing the right arrow (or play or add) when this is on the screen will cause the setting to be switched to the next value, allowing the user to rotate through all the choices.

Buttons

Because SlimServer is so flexible in mapping buttons to functionality, it's easy to create inconsistent or unexpected behavior that happens when the user presses a button.

In documentation, buttons should be referred to using the name labels as printed on the remote, not symbols (i.e. FWD, not forward, fwd or >>).

• UP/DOWN - These buttons are used to scroll the user through the current list. Pressing and holding may accelerate that scrolling.
• LEFT - This button is used to move the user out of the current list context to its container. Pressing and holding may accelerate that movement, jumping the user to the top level. Pressing and holding for 5 seconds may disconnect the player from the server and return to the original player network setup screens.
• RIGHT - This button is only used to navigate into the item displayed, replacing the current list context with the list context corresponding to what was on Line 2 of the display.
• PLAY - This button is only used to play the selection on the second line. When an item is played, the current playlist is cleared and replaced with the selection. If that selection is a group or container and it makes sense to play them together (i.e. the selection is an Artist name or Album name), all of the items "under" that selection should be played together. One minor exception is that when pressing PLAY when a single song is selected within the context of an album, the whole album should be put on the playlist and playback starts on the selected item. If that selection is a container, but can't be played or it doesn't make sense to play them together (i.e. a group of radio stations or is the header for a cluster of settings), pressing the PLAY button should have the same effect as pressing RIGHT.
• ADD - This button is only used to add the selection on the second line to the Now Playing playlist. If that selection can't be added, but is a container, pressing the ADD button should have the same effect as pressing RIGHT. In the context of the current playlist, it is used to remove the selection from the Now Playing playlist.
• 0-9 - These buttons are used as accelerators, speeding up operations that could be done by scrolling up and down. For example, in sorted lists, the digit buttons can be pressed to jump to items that begin with the letters as marked on the remote keypad, a la cell phone text entry, multiple presses iterate through the letters associated with that button. When doing text entry, the digit buttons allow direct entry of letters in a similar manner. In an unsorted list, jumping is proportional: 1 jumps to the top of the list, 0 to the bottom and 5 about half way in between.

The buttons listed below always have the same behavior and should not be overloaded with new behavior in a plugin or new display mode. There may be exceptions for overloading these buttons in the context of a game or other non-standard UI, but this is strongly discouraged. If you have to overload these buttons, please display some instructions about the new button functionality.

• REW/FWD - Skip to the previous or next song, or start scanning backwards or forwards in the current song if held down.
• PAUSE - Pause the playback of the audio. Press and hold PAUSE to stop the audio and reset to the beginning of the song.
• POWER - Put the player in standby (off) or take it out of standby.
• VOLUME UP/DOWN - Adjust the current volume of the audio
• SEARCH - Jump to the search area, or if entering a search string, begin a search
• FAVORITES - Jump to the favorites area or save a favorite if pressed and held
• SHUFFLE - Rotate through the shuffle modes
• REPEAT - Rotate through the repeat modes
• SLEEP - Begin a sleep sequence, adjust the sleep time for this sleep sequence, or cancel sleep by pressing repeatedly
• NOW PLAYING - Jump to the Now Playing area and display the current song. If the display is in that area and is not displaying the current song, jump to it. If displaying the current song, rotate through display formats.
• SIZE - Rotate through available fonts
• BRIGHTNESS - Rotate through brightness seettings.