Рабочий процесс в Mozilla при создании функции «Save for Later» для Firefox

Автор оригинала: Brian Groudan
  • Перевод
В этой статье подробно и с фотографиями описан обычно скрытый от нас процесс: исследование действий пользователей при работе с браузером. Оно проводилось для разработки новой функции Firefox — «Save for Later», которая позволяет сохранять контент для чтения или просмотра позже. Также показано немного рабочего процесса и мозгового штурма в Mozilla.

image

Firefox и “save for later”


У браузера по сути две основные функции поиск (серфинг) и повторное посещение. Моей задачей была организация закладок таким образом, чтобы повторное посещение было наиболее простым и удобным. При разработке функции «Save for Later» я тесно сотрудничал с командой Mozilla, в том числе front-end-разработчиками и product-менеджерами. 9-недельный график разработки:



Изначально запрос об исследовании от Firefox пришел команде Android: почему на мобильных устройствах достаточно редко пользуются закладками, и насколько выросла популярность этой функции, если бы она была реализована по-другому.



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



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

Фаза исследования


Из 60 человек было отобрано 10 для участия в исследовании. Всем были предложены анкеты:



Каждый день участники должны были записывать данные, отвечая на вопросы:

День 1. Сохранение: что и почему вы хотите сохранить? Как вы сохраняете обычно?

День 2. Повторное посещение: какие сайты и почему вы посещаете снова? Что вас на это сподвигло?

День 3. Лишение закладок: опишите свои действия при отсутствии функции закладок.

Один из исследуемых показал мне приложение, которое он использует для сохранения закладок:



Спустя три дня участники исследования пришли на собеседование, на котором я просил озвучивать все свои действия при работе с браузером, чтобы лучше понять, как человек взаимодействует с устройствами.

Закладки на листочках, разбитые на категории самими участниками:



Обобщение


Я собрал все анкеты и обобщил их, взяв основную информацию:



В итоге получилась схема, где каждому участнику назначен свой цвет, а также указаны основные данные исследования:



В итоге удалось понять основные способы сохранения контента сайтов для «чтения позже»:



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



Что же происходит после сохранения ссылки «на потом»? Все действия можно разделить на несколько категорий:

1. «Потребление»: после использования контента (прочтения или просмотра), он становится ненужным, поэтому просто удаляется.

2. Повторное использование: динамический контент (например, обновляемые сайты) используется многократно.

3. Шаринг: пользователь делиться контентом, при этом сохраняя его.

4. Неясное использование: сохранение контента, который возможно когда-то пригодится.

5. Организация: сохранение контента для упорядочения существующего, а также связи с ним.

6. Очистка: сохранение и удаление контента.

Интересная аналогия сохранения контента с рабочим местом:



Разделение и популярность категорий на разных девайсах:



Количественный анализ


Благодаря Test Pilot мы узнали, что пользователи достаточно часто назначают в браузере домашнюю страницу:



Способы добавления в закладки в Firefox:



Статистика более 5000 пользователей, самый популярный способ — нажатие на звездочку.



Карта кликов:



Мозговой штурм в Mozilla:



Основываясь на результатах исследования, я выбрал основные направления разработки функции «Save for Later»:

1. Доступ отовсюду: пользователи хотят иметь доступ к сохраненному контенту в любое время и с любого устройства.

2. Любой контент: пользователи хотят добавлять любую информация (текст, фото, видео) без лишнего мусора в виде интерфейсов сайтов.

3. Надежность. пользователя хотят иметь надежное хранилище интересующего их контента.

4. Универсальность: пользователи сохранять контент, который можно использовать в последствии как угодно.

UX-дизайнеры Mozilla за работой:



Все «намозгоштурмленное» было записано на доску:







Одной из идей был Dropzilla — возможность добавлять сайты в закладки путем перетаскивания на специальную «Save for Later» панель, а также синхронизировать данные с закладочными сервисами:



