post-crop vignette - lightroom feature evolution discovery rollup

8/9/2019 Post-crop Vignette - Lightroom Feature Evolution Discovery Rollup

1/30

POST-CROP VIGNETTE - LIGHTROOM FEATURE EVOLUTION

Discovery Phase Rollup

Nathan Mitchell

02/07/2015


2/30

TABLE OF CONTENTSOVERVIEW ................................................................................................................................................3

Discovery Strategy ......................................................................................................................................4

ROLLUP .......................................................................................................................................................5

The Users ........................................................................................................................................................6

The Other Guys ............................................................................................................................................7

The Tech ..........................................................................................................................................................8

USER INPUT ...........................................................................................................................................9

Feedback sources .....................................................................................................................................10

Word Cloud ..................................................................................................................................................11

What did I learn from the word cloud? .............................................................................................12

Current Workarounds ...............................................................................................................................13

User Prioritized Features .........................................................................................................................14

COMPETITIVE AUDIT .................................................................................................................15

Products Evaluated ...................................................................................................................................16

DxO OpticsPro 10 - With Film Pack ...................................................................................................17

Nik silver efex pro 2 ...................................................................................................................................19

Aperture 3.6 .................................................................................................................................................20

Feature Matrix ..............................................................................................................................................21

TECHNICAL RAMP-UP.............................................................................................................22

Lightroom and Adobe Camera RAW .................................................................................................23

Tools ................................................................................................................................................................24

Adjustments .................................................................................................................................................25

What does all this mean? .......................................................................................................................26

UI Pattern - Proportionally correct Previews...................................................................................27

UI Pattern - Center Picker ......................................................................................................................28

UI Pattern - Icons shown for ranges ..................................................................................................29

UI Pattern - Localized Presets ..............................................................................................................30


3/30

Page 3 of 30Behance: behance.net/nateClicks

Portfolio: nateclicks.com

OVERVIEW This document contains a rollup Discovery phase for evolving the Post-Crop feature within Adobe

It also contains the background information that informed the rollup.

https://www.behance.net/nateClickshttp://www.nateclicks.com/http://www.nateclicks.com/https://www.behance.net/nateClicks


4/30



DISCOVERY STRATEGY USER INPUT

Research what users are asking for

and what they are having issues with.

• What are the big “asks” from users?

• Are there current workarounds for

missing functionality?

COMPETITIVE AUDIT

See what others in this space have

done for this feature.

• You are not the only one who has

ever designed a feature like this.

• Don’t reinvent the wheel if you don’thave to.

• See if there are any common

conventions, interaction patterns,

or best practices that could be

leveraged.

TECHNICAL RA

Gain an underst

feature works to

implementation

feasibility of any

versa.



5/30Page 5 of 30Behance: behance.net/nateClicks


ROLLUPTHE USERS, THE OTHER GUYS, THE TECH

The next couple pages try to boil down what has been learned through the discovery phase.





THE USERS

As far as HOW Lightroom does vignettes, the users are pleased. However there some desired fea

see. Mostly, it is focused on o center vignettes but there are some other ideas worth exploring tha

way.

In order:

1. Adjustable centers

Everything else ties for 2nd2. Presets (kind of exists already, but not super accessible/learnable)

2. Adjusting each corner, individually

2. Multiple Vignettes

There are some workarounds for some of these items but others are a trigger to go into Photosho





THE OTHER GUYS

Nobody has got it all. Everyone has left out certain features. Some features are a little easier for oth

how the add adjustments.

A couple key takeaways to be mindful of:

• Determine if adjusting the center is a “tweak” kind of adjustment or a “one shot” adjustment. Mo

implemented in such a way the tweaking is pretty simple.• Make things easy to reset. Lightroom already excels at this.

• Try to gure out how “vignette” presets could play with global presets. This one will be tricky and

problem to solve outside of just vignettes.

• Be mindful of control aordances

• Even the most complex of vignette controls in other products didn’t seem to overwhelming but t

that can be crossed.

• Adjustable corners just hasn’t been done. It could be a unique opportunity OR there may be a redone

• The only product to support multiple vignettes was able to do so, in part, because of how the ad

Porting something like this into Lightroom might be a large refactoring eort. Doesn’t mean we w



8/30Page 8 of 30

Behance: behance.net/nateClicks


THE TECH

Since Lightroom highly leverages ACR, any change has a substantial ripple eect. We will have to

how any proposed changes would impact multiple teams. Leveraging existing UI patterns may he

the front end but some design solutions may have a larger impact on how ACR does adjustments

Tread lightly.



9/30Page 9 of 30



USER INPUTWHAT DO THE USERS WANT?

Through this section I looked for any information I could nd that could inform the key requests/str

primary source for this information was the Lightroom feedback forum.



10/30Page 10 of 30



FEEDBACK SOURCES

