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.
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).
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.
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)comments powered by Disqus