Sonja Leix 7:28 pm on July 12, 2014
Tags: image editing ( 4 ), image-flow ( 39 )

Image Editing UX Research: Personas

I was meeting with @siobhan last week to work on creating initial personas for Image Editing in WordPress. We came up with 6 main personas with different skill levels, goals and frustrations (for details see link below):

Novice Blogger
Experienced Blogger
Photoblogger
Mobile Photoblogger
Multi-author Blog Editor
Tutorial Writer

We’ve put together a Google Doc for these personas and I’m sure we’ll refine it in the course of the next weeks, possibly add another persona or so: Google Doc Personas

We’re thinking of providing a form for others to fill out to collect more data and to learn more about user’s image editing workflows, pain points and expectations.

We’ve also put together a list of general user flows/tasks around Image Adding and Editing that will help us account for how people are using the image editing tools. Please share any additional flows/tasks you feel are missing in the comments below. (Google Doc Flows/Tasks)

Adding/Editing Images

User uploads individual image and inserts into post
User edits image after insertion into post
User uploads individual image and edits prior to inserting into post
User uploads multiple images and wants to bulk edit images
User uploads multiple images and wants to edit single image
User uploads multiple images, inserts into post, and positions images in post editor
Editor edits images uploaded by another user

Specific Editing Tasks

User crops an image
User rotates an image
User flips an image
User rotates an individual image
User wants to individually rotate multiple images
User wants to bulk rotate images
User resizes an image by presets
User resizes an image to custom size
User wants to bulk resize images
User undos / redos editing steps
User deletes an image
User wants to bulk delete multiple images

Adding/Editing Photo Galleries

User uploads multiple images to create photo gallery
User creates gallery from selecting images in media library
User edits images in existing gallery in post
User wants to chose from different gallery templates / grids

We deliberately kept this exercise high level without creating any wireframes or mockups yet. I feel it’s important to understand the users and what they want to do first before we dive in.

Next steps are to document the current workflows and pain points. We also want to look at other image editing solutions and what we can learn from those.

We would love to hear your feedback!

#image-editing, #image-flow

Jon Brown 8:03 pm on July 12, 2014

Curious. Is this intentially limited to things a user wants to do and can given the existing toolset? Or should it include things users want to do but currently can’t? Ie. Add text overlay to image, add watermark to image, apply filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to image, combine images (create dypitch/tripitch)?
- Matt McLaughlin 1:41 pm on July 14, 2014
  
  I’ll second this. Adding text overlays or watermarks (think branding logo) to images would be a very nice addition and would save a bunch of time in photoshop. Most filters seem more like 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 territory, but it would be nice if there were say 2-3 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. filters and a standard place in the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. for them to live so that 3rd party filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. developers could make theirs live in the same consistent place in the UI rather than spraying UI all over the backend.
- sonjanyc 12:08 am on July 15, 2014
  
  Thanks for your feedback Jon – @jb510
  We were mainly looking at basic tasks to make sure the foundation is solid, but we also want to look at some more advanced functionality.
  
  Though I understand that for example adding watermarks to images and combining images are very essential for some websites, I’m not sure if this would be used by the majority of users. However, this would be a good opportunity for 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 developers. We want to help accommodate space in the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. for plugins to add more niche functionality.
  - Jon Brown 12:32 am on July 15, 2014
    
    I haven’t looked at the hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. in the image editor in a while. There are plugins like aviary-editor that offer much more advanced image editing capabilities. They do so in a UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. wholly removed from the WP Image Editor (link in media library list view). Also thinking of wp-retina-2x. It would be awesome if the native editor could be extended with complete image editing libraries like Aviary and plugins like WP Retina 2x.
    
    I’d say one missing basic feature is the ability to reupload/replace an image. While there is a good 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 for this enable-media-replace, it really seems like something coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. should be able to handle.
venkmanuk 5:54 pm on July 13, 2014

i think this all looks good, and it’s important to keep it at a high level until you get this sort of thing nailed.

one thing i have seen with the Novice Blogger is they have no understanding of the platform and tools and so their expectations of what (they hope) can be done could vary from crop/resize/flip all they way to creating layered arrangements of images, adding extra graphics and so on. this could be covered by a tutorial intro or something maybe. but they really have no idea. 🙂
tobifjellner 7:21 am on July 14, 2014

