45

I was looking at the Spotify desktop app and noticed they use two buttons for displaying an artists albums in either a Grid layout or a List layout

See below:

enter image description here

If only one layout can be selected at once why would you use two separate buttons over using just 1 button that alternates between layouts?

This is for the desktop application but in the interest of unifying experience between both desktop and mobile would it not be better to use 1 button?

  • 8
    Imagine you're on Google and you click 'Images' - would you expect the button for 'Images' to disappear? Or would that confuse you? – user2397282 Feb 20 at 9:53
94

There are a few cautions: 1. Feature discoverability, 2. Icon interpretation in the absence of labels, and 3. Confusion over which state the toggle (or stateful button) represents.

1. Discoverability: Out of sight, out of mind

Lukew, in 'Obvious always wins', cites loss of engagement when vying for menu space:

His mobile example involves lots more space tradeoffs than the desktop app case you refer to.

While the toggle menu looked “cleaner”, engagement plummeted following the change. The root cause? People were no longer moving between the major sections of the app as they were now hidden behind the toggle menu.

2. Decoding icons can be challenging; more so when only one is visible at a time.

You had two icons which users had to decode. There are no text labels to assist the user.

Now you have one icon. This means you have a memory tax. The user has to remember:

  • What the currently visible icon means (without hovering over it)
  • What the previously visible icon was (and what it means)

3. Does this icon represent the current view (the state) or the one I wish to change by selecting it (the intent)?

If you compress the two view controls into one button, you have a couple issues:

enter image description here

Alan Cooper discusses this further in About Face, which he refers to as 'flip flop buttons':

The problem with flip-flop controls is that they fail to fulfill the second duty of every control - to inform the user of their current state. If the button says ON when the state is off, it is unclear what the setting is. If it is OFF when the state is off, however, where is the ON button? Don’t use them. Not on buttons and no on menus!

  • 14
    Another problem is control usability when things get sluggish. If there is a control with three segments FOO <--> BAR, where either FOO or BAR is highlighted, someone who wants the control to be in the BAR state, and who gets no response upon clicking <--> or BAR, will be able to click BAR again without having to worry about whether the first click got dropped, or whether both clicks might eventually register. Slugish toggle controls are really annoying. – supercat Feb 19 at 18:06
  • 4
    For some of the difficulties of the flip-flop see this related question about flip flop buttons. – Wes Toleman Feb 20 at 6:09
  • 14
    3. Confusion over which state the toggle (or stateful button) represents. For me this is something that happens quite frequently. I never know ( mostly because this behaviour is not equal everywhere ) what the option means, if it's the current state or the next state. And depending where it's used, even the 2 button can be confusing if the color scheme isn't good enough to distinguish between selected and not selected. – auhmaan Feb 20 at 10:03
  • 2
    @auhmaan I've made some unfortunate (nothing permanent...) mistakes with lab equipment due to similar confusion with physical buttons. Switches over buttons any day, for me. – mbrig Feb 20 at 19:41
  • 1
    Congrats on the HNQ rep boost, hahha. – maxathousand Feb 21 at 14:18
13

Mainly to help with discoverability. It clearly shows that an option exists, what the option is, and what option is active at the moment.

  • 3
    I would argue that the color code in this case does not necessarily show it clearly, but yes as the other answers have shown there are a few helpful properties to this kind of controls. – eckes Feb 20 at 8:54
  • 3
    @eckes Yes, the example in the screenshot could still be improved. But it is already better than the proposed alternative of having only one button. – allo Feb 20 at 9:22
6

Along with the other answers, I would add that the list view button, on its own, looks like a hamburger menu to me, because the small size prevents me from noticing the little bullet dots next to the lines. The grid view button adds context, which makes the purpose of the list button more clear.

5

"Recognition over recall" is a good answer here I think.
https://www.nngroup.com/articles/recognition-and-recall/

Recognition vs. Recall

The big difference between recognition and recall is the amount of cues that can help the memory retrieval; recall involves fewer cues than recognition.

Answering a question such as Did Herman Melville write Moby Dick? involves recognition: you simply have to recognize whether the information provided is correct. If instead I asked you Who wrote Moby Dick? you would use a process of recall to retrieve the right answer from your memory.

Recognition is easier than recall because it involves more cues: all those cues spread activation to related information in memory, raise the answer’s activation, and make you more likely to pick it. It’s the reason for which multiple-choice questions are easier than open questions, where the respondent has to come up with an answer.

  • 2
    That source may contain valuable information, but this link might change in the future. Would you be able to summarize some of the main points, and/or highlight some relevant sections to capture some of the information from the article? – maxathousand Feb 19 at 18:59
5

In addition to discoverability, I think an important point of UX is designing with Accessibility in mind.

Accessibility is the design of products, devices, services, or environments for people with disabilities. The concept of accessible design and practice of accessible development ensures both "direct access" (i.e., unassisted) and "indirect access" meaning compatibility with a person's assistive technology (e.g, computer screen readers).

Often times, screen readers and other assistant tools function against alt-text, hover text, or some other UI metadata. Providing two distinct buttons is a more straightforward approach when taking this concept into design consideration.

In my experience, designing simply casts the largest net in terms of balancing all things discoverable and accessible.

1

"Don't Make Me Click!" -- UX design truism.

There is a balance between real estate, white space, content, and context. Developers know what the application can do... Users don't. The number of unnecessary User clicks in applications is criminal!

The User experience improves, if adding an icon will:

  • reduce the number of user clicks.
  • expose functionality so the User doesn't need to hunt for it.

So in this case, Yes, it's good to display both icons.

Now for some balance:

  • Select menus hide functionality, which causes frustration. They are necessary but should be used sparingly.
  • The opposite is also true: Many icons clutter real estate and frustrates the User experience.

Example: Originally, Windows Office had lots of bells and whistles... tons of functionality, but they were hidden under select menus. MS forums constantly asked for functionality, only to discover that it already existed under a select menu somewhere. MS re-balanced the UX and "Ribbon" menus were born.

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.