Relatively quick ways 2SXC could greatly improve their interface

A small critique of a product we love

Everyone who works with me knows that I'm a big fan of the 2SXC module by the boys at 2Sic Internet Solutions. They've made a brilliant module that makes it so easy to get the exact design I want for content while simplifying editing for my clients. I've only been using it for about a year now but I'm always finding new ways to get rich designs without worrying about how it will be updated. Being a fan, I always want share the module with others in the DNN community when I can. I recently saw a discussion in the DNN Connect group on Facebook where there was talk about the best carousel module. Of course, being that I've created many carousels, sliders, rotators with 2SXC, I quickly recommended 2SXC. Unsurprisingly, here was the response:

Ouch. But I agree with Will. It's kind of a bummer that one of the best modules around, that is all about design, has an admin interface that is less than stellar. And this is not just about looks. I think by fixing the interface problems, the module would benefit from a lower learning curve and less time spent administering.

In no order of importance, here are my suggestions for improving the 2SXC interface:

#1 - Use DNNUX Guide Form and Button styles

This is a big one. In many areas in the admin interface, there are tables with ugly borders, no padding on cells, and generally poorly laid-out forms and labels. DNNUX Guide has been created specifically for module settings and interfaces. You can see in some areas (like Views / Templates), the DNNUX Guide has been implemented but it's sorely lacking in some key areas - specifically the Content Types area.

#2 - Under Admin, make the first tab "Content / Data", and not Getting Started.

The majority of my time when under Admin is updating Content Types. So it makes sense that the first tab should be Content / Data. The Getting Started tab slows me down because I always have to click away from it. It might make more sense to put Getting Started on the end so it's out of the way.

#3 - Fix the typo in the Razor Template help

The control is actually @ListContent.Toolbar - not @List.Content.Toolbar.

#4 - Don't load module.css for users that don't need it

There's nothing in module.css that a non-content editor needs.

My clients often ask me, "How do I remove an item?" I have to explain that they click on the ... when editing an item and then click on the button appears. This process seems a little redundant. Perhaps just simplifying the buttons by showing them but spacing them apart would make this better.

#6 - Under Manage Content Types, change the h1 tag to a smaller heading tag

h1 is generally reserved for the most important title on the page. This conflicts with my styles and the heading on this page is often too big.

#7 - Differentiate the List Controls from the Item Controls

This is a relatively simple one but I think would help content editors get a better grip of what they're going to edit. Because both controls are green, it's not always obvious what they are about to edit.

#8 - In the Admin, create a single, large button that lets me get back to viewing the page with the module

Under Content / Data and Views / Templates, there's a mix of buttons for "getting back" but both do different things. I often want to simply return to my page so I can see how the module is displaying, but I usually have to use the main navigation to browse back to the page.

#9 - Improve the Edit List view

Better icons: The two green + icons have similar functionality. The first adds a new item, the second adds a new items and then jumps into edit mode of that item. I don't think this is really different enough to warrant it. I teach all of my clients to only use "Add and edit" because there's never an instance where they would only add an item without editing it. Perhaps just use one icon here. I think this table could also benefit from a delete icon so a user could quickly delete items without  having to go into edit it directly.

Better Edit List values button: This link would probably be better served as a button. It's more prominent and more important.

It's not very clear that a user can drag and drop the table rows. I always have to explain to clients how to do it and we even practice dragging and dropping because the functionality can be a little finicky with the target zones. Perhaps better spacing and a better icon for the drag and drop would help with this problem. It might even help to have some text that explains they can drag and drop to reorder.

#10 - Refresh the menu once you've added and set a content type

After I've dropped the Content module onto the page and selected a Content Type and it's template, I have to manually refresh the page before I can see the DNN Edit pencil show me "Edit List". This should be shown once the type is set.

Creating Beautiful DNN Websites: DNN and Bootstrap Starter Kit Launched! Windsong in Grand Cayman