clean up URL suggestions

[Danielle Foré]

Midori's current URL suggestion dropdown uses up a lot of vertical space and isn't very nice to look at.

I'm proposing (in the attached mockup) a small redesign that uses less vertical space, separates sources of suggestions, etc for a cleaner look and feel.

[Avi Romanoff (aroman)]

Absolutely agree, and that mockup looks fantastic. This is an area that other browsers have been working on lately, and midori would be right up there with the best of them with Dan's proposed overhaul or similar.

[Cris Dywan (kalikiana)]

That kind of layout already existed when the current completion was implemented in Midori, I'm not easily impressed here to be honest. It's something I use every day so I can't say "looks nice" and go for looks.

- There are no page icons.
- Why would you specifically search in the speed dial?
- Bookmarks are missing.
- Rendering search the same way as other sites feels like a step back.

I don't see the point in differentiating between Speed Dial, Bookmarks or History. And search engines currently have a distinct style and appear at the bottom so it's not possible to confuse them.
Including speed dial shortcuts in completion is a good suggestion in any case.

Rendering title and URL in one line would work for fairly wide screens but not for smaller screens. The main reason for the current layout is that not everyone has a large screen. Maybe doing this depending on the size of the location entry/ screen is a good idea?

[Danielle Foré (danrabbit)]

Sure, I think it's something that everyone uses every day :p

- It would take a while to draw favicons for each one of the links so I just left a space for them XD
- Same reason I would specifically search in any other category. I know what I want is in that category. Sometimes I'd rather type than click back to speed dial.
- I don't use bookmarks, but that doesn't mean I purposefully excluded them. It's just a mockup not meant to be taken too literally ;)
- I always felt like the current rendering of search was a visual glitch and it seems really repetitive to say "Search With" on every single line. I can see the point of having them visually distinguished to make them stand out, but I'm not sure if it's really helpful more than just weird looking.

Say you're looking for a site you browsed to the other day, but it wasn't one you normally go to. Obviously it's not in your bookmarks or speed dial, so you can elimate those categories right away and look in your history. Having the history category ordered by date (as opposed to possibly ordering the other categories by visit count) would make it much easier to locate that website.

well, I purposefully showed a rather small window here. On my screen (a still modest 13" notebook) the suggestions usually only cover about 1/3rd of the available horizontal space. And scanning is made more difficult because every other line is a duplicate of the line before it. Having them side-by-side, I can choose either to scan URL's or Page titles and I can see more results without having to scroll. So, at least in my experiences, this sort of layout would be more space efficient for smaller screens by presenting more results in the same amount of space.

[Danielle Foré (danrabbit)]

Slightly updated mock. Shows a couple of favicons. Still too lazy to draw the ones for search, but I think that'd be really nice to have. Changed the string to "Search with" to fully replace the previously duplicated text.

[Cris Dywan (kalikiana)]

By not describing relevant changes in words you pretty much require me to take it literally, how could I tell what changes are intentional? ;-)

When I say small I mean low resolution, presumably your notebook has 1280px or more? I would go by available pixels, not by physical size of course, if the layout depends on size.

When you say "is in that category" do you perhaps really mean "Most Recent" versus "Most Frequently Visited"? That would make a lot of sense for me, despite my ignorance for where the suggestion is from.

I don't feel strongly about the exact looks of Search indeed, my primary concern is that they should be trivial to tell apart. I do like 'Search With' as a caption because it feels more natural than just 'Search'.

[Danielle Foré (danrabbit)]

Sorry, I guess I should be more explicit.

The mockup I've provided shows a window about 700px wide and uses real URLs from my results. So this should work fine on 800x600 and maybe (maybe being important here) even 640x480.

One thing I've done to help this horizontal space bit is to exlcude "http://www." since this is just repetitive information and doesn't help you narrow down results. If the URL is really really wide I would suggest elipses in the middle since the important information is going to be at the beginning and the end of the URL (site name, page name).

I had to think about that for a second and no that's not what I mean. I'm thinking in terms of finding things as if they were stored in a phyiscal place. That is, if I know that I never bring my keys into the kitchen, I don't have to look in the kitchen for my keys. Having things into "Most Recent" and "Most Visited" leaves the possibility for ambiguity about where an item is stored. for example: a bookmark item can still be one of my most recent items. In the example I gave in the above comment, having these categories doesn't really help me narrow down my search results. It also begs the question: if a result is both recent and frequently visited, which category do you show it in? and should it be shown in both? The logic is a little more complicated in doing it that way.

[Cris Dywan (kalikiana)]

The example URLs in the mockup are particularly short. In addition to ellipsis we might want to go a step further and show the part of the URL that contains the typed word(s). No idea "how" but that could alleviate the reduced space available. And indeed omitting redundant bits sounds like a nice idea.

The question of handling results appearing in multiple categories is orthogonal to which categories we want. A bookmark can also be in History and Speed Dial at the same time. Will you still want to see it thrice?

I do notably rely on History to provide automated bookmarks of sorts, that means always sorting that by time is not going to work. For me a bookmark is a way to ensure it stays around even if I visit it rarely, as opposed to history which disappears with time, that's why I don't care where it comes from at all.

[Cris Dywan (kalikiana)]

I implemented the proposal to strip schemes and www. now.

[Cris Dywan (kalikiana)]

Something to consider, smart ellipsis for one-line suggestions in Opera http://my.opera.com/desktopteam/blog/2012/03/03/address-bar-polishing

[Cris Dywan (kalikiana)]

I'm committing a side by side style, which is only used in Granite builds (midori-granite) - it's not using Granite but I'd like a way to compare both easily before making a long-term decision. Any new bugs with this should for now be filed with the 'granite' tag.