InfoQ’s First Minor UI Update in 5 years – feedback?

by Floyd Marinescu on Aug 29, 2011 |

On behalf of the InfoQ team, we are happy to announce our first minor UI re-launch in our 5 year history. This re-launch is the first in a set of incremental changes that will end with a fresh new look for InfoQ.com later this year. We've chosen this approach to give us a chance to get your feedback at each step, working towards a final look and feel that combines both our ideas with your feedback.

The tl;dr of this first update is that while maintaining the same look and feel, we have added more functionality into the header and footer while removing the left bar. For the longer version keep reading. Or you can skip to the end to  give us feedback.

What's new

The changes in this redesign, from biggest to smallest include:

  • More functional header instead of left bar.  We've moved most of the functionality from the left bar and into the header. which has expanded a bit.  With no left bar, this allows more horizontal space for our content, and makes it easier to watch videos  and read articles, and also access menu items at the top.
  • More timely topics in the header.  In the grey bar at the top we will now be promoting and rotating in and out hot topics that you’re interested in hearing about.   We received a lot of criticism for why we’re not covering <insert topic X> over the years even if we were covering them often, simply because people didn’t see these topics in our menu structure. 
  • Focus on you vs. our internal taxonomies. Along the lines of the previous point, for the last 5 years, InfoQ  listed ‘Java, .NET, Ruby, SOA, Agile, Architecture’ as our main site sections, which we called “communities”.    In addition to rotating in timely trend topics, we’ve also chosen some more timeless high-level site section names that reflect the wider interests of the audiences we serve including Development,  Architecture & Design, Process and Practices, etc.  We are also re-organizing our internal editorial teams around these higher level audience interests, allowing more diverse coverage.  We can finally cover PHP and Mobile more (for example),  as additional topics in our ‘Development’ section.  
  • Expanded footer.  In our new site footer, you have another way to see what the latest content is in each of our site sections and access our menu structure.
  • And yes, we have already been supporting iPad and iPhones on all of our new videos since early July, which was one of our most requested features!

What's next

This was the first increment in a set of milestones we’re pursuing; with a homepage re-launch set for the end. The next milestones we’ll be putting out over the next few months include:

  • A reskin.  Much has changed in UI design and our actual look and feel  (font, spacing, borders, etc) will get a refresh.
  • Creating index pages to browse by content type.  Right now you can only browse by topic, not by type.  There isn’t a nice way to go and navigate all of our conference presentations in a youtube-like fashion for example.
  • Related content & hot content widgets.  When you read an article, there is no way to find other related content, or keep hot content around longer before it disappears off the homepage.
  • Search Usability.  Many of you have complained that our search results page is not very usable.
  • Homepage relaunch.  Left to the end, as this is often the change that causes the most upset. This should give us time to get plenty of feedback and by then have the community accustomed to seeing changes on the site so we don’t repeat a user backlash as on digg.com.

Doing a UI re-launch for an existing established site is no easy feat. Countless hours of meetings, prior failed attempts, managing differing opinions, and making tradeoffs are involved. For example, with this launch, two of my own personal  favorite differentiating features had to go, including having no site header and having the personalization checkboxes right in the menu structure. 

This has been a journey for all of us!  I’d like to thank our CTO Alex Popescu for leading the project, our Dev team and our artist Bistrian Iosip for a lot of hard work, and our editors and the rest of community for all their input!

We'd love to hear your feedback, please feel free to vote in the poll below, comment in this thread on the current design or our next milestone plans, or send more detailed / personal feedback to this special email feedback-ui AT infoq.com!

Related Editorial

Hello stranger!

You need to Register an InfoQ account or to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

page width by Andy Jefferson

on Firefox (3.6, Linux) means it now adds scroll bars (never did before), consequently less-usable.

Re: page width by Floyd Marinescu

on Firefox (3.6, Linux) means it now adds scroll bars (never did before), consequently less-usable.
Hi Andy, this should be happening as if anything we have now added MORE horizontal space so there should not be scroll bars. Can you send a more detailed email to bugs AT infoq.com and a screen shot?

