Tweaking the user interface
Closed this issue · 11 comments
Hi,
This ticket is to start a discussion on how to improve MyPhotoShare user experience.
First, I'm not a web designer and this subject is really related to personal taste. But I find that adding many features to MyPhotoShare has cluttered the user interface: buttons for sharing, disappearing icons for sort orders, geotagged icons, sorted thumbnails, etc.
I think that the main goal of a pictures gallery is to show pictures first, and then to offer other functions to the user viewing the gallery content. So the gallery should expose the content to its best, without visual distraction like colored icons. The pages, based on the user preferences (by date, by location, sort order, etc) and the gallery owner (in the myphotoshare.conf file), should magnify the pictures, optionally displaying only the author title/description. A discreet menu should allow to change these preferences or see more information or give access to more actions like sharing albums. In fact, I see a photo gallery on the web like a brick and mortar photo gallery, but not restricted to professional photographers.
The Lychee web photo management application looks more like what I expect from a pictures gallery (from the look and feel only):
Lychee has features like photo editing or drag and drop that I don't want into MyPhotoShare. I just aim at a similar uncluttered user interface for MyPhotoShare.
How do you see it?
This is the sole reason I've never switched to Paolo's fork. I like many of the underlying improvements that has been done, but there's been too many changes to the UI that clutters it. I use this to browse images, and as such, aesthetics should be somewhat central in my opinion.
The original photofloat had an UI more or less like what Lychee has.
I like the unclutter UI, but for my photos I like to have many things in the screen, they help me remember many things of that moment, the date, the file date, etc. I like to possibility to switch to date and place view.
Perhaps all this elements could be left as addable options?
I kept uncluttering the UI, what about the result?
What about a gear on the right? we could transfer the sorters inside it, and put options to show names and media counts
@paolobenve I haven't had the chance to see the new version yet. I'll try it soon.
In my opinion, the goal is not only visual but about the user experience and the changes to the UI have to be seen as a whole. I see two modes (and I repeat I'm not a UX person):
- The default for the casual visitor. She wants to see nice pictures, probably because she was referred to the site through a shared link. It must be simple for her to navigate from one photo to the next. She'll probably stay browsing within a few albums. The main goal is navigation and good display (full screen, contact print to see the content of the album). Keep it simple and user friendly...
- The advanced user, who can be the owner but can also be a visitor. He likes the photos presented and he wants to look for another experience like looking for a special date/event or place, or search for photos related to a theme. He must have access to these features easily, but they don't need to be always visible because he knows where to find them. For instance, for a photographer, he'll want to see the EXIF information. They only display when selected in the menu...
It should be similar for all the advance features: available when needed, but unobtrusive to mode 1.
Is a gear on the right the best way? I don't know. Perhaps we should list all features that we have or want to have in MyPhotoShare and then sort them based on these two modes. First mode features will always be available. I expect to find much more second mode features and we'll need to organize them in groups (tabs? submenus?).
For instance, I have planned to add a search feature in the coming weeks. When you have a lot of photos, finding a picture by album, location or date can be time consuming. A search feature can easily be added in JavaScript but is currently limited to searching on file names. This can be extended with the metadata album.ini file I'm presently implementing (#61), offering searches by description or even tags.
Should we make this search field visible (mode 1) or accessible through an options menu (mode 2)? I don't know yet without a global view of all other features.
@pmetras I agree perfectly with your analisys!
I changed the default options so that the user get square thumbnails for all, without spaces between thumbnails and without media names, as in original photofloat
Other galeries with sleek user interfaces from which we can find inspiration.
Sigal theme colorbox
Sigal theme galleria
Sigal theme photoswipe
And of course the original Photofloat
These are static gallery like MyPhotoShare. There are probably interesting Photo CMS too...
@pmetras http://foto.bzatek.net/travel/sicilie_2010/index.html Do you think you are going to show album description like this?
I don't like Sigal UI :-(
@paolobenve I haven't made my mind on how to display the title and description metadata for the moment. For albums, it could be an intro text like your Cataract example. The look of Cataract is really nice.
The gallery owner can decide to show it or not from an option in the scanner config file myphotoshare.conf or album.ini for exceptions. For media, I see it like a longer caption. Again, it should be configurable by the gallery owner. I've seen in the code that there's a caption field and I have to understand if title must replace it when defined. If that's the case, perhaps title should be renamed caption in order to stay coherent in metadata names.
For the moment, as I'm indexing my collection of photos, my main concern is writing these titles and descriptions and being able to use them later. The metadata windows is enough for the current job.
One wish would be for the metadata window not to encroach on the picture. Currently as the metadata window draws from the bottom of the display, it covers up half of the photo on my laptop. With 16:9 monitors becoming the norm, we have large black stripes on the sides of the picture where the metadata window could appear sliding from the side.
@paolobenve I've seen that you've started implementing a menu on top right. What do you think of regrouping all actions on that area of the screen?
Taking my best GIMP abilities, I've tried to design a mock-up.
Essential options
Here explained while browsing by geonames. The white legend block explains the meaning of icons and is not part of the user interface. In that mode, only essential icons should be visible. Now, we have to define what essential means for the majority of people. For instance, I've hidden the sharing icons as I don't use this feature frequently. But download original and view full screen are here...
Advanced options
Viewing a detail as an example. When the user opens the "More..." window, less frequently used options or advanced options appear.
I've used material.io icons because they are quite common being used for Android and they are available in SVG and PNG.
Question I asked myself while designing that: can this design fit with portable devices?
let me close this issue, reopen if something is still worth working on