Over the past couple of months, I've been working with Kevin Rose on his enormously successful new venture Digg.com — a news aggregation website with a twist. Digg is sort of social bookmarking mixed with peer reviewing, so someone submits a link to a technology story they thought was cool and, if enough other people at Digg think it's cool too it gets displayed on the homepage. In essence it's a pretty simple idea and it's been very popular and is growing rapidly.
Kevin brought us in to work on the visual interface side of things. As we're frequently doing on design projects, we've been working on design concepts and then handing over CSS, HTML, and images to a programmer to implement. Silverorange still does tons of programming and database work, but we also do a bunch of purely design stuff on the side. On Digg, I've been working with Owen Byrne, a talented programmer who coincidentally hails from Nova Scotia.
- Step 1: Gather the Pieces
- Although most people who left comments about the Digg redesign in the feedback forum missed or downplayed it, the biggest part of the redesign was to analyze the content on the site and reconsider how things should be fundamentally layed out. Although of course the visual appearance of the site was important, stepping back to the basics and making sure the foundation was laid was key here. This meant reorganizing the navigation more logically and restructuring the content on the page.
- Step 2: Divide and Conquer
- The very first thing we did was to single out one of the most important parts of the page, a front page news story, and deconstruct it. Rather than trying to tackle a dozen things right out of the gate, we chose one small self-contained section and gave it a lot of attention. What's unique about the site? Digging for stories. So, make those more prominent and show people items they can take action on to get them into the site as participants. Differentiate the titles and try to give some indication that you'll be taken elsewhere when you select a title link. Etcetera... Although contained in a single element, all of these ideas percolated throughout the rest of the redesign.
- Step 3: Lay Down Some Style
- This is the one part of any redesign that everyone has an immediate opinion on. We tried to come up with a friendlier looking interface that was welcoming to first-time visitors but balanced the needs of regular readers who are vital to keeping the system breathing with new content. Some of the inspiration for this design came from photoblog templates, which I think do a good job of keeping the template out of the way of the content. The tight-to-the-top compact header is especially indicative of this.
- The one thing you can always count on with a redesign of this nature is that not everyone is going to love it right away. Some people thought it didn't look enough like Slashdot, some people thought it looked too much like Slashdot, and so on and so on. Don't get me wrong, most of the feedback was helpful and well-considered, but some of the feedback wasn't exactly constrcutive. Some really great comments included:
I have to admit, I have never seen so much Truly hate full [sic] comments towards a design before, its as if people would have the guy who designed it hung in the town square for even thinking of it...
Allow me to paraphrase about 50% of the comments so far: "I'm a changeaphobic techy who wishes pictures and computers had never met. I experience the world one text line at a time, and I'll be damned if anyone tries to appeal to anyone besides me by including graphical elements that might not be 100% necessary. Everything is too big and flashy-- I like things minimal and bland, like my wardrobe." OK, a bit harsh, but there do seem to be a lot of whiners here. There are also many comments that thankfully point out valid, objective bugs.
If Firefox and Flickr had an offspring, they would have Digg 2.0" (this one is actually kind of accurate once I stepped back and looked at the design again)
- Seriously, thanks for the feedback from everyone. Some comments have already resulted in changes to the site and there are more changes on the way.
- Step 4, Step 5, Step 6... Revise and Rework
- This site is really flexible and is changing all of the time. One quick lesson I learned was not to paint yourself into a corner with code or design. We're already working on revisions and the interface concepts for new features that are in the pipes.
Comments
Rob Stevens - July 29, 2005 2:58 PM
I'd never used Digg before 2.0, and I think it's fabulous. Ignore the nay-sayers ... it looks great and with all of the new attention it's getting, that's important.
Matthew Gotth-Olsen - July 29, 2005 11:36 PM
I've always been a fan of the work that you've done. I think it's a great, user friendly design.
Bryan Campbell - July 29, 2005 11:37 PM
Digg 2.0 has one of the best web designs I've ever seen. Please don't change a thing! You will always have those extreme critics.
Joel - July 29, 2005 11:41 PM
Daniel - Hope you don't mind but I added this post to Digg.
mikeroq - July 30, 2005 12:34 AM
IMO, i hate digg 2.0, i hate the layout only, its to graphical and it actully makes me use digg less now, all i do know is look at the hompage for stories, i dont bother clicking categorys or submitting stories anymore, it takes way to long and its harder to do, like i cant click help promote stories to homapge by digging in mods, i have to click digg for stories, then mods. i am also devloping a css to make it look more and more like digg 1 series
Mike.Ohara - July 30, 2005 12:46 AM
I like the new Digg design myself, I was actually one of the comments you quoted, and it was truly something to see the input from all of the users during the test phase, both good and bad. I found it disappointing that there was so much seemingly negative feedback towards the design, but... I think in the end it was enough to capture the essence of Digg. its no Surprise that there are users that still feel disenfranchised by the move to a more 'rich' design, but to attract more attention, you need to make it more appealing to the average user who graces your doorstep. The minimalist design of before - although great, was not "friendly" enough to attract more diverse users.
I like it and I like your other work Daniel, Keep up the good work!
Mike
rob - July 30, 2005 12:48 AM
personally like the digg re-design. i think having a more graphical approach will attract more users (and isn't that the point of any web site? if you wanted a club, just start one in your basement). i also believe, and this is of course only imho, that if ones spelling and grammer are lacking in sophistication (read: bad), then one should really be more appreciative of a layout with a focus on graphics ;). sorry, know i'm probably only supposed to "dig" on digg. okay, i'm done. like i said, love the new look!
shoepal - July 30, 2005 12:53 AM
The design is very 37signals (backpack, basecamp, tada), Flickr, and Firewheel and very indicative of a new style that is emerging and one that should be welcomed with open arms. Well done!
Jeff - July 30, 2005 1:11 AM
I used Digg 1.0 and I think Digg 2.0 is awesome. It is one of my favorite sites. I don't understrand where all the complaints are comeing from. But what do I know. I just dumped Firefox and upgraded my Opera from version 6 to 8. Clearly I must be a moron.
Manuel - July 30, 2005 1:38 AM
I actually like digg 2.0 over the orignal version -- Digg 2.0 is actually better, because with the graphics and layout its easy to see what stories are more popular and its just overall great!
However the only problem I have with Digg.com, which was part of the original version, is the fact that the links open in the same window open. My suggestion is to simply make the pages open in a new window -- simple fix -- simply add a target="_blank" in the code for all links.
At least Firefox has tabbed browsing, which helps, but those who use IE, don't have this ability.
Overall good job on the design!
That's just my 2 cents worth.
Manuel
Rob Morgan - July 30, 2005 1:55 AM
I love Digg and I truly love this functional redesign.
Joe - July 30, 2005 2:18 AM
I used digg a lot more now with the new design. It's more functional. For people that hate it or don't use it as much anymore, it's their loss. By the way, Rose said on Diggnation I believe that there will be an option in the prefs soon for a 1.0-like skin.
Joe - July 30, 2005 2:26 AM
Manuel said:
However the only problem I have with Digg.com, which was part of the original version, is the fact that the links open in the same window open. My suggestion is to simply make the pages open in a new window -- simple fix -- simply add a target="_blank" in the code for all links.
--------------
There is a pulldown in your personal profile that lets you choose if you want links to open in the same window or a new window. This works for stories. I have noticed that links posted within comments open in the same window. It would be nice if that option worked for those links too.
godmode - July 30, 2005 3:40 AM
I use Digg every single day now. Unfortunately the new version slows down my Firefox client significantly as it loads all the "diggers" (sometimes in the thousands) for each comments page i go to. I wish there was a way to turn off that feature.
So i'm forced to use Internet Explorer, which is not a pleasant experience.
Evil Jamez - July 30, 2005 4:05 AM
I dont mind the new digg design, However I would like to suggest one change, which should also save the site alot of bandwidth.
I would like to see the removal of the "Who dugg this?" section from the main comments Page.
On heavily dugg stories I have seen many computers (especially computers with low memory, or while running Live Linux CD's) hang for over a minute, while hundreds of tiny .gifs, and profile links, populate the lower half of the page.
Instead I would propose moving the "Who dugg this?" section to that little yellow box next to the headline that says "X diggs". for those readers who really need to see who dugg a story.
yoyo - July 30, 2005 4:06 AM
When I first went to digg, it was still using the "1.0 design". The only thing I did was register. I think the new design has help me discover what digg is all about. Not only is it more stimulating--eye candy wise--but, I think, its easy to navagate.
I'm only 15 at the time of writing this, and I hope one day I can make a design like that. Kudos to the designer.
Rob - July 30, 2005 4:15 AM
I have to admit. I do enjoy digg 1.0. It was clean, quick, and easy to navigate. Digg 2.0 has grown on me. Alot of the new functionality is great, still slick, and quick, but I have to agree with godmode, loading the image of a digger on the comments pages is completely unnecessary. Today I clicked one that had 600 diggs, and it slowed my computer/firefox significantly. And I own a gaming rig (this shouldn't happen). That would be my only correction to the site.
Josh Davey - July 30, 2005 4:19 AM
I love the re-design. I think you could've gone really over board with the graphics and I'm glad you didn't.
Otto - July 30, 2005 5:11 AM
I use digg a LOT less now than before. The site has major issues steming from your redesign, and in order to be "constructive", I'll be specific.
1. User images. Let me turn them off, please. What do I do most often on digg? Click through to the comments to read them. If 400 people have dugg a story, that's 400 images that have to load. Yes, they're tiny, but they still take time to pull from the site and they still take time to render. The new design renders way faster in IE than it does in firefox, which is kinda sad for a tech news site. Eventually I just put the userimages directory in adblock to prevent them from loading.
2. The pretty boxes around the comments are nice, but ultimately not useful. Furthermore, they create a big problem in that they limit the comments to taking up only part of my screen. I have a whole width of screen here, please let me use it.
3. Putting the users to dugg an article at the bottom of the page is quite annoying. For one, I used to hit the END button when I wanted to get to the box that lets me post a comment. Now, most stories have half the bage filled with who dugg a story, and the comment box is somewhere in the middle of the page. Not particularly easy to find, no? Matter of fact, I don't much care who dugg a story, let me turn that off too.
4. Whenever you design CSS elements, for the love of all that is holy, do not use absolute font sizing or absolute pixel positioning. Some of us use bigger or smaller fonts on our systems, and nothing is more annoying than having the text overlay or underlay the advertising or other page elements just because you couldn't write CSS that changes depending on font size being used.
5. Load time, load time, load time. Adding more separate elements adds to server load which decreases load time. Yes, you can always throw more server boxen at the thing, but it's a good idea to not have it load 50 different things every time you look at a new page. Browser caching only goes so far. Reduce the number of separate elements on the page. Use server side includes to include the CSS in the page itself instead of having them all separated and having the browser request them all. Reduce the number of images. Etc.
In short, you seem to be making the same mistakes that every other rookie web developer makes. You want to make it look good. And it does look pretty good (although I hate that color scheme as well), but it's ultimately not usable because the look takes way too much precedence over the content. Digg is a site with its main focus on the content. Just shift your focus a little. The question you should be asking is "how can I make it easier for people to access the content that they came here to see?" instead of "how can I make all this ugly content look good?", if you catch my drift.
Good first try, but you really need to take another whack at it. :)
Otto - July 30, 2005 5:17 AM
Heh. In number 5, that should be "which *inccreases* load time". The thing is just slow. Reduce the number of elements and speed up load/render time, that's what I was trying to get at. :)
paiway - July 30, 2005 7:43 AM
Come on dude, remove the user list from the diggs. It's pointless and eats render time like popcorn.
Tom - July 30, 2005 10:33 AM
Yeah, Otto summed it up pretty well. I like the new visual look and feel but we've lost a lot of functionality in the process. Having the post box halfway down the screen is about the most stupid useability decision I've seen in a long time.
Thanks for the Adblock userimages tip, too; I've just done it and the longer comment pages now take about 1/10th of the time to render! For everyone else: right-click on a user image, select "Addblock image" and delete everything apart from the "http://www.digg.com/userimages/" part of the URL.
Natali - July 30, 2005 11:49 AM
I've been using Digg.com for a good 173 days (so says my profile), and I remember it back in it's first incarnations. Design-wise, I really love Digg 2.0, but I have to agree with Otto about the bulk that is on the pages. I love the colour scheme and the way it's laid out overall, but there is a lot of excess on each page - mostly related to the social side of things: userpics, lists of names etc. If that could be paired down, or at least optionally switched off, then it would be a perfect redesign. But 2.0 is definitely an upgrade, definitely an improvement. God knows, look at Slashdot. There are worse designs out there.
Otto - July 30, 2005 2:08 PM
Another thing that is related to the redesign, in a bit of a different way...
Consider tabbed browsing. You use firefox, right?
When I used to look through digg, I'd run the stories, middle clicking on the interesting ones to bring them up in a new tab, then read them one by one. I can't do that anymore. Why? Because the system now slows to a crawl when I get more than about 4 tabs open, all trying like hell to render this huge giant page with thousands of different images on each one. CPU shoots to 100%, memory usage jumps up to a hundred meg or so, and the thing just doesn't work.
Digg is full of small stories, usually with links to elsewhere in them. If I happen to want to read the comments on those stories (I do), I have to do it one at a time now. That's the biggest beef here, it's impossible to rapidly cruise through the comments. Comments are what make the site interesting. Without those, it's just a collection of links that people are voting on. Okay, cool, but big deal. The big thing on the web is interaction with other users. Web forums get tons of traffic. If you like your web as a passive medium, that's cool and all, but most people don't deal with it that way.
Make it easy for people to get to what the want. If you really want to add something, forget the pretty CSS, and make the comments sections threaded so people can have conversations and such without it being all flat and hard to follow.
John Hager - July 30, 2005 2:51 PM
Overall site design is nice, but I do have one interface problem. I use the search function a lot to look up past articles for research. Having to scroll down the page, click the link to search, and then type in it bothers me. I like it when there is a search bar near the top so I can just goto the site, click in the text field, and hit enter to search. Would putting the search in a more prodominate place hurt by increasing bandwidth and processing power on the web servers? http://www.webdesignpractices.com/functions/search.html
The colors help my eyes follow the content, but still maintain that clean simple look. The gradients and 3d affects give digg.com a modern sleekish look simialar to Mac OS X that I like. The curved corners the make the page look pleasing to the eye, and carrying that theme of that helps hold the pages together. Having the login, register, and about digg at the top gives people a place to learn, and participate very easily. Everything is straight forward and easy to use. Kudos to the design.
anon - July 30, 2005 7:59 PM
Get rid of the stupid "who digged this" (that often takes 50% of the page) and the "who blogged this" that needlessly eats up the right hand column. Make the comments span the whole width of the page, and get rid of the incredibly bandwidth-sucking avatar thingies. When you make those changes I will call digg usable, but until then it's just awful. I don't have the fastest computer in the world, and using digg 2.0 in firefox is simply a joke for me because of all the useless crap on the page. The retarded spellchecker causes firefox to reach 100% CPU and stop accepting keystrokes. I can apparently type faster than it can check, which is ridiculous. Turn off all this crap! I want digg 1.0 back.
panda - July 30, 2005 8:02 PM
At first I wasn't sure that I liked the new design as much as the ultra clean old one, but now that I've gotten used to it I like it a whole lot better. In fact digg is probably the only news site Ibother going to rather than just look at the rss feeds, and that is probably because I just like the design. I do however agree with the previous post that the search function seems out of place, it seems like it would flow better if it were nearer to the top, where you didn't need to scroll down.
The design's beautiful keep up the good work!
Richard - July 31, 2005 1:12 AM
Digg 2.0 is great. I like using the site, however, my complaint is similar to the ones mentioned above. Something needs to be done to the load times of the individual posts. The "Who Dugg This?" option needs to be removed or changed. The page load times are getting out of hand.
I would also like to see a user setting that allowed us to turn off icons for the users' comments. It should save on load times too.
Anyway, with that said, my overall impression is a positive one. Keep up the great work. I look forward to future improvements.
Jake Tracey - July 31, 2005 2:09 AM
I love Digg's design except for the one thing that other people have mentioned. The "Who Dugg This?" really has to go :(
Other than that, excellent work.
Anon - July 31, 2005 3:15 AM
Yeah, and don't forget that the "who dugg this" area will not scale in the long run as the site gets more popular. Whereas a couple months ago, the main page stories were dugg 40-50 times, now most of them are 150+ diggs, which just means more and more names on the comments page. What happens when the site gets really popular and the main page stories are dugg 1000 times? 90% of the comments page will be nothing but a list of usernames.
That just has to go.
JR - July 31, 2005 5:38 AM
The only thing hate about digg 2.0 is I when I scroll click links Firefox hesitate, then I have to click somewhere blank in the page to resume scrolling, wasn't a problem in the original digg.
Daniel Burka - July 31, 2005 10:06 PM
Thanks for all the further feedback everyone. All of the comments about the slowness of the "Who Dugg This?" section are coming through loud and clear and it's something we're addressing right away. Pretty soon it will be quicker to load those pages and scalability issue will be addressed. Thanks again.
Pete Freitag - August 1, 2005 9:45 AM
I love the design of digg, I am new enough to it that I haven't seen the old one however.
One thing I had a problem with was finding the search box. Sometimes I want to come back and find a story that was on there, and the first time I looked for the search it took me a while.
Shane Ryan - August 2, 2005 7:29 AM
Personally, I had only been using Digg for a week or so before the 2.0 design went live. I enjoyed digg from the moment it loaded on my screen and thought the little 'flash' effect when a story was dugg (sp?) was pretty cool...
So, on to Digg 2.0. I like the interface, it's a lot clearer to understand what's going on with a story (ie how many times it's been dugg etc) and the colours aren't offensive (well, not too offensive anyway). One thing I don't understand though, is that stories (for me at least) don't appear in order of the number of digg's they've recieved. That's not anything that really bothers me though. The site retains enough coherence to be interesting and informative with the redesign.
The click, then scroll thing in firefox is one of the only faults I'd be tempted to call the designers on, otherwise though, nice job. Roll on digg 3.0.
Bergen - August 23, 2005 10:44 AM
One of the main things that has bothered me (and over all I really do love the site design on this site) has been that some of the other sites functions are harder to use or get to at all. Like Kevin and Alex talked about on Diggnation 8, finding the area where you add a friend is really difficult to get to without looking for a little bit, and then I'm not a huge fan of having to type in their name at all. I think just adding another link or buttom by side user names in comments or on the information where they submitted the story would totally fix this.
Also I'm not totally happy with the order and format of how stories are given priorities over what is shown on the main page (I think the 50 diggs in two minutes, as opposed to other stories that get 1000 diggs over 5 days is weak) but I can't really think of another way to do it, it's a pretty daunting task to try to handle all of this, but in general I think you guys did really well.
Jamie Likely - August 25, 2005 2:06 PM
Great site Dan!
I was looking at it on a Mac using IE and your rollovers on http://www.digg.com/topusers do not work. The box is filling most of the screen with no text.
Jamie