Tag Archives: image-flow

Siobhan 3:35 pm on January 8, 2015
Tags: image-flow   

Image Flow Meeting Agenda 8th January

Happy New Year everyone! I hope you’re still excited about making those images flow 😀

Today’s our first meeting of 2015 (17:30 UTC), and to celebrate I thought I’d post an agenda.

1. Review of current team resources (we may have some additional team members for 2015)
2. Review of prototype status
3. Plan for moving forward
4. Plan for user testing

I’m still unsure if we’ll meet on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ or on Google Hangout. It depends how many people show up (we have a limit of 10 people in Google Hangout). I’ll post in the Slack room (#feature-imageflow) to see how many we have.

#image-flow

Siobhan 6:02 pm on December 11, 2014
Tags: image-flow   

Image Flow Update 11th December

Thanks everyone for attending the image flow meeting! Here’s what we discussed:

  • @sonjanyc put together the user flow charts last week would should help with building out the prototype
  • @teamadesign looked into the newest version of Foundation. Because it relies heavily on angular.js he’s decided not to use it.
  • @teamadesign is going to document the process of helping with the prototype and add the to githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/ readme
  • we discussed putting together a spec and a spreadsheet for tracking. @samuelsidler will talk to @klosi about putting it together.
  • we discussed future plans for user testing. Although he wasn’t there, we agreed that @mor10 would be a good person to start looking into this 🙂

Here’s the video!

#image-flow

Sonja Leix 5:10 pm on December 10, 2014
Tags: image-flow   

Image Flow Update: User Flow Charts for Prototype

As we’re discussed in last week’s Image Flow meeting, we’ve started building a prototype as per our wireframes and user flows. We want to test our assumptions and have a prototype to get some early user testing started before we go into real development.

The prototype is a collaborative effort which @teamadesign is heading off with help from @mor10, myself, and @pabloperea. It’s hosted on Github, so we encourage anyone who wants to help with this effort to get involved!

In order to have a high-level overview of what we’re building and to be able to piece it all together in the end, I’ve created a Flow Chart with a high-level user flow that encompasses all scenarios and then broke out the different scenarios we’re focusing on in several phases to build the prototype. The idea is to complete a phase and do user testing on that single scenario while we’re building the next.

The scenarios we’ll be building so far:
1. User Adds New Image To Post
2. User Adds Existing Image to Post
3. User Edits Existing Image and Adds It To Post
4. User Creates A Gallery
5. User Inserts Multiple Pieces Into Post
6. User Edits Image that is already inserted

See below the different flow charts. You can also see the full PDF of the flow here.

Image Flow

Scenario 1: User Adds New Image To Post

Scenario 2: User Adds Existing Image to Post

Scenario 3: User Edits Existing Image and Adds It To Post

Scenario 3: User Edits Existing Image and Adds It To Post (wires)

#image-flow

Siobhan 7:01 pm on December 4, 2014
Tags: image-flow   

Image Flow Update 4th December

Thanks everyone for attending today’s image flow chat. Here’s what we discussed:

  • Wireframes – @pabloperea went through the wireframes. The only concerns that we had were that:
    1. the metadata input area on the back of the images might not be big enough. We agreed that these should be about 80% width, with the background greyed out.
    2. that there is no easy way for a user to deselect an image once they have selected a number of pages and started managing them in bulk mode. We discussed making it so that the user can deselect from the list of images at the bottom
  • Prototype – we took a look at the prototype. @teamadesign has started to put together the first flow. Before we move on, Aris is going to look at whether the most recent Foundation update to see if that can streamline the process, and Sonja is going to lay out the flows using the images in the wireframes.

Todo

  • @teamadesign – investigate whether we can use the most recent update to Foundation to streamline the workflow
  • @sonjanyc – put together the different flows using the wireframes

In case you want to help/learn more:

Here’s the meeting:

#image-flow

Siobhan 1:48 pm on November 26, 2014
Tags: image-flow   

No Image Flow this week

Just a reminder to all that there’ll be no image flow meeting this week. Enjoy your turkey-eating, american friends!

#image-flow

Siobhan 1:53 pm on November 21, 2014
Tags: image-flow   

Image Flow Update 21st November

Thanks everyone who attended the image flow meeting! First of all, we’ve moved the meeting to Thursdays 09:30 PST/ 17:30 UTC. We’re sticking with the Google Hangouts for now. When we get on to development we’ll start using SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ for meetings. On to the meeting!

1. Project Management

@samuelsidler is going to be helping out with project management for image flow. He talked a bit about the process. At the minute the project is quite small but once we start getting in to coding the feature there’ll be lots of different elements to deal with.

2. Prototype

@teamAdesign set up the prototype on GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/. It uses Foundation. @sonjanyc is working on building a template for the model. Aris is going to go through and add all of the screens. If anyone is interested in helping out with the prototype please join us in Slack (#feature-imageflow). We’re going to work through individual flows and start testing them on users.

3. Wireframes

@pabloperea is finishing up the desktop wireframes. We discussed a few design decisions:

  • lose the left hand sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
  • try to show the full image in the grid
  • toolbar to the side of the screen in mobile landscape

4. Docs

@azaozz suggested in the Slack channel that a good exercise would be to document the backbone stuff in preparation for the development work that needs to be done on the project. We’re looking for volunteers.

Here’s the video:

 

#image-flow

teamadesign 5:59 pm on November 14, 2014
Tags: image-flow   

Image Flow Update 14th November: Prototype Next Steps

An all too brief, but ever-so-productive meeting! We ironed out a few points about the prototype build out and intend to get cracking over the next week.

We’ve decided to use Foundation (that might switch, but I’m 90% decided) to speed along the prototyping.
@sonjanyc and I will get the base page template finished up early next week and then I will get the flow skeleton up and running by end of week. We’ll be coding mobile first, and are going to have a toggle on larger screens so allow for previewing at various common screen sizes.

Per our heroic PM (hooray!) @samuelsidler‘s suggestion we are going to be pushing out scenario’s for user testing as they are completed, rather than finishing all of the scenario’s and then doing a single round of testing. For example: as soon as the basic ‘add new image’ scenario screens are finished, we’ll start testing as the next scenario is coded.

As a starting place we’re going to ditch all sidebars on all devices and work with the card metaphor that guides the mobile frames. We are open to re-introducing sidebars on larger devices if user testing points in that direction – as @pabloperea points out we may be introducing more steps by relying on the cards at larger sizes.

We have githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/ repo up and running and @siobhan is integrating it with the #feature-imageflow slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ channel.

Hilarious, joyous, full-color video of the whole affair:

I’ve forgotten anything, feel free to toss it in the comments or announce it on slack.

#image-flow

teamadesign 8:47 pm on November 7, 2014
Tags: image-flow   

Image Flow Update 7th November: Prototypes and Frames

We had a quick meeting this morning to discuss next steps and near term goals. As mentioned previously we need to create a few wireframes for different screen sizes (browsers, landscape mobile, tablet portrait) to represent the following views:

  • Grid View
  • Full Width View
  • Edit Metadata View
  • Edit Image View

These views should expand upon the mobile frames: no sidebars, and should be harshly minimal on functions. We discussed adding a thumbnail row to the browsers size view and decided to nix it at the outset. As much as possible we want to be intensely focused on the must haves for this round, it will be far easier to add based on user feedback than de-clutter the interface. @pabloperea is going to take a stab at creating frames with the browser and mobile landscape. Anyone else who wants to take a stab at these should do so by Wednesday morning (PST) next week.

For, literally and figuratively, smaller design tasks we need to get some rough ideas for all of the icons we’ll be using. All are up for debate, but we need particular attention on:

  • Insert
  • View – full width screen
  • Save – something that can have a saved state would be great hopefully not a disk!

Please take a peek at these frames to see the icons in context. https://www.dropbox.com/s/abuaql0hkgdodti/Image%20Flow%20Mobile%20First%20v2.pdf?dl=0

As we’re moving forward with these frames we need to get a GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/ repo up and running to host the flat prototype. To get the ball rolling we’ll create a skeleton of HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. pages with the current mobile wireframe image, links to the next steps available and a list of the details about the represented state. These pages will create the basic flow and can be built on to create the final prototype. I am working with @samuelsidler to organize these next steps.

@klosi has created a Google form to collect data about what aspect ratios users want for the crop tool: https://docs.google.com/forms/d/1dEn6IiKjvgFuKh0Mv5Z9nxXaePbpmEIlLPy3ttYk8pM/viewform?usp=send_form

This will also help with @sonjanyc‘s trac ticket https://core.trac.wordpress.org/ticket/30155

@avryl and @azaozz are pushing to get the post editor alignment buttons into 4.1 and @melchoyce has produced some great icons for that purpose. Victory by inches!

Thanks for all those who could make it! We’ll post progress reports on slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ #feature-imageflow and in the comments here.

If you want to see all the gory details, here is the video:

#image-flow

teamadesign 12:40 am on October 30, 2014
Tags: image-flow   

Image Flow Update 29th October: WCSF Progress report

We’ve had another productive day in San Francisco – thanks to all who have been assisting. @sonjanyc @mor10 and I took some initial feedback from @mel and @lessbloat regarding the rough sketches and moved into Balsamiq to make some example flows based on specific scenarios.

We met with @markjaquith, @ericlewis and the remote team (thanks to all who could make it!) this morning to walk through the flows and get some feedback on whether the major build effort required by our approach is worth the possibilities presented by the vision. The consensus was that while there are many details to get right, this is a BIG task worth pursuing.

Later in the day, after we refined the Balsamiq flows more completely, we met again with @dhshredder, @lessbloat, @filletto, @samuelsidler to walk through the flows based on each scenario. There were some specific notes and details that were discussed at length, but the overall feeling was that this should move forward.

The next steps for the team are:

  • create wireframes for in the browser
  • spec the flows to solve for the following scenarios

** add a single image (new image)
** add a gallery
** add and edit an existing image

  • begin githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/ project for flat HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites./CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site./javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com prototype
  • build prototype!

The flows can be accessed here:

https://wordpress.mybalsamiq.com/projects/imageflowmobilefirst/grid

You should even be able to play with prototype, though I am totally unclear on what the Balsamiq sharing experience is.

#image-flow

Sonja Leix 10:06 pm on October 29, 2014
Tags: image-flow   

Image Flow: Identifying high level user requirements and pain points

It was great for quite a few of our group to meet at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. San Francisco and work in person on the image flow (@siobhan, @mor10, @teamadesign, @dh-shredder). We had a lot of amazing conversations with different designers, developers and other people from the community at WordCamp San Francisco and the Community Summit and Contributor Days about Image Flow.

We thought it would make sense to post a list of high level user requirements that we want to make sure we’re keeping in mind throughout the design and development phase and that we can test for.

High level user requirements for Image Flow:

IN MODAL / EDIT FLOW:

  • User inserts single image
  • User creates image gallery
  • User edits single image
  • User bulk edits images
  • User adds metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data
  • User sets featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.

IN WP EDITOR:

  • User aligns image
  • User replaces image
  • User adds caption to image
  • User scales image

We also wanted to compile a list of the major pain points with the current image flow:

PAIN POINTS WITH OVERALL EXPERIENCE:

1. Options in image flow are too many and confusing, no obvious flow
2. Three-column grid presents too much focus on library, when main options after selection an image are in right sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
3. Image editing options are hidden behind a small “edit image” link (not easy to discover)
4. Image flow is not usable on mobile, we suggest to disable / hide “Edit Image” functionality on mobile, until we can fix it and it works
5. Confusion about editing context (Original image, Attachment Page, In-Post Instance)
6. Images with a caption can’t be moved in the visual view of the editor
7. Add, edit, remove caption is hidden and should be easily to add
8. Image alignment is out of context and hidden away in the overlay, it should be part of an in-editor toolbar
9. “Add Media” is a confusing term to users (doesn’t always translate to image was the user feedback we got)

PAIN POINTS WITH ITERATIVE FUNCTIONALITY:

10. Crop and scale tools are unusable and unintuitive (options, ratio, saving) – I opened a ticket about improving cropping functionality #30155
11. Gallery flow is unintuitive
12. Image editing help flags copy is confusing
13. Action items (ctas) for inserting images are often below the fold

We’ll be posting updated wireframes later today and the feedback we got. We as a group are very excited about the direction and the shape this project is taking!

#image-flow