views:

217

answers:

4

I'm re-writing an app that is a data-entry tool. The existing app is in Access and consists of a form with multiple grids, with each grid containing many columns that requires the user to scroll horizontally in order to view columns.

The current grids on the form are layed-out heirarchically in parent-child relationships. Top grid represents projects, grid below that represents the SKUs in the selected project, the grid below that represents season data (pricing, shipping info, etc) for the selected SKU above.

I'm looking for advice regarding good UI design principles for this kind of app. How do I design a form that gives the user the flexibility to see all columns for the data on the form without needing to scroll so much?

What are some good online resources for UI principles for business apps?

Thanks!

+2  A: 

usability.gov is a great resource for UI design. Also, check out wufoo.com, which is a form hosting website. Their blog is chock-full of interesting research on usability and form design.

bkritzer
Ironically the usability.gov is ugly and not well structured IMO
victor hugo
+1 for wufoo which I had somehow not heard of until now
Chris McCall
I agree that usability.gov is hypocritical in its layout, but its tips are great, and it has a handbook with a lot of relevant information.
bkritzer
+6  A: 

What I've found to be a general rule of thumb that helps to develop aesthetically pleasing user interfaces is the notion of only presenting as much as is needed for any given task.

One of the approaches we can take in designing forms is to focus the user's attention to the task or function at hand by centering controls on a horizontal axis.

Culture, too, plays a major role in the acceptance of the programs we write. For instance, in Western culture, we read from left to right and from top to bottom. Therefore, programs targetted for a Western audience should ideally follow that same design principle.

Here's some basic principles that will help

  • use friendly words and terms over obnoxious and demanding tones: "The file could not be found at the location 'c:\temp'" as opposed to "A required file could not be found please fix the error."
  • single color schemes that apply to the overall look and fonts
  • common control layout on all forms presents
  • follow the design guidelines generally employed for the platform you are targetting

References

Here is some reference material to help you on your own unique path

(Windows) User Experience Interaction Guidelines
(Apple) User experience guidelines
Windows design principles
(Windows) Some design pointers

To summarize, I've found that overwhelming the user with all the information he/she might ever need to perform a simple data entry is not really an ideal way; rather progressively presenting functionality and the tools to do what they want is, to me, a much better alternative.

As always, place youself in the user's position: "Do I like what I see? Does it make me happy to work with it? Is the program too restricted? How can I make task X much easier to perform?"

Mike J
A: 

This site may help you out: http://www.jankoatwarpspeed.com/post/2009/02/18/How-to-deal-with-large-webforms.aspx. Big points there being tabs & collapsible regions.

Additionally, if you don't necesarily need to show all of those columns horizontally, you can present them when the user clicks the entry to view more details. I typically prefer to show the critical information, and then require the user to view more details if they need specifics.

As Mike mentioned, "the notion of only presenting as much as is needed for any given task"

brack
A: 

I would start with a commercial hierarchical grid control, these controls is much more intuitive if not over done, and a grid that allows your users to hide/show columns and save the settings. Most modern grid controls support these features now.

eschneider