Краудсорсинг-дизайн: делаем расширение браузера для быстрой публикации картинок на Хабре

Попробуем сделать расширение для загрузки картинок в HabrAjax, начав от дизайна и юзабилити.
Идея расширения: Все, кто что-то пишет на Х., рано или поздно публикуют картинки. Совсем недавно админ-ия своими действиями подтвердила, что считает habrastorage.org полноценным хостингом картинок для абсолютно любых публикаций. Кратко — теперь все без исключения картинки кешируются на habrastorage.org. Это значит, что даже картинки-приколы в комментариях рекомендуется публиковать через этот сервис, иначе всё равно они там будут.

Настало время полноценно использовать «сторадж». Для этого не хватает одного — удобного интерфейса. Конечно, можно открыть его в новом окне, грузить файлы кнопками через флеш, копировать руками теги в статью или комментарии. (И испытывать неудобство от закрывания этой страницы, потому что в ней нет даже запоминания последних загруженных файлов.) Но зачем, если браузеры давно умеют делать это в одно перетаскивание?

Предлагается сделать красивый и удобный интерфейс для закидывания файлов «на сторадж». В буквальном смысле, так, как сейчас делается на Гитхабе, но с местными особенностями и удобствами. Пусть упоминание о нём будет скромно ютиться в сайдбаре, и там же будет всё нужное для работы с закачанными картинками — список последних превью, информация, кнопки повторной публикации, удаления и переноса в избранное.

Наработки идей

Предлагается иметь? в дополнение к стандартному механизму работы со стораджем, ещё 2 механизма.
Стандартный способ публикации требует флеша в браузере, нажатия на кнопки, копирования ссылок, сохранения их «на бумажке» или перезаливки изображений для получения потерянных ссылок.

Первый дополнительный способ:

1. Пользователь, умеющий писать статьи или комментарии, тащит файл картинки на поле ввода. Курсор там уже стоит на месте, где нужно вставить тег картинки;
2. Бросает файл, и изображение открывается в фоне поя ввода по центру. Над полем ввода появляется вопрос: «Опубликовать картинку (название файла, размеры, вес) на habrastorage.org и вставить тег?» и кнопки действий. Посмотреть картинку подробнее, чтобы убедиться в её правильности и качестве, продолжить или отменить. (Будет ещё несколько вариантов.)
3. Нажимает «Продолжить» — картинка публикуется на строадже, возникает в сайдбаре в виде маленького превью (на случай повторного использования или просмотра вариантов до публикации), но главное — отображается в поле ввода в виде тега. (Для формата тега тоже есть много опций, подробности ниже.)

(Демо того, как закидываются картинки в фоновое изображение блока.)
Всё, картинка закинута, почти как на Гитхабе, с той лишь разницей, что лишний предпросмотр не помешает. Способ предпросмотра описан здесь: Показ масштабируемых изображений, уже реализован.

Второй дополнительный способ:

1. Как упоминалось, в сайдбаре есть короткое примечание, что можно закидывать файлы. К примеру,
   

   От HabrAjax: Закидывайте файлы картинок в поля ввода комментариев и статей, чтобы опубликовать их на habrastorage.org (тег картинки с адресом появится под курсором).

   Поэтому можно закидывать не только в поля ввода, а прямо в этот блок для отложенной публикации. Если поле ввода есть — ссылка опубликуется, если нет — будет готова для публикации позже;
2. Пользователь закидывает файл в блок в сайдбаре;
3. В сайдбаре возникает превью в списке «последние»;
4. При наведении на картинку превью (92 на 92) открывается информация о файле и кнопки для превью и публикации.
5. Пользователь установил настройки публикации тега — ставить ли по центру или справа, показать превью и ссылку или полную картинку, поставить ли свою ссылку под картинкой. Клик — и тег появился в нужном поле ввода (комментарий, статья, вопрос, письмо).

(Пример скрипта, где уже сделано затаскивание картинок в сторадж (работало в Firefox; сейчас, вероятно, тоже работает.) — "HTML5 в HabraStorage".)

Дополнительная фича:

• Кроме хранения списка последних и избранных файлов, сервису не хватает ресайза картинок. Нет проблем, потому что есть другие онлайновые сервисы, типа www.photosize.com. Как вариант, перед предпросмотром мы сможем ресайзить картинку.

Тем, кто заинтересовался

Чтобы увидеть сервис в вашем красивом дизайне и продуманном интерфейсе, вы можете предложить мне вариант дизайна. Моя сторона ответственности — выбрать дизайн, понравившийся большинству (или пару вариантов дизайна) и изобразить в виде юзерскрипта (Хром, Firefox, Opera) или расширения Хрома. Описанные функции и другие, предложенные читателями, будут работать в виде отдельного скрипта или в составе расширения HabrAjax.

Подробнее про состав полей в сайдбаре и над полем ввода; черновик

Примерный текст в сайдбаре:

От HabrAjax: вы можете сохранить много картинок (на habrastorage.org) для статей и комментариев сайта. Затащите их в этот блок для отложенной публикации или прямо на поле ввода комментария, статьи, вопроса, ответа — после предпросмотра и вашего подтверждения ссылка появится на месте курсора. В этом блоке показаны картинки для повторного использования (не обязательно свои):
последние (NN)
избранные (N)
удалённые (NN)
Размер картинок не меняется, если они не более 1920х1080.

Когда закинули картинку:

Выберите вариант публикации.
1. Просто вставить тег с картинкой (размер ****, но на странице будет ужиматься по ширине);
2-3. Картинку с превью от стораджа (2 варианта, какие есть);
4-6. Рисунок или превью (2 варианта) на ссылке, а по ссылке — сторонняя страница или изображение (не сторадж, внесите своё);
7. Подготовьте превью на сервисе-ресайзере, а затем — варианты 1-6 от стораджа.
(Предпросмотр) (ОК) (Отмена)

Процесс работы с картинками (варианты).

1. Закинуть картинку со своего компьютера в поле ввода или на блок в сайдбаре. Далее получим:
  1.1 Видим превью картинки на фоне поля ввода (мешают буквы, да и оно может не поместиться в поле).
  1.2 Если забрасывали в сайдбар, под блоком видим вопрос («Опубликовать картинку (название файла, размеры, вес) на habrastorage.org?») и 3 заметные кнопки: (Предпросмотр) (Опубликовать) (Ресайз до ширины: [___], высоты: [___]) (Отмена)
  1.3 Если забрасывали в поле ввода, вопрос формулируется: «Опубликовать картинку (название файла, размеры, вес) на habrastorage.org и вставить тег?» и имеется больше кнопок: (Предпросмотр) (В полный размер) (в виде превью 92х92 без масштабирования со ссылкой) (превью ХХхХХ с масштабированием и ссылкой) (со своей ссылкой: [_____]) (Ресайз до ширины: [___], высоты: [___]) (Отмена)
  1.3 Меняем высоту поля ввода, чтобы лучше рассмотреть превью в поле ввода или жмём «Предпросмотр», чтобы увидеть превью средствами встроенного скрипта (с перетаскиванием, ресайзом и подсказками размеров и масштаба).
  1.4 К действию приведёт выбор «Опубликовать» или «Превью». Если не был выбран «Ресайз», картинка опубликуется, а её превью будет видно в списке последних загруженных (последние сверху); если выбран — ресайз произойдёт на стороннем сервисе, а результат будет показан в виде превью с кнопками под ним: (Опубликовать на habrastorage.org) (Отмена). Можно изменять параметры ресайза (размер), выбирая отпимальное качество и детализацию.
  1.5 Если заполнено поле ссылки, опубликуется изображение и будет представлено в виде пары вложенных тегов — А и IMG.
2. Навести мышь на одно из превью в сайдбаре. Увидим варианты действий под картинкой и информацию о картинке:
  * (Предпросмотр)
  * ХХХхХХХ (пикс.)
  * ХХХХХ (байт)
  * [удалить из списка]
  * [в избранное]
  * (Вставить тег IMG В полный размер)
  * (Вставить тег превью 92х92 без масштабирования со ссылкой)
  * (Вставить превью ХХхХХ с масштабированием и ссылкой)
  * [слева / по центру / справа] — выбирать по Shift / Ctrl+Shift /Ctrl в момент вставки, для статей/вопросов
  * (со своей ссылкой: [_____])
  * (Ресайз до ширины: [___], высоты: [___]) — да, можем ещё раз ресайзить опубликованное на сторадже изображение, а результат будет предложено ещё раз опубликовать.
Список действий, кроме последнего, приведёт к вставке тега или пары тегов в поле ввода, на место курсора, без дополнительных внешних действий на серверах. Если поля ввода нет, результат будет показан в поле ввода для копирования (под блоком (?)).
3. Наконец, публикацию в статьях можно делать с горизонтальным форматированием, для чего предусмотрены 3 радиокнопки.

Теперь нужно, чтобы дизайнеры или юзабилисты действительно этим заинтересовались. Учитывая, что на Хабре картинки публикуют тысячи человек, шансы для этого есть.

UPD: (14.08.13, 16:00) Промежуточные итоги опроса («Проголосовало 70 человек»)

Опрос показал, что при скромных 2000 просмотрах самой статьи (за сутки) 70 проголосовавших + 60 воздержавшихся просмотрели опрос.
18% (13 чел.) могли бы нарисовать дизайн;
26 чел. готовы участвовать в обсуждении;
19 человекам скрипт нужен (26%);
16 человекам — не нужен.
Если экстраполировать на непосмотревших, то не менее 50 человек скрипт будут использовать.
По Safari — после изготовления основной версии я постараюсь адаптировать скрипт под Safari (+NinjaKit).

Теперь нужно организовать процесс обсуждения интерфейса. У каждого из дизайнеров сложилось своё представление об интерфейсе, но надо какие-то рабочие схемы иметь для обсуждения и согласования. Предлагаю разместить схемы у тех, кого они есть, где-нибудь в новом топике в QA, а ссылку поставить здесь — их автор сможет изменять и они будут на виду у тех, кто читает QA.
Дополнительная идея к интерфейсу: чтобы вызвать окошко в сайдбаре в видимую область окна, сделать его плавающим, чтобы при нажатии на кнопку оно перескочило на уровень поля ввода (по вертикали страницы).
Рабочий вопрос: каким интерфейсом занести чужие рисунки в избранные?

P.S. Прошу продублировать одно сообщение в ЛС того, кто написал про дизайн — случайно стёрся один из диалогов нажатием кнопки «Удалить».

UPD2: (14.08.13, 18:00) Макет блока в сайдбаре (минимум лишнего текста, заголовок информера, подсказка (для наброска сделана текстом, но можно картинкой))

3 скриншота

Узкое окно:


Широкое окно:



Когда навели мышь на знак вопроса:

UPD3: (14.08.13, 20:00) Последний вариант блока в сайдбаре


При наведении мыши на вопрос:



UPD4: (14.08.13, 21:00) Другие диалоги

Приступил к прорисовке своего варианта, не получив пока ни одного дизайна со стороны.
Кроме показанного блока в сайдбаре, нужны несколько блоков и интерфейсов в них:
* список превью файлов в 2 ряда в сайдбаре; по наведению — информация по файлам, возможность просмотра, вставки тегов и вариантов их;
* диалог после затаскивания файла; Желательно, чтобы он был фиксирован по высоте и был размером с начальное окно затаскивания; там — имя файла, размеры, вес, кнопки превтью, публикации, отмены, поля ресайза;
* диалог (резиновый) над любым полем ввода; для него всегда имеется до 5 строк места вверх; к имеющемуся добавляется поле собственного URL, кнопки генерации тега с картинкой превью (2 варианта).

Они отрисованы на бумаге, поэтому затруднительно скопировать сейчас в веб. Кратко — над полем ввода диалог занимает 3 строки.

UPD5: (15.08.13, 01:00) Диалог после затаскивания файла в сайдбаре По наведению на вопрос — подсказка того, что за действие происходит. Подкрашенные поля с размерами — плейсхолдеры. После ввода другого числа можно ресайзить через сторонний сервис, а числа видятся чётко и на белой подложке.

(Малое превью можно показать сразу, справа или внизу, вычисляя, где его удобнее разместить (так, чтобы высота блока не менялась).)

UPD6: (15.08.13) Диалог после затаскивания в поле ввода. Отображаются дополнительные поля: своя ссылка «URL» под картинкой, квадратные поля с предпросмотром малых картинок (их можно смоделировать до загрузки), радиокнопки центрирования, если ввод в статью (не изображены). Остальные элементы сделаны похожими на элементы в сайдбаре, с таким же расположением. В поле ввода видно превью затащенной картинки.

Случай узкого окна:



Поскольку все превью моделируются, то снова вспоминается идея difiso о ленивой публикации картинок. Для неё всё есть, кроме памяти хранилища (до 5 МБ проблем не будет).