Is it possible to re-position an image in a page/post by simply dragging? (I’m to 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.-centric to even try, but I believe that such a possibility could be popular, even for me.)
- tobifjellner 7:26 am on July 14, 2014
  - <– I just noticed I skipped this letter above. (… too 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.-centric to…)
- tobifjellner 7:27 am on July 14, 2014
  
  Wow, I had no idea that a single letter “o” in the start of a row would get heavily reformatted. 🙂
- Jon Brown 12:25 am on July 15, 2014
  
  You can drag the insertion point of an image around in the visual editor and using the text align tools will toggle the image between alignright, alignnone, alignleft. These aren’t image editing though, that’s content.
  
  What exactly were you referring to?
TCBarrett 7:58 am on July 14, 2014

Is ‘blogger’ meant in a more generic term, or are personas who do not use WordPress to blog with excluded?

Considering the amount of websites built with WordPress that are not blogs, and have no blog section at all, is a non-blogging site administrator worth considering?
- Ipstenu (Mika Epstein) 1:15 pm on July 14, 2014
  
  Generic. End User might be a better term.
- sonjanyc 11:53 pm on July 14, 2014
  
  @TCBarrett Good question. Since the Image Editing tools are the same for posts or pages, we didn’t distinguish between a user that adds/edits images in a blog post or a page. I would assume the Novice Blogger would often match the expertise or challenges a user would face that updates his site’s pages every now and then. I would assume this user wouldn’t use the image editing tools every day and therefore would need some more guidance.
  
  If you have any workflows that you feel would be much different for a website owner that doesn’t have a blog when it comes to adding/editing images, please share. We do want to make sure we’re collecting all main use cases.
  
  Thanks.
  - Pablo Perea 6:54 pm on July 16, 2014
    
    I think the photo editing process will be similar regardless of where you use it, in an entry or in a page. However, there may be differences when placing the images within the content.
    
    Example: On a list of services or products, it is normal to place text and image and keep the remaining space blank until next item (Not allowing the text to surround the image)
    These needs can be solved using plugins, 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. or Shortcodes.
    
    As commented above, these aspects are more related to content edition, but it is true that they have a natural relationship with the concept of text alignement and imagenes floating, and this last point is in the image editor.
    
    Do you think it would be interesting to include these aspects in the research?
    - sonjanyc 1:16 am on July 17, 2014
      
      @pablo-perea Thanks for your feedback! I think it’s always good to look at all different use cases and then decide how relevant a specific use case is to the majority of people using WordPress. If you would like to provide a list of those cases that would be great!
      - Pablo Perea 8:24 pm on July 17, 2014
        
        I usually use 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./css to handle some features related to space and photo presentation, such as managing images and text like a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-level element, managing margins around the photo, choosing colour and size of the border… maybe bloggers also use these features, although perhaps they are more related to web designers.
Matt McLaughlin 2:02 pm on July 14, 2014
As a manager of a decently sized (150 users or so) multi-user blog, here are some things I’d like to see:
- Quick Edit rename
Our users upload a ton of photos named DSC2104.jpg and similar. I’d love a quick and easy way to rename them – preferably from the new grid layout media library rather than having to dive into the edit screen.
- Conforming the aspect ratio of multiple photos
Again, as a multi-user blog we get photos in a ton of different aspect ratios and we want some level of standardization of things like featured images. Also when putting together a gallery of photos with different aspect ratios it would be nice to have some control of the crops.
- A standard way to deal with crediting others
Each of our users gathers photos from a number of other people. “Uploaded by” is almost never the same as “photo taken by”. And there’s just no good way to deal with this since WordPress assumes that attribution should always fall to the uploader. I would kill for an “Attribution” field that defaults to the uploader but includes a drop-down for other blog users and an “other” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. that allows you to attribute the photo to someone who isn’t a member of the blog.
- sonjanyc 12:00 am on July 15, 2014
  
  Thanks @matt-mclaughlin,
  This is great feedback and exactly the kind of use cases we’re looking to gather.