Mobile Photo Stream • UX / UI Proposal

Requested by:

 

Solution offered by:

 

Adrian Costea

CAROUSEL

MEDIA

Challenge: We needed to efficiently display a big number of menu options (see menu tree) on a photo gallery in a smartphone screen as part of a bigger project which, at this time is in stealth mode.

Menu Tree:

Home

  • Date
    •    Year
    • Month
    • Day
  • Person
    • Person #1
    • Person #2
    • Person #3
    • Person #4
    • Person #5
    • Person #6
  • Places
    • Place #1
    • Place #2
    • Place #3
    • Place #4
    • Place #5
    • Place #6
    • Place #7
    • Place #8
  • Received
    • Private
      • New
      • All
    • Public
      • New
      • All
  • Shared
    • Private
    • Public

The Thinking Process

We may consider this menu tree as a combined viewing and filtering options. For instance, in “Date” we can visualize all of those photos whereas in “Person” let's say, we can visualize only a few of them.

Apart from this, there are 2 main options to display this menu:

Fig. 1 - Side Panel (external) as Google Photos did.

Fig. 2 - Contextual, within the photo stream.

Why I think the second option is best? Because of speed. In the first case the user has to do every single time one supplementary touch for reaching that menu and make the desired choice, as opposed to the second, the “contextual” one, where the user needs to scroll horizontally only for the less used filtering / viewing options.

Another benefit is that, since we no longer need to put this inside of an external menu along with settings, logout etc., that menu will look now decluttered.

 

Now, there might be an option to eliminate the horizontal scrolling all together by adding icons and make “Received” and “Shared” as switch buttons but since the user needs to tap twice sometimes to filter “Received Private” vs “Received Public”, this can be a bit confusing. Also, this might give the user the false impression that is making all received photos private instead of filtering what is received into private vs public. So, unless this option gets tested out, I would leave it behind and go with the more secure approach. Anyway, keeping with the standards, the user is likely feeling the mobile interface familiar and   will map out the app correctly. Our goal is to find what (s)he needs, effortlessly.

 

So, my approach would be Fig. 2 with the tab filtering as: "Date", "Person", "Places", "Received Private", "Received Public", "Shared Private", "Shared Public". It may sound redundant but it's clear and simple.

Fig. 3 - Using Switch Icons.

Date Menu Tab

Why is it important to display day / month / year in zoom view mode instead of another filter tabs? Because, when the user selects “Person” in the menu tab, can still filter by date, using zoom gestures, to see by day, month or year.

 

When scrolling down for more photos, the tab menu bar can disappear and can reappear when scrolling the opposite way.

Most Interesting Tabs: "Received" and "Share"

That is because each of their section "Public" and "Shared" also contains "New" and "All" and we can make the observation that "new" is part of "all".

This is the reason why we can have a different approach, other than having 2 filtering buttons as "new" and "all".

By tapping or dragging up the "All Photos" bar the "New Photos" section will stay pinned and blur out, being covered all together. Scrolling back to the top, the user will see eventually de-pinning from the top and "New Photos" section will be revealed (see Calendar behaviour on Mac OSX).

User Interface (Mockups)

Download the UI file

Date

Date when scrolling

Date in month view

Person List

Person Photo Collection

Places in Map View

Places in List View

Places. Photo Collection for Location.

Pin icons are 3 different types: opaque, small transparency and big transparency, meaning that those with the highest transparency are the oldest. So it’s kind of a rudimentary date filter. Why the transparency thing? Because is a metaphor for old memories fading away.

For this, needs to be defined what “new”, “relative old” and :”old” means.

Received Private

Received Private. Scrolled "All Photos" only.

Received Private. "New" continued with "All...".