We finish the nailed Google search box
Over the decade of development, Google has long since ceased to lay out search pages with a primitive layout, and there was a lack of time and money for the search page design. Recently (in fact, in different parts of the world, he has been experimenting for 2 months), he laid out a new search results design, which are still being finalized - an oval input field appeared (in the search for pictures, still rectangular), nailed to the top (when scrolling through the page) search. The remaining functions, basically, remain the same, for which the user script ( Google browser extension) Google Search Extra Buttons was made for a long time . In connection with the changes in the page layout, improvements were made, and at the same time they touched upon new user interface elements, which we are discussing now, showing working modifications.Everything, in general, is good for Google, and the modifications made do not speak about any strong flaws, but small things add a bit of convenience, which makes up the general UI (user interface). We list what will be discussed. At the beginning - the duty, already existing functions of the script, and below - what recently appeared new with the design of Google.
- Additional buttons - they form the basis of the user script for which it is installed. So that they were just a click away, some functions (search by dates, by file types and sites) are rendered closer to the user, to the free space of the page. It already exists several years, so it was already discussed, including in a couple of articles on Habré;
- storage settings additional buttons;
- a falling list of file extensions (about 30), in the general search and search by pictures;
- tooltips closing when the search results appear - how the partial closure was resolved;
- the search box was nailed - it was at Yandex about 7 years ago; there is a script that “fought” with it, and now it solves similar problems in the style of aikido and google user scripts;
- The required Google wide page (wants 1100) is somewhat trimmed (up to 800px with a header is relatively convenient).
Additional buttons
They have not changed in recent days, but there was a refinement about a year ago, which improves transitions (CSS transitions) for the disappearance of date columns by mouse assignment. Initially, the program made the columns disappear in the script, on JS, so that if the mouse was accidentally moved away, they did not disappear instantly and in a split second could be corrected if the column was still needed. This is a common technique that is used in the menu with the same goals. Now it can be completely done on CSS, and earlier more complete browser support was required. Now the software disappearance is saved, but slightly smoothed by the presence of CSS transitions. Not everyone likes the presence of transitions and smooth fading of transparency in general, but this is a matter of settings and improvements of the script. It provides for storing settings in localStorage, but there are no “themes”.
Storage settings
With the storage of localStorage, Google, Yandex and Facebook are not simple for a long time - they periodically clean their memory (the browser of each user's local computer). Therefore, in order to store the domains of sites in which the user often searches, the number of days and weeks for which he conducts groups of searches, it was necessary to make a difficult decision (something like this was described on Habré, as far as I remember, for Facebook) - to store settings on another domain . But now you can extend the script, for example, while retaining the very same “themes” that could be written long ago. The number of days, weeks, or years that the user chose during the last search appears and is stored in the drop-down list header. (Another little bit of convenience.)
File Extension List
To conveniently display 23 file types and 7 types of pictures, file types are divided into 3 columns, but the last 2 appear when you click the “More ...” button. Also, in the search for pictures in the additional buttons, the checkbox "Show image sizes" (or not show) is duplicated.
For files, it remains an open question how it is more convenient, and whether it is necessary to set a search for several types of files. You can write a request for it manually in the search field (filetype: pdf OR filetype: doc), but you can also somehow in the button interface. Yandex has a similar opportunity.
Search Tips and Transparency
We turn to the most interesting - the plot of the designers Google. However, in Yandex, the sheet of prompts covering the half of the screen is not solved, and also had to be corrected. In Google, we will do more thoroughly, because it highlights the different endings of words and phrases, so that it is more convenient to navigate. Let us make sure that this entire banquet still does not interfere much with the search - the main occupation of the search engine.
In Yandex, transparency was made simple - barely noticeable (with the Yandex No Float Field script ), so that the headings and the column shape under the hint were guessed. It almost does not interfere with looking not always desired hints and does not completely kill the visibility of search results.
In Google, a new script made more radical - more transparency. Through the solid white fields you can even read. But to make the clues visible, use the bold text tags from the clues to create dense colored underlays for these important parts.
Split search field
(Or the string-stuck - © 2011 ya - struggled here: userstyles.org/styles/51117/yandex-ru-no-float-field . A couple of years later it was canceled, then after 2-3 years they entered it again and now it is in the interface Yandex is available.)
That Google stepped on this curve track. Obviously, this decision is fundamentally flawed if you don’t have a monitor more than 1600 pixels high. The search field with its borders and baubles hides part of the height of the window, which is necessary to display the search results - the main one, for which you came to the site. If on a normal page scrolling removes the field from the window, then with a “good service” nailing it at the top, this simple possibility is also lost. And if, like Yandex now, there are more links, the amount of gratitude increases proportionally. (However, the moneylenders also take 3%, 7% of the commission, so the majority is accustomed, but does it make sense? Why, if not even three are needed?) However, they both probably invested in high-resolution monitor manufacturers on time, so and google now profit will start to drip). But not yet bought a new monitor,
Google eats up a little in its nailed field - only 72px (72/1080 = 6.7% commission for monitor manufacturers), Yandex - 94 (8.7%). Although both could show the window if necessary - by hovering the mouse over the top of the screen.
Let us fulfill the dreams of beggars who don’t want to spend money on (unnecessary) iron - all the more so as Google automatically managed to show our additional buttons in its nailed field. If the field is taken away under the top of the window, the buttons “hang”, and hovering the mouse over them allows you to open the input field.
The commission percentage was the height of the buttons - 22/1080 = 2%, and even then we divide by 3, because width occupy a third of the screen. (There was a grumble of indignation among the capitalist monitors.) Directing something
in the middle of the page — we see not only the falling buttons, but also an accessible input field.
Google wide page
They still produce not too widescreen monitors, so the styles have set the page width limit to 1100 pixels - quite modest yet. (Why do they need these people with 1100 pixels?) But when we look at the search results not in the whole window, it may be necessary less. And the search field is inconvenient to look at a smaller width.
Make a revision so that from 800 pixels you can use all the functions in the title without twisting the page horizontally.
The bottom scrolling horizontally remains, but this is already Google's corporate style, which strongly depends on the content of the page. Let's leave this job to him, and we, when (and if) we make our search engine, work in it and on horizontal scrolling.
The plans for userscript for Google are to add a few buttons (sizes, styles, colors) for the image search window, to make a multi-selection of files, 1-2 checkboxes for styles and leave it in this form for the following improvements when needed.
UPD: an interesting feature in Google for the Russian language.
As you know, the Google calculator is mixed into the search results if it sees a mathematical expression. In particular, 2 ^ 4 is 2 ** 4, equal to 16. But Google also understands '2v4' as an operation of exponentiation.