Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 1 down vote favorite

I am writing a form that has the basic structure of an outline.

The basic structure is like this:

enter image description here

I understand how to do this if the user has javascript enabled, but I am not sure what the best way to that the interface should work as a progressive enhancement if javascript is not enabled on the client.

It is mostly that I am not sure how the adding new item would work properly.

share|improve this question

2 Answers

up vote 1 down vote accepted

Additional functionality You haven't indicated if/how your users are able to change order of items, and indentation, something that's frequently necessary in my experience.

Consider Alternative: use a multiline text field with indents, and a side-by-side-preview (similar to stackexchange)

For experienced / frequent users this is significantly faster. Discoverability needs to be aided, e.g. with a pre-filled sample for new outlines, and/or the "Outline cliff notes" near the input.

This is not the best solution for infrequent users, however. Moving around items is darn easy for keyboard jockeys, however, especially novice users will end up using the mouse which requires good aim for selecting exactly an entire row. Your call.

No Javascript - you are, basically, burned. It requires a server roundtrip, which needs to be fast, and you want to minimize. Think twice if you really need to support this scenario, it increases requirements.

If possible, allow to add multiple items for one roundtrip, e.g. a "one child item per line" text box. The respective "details" form" for more complex operations (like adding a node, picking a link target) can be loaded in an iframe. For moving items, you'd need to support cut, cop, paste so you don't need one roundtrip for each "move up once, move up one, ..."

an image, just for you and every other viewer

share|improve this answer
up vote 0 down vote

Without JavaScript enabled, I believe that you are going to have to reload the page to add DOM elements.

share|improve this answer
I do not completely understand this: do you mean detecting if javascript is enabled or not, and if not redirect to a different page? Sounds good. How do you do that: detecting javascript without javascript? Always redirecting unless you can block it with javascript? This way you can offer two different pages. Not quite unobtrusive :) but for such a case as this, maybe the most elegant: you get a very elegant js-enabled page, and fallback on a basic html page if needed. – nathanvda Mar 10 '11 at 8:13
One way to do this is like this: [a href="myPage.html" onClick="someJavaScriptFunction(); return false;"]. The return false part keeps the normal href from firing if javascript is enabled, so you get either the href action, or the javascript call, but not both. Another way is to add javascript functions/features to your elements at load time, so they only get added if javascript is present. For that, it's easiest to use something like JQuery and it's load event. – ThatSteveGuy Mar 10 '11 at 19:25
Ok, that is what you normally do. The javascript is added unobtrusively: if you leave out the js, it still works. But you say: reload the page to add DOM elements, without javascript enabled. – nathanvda Mar 10 '11 at 20:05
Yes, you will have to store the state of your page (various ways to do this) and send it back to the server with the reload/refresh page request. You will also pass along an "add node" request. When the page reloads, your server side technology (asp, php, whatever) should understand how to construct the new page, and how to re-hydrate the values that were already on the page. – ThatSteveGuy Mar 10 '11 at 22:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.