Open krissy opened 7 years ago
The solution is based on the research about Ephox TextBoox.io and Wix.com edit image features. There are attached a wireframe to be reviewed.
https://www.ephox.com/blog/from-the-ux-desk-road-testing-inline-image-editing/
Here is a link to see the TextBox.io documentation in case this is helpful http://docs.ephox.com/display/tbio/Getting+Started
After feedback, here is the amended wireframe for desktop. The idea is after having selected the file, the user can click on the thumbnail to open the edit popup module to rotate, and crop(rotate or the image. Then apply changes or cancel to close the popup.
This is the version for the phone device
Any feedback or question...
What if we placed the crop/rotate/ok functions in a small rounded menu that is an overlay onthe image (currently I put it on the right side). The cancel function can be just clicking outside the overlay box. I have made an example below.
I have used Material icons which are free and super helpful for dev too: https://design.google.com/icons
They inlcude this rotate and crop function which I think is useful to add to the menu ..
Thanks! Let's talk about it.
Both of these ideas are good. We could A/B test them maybe - with our existing piloters in Serbia or with our EH community? @rocioleon what do you think?
@rocioleon for the mobile version, would a user still have to double click on an image to get the image editing options to appear in the overlay?
Also, is it worth having a button so there is a clear CTA instead of having a label saying (Double click on image to edit)
? So that it's really really obvious that option is available?
@CathMollie @rocioleon @EChesters @tanyapowell @marizoldi Who owns the UX decisions for this ticket and #89? Now we're moving towards HDX dataset integration we need to prioritise the quality of our data, so ability to rotate (then crop secondary) could now become a priority, at least for Super Admins to start for post-editing. Should we resume convo?
Cath comments on Slack, 16 March:
Working on this week as wireframe needs to be amend + Google Material design suggested by @marizoldi + Upload New Drawing Form design by @EChesters Then, -#89 will be updated accordingly @EChesters
What
Allow the user to rotate images on upload/edit and add interaction buttons
How
Considerations
Liase with team on Slack re UI