Floyd

First thought: header takes up too much space by Robert Dean

On my laptop, the header takes up roughly 20% of the vertical distance above the fold. In the era of widescreens, doing anything that results in more vertical space consumption by "chrome" is, IMO, detrimental to user experience.

simply the best by lo vuikeng

Great work InfoQ! Good job to the UI team! I don't normally see face-lift transition of UI getting done so smoothly and smartly before. You are simply the best!

The banner is too high~ by hao Iron

The banner is too high~

Feedback by Ajay Bhosale

1) Getting rid of left side column - Good
2) Header takes lots of space, and somehow looks unstructured...
3) The Top Navigation and its mapping to sub navigation is not easy to discover, provide visual clue.

Videos sometimes don't work behind corporate firewalls. by zqu dlyba

I want to be able to download videos.

when will you allow video downloads to desktop by martin drenovac

Is there a means to download the videos to desktop for later viewing.
I don't often get 40 mins to sit down and watch from front to end, so i like to download, watch 10 - 15 mins when I can.
All other forums that I use have a video download feature, & rather than rip your video's I'd prefer to see a helpful link.

Some problem patterns by Adam Nemeth

Would be hard to judge a design without knowing what problems does it address. Yet allow me to write a few problems visible based on how the site looks like, some insight what did it mean on webdevelopment in general and what's the typical cause/solution for these symptoms.

Problem: Personal settings, sign out in footer doesn't make sense [yet of course they need a lot of space]

I'm pretty sure you're aware that footers are the least visited portions of a site, so you not only moved elements there, but essentially throwed them out. Generally, footer is reserved - and therefore expected - to contain static(!) information about the site, like impressum, contact info, etc.

However, it's kind of a setting, and your site uses context popups extensively since years, so

Recommendation: Put a settings icon in the top bar, and open this settings pane as you do forum texts.

Problem: Noone looks at the footer, even if there's an ad for the next QCon, or events in general

It's absolutely for you to decide how important is for the community, what I can guarantee to you that it won't be seen if it's down there as there's nothing interesting in the other 99.9999% of websites there, so there shouldn't be anything interesting here.

Recommendation: provide at least a ticker somewhere above-the-fold for the next QCon, and perhaps an events menupoint, or add the banner into the Holy Right Column

Examples in the wild: MacWorld (www.macworldexpo.com/)

Problem: the secondary menu is much more highlighted than the primary one, which is almost invisible

I think it was intentional: we shall face it, architecture and software design is not interesting in the current atmosphere, yet still everything could be sold with an Agile sticker on it, and all the programmers have to learn Javascript / HTML(5), and some analysts say that Mobile is the future, so far that HP quit from PC market despite being the market leader.

Recommendation: stand up for what you believe in!

Don't create a space-eating header just because you're shy to accept what you feel, it's not worth it. Perhaps fork, if people don't agree in the editorial team. Look at your own statistics: which articles were read by most? Could you create 2-3 distinct groups of common interest parties?

