Image Flow Update 9th October

Thanks to those that could make it to the Wireframe sub-meeting. We each presented the wireframes we’ve created so far, and most importantly, the ideas behind the frames. Out of these presentations we found a number of core common approaches and ideas. They are as follows:

  • @mor10 pointed out that the key flow is still: select media, edit metadata, insert post. We cannot clutter up this flow as we bringing editing more inline with it.
  • All images need to be presented as uncropped – even as thumbnails – to cut down on user confusion about orientation and image differentiation.
  • Contexual actions are key, presenting all of the action options for media when a user simply needs to select and insert a single image is confusing and distracting. Allowing, for instance, a user to create a gallery if they have multiple image selected is more useful.
  • For the crop tool, an icon of the aspect ratio is clearer and more useful than the numeric representation.
  • While selecting media clicking on a thumbnail should present icons for select, rotate, edit and delete. This will allow a consistent experience on mobile/desktop and allow for a cleaner flow to work with each image. The overlay, which covers the thumbnail in the media select grid, can become a top left banner for images inserted into the editor.
  • If a user selects multiple images they should be able to keep track of those images while editing. We can use the existing upper right arrows from the media grid, and perhaps add thumbnails on the bottom or in the left panel. If thumbnails are present, they need to be collapsible.
  • The right panel needs to be contextual based on the user needs. That means that the metadata fields do not always need to be present, nor do all the tool options need to be displayed all at once. Options should be presented based on the tool used, metadata could easily become an option in the toolbar.
  • Galleries need to be more representational – nine columns should be presented as nine columns.
  • Final action buttons (save, insert) cannot be hidden below the scroll. They need to be placed higher on the screen or floated over other content.
  • All interactions need to be simple and should be considered in a mobile use case.

We’ll (@sonjanyc, @mor10, @pabloperea, @teamadesign, @mwhite32 and anyone interested) be meeting again next week, tentatively Tuesday 9a PDT / 12p EDT, to present final individual wireframes based on these insights. From there we will create a unified approach with the intention of having master frames for next weeks full meeting.

Awesome job everyone!

Video of the meeting:

#image-flow