Crowdsourcing design: making the browser extension to quickly publish pictures on Habré

Let's try to make an extension for downloading images in HabrAjax , starting from design and usability.
The idea of ​​expansion : Everyone who writes something in X., sooner or later publish pictures. Most recently, the admin has confirmed by her actions that she considers habrastorage.org as a full-fledged hosting of pictures for absolutely any publications. Briefly - now all without exception pictures are cached on habrastorage.org . This means that even funny pictures in the comments are recommended to be published through this service, otherwise they will be there anyway.

It is time to fully use the "storadzh." For this, one thing is missing - a user-friendly interface. Of course, you can open it in a new window, load files with buttons through a flash, copy tags into an article or comment with your hands. (And feel the inconvenience of closing this page, because it does not even remember the last downloaded files.) But why, if browsers have long been able to do this in one drag?

It is proposed to make a beautiful and convenient interface for throwing files "on storadzh." In the literal sense, as it is now being done on Gitkhab , but with local features and amenities. Let the mention of it be modestly huddle in the sidebar, and there will also be everything you need to work with uploaded pictures - a list of the latest previews, information, buttons for re-publishing, deleting and transferring to favorites.

Ideas

It is proposed to have? in addition to the standard mechanism for working with storaj, 2 more mechanisms.
The standard way of publishing requires a flash in the browser, clicking on buttons, copying links, saving them "on paper" or re-uploading images to get lost links.
')
The first additional method:

1. A user who can write articles or comments, drags the image file on the input field. The cursor is already there where you need to insert a picture tag;
2. Drops the file, and the image opens in the background by the input center. Above the input field appears the question: “Post a picture (file name, size, weight) to habrastorage.org and insert a tag?” And action buttons. View the picture in more detail to ensure its correctness and quality, continue or cancel. (There will be some more options.)
3. He presses "Continue" - the picture is published in the build-up, appears in the sidebar as a small preview (in case of re-use or viewing options before publication), but the main thing is displayed in the input field as a tag. (There are also a lot of options for the tag format, details below.)

(A demo of how the images are thrown into the background image of the block.)
Everything, the picture is thrown, almost like on Gitkhab, with the only difference that an extra preview will not interfere. The preview method is described here: Display of scalable images , already implemented.

Second additional method:

1. As mentioned, there is a short note in the sidebar that you can upload files. For example,
   

   From HabrAjax : Drop image files into the input fields for comments and articles to publish them on habrastorage.org (an image tag with an address will appear under the cursor).

   Therefore, it is possible to throw not only in the input fields, but directly into this block for the postponed publication. If there is an input field, the link will be published; if not, it will be ready for publication later;
2. The user uploads the file to the block in the sidebar;
3. In the sidebar there is a preview in the list of "recent";
4. When you hover over the picture preview (92 to 92), information about the file and buttons for previewing and publishing opens.
5. The user has set the posting options for the tag - put it in the center or on the right, show the preview and the link or the full picture, put your link under the picture. Click - and the tag appeared in the desired input field (comment, article, question, letter).

(An example of a script where you have already done dragging pictures into a stack (worked in Firefox; now it probably works too.) - " HTML5 in HabraStorage ".)

Additional feature:

• In addition to storing the list of recent and selected files, the service lacks resize images. No problem, because there are other online services, such as www.photosize.com . Alternatively, before the preview we will be able to resize the image.

Those who are interested

To see the service in your beautiful design and thoughtful interface, you can offer me a design option. My side of responsibility is to choose a design that most people like (or a couple of design options) and portray as a user script (Chrome, Firefox, Opera) or Chrome extension. The described functions and others proposed by the readers will work as a separate script or as part of the HabrAjax extension.


Now it is necessary that designers or usabilityists really become interested in this. Considering that thousands of people publish pictures on Habré, there are chances for that.

UPD: (08/14/13, 4:00 pm) Intermediate results of the survey (“70 people voted”)

The survey showed that with a modest 2000 views of the article itself (per day), 70 who had voted + 60 abstentions viewed the poll.
18% (13 people) could draw a design;
26 people ready to participate in the discussion;
19 people need a script (26%);
16 people - not needed.
If you extrapolate to those who have not looked, then at least 50 people will use the script.
According to Safari - after making the basic version, I will try to adapt the script for Safari (+ NinjaKit).

Now you need to organize the process of discussing the interface. Each of the designers had their own idea of ​​the interface, but you need to have some working schemes for discussion and agreement. I propose to place the schemes for those whom they have, somewhere in the new topic in QA, and put the link here - their author will be able to change and they will be in full view of those who read QA.
Additional idea to the interface : to call the window in the sidebar in the visible area of ​​the window, make it floating so that when you click on the button it jumped to the level of the input field (vertical page).
Worker question: what interface to add other people's pictures to favorites?

PS Please duplicate one message in the LAN of the person who wrote about the design - accidentally erased one of the dialogs by pressing the “Delete” button.

UPD2: (08/14/13, 6:00 PM) Layout of the block in the sidebar (at least extra text, informer title, hint (for the sketch, made by text, but you can picture it))

UPD3: (08/14/13, 20:00) The latest version of the block in the sidebar


When you hover the mouse over the question:



UPD4: (08/14/13, 9:00 PM) Other dialogs

I started to draw my own version, not having received a single design from the side yet.
In addition to the block shown in the sidebar, we need several blocks and interfaces in them:
* list of preview files in 2 rows in the sidebar; on hover - information on files, the ability to view, insert tags and their options;
* dialogue after dragging a file; It is desirable that it be fixed in height and the size of the initial window dragging; there - the file name, dimensions, weight, buttons, buttons, publish, cancel, resize fields;
* dialogue (rubber) over any input field; there is always up to 5 lines of space for it; To the existing one, a custom URL field is added, a tag generation button with a preview image (2 options).

They are drawn on paper, so it is difficult to copy now to the web. In short, the dialog takes 3 lines above the input field.

UPD5: (08/15/13, 01:00) Dialogue after dragging a file into the sidebar Hovering to a question is a hint of what action takes place. Tinted fields with sizes - placeholders. After entering a different number, you can resize it through a third-party service, and the numbers are clearly seen on the white backing.

(A small preview can be shown immediately, right or below, calculating where it is more convenient to place it (so that the block height does not change).)

UPD6: (08/15/13) Dialogue after dragging in the input field . Additional fields are displayed: its own URL link under the picture, square fields with a preview of small pictures (they can be modeled before upload), centering radio buttons, if you have entered the article (not shown). The remaining elements are made similar to the elements in the sidebar, with the same location. In the input field you can see a preview of the dragged image.

Narrow window case:



Since all the previews are modeled, the idea of difiso about the lazy publication of pictures is remembered again. For her, everything is there, except for the storage memory (up to 5 MB there will be no problems).