It shows several stories at once, not just the google brainteasers stories.
2. In general, people would rather read the real article instead of a summary of the article. When someone submits a summary of an article to a site like HN or reddit, it is usually flagged as blog-spam because we'd rather read/support the original content than a summary with questionable value.
3. For long form articles, nothing beats reading the print-preview page to get rid of all the sidebars, comments, ads. Look at the print preview page: it is not possible to get less distraction free than that. Any other format has more distractions.
Even aside from that, the New York Times has some of the best information architecture in the business. These are the guys who did NYTProf. Their web team is awesome.
4.2: I see a vertical scroll bar in the middle of my screen on Firefox.
4.3 The black header bar which is fixed and stays on the screen all the time even though it conveys no useful information to me.
4.4: A bunch of text blurbs on the left side of the screen that convey no useful information to me.
You say you're trying to be as distraction free as possible, but that's not actually true because it isn't possible to have your business model and be as distraction free as possible. The print preview page is as distraction free as possible.
1. ... It shows several stories at once, not just the google brainteasers stories.
It shows one article initially. It will load the next one as you scroll down and approach the end. This is not counted as a Page View unless you actually continue down into it - you'll notice the URL change at that point)
2. In general, people would rather read the real article
instead of a summary of the article.
I would argue that this is a "real article". The NYT piece were 8 questions and answers. This article is based on just one of those questions - and expands on it. I'm not an editor/write so I'll avoid going deeper but thats my take-away.
3. For long form articles, nothing beats reading the print-preview page...
Tru dat.
Even aside from that, the New York Times has some of the best
information architecture in the business. These are the guys
who did NYTProf. Their web team is awesome.
I used to work there :)
4. Some visual issues I had with quartz:
4.1: No left/right whitespace around images.
The Featured Image (between Headlines and Text) is meant to be full-width to a max. Inline images should have left/right whitespace
4.2: I see a vertical scroll bar in the middle of my screen on Firefox.
Can you email me a screenshot (email in profile)? There are a few Firefox specific bugs we're working on this week. This may be one of them.
4.3 The black header bar which is fixed and stays on the screen
all the time even though it conveys no useful information to me.
True. Intentional. It can be expanded which reveals the large site map. There are big pros and cons to hiding it. Its an on-going conversation.
However we used to have it disappear altogether and people complained about that too....
4.4: A bunch of text blurbs on the left side of the screen
that convey no useful information to me.
Its a list of Headlines - thats all that is meant to be conveyed.
You say you're trying to be as distraction free as possible,
but that's not actually true because it isn't possible to
have your business model and be as distraction free as possible.
The print preview page is as distraction free as possible.
I'm confused. That doesn't make much sense to me. Yes, I am saying that we intend to be "distraction free as possible" - I'm not sure that I have to add a big asterisk * that covers "within the confines of an ad based business model" any more than I should also add "within the confines of a browser running a web site thats not a book" - I'm not trying to be snarky, just hard know what to make of what you said exactly..
Also - take a look at the ads... do we have them all over the place? Nope - we have them at the end of an Article - not in-between, not embedded, not inline. Thats important.
We are not perfect, but we aspire to continuously improve. Focus is on the user and the reading experience but with recognition that we have to pay the bills for 20 or so editors and journalists across five (maybe more?) countries. (I'm not counting devs, sales, hr etc in that)
2 - On some pages (with full-screen window), some or all of the thumb of the scroll bar is hidden on my browser under the black bar.
3 - As I drag the scrollbar down the size of the page jumps so my mouse pointer is no longer on the thumb.
4 - Sometimes I use the space bar to scroll because my hands are on the keyboard, not on the mouse. It doesn't work unless I click first.
5 - I often tile windows on my machine. This window is exactly width of the left-hand half of my screen (2011 MBP). Because of the responsive design I get a ToC when I visit the home page, which is annoying. It feels like the developers said "all users will have maximised windows".
Other frustrations I've had in the past but can't remember now, perhaps it was changed since last time I tried to use it on the desktop. I just get the feeling that (and Quartz isn't alone in this) the developers tried to re-implement functionality and didn't do it well enough to be worth it.
The fixed header is a complete waste of space. Why is it necessary? It's frames all over again, it's like a web design straight out of 1998. Also, is the right-hand sidebar supposed to contain ads? I can't think of another purpose for it, but I don't feel like turning adblock off for long enough to find out...
There is no side-bar to the right. The site expands to 1400px. After that there isn't anything meaningful to place on the right side (other than for the sake of doing so - but thats just clutter)
Well for starters, there is a huge fixed banner at the top of the page, and a fixed sidebar. If you are trying to read the page in a windows that is not maximised, then you really lose a lot of real estate.
I don't know about cruft, but I just don't like it.
I'm going to try to be a little bit more helpful. At first I didn't really know why I felt a bit uncomfortable on the page, but I think it comes from a feeling a bit lost. My attempts to try to understand why:
1. The pictures don't have any borders, so at first I think a part of the picture is hidden outside the window. I widen the window to see the whole picture, but instead of revealing any missing part the picture just gets bigger.
2. If I continue increase the size of the window until the picture stops scaling, I eventually see the grey area to the right, which give me the feeling of locking behind the coulisses at a theater. I shouldn't be there and see that. Contributing to that might be the lack of shadow on the right side, which makes that border flat compared to the left side.
3. I scroll down to gauge the length of the article before I start reading, and it just continue to scroll and I realize after a while that I'm in some other article and I have scrolled through a whole bunch of them. The boundaries between the articles are very weak compared with the pictures and in particular the thick black fields with the captions.
My personal pet peeve... A huuuuuuuuge banner image pushes the article text below the fold on my 13" rMBP on default display settings in a maximized (by height and width, grr OSX) Chrome window.
Maybe I'm a bit irrational about this, I know scrolling isn't hard, but I came to read your text, dammit.
Edit:
Also, seriously... HUGE thanks for asking!
Edit 2:
Scrolling down I'm noticing that your image height is actually bigger than the height of the viewport (minus the height of your top bar). Even if you disagree with the idea that the image shouldn't push the text below the fold, I hope you agree that the image should at least fit my viewport.
If you want to make it the editor's choice, build a feature that at least gives them visibility into what they're doing. Worst case, just load an article preview in a bunch of fixed-size iframes which match the viewport size of common browsers. Better but more expensive, cobble together a browser farm (getting cheaper now thanks to modern.ie images). Either way, make it a prominent part of the editorial process.
Edit: I think the reason it bugs me is that text is the primary value your site provides. The image is ambiance. Ambiance that blocks me from the value I seek goes from tasteful to gaudy real fast. I get the desire to let editors be expressive, but if you're in a situation where you're forced to prioritize, always prioritize the thing that brought the visitor to your site in the first place. Otherwise you might not have need for the editor at all.
Just to balance out the negative comments, I actually really like Quartz.
- Scrolling down into the next article and having the article list as a sidebar is a neat way to encourage exploration. It makes the site a bit more "sticky".
- I like that ads are unobtrusive and placed at the end of the articles. And unlike nytimes.com, there's no paywall.
- I find the site's overall design crisp and relatively uncluttered compared to most news sites.
I say cruft because I'm reading on mobile. I've got a Galaxy Note 2, and I'm using Chrome. It's hardly a slouch of a machine.
First, after clicking the link, I have to watch your spinner for a ~5 seconds. I'm on 65Mbps ADSL - just how much content are you sending me?
Second, the sheer weight of the JavaScript slows everything down. My browser is perfectly capable of scrolling through a page - yet because you've overloaded that, the scrolling is slow, jumpy, and the text renders poorly.
Thirdly, the Note has a huge screen, so I don't mind your static header. If I had a small screen it would piss me off.
Finally, when I switch from Portrait to Landscape, your page jumps all over the place.
Now, compare that to the Mobile NYT page. Yours looks more beautiful, but the NYT is quicker, easier to read, and doesn't get in my way.
You have great content - and an interesting product - but it needs to go on a diet and be user tested on a wider range of devices. I dread to think how it performs on low end phones.
On my iPhone, Chrome hides the browser location and other buttons when you start scrolling down. Scrolling up brings them back into view.
On that article, I was completely unable to bring the location/page-controls back into view -- I was stuck on that page, trying to figure out how to escape -- until I clicked a link - then the controls showed up while it was loading the new content.
huge fixed banner at the top of the page, and a fixed sidebar.
I see what you mean - but I don't think I"d call that "cruft" but thats my opinion. Thats the Navigation Bar at the top, and the sidebar is a Queue of the Articles in the feed. These are basic page elements.
We get feedback specifically calling this out as good and relatively distraction-free (hence your comment struck me as odd)
Also - the width of the page dedicated to text/images is the same as the NYT mobile site (600px aprox)
But the navigation bar doesn't serve any purpose to me, at least not floating. It has your logo, which I care about, but not once I'm deeper into the article.
It has a search field I will never use. It has social media buttons I will never use (because if I wanted to share this I would just copy/paste the URL). It has a "more" button that I will never use also.
The nav bar is fine at the very top of your page, making it float and scroll with me is just a waste of space.
Floating UI elements should be reserved for critical functionality that's core to the site. Facebook gets a pass because the things on the floating nav bar are actually important. If you really must float it, consider floating to the side - most of us on modern laptops have an abundance of horizontal space but not a great deal of vertical space.
Some more feedback:
- The organization of content is confusing. Just scrolling casually I cannot immediately tell where one post ends and the next begins. The large images aren't a good indicator, since some of them appear to be ads. I shouldn't have to read the tail sentence of something just to determine if I'm looking at the end of a post or not.
- There is a mismatch of expectations. When I go to a link that clearly refers to a single piece of content, I do not expect to keep scrolling and go right into a completely different piece of content.
- I find the photos oversized for their purpose. In this particular piece you have generic-stock-photo-of-Google-employees, which is only superficially related to the topic at hand. It doesn't have business being this huge. It's distracting and keeps me from the actual content I'm here for. Note in the original NYT link the image is also only tangentially related, but it does not overwhelm the text.
It has a search field I will never use. It has social media buttons I will never use (because if I wanted to share this I would just copy/paste the URL). It has a "more" button that I will never use also.
Social buttons are doubly unnecessary in the floating toolbar since you already find social buttons at the end of the article.
Are the users who liked the navigation bar and the sidebar using quartz in a different way from us? For example, are they using quartz primarily to browse rather than following a link to a specific story?
I found these page elements very annoying, and I suspect those who liked it have a different use pattern.
Mobile view can't be disabled, on Android stock browser at least. That means I can't zoom out and read the text at the much smaller size and higher info density I prefer.
I like Quartz in general but usually get tripped up by the scroll bar within a frame. My mouse is normally near the right edge of the monitor, outside the frame.
I can't stand the huge fixed header and I'm sad that I'm seeing more and more of them on websites. If I plan on spending any amount of time on a website that has one, I immediately edit the css to add display: none because otherwise it'll drive me crazy.
It's a waste of space and it makes it much much harder for me to read on my laptop. Vertical space is way too valuable to throw away like that.
It shows several stories at once, not just the google brainteasers stories.
2. In general, people would rather read the real article instead of a summary of the article. When someone submits a summary of an article to a site like HN or reddit, it is usually flagged as blog-spam because we'd rather read/support the original content than a summary with questionable value.
3. For long form articles, nothing beats reading the print-preview page to get rid of all the sidebars, comments, ads. Look at the print preview page: it is not possible to get less distraction free than that. Any other format has more distractions.
Even aside from that, the New York Times has some of the best information architecture in the business. These are the guys who did NYTProf. Their web team is awesome.
http://www.nytimes.com/2013/06/20/business/in-head-hunting-b...
4. Some visual issues I had with quartz:
4.1: No left/right whitespace around images.
4.2: I see a vertical scroll bar in the middle of my screen on Firefox.
4.3 The black header bar which is fixed and stays on the screen all the time even though it conveys no useful information to me.
4.4: A bunch of text blurbs on the left side of the screen that convey no useful information to me.
You say you're trying to be as distraction free as possible, but that's not actually true because it isn't possible to have your business model and be as distraction free as possible. The print preview page is as distraction free as possible.