(You'll hate me for this part, I know)

Problem: primary menu is ambigous

Isn't development based on processes & practices? Isn't Enterprise Architecture Architecture? Can't architects use DSLs? Why were you only able to find 2-word names for those? Why couldn't you stick to one word, so it would better stand out? Why isn't it a taxonomy, eg, every subcategory in exactly one category?

We could go on:

Problem: you can't go back to the original secondary menu with hot topics
Problem: there's no visual connection between the primary and the secondary menu

These all stem from one cause I guess. I'm pretty sure that you had reeally long and hard arguments, fights, perhaps human connections got weary in the process, and you decided to make a compromise.

I'm sorry but I came from the modeling world: compromises are sometimes not as good as perceived, this one simply shouts "hey, I'm not good, I'm temporary until we can agree"

It seems that after you've did this compromise on paper, you started to design a header (and a team) around it, yet you always had to circumvent it, like a dead horse, and most of your time was spent on how to hack around this compromise. But exactly that it is: a hack, a dead horse, a bad compromise.

I'm not sure if you have the nerve to sit down, accept this menu as something which doesn't work (the fact that it was released tells me perhaps you don't), and come up with a better one.

Of course, there are solutions:
- Make the primary menu elements bold and give them a strong background or frame
- Create a "Trending Topics" primary menu, highlighted
- Make the primary menu as tab-like structures, with the first one open
- Create an expandable "big menu", like www.microsoft.com, where main categories are only to group points

But this is not what you need I guess: you need to sit down and re-evaluate who you are. And that's the hardest part, I know.

All the bests, and I know it's hard to keep up with a fast-changing world

Re: Some problem patterns by Alex Popescu

Hi Adam,

Thanks a lot for your detailed analysis. You gave me a lot to think about.

Alex://

PS: I was wondering if you'd be OK to follow up offline (email) on your suggestions.

fixed navigation by Scott Ballantyne

it would be great if the grey navigation menu would become fixed after you scroll passed it so that you could use it after you have scrolled down the page. also, if you do that could you put the search into the navigation bar. maybe something like techcrunch is doing not where the large header converts to a small navigational menu. that looks really slick.

glad you guys are trying something new.

regards,
scott

Re: The banner is too high~ by Charles Cherry

I agree that the banner takes up too much space. Also, the fluid width on the main content section is counter-productive for reading text. Beyond a certain width, lines of text become very difficult to read. As quoted on the MaxDesign website:

The ideal line length for text layout is based on the physiology of the human eye… At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line.

Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.

Web Style Guide – Basic Design Principles for Creating Website
Patrick J. Lynch and Sarah Horton
2nd edition, page 97.

Re: The banner is too high~ by Rebecca Vereb

I couldn't agree more with both of Charles Cherry's comments:
1. the banner is too big
2. the text is too wide for me on my work computer (24 inch monitor)

Remove Flash if possible by Gabriel Kastenbaum

Hi!
Do you plan to remove the presentations in flash in favor to native html5 videos?

Re: Remove Flash if possible by Floyd Marinescu

Hi!Do you plan to remove the presentations in flash in favor to native html5 videos?
Hi Gabriel, indeed we have been releasing all new videos in mp4 format (for iphone/ipad compatibility) since early July.

Floyd

Re: The banner is too high~ by Floyd Marinescu

Also, the fluid width on the main content section is counter-productive for reading text. Beyond a certain width, lines of text become very difficult to read. As quoted on the MaxDesign website:
Hi Charles, as a former developer myself I had been operating under the premise that developers with big monitors used to working in IDE's would appreciate fully width expandable sites, and that all those mainstream news sites with fixed widths are for non-techies in smaller resolutions. Certainly growing up with /. probably coloured this.

It's actually quite difficult to keep the site beautiful without fixed widths, so your comment and Rebecca's affirmation are helpful for us to get over our nerd anxiety of moving towards fixed width in a future launch. :)

Re: Feedback by Clint Hill

to add to #3 - the right to left movement to get from Top to Sub mapping is too much. Even on a smaller width viewport.

In Firefox the tabs on the right do not display correctly by jean-simon Larochelle

The content is blank and clicking on the tabs does not do anything.
This use to work.

Menu/Submenu by bruce b

Why is the main menu flushed to the right and the sub-menu flushed left? This forces the user to have to slide the mouse carefully down the triangle and to the left on a narrow horizontal band, or else those options disappear suddenly. Hover effects are annoying enough, but the distance between the main and sub elements need to be minimized.

Re: The banner is too high~ by Ted Young

Same here. I have _more_ than enough horizontal space, so would rather give up a few hundred pixels on the left or right in order to gain pixels at the top/bottom.

;ted

Re: Some problem patterns by Adam Nemeth

Totally OK, you can reach me at aadaam at (free mail service run by the market leader of web search)

Re: page width by Patrick Huizinga

I have the same/similar problem.

I have my screens in portrait mode, so their width is only 1024 pixels. In both Firefox 6 and IE 8 (on Windows Vista) there appears a horizontal scroll bar, even though the window is maximized.

It seems the new design needs a minimum width of about 1050 pixels.

Mobile version by Emir Causevic

I would really like to se mobile version of InfoQ.

Re: Mobile version by Emmanuel Rousselle

+1

Re: page width by Andy Jefferson

The one from a few days ago was even more ... so slight improvement, but still causing a horizontal scroll bar. Seems (to me) that imposing a min size of 1000+ is simply inviting trouble. Taking the left bar out of the design ought to have caused the minimum to go down, not up!!

Layout is fine, but more filtering is needed by Ian Hlavats

Hey guys,

I like the new site layout, but I'm disappointed by the loss of the filtering ability.

We should be able to exclude news items related to a particular language, technology or community we are not following...

There is too much information overload on the Internet, and in my view the signal-to-noise ratio of this site was better before the update.

Filtering by community was a good feature and I'm sad to see it go.

Ian

Comments by Alan Moraes

Hello, I loved the left pane removal!

I would like to suggest to update the commenting system as well, because it's hard for me to follow the threads.

Re: Layout is fine, but more filtering is needed by Alex Popescu

[...] but I'm disappointed by the loss of the filtering ability.

We should be able to exclude news items related to a particular language, technology or community we are not following...

There is too much information overload on the Internet, and in my view the signal-to-noise ratio of this site was better before the update.

Filtering by community was a good feature and I'm sad to see it go.



Filtering is still available for both registered users and unregistered users. For registered users the main filtering criteria are in the top widget under your name. While navigating the site you can continue to exclude topics that are of no interest to you.

A://

please move right panel to the left by Jakuri Gavin

the right panel moved to the left would be better

Re: Layout is fine, but more filtering is needed by Andy Jefferson

the main filtering criteria are in the top widget under your name.

But if I exclude say "Operations and Infrastructure" from "default sections", the heading category still appears.

Re: Comments by Adam Nemeth

Good idea, however, the comment system is actually not that bad as it seems.

My problem is that the reply notification failed me nowadays, and also that you can't really follow persons in the commenting system (though that for me, being the one-man conservative party of development at infoq, would be really disadvantageous ;), yet of course it could use some updates.

Perhaps ordering could use a bit better layout system, and perhaps some non-email based notification system would be cool as well, we'll see... the subject vs thread solution, I came to the conclusion that it actually works quite well.

Would you please tell us how do you use the comment system, what are your user stories, or rather, use cases? (Sorry, remember, I'm the one-man conservative party ;)

bookmarks by Andrius J

I can't find bookmarks. Where is my bookmarks and how I can bookmark article/presentation?

how do I navigate to older educational content now? by Javier Diaz

There is no link to !

Re: how do I navigate to older educational content now? by Floyd Marinescu

There is no link to !
This has been fixed, sorry!

Floyd

bad layout by Ho Roc

How can you put the search box at upper right corner instead of top middle? There is a huge while-space.

MP3 download does not work by Jesper Richter-Reichhelm

Download of slides and MP3 of presentations on Chrome (@Mac and Vista) does only open an "about:blank" page.

Link to older content STILL MISSING by Morgan Creighton

Running safari on Mac, despite previous comments, the link to older presentations is still missing.

Re: Link to older content STILL MISSING by Morgan Creighton

It's visible now. thanks for the fix!

Re: Link to older content STILL MISSING by Morgan Creighton

No, I misspoke. It's there for the "Presentations" tab, but not for all the other tabs. Argh.

Quite Inconsistent by Kunal Shah

There's a link to older contents (Older >) under Presentations, Interviews and Books; but All and Articles don't have that link. It's not easy to as it was!

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

40 comments

Educational Content

General Feedback
Bugs
Advertising
Editorial
 InfoQ.com and all content copyright © 2006-2013 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy