2 replaced http://stackoverflow.com/ with https://stackoverflow.com/
source | link

There are multiple ways to approach your problem. But first of all, I'll give advice that cannot be given often enough:

Get rid of clutter first. Especially in a "data intensive" environment.

The rule of thumb here is: If you have more than about 7 columns you're doing it wrong. Look at every column, find out if you actually need it and come up with alternative ways to convey the same information. An application that essentially looks like "Excel in a Browser" is a bad application.

Having said that, the following are ways of approaching your task in a browser environment:

  • Master / Detail "frame-like" interfaces, arranged horizontally or vertically. The downside of this is a lot of clutter on screen as the user will only focus on one half at any point in time, but both will stay visible. You might want to auto-hide the detail pane when the list is in focus / no item is selected. See this review that allows a visual comparison of a horizontally divided email app with a vertical one. And please don't actually use frames, as they are evilevil.
  • Tooltips, displaying more information when you mouseover something. This is appropriate for smaller pieces of information that you decide to hide initially. Hovering over a set of stars to find out if something is rated 4.7 out of 5 is often good UI because most users won't care and stars are easier to grasp than numbers. Please note that with the advent of touch devices, "hovering" over something is not always possible - you may need additional ways of retrieving that information (e.g. clicking it).
  • New Tabs / New Windows In short: don't. We're not in 2000 anymore - throwing a new window into the users face is invasive, and new tabs break the flow of an application.
  • Popups / Modal dialogs (JavaScript / Ajax) Popups nowadays are a lot less scary than their pre-web-2.0 counterparts. While they work similarly, doing the same in JavaScript lets the user stay on the same page, look at lots of details (possibly even with its own scrollbar) and come back to the list. Popups are used a lot for images but work for forms and text as well. Please note that stacking popups (invoking another popup from within a popup) is usually a bad idea.
  • Progressive disclosure This is something only very few UI designers really look at, but unrightfully so. Older examples of this concept are tree views and "more" buttons that let you stay in the same context but reveal more information. Newer variants often feature a "caret" to show more information is available, but other variants of the same idea exist as well (Even though it primarily focuses on desktop UI, this is a good starting point for further research. In your application it might be possible to "expand" an item from its minimal list view to a full size detail view without moving it out of its current position. This might even allow the user to compare details of more than one item if that actually fits on the screen.

I think the above covers the main options available to you. I'm afraid there is no universal "best" approach though, you'll have to weigh pros and cons with respect to your application.

There are multiple ways to approach your problem. But first of all, I'll give advice that cannot be given often enough:

Get rid of clutter first. Especially in a "data intensive" environment.

The rule of thumb here is: If you have more than about 7 columns you're doing it wrong. Look at every column, find out if you actually need it and come up with alternative ways to convey the same information. An application that essentially looks like "Excel in a Browser" is a bad application.

Having said that, the following are ways of approaching your task in a browser environment:

  • Master / Detail "frame-like" interfaces, arranged horizontally or vertically. The downside of this is a lot of clutter on screen as the user will only focus on one half at any point in time, but both will stay visible. You might want to auto-hide the detail pane when the list is in focus / no item is selected. See this review that allows a visual comparison of a horizontally divided email app with a vertical one. And please don't actually use frames, as they are evil.
  • Tooltips, displaying more information when you mouseover something. This is appropriate for smaller pieces of information that you decide to hide initially. Hovering over a set of stars to find out if something is rated 4.7 out of 5 is often good UI because most users won't care and stars are easier to grasp than numbers. Please note that with the advent of touch devices, "hovering" over something is not always possible - you may need additional ways of retrieving that information (e.g. clicking it).
  • New Tabs / New Windows In short: don't. We're not in 2000 anymore - throwing a new window into the users face is invasive, and new tabs break the flow of an application.
  • Popups / Modal dialogs (JavaScript / Ajax) Popups nowadays are a lot less scary than their pre-web-2.0 counterparts. While they work similarly, doing the same in JavaScript lets the user stay on the same page, look at lots of details (possibly even with its own scrollbar) and come back to the list. Popups are used a lot for images but work for forms and text as well. Please note that stacking popups (invoking another popup from within a popup) is usually a bad idea.
  • Progressive disclosure This is something only very few UI designers really look at, but unrightfully so. Older examples of this concept are tree views and "more" buttons that let you stay in the same context but reveal more information. Newer variants often feature a "caret" to show more information is available, but other variants of the same idea exist as well (Even though it primarily focuses on desktop UI, this is a good starting point for further research. In your application it might be possible to "expand" an item from its minimal list view to a full size detail view without moving it out of its current position. This might even allow the user to compare details of more than one item if that actually fits on the screen.

I think the above covers the main options available to you. I'm afraid there is no universal "best" approach though, you'll have to weigh pros and cons with respect to your application.

There are multiple ways to approach your problem. But first of all, I'll give advice that cannot be given often enough:

Get rid of clutter first. Especially in a "data intensive" environment.

The rule of thumb here is: If you have more than about 7 columns you're doing it wrong. Look at every column, find out if you actually need it and come up with alternative ways to convey the same information. An application that essentially looks like "Excel in a Browser" is a bad application.

Having said that, the following are ways of approaching your task in a browser environment:

  • Master / Detail "frame-like" interfaces, arranged horizontally or vertically. The downside of this is a lot of clutter on screen as the user will only focus on one half at any point in time, but both will stay visible. You might want to auto-hide the detail pane when the list is in focus / no item is selected. See this review that allows a visual comparison of a horizontally divided email app with a vertical one. And please don't actually use frames, as they are evil.
  • Tooltips, displaying more information when you mouseover something. This is appropriate for smaller pieces of information that you decide to hide initially. Hovering over a set of stars to find out if something is rated 4.7 out of 5 is often good UI because most users won't care and stars are easier to grasp than numbers. Please note that with the advent of touch devices, "hovering" over something is not always possible - you may need additional ways of retrieving that information (e.g. clicking it).
  • New Tabs / New Windows In short: don't. We're not in 2000 anymore - throwing a new window into the users face is invasive, and new tabs break the flow of an application.
  • Popups / Modal dialogs (JavaScript / Ajax) Popups nowadays are a lot less scary than their pre-web-2.0 counterparts. While they work similarly, doing the same in JavaScript lets the user stay on the same page, look at lots of details (possibly even with its own scrollbar) and come back to the list. Popups are used a lot for images but work for forms and text as well. Please note that stacking popups (invoking another popup from within a popup) is usually a bad idea.
  • Progressive disclosure This is something only very few UI designers really look at, but unrightfully so. Older examples of this concept are tree views and "more" buttons that let you stay in the same context but reveal more information. Newer variants often feature a "caret" to show more information is available, but other variants of the same idea exist as well (Even though it primarily focuses on desktop UI, this is a good starting point for further research. In your application it might be possible to "expand" an item from its minimal list view to a full size detail view without moving it out of its current position. This might even allow the user to compare details of more than one item if that actually fits on the screen.

I think the above covers the main options available to you. I'm afraid there is no universal "best" approach though, you'll have to weigh pros and cons with respect to your application.

1
source | link

There are multiple ways to approach your problem. But first of all, I'll give advice that cannot be given often enough:

Get rid of clutter first. Especially in a "data intensive" environment.

The rule of thumb here is: If you have more than about 7 columns you're doing it wrong. Look at every column, find out if you actually need it and come up with alternative ways to convey the same information. An application that essentially looks like "Excel in a Browser" is a bad application.

Having said that, the following are ways of approaching your task in a browser environment:

  • Master / Detail "frame-like" interfaces, arranged horizontally or vertically. The downside of this is a lot of clutter on screen as the user will only focus on one half at any point in time, but both will stay visible. You might want to auto-hide the detail pane when the list is in focus / no item is selected. See this review that allows a visual comparison of a horizontally divided email app with a vertical one. And please don't actually use frames, as they are evil.
  • Tooltips, displaying more information when you mouseover something. This is appropriate for smaller pieces of information that you decide to hide initially. Hovering over a set of stars to find out if something is rated 4.7 out of 5 is often good UI because most users won't care and stars are easier to grasp than numbers. Please note that with the advent of touch devices, "hovering" over something is not always possible - you may need additional ways of retrieving that information (e.g. clicking it).
  • New Tabs / New Windows In short: don't. We're not in 2000 anymore - throwing a new window into the users face is invasive, and new tabs break the flow of an application.
  • Popups / Modal dialogs (JavaScript / Ajax) Popups nowadays are a lot less scary than their pre-web-2.0 counterparts. While they work similarly, doing the same in JavaScript lets the user stay on the same page, look at lots of details (possibly even with its own scrollbar) and come back to the list. Popups are used a lot for images but work for forms and text as well. Please note that stacking popups (invoking another popup from within a popup) is usually a bad idea.
  • Progressive disclosure This is something only very few UI designers really look at, but unrightfully so. Older examples of this concept are tree views and "more" buttons that let you stay in the same context but reveal more information. Newer variants often feature a "caret" to show more information is available, but other variants of the same idea exist as well (Even though it primarily focuses on desktop UI, this is a good starting point for further research. In your application it might be possible to "expand" an item from its minimal list view to a full size detail view without moving it out of its current position. This might even allow the user to compare details of more than one item if that actually fits on the screen.

I think the above covers the main options available to you. I'm afraid there is no universal "best" approach though, you'll have to weigh pros and cons with respect to your application.