Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon used for save button is confusing #294

Closed
jelhan opened this issue Nov 10, 2019 · 8 comments · Fixed by #331
Closed

Icon used for save button is confusing #294

jelhan opened this issue Nov 10, 2019 · 8 comments · Fixed by #331

Comments

@jelhan
Copy link
Owner

jelhan commented Nov 10, 2019

Croodle uses the same icon for next as for save button. While it's a good fit for next button it does not make much sense for save button.

save-button
next-button

The icon for the save button should be changed.

This save button is used at two places: at last step of poll creation form and for participation.

I guess there is a technical issue for this situation: both buttons use the same component, which is called <NextButton>. It could be used in block mode to overrule default text. I think it's time for a new component <SaveButton> rather than adding more functionality to <NextButton> to alter the icon.

@jelhan
Copy link
Owner Author

jelhan commented Nov 10, 2019

@sappor0 I'm not that used to Open Iconic. Is there an icon you could recommend for a save button? Tried to filter there icons by save but that returned nothing.

@sappor0
Copy link
Contributor

sappor0 commented Nov 12, 2019

… So we're not the first people to have this issue at least iconic/open-iconic#41

There is some debate about the validity of the save icon with the diskette as it is obsolete skeumorphism and most young people don't know what it represents. (https://graphicdesign.stackexchange.com/questions/323/new-generation-of-save-icon-that-is-not-a-disk) – The counter-argument to a new save icon is that an icon needs to be simply iconic and ubiquitous and not realistic.

Me, I'm somewhere in the middle. I think we can use something a little different and it would still work. (especially since we're combining it with a label)

I think there are a few likely candidates we can use (in order of my personal preference):

  • Screenshot from 2019-11-12 12-15-08

  • Screenshot from 2019-11-12 12-15-17

  • Screenshot from 2019-11-12 12-15-27

  • Screenshot from 2019-11-12 12-15-50

@extralooping
Copy link

extralooping commented Nov 12, 2019

i'd vote for the checkmark icon. ich think the important meaning here is that it is final step which completes the action

@jelhan
Copy link
Owner Author

jelhan commented Nov 12, 2019

I tend toward the cloud upload (even so it's not a file upload) or the document one. But I don't have a strong opinion here.

i'd vote for the checkmark icon. ich think the important meaning here is that it is final step which completes the action

This argument only applies for the save button on poll creation and for the one to save a participation, isn't it? Would you use a different icon on the button to save a participation?

@extralooping
Copy link

This argument only applies for the save button on poll creation and for the one to save a participation, isn't it? Would you use a different icon on the button to save a participation?

Your are confirming your entries. So i think, it still makes sense in this case.

@jelhan
Copy link
Owner Author

jelhan commented Nov 12, 2019

Three persons, three opinions. 😆 But I noticed that I hadn't given any arguments. So let me quickly give some:

  • I think the cloud upload icon stands for sending data to the cloud. The cloud represents for many people these days where the place where data is living. Maybe similar as the floppy disk of the "traditional" save icon.
  • The document icon reminds me of icons used in other applications to create a document. It does not rely represent the persistence aspect of the save action though.

@sappor0 Thanks a lot for putting the options together with context. Would you feel comfortable with making a decision?

@sappor0
Copy link
Contributor

sappor0 commented Nov 13, 2019

Hm. Well I'm split 50/50 between cloud icon and checkmark.

  • The cloud icon is more informative (I agree with what you say it represents for most people @jelhan ) which is good because we want to inform the users about what consequences their actions have.
  • The checkmark is more generic/universal and probably more meaningful for non-techie users. We could reuse it in situations where no actual HTTP request will be performed but which still confirms something.

… So even though I'm still quite torn I think it should be the checkmark because it is the most accessible solution.

@jelhan
Copy link
Owner Author

jelhan commented Nov 13, 2019

@sappor0 sounds good. Thanks a lot for driving this discussion. Do you have time to provide a PR?

jelhan added a commit that referenced this issue Jan 2, 2020
Adds a <SaveButton> component that renders a save button similar to
<NextButton> but using a special icon that helps to distinguish both.

Also removes the block mode for <NextButton> component and some arguments
that aren't needed anymore.

Closes #294
jelhan added a commit that referenced this issue Jan 2, 2020
Adds a <SaveButton> component that renders a save button similar to
<NextButton> but using a special icon that helps to distinguish both.

Also removes the block mode for <NextButton> component and some arguments
that aren't needed anymore.

Closes #294
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants