Item1772: Use tabs for the configure UI

The use of twisties in configure is driving me nuts. i want tabs. Part of the goal of simplifying installation.

-- CrawfordCurrie - 25 Jun 2009

Cool move and no negative words about that from me.

But now that you touch it.

One of the major complaints from users is the lack of easy of installation.

And one of the issues is configure and its gzillion settings. We have hidden the rare ones as Expert but it is still a small shock for a first timer to try and get an overview of where to begin and where to end.

The twisty design we have now adds to the "getting lost" sensation and the tabs will be a great improvement in remaining in control with some overview. And I think we can do a little more with great effect.

We have today an installation document as HTML which is a small novel "about a geek and his long and very boring life".

I have a blury idea of having a installation wizard mode in configure. We have a tiny bit now. First time you open configure on a fresh installation you have only one twisty available in which you must set the most basic path settings. You can save and return - now with everything available.

It would be better if we could guide the installer through a travel from tab to tab like you will normally do in an installation wizard.

On the other hand you do not want to jump through a wizard once you are familiar with configure and return to set just one setting.

My idea is that you can click a "Guide me through a first time installation" button. In this mode you jump from tab to tab in a sequence that makes sense.

And for each tab we show the installer a small 3-10 line intro text that tells the installer the same kind of information we have in the installation guide. Except here you see only the relevant section and you see it when you need it. This help text can be hidden behind a twisty at the top. A small help twisty that you can open in normal mode but is default open in wizard mode.

Additional wizard mode will show a button that takes you to the next tab.

Once we have the tabbed design the extra work is

• Write the help texts for each tab
• Implement the small help twisty
• Implement the "Continue to next step" button
• Implement the "Guide me through a first time installation" button
• Implement the extension to the Foswiki.spec file for the help texts

There is no real perl programming in this so it would be a good task for those in the community that have webdesign in their tool box.

I will gladly assist with the help texts and organising the sequence of tabs.

-- KennethLavrsen - 25 Jun 2009

This has been on my wishlist for a long time. I can step in as soon as the basis is there.

-- ArthurClemens - 25 Jun 2009

Kenneth, yes, I have already done some rewriting of Foswiki.spec help texts. There is more to be done, I was just trying to get the UI working reasonably cleanly. I'm no great UI designer, so anyone who feels they can improve on it is very welcome (and yes, I know some of the divs overlap; getting all the clear:both right isn't easy).

• That is why there is <br class="foswikiClear" /> available to you! -- ArthurClemens - 26 Jun 2009
• Thanks Arthur, I should have guessed you'd have a simple solution! I've probably duplicated (probably poorly) other stuff you have.

-- CrawfordCurrie - 26 Jun 2009

On the topic if an installation wizard; you could layer some sort of flow automation over configure, but frankly I think it would be a waste of time. Installation is difficult way before you get to configure; most of the problems people have are with configuring Apache even before they have configure running. Once they have configure, they are led to General Path Settings and then after that are free to explore the other tabs at their leisure (it's must easier now). So I think it's out of scope for this task.

I've done a first pass now, I think a few other people need to try it, and see how they think it can be improved further (visual design is one obvious aspect).

-- CrawfordCurrie - 26 Jun 2009

I have re-created tables for displaying data.

The combining of sections does not work completely, as only the last sub section has input fields - the other fields don't get displayed somehow.

This had to do with expert settings gotten hidden, and which Crawford has fixed.

-- ArthurClemens - 01 Jul 2009

The configure page is far too intimidating, especially the first time the user sees it. Therefore I would like to de-generalize the error messages that are shown when LocalSite.cfg is not found.

Current page:

Desired state:

But I need help in achieving this.

-- ArthurClemens - 04 Jul 2009

That looks good, Arthur. Let me know what you think needs doing (what can't be done in CSS), and I'll try and help.

At the same time I'd like to address the password page. Having three fiedls to enter passwords is counter-intuitive and confusing. I'm sure we could do that better.

-- CrawfordCurrie - 05 Jul 2009

The current versions look 100 times better than the old configure! I'm just missing one thing: In the old days you could see from the first page that there were warnings and errors. Now you have to dive into each division to look for possible warnings. But the rest is great stuff.

• Thanks. But, the warning icons are in the left menu. -- ArthurClemens - 05 Jul 2009
  • I cannot see them in r4446 (screenshot). In the lower left is the number of overall warnings, but no clue, in which section they are. -- OliverKrueger - 05 Jul 2009
    • Because the graphic files where not committed... -- ArthurClemens - 10 Jul 2009

-- OliverKrueger - 05 Jul 2009

I am doing a refactoring to make the layout template based.

-- ArthurClemens - 10 Jul 2009

Hold on... almost there.

-- ArthurClemens - 12 Jul 2009

Work in progress:

-- ArthurClemens - 15 Jul 2009

Very good. Some small comments:

• If the tab section (sessions, login, password, registraion, ...) contains just two tabs there is problem with the design above (eg. how to tell which is the higlighted option without looking at the content below).
• If icons are used in the left bar to indicate a current status, we should provide a legend what a particular icon truly means and not leave the user guessing.
• The headline of the warning box should not say "warning" or "error" instead it should briefly describe the warning or error. eg. "High security risk! You need to protect your configuration!"
• Extensions which have their own configure settings are presented in the same hierarchy level in the left bar as the major configure items.
  • Problem 1: Users may assume all other installed extensions should show up there as well and wonder why they don't.
  • Problem 2: The left bar becomes too crowded the more extensions with configure settings you have.
  • Possible solution: Have an item "Configure Extensions" and organize those configurable extensions in the content section. Of course, this issue diserves some more thinking.

-- CarloSchulz - 16 Jul 2009

Regarding extensions; the plan is to move them all under the Extensions tab, by changing their Config.spec to:

# ---+ Extensions
# ---++ ThisExtension

I keep forgetting that other people can't see this yet (I locally fixed all the errant extensions )

-- CrawfordCurrie - 16 Jul 2009

I believe work on this is now complete. Please report errors in new tasks!

-- CrawfordCurrie - 05 Aug 2009

as best i can figure, some files were not added to MANIFEST after the refactoring:

Index: Foswiki/Contrib/core/MANIFEST
===================================================================
--- Foswiki/Contrib/core/MANIFEST       (revision 5866)
+++ Foswiki/Contrib/core/MANIFEST       (working copy)
@@ -543,9 +543,11 @@
 lib/Foswiki/Configure/Util.pm 0444
 lib/Foswiki/Configure/UI.pm 0444
 lib/Foswiki/Configure/UIs/AUTH.pm 0444
+lib/Foswiki/Configure/UIs/CGISetup.pm 0444
 lib/Foswiki/Configure/UIs/EXTEND.pm 0444
 lib/Foswiki/Configure/UIs/EXTENSIONS.pm 0444
 lib/Foswiki/Configure/UIs/FINDEXTENSIONS.pm 0444
+lib/Foswiki/Configure/UIs/Introduction.pm 0444
 lib/Foswiki/Configure/UIs/LANGUAGES.pm 0444
 lib/Foswiki/Configure/UIs/PLUGINS.pm 0444
 lib/Foswiki/Configure/UIs/Root.pm 0444

-- WillNorris - 29 Dec 2009