The Old Joel on Software Forum: Part 3 (of 5)

Webapp GUI design

Hey.
Im working on a webapplication and I need ideas for how to make a good usable GUI for it.
The common hierachical -click your way downwards- or search engine like structures does not work.

The problem mainly is that there are about 20 tables involved and all of them should be available for add/update/delete actions, but they do not group in any natural fashion.

My best bet at the moment is to just chuck all those add/update/delete-links in there and then educate the users on how the tables are related. But thats very close to what I cosider a failed gui design.

Had this been a desktop app, I would have used a treeview and a typical "properties" subform where the user could go in and edit the values for each node. But doing something like this in a webapp would just result in a whole lot of jumping back and forth...

Im not sure I explained the problem to well, but what Im looking for is basicly examples of good web GUIs for apps where the datamodel doesnt map naturally to web pages.

Eric DeBois
Wednesday, November 19, 2003

there are a lot of web apps out there that use CSS and/or javascript to great effect in presenting data in all sorts of views, be it tree-style, help/popup, expand/collapse... and all without having any further server hits. Pick the presentation you want and search google.

There are an awful lot out there.

The one that I can remember right off the bat is brainjar.com. There is a positively nifty menubar widget there. And I don't have the page up yet, but I'm currently tweaking a tooltip help script to work from an image map... I believe the search I did was for "imagemap" and "tooltip".

Good luck.

van pelt
Thursday, November 20, 2003

Don't Make Me Think: http://www.amazon.com/exec/obidos/tg/detail/-/0789723107/103-3684273-6047016?v=glance

anon
Thursday, November 20, 2003

Don't think in terms of the tables.

Think in terms of the tasks the user needs to do.

Users don't want to place a record in the order table. They want to get flowers mailed to their grandmothers.

Chris Tavares
Thursday, November 20, 2003

This link on inductive UI design might help:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/iuiguidelines.asp

anon
Thursday, November 20, 2003

Anon > good link, but not exactly what I need.

I should have been more specific.. The app is a sort of inventory managing app so the functionality is basicly read, write, search and update the database.

The problem is the amount of data and its interconectedness.

Like: Widget A is of type 2 which belongs in category Z and X. Widget A was provided by Supplier A and located at Location Zulu.... and so on.

All in all there is 20 tables that the user needs to be able to add/update/delete in.

Hmm, its really hard to explain this problem. How ever I arragne the pages and links, I cant escape the number of form fields required...so thats not it.

But how ever I arrange it, I also end up with a GUI where the user must jump back and forth and do things in a particular unintuitive order.

Umm.. come to think of it.. maybe a couple of wizards would do the trick..

Eric DeBois
Thursday, November 20, 2003

One more suggestion that again might be something that won't help you. But you never know. . .

Cooldev has a nice javascript tree component and other menu components that might help organize your UI:

http://javascript.cooldev.com/

Herbert Sitz
Thursday, November 20, 2003

"Complex problems have simple, straightforward, easy-to-understand wrong answers"

So wouldn't a complex system have a simple, straightforward, easy-to-understand wrong solution?

Nonetheless, maybe you should make it widget-centric AND supplier-centric AND location centric etc etc. Give the users the possibilities to look at the data any way they want.

e.g. I'm working with Widget A and I want to change/add suppliers and move it to location X.

e.g. I want to update the list of widgets that Supplier B suppliers at delete an old location.

There will be some redundancy but it is good useful redundancy, sortof like the system being able to support multiple similar workflows. You following me?

Gavin
Friday, November 21, 2003