TITLE/LINK NOTES

Lightroom: Give “post-crop vignette” tool same options as graduated l ters. Allowing Multiple Vignettes

Allowing “Basic” adjustments to a vignette. I believe this

gradient lters

Adjusting the roundness of corners, individually

Adjust the center point of the vignette

Allowing blurring (tilt shift eect)

Lightroom/Camera Raw: Post-crop Vignette Centering Reference Product: Silver Efex 2

Allow the user the ability to pick the center point of the

I Love Lightroom Vignettes This user really likes how LR applies its vignettes (algorit

Would like the ability to adjust the center (References Co

Lightroom: Ability to export vignettes as transparency Being able to export the vignette as alpha channel or tra

LIGHTROOM: Be able to create my own presets for post-crop vignettes right in the

Eects module

Presets for Vignettes

Some additional adjustments (clarity and saturation)

Lightroom: Gaussian blur vignette This mentions a blurring tool that works in a similar way

an additional feature within PCV.

Lightroom/Camera Raw: O-Centre Vignettes Desire for O-center vignettes

Desire for multiple vignettes

Having X/Y sliders for positioning center

Being able to click on image to dene center (like Silver

Desire for being able to change the shape

Desire for ability to do more adjustments (focus, color, s

https://www.behance.net/nateClickshttp://www.nateclicks.com/http://feedback.photoshop.com/photoshop_family/topics/give_post_crop_vignette_tool_same_options_as_graduated_filtershttp://feedback.photoshop.com/photoshop_family/topics/post_crop_vignette_centeringhttp://feedback.photoshop.com/photoshop_family/topics/i_love_lightroom_vignetteshttp://feedback.photoshop.com/photoshop_family/topics/lightroom_ability_to_export_vignettes_as_transparencyhttp://feedback.photoshop.com/photoshop_family/topics/be_able_to_create_my_own_presets_for_post_crop_vignettes_right_in_the_effects_modulehttp://feedback.photoshop.com/photoshop_family/topics/be_able_to_create_my_own_presets_for_post_crop_vignettes_right_in_the_effects_modulehttp://feedback.photoshop.com/photoshop_family/topics/gaussian_blur_vignettehttp://feedback.photoshop.com/photoshop_family/topics/off_centre_vignetteshttp://feedback.photoshop.com/photoshop_family/topics/off_centre_vignetteshttp://feedback.photoshop.com/photoshop_family/topics/gaussian_blur_vignettehttp://feedback.photoshop.com/photoshop_family/topics/be_able_to_create_my_own_presets_for_post_crop_vignettes_right_in_the_effects_modulehttp://feedback.photoshop.com/photoshop_family/topics/be_able_to_create_my_own_presets_for_post_crop_vignettes_right_in_the_effects_modulehttp://feedback.photoshop.com/photoshop_family/topics/lightroom_ability_to_export_vignettes_as_transparencyhttp://feedback.photoshop.com/photoshop_family/topics/i_love_lightroom_vignetteshttp://feedback.photoshop.com/photoshop_family/topics/post_crop_vignette_centeringhttp://feedback.photoshop.com/photoshop_family/topics/give_post_crop_vignette_tool_same_options_as_graduated_filtershttp://www.nateclicks.com/https://www.behance.net/nateClicks


11/30



WORD CLOUD Wor



12/30



WHAT DID I LEARN FROM THE WORD CLOUD?

To be honest, in this situation, not much.

• Word clouds are fun to make

• When you target discussions around post-crop vignetting; the word “vignette” comes up a lot

• Word clouds might be better used in situations where the content is from an open discussion

discussion.

• Other things that were popular• “Center”/”Centre”

• Brush (I’m guessing in regards to the local adjustment brushes)

• The posts seemed largely positive from the perspective of the word cloud

• “Love”

• “Great”

• “Idea”

• Not too many negative words....Kind of a nice change of pace from the rest of the Internet, ya

CURRENT WORKAROUNDS



13/30



CURRENT WORKAROUNDSMULTIPLE VIGNETTES

• Radial Gradient brushes can do some of this. It’s not exactly the same, but it is close

PRESETS

• There are Presets in the Develop and Library module but with the way it is implemented, it can b

another preset. You have to be careful about the order in which you choose presets.

• You could create an image that had the vignette set the way you want (or multiple images for muand copy just the vignette settings from that and paste it into another image but that is just crazy

USER PRIORITIZED FEATURES



14/30



USER PRIORITIZED FEATURES

To be honest, most folks are super passionate about one thing, o center vignettes. Most of the re

have been addressed for radial lters or are just one-o requests. However, here is a quick breakd

requests.

1. Adjustable centers

Everything else ties for 2nd

2. Presets (kind of exists already, but not super accessible/learnable)2. Adjusting each corner, individually

2. Multiple Vignettes



15/30



COMPETITIVE AUDIT Typically, the problem you are trying to solve has been attempted by others. It is good to see what

and how it impacts the UX of the product.

PRODUCTS EVALUATED



16/30



PRODUCTS EVALUATEDPRODUCTS

1. DxO OpticsPro 10 - With Film Pack installed

2. Nik Silver Efex Pro2

3. Aperture v 3.6

METHODOLOGYFor each product, I went through some basic tasks in regards to using vignettes and presets. If a p

not exist in the product, I did not complete that task. While performing these tasks, I recorded my

the functionality and behavior of the features. Admittedly, I am most familiar with Lightroom and ho

bias into account.

Sample Tasks:

1. Create a vignette

2. Adjust the values of the vignette

3. Adjust the center of the vignette4. Reset the center to the, actual, center of the image

5.Create a preset that just aects the vignette

6. Apply the preset, then apply a global preset and observe the eect

7. Create multiple vignettes

8. Explore unique features in product, if any

DXO OPTICSPRO 10 WITH FILM PACK



17/30



DXO OPTICSPRO 10 - WITH FILM PACK

1.Can’t do much without the extra lm pack.• The Vignetting options are mostly for correction not creative exploration in the basic

installation.

2. Immediately miss the ability to double-click a parameter

to reset it. (Lightroom bias)

3. Initial discovery of center point reset was a small hurdle.• Can manually set center but, once again, don’t know how to reset it to the exact

center. Never mind, found the reset button. It was in the footer, not next to the

control for adjusting the center. Kind of hurts discoverability since they are not close

to each other. Perhaps other items work this way and it is a learned UI pattern as the

user continues use. For initial learning, it took a little bit. Update: The crop tool uses

a similar UI pattern (reset button in the footer). It makes a little more sense now as to

why it was over there….still though.

4. A little hiccup in the help content.• The roundness parameter has a scale of 0 to 100 but the help content informs the

user that negative values provide a rectangular shape, but you can’t set the value

to less than zero. Values less than 50 give you more rectangular/ More than 50 for

rounder.

BASIC VIGNETTE SETTINGS

W/O FILM PACK

CREATIV

ADDED

DXO OPTICSPRO 10 WITH FILM PACK (CONT’D)



18/30



DXO OPTICSPRO 10 - WITH FILM PACK (CONT D)

5. Click to place center seemed buggy.• When placing the center by clicking on a spot (as opposed to dragging) the center

point is, actually, placed a little bit away from the cursor. This may have been a

conscious decision so that the cursor doesn’t cover up the center point, but it feels

like a bug. I clicked on a particular spot, so put it in that spot.

6.Unexpected lack of control aordance• I expected a cursor change when hovered over the, manually placed, center point to

indicate that I am now about to drag the thing. However, the cursor remains a cross-hair.

7. Challenging to create preset• Can save settings as a global preset, but you have to go back and turn o all the

other settings that were saved with the preset. This has to be done one at a time. It is

a little dicult to feel positive that you have turned o everything except the vignette

setting. This can get overwritten by other presets. This is, somewhat similar to the

current implementation in Lightroom.

8. Placing the center is a modal operation.• You turn the “Set Center” mode on, get it where you want it (using multiple tries, if

needed) then turn it o to lock it in (or select the close button)

NIK SILVER EFEX PRO 2



19/30



NIK SILVER EFEX PRO 2

1. Setting the center is a one shot deal.• You click the “Place center” button and the next click on the image sets the center. If

you didn’t get it right, go back and repeat the whole thing over. Not a huge deal, but

if you are, granularly, tweaking the position it can be cumbersome.

2. Can’t reset JUST the vignette center.• The only way I have gured out how to reset the center is to reset all parameters for

the “Finishing Adjustments”. There may be a better way, but I haven’t found it.

3. No indication of where the current center point is outsideof just guesstimation from the vignette, itself.

4. Roundness slider goes from Circle -> Rectangle.• Nice how it communicates how it works, but you can’t increment/decrement a

visible value since the value is not displayed. However, you can still use the arrow

keys (with/without) shift to ne-tune the adjustment. You just don’t see the numeric

value. Is that a big deal? How would you communicate the setting to someone else?

“Set it a little less than halfway between the center and Circle”, I guess.

5. There are, system provided, presets specically for

vignettes.• Again, they can be easi ly overwritten by a global preset. There doesn’t seem to

be away to save a user preset for vignettes, specically. Also, unlike some other

applications you can’t “turn o” parameters of a global preset so that they don’t

overwrite other settings.

VIGNETTE SETTINGS

APERTURE 3 6



20/30



APERTURE 3.6

1. You can’t adjust the center of a vignette

2. You can add multiple vignettes.• Can’t tell if ordering matters.

3. You can “brush” part of a vignette to adjust where it

appears.• This is pretty similar to a layer mask in Photoshop.

• A similar feature exists in ACR 8.5 which allows the user to “brush” away part of agraduated lter, but it has not been ported into LR, yet.

4. Pretty simple parameters are provided: Type, Intensity

and Radius.

5. You can create a preset of just vignette(s).• Depending on how many vignettes you have already added and how many vignettes

are in the preset, some vignettes may get replaced when the preset is applied.

• Example 1: Currently have 2 vignettes applied. The preset has 1 vignette. In this

case, the rst vignette gets adjusted to the values of the preset. The 2nd vignette

remains unchanged.

• Example 2: Currently have 1 vignette applied. The preset has 2 vignettes. The rst ofthe vignettes in the preset replaces the vignette that is applied. The 2nd vignette gets

added to the image. Basically, the preset completely takes over the vignettes.

6. The presets never remove things that have been added.• They only adjust values of existing adjustments or add additional adjustments. If

you hold Option, this behavior changes so that the preset completely overwrites all

existing adjustments, with the exception of the default set.

MULTIPLE VIGNETTES

The 2nd one has a mask. That’s what the brush icon in

FEATURE MATRIX



21/30



FEATURE MATRIX

PRODUCT MULTIPLE VIGNETTESSYSTEM VIGNETTE

PRESETS

USER-DEFINABLE

VIGNETTE PRESETSADJUSTABLE CENTER

DxO OpticsPro 10

Nik Silver Efex Pro 2

Aperture

NOTES:DxO OpticsPro 10 is kind of able to do User-denable presets in a similar way to Lightroom. It is ex

to use and can be easily overwritten, but it is possible.

Due to the nature of how Aperture does adjustments, in an additive way; it is easier for it too hand

as well as more controllable/maintainable user-dened vignette presets. Other products do not wo

way. Most others, including Lightroom, have a xed set of adjustments to alter, with the exception

Lightroom.

Nobody has Adjustable corners. This is likely, in part, because the products that support roundnes

rectangular shape to a circular shape. Circle don’t have corners, so it is dicult provide functionalit



22/30



TECHNICAL RAMP-UPUnderstanding more about the back end of how Lightroom does what it does can help inform howsolutions could be.

Also taking a look at some of the existing UI patterns in the product to establish some best practic

code that can be easily leveraged.

LIGHTROOM AND ADOBE CAMERA RAW



23/30



LIGHTROOM AND ADOBE CAMERA RAW

Behind the scenes, the develop module in Lightroom (LR) is powered by Adobe Camera RAW (AC

quite a bit with the extra modules for image management and output. For the develop module, LR

few extra features, but mostly alot of spit, polish and UX love.

TOOLS



24/30



TOOLS

Look familiar?

1

1

2

2

3

3

4

4

5

5

6

6

1

2

3

4

5

6

ADJUSTMENTS



25/30



JUS S

Again, LR is elevating and tweaking the layout of the ACR utilities.

1

19

210

4

5

3

6

7

8

2 3 4 5 6 7 8 9 10

1

2

3

4

5

6

7

8

9

10

WHAT DOES ALL THIS MEAN?



26/30



The short version is that it means there are more cooks in the kitchen.

In order to provide an update to the vignette feature in Lightroom, it will also, likely, have to be add

both of these products are owned by Adobe, but that doesn’t mean it makes it easy. I am not awa

organization of these two product teams but it is possible they have dierent management and the

priorities. For example, the ACR team may be extremely busy just trying to support all the new cam

that are popping up all over the place and the LR team may be focused on Lightroom mobile or ot

initiatives. All that to say, it could get complicated.

While the features could easily exist in both, the front ends would have to be implemented twice. It

necessary to provide two UI designs (1 for LR and 1 for ACR). They front end technologies may no

the same capabilities. At the least, if a very rich UI is made for LR, it may need a way to degrade g

of controls for ACR.

Either way, the back-end of ACR will have to be updated as well as the front end of ACR and the f

doesn’t make this impossible to do, but it is something to consider in the designs.

UI PATTERN - PROPORTIONALLY CORRECT PREVIEWS



27/30



This pattern is just showing how the preview updates itself based on the crop of the image at vario

mostly interested in how it handles resizing.

UI PATTERN - CENTER PICKER



28/30



Used in the Detail section, this tiny control places the center of the preview shown in the section.

UI PATTERN - ICONS SHOWN FOR RANGES



29/30



While not used in LR, ACR shows some icons to help communicate what is at the end of the rang

the adjustment name AND the value.

I’m looking at you, Circle to Rectangle (Roundness) slider.

UI PATTERN - LOCALIZED PRESETS



30/30



The graduated and radial lters have specic presets for eects, specic to them.

The user can also add to this list of presets.

1

1

post-crop vignette - lightroom feature evolution discovery rollup

Documents