I need to create a user interface for synchronization of photo albums in two systems (some website and facebook). Copying to each system should be optional, and there should be a possibility to update an album on the first or the other system if files or titles were modified.

I can think of having one list of mixed albums from both systems with icons identifying where they belong and actions like "export to facebook", "import from facebook", "update on facebook", or "update from facebook".

Or I could imagine having three lists and drag-n-drop functionality: albums on our system, synchronized albums, albums only on facebook.

Are there any existing examples for inspiration to complete this task? Any advice would be appreciated.

  • What kind of albums are we talking about? Photo albums? Music albums?
    – Rahul
    Dec 7, 2010 at 23:28
  • It's about photo albums Dec 8, 2010 at 12:38

2 Answers 2


The analogy that springs to mind is a "three way merge" from many source control systems where you need to take changes in code from either your local file, the updated version in source control, both or indeed neither.

The usual layout is to have the source control on the top left, the local copy top right and the merged version across the bottom.

alt text

The edits are highlighted: typically blue for additions, red for deletions and green for changes and you can select which edits you want to take from each file.

So you could present a series of thumbnails in each area one for those on Facebook, those locally and the combined list (depending on your action). The highlight would show which files would be added, removed or updated and the user could confirm each before proceeding.

  • Was it an addition on one side or a deletion on the other side? Many source merge and/or folder compare tools speak of "orphans" to avoid the confusion of addition/deletion and sides. And they have a single color to show them. Beyond Compare (one heck of a comparison tool by Scooter Software), uses black for no-differences, blue for orphans and uses red to show which side has the most recent version of a file with the same name. Dec 8, 2010 at 7:09
  • Also source control merges usually allow for three way merges as well and then have a base panel in the centre between the source and the local copy (the base being the version from which both source and local diverged). Dec 8, 2010 at 7:11

What about a Venn-Diagramm approach? (with the Icon-based indication mentioned above) https://skitch.com/amherd/ffu8r/venn

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.