Formulize 4 Admin Screen Mockups

Over 18 months ago, I started to think more seriously about what a redesigned administration side of Formulize might look like. Thanks to the input of some clients, especially Mark Zwicker at Actua, these ideas have become more and more refined, and starting this past summer I finally began making some more detailed notes and drawings of how it might actually look and work. Eventually, the drawings got scanned, and then they got resized and reorganized, and now at long last, you can see them below.

You can click on any of the images below to view them at a larger size.

You can download a PDF copy of all the images (7MB) if you want to print them off on paper.

Home page

This home page would show a list of your "applications." An application is a new organizing principle for forms...an application is simply a name you give to a system you've created with one or more forms. This will helps keep the forms better organized and easier to find, hopefully. More details are below.

Clicking on an application would give you a list of the forms that are part of it, and also which screens are defined for which forms. You can click a form name, or a screen name, to go straight to the settings for that form or screen.

Application Settings page

The breadcrumb trail at the top would be an important part of navigating the new administration area. Also, each page would have a series of tabs for organizing the different configuration options.

Application Forms page

The Forms tab for a specific application, would only show the forms that are part of that application.

Application Forms (add to an application) page

Existing forms can be added to an application (see the next screen), so that one form can be part of more than one application if necessary.

Application Relationships page

Frameworks would be called "Relationships" in Formulize 4, since all they are, really, is the declared relationships between the forms in the application. The other main change would be that Framework handles for forms are not part of Formulize 4...the hard part there is devising a good backwards compatibility scheme.

Application Relationship Details page

The actual interface for working with a Relationship (Framework) would be similar to what it is now, but without the need for specifying Framework handles.

Application Menu Options page

It's clear that managing menu options should be integrated with the rest of the Formulize system, so you don't have to create menu entries as a separate step each time you make a screen. But exactly how to achieve that is difficult, since there are so many flexible options different people require for menus under different circumstances. This screen shows one idea for managing menu entries. A key concept is that menu entries would be specifiable as part of the screen settings, at the time the screen is created. It would be difficult to manage menu entries through the screen settings page as well though, since additional menu entries pointing to that screen might be added later for other reasons. I look forward to feedback on this complicated issue.

Form Settings page

This is basically the current form settings page, minus the option for default columns, which should be merged into the new default screens feature. Additionally, at the time a new form is created, this might be the place to specify the application it belongs to (if we are going to support jumping into creating forms from the home page, instead of requiring people to make an application first and then make a form from in there, which seems like a lot of extra work).

Form Elements page

The list of elements in a form could be improved in many ways, but basically this will initially be the same list of elements that is familiar from Formulize 3.

Form Element Details page

The detail page for elements will be broken down into tabs, to better manage the massive number of options that exist for elements. The names and handles would be on one tab (caption, column heading, handle, etc). Then one for the main options that relate to each element (like the values in a checkbox series, etc). Then one tab for display settings that control who should see the element, etc. Then one tab for advanced stuff that you can usually leave alone, like the data typing.

Form Permissions page

The permissions in Formulize can be complex. This page is meant to be a streamlined way to set permission for a particular form, across one or more groups. We need to ensure there's some simple way to set permissions across multiple forms as well, and multiple forms and groups if possible too. But the underlying idea is that permission control will be situated with the form in the admin UI, unlike now.

Form Screens page

Screens are obviously an important part of Formulize. The plan in version 4 is to make them even more important. We need regular form screens, in addition to lists of entries and multipage forms. This will allow us to create "default" screens when new forms are created. The default screens will control what normal users see when they go to the form to fill it in, or look at a list of entries. Webmasters can change the settings for these default screens in order to change how the form behaves for users, or what the list of entries looks like. Or Webmasters can make a whole new screen, and declare that to be the default that people see when they go to the form. This will create all kinds of flexibility for how webmasters deploy applications.

Screen Configuration Pages

Just like the configuration page for elements will be broken up into multiple tabs, the configuration pages for screens will be broken up into multiple tabs. Exactly which settings are controlled on which tabs, will vary from screen type to screen type. But the basic idea is that webmasters will have a more logical grouping of options in front of them, instead of the massive single pages they have to deal with right now. Otherwise, the general options are unchanged.


One of the most basic and important ideas in this redesign, is to have the administration interface more closely match the way people actually think about and manage their forms and screens and applications. It's supposed to tie together all the interface pieces that are just thrown together in the current admin UI as seen in Formulize 3. I am very interested in feedback from active users, to hear if this seems more streamlined, and how it might be made even more in line with the actual steps you take when managing the systems you've created in Formulize.

Thanks for reading!

--Julian

Comments

Great news

I'm glad to see you're continuion work on formulize!
I like application part. It will decrease confusion on sites where you have more than one form groups that are related.
Also, don't forget to add copy/clon buttons everywhere it's possible.

Revising the Admin UI

This seems like really great work. It should simply things a lot!

A agree about copy and clone availability.

Thanks guys!

Thanks for the feedback and support. :-)

About the copy and clone features...they would be primarily on the Application Forms page, you can see them on that drawing, among the links related to the selected form.

--Julian

Wow!

Hey Julian,

This looks right on the money and should drastically simply navigation. Kudos!

Mark