search

seb-oss / design-library

Design Library is a set of individual styles and components, that when combined make delightful, intuitive designs and shape a consistent SEB user experience.
http://designlibrary.sebgroup.com
14 stars 1 forks source link

Toggle selector (mobile and desktop) #14

Closed ulde01 closed 4 years ago

ulde01 commented 5 years ago

Design change 2019-03-13

The design update on Toggle selector was reviewed March 13:

Change

See the details in the description: https://designlibrary.sebgroup.com/components/toggle-selector/

Reason Analytics showed that the component was overlooked by users. It was unclear that the component was clickable.

image

hjalmers commented 5 years ago

@ulde01 what kind of toggle buttons are we talking about here? Isn't enough with slide toggles and checkboxes to toggle on or off state for things? See for example: https://sebgroup.github.io/bootstrap/checkboxes-and-slide-toggles

ghost commented 5 years ago

@hjalmers Isn’t that a toggle switch? 😍 Will show you which component in DL is called toggle button. Tomorrow!

hjalmers commented 5 years ago

@JessiNygrenWalhed indeed it is:) I guess you're thinking about this kind of component that we're using on the login app here to switch between user id and personal identity number but with an icon/pictogram and space between the buttons? Basically it's just buttons mimicking the behaviour of regular checkboxes or radio buttons but in reality they provide the same functionality. I'm just afraid that we're making it harder for consumers and end users of design library by adding too many options that basically solve the same problem.

The large toggle button with an icon/pictogram is interesting though, I think it should resemble "normal" toggle buttons as much as possible to avoid confusion, but also with the current design and how we're using it, I think it should be avoided in applications and workflows as it's better suited for public websites and funnel flows.

In addition to standard checkboxes and radio buttons we're also using selects (dropdowns) and multi selects. Maybe it would be good to define something like the list below (just an example) that's not based on the component but on the problem they try to solve.

User problems (just an example)

Select/choose one option in a list of many

Component Examples Recommended usage
Radio buttons
  • When available option are between 3-7 (?)
  • Avoid horizontal layout
Select (dropdown)
  • When more than 3 options (?)
  • Good for grouped/category options
  • Works well with typeahead
  • Avoid using long texts for options
Toggle buttons
  • When available option are between 2-3 (?)
  • When using pictograms
Tabs
  • When available option are between 2-5 (?)
  • When involving navigation i.e url changes depending on selected option

Select/choose multiple options in a list o many

Component Examples Recommended usage
Checkboxes
  • When available option are between 1-7 (?)
  • Avoid horizontal layout
Multi-select (dropdown)
  • When more than 5 options (?)
  • Good for grouped/category options
  • Avoid using long texts for options
Toggle buttons
  • When available option are between 2-3 (?)
  • When using pictograms
Slide toggles
  • When available option are between 1-7 (?)
  • Avoid horizontal layout
  • To highlight on or off

Toggle state for one question/problem such as on/off, yes/no, true/false etc.

Component Examples Recommended usage
Checkboxes
  • When text is long
  • When each state doesn't require additional explanation/clarification
Radio buttons
  • When text is long
  • When each state requires additional explanation/clarification
  • Avoid horizontal layout
Slide toggles
  • For simple options
  • Mobile and tablet layouts
  • To highlight on or off
Toggle buttons
  • Should be avoided (?)
ghost commented 5 years ago

@hjalmers
So, some information to take in... 😍 But yes. We are talking about the toggle button with the icons. I´m not sure we should call it a toggle button though. For me, the tabs and the segmented control are sort of the same thing, this is (toggle button that we call it now) a more visual way of showing a radio button. And is part of a flow. And I think it fits perfectly in any sort of context if it's making it easier for the user to make a choice by adding an icon to the button. The screenshot is from a sketch file Henrik made, toggle buttons for mobile. Maybe we can talk about this in Swedish when we find the time (sorry about that suggestion for you guys who need the english..😘), it would be easier to sort some things out before we take the discussion further here. I really think we are saying sort of the same thing? 🙃

screenshot 2019-01-22 at 09 07 57

conandx commented 5 years ago

We’ve also used the component in Morning in the context of changing expence category for a transaction. [cid:image001.png@01D4B238.D7755290] Note that this is axure-sketch, so not exactly pixel perfect ☺

.

conandx commented 5 years ago

and.... Looks like you can't email images... image

ulde01 commented 5 years ago

Design change 2019-03-13

Updated on the Toggle selector was reviewed March 13:

Change

See the details in the description: https://designlibrary.sebgroup.com/components/upcoming/toggle-selector/

Reason Analytics showed that the component was overlooked by users. It was unclear that the component was clickable.

image

/Ulrika, Design Management

ulde01 commented 4 years ago

I am closing this issue for React because nothing has happened with it. I assume that it's not relevant. No hard feelings! ;) /Ulrika