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

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):

WCSF progress report
User pain points
Paper sketches
Background research (including Market analysis, personas, workflows, etc

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

Ryan Boren 4:23 pm on March 18, 2015

My initial impressions from my first time running through the prototype a few days ago.

I went in with the goal of publishing a single captioned image. After clicking add media, I’m greeted with a media lib type view. There’s no greyed out button bottom right to indicate the possible next step. When comparing the prototype flow to production flow, I realized I missed having a persistent button bottom right. That’s what I’m used to after years of using the media modal.

I click an image, again with the goal in mind of creating a captioned image. I go from no buttons to three. That More button feels very in the way. I tend to like the primary action anchored right and aloof from other buttons. So, I have three buttons, three decisions lined up in a row now. I want to caption, so I shouldn’t insert yet. More is just something I’m going to have to develop blindness to, so I get started on that by ignoring it. I click View.

Still no details. I have Insert and more bottom right and a ton of stuff at the top. Grid, Select Media, info, Edit, close. Plus two arrows. And a big checkbox. And image numbering (1 of 7). This is overwhelming. I came here looking to add a caption. I think someone looking to add a caption could very naturally try Edit, but that’s not it. Info is what you want.

Once info shows, I put in a caption and make another decision. Am I ready to publish? The Insert button is active and ready, but what exactly am I publishing? The arrows and numbering make me wonder if I’m publishing a gallery. I’m here for one image and don’t want to do that. Do I need to back up a level? How do I do that? Where am I? When I get lost, I seek context and a way back. I look for a persistent context keeper and escape route. I don’t feel a nav anchor.

I appreciate the power of all of this, but this attempt at a single captioned image has me doubting the image details flow. The non-persistent, top left escape route nav feels inadequate as a nav anchor. The latest customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. work uses a persistent headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and stacked nav. The MT riff mock has a persistent bottom left escape route. I like the way those give a consistent escape route.
Andrew Ozz 5:56 pm on March 18, 2015

I also went through the different flows in the prototype. Did that before reading any feedback or looking at the conversations in 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/. in an attempt to be as impartial as possible 🙂

Was surprised by the “dynamic” buttons at the bottom a bit. Probably better to have at least the “Insert” there at all times, greyed out when nothing is selected? Wouldn’t mind if the other buttons were there and greyed out. Can probably get used to them being dynamic, just a bit surprising how the whole modal goes from being pretty plain/minimalistic to having many places to click/draw attention as soon as you click on an image. Also the width of the buttons should probably be constant/unchanged when showing more or hiding existing.

Really dislike the horizontal list of selected images at the bottom left. It is pretty much unchanged from the current modal and has no good functionality. It is really hard to see what is on the super tiny thumbnails. Also the horizontal scrollbar that shows when more images are selected takes about 1/4 of the space and makes the whole thing look like something went wrong or something is buggy. This is hidden on smaller screens, IMHO best to remove it completely.

After selecting several images another surprise was that clicking on “View” removed that button and shifted the name/label from the top/left (the opposite part of the modal). Then a “Grid” button appeared there. Had to click that small/different/far away button to go back. Also “Grid” being the opposite of “View” (as you have to click one to reverse the other) doesn’t feel right. Perhaps better if “View” was “Single view” and changes to “Grid” instead of being hidden after clicking on it.

Having to click the smaller “Info” button in the top bar to get to the image properties was pretty hard to find/understand. The label “Info” doesn’t seem to correspond to “Edit Metadata”, “Image Details”, “Post Settings” (the names/labels of the sections that are shown). Maybe “Settings”? Generally I wouldn’t mind having a gear icon next to the checkmark icon for accessing the image properties/settings. Also I am (probably like most people) used to have “controls” at the top/right or top/left, having that big checkmark at the bottom/left feels somewhat out of place.

All of the rest feels pretty good. Really like the ability to browse the selected images either as big “previews” or as image settings “boxes”. Starting to wonder why it is only for selected images, should probably be available for all the media library.

Of course there are still places where behaviors can be improved. For example after selecting more than one image, the default should probably be “Create Gallery” instead of “Insert”. It is relatively very very rare for more than one image to be inserted in a post at the same time (frankly, not even sure we need to support that). In almost all cases a gallery is created.
Siobhan 6:30 pm on March 18, 2015

Thanks for your feedback! I’m not going to be at the meeting tomorrow but that’d be a great time for everyone to process it.

Just a note on this:

For example after selecting more than one image, the default should probably be “Create Gallery” instead of “Insert”. It is relatively very very rare for more than one image to be inserted in a post at the same time (frankly, not even sure we need to support that). In almost all cases a gallery is created.

When I was doing a lot of longform article writing I used that -all- the time. It makes it easy for me to insert all of the images at once and then move them around within the content. What I used to have to do was:
1. Insert all of the images in one go
2. Go to Text View
3. Copy and paste the 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. for the images into the right place

That was fairly hacky. I can just drag the images into position now 🙂

Anyway, I’m just saying that it’s something that I would really, really miss.
- Andrew Ozz 9:04 pm on March 18, 2015
  
  Yeah, that is an “advanced user” feature” 🙂
  
  Dragging images inside TinyMCE is somewhat problematic and not really recommended. Currently it is disabled if the images have a caption as you will drag them out of the caption elements. Also links are typically not dragged together with the images.
  
  So for most users that workflow will be quite harder than inserting 3-4 images separately 🙂
  
  This shouldn’t be the default IMHO.
Konstantin Obenland 10:24 pm on March 18, 2015

Some small observations from me:

The first thing I notice after opening the modal is the big blue Add New icon. It reminds me of the one on the Appearance screen, but there it’s the last item. It probably makes sense to have it be the first item in the media modal, especially once there are more than ten media files. I’d expect the entire square to be clickable though.

I click on the second picture to insert it and the action bar appears. Personally I’m not a fan of transitions, it makes the interaction feel very slow. The tiny thumbnail of the selected image is not really helpful, it makes the bar just feel more cluttered, in addition to the three action buttons. I also wish it would be more obvious that I selected that picture. A big blue border like in iPhoto or something. That check mark is small and not easy to see.

I click on view. I don’t know why it’s there, I can view the image right now, but it must be important otherwise there wouldn’t be a button. I get a magnified view of the first available image, not the one that I selected. It also has a check mark even though I did not select it. I click the X on the top right to get back to the overview but that closes the modal.
teamadesign 4:54 pm on March 19, 2015

Thanks for the feedback folks, much appreciated! We’ll discuss these at our next meeting and iterate the prototype to incorporate these notes and get feedback.