Evolution in Data Integration From EII to Big Data
Approaches to integrating data are changing with emergence of cloud computing.
News
The content has been bookmarked!
There was an error bookmarking this content! Please retry.
InfoQ’s First Minor UI Update in 5 years – feedback?
Posted 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!
RelatedVendorContent
A Guide to Branching and Merging Patterns
Five Key Practices to Agile ALM
Mobile and the New Two-Tiered Web Architecture
Using Drools? See what you're missing! Get the Power of Drools with the Assurance of Red Hat
Agile Practices to Improve Project Management Organization (PMO) Effectiveness
page width
by
Andy Jefferson
Posted
Re: page width
by
Floyd Marinescu
Posted
Re: page width
by
Patrick Huizinga
Posted
Re: page width
by
Andy Jefferson
Posted
First thought: header takes up too much space
by
Robert Dean
Posted
simply the best
by
lo vuikeng
Posted
The banner is too high~
by
hao Iron
Posted
Re: The banner is too high~
by
Charles Cherry
Posted
Re: The banner is too high~
by
Rebecca Vereb
Posted
Re: The banner is too high~
by
Ted Young
Posted
Re: The banner is too high~
by
Floyd Marinescu
Posted
Feedback
by
Ajay Bhosale
Posted
Re: Feedback
by
Clint Hill
Posted
Videos sometimes don't work behind corporate firewalls.
by
zqu dlyba
Posted
when will you allow video downloads to desktop
by
martin drenovac
Posted
Some problem patterns
by
Adam Nemeth
Posted
Re: Some problem patterns
by
Alex Popescu
Posted
Re: Some problem patterns
by
Adam Nemeth
Posted
fixed navigation
by
Scott Ballantyne
Posted
Remove Flash if possible
by
Gabriel Kastenbaum
Posted
Re: Remove Flash if possible
by
Floyd Marinescu
Posted
In Firefox the tabs on the right do not display correctly
by
jean-simon Larochelle
Posted
Menu/Submenu
by
bruce b
Posted
Mobile version
by
Emir Causevic
Posted
Re: Mobile version
by
Emmanuel Rousselle
Posted
Layout is fine, but more filtering is needed
by
Ian Hlavats
Posted
Re: Layout is fine, but more filtering is needed
by
Alex Popescu
Posted
Re: Layout is fine, but more filtering is needed
by
Andy Jefferson
Posted
Comments
by
Alan Moraes
Posted
Re: Comments
by
Adam Nemeth
Posted
please move right panel to the left
by
Zhang Gavin
Posted
bookmarks
by
Andrius J
Posted
how do I navigate to older educational content now?
by
Javier Diaz
Posted
Re: how do I navigate to older educational content now?
by
Floyd Marinescu
Posted
bad layout
by
Ho Roc
Posted
MP3 download does not work
by
Jesper Richter-Reichhelm
Posted
Link to older content STILL MISSING
by
Morgan Creighton
Posted
Re: Link to older content STILL MISSING
by
Morgan Creighton
Posted
Re: Link to older content STILL MISSING
by
Morgan Creighton
Posted
Quite Inconsistent
by
Kunal Shah
Posted
-
on Firefox (3.6, Linux) means it now adds scroll bars (never did before), consequently less-usable.
-
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 -
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.
-
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~
-
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. -
I want to be able to download videos.
-
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. -
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 -
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. -
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 -
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. -
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) -
Hi!
Do you plan to remove the presentations in flash in favor to native html5 videos? -
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 -
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. :) -
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.
-
The content is blank and clicking on the tabs does not do anything.
This use to work. -
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.
-
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 -
Totally OK, you can reach me at aadaam at (free mail service run by the market leader of web search)
-
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. -
I would really like to se mobile version of InfoQ.
-
+1
-
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!!
-
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 -
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. -
[...] 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:// -
the right panel moved to the left would be better
-
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. -
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 ;) -
I can't find bookmarks. Where is my bookmarks and how I can bookmark article/presentation?
-
There is no link to !
-
There is no link to !
This has been fixed, sorry!
Floyd -
How can you put the search box at upper right corner instead of top middle? There is a huge while-space.
-
Download of slides and MP3 of presentations on Chrome (@Mac and Vista) does only open an "about:blank" page.
-
Running safari on Mac, despite previous comments, the link to older presentations is still missing.
-
It's visible now. thanks for the fix!
-
No, I misspoke. It's there for the "Presentations" tab, but not for all the other tabs. Argh.
-
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!
40 comments
Watch Thread Reply