search

superbob / clicker-heroes-1.0-hsoptimizer

Clicker Heroes 1.0 HS Optimizer
https://superbob.github.io/clicker-heroes-1.0-hsoptimizer
5 stars 1 forks source link

Fix Playstyle radio buttons alignement #2

Closed superbob closed 8 years ago

superbob commented 8 years ago

Playstyle radio buttons don't display well.

When running the website in development mode (gulp serve) the output is

Expected display

Whereas when running in production mode (gulp serve:dist or serving /dist directly) the output is

Buggy display

There seem to be an issue with padding, but it is not easy to figure it out exactly. Difference between dev and prod modes are mainly minification/concatenation of assets. It might come from here.

Even then, it might be preferable to display the options differently, as it is not intuitive to find the delimitation between the options (which circle correspond to which option).

See #1 (1) for the original report of the issue.

JourneyOver commented 8 years ago

Two other ways you could display the options is having it like it kinda is already but instead of going left to right have it go down like I suggested in #1

another method you could go is just have a drop down menu that you could select the options from.

superbob commented 8 years ago

I like when it's compact, that's why it's currently horizontal and not vertical. However it adds an ambiguity because of the "which circle correspond to which option?" phenomenon.

I'll make some tests and think of a better way to display it. At least there is a bug to fix (padding). When it's okay, maybe it'll be enough to make it be easy to read.

I prefer radio buttons when there are less than ~ 5 choices.

If possible, use radio buttons rather than drop-down menus. Radio buttons have lower cognitive load because they make all options permanently visible so that users can easily compare them. Radio buttons are also easier to operate for users who have difficulty making precise mouse movements.

https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

Thanks for the comments. :wink:

superbob commented 8 years ago

Found the solution to the bug: https://github.com/twbs/bootstrap/issues/14401#issuecomment-52341142

I will post the fix and close the issue. Eventually reopening it if needed (change the layout or add more spacing).