PDA

View Full Version : UI Opinion requested



sweiner
2 Nov 2009, 8:35 AM
Hi,

Here is the background:
I need to build an Application (legal document) page that includes many,many sections. In each section the user is requested to make a choice or explicitly select none. They must choose one or more items from each section before submitting the page (it is pretty long). Once they have chosen something in each section they can submit the entire application for processing.

Here is my question:
I was wondering what recommendations people had for the "best" UI for this type of application. I was thinking of using an accordian layout but I want it to be intuitive what happens as they make choices so there is a sense of workflow. On the other hand I want them to be able to go back and make changes too. The accordian idea was to address the sheer length of the form. I also thought about tabs but there would be a lot of tabs and I still struggle with how to visually "force" them to the next section without it being disorienting.

Thanks!

aw1zard2
2 Nov 2009, 10:00 AM
Something like this I used the Card Layout (Wizard).

http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html (http://www.extjs.com/forum/../deploy/dev/examples/layout-browser/layout-browser.html)

I added a cancel button that changed the text to finish when it was on the last page and once all fields I had were validated. It changed the next button text to cancel so I kept only 3 buttons on the bottom at a time.

Each time the next or previous button was clicked if any field was dirty I did an ajax save on that page of data to a db before going to the next page. If nothing changed then it didn't send the save request. Once the finish button was clicked it saved if needed and went to the next screen.

I use this for registration pages with a lot of data needed, etc.

Hope this is helpful.
:)

Animal
2 Nov 2009, 11:00 AM
A big document can be a challenge for users, and therefore offers a challenge to the developer.

One thing that I'm sure the users will insist on is that it be keyboard navigable.

This means that you might have to manage focus cleverly.

I like the idea of an accordion type arrangement, but I'd probably just go for each "section" being just a collapsible Panel (or Fieldset) configured anchor: '-21'. This is so that they can open multiple ones if they want.

However you create the accordion effect, it means that tab-based focussing won't work because a collapsed Panel (or Fieldset) uses display:none to hide its body, and that will remove its items from focussing. You will have to use the enclosing form's items collection http://www.extjs.com/deploy/dev/docs/?class=Ext.form.BasicForm&member=items and manage where you are going forwards and backwards, and ensure the Panel of any newly focussed input is expanded.

You might find the "ensureVisible" method here useful: http://www.extjs.com/forum/showthread.php?p=395475#post395475

Just an idea. But remember free advice worth every penny!