Tag Archives: image-flow

Siobhan 5:21 pm on April 16, 2015
Tags: image-flow   

Just a reminder that the image flow meeting…

Just a reminder that the image flow meeting is now on Thursday at 20:00 UTC. That’s:

  • 21:00 London
  • 16:00 EST
  • 13:00 PST

#image-flow

Siobhan 5:52 pm on April 2, 2015
Tags: image-flow   

Image Flow Update 2nd April

Thanks everyone who attended the meeting this week. Note that in future the meetings will be at 16:30 UTC, i.e. normal time for everyone now that daylight savings has happened.

Here’s what we discussed:

1. Feedback – there’s a lot of feedback scattered around which we need to get into one place so we can make sure it’s properly addressed. We have a Google Doc here which we’ll consolidate it into.
2. @teamadesign has tried an edited flow with the metadata first. It’s available for testing should anyone want to.
3. Once @wonderboymusic is caught up on where we are, we’ll start ploughing forward with the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.

Actions

#image-flow

Siobhan 10:29 am on March 18, 2015
Tags: image-flow   

Image Flow Catchup

Now that we’re ready to start making a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, this post will catch you up on some of the important things to read before diving in.

Wireframes and Flow Charts

The interactive wireframes will give you a pretty accurate visual overview of where we’re going with the project. Note that the wireframes are based on a large amount of research into how different platforms and applications handle image storage, upload, and editing.

There are also user flow charts which show the planned user flows through the interface. It’s worth comparing these with the current flows through the modal.

Prototype

The in-browser prototype is a skeleton representation of how we see the basics working. It isn’t perfect, but the basics are there. We’ve decided that at this point it’s best for us to move onto the plugin. However, @mor10 is doing some user testing on the prototype and we’ll use that feedback for refining the plugin.

Prototype Resources

Background Reading

if you’re interested in some more background reading that should give you insight into various decisions, these are some things worth looking at (this is not essential to read before getting started):

Next Steps

The next step is to break the plugin down into discrete, achievable tasks. This should get things moving more quickly. we can use the Image Flow 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 be the repository owner. https://github.com/ account. As soon as it’s in a usable state we’ll put the plugin in the repo so it’s easy to test and we can get feedback.

The regular meeting is at 17:30 UTC on Thursday.

#image-flow

Siobhan 7:36 am on March 11, 2015
Tags: image-flow   

Thanks everyone who attended the meeting last week…

Thanks everyone who attended the meeting last week (and apologies for my tardiness with the notes!).

Process
We had a serious discussion about the current process. After discussion of the prototype, we decided that in its current state it’s ready for testing the basic flow. There are a few bits of polishing that need to be done:

  • fixing the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. on the back of the card
  • ensuring that full-width images remain selected when browsing through the images

However, no more major development will be done on the prototype. We don’t think it is a good use of time to work on getting the editing features working. We’re going to start building the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and get the groundwork for that done while morten is testing.

Therefore, next week’s meeting will be dedicated to scoping out the next steps for the plugin and getting that process going.

Actions

  • @mor10 to share his procedure for testing so that other members of the team can run tests too (complete
  • fix selection issues when in full-width (complete
  • fix styling issues on metadata screen (complete

(great job on getting everything complete before I even write up the notes 😀 😀 :D)

#image-flow

Siobhan 6:48 pm on February 12, 2015
Tags: image-flow   

Image Flow Update 12th February

Thanks to everyone who attended the image editing meeting today. Here’s what we discussed:

  • prototype: the prototype is progressing. You can see the current version here.
  • @mor10 pointed out that the current version of the PT isn’t ready for testing. He has created a number of issues in the tracker to get the issues addressed
  • we discussed the ease with which people can get involved with the project. We agreed that it would be better to break the scenarios out into discrete issues for each screen

Actions

  • @siobhan to create a new list of issues for the devs to work on
  • @mor10 to add issues he’s come across 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 be the repository owner. https://github.com/
  • @mor10 to share his user testing process once it’s complete

The dev meeting is on Friday at 17:30 UTC for anyone who wants to join.

#image-flow

Siobhan 6:18 pm on February 5, 2015
Tags: image-flow   

Image Flow Update 5th February

Thanks everyone for attending the meeting today. Here’s what we discussed:

1. Prototype

  • Scenarios 1 and 5 are complete, and scenario 2 is nearly complete
  • @pabloperea has nearly completed the full width screen. There’s an issue with swipe on mobile which Roy is going to look into
  • @mor10 is going to start user testing scenarios 1 and 5

2. TinyMCE

We had a brief discussion about what happens to the image outside of the flow. TinyMCE isn’t the most fun to use on a mobile device and it has some jarring behaviours when you’re dealing with the image. @iseulde suggested that we keep track of any issues. These should be reported on tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/..

3. Icons

@teamadesign has created a list of icons, which @empireoflight is going to run by the dashicons team.

Actions

  • @mor10 to start user testing scenarios 1 & 5
  • @royboy789 to fix swipe issues in prototype

#image-flow

Sonja Leix 10:36 pm on January 27, 2015
Tags: image-flow   

Meeting Notes and Discussion around Image Cropping

A sub set of the #feature-imageflow team met 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/. yesterday to discuss a few things, namely:

  1. Can we tackle to improve the image cropping experience in 4.2 ?
    Should we save versions of cropped images on a post level or crop and overwrite the original?
  2. We’re currently working on a prototype to prove out our UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. strategy and to come up with an ideal solution before we go into development. However we wanted to look at features or improvements that could potentially be worked on already. Since the image cropping experience is so broken, we think this could be something we can work on separately and up front – and make a lot of people happy!

I was meeting with several people in slack to discuss these questions yesterday: @dh-shredder, @ericlewis, @markoheijnen, @royboy789, and @antoniancu – after the official meeting was over we also had @boren, @mor10, @samuelsidler and a few others join in.

DISCUSSING #1:

I’ve created some flows for an ideal image cropping experience and shared those with the group: https://docs.google.com/file/d/0Byz0aohoFoOcUi02M1NHdTItVnM/edit

The conclusion of the meeting in was that we agree that we should make iterative changes to improve the image cropping functionality and experience. We should come up with a full wish list of changes that need to be made to get to the ideal solution, and then decide which ones we can tackle now and which ones we’ll phase out. I will start working on this list and will get some help from the group refining it. Important will be to make this work on desktop as well as mobile!!

@boren shared Vizrecs of three cropping flows, which helps identify pain points: https://make.wordpress.org/flow/2015/01/26/uploading-and-cropping-an-image-in-the-media-lib-grid-view-and-list-view-macnchrome/

IMAGE CROPPING WISHLIST:

  • No tool should be selected in initial state of editing mode, image cropping icon shouldn’t look “inactive”
  • When user clicks on cropping icon, full image should have a crop selection
  • User can change crop area with handles and reposition crop area by dragging (this should also work on mobile!)
  • Aspect ratio should have common pre-defined aspect ratios to choose from and an option to input a custom aspect ratio
  • Selecting an aspect ratio should lock selection of aspect ratio, so user can still drag corners to change image selection
  • Action buttons to apply/discart the crop should be “APPLY” or “DISCARD”
  • Should there be an option to crop the “original” vs. create new “post image version”?

Please add anything in the comments I might have forgotten. Help us refine this list.
Thanks!

DISCUSSING #2:

When an image is being cropped it’s confusing to the end user whether it crops the original image or saves a new version. The discussion what would make most sense I’m sure came up internally many times already. So we talked about it as well. People have different opinions and ideas for this, but I soon realized that this discussion will need to be held in a much bigger circle. The overall consensus was that we do want to work towards what @dh-shredder calls “post image”. This means that if an image is being edited / cropped in a post context it will create and save a version of the image for that post and not effect the same image in different locations. If a user however edits an image within the Media Library, he/she edits the original image.
This functionality would need to be worked out with a set of rules, there are obviously concerns about over-cluttering the media library… etc.

#image-flow

Siobhan 10:03 am on January 22, 2015
Tags: image-flow   

Image Flow Agenda 22nd January

Image Flow meeting is this evening. First thing to note is that we will move our regular Thursday meeting to 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/.. We’ve reached the limit of how many people we can fit on the Google Hangout. Also, Slack is better for encouraging participation and for logging. We’ll likely continue to do smaller user testing meetings on google hangout.

This evening’s meeting:

  • review of last week’s actions
  • feedback from dev meeting
  • team plan for 4.2
  • anything else?

See you all at Thursday 17:30 UTC in #feature-imageflow in Slack!

#image-flow

Siobhan 6:25 pm on January 15, 2015
Tags: image-flow   

Image Flow Update 15th January

Slack Archive

Thanks everyone who attended the image flow meeting. We discussed the following:

  • @pabloperea has completed interactive wireframes. They should give you an insight into how the flow works. We’re still missing the gallery flow.
  • we discussed having a weekly developer meeting to work on the prototype. This will be Fridays at 17:30 UTC.
  • we should be thinking about what could be done in WordPress 4.2 to prepare the way for image flow in a future release. @sonjanyc discussed making improvements to the cropping feature.

Actions agree:

  • @pabloperea to finish up wireframes for gallery flow
  • @siobhan to finish adding issues 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 be the repository owner. https://github.com/ tracker (although I can’t do it for tomorrow’s meeting so if someone else wants to do it before then feel free)
  • internal developer meetings at 17:30UTC Friday to work on prototype
  • @teamadesign to come up with list of icons
  • @sonjanyc working on cropping wireframes
  • we need to decide next week what the team should be preparing for WP 4.2

#image-flow

Siobhan 6:20 pm on January 8, 2015
Tags: image-flow   

Image Flow Meeting Notes – 8th January

Thanks everyone who attended the Image Flow meeting! It was a very full Google Hangout 🙂 Here’s what we discussed:

  • we did a quick roundup of the current members of the team, and introduced Konstantin and Stephane who are joining us
  • the prototype has been refactored into angular.js. Roy has also written an extensive readme.
  • if you’re planning on working on one of the flows just pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @teamadesign and he’ll assign it to you.
  • we’re working on a better project management process. We may just use 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 be the repository owner. https://github.com/. I’ll explore the different options with @samuelsidler when he gets back
  • we discussed having a user testing sub-team. This is going to be led by @mor10. when they start testing he will run weekly meetings and feed back actionable information to the development team.
  • @pabloperea is going to flesh out the gallery flows into full wireframes
  • we discussed doing a walkthrough of the current wireframes to get all of the new developers up to speed. We discussed doing a video of this. However, we could just do a hangout and record the hangout and post it.
  • @teamadesign is going to come up with a list of icons. I’ve spoken to @empireoflight about designing them for us 🙂

Here we are:

#image-flow