Interaction pattern research – add an image

19 March 2014 – 13:48

Adding an image to a blog post, article or document can be achieved using different interaction patterns. This is a very quick research we’ve done for an internal project at ThoughtWorks.

Constrains: As an editor, I’d like to add an image to an article, in a web application, using a laptop computer, so I can engage users with a visually richer approach.

Drag and drop

Example: Microsoft Word, Gmail composer.

Pros: Easy to use, intuitive (for a subset of users or after learned), it also follows common operating system pattern to copy/move files. Lastly, it allows to drop the image in the exact place we want it to appear.

Cons: discoverability (there are no affordances that suggest you can drag and drop), hard to implement (cross browsing compatibility can be hard).

Button in toolbar

Example: Microsoft Word, WYSIWYG editors

Pros: Easy to discover (recognize the icon), easy to implement.

Cons: missing information about where the image will be placed — probably under the current cursor position.

Visual cue

Example: Medium editor

Pros: shows where the image will be placed, clean interface (no clutter, avoid having a floating/distracting toolbar)

Cons: Not a common approach (maybe with a bit of learning curve), some rely on hover functionality (non touch friendly)

This is the personal website of Ignacio Palomo Duarte, user experience consultant. If you're looking for my portfolio and more information just have a look at the homepage, and if you like this article maybe you can consider sharing it on twitter.