UI suggestions for dynamic lists, dynamic controls and immediate editing.

[Steve Workings]

I'm usually pretty inventive, but haven't figured out how to build something my customer wants.

This is basically an inspection application, mostly used on users' personal phones as a web application. It has lots of different types of inspections (List1) that generate various lists of questions to List2 that need a response. The response controls are variable - they can be RadioButton, Choice List, Checkbox, Switch and a couple others. All of this is data-driven, from the question to the type of control that is needed.

Now, this doesn't *have* to be done as Lists but as they're the basic building block for mobile web apps, it seems appropriate. So, see this that my customer has as model:

IMG_0771.PNG

I'm not sure how to achieve this. Lists aren't editable and while you can provide, say, a dynamic checkbox image with click events, it's not enough -- it doesn't accommodate the switch control for instance.

I don't yet see a role for the Viewbox control here but it could be because I'm not imaginative enough yet.

So the logical choice seems to be the Form View control with editors. But think about this: If an inspection list has, say, 12 items that could all be responded to with a switch control, the Form View control with it's editors doesn't work well. The user would have to click on the question, which then shows the editor, then go change the switch. That's two actions instead of one if the above model can be implemented somehow. This quickly gets clumsy if an inspection has 50 or 60 different questions to be answered.

I have modeled the above-described Form View with editors for my client; the model was rejected with the request repeated that it look more like the image shown here and with the simple process of being able to just make once choice right after another without having to do the two-step, e.g. choose the question, make the choice, repeat all day long.

Some answer types can be done well with the two-step - something like an answer that requires text input. They're OK with that. But given the large number of logical checkbox controls and Switch controls we could use, I'm sill looking for a way to do this.

So, any suggestions?

[Ted Giles]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Steve, I cannot really help with the AS construct side of Mobile, as I use a different product.
The one I use converts Tick Boxes (which are On or Off) into the controls you want to show.
AS.JPG
Can you explain a bit more about the "Choose the Question, Make the Choice" bit. Not sure I understand completely.
In my Mobile app, I have many items which may or may not need a legal compliance, so the user just swipes the control and saves if Mobile (Tablet/Phone) or Ticks the box when on the Web.

[lgrupido]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Steve,

Though it is not technically for mobile use - an editable repeating section would actually work in a case like this.

The secret is to keep the repeating section small enough (width) so that it will fit in any mobile device that you might use (within reason).

So long as the repeating section isn't going too wide, you can have an editable list that will schroll up and down and it won't have any issues. (I have a couple I use this way, they work fine.)

Alternatively, you could use a list control, but I think that you would then define a clicked event on the control.

If the user clicks something on the list, you toggle the switch and refresh the list row to show the "toggled" value. You would simply have two pictures that you show in that row, one toggled left and one toggled right.

Would something like that work?

[Steve Workings]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

I did this with a repeating section in version 1 Larry. The usability on many mobile devices was terrible. Part of the issue is that each row had 7 controls - but with only one exposed for the particular response type required.

Here's a small piece with three different controls:

Snap2.png

[Pat Bremkamp]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Steve Workings was using the repeating section approach and was having some issues with it. Don't know if he ever got those resolved.

[Pat Bremkamp]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

This is a good use case for editors that include the input control. So, if it is a textbox control, the editor you call already includes the textbox. For checkboxes, the checkbox is in the editor. I've asked Selwyn and Dan about this, but they never understood what I wanted. Maybe someone else can explain it better than I.

[Pat Bremkamp]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Could it be done by having a separate panel card for each type of control that includes the control and the editor? Programmatically, you call the panel card and put in the question. Then when you slide it out, you capture the answer and "save it away".

[lgrupido]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

My repeating section had only 1 control type and it was the same all the way down. I can see how 7 controls per row would slow things down. But I also think that will slow things down pretty much no matter what control types you are using.

I would note that your customer's picture does not have any editable controls on it - (like the text box in your picture.). So I still think a list might work as I described. With a freeform list row, you should be able to duplicate that google picture. Then, depending on which row is clicked, you can have different actions that either toggle yes/no controls with the click of a list row or open up a container that allows you to edit the data for that row.

Unless I'm completely missing the point ...

[Steve Workings]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

This is a good use case for editors that include the input control. So, if it is a textbox control, the editor you call already includes the textbox. For checkboxes, the checkbox is in the editor. I've asked Selwyn and Dan about this, but they never understood what I wanted. Maybe someone else can explain it better than I.

I have this working quite well Pat, with 7 different edit controls, based on the type of response needed.

But, the default behavior requires three steps for the user for each question: select the question, set the response, click Submit. I can get this down to two steps by putting the Submit behavior into the control's onChange event. But, still clunky.

I, too, discussed this with Selwyn but he responded that the three (or maybe two) step approach would be just fine. My customer is rejecting that despite my modelling it for them to see how it works.

[Steve Workings]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Larry - your suggestion of a freeform list row is something I've not tried - I will look into that.

[Ted Giles]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Questions
Do all Questions have one of 7 possible responses?
Are the Questions based on Work flow or are the Questions selected by the user, ie random?
Are the answers based on logical flow, or random?
Do you have Voice Recognition availability?

[Steve Workings]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Do all Questions have one of 7 possible responses?
Yes.

Are the Questions based on Work flow or are the Questions selected by the user, ie random?
Lists of questions are presented to the user in logical groups in an order specified by the administrator. They can, if they want, choose them at random. Generally, I think users go right down the list though.

Are the answers based on logical flow, or random?
Logical flow. For instance, the pool chemical readings will present the list of water quality parameters that need values. Another list of "Supplies Needed" has a few questions that all fall under that group.

Do you have Voice Recognition availability?
Yes, and it works, and it's device-dependent, and while it works, we get complaints that it doesn't work well when someone is in a room full of machinery, for instance. Nothing we can do about that of course.

[lgrupido]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

If they are going to answer them in order, (and they should) How about this:

have an opening screen (a list) where it shows all the questions/answers in whatever format you want.

Then, create a panel card system that flows left to right, with a question/answer on each panel.

When someone finishes answering the question on panel 1, it moves to panel 2 and so on. You could have buttons to go back to the answer list, next and prev.

On the answer list you could even show what percentage of the total questions have been answered.

One thing I would note: I don't think the image your customer is going off of is from a browser - it's part of the phone system, isn't it? Not to say that you can't do something like that in a browser, but the person who programmed that screen was dealing with a single set of options, not 7 random ones that could pop up at any time with any particular number of questions. That creates overhead, which you are experiencing in trying to recreate it ...

[Ted Giles]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Larry, you are correct about refresh overhead, unless it can be handled in the device Native Shell using Sqlite or similar.
I'll have a think how I'd do this in my current system as the logic should be transportable even if the code isn't. (C# and Java so it might be)

[Steve Workings]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

From Larry:
If they are going to answer them in order, (and they should) How about this:

Inventive, but I don't think that's close enough to the customers' specs. And they'll only be able to see the answer to the currently selected question.

You're right - the picture I show is from an iPhone. There's gotta be some decent way to do this. In fact, there better be....