Image Flow Update 26th October – WordCamp SF Update

We’ve had an exciting 72 hours (ish) in San Francisco, and not just because WordCamp SF was such a well run, fun and inspiring event.

As folks from the team began arriving and looking over our finished wireframes on Invision (thanks to @pabloperea for the hard work) questions began to arise. @ryan (as he expressed on gitter) remained quite concerned with the mobile experience and particularly the icons over the images. The frames seemed a bit awkward – stuck between the current experience and something new. With this in mind @siobhan felt that we should take a look at the problem with fresh eyes and see what we could come up with. We did so. @sonjanyc and myself made some rough sketches on Friday and Saturday, getting feedback from @melchoyce @avryl @azaozz and @mor10 during Sunday’s contribution sessions.

Presented here are the sketches of our mobile approach that I put together and refined from the feedback over the weekend.

Initial State

Rough Sketch Wireframe of Mobile Image Selection

The image on the left demonstrated the basic state. The image is presented, uncropped in a square that is the full width of the screen. If a user swipes left or right they can scan through their image library. Along the bottom are buttons (left to right) to select the image for multi-select use, a large insert button, and an ellipsis that reveals further, contextual actions (create gallery, set featured image, etc). @mor10 has suggested that the insert button be a next button to allow us to enforce better semantic web and accessibility: enforcing alt tags, title tags and the rest of the image meta data. This can be discussed in more detail.

Along the top are buttons (left to right) to show a grid of images, to reveal metadata, to edit the image and to cancel out of the insert media area. Tapping the top left grid icon swaps to a tight grid view of square thumbs – represented in the second sketch here), a user tapping on any image takes them back to the full-size view. If the pull down, a filter drop down is revealed, they can search, toggle on multi-select, or insert directly from this view if desired.


Link to full size Metadata Mobile Wireframe Sketch

If the user taps the ‘i’ info icon button (2nd from left in the top) the image flips to reveal the meta-data form and file info (as well as the thumbnail) within the square ‘card’ that contains the image. They can swipe left and right to scan through their library, and all files will be in metadata mode. Users can easily bulk enter data in this way, and they can get a better handle on file versions and other subtle differences with this view. On larger screens they would see a grid of the meta-data view. If a file did not have any metadata entered (or perhaps no title and alt tag) the insert button would be next and would lead the user to fill in the missing data.

Edit Mode

Link to Sketch Wireframe of Mobile Edit Mode

Finally we have the edit mode. If the user taps the edit button, the edit tools replace the top menu bar, with an option to go back to cancel out and an ellipsis button on the right to cycle through the tools (the toolbar could also be swipe-able but that’s not particularly intuitive). Choosing a tool would replace the toolbar with the options for that tool. Along the bottom of screen we have the option to undo/redo actions, save the action and to finish and save all. In this edit state the user can still swipe left and right to move through images for editing.

We know this is a significant departure from the work that we’ve done thus far, and are interested in getting more feedback about this direction. Here in San Francisco this seems like a step in the right direction and worth exploring further. We’ll be discussing it tomorrow at the Community Day, as well as on Tues/Weds Contributor Days with the intention of finishing up some high-res more realized frames and flows.

Thanks to everyone who has participated in getting the project this far, and all of the new voices that spurred us to reconsider our assumptions!

Here is the new awesome slack channel for the group, the gitter room is thing of the past.