Допиливаем прибитое поле поиска Гугла

    За десятилетие развития Гугл уже давно перестал выкладывать страницы поиска с примитивной вёрсткой, денег и времени на дизайн поисковой страницы стало хватать. Недавно (на самом деле, в разных районах мира он экспериментировал уже 2 месяца) он выложил новый дизайн результатов поиска, которые ещё постепенно дорабатываются — появилось овальное поле ввода (в поиске картинок — ещё прямоугольное), прибитое к верху (при прокрутке страницы) поле поиска. Остальные функции, в основном, остаются теми же, для которых довольно давно был сделан юзерскрипт (расширение браузера) Google Search Extra Buttons. В связи с изменениями вёрстки страницы были сделаны доработки, и заодно они затронули новые элементы пользовательского интерфейса, о которых порассуждаем сейчас, показав работающие модификации.

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

    • Дополнительные кнопки — они составляют основу юзерскрипта, ради которых его устанавливают. Чтобы они были на расстоянии одного клика, некоторые функции (поиск по датам, по типам файлов и сайтам) вынесены ближе к пользователю, на свободное место страницы. Это уже существует несколько лет, так что уже обсуждалось, в том числе в паре статей на Хабре;
    • хранение настроек дополнительных кнопок;
    • спадающий список расширений файлов (около 30), в общем поиске и поиске по картинкам;
    • подсказки, закрывающие при появлении результаты поиска — как решено неполное закрытие;
    • прибитое поле поиска — это было у Яндекса лет 7 назад; есть скрипт, «боровшийся» с ним, а теперь похожие проблемы решает в стиле айкидо и гугловский юзерскрипт;
    • требуемая широкая страница Гугла (хочет 1100) несколько урезана (до 800px с хедером относительно удобно).

    Дополнительные кнопки


    Они в последние дни не изменились, но была доработка около года назад, улучшающая переходы (CSS transitions) исчезновения колонок дат по отведению мыши. Изначально в скрипте было сделано программное исчезновение колонок, на JS, чтобы при случайном отведении мыши они мгновенно не исчезали и за доли секунды можно было бы исправиться, если колонка ещё нужна. Это — обычный приём, который используют в меню с этими же целями. Сейчас это можно полностью сделать на CSS, а раньше требовалась более полная поддержка браузеров. Сейчас программное исчезновение сохранено, но немного сглажено наличием CSS transitions. Не всем нравится вообще наличие переходов и плавных угасаний прозрачности, но это — вопрос настроек и доработок скрипта. В нём предусмотрено хранение настроек в localStorage, но нет «тем оформления».

    Хранение настроек


    С хранением localStorage Гугл, Яндекс и Фейсбук давно не просты — они свою память (браузера локального компьютера каждого пользователя) периодически чистят. Поэтому, чтобы хранить домены сайтов, в которых пользователь часто ищет, числа дней и недель, за которые он проводит группы поисков — пришлось делать непростое решение (подобное где-то описывалось на Хабре, насколько помнится, для Фейсбука) — хранить настройки на другом домене. Зато теперь можно расширять скрипт, например, сохраняя те самые «темы оформления», которые давно могли быть написаны. В заголовке спадающего списка появляется и хранится то число дней, недель или лет, которые пользователь выбрал при последнем поиске. (Ещё одна крупица удобства.)

    Список расширений файлов


    Чтобы удобно выводить 23 типа файла и 7 типов картинок, типы файлов разбиты на 3 колонки, но 2 последних появляются при нажатии кнопки «More...». Ещё, в поиске картинок в дополнительных кнопках продублирован чекбокс «Показывать размеры изображений» (или не показывать).

    Для файлов остаётся открытым вопрос, как удобнее, и нужно ли — задавать поиск по нескольким типам файлов. Запрос на него можно написать вручную в поле поиска (filetype:pdf OR filetype:doc), но можно как-то и в интерфейсе кнопок. У Яндекса есть аналогичная возможность.

    Подсказки поиска и прозрачность


    Переходим к самому интересному — к вотчине дизайнеров Гугла. Впрочем и в Яндексе простыня подсказок, закрывающая пол-экрана, не решена, и тоже приходилось подправлять. В Гугле сделаем пообстоятельнее, поскольку он выделяет различные окончания слов и фраз, чтобы удобнее было ориентироваться. Сделаем так, чтобы весь этот банкет ещё и не сильно мешал поиску — основному занятию поисковика.

    В Яндексе прозрачность была сделана просто — едва заметная (скриптом Yandex No Float Field), чтобы угадывались заголовки и форма колонки под подсказкой. Это почти не мешает смотреть не всегда желанные подсказки и не полностью убивает видимость результатов поиска.


    В Гугле в новом скрипте сделано радикальнее — больше прозрачности. Через сплошные белые поля можно даже читать. Но чтобы и подсказки были видны — используем теги жирного текста из подсказок, чтобы устроить этим важным частям плотные цветные подложки.


    Прибитое поле поиска


    (Или строка-прилипала — ©2011 ya — боролись здесь: userstyles.org/styles/51117/yandex-ru-no-float-field. Через пару лет её отменили, потом через 2-3 года снова ввели и сейчас она в интерфейсе Яндекса имеется.)

    Вот и Гугл ступил на эту кривую дорожку. Очевидно, что в этом решении принципиально ущербно, если у вас — не монитор высотой более 1600 пикселей. Поле поиска с его границами и фенечками скрывает часть высоты окна, необходимой для показа результатов поиска — основного, за чем пришли на сайт. Если на обычной странице прокрутка убирает поле из окна, то с «доброй услугой» прибития его наверху теряется и эта простая возможность. А если, как у Яндекса сейчас, ещё и ссылки — размер благодарности пропорционально растёт. (Впрочем, ростовщики тоже берут кто 3%, кто 7% комиссии, так что большинству — привычно, но смысл? Зачем, если не нужно даже трёх?) Впрочем, они оба, наверное, вовремя вложились в производителей мониторов высокого разрешения, так что и Гуглу сейчас прибыль начнёт капать ). Но пока не купили новый монитор, давайте уберём эту прилипшую строчку.

    Гугл в своём прибитом поле съедает немного — всего 72px (72/1080 = 6.7% комиссии для производителей мониторов), Яндекс — 94 (8.7%). Хотя оба могли бы показывать окно при необходимости — по наведению мыши на верхнюю часть экрана.


    Исполним мечты нищих пользователей, не желающих потратить денег на (ненужное им) железо — тем более, что у Гугла автоматически получилось показать наши дополнительные кнопки в своём прибитом поле. Если поле увести под верх окна, кнопки «свешиваются», и наведение мыши на них позволяет открывать поле ввода.


    Процент комиссии составил высоту кнопок — 22/1080=2%, да и то делим на 3, т.к. по ширине занимают треть экрана. (Среди капиталистов-мониторщиков прокатился ропот негодования.)

    Наводим в середине страницы на что-нибудь — видим не только спадающие кнопки, но и доступное поле ввода.


    Широкая страница Гугла


    Они пока производят не слишком широкоформатные мониторы, поэтому стилями установили ограничение ширины страницы в 1100 пискелей — совсем скромные ещё. (Зачем им эти люди с 1100 пикселями?) Но когда смотрим результаты поиска не во всё окно, бывает нужно и меньше. А поле поиска смотреть на меньшей ширине неудобно.

    Делаем доработку, чтобы от 800 пикселей можно было пользоваться всеми функциями в заголовке, не крутя страницу по горизонтали.


    Нижняя прокрутка по горизонтали остаётся, но это уже — фирменный стиль Гугла, который сильно зависит от наполнения страницы. Оставим эту работу ему, а мы, когда (и если) сделаем свой поисковик, поработаем в нём и над горизонтальной прокруткой.

    В планах юзерскрипта для Гугла — добавить несколько кнопок (размеры, стили, цвета) для окна поиска картинок, сделать мультивыбор файлов, 1-2 чекбокса для стилей и оставить его в таком виде на следующие доработки, когда понадобится.

    UPD: интересная фича в Гугле для русского языка.
    Как известно, калькулятор Гугла подмешивается в результаты поиска, если видит математическое выражение. В частности, 2^4 — это 2**4, равно 16. Но и '2в4' Гугл тоже понимает как операцию возведения в степень.
    • +14
    • 3,6k
    • 6
    Поделиться публикацией

    Похожие публикации

    Комментарии 6
      +1
      Пользуясь случаем, лично говорю — спасибо!
      Толковый скрипт, с удовольствием пользуюсь.
        0
        Когда уже в этой вселенной перестанут делать круглыми элементы интерфейса, при учете что сетка всё равно как была квадратной, так и осталась.
          0
          Когда умы захватят революционеры Майнкрафта.
          0
          А как совладать с квадратными (скругленными) вкладками в хроме? Старые трапеции не мозолят глаза, да и по размерам меньше.
          Раньше через chrome://flags.ui-layout исправлялось, теперь и эту возможность прикрыли
            0
            Через юзерскрипт это недоступно, но через расширение хрома, возможно (но совсем не обязательно — там доступ к параметрам табов в background.js, а не к оформлению), что-то есть. А можно ещё Хром Standalone пропатчить перед установкой, ресурсы подправить, если ничего не останется. В Хромиуме, кстати, такие же скругления и повышенная высота, так что кто-то их всех надоумил сменить дизайн ). Наверное, Гугловская команда им больше всего рулит?

            Вообще, это должно быть плюсом для кликабельности вкадок — чем больше площадь, тем меньше время надо на прицеливание. Убрали скосы — лучшее прицеливание при очень большом числе вкладок.
            0

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

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