Dropzilla — это лишь один из концептов реализации «Save for Later»-функционала, который родился в ходе мозгового штурма разработчиков Mozilla. В ходе этой работы я понял главное: несмотря на достаточную стандартизацию браузеров сегодня, все еще есть место для воображения и реализации новых идей.
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 23

    +2
    Я ради сохранения интересуюущих меня страниц и контента уже начал писать свою программу на pyQT, потому что от количества открытых в браузре вкладок проседает вся оперативная память…
    Поскорее бы уже реализовали интуитивный сервис закладок с возможностью скачать на локальный диск и синхронизации по разным устройствам!
    Только ради этого полностью перейду с oперы на мозиллу!
      +2
      Pocket — для прочитать потом
      Evernote — для запомнить навсегда
      + расширения для интеграции с Firefox

      Всё как Вы хотите — с возможностью скачать на локальный диск и с синхронизацией, в том числе с андроидом.
        0
        Спасибо, да, эти сервисы замечательные, но хочется платформонезависимое решение (использую linux, в том числе на arm платформе) без привязки к веб сервису.
        Да, вполне вероятно, что данные условия выполнимы и я плохо искал, но что-то чуть-чуть не нравиться…
        А так, свой велосипед ближе к телу ;)
          +2
          Zotero. Платформонезависимо и без привязки к веб.
            +1
            Выглядит многообещающе, спасибо.
        0
        У Оперы есть и закладки, и заметки (в т.ч. с привязкой к веб-адресу), и синхронизация… Но что-то им мешает улучшить заметки, введя возможность копирования информации с оформлением. Ах, да, — это же опять копирование с оформлением, на которое Опера n-ное количество лет забивает.
          0
          У меня закладки в опере забиты на три выпадающих списка — уже тяжеловато ориентироваться…
          Всегда был приверженцем их бразера, очень понравились их дополнения, турбо, синхронизация, но…
          НО не стабильность при релизах (одно исправят — другое поломают), недоступность исходных кодов — невозможность самому подкрутить\портнуть…
          Опять же, много вкладок — их изображение сжимается и становиться дико неужобно искать нужную, все-таки падает и не всегда корректно выполняет скрипты (юзаю релиз из репов на ubunut 12.04 x64).
          В общем — уже не торт =\
            0
            Искать нужную вкладку (среди сотни-другой) удобно через специальную панель, там есть поле поиска.
              +1
              Еще можно по Ctrl+Tab переключаться или искать табы, порой бывает удобно.
            0
            Попробуйте listick.ru — там есть интересное дополнение для сохранения ссылок на сайты через скриншоты, но пока только для хрома.
              0
              А что вы там реализовываете? Я подобную необходимость удовлетворил только лишь wget-ом с конкретным набором параметров.
                0
                Я для загрузки тоже wget использую, только в исходниках немного подправил функцию создания файла на диске: если в ссылке много параметров — ругался и не мог создать файл, так как пытался вставить в название большой кусок ссылки… По-сути, просто обвязка вокруг него.
                Берем ссылку, интересующую нас, и автоматически заполняем следующую структуру:
                1) url — сама ссылка
                2) локальный url — ссылка на загруженные файлы (как раз грузит wget, web страницы грузит целиком со всем содержимым сохраняет в папки по датам), при старте отслеживает изменение корневого каталога и переписывает путь до цели.
                3) название — название веб страницы
                4) комментарий — краткое описание
                5) теги
                6) время создания
                7) время изменения
                8) id

                И всю эту прелесть сохраняем в sqlite бд.
                Пока только жутко костыльный говнокодистый скриптик на python, все никак gui не сподоблюсь дописать нормальное…
                  0
                  А параметр --output-document плохо работал?
                    0
                    Я использовал флаги для полной загрузки страницы со всем конетнтом — wget сам создавал вложенную иерархию папок + рассчитывал на любой тип ссылок, то есть кинуть ссылку на картинку — должен скачать + рассчитывал на возможность передавать много ссылок. Соответсвенно, указывать самому файл, куда скачивать, — лишняя морока, которую нужно обрабатывать.
                    По-моему, именно из-за флага полной загрузки всего контента и отказался от идеи указывать выходной файл…
            • НЛО прилетело и опубликовало эту надпись здесь
                +1
                Все про себя прочитал )) И куча открытых вкладок, и быстрый копипейст с кратким описанием в черновики gmail. Остальное не приживается почему-то.
                  +1
                  ха))я тож так делал как в начале статьи было,) счас научился работать с папками закладок — и по группам все перебрасываю туда… правда забываю потом читать с папок тех… и вобще уже два для как перешел на хром,,, хотя и в мозиле есть свои прелести.
                    –2
                    И чем предложенный вариант отличается от обычных закладок кроме дизайна? Те же категории/папки, такие же списки. Этот вариант, на мой взгляд, точно так же превратится в свалку.
                      +1
                      Давно использую расширение ScrapBook + Dropbox для синхронизации.
                        –1
                        лучше бы закрытие вкладок починили.
                          +1
                          1000 табов бразуера забивают все 16Gb памяти ноутбука и грузят процессор фоновыми скриптами и флешем. Чтобы убрать все это достаточно сохранить все табы окна в закладки или встроенной функцией или в Хроме например расширением SaveTabs в папку с текущей датой/временем и потом рассортировать по папками. В браузере закладок есть экспорт-импорт в стандартном формате Netscape bookmark. По заголовкам букмарков не всегда можно понять о чем страница, но ScrapBook избыточен, в Хроме устарелая версия, а MAFF не включает кэширование стандартных js-библиотек и вообще неудобен.
                          Тут есть реальные проблемы.
                          Для чтения на айфоне/айпаде можно использовать Readability, но этого плагина нет в мобильном Сафари, так что часто проще передать пару ссылок через Growl.
                          Использование ссылок на E-mail на айфоне это, конечно, дикость, но альтернатив нет в мобильном Сафари и Хроме. Однако больше всего раздражает что нельзя передать целиком избранное из LHabr.
                          Если бы кто-то написал статью типа «10 самых полезных приемов работы» на компьютере, пунктом первым было бы «Откройте для себя закладки». Действительно многие не используют закладки, потому что сохранять по одной 1000 штук нельзя, а функцию «Сохранить все» не видят.
                            0
                            процесс запечатлели красиво только эти «китайцы» ничего особого не придумали, результаты работы в общем-то банальны.
                            У меня хранится всё довольно разрознено, часть в google docs — где как-то текс с разметкой (но тут по минимуму). часть на speed dial в хроме (плагин) и опере — это те полезные ресурсы которые пока не нужны, но из виду упускать нельзя. Остальные на венике в виде иконок раскиданных по разным папкам, в том числе и дропбокса. Ещё пару сотен в google bookmarks, этот вариант был хорош тем, что гугл умел добавлять и помечать особым образом ресурсы из закладок если они были релевантные поисковому запросу. Но эту фишку убрали после выпуска g+.
                              0
                              Показанный портотип хорошо бы подошел как замена тормознутому и неуклюжему candytab, но как интерфейс для закладок… Тянуть маленькую иконку через полэкрана — верх маразма, да и новшества не видно, пользовался подобным подходом перетаскивая на папки на тулбаре, не слишком то удобно делать это для каждого таба.

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое