Club Cropicana... Crops are freeeee!
Written by @marcemarc on Monday, 17 July 2017
We have been working on two upgrade projects from Umbraco 6 to Umbraco 7 this month, and it’s thrown up lots of interesting responses from the editors involved in making the move and adapting to their new environment.
“It’s just the same with a different font”.... was my favourite grumpy observation.
You get a bit complacent knowing how much better Umbraco 7 is in terms of editor experience that you take for granted that editors will embrace the change, forgetting that if you’ve used a tool for 3-4 years, and change is forced upon you, there will be at least some resistance, it’s human nature.
But for me it’s a really interesting scenario, and the first thing you do is stop telling people how much better Umbraco 7 is to Umbraco 6, and you listen - and you do this because editors use the product every day to edit content and they are 'seeing with fresh eyes', it's gold-dust and seconds and minutes within a particular workflow are incredibly important to them - they are the experts.
Media Picking
Take Media Picking for example: On one site when we sat and benchmarked editor activities for picking media for articles in Umbraco 6, it was monumentally slow, either an editor needed to switch to the media section to upload their image, and switch back to the content section to pick it or they used Digibiz Advanced Media Picker DAMP - that enabled them to upload to the media section from within the content section and set particular crops - but was really really slow.
“You’ll love Umbraco 7 for picking media", we boasted, "it’s one of the biggest improvements, it’s really fast and you can upload and pick media from within the content section, no more switching between the two, your workflow will be faster”
In both scenarios, we replaced with a standard Umbraco 7 Media Picker - and both workflows when re-measured using Umbraco 7 were faster: (stopwatch method - complete the journey as fast as you can).
Switching between Content and Media Section to upload image and then pick:
Umbraco 6: 3 mins 44 secs
Umbraco 7: 1 min 3 secs
Upload within the Content Section and pick:
Umbraco 6 - Upload via DAMP: 1mins 24secs
Umbraco 7 - Upload via media picker: 35 secs
Upload within the Content Section, pick and define crops:
Umbraco 6 - Upload and Crop via DAMP: 2min 21secs
Umbraco 7 - Upload via media picker: 1 min 42 secs
So basically it’s a win all round right?
Well no…
...all is not as it seems.
The gains of using the Media Picker to upload an image and pick selected crops is not ‘that much faster’ than using DAMP - this is mainly because with DAMP, you can edit the crops without leaving the content section in a popup window...
...even though doing so is slower in actual terms of task time, it feels much quicker ‘mentally’ because you haven’t had to shift your focus to another screen, switch context and switch back again.
The editors reported the journey in Umbraco 7 as feeling slower.
Also if you were in the middle of editing content at the time, clicking the pencil on the Umbraco 7 media picker to open the image in the media section to enable the crops, will have triggered the ‘you have unsaved changes’ dialog, which will cause you to think, jolting your mental process - and you’ll have to save your content item, switch to the media section, adjust your crops, and switch back to content to complete the journey.
The paradox is this is still actually quicker than using DAMP! - but it is the exact workflow you boasted earlier that Umbraco 7 had solved!
Essentially the excellent Image Crop facility of Umbraco 7 is not welcomed with open arms by this set of editors because it has broken their workflow!
Even though in real actual time the speed of the Umbraco 7 backoffice makes the workflow quicker to complete - It exhausts the editor in terms of concentration, and this is why it feels slow and for me, this is the really interesting thing about analysing UX/UI, and measuring improvements, is that you can’t ever discount ‘how it feels’ to the person, even if the stats say otherwise!! (think of it as the windchill factor that makes a cold day feel colder than it actually is)
Anyway Tom Pipe (@toepimp) and I figured that surely it must be possible to bring the existing cropping functionality from the media section into an overlay in the content section:
And we knocked this together:
Prototype
https://github.com/marcemarc/OutCrop/tree/master/beta/Our.Umbraco.OutCrop
This is only a prototype, but very usable - we’ve taken the approach to have a new property editor that targets a media picker by alias and adds an Edit Crop button underneath the picker, clunky perhaps, but pragmatic...
... well we don’t want to end up maintaining our own custom media picker - we can release this for testing quickly and immediately improve the editing experience for our customer, improving over time with their feedback.
Hopefully, this illustrates the issue too, and a kind of resolution, and we can use this as the basis to explain the problem to Umbraco HQ that might lead to a PR or maybe it’s a bit too niche for the core, and it’s better as a separate package.
in which case what on earth would we call it?
Moriyama.ClubCropicana ???
(Darren IS on holiday this week)
or more sensibly:
OutCrop ?
Anyway, It reassures the client that we are listening, and that the upgrade puts them on a platform that quick improvements like this can be made easily, but hang on forget the platitudes! - what has it done to the stopwatch test?
Upload within the Content Section, pick and define crops:
Umbraco 7 with Moriyama.ClubCropicana/OutCrop: 53secs !!
(and importantly it feels ‘mentally’ faster)