I use DuckDuckGo as my primary search engine and have had a positive experience using it.
This redesign incorporates two of the worst design trends today: very low contrast text and gratuitously, obnoxiously large fixed headers.
I dislike fixed headers on any non-phone/tablet UI because almost all laptop and desktop screens are widescreen. Fixed position elements on the sides of the screen make much more sense, although poor implementations are very unpleasant and can create a jarring parallax effect. Unfortunately, fixed elements on the sides are soooo MySpace and have fallen out fashion, and many sites waste most of the space on the sides. The header in the redesign in obscenely large and the new page shows me less results at a time.
I have young and healthy eyes with 20/20 vision. Even so, when I use my laptop for coding and reading text, I turn the brightness down because it is easier on my eyes and does not give me headaches. I believe that the best practice is to make text #000 on a white background or very light background (like news.yc does), and to let users adjust the brightness of their display if this is uncomfortable. There have been assertions by that lighter text with white is better (and unfortunately this is the latest and laziest design trend), but I have seen no formal evidence of this and believe that this is mostly a combination of overbright display screens and poor text rendering by OSes and browsers. If you turn the brightness of your screen down, you solve the "too much contrast" problem (if it ever truly existed) and can tell when any text isn't #000. For me, DuckDuckgo's current snippet display color is to light at #333, and ridiculous at #595959. If I set the brightness of my laptop to the maximum setting, the snippet text is more tolerable but still uncomfortable.
I dislike the neo-flat, iOS-like buttons, but they don't really make the site any harder to use. I find that neo-flat buttons are almost have an underlying hypocrisy. The idea behind the flat painting movement is that you can discern what was called "optical depth" without using traditional perspective to mimic the depth you see with stereoscopic vision. The neo-flat movement is based on the idea that you don't need to underline hyperlinks or add perspective based shadows and gradients to distinguish what a button is because you can just use colors alone or make everything a link. If this were really true, then you wouldn't need to make the neo-flat buttons change colors when you mouse over them, because it should be obvious that they are links. You can see similar hypocrisy in Google's A/B testing of non-centered labels in certain neo-flat buttons on their websites (especially YouTube).
Edit: I rewrote the first sentence of the third paragraph to make it more clear.
Thanks for the feedback! Our current version also has a fixed header, and that can be turned off in the settings, which we plan to make work in this next version as well.
Noted on contrast. We will look into it more -- that's exactly the kind of feedback we were hoping to get.
I'm in the camp that actually likes the new look. It conveys a modern minimalist view while the extras just get out of your way.
I've been mostly against flat design for a number of reasons but IMO, you've achieved a great design. I really like the minimalism of the hamburger button. Again, everything just gets out of your way.
Perhaps enlarging the font-size of the search result snippets might help with the contrast complaints - personally, I like your use of the grays. Again, it conveys a modern design.
I really hope that there will be an updated iOS app soon too :)
That's a terrible reason to pick a design. If you have no justification for a design other than 'lots of other new websites do this', then you have no justification at all... unless your purpose is to blend in and be forgotten.
Actually, my justification was that everything just gets out of your way.
Personally, I find the new design conveys a more relaxing experience although I'd like to see some of the fonts grow a bit. By modern, I refer to a different online world than #000 against #FFF and skeuo approaches. I'm not saying, those days are over completely, but fresher approaches are nice too.
Let's face it - design will continue to morph based upon different philosophies and whims, just as fashion does. Some visions are worse than others but some are implemented in pretty clever ways. I like the way DDG went with theirs.
For a modern web property or search engine competing against the likes of Google, what timdiggerm mentioned in a reply nails it. Sticking with an older design philosophy conveys a negative image for many users.
However, other properties going flat and subdued do not necessarily get my attention just because everyone else is doing it. This one does though because they did a lot of things right. The more I use next.duckduckgo.com the more I appreciate the small details that were thought out.
Levi-Strauss uses a deliberately retro design language as a core part of its marketing. All those rivets and obvious stitches serve little purpose other than to project an faux-naive olde timey image. I can't see any reason for DDG to follow a similar design approach, unless they want to go for the Steampunk user base.
This is not true. If you are a desk jockey then maybe you don't need rivets, but they (along with all stitching besides the back pocket stitch design) certainly help keep your denim together if you are the least bit hard on them. Ripping off pocket corners or blowing out crotch stitching is something that happens. And I'm pretty sure Levi's also offers denim with non contrast stitching.
Adding my brick to this pile... I like the new design better too. Especially the search results page. The lower contrast is one of the features I like actually, feels a bit less aggressive, but the font changes and the general decrease in aggressive red are particularly pleasing.
I also like the new design a lot, though I do agree to some extent about the contrast issue. On a retina monitor it's no worries, but on my external it could probably suffer greater contrast :)
+1 on the low contrast comment. It's all the rage nowadays, but this one of those trends that I think people will look back on in a few years and say, "How did anyone ever think that was a good idea?"
lower contrast is not bad, I don't want all text to be #000 and #fff, but the contrast on DuckDuckGo is too low.
As it says here your text should be as readable as #333 on #fff:
http://ia.net/blog/100e2r/
Most sensible people see that it's a bad idea, and they can see this today (if not yesterday). This isn't the kind of thing that requires hindsight to see that it's a bad idea through and through.
If anything should be questioned in hindsight, it should be why so many managers and executives allowed designers to seriously submit such bad ideas for consideration, never mind allowing such unusable designs to actually be implemented.
Funny that a page about Web usability features a design that's sufficiently counterintuitive (or just plain annoying to smoothly scroll through) that the designers felt the need to add site-specific navigation controls and "click here or press space to scroll down" help text to the page.
Presumably these are the same designers who feel a "push" sign next to a nonfunctional handle is a good design for the hardware on a door.
I use DDG for most searches. The new site looks better but that's not helpful if I can't read it. I'm not 22 with good eyesight. At a minimum, there has to be a button available to fix the contrast issue.
No. And I'm willing to bet that at least 99% of search engine users aren't going to look for an unlabeled settings button for a search engine. They'll just use something else.
For something as utilitarian as a search engine, being usable by default, and cool after tweaking is probably better than the reverse. I question the logic of having such a setting at all -- it's not just a matter of preference, having the setting is basically admitting that the default design has a (serious) usability issue -- so logically it shouldn't be the default.
It's kind of funny that we went from black on grey (netscape), via black on white (ie4) to grey on white (by design/via css) -- rather than simply back to black on grey or grey on black ("console" colors) -- as there's been some studies indicating that darker background leads to less power usage -- which actually has a usability benefit in longer battery life -- all the while maintaining a lower contrast.
I agree with the people saying the new look is quite good, but it does need a couple of changes.
Contrast has been mentioned, it's better on your "cards" (top toolbar that appears on some searches) than on the general results. Other than that, I'm not sure your choice of font is very good. It's not quite crisp enough to easily scan and read lots of text at once. I tried switching to Helvetica Neue instead of Proxima and things instantly looked more readable.
Overall a good step in the right direction though.
I didn't notice the fixed version in the old look, probably because it's not as tall.
In the new version, it's taller, and makes it so I can only see 4 results at a time on my 1366x768 netbook. Makes me want to reach for my "fixedfixer" bookmarklet (sets all position:fixed styles to static), which is not really something I want to do every time I use my search engine. Still, that's more convenient than having to change a setting every time I clear my cookies.
Otherwise, I do like the clean and airy/breathing space in the new look.
Just be mindful of vertical screen estate, it's one of the most precious things to squander, and from a usability point of view, the only thing you can really argue that might need to be there is just the search box.
Personally, what I think is a better solution for that, is one of the older Google layouts, which had a search box at the bottom of a result page as well as at the top. Then you could just scan the first page of results and when you got to the bottom you probably had some ideas as how to refine the query, and there it was, ready for the next search! :)
I actually don't mind the fixed header on the current version because it is much smaller and less obtrusive than the header on the redesign. I dislike fixed headers on news sites like the New York Times, because I want as much vertical space as possible to read the article. On a search engine, there is no issue of losing context, so a tastefully constructed fixed header is acceptable.
I understand why you wanted to add a second toolbar for more options and am not suggesting that you removed completely remove fixed headers for the default landing page. I just think that the second toolbar could easily fit on the same line as the search bar.
I share your dislike of fixed headers for text-heavy pages, and I'm relieved to see other kindred spirits have made similar comments in this discussion. (I was concerned it was just me.) The NY Times' new fixed headers in particular prompted me to try making a bookmarklet. One version converts position:fixed html elements to position:relative. A second version converts them to display:none. I've been using them for the last few months, and it has made me a much happier reader of the NY Times and similar sites. You're most welcome to try it too -- staticding.org .
I see @tripzilch has commented below that he uses a bookmarklet that changes position:fixed elements to position:static. That's probably a better solution than my version which changes them to position:relative. I will have to try that method too.
Wow after reading that comment I was expecting something so.... Bad. Instead, I saw something so.... Good. To me. I'm surprised to hear someone disliked it so much actually. C'est la vie.
FWIW...and no disrespect meant, but I hope DDG does not follow this advice. Firstly, this is a developer. So he/she is not the key demographic you are targeting. Developers and the like don't understand that John Doe has no idea what "contrast" is or which button turns it down/up. Please note all of the references to "me" and "my" and his perfect color-correct 20/20 vision in his feedback.
If it is hard to read for someone who is young and with perfect vision, how do you expect that someone with less than perfect vision / older / with worse monitors will be able to read it?
There are W3C standards for accessibility for a reason, and widely used sites should follow them.
Because the majority of readers on the internet skim pages and whether subconsciously or not, they are picking up on keywords, headlines, links and the like. If you take the approach to simply "make the text #000 and the page #fff", you are simply making matters worse.
If they can't read your site comfortably than why should they spend more time on your site than it takes to close the tab?
See my other comment, the recommendation is usually #333 on #fff, or at least try to follow the WCAG standards:
https://news.ycombinator.com/item?id=7704533
When I see a site with such low contrast I think "the owner of this site doesn't really care if people actually read the contents" so I usually just close it. Unless I know from a reliable source that the contents is actually something very very interesting, that I would want to read then I'll take the extra effort and try to read it.
You realize HN comment pages scale pretty well, right? And everyone's happy.
There's no reason a site like DDG shouldn't make better use of larger windows. If someone wants to read long lines across a full-screen window on a 30" display (and I don't), they should be able to. In my case, I'd just like sites to make reasonably good use of a 1280-wide window (half a 30"), which DDG doesn't. That's not unreasonable.
Anyway, here's another good example of a page that scales well:
Few things.
I like the redesign in a broad, sweeping sense but:
1) Themes don't work (at least, they don't look good. I know this is pre-release and will be fixed)
2) Fixed header is too large and should be smaller by default (as well as toggle-able in settings)
3) The color change and underline for links are jarring on mouse-over.
I think showing only tabs[0] with the fixed header would be better? I'm not sure which part of the header is used more often though. You guys must keep some stats on the usage patterns.
And one more suggestion about this: When I click on the up arrow, focusing on the search bar would be nice. But that may be just me.
Great work, yegg! I like the direction this is headed. Perhaps for the header, it can collapse/hide the row with "Meanings | Images | Videos | Products" under the search bar until you scroll back to the top to make it a bit less huge? Perhaps you could even shrink it a bit to the height of the bar when it collapses as well.
I also dislike that the search results do not really have anything differentiating their different sections as opposed to the current results where it's easy to see title, description, and url at a glance. (To be clear, I don't think change isn't possible or that things should stay exactly the same, just that some kind of differentiating factor would be extremely helpful.)
And I also use DDG as my primary search engine. Integrating it into Firefox and only using g! when my results are poor.
On the search page, click the hamburger icon on the top right.
There you can adjust the fonts (to some extent), colors, the position of the header (make it scrolling again), and many more things. All of this is impossible with old DDG, or Google, or Bing, or Yandex, etc.
I wish people that have time to write 3 long paragraphs of complaints actually have tried what they are complaining about. Or, if they have, made it clear that they complain about the defaults.
Except that the huge header covers the settings and only a few are available to me, and I can't see the tabs.
My ideal defaults: Header should be shorter. Contrast should be higher. The O-click box should be hidden and only its tabs should be visible. It should use as much horizontal space as possible (wonder if they plan to add something on the right side). A little bit less spacing between results would be great.
Even though they seem to be nice people, I don't trust them, and I don't believe that the url they are showing is the location where I will go if I click on the link (I don't trust the status bar either), so they should remove that last line from the result and add the icon and the domain (that's ok) to the main title.
I wouldn't be surprised if he hadn't even noticed the hamburger button. On a widescreen monitor the button is way too far from actual content. It really needs to be closer to the content of the page.
I'm having trouble parsing this part of your comment:
"I dislike fixed headers for any interface that isn't for a phone or tablet because almost all laptop and desktop screens are widescreen."
Are you saying that only fixed headers only work on mobile interfaces and they shouldn't be used on desktop? If so, I disagree with you. Fixed headers, if they are used at all, should only be used on desktop. There's simply not enough screen real estate on mobile. DDG actually does a nice job with this and doesn't use the fixed nav on mobile. Also, I don't see how desktop widescreen has anything to do with a fixed nav header.
If you are saying that fixed headers only belong on desktop/laptop, then I agree with you.
They're a crutch, an annoyance, steal real estate, make me dislike your site, and frequently (if I cannot remove them by some means) will encourage me to use an alternate site.
For content-heavy sites, these and similar annoyances send me straight to Readability via bookmarklet or plugin.
he's probably saying widescreens have less vertical room, so a fixed header then makes it even less. so a fixed header is more of a problem on them. thought experiment: if you had a 20" wide screen that was only 10" tall, you'd hate anything that took up your vertical space, wouldn't you?
A practical application for fixed headers is retaining access to search fields on pages with infinite scrolling (which is why they're doing it here). Otherwise, you might be ten pages deep and then have to scroll all the back up to search again. With this, search is accessible at all times.
The ‘search field’ is called an address bar combined with predefined search engines in my browser and accessible at all times using C-x f d without fiddling around with site-defined search entry fields. Oh, and it’s much smaller and takes up space anyhow…
It's entirely possible for someone to use multiple search engines that aren't already predefined. Step outside of your power-user mindset for a second and realize there are "normal" people in this world, unlike you and I, who don't know VIM keybindings or what predefined search engines are and just want to play around with a new search engine.
Disagree -- you're attacking the wrong cause of your issue. There are many aspects to text being readable than having extreme contrast with colors. As you even said, "white or light background." That already shows malleability. Font style (serif vs sans), line spacing, column width, header:content size ratios, etc matter. You're over simplifying the problem. Making the text #000 won't solve your problems and generally looks worse. When you buy a professional book they also aren't #000 on #fff -- that generally will look bad and amateur.
Design is an art and takes a lot of iteration of all those things I mentioned and more to obtain aesthetics and usability. Personally I find the new DDG hard to scan in part because I'm used to google, but also because there are different elements of the design I think to be poor choices:
1. The black text for header and content doesn't help anything pop. It needn't if everything else is setup correctly, but it isn't doing any favors. Instead the only color between listings is the favicon which makes it feel random.
2. The weighting of the header isn't sufficiently different from the body of the search, giving them less contrast relative to each other, and thus harder for my eyes to scan. If they had put the title in all upper case, chose a bold condense font, bigger font size, etc then there would be more contrast between the two.
3. The listings are variable length with not much white space between them, so that contributes to it being harder for my brain to chunk and reliably scan.
Those are just a few of the issues as I see it. A professional designer / typographer could help a lot more.
I agree with what you say in general, but the new DDG page looks pretty good to me, because all of that stuff seems to be done purposefully, to put the focus on the search bar, and not let your eyes stray to other places on the page too much, every single time you do a search. I think all the other stuff is supposed to fade into the background.
I concur: low-contrast sites make reading extremely uncomfortable and gratuitous mouseover color changes make for a bad experience. Please don't!
The fixed header feels like a massive waste of space for me too, especially if I zoom in to increase the uncomfortably small font.
It is interesting that browsers have had settings for years related to font sizes, like preventing fonts smaller than a designated minimum size, yet colors and contrasts are still completely up to the web site owner.
Your last argument, I find it irrelevant. Buttons and links etc. change colours not because of their inability to indicate their function, but to enhance the interactive experience. In most cases you get exactly the same effect with so-called "skeyomorphic" elements, no difference at all. The whole discussion has nothing to do with your "underlined links" argument.
The flat look has received a lot of criticism in the past couple years, but to be completely honest, in the many arguments I've heard against it, I couldn't really find one that can really stand it's ground if I may say so. On the contrary, I find a lot of merit in the new principles that are being embraced trough this approach, such as e.g. the emphasis on interaction to distinguish elements, instead of artificially imposed "symbolisms" (whether this is an underline, or a button-shaped, well, button :) ). This gives me a hint that, as a design community, we have a more mature approach to designing for those unearthly things we call "devices" than we did a few years back :)
With a well calibrated display and a pair of good eyes I went through all 65 levels of brightness (I usually use 40% or so) my laptop has available whilst looking at ¹. All parts of page were very readable at all levels other than no backlight and two levels above no backlight.
Not a designer but it's my opinion that low contrast text has it's benefits beside looking good.
Sure, low contrast is very bad for walls of text such as the ones on this very site (when you "Ask HN" or "Show HN" something, but DDG's implementation directs my eyes toward the page title. If you are going to have a lot of info show on any one place, you'd better direct the viewer's attention.
I would keep the different contrast levels, but would do it differently.
Right now my there are several levels. My eyes are directed to page title and the words I searched for. Page title doesn't really help that much for most pages (unless I'm looking for something quite unspecific) and I already know the keywords I looked for. Right now I go to the keyword in a three line summary and have to find where does it fit; I begin reading from the middle, it's more exhausting and potentially slower
Page title is less important than the text surrounding the term I looked for and the domain name of the site. Bold that, not the keyword I already know; direct my eyes toward info I want.
FavIcon being the only colored element besides Dax stands out too much; put it left of the result like this:
[title]
[summary]
[FavIcon] [summary]
[summary]
[url, mouseover complete url, link from this page]
On a next version:
I'd use my indexer to capture keywords for the result document. I would try to cluster the results based on that, so "man top" returns clusters of linux help and of clothing and the user selects what he meant, filtering out the noise.
I don't know how taxing that would be, but not every page has to be indexed this way. Even 10% of the index having these keywords would be statistically significant to build the clusters. The keywords from this index would be highlighted in the results. Search could be machine tailored in case the user decide to go deeper than the 10%, so as to return documents likely to belong to the cluster, but not processed into it.
True, but a good use of the flexibility computers allow for people adjusting settings allows for a great deal of happiness.
To the extent I still use Google (various products not just search) one thing is constantly happening is that setting options are removed. I find links showing me how to fix what Google has broken and then the settings I can use to do so have seemingly been completely removed by Google :-( This continuing practice has encouraged me to move more and more away from Google. DDG is my default, though still use Google search a fair amount when DDG doesn't give great results or I want to filter by date.
As you scroll down you see about 50px less vertically devoted to results, a tradeoff easily outweighed by the top suggestion toggle drawer thingy awesomeness.
I agree with most of what you said, but I personally prefer lighter text on a white background to black on white. It looks cleaner when the text is lighter.
This redesign incorporates two of the worst design trends today: very low contrast text and gratuitously, obnoxiously large fixed headers.
I dislike fixed headers on any non-phone/tablet UI because almost all laptop and desktop screens are widescreen. Fixed position elements on the sides of the screen make much more sense, although poor implementations are very unpleasant and can create a jarring parallax effect. Unfortunately, fixed elements on the sides are soooo MySpace and have fallen out fashion, and many sites waste most of the space on the sides. The header in the redesign in obscenely large and the new page shows me less results at a time.
I have young and healthy eyes with 20/20 vision. Even so, when I use my laptop for coding and reading text, I turn the brightness down because it is easier on my eyes and does not give me headaches. I believe that the best practice is to make text #000 on a white background or very light background (like news.yc does), and to let users adjust the brightness of their display if this is uncomfortable. There have been assertions by that lighter text with white is better (and unfortunately this is the latest and laziest design trend), but I have seen no formal evidence of this and believe that this is mostly a combination of overbright display screens and poor text rendering by OSes and browsers. If you turn the brightness of your screen down, you solve the "too much contrast" problem (if it ever truly existed) and can tell when any text isn't #000. For me, DuckDuckgo's current snippet display color is to light at #333, and ridiculous at #595959. If I set the brightness of my laptop to the maximum setting, the snippet text is more tolerable but still uncomfortable.
I dislike the neo-flat, iOS-like buttons, but they don't really make the site any harder to use. I find that neo-flat buttons are almost have an underlying hypocrisy. The idea behind the flat painting movement is that you can discern what was called "optical depth" without using traditional perspective to mimic the depth you see with stereoscopic vision. The neo-flat movement is based on the idea that you don't need to underline hyperlinks or add perspective based shadows and gradients to distinguish what a button is because you can just use colors alone or make everything a link. If this were really true, then you wouldn't need to make the neo-flat buttons change colors when you mouse over them, because it should be obvious that they are links. You can see similar hypocrisy in Google's A/B testing of non-centered labels in certain neo-flat buttons on their websites (especially YouTube).
Edit: I rewrote the first sentence of the third paragraph to make it more clear.