search

nextcloud / photos

📸 Your memories under your control
GNU Affero General Public License v3.0
565 stars 62 forks source link

Design of the main content view #145

Closed jancborchardt closed 3 years ago

jancborchardt commented 4 years ago

TL;DR: A simplest start for the main view would be similar to Arcane Office: https://photos.arcaneoffice.com

Then eventually we can look into stuff like macOS Photos: https://www.apple.com/macos/photos/

Layout

The current layout fills the screen from left to right, making for a very stuffed experience. Other platforms limit the width of the main photo display to fewer elements:

Both macOS Photos and Arcane Photos (and Instagram) show photos square, cropped. We should do this too. (Note: In search, macOS Photos has a special view where it’s visible if a photo is portrait or landscape – we can think about that in the future as well.)

Structure

Currently we show a folder structure in the main view the same way like the Files app. Other photos apps do not do this, and it’s very crowded. Instead we should simply go with a chronological photo stream like macOS Photos and the like. Especially since we now have a proper grid view in Files, the Gallery app can have a design better suited to viewing photos.

Display

We show a lot of other filetypes like SVG icons, PNG screenshots, etc. We could think about limiting these so there’s less unrelated noise inbetween photos.

cc @nextcloud/designers @skjnldsv

juliushaertl commented 4 years ago

Both macOS Photos and Arcane Photos (and Instagram) show photos square, cropped. We should do this too.

I'm a bit skeptical about this. The crop of a photo is actually something important imo and should be kept like the original was. Instagram isn't a good candidate to compare here, since as far as i know, they enforce the square format on upload. Yes this is probably not a real issue for day-to-day smartphone snapshots, but I see no real reasoning for the cropping.

macOS Photos seems to use this as a default for the event-like overviews, but they also still have a regular view where all the photos are displayed uncropped:

image

Same goes for Google Photos: image

Microsoft Photos image

skjnldsv commented 4 years ago

66809684-203e5200-ef2e-11e9-9e9c-fd11845e7020 (As a reference)

jancborchardt commented 4 years ago

You’re right, it was a bad example with Instagram, they enforce square photos.

So what Google Drive and Microsoft Photos do is essentially what we do right now, same as Flickr. With an important difference on the side of Microsoft Photos and Flickr, and that is that they limit the width of the whole view to roughly 3 pictures next to each other and have proper space between them.

So in the interest of doing things step by step and from what we have, how about this instead:

  1. We move from the folder-based structure to chronological view (the folders move to the section of "Albums" in the left navigation).
  2. We limit the width of the photo list from full-width to what roughly equates to 3 photos next to each other. And we also increase the whitespace between photos a bit for differentiation.
  3. After that we can consider further changes, like using the layouts macOS Photos uses.
juliushaertl commented 4 years ago

Sounds good to me :+1:

raimund-schluessler commented 4 years ago

When we already touch this, I want to propose to move away from javascript to flex-box in order to arrange the images. Currently on every browser resize the images flicker and kind of reappear since they are moved from one row to the next and some weird animations kick in.

By now, this can be done in pure CSS using flex-box without any javascript.

marcoambrosini commented 4 years ago

By now, this can be done in pure CSS using flex-box without any javascript.

Wouldn't it be better to use the CSS grid in this case?

raimund-schluessler commented 4 years ago

Wouldn't it be better to use the CSS grid in this case?

This might be even more appropriate. I am just not very familiar with CSS grid.

skjnldsv commented 4 years ago

It all depends on the type of view we go for. Flexbox can work, but there is some limit to it. :)

jancborchardt commented 4 years ago

It’s all step-by-step and we have a bunch of other things to do like using the proper sidebar. So first we should start by working with the tiling library we already use, and reduce the width, cut out the folders etc. :)

Otherwise we start and the only thing we have for 18 is some nicer flexbox code but not much user-facing changes. ;)

jancborchardt commented 4 years ago

So I’ve been checking more about photo apps and their designs. A big point for cropping is that it’s just used in the platforms people use day-to-day on mobile:

So people are simply used to it a bit more. The tiled view is only used by Google Drive, Flickr and Microsoft Photos. Where e.g. even the mobile apps do not use that view.

There are several problems with the tiled view on top of that:

The macOS alternative view or search view addresses some of those points, but looks quite strange also. We can think of having that as an optional view, but not as primary.

Hence I would say that if we do start from scratch @skjnldsv we do go with the cropping first, essentially as said above kind of like Arcane Photos.

raimund-schluessler commented 4 years ago

I created an example of the currently used tile view, but with a lot less javascript. See https://codepen.io/raimund-schluessler/pen/poobMmV?editors=1100.

It basically resembles the current behaviour of the app, but doesn't need javascript to resize the images. A bit of javascript is still necessary to apply the image ratio and adjust the flex-grow value once after an image is loaded. Images are not cropped and resize to fill the rows.

If we go for cropping images and showing them square, I think we can make it with even less javascript using css grid.

MonsieurLanza commented 4 years ago

Sorry, I'm stepping in a bit abruptly, as nobody knows me here, and I don't know anybody.

Thing is the current gallery main view is a painful point for my family (which is used to Apple UIs), and photos is THE reason we need nextcloud. So I was just wondering if I could/should do another client for Gallery or a fork, thus searched a little and landed here, which is somewhat of a perfect timing.

As far as I'm concerned, the pain does not come from the shape of the photo, nor the use of CSS over JS (or even WASM if you wanna go this way), nor even to have a sidebar, but to be able to quickly browse and find a particular photo within a 130GB, 15 years old library. Currently the view, AFAIC, has the following problem :

Our photos are not sorted by album and we have thousands of them.

Instagram, Apple or Arcane did what they did, not only for coolness and aesthetics in the first place, but for easy browsing.

No matter what technical solution is retained, or shape, or arrangement you will agree to, could you/we please ensure to address those points ?

jancborchardt commented 4 years ago

@MonsieurLanza thanks for your feedback! :) And yes, we will address those points, even if it might be a bit slow since we have to take it step by step with limited resources. The first step will be a nice view which is sorted by "Most recent photos first" as you describe. The view will also have some date dividers, just like the Activity app already has.

Further things will be developed on that basis. :)

grenzverkehr commented 4 years ago

I'm not sure which way it's going now, but I'd like it if the photos in Gallery weren't cropped. They are already cropped in the grid view. For me Flickr is a nice example how it could look like: https://www.flickr.com/photos/dmtoh/

mpodshivalin commented 4 years ago

Hi everyone!

I've looked for a good self-hosted gallery for a while now so I'm glad that a Gallery app for Nextcloud is finally being updated :) I want to share my thoughts about this.

I have a lot of friends who don't like their data being uploaded to Google/Apple services and who would consider a self-hosted solution (or at least solution hosted by me :) ). The main problem is a Photos/Gallery app. From my experience, when a general non-technical user says that he needs "Cloud", he actually cares a lot about Photos, and significantly less about file sync, contacts, etc. If you look at a Nextcloud Gallery that way, right now it isn't the best approach. People want a simple interface, like the one you attached in your screenshots - a simple Photos Timeline which groups photos by date.

The users should just open this app and start viewing their photos, without having to navigate through folders, changing sort order, etc.

Here are my suggestions on how to make it happen.

jancborchardt commented 4 years ago

@mpodshivalin hi! :) All your suggestions are either already implemented or open as issues in the tracker: https://github.com/nextcloud/photos/issues

Take the Photos app for a spin, and feel free to either join in the existing issues or open separate ones for the ones which don’t exist yet. :)

mpodshivalin commented 4 years ago

@jancborchardt Wow, that is great news! Thanks, I'll check out Photos soon :)

nemihome commented 4 years ago

It would be nice if cropping can be disabled via a setting. I was never be a fan of things like this even if they did it in television. It's just not the full picture which you see and maybe an important part is in the area which you don't see.

FrouxBY commented 4 years ago

Its amazing that a rework of the gallery is in progress,

As for a small contribution, i remember this medium article (https://medium.com/google-design/google-photos-45b714dfbed1) that give some insight on getting a high performance scrollable page for the Google photos website, thanks a lot for your work!

wein-geist commented 4 years ago

Hi all, I'm also new here but I thought extensively about the needs in a photos app the last few I agree 100%, that an uncropped view of the photos looks much sleeker. The tiled square view of pictures can already be achieved in Files. I actually started a discussion over at the Nextcloud forum so far by myself with a few ideas about the photos app including some visualization drafts, maybe one or the other finds some inspiration in it...

jancborchardt commented 3 years ago

Closing this as we now have the non-cropped layout: https://github.com/nextcloud/photos/pull/435

If there’s other leftovers, please open separate issues for them – and make sure to search beforehand to not create duplicate issues. Thanks! :)