is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
The long-awaited new design for Boxes and Arrows, the venerable online information architecture magazine, went live earlier this week and it’s… um, it’s different. Very different.
Of course, it’s hard for me to give an objective assessment of this new look’s graphical merits. Way, way back in August 2004, I pulled a feverish all-nighter (with my former colleague, Chris Fahey) to knock out a competing design that I hoped would be selected as the new face for the magazine. I’m still very fond of what we pulled off, but, obviously, our proposal did not prevail.
Still, I’d like to think that even without that conflict of interest, I’d have much the same reaction as I had when I first saw this revision: the new Boxes and Arrows lacks certain traits of executional elegance that I value in well-designed interfaces. I’m talking about some basic stuff here: consistency in typographic conventions, semantic clarity in graphical elements, disambiguation in interface constructions, continuity with prior branding art… it’s a mess, and it will win no beauty pageants.
Coulda, Shoulda, Woulda
Aside from some obvious disappointment in the fact that this new look and feel doesn’t exactly resemble our design submission (you’d never believe me when I say losing out doesn’t bother me much these days, but it really doesn’t), I’m most frustrated by the blown opportunity. Information architecture can be beautiful, and it should be beautifully presented.
The work products of an information architect — flow charts, maps, diagrams, schematics, etc. — aren’t meant to be paragons of graphic good taste. But, in their role as tools for the expedient communication of complex ideas, they often constitute an aesthetic of their own; in their expediency, in their earnestly objective prescriptions for subjective intangibles, there’s a kind of urgent and thoughtful beauty.
To me, that’s the way that the premier online destination for thinking on the discipline should treat its subject matter, especially when that subject matter is so good. Though not without its lapses in good judgment, Boxes and Arrows has, on the whole, been an editorially impressive venue for some truly outstanding writing in this field. It’s some of the best of this kind of writing to be found anywhere, and it’s been done on an all-volunteer basis for years, through the challenges of an economic downturn and the competition of a rebounded marketplace. Which is to say, it’s persevered, and it’s been very good.
So it’s regrettable to me to see that, rather than embracing visual sophistication, this design seems to shun it. Like a lot of the information architecture discipline, it seems to deliberately shy away from being visually graceful, as if eschewing formal beauty somehow validates the seriousness of the material. No matter what you want to say about this design, you can’t tell me that it’s the most elegantly appropriate, suitably flattering presentation of this subject matter possible, nor that it even tries to be. In spite of the way doing so might unbecomingly reflect upon me, I’m not going to be shy about saying this: the new Boxes and Arrows is visually unsatisfying, and I think the writing deserves better.
When I first started reading this, having not seen the new design, I thought, “Hmm, Khoi’s a pro, his expectations are probably just really high. It can’t be all that bad…”
I was wrong. It’s a mess.
Robb Irrgang
I know I should look past beauty, but I just can’t love a site that uses Arial Narrow for, well, anything.
I’m not going to say that no thought went into the structure, but I wonder… Is this the mythical “un-design”, and if so, should we be scared?
The site is a disgusting remant of what used to be a premier resource. The new design isn’t even 1/5th of the previous design, and the previous design wasn’t even that elaborate or particularly detailed.
The navigation on the left is extremely poorly executed, the God-awful choice of Arial Narrow (with terrible kerning) makes me want to jump out the window in front of me, and the terrible spacing in the grey top header area all just shows how little talent the folks that put this together have. The individual entry page only looks slightly better than the homepage.
I don’t know who designed this site, but they’re not a designer, nor do they understand the significance of what an ugly design for Boxes and Arrows does to the entire industry of information architects. The design of this site casts a shadow of gloom and filth across what used to be a pillar of excellence.
If I were Erin Malone, I’d go find a free WordPress theme and immediately slap it up there before anyone else sees this design.
Robb stole my thunder. Arial Narrow. Pardon me while I question everything I’ve ever learned about typography… and possibly throw up a little in my mouth.
Kudos for being blunt and open about it, Khoi. I generally try to keep my mouth shut about designs I don’t like, but this seems like an important one to mess up.
I too was horrified when the new design was rolled out. I actually thought I had been redirected to another website,
Have you tried sizing the window down? On an article page, before the scrollbars even appear, the content vanishes into the browser. This is a, uh, “new technique” that I’ve yet to see implemented until now.
On the other hand, I’ve been using PublicSquare – B&A’s CMS – and absolutely dig it for the magazine we’re publishing. Usability and ease of customization are top grade.
Why oh why did you change for the worse, Boxes and Arrows?
Edward
It sorta looks like an SEO’s site. I don’t know why that’s what I think of, but it’s very “web marketer.”
In the past B&A’s had letters from the editor to announce changes to the site, it’s interesting that this redesign seems to have passed without any editorial comment.
Seriously, your original mockups (gawd, was it that long ago??) are sooo much more satisfying to the eye. What the hell? Please tell me some sexual favors accompanied the adopting of their new godawful design. Why is “METHODS” larger than anything else on the homepage? The new look inspires a knee-jerk backbutton response.
Well, I’m more of a coder type than a visual designer but Khoi, your design proposal was so good that I saved it as a reference example.
The new b&a is cluttered and awful. It looks like some business site you’re immediately lost. Why is the main navigation so tiny (top) and the categories so large (left)? Are the categories categories or text and then, what determines the size of the words?
Oh, and these homepage stock images are awful, too.
Kurt Trew
Hmmm… Not the prettiest of sites, I agree. Competition time again, I reckon. Have they actually gone with any of the submitted designs from 2004?
My goodness! It’s shockingly bad. However, it is worth investigating, from a design viewpoint, because each new section and page uncovers one or more new errors in the site’s design.
I’m wondering if it’s all a joke and they’ll reveal the proper new design in due course.
Khoi, actually I *do* believe that losing doesn’t bother you, simply because my reaction was exactly the same as yours and I didn’t submit anything.
To be honest, I’m impressed by how polite and analytical you’ve presented your critique. My first reaction was more emotional. Something like “urrggghhh!” This redesign doesn’t do B&A’s quality content justice. If anything a new visitor would never notice the quality, because the first glance says “cheap and chaotic”, and whoooosh, that visitor’s gone.
I’d much rather be reading in your design. Maybe they’ll reconsider?
Typography sins aside (which are pretty bad), the personality has been completely sapped. It’s now painful and restrictive to skimming. Man, I was just on there yesterday looking for something and everything looked fine and dandy. Why would they take such a huge step backwards. It’s a mess of non-hierarchy.
“Back when we decided B&A needed an overhaul, we held a contest for a new design of Boxes and Arrows. Boy, was that a mistake.”
I think it is pretty lame for a journal by professionals who work so close to designers (and presumably understand the monetary value of the trade) held a contest in the first place. Not using the winning entry is almost offensive (though they were honest enough to take responsibility for their first mistake), and replacing it with this. . . well, I expect thier designer readership (including myself, and which I suspect was pretty high at some point) to drop off accordingly.
It’s a shame, because a lot of great content get’s buried under poor stewardship.
I don’t agree that it’s as much of a travesty as one might think from reading the comments, but I was definitely disappointed.
Khoi, I think you really hit the nail on the head in addressing the lack of that certain IA-document-charm. They aren’t supposed to be beautiful documents, but the information can definitely be presented in an aesthetically pleasing way that supports the efficient communication of information.
I echo Mike D’s sentiments in that somebody needed to say it, and you did a pretty good job of that without simply bashing it.
Scott
I actually kind of like the single-story layout. It’s different, but attractive.
However, the front page is brutal. Looks like an amateurish web magazine from the 90s.
Adam
It’s a website/resource about information design, correct? So why, when I make my browser window less than 960px wide, does the left sidebar info disappear with no way to scroll to see it?
Not only does it look like a souped-up version of those pay-per-click domains, but I think whoever built it needs a css lesson.
I vaguely remember seeing a post on B&A awhile back, stating their intentions with the new design. I was just as appalled then as I am now, and I am surprised that this outbid your mighty proposal, Khoi.
Even before this redesign I had heard how great B&A was, but I never actually enjoyed visiting their site. Everything was always out of proportion – their search box was as big as my pinky finger – that’s a big search box. Nothing went together, and it seems that this realignment really nailed that once again.
And, not to overstate it, but Arial Narrow just makes me grimace. It’s…ugly.
Is the navigation supposed to be like a Flickr cloud? Does the typeface get larger based on clicks or popularity or amount of articles in that section? It’s confusing and the line height makes it confusing.
I thought one of the sections was “LEARNING FROM OTHERS METHODS” and they forgot the apostrophe.
And the photos on the home page in the story are cut in weird ways and include manual lines, which I can’t stand. Everytime I see a photo cut like that “pen photo” with no border I immediately get flashbacks of Account Executive’s Powerpoint presentations where they go online, find a photo and just throw it on a slide. Yick.
All that being said, I think the article pages look much better than the homepage. I love pullquotes! However, I think Khoi, you are the master of the pullquote!
If possible, I think it would be instructive if you went into greater detail about the problems with the new design. About all you say, aside from pointing to your far superior design (and it is far superior), is that the new design:
… lacks certain traits of executional elegance that I value in well-designed interfaces…: consistency in typographic conventions, semantic clarity in graphical elements, disambiguation in interface constructions, continuity with prior branding artЁ it’s a mess, and it will win no beauty pageants.
Perhaps you feel it would be impolitic to say more than you’ve already said, but I for one would love more information about why you think the design fails.
I’ll have to concur with everyone. My first entrance was actually to a story page, where I said “ooh, neat.” I like the layout, I like the byline. The typography definitely leaves a LOT to be desired, sure.
Then, I went to the homepage. Like others, that pen image just drives me insane. The tag cloud is obnoxious. The layout isn’t bad, but is definitely executed quite poorly.
Though, what’s up with the headers on the events and jobs pages? The search box disappears causing the main navigation to relocate (umm, isn’t that bad?). The rounded corners on the gray separator disappear too and the logo overlaps.
Every time I go back, the worse it looks.
Anne Hjortshoj
Unfortunately, many information architects seem to feel that interface design is (a) not their role and (b) not something to which they should even pay much attention, because it’s “eye candy” and therefore a distant second for a user trying to Get Things Done. And brand? That’s something to be fought at all costs, because doesn’t branding always get in the way of tasks?
I see this attitude in the new B&A design. It’s really too bad.
I have to join in the chorus of disappointment. This design, apart from all of the aforementioned points, is the opposite of “Bulletproof.” The first thing I did was the old ‘increase-font-size’ test and it makes the site absolutely unbearable.
Overall, the BNA would be far better off to roll back to the previous version… at least it was easier on the eyes.
Not to boost egos or anything, but your design was far and away the winner in its design, layout and readablity.
Wow, this could be the most unanimous thread in the history of web design. This might be a good time for Boxes and Arrows to invoke The Costanza principle:
“If every instinct I have is wrong, then the opposite — by definition — must be correct.”
What really struck me was the tag cloudy left column navigation. Every IA person I know dislikes tag clouds quite a bit, so it feels strange to see it on a big IA site. Also, I am not as much a typography nut as many here, but the orange italics are pretty terrible.
Wow, yeah, I didn’t expect nearly this much unanimity. Thanks everyone, for chiming in.
One thing I should say is that I do respect what they’re trying to do at Boxes and Arrows. I think they honestly believe they’re making an improvement with this redesign, and they’ve launched with the intention of adding something constructive to the conversation.
That said, Michael Barrish makes a good point: for something that means so much to this community, I should offer more detail about the problems and more constructive points on how to resolve them.
Ego aside, I do think our original submission would address a lot of the problems (though certainly not all of them). But that doesn’t mean that I shouldn’t be able to offer something helpful with regard to improving the current situation.
I’ll try and do that soon (gotta get back to work here!). In the meantime, if folks want to add to this thread with constructive pointers on how to improve this design, I think it’ll be very helpful. I also know that the Boxes and Arrows editors are reading this, so your contributions will be heard!
Allow me to join those bewildered by the use of Arial Narrow. Even if it wasn’t already the chair of the Do Not Ever Use category of typefaces, surely even the slightest bit of good sense would prevent someone from giving it the star treatment Boxes and Arrows has now given it. It’s beyond disappointing; it’s downright unsettling.
Yes, we are watching, and I do want to respond but I need to let it gel a bit first, because — as is so often the case– things are more complicated than you might suspect on the outset.
That said, any comments that run along this line “Orange italics are not readable, try font face verdana, dark orange and 8pt instead” will be taken joyfully to heart, any comments that say “only morons use arial narrow” will get the response “I’m rubber, and your glue” because that is the level you are working at.
Fair enough, christina. But you have to admit, if there are two typefaces which warrant the “only morons” comment, they would be Comic Sans and Arial Narrow… not necessarily in that order. It’s the equivalent of buying a new car and asking for the curb feeler option.
Hey Christina, in the interest of giving some more specific feedback, here are a few things I noted:
– The padding inside the grey headers used throughout the site is not uniform, such that the text used inside of the header is not vertically centered and is too close to the top.
– On the homepage, the word January and the issue number seem like they are crammed in there and have no breathing room.
– The typography throughout the site has no contrast, it is essentially all the same color of dark grey or black. Because of this no part of the interface “stands out” and leads my eye directly to it, so the effect tends to make the design lack visual focus and make it confusing when it first appears. I would mix font weights and shades of grey to better highlight the important features and let the unimportant metadata fade more into the background.
– To make the tag cloud on the left less jarring, try making the links lighter or darker depending on category size instead of making the text smaller or larger. By keeping a uniform size through the left navigation it’s more visually appealing and removes the large problem of the most important text on the entire site being the word METHODS in gigantic capital letters.
– The event calendar box at the bottom has links in it, however those links are styled exactly like other text elsewhere on the site that isn’t a link. Either make the color different or add a color, or both.
– Back to the side tag cloud, when you hover over a link it displays an arrow pointing to the main column of content, so I expect that whatever action I take will cause the main content to change. Instead, the entire page reloads. I could be nitpicking here because of all the crazy usability tests I’ve ran in the past, but users tend to pay attention to what the interface cues them to think and when those expectations aren’t met, it’s confusing.
– On an article page, the section headers within the content aren’t spaced out properly — the headers are physically closer to the paragraph above them than the paragraph below that they are introducing.
– The timestamp in the comment boxes is bold, leading me to think it’s a link since bold black text elsewhere on the site is a link, but it’s not. Either change the style of that text or turn it into a permalink directly to that content.
– On an author biography page, the article navigation on the left has titles that are really short, too short to get the jist of what the article is about. The width on the left column is wide enough to have full-length article titles, so it’s beneficial to the user to see them or else they won’t bother to click.
– On the about page the links within the content are blue and normal font weight, in contrast to everywhere else where they’re bold and black.
These are just a few of the issues I saw when poking around, hope it helps.
david
Here’s an attempt at specificity:
I find the use of stock photography diminishes the articles and is at least partly responsible for the “it looks like a marketing firm site” comments. The use of clumsy visual metaphors such as pen nibs and weighty tomes dumbs down what should be a complex conversation among experts (if not here, where?).
My suggestion would be to take the task of representing information visually more seriously. You might find inspiration at http://infosthetics.com/
I had never seen the arial narrow, because helvetica neue was spec’d before it. I’m tweaking a bit now.
Still don’t have time for a formal response (is one called for?) but
1. We are tweaking tweaking, tweaking and will continue to do so
2. It was designed by designers, not by IA’s. See link at bottom of page.
3. I respect Khoi’s design, but it did not fit our vision of where the site was going, nor did it match our needs or taste. Nor does this one… yet, but it’s directionally correct. Now if we can get it executionally correct. Sigh.
4. I hate the clip-art on the front also. As new stories come out, we’ll mend that.
5. We are still 100% volunteer. We’ve barely started to make just a tiny bit of money. We could never have paid a designer, though some day hopefully we can.
I think I addressed the problem of a contest in my article, “are we there yet?” but again,. never let anyone else set your design direction.
6. April 3rd never flaked, which is more than I can say for some people.
7. Whine, whine, whine. Shut up and dance. Do you love B&A? Do you love the content? Are you much wiser in matters of design than I? (and I’ll guess you are…) Send me fixes. Send them in photoshop, send them in CSS. Watch them go up.
8. Snarky comments about Arial Narrow is the kind of clubby comment that makes engineers and business folks hate designers. You might want to curb that in a bit.
So, to sum up
* You complain, you provide fix, we put it live.
* You write articles on why arial is the bastard child of helvetica and even helvetica is darn passe (see, I was listening the last ten years) and we’ll publish that.
How’s that for a fair offer?
Adam
Christina: much respect for coming on here to share your side. I’m sure you realize everyone is only being so vocal with their opinions because they care so much about the site.
I took a peek at the CSS (using my new friend Firebug), and in regards to my comment about losing half the left sidebar when the browser window is narrower than 960px, it looks like that’s due to elements being positioned left -119px. i think the problem would be solved if you just shifted your “zero” point to the left, and moved corresponding elements +119px to the right instead. that might create other problems, but as it stands, some content is possibly inaccessible for some people.
giuliano Velli
@christina:
Snarky comments about commenting Arial Narrow cited as the reason that make engineers and business folks *hate* designers is the kind of clubby comments that make designers *laugh* at engineers and business folks…
Anyway, if you want help, state clearly what’s your vision/direction/taste cause, if the khoi’s comps didn’t match them, your new design didn’t communicate them cleary, or not at all (otherwise it would be a successfully design and this discussion would never be existed)
– what you want to communicate / what you don’t want co communicate ?
– could you give us some examples of sites you like and think have the right approach to the problem you want to solve ?
– do you feel some important feature is missing or has been implemented badly on the new design ?
– on the other side, in what you feel the design is already good and don’t need to be emended ?
Design is problem solving, and without knowing the problem is hard to find the solution and, i think, the problems we see on the site right now, are problems of the design itself not the ones you need to address to improve the user experience.
If i design and code all the site under your direction, can i put a 10px Verdana Capital text in the footer stating “arial narrow is for morons?” (just kiddin’).
Sorry for bad english
Terry Sutton
I assume its a bit of a design flaw when I have NO idea what the side is about. It could be about farming chickens for all I know.
Sweet mary. When I visit the site it’s a total “WTF? why am I here? What am I looking for? Where am I supposed to go? Where is what and why?”
martha
Boy, is it ever annoying when on every page you are confronted with the popup: “This page uses fonts that needs to be installed. This is usually safe. Do you want to allow these fonts to be downloaded? Y/N” Yes, we’re still using IE6 on PC’s where I work.
Is there no way to set the font you want to use but then default to something already installed if the user doesn’t have it?
Alex
Rarely does one page instantly cause so much confusion. What’s the stuff on the left? Why is it all different sizes? What’s with the weird cut-off stock photos? Why are two stories next to each other with one full-width underneath? The actual story view is passable but the front page is a train wreck.
For personal reasons, I feel the need to point out that the person identified as “Adam” above is not me.
eileen
Khoi, I visit your site weekly and never comment, but would like to step in and say a few words.
I agree, wholeheartedly, with the comments and suggestions that have been made about the B&A site. This site, after all, has provided all of us with a wealth of information for years – and has done so in a manner that, until now, made sense. What bothers me about the redesign is not so much the obvious visual issues, but the holistic approach to the information architecture and design the firm that executed the redesign undertook. An holistic approach to IA and IDesign can, in fact, be very effective and provide the end users with a wonderful, immersive user experience (think “community” sites and WebAps that prop based on input, point of entry, etc.); however, I don’t believe this approach is appropriate for a site dedicated to IA and IDesign education. And now that the cloud tags are gone and its obvious the items on the left are, in fact, primary navigation elements that disappear once one clicks on a story, the experience is even more convoluted than it was when we were all questioning why cloud tags were incorporated – and whether or not they changed size based on clicks or were just “Web 2.0 pretty”.
Any site that is dedicated to providing education and commentary about all things IA and IDesign should be very succinctly architected and not assume those of us that use(d) the site to garner yet more insight into these things are there meander around for hours on end.
I just had a look back at your competition entry – it’s like that SNL sketch where President Al Gore is giving his State of the Union address (“We have way too much gasoline! Gas is down to nineteen cents a gallon and the oil companies are hurting. I know that I am partly to blame, by insisting that cars run on trash”).
I’m not usually one to shed tears over What Might Have Been, but this really hurts.
I really worry about the path this thread is going down–bickering/critiquing in the comments section of a blog with the *promise that those suggestions will be implemented immediately* will surely result in a more broken situation than what stands currently. Design by committee rarely works, even (or especially?) if it’s a group of fired up designers, frustrated at a re-design of a loved publication.
Perhaps the best solution would be for a small design team to come together, establish a trusted, contractual relationship with the B&A team (i.e. their design *will* get used), and produce a design that balances the site’s IA requirements with a clean design.
I’m sure there would be plenty of people on this blog and elsewhere who’d love to help out with this project, myself included.
Terry
Bravo to Christina. You have the patience of a saint. While I regrettably have to say I too fall in the camp of “I don’t like the new design”, I still LOVE Boxes and Arrows. It has been the most valued resource for me as an IA. Kudos on keeping watch over a great community-built site and for diplomatically listening to and dealing with the criticisms (the suggested changes were swift, indeed). I look forward to continued improvements and more great content.
Matt, thank you for your intellegent comments. I’m dipping my toe in the comments slowly and carefully. I don’t read this thread very often, because typically it makes me want to go to bed with season three of battlestar galactica. That said, I do listen, I do seriously consider each change, and I make them when Liz and our other staff members agree… and design by committee doesn’t work.
We have been lucky enough that EastMedia has become exactly that small company you suggested we look for, and I hope you’ll agree with my the fixes and tweaks are coming fast and furious. April 3rd, our contest winners, did a fine job, but their day jobs slow them down too much to do the day to day improvements.
BTW, I have a couple more magazines & sister sites for B&A in the planning stages so if you think you’d like to entertain yourself by designing for design’s biggest fan, drop me a note. I’m pretty easy to find.
The long-awaited new design for
When I first started reading this, having not seen the new design, I thought, “Hmm, Khoi’s a pro, his expectations are probably just really high. It can’t be all that bad…”
I was wrong. It’s a mess.
I know I should look past beauty, but I just can’t love a site that uses Arial Narrow for, well, anything.
I’m not going to say that no thought went into the structure, but I wonder… Is this the mythical “un-design”, and if so, should we be scared?
The site is a disgusting remant of what used to be a premier resource. The new design isn’t even 1/5th of the previous design, and the previous design wasn’t even that elaborate or particularly detailed.
The navigation on the left is extremely poorly executed, the God-awful choice of Arial Narrow (with terrible kerning) makes me want to jump out the window in front of me, and the terrible spacing in the grey top header area all just shows how little talent the folks that put this together have. The individual entry page only looks slightly better than the homepage.
I don’t know who designed this site, but they’re not a designer, nor do they understand the significance of what an ugly design for Boxes and Arrows does to the entire industry of information architects. The design of this site casts a shadow of gloom and filth across what used to be a pillar of excellence.
If I were Erin Malone, I’d go find a free WordPress theme and immediately slap it up there before anyone else sees this design.
Robb stole my thunder. Arial Narrow. Pardon me while I question everything I’ve ever learned about typography… and possibly throw up a little in my mouth.
Kudos for being blunt and open about it, Khoi. I generally try to keep my mouth shut about designs I don’t like, but this seems like an important one to mess up.
I too was horrified when the new design was rolled out. I actually thought I had been redirected to another website,
Have you tried sizing the window down? On an article page, before the scrollbars even appear, the content vanishes into the browser. This is a, uh, “new technique” that I’ve yet to see implemented until now.
On the other hand, I’ve been using PublicSquare – B&A’s CMS – and absolutely dig it for the magazine we’re publishing. Usability and ease of customization are top grade.
Why oh why did you change for the worse, Boxes and Arrows?
It sorta looks like an SEO’s site. I don’t know why that’s what I think of, but it’s very “web marketer.”
In the past B&A’s had letters from the editor to announce changes to the site, it’s interesting that this redesign seems to have passed without any editorial comment.
Seriously, your original mockups (gawd, was it that long ago??) are sooo much more satisfying to the eye. What the hell? Please tell me some sexual favors accompanied the adopting of their new godawful design. Why is “METHODS” larger than anything else on the homepage? The new look inspires a knee-jerk backbutton response.
Well, I’m more of a coder type than a visual designer but Khoi, your design proposal was so good that I saved it as a reference example.
The new b&a is cluttered and awful. It looks like some business site you’re immediately lost. Why is the main navigation so tiny (top) and the categories so large (left)? Are the categories categories or text and then, what determines the size of the words?
Oh, and these homepage stock images are awful, too.
Hmmm… Not the prettiest of sites, I agree. Competition time again, I reckon. Have they actually gone with any of the submitted designs from 2004?
My goodness! It’s shockingly bad. However, it is worth investigating, from a design viewpoint, because each new section and page uncovers one or more new errors in the site’s design.
I’m wondering if it’s all a joke and they’ll reveal the proper new design in due course.
Khoi, actually I *do* believe that losing doesn’t bother you, simply because my reaction was exactly the same as yours and I didn’t submit anything.
To be honest, I’m impressed by how polite and analytical you’ve presented your critique. My first reaction was more emotional. Something like “urrggghhh!” This redesign doesn’t do B&A’s quality content justice. If anything a new visitor would never notice the quality, because the first glance says “cheap and chaotic”, and whoooosh, that visitor’s gone.
I’d much rather be reading in your design. Maybe they’ll reconsider?
awful. truly awful.
Typography sins aside (which are pretty bad), the personality has been completely sapped. It’s now painful and restrictive to skimming. Man, I was just on there yesterday looking for something and everything looked fine and dandy. Why would they take such a huge step backwards. It’s a mess of non-hierarchy.
The new design looks really scattered, I’m presuming the left navigation items are bigger if there’s more info in there? Kind of like a tag cloud?
Mmm.
First off, the browse by tag portion on the events page is hideous.
There’s so much black and white I can hardly read anything without going slow. Especially on the jobs page.
Maybe we could use their feeds to pull all the content into your design.
From an October 2006 post on B&A:
“Back when we decided B&A needed an overhaul, we held a contest for a new design of Boxes and Arrows. Boy, was that a mistake.”
I think it is pretty lame for a journal by professionals who work so close to designers (and presumably understand the monetary value of the trade) held a contest in the first place. Not using the winning entry is almost offensive (though they were honest enough to take responsibility for their first mistake), and replacing it with this. . . well, I expect thier designer readership (including myself, and which I suspect was pretty high at some point) to drop off accordingly.
It’s a shame, because a lot of great content get’s buried under poor stewardship.
I don’t agree that it’s as much of a travesty as one might think from reading the comments, but I was definitely disappointed.
Khoi, I think you really hit the nail on the head in addressing the lack of that certain IA-document-charm. They aren’t supposed to be beautiful documents, but the information can definitely be presented in an aesthetically pleasing way that supports the efficient communication of information.
I echo Mike D’s sentiments in that somebody needed to say it, and you did a pretty good job of that without simply bashing it.
I actually kind of like the single-story layout. It’s different, but attractive.
However, the front page is brutal. Looks like an amateurish web magazine from the 90s.
It’s a website/resource about information design, correct? So why, when I make my browser window less than 960px wide, does the left sidebar info disappear with no way to scroll to see it?
Not only does it look like a souped-up version of those pay-per-click domains, but I think whoever built it needs a css lesson.
I vaguely remember seeing a post on B&A awhile back, stating their intentions with the new design. I was just as appalled then as I am now, and I am surprised that this outbid your mighty proposal, Khoi.
Even before this redesign I had heard how great B&A was, but I never actually enjoyed visiting their site. Everything was always out of proportion – their search box was as big as my pinky finger – that’s a big search box. Nothing went together, and it seems that this realignment really nailed that once again.
And, not to overstate it, but Arial Narrow just makes me grimace. It’s…ugly.
Is the navigation supposed to be like a Flickr cloud? Does the typeface get larger based on clicks or popularity or amount of articles in that section? It’s confusing and the line height makes it confusing.
I thought one of the sections was “LEARNING FROM OTHERS METHODS” and they forgot the apostrophe.
And the photos on the home page in the story are cut in weird ways and include manual lines, which I can’t stand. Everytime I see a photo cut like that “pen photo” with no border I immediately get flashbacks of Account Executive’s Powerpoint presentations where they go online, find a photo and just throw it on a slide. Yick.
All that being said, I think the article pages look much better than the homepage. I love pullquotes! However, I think Khoi, you are the master of the pullquote!
If possible, I think it would be instructive if you went into greater detail about the problems with the new design. About all you say, aside from pointing to your far superior design (and it is far superior), is that the new design:
Perhaps you feel it would be impolitic to say more than you’ve already said, but I for one would love more information about why you think the design fails.
I’ll have to concur with everyone. My first entrance was actually to a story page, where I said “ooh, neat.” I like the layout, I like the byline. The typography definitely leaves a LOT to be desired, sure.
Then, I went to the homepage. Like others, that pen image just drives me insane. The tag cloud is obnoxious. The layout isn’t bad, but is definitely executed quite poorly.
Though, what’s up with the headers on the events and jobs pages? The search box disappears causing the main navigation to relocate (umm, isn’t that bad?). The rounded corners on the gray separator disappear too and the logo overlaps.
Every time I go back, the worse it looks.
Unfortunately, many information architects seem to feel that interface design is (a) not their role and (b) not something to which they should even pay much attention, because it’s “eye candy” and therefore a distant second for a user trying to Get Things Done. And brand? That’s something to be fought at all costs, because doesn’t branding always get in the way of tasks?
I see this attitude in the new B&A design. It’s really too bad.
I have to join in the chorus of disappointment. This design, apart from all of the aforementioned points, is the opposite of “Bulletproof.” The first thing I did was the old ‘increase-font-size’ test and it makes the site absolutely unbearable.
Overall, the BNA would be far better off to roll back to the previous version… at least it was easier on the eyes.
Not to boost egos or anything, but your design was far and away the winner in its design, layout and readablity.
Wow, this could be the most unanimous thread in the history of web design. This might be a good time for Boxes and Arrows to invoke The Costanza principle:
“If every instinct I have is wrong, then the opposite — by definition — must be correct.”
What really struck me was the tag cloudy left column navigation. Every IA person I know dislikes tag clouds quite a bit, so it feels strange to see it on a big IA site. Also, I am not as much a typography nut as many here, but the orange italics are pretty terrible.
Wow, yeah, I didn’t expect nearly this much unanimity. Thanks everyone, for chiming in.
One thing I should say is that I do respect what they’re trying to do at Boxes and Arrows. I think they honestly believe they’re making an improvement with this redesign, and they’ve launched with the intention of adding something constructive to the conversation.
That said, Michael Barrish makes a good point: for something that means so much to this community, I should offer more detail about the problems and more constructive points on how to resolve them.
Ego aside, I do think our original submission would address a lot of the problems (though certainly not all of them). But that doesn’t mean that I shouldn’t be able to offer something helpful with regard to improving the current situation.
I’ll try and do that soon (gotta get back to work here!). In the meantime, if folks want to add to this thread with constructive pointers on how to improve this design, I think it’ll be very helpful. I also know that the Boxes and Arrows editors are reading this, so your contributions will be heard!
Allow me to join those bewildered by the use of Arial Narrow. Even if it wasn’t already the chair of the Do Not Ever Use category of typefaces, surely even the slightest bit of good sense would prevent someone from giving it the star treatment Boxes and Arrows has now given it. It’s beyond disappointing; it’s downright unsettling.
Yes, we are watching, and I do want to respond but I need to let it gel a bit first, because — as is so often the case– things are more complicated than you might suspect on the outset.
That said, any comments that run along this line “Orange italics are not readable, try font face verdana, dark orange and 8pt instead” will be taken joyfully to heart, any comments that say “only morons use arial narrow” will get the response “I’m rubber, and your glue” because that is the level you are working at.
Fair enough, christina. But you have to admit, if there are two typefaces which warrant the “only morons” comment, they would be Comic Sans and Arial Narrow… not necessarily in that order. It’s the equivalent of buying a new car and asking for the curb feeler option.
I kid, i kid.
Hey Christina, in the interest of giving some more specific feedback, here are a few things I noted:
– The padding inside the grey headers used throughout the site is not uniform, such that the text used inside of the header is not vertically centered and is too close to the top.
– On the homepage, the word January and the issue number seem like they are crammed in there and have no breathing room.
– The typography throughout the site has no contrast, it is essentially all the same color of dark grey or black. Because of this no part of the interface “stands out” and leads my eye directly to it, so the effect tends to make the design lack visual focus and make it confusing when it first appears. I would mix font weights and shades of grey to better highlight the important features and let the unimportant metadata fade more into the background.
– To make the tag cloud on the left less jarring, try making the links lighter or darker depending on category size instead of making the text smaller or larger. By keeping a uniform size through the left navigation it’s more visually appealing and removes the large problem of the most important text on the entire site being the word METHODS in gigantic capital letters.
– The event calendar box at the bottom has links in it, however those links are styled exactly like other text elsewhere on the site that isn’t a link. Either make the color different or add a color, or both.
– Back to the side tag cloud, when you hover over a link it displays an arrow pointing to the main column of content, so I expect that whatever action I take will cause the main content to change. Instead, the entire page reloads. I could be nitpicking here because of all the crazy usability tests I’ve ran in the past, but users tend to pay attention to what the interface cues them to think and when those expectations aren’t met, it’s confusing.
– On an article page, the section headers within the content aren’t spaced out properly — the headers are physically closer to the paragraph above them than the paragraph below that they are introducing.
– The timestamp in the comment boxes is bold, leading me to think it’s a link since bold black text elsewhere on the site is a link, but it’s not. Either change the style of that text or turn it into a permalink directly to that content.
– On an author biography page, the article navigation on the left has titles that are really short, too short to get the jist of what the article is about. The width on the left column is wide enough to have full-length article titles, so it’s beneficial to the user to see them or else they won’t bother to click.
– On the about page the links within the content are blue and normal font weight, in contrast to everywhere else where they’re bold and black.
These are just a few of the issues I saw when poking around, hope it helps.
Here’s an attempt at specificity:
I find the use of stock photography diminishes the articles and is at least partly responsible for the “it looks like a marketing firm site” comments. The use of clumsy visual metaphors such as pen nibs and weighty tomes dumbs down what should be a complex conversation among experts (if not here, where?).
My suggestion would be to take the task of representing information visually more seriously. You might find inspiration at http://infosthetics.com/
I had never seen the arial narrow, because helvetica neue was spec’d before it. I’m tweaking a bit now.
Still don’t have time for a formal response (is one called for?) but
1. We are tweaking tweaking, tweaking and will continue to do so
2. It was designed by designers, not by IA’s. See link at bottom of page.
3. I respect Khoi’s design, but it did not fit our vision of where the site was going, nor did it match our needs or taste. Nor does this one… yet, but it’s directionally correct. Now if we can get it executionally correct. Sigh.
4. I hate the clip-art on the front also. As new stories come out, we’ll mend that.
5. We are still 100% volunteer. We’ve barely started to make just a tiny bit of money. We could never have paid a designer, though some day hopefully we can.
I think I addressed the problem of a contest in my article, “are we there yet?” but again,. never let anyone else set your design direction.
6. April 3rd never flaked, which is more than I can say for some people.
7. Whine, whine, whine. Shut up and dance. Do you love B&A? Do you love the content? Are you much wiser in matters of design than I? (and I’ll guess you are…) Send me fixes. Send them in photoshop, send them in CSS. Watch them go up.
8. Snarky comments about Arial Narrow is the kind of clubby comment that makes engineers and business folks hate designers. You might want to curb that in a bit.
So, to sum up
* You complain, you provide fix, we put it live.
* You write articles on why arial is the bastard child of helvetica and even helvetica is darn passe (see, I was listening the last ten years) and we’ll publish that.
How’s that for a fair offer?
Christina: much respect for coming on here to share your side. I’m sure you realize everyone is only being so vocal with their opinions because they care so much about the site.
I took a peek at the CSS (using my new friend Firebug), and in regards to my comment about losing half the left sidebar when the browser window is narrower than 960px, it looks like that’s due to elements being positioned left -119px. i think the problem would be solved if you just shifted your “zero” point to the left, and moved corresponding elements +119px to the right instead. that might create other problems, but as it stands, some content is possibly inaccessible for some people.
@christina:
Snarky comments about commenting Arial Narrow cited as the reason that make engineers and business folks *hate* designers is the kind of clubby comments that make designers *laugh* at engineers and business folks…
Anyway, if you want help, state clearly what’s your vision/direction/taste cause, if the khoi’s comps didn’t match them, your new design didn’t communicate them cleary, or not at all (otherwise it would be a successfully design and this discussion would never be existed)
– what you want to communicate / what you don’t want co communicate ?
– could you give us some examples of sites you like and think have the right approach to the problem you want to solve ?
– do you feel some important feature is missing or has been implemented badly on the new design ?
– on the other side, in what you feel the design is already good and don’t need to be emended ?
Design is problem solving, and without knowing the problem is hard to find the solution and, i think, the problems we see on the site right now, are problems of the design itself not the ones you need to address to improve the user experience.
If i design and code all the site under your direction, can i put a 10px Verdana Capital text in the footer stating “arial narrow is for morons?” (just kiddin’).
Sorry for bad english
I assume its a bit of a design flaw when I have NO idea what the side is about. It could be about farming chickens for all I know.
btw, you’ll notice arial narrow is gone– see how well we love and listen?
Sweet mary. When I visit the site it’s a total “WTF? why am I here? What am I looking for? Where am I supposed to go? Where is what and why?”
Boy, is it ever annoying when on every page you are confronted with the popup: “This page uses fonts that needs to be installed. This is usually safe. Do you want to allow these fonts to be downloaded? Y/N” Yes, we’re still using IE6 on PC’s where I work.
Is there no way to set the font you want to use but then default to something already installed if the user doesn’t have it?
Rarely does one page instantly cause so much confusion. What’s the stuff on the left? Why is it all different sizes? What’s with the weird cut-off stock photos? Why are two stories next to each other with one full-width underneath? The actual story view is passable but the front page is a train wreck.
For personal reasons, I feel the need to point out that the person identified as “Adam” above is not me.
Khoi, I visit your site weekly and never comment, but would like to step in and say a few words.
I agree, wholeheartedly, with the comments and suggestions that have been made about the B&A site. This site, after all, has provided all of us with a wealth of information for years – and has done so in a manner that, until now, made sense. What bothers me about the redesign is not so much the obvious visual issues, but the holistic approach to the information architecture and design the firm that executed the redesign undertook. An holistic approach to IA and IDesign can, in fact, be very effective and provide the end users with a wonderful, immersive user experience (think “community” sites and WebAps that prop based on input, point of entry, etc.); however, I don’t believe this approach is appropriate for a site dedicated to IA and IDesign education. And now that the cloud tags are gone and its obvious the items on the left are, in fact, primary navigation elements that disappear once one clicks on a story, the experience is even more convoluted than it was when we were all questioning why cloud tags were incorporated – and whether or not they changed size based on clicks or were just “Web 2.0 pretty”.
Any site that is dedicated to providing education and commentary about all things IA and IDesign should be very succinctly architected and not assume those of us that use(d) the site to garner yet more insight into these things are there meander around for hours on end.
Jesus wept.
I just had a look back at your competition entry – it’s like that SNL sketch where President Al Gore is giving his State of the Union address (“We have way too much gasoline! Gas is down to nineteen cents a gallon and the oil companies are hurting. I know that I am partly to blame, by insisting that cars run on trash”).
I’m not usually one to shed tears over What Might Have Been, but this really hurts.
I really worry about the path this thread is going down–bickering/critiquing in the comments section of a blog with the *promise that those suggestions will be implemented immediately* will surely result in a more broken situation than what stands currently. Design by committee rarely works, even (or especially?) if it’s a group of fired up designers, frustrated at a re-design of a loved publication.
Perhaps the best solution would be for a small design team to come together, establish a trusted, contractual relationship with the B&A team (i.e. their design *will* get used), and produce a design that balances the site’s IA requirements with a clean design.
I’m sure there would be plenty of people on this blog and elsewhere who’d love to help out with this project, myself included.
Bravo to Christina. You have the patience of a saint. While I regrettably have to say I too fall in the camp of “I don’t like the new design”, I still LOVE Boxes and Arrows. It has been the most valued resource for me as an IA. Kudos on keeping watch over a great community-built site and for diplomatically listening to and dealing with the criticisms (the suggested changes were swift, indeed). I look forward to continued improvements and more great content.
Please visit the homepage today. Every day in every way we’re getting better and better. Please send me your list of “fix next.”
Matt, thank you for your intellegent comments. I’m dipping my toe in the comments slowly and carefully. I don’t read this thread very often, because typically it makes me want to go to bed with season three of battlestar galactica. That said, I do listen, I do seriously consider each change, and I make them when Liz and our other staff members agree… and design by committee doesn’t work.
We have been lucky enough that EastMedia has become exactly that small company you suggested we look for, and I hope you’ll agree with my the fixes and tweaks are coming fast and furious. April 3rd, our contest winners, did a fine job, but their day jobs slow them down too much to do the day to day improvements.
BTW, I have a couple more magazines & sister sites for B&A in the planning stages so if you think you’d like to entertain yourself by designing for design’s biggest fan, drop me a note. I’m pretty easy to find.