UX - Less is often more


There are two different ways to approach code. Generic, fits anything and everything for everyone. Or custom and as easy to use as possible, but just for one client. 

Most of what I do is the latter. An image carousel I've been working on made me think about the dichotomy between these two a lot. The way I build applications for concrete5 seems to be completely at opposite with what most people doing things for the marketplace 


What is the issue?

I know a lot of people who work with concrete5 use image sliders out of the marketplace. I've used several myself. Often, it's a quick jump up to buy a 15 dollar add on that has what you need and call it good. If it's just "put a carousel on the home page" then you  can do that with no problems at all. If there are things that need to be tweaked, that's often pretty easy. The GUI for editing the form will have tons and tons of different options. There will be 30 themes to use as starting points. Perfect for a developer.

This works if you're looking at a small site. The 'brochure' style marketing site that c5 excels at. Or your grandma. Whoever is running it. 

That's not always what a site really needs. The end client is often given way too much power and control over their site.

What does that mean?

At the end of the day, the designer knows what it should look like. If you are hiring one, then you don't want them giving you a tool that can let you break your site and make it look ugly. When the design is critical, and you have a lot of editors, then the number of options in the editing interface HAS to get simpler. Every aspect of the experience for the editor has to be thought of. 

It may be a bit different than other developers, but what I get when I work on a site, there's typically a very specific layout for everything. You can't pick the width. You can't say "This slide is going to use 40 point green text and a 5 second transformation using the swipe left cube scatter animation" or whatever other stupid crap. Does anyone even care about that stuff? Will they buy more products because your animation of ________ was a little bit smoother on the page load? Prefer televisions over stereos because of vertical vs horizontal bars in 3d rotation?





Nobody cares about that stuff at all but people that are paying for a 15 dollar add on vs a 20 dollar add on. 


I should care about that market, but I don't. The stuff that I sell in the marketplace, really, it's not for them, it's for other developers that are building things for them. I try to make sure that the code is as easy to work with as possible, really easy to extend or turn into something else. But the editing interfaces aren't totally overblown like some of the marketplace things that I've seen. They're stripped down, completely the opposite of what the others do. 

Take this, the latest slider I've worked on:


There are a lot of little things here that most developers wouldn't think of. 

  • On first addition of the block, editing/adding of a slide, or after deleting all slides, the "Add (+)" button for the block is completely disabled. You can't even try to save it if it doesn't work
  • When it's add or zero slides that cause you to see the add form, then all you see is save. You can't try to 'cancel' or 'delete' if it's not actually a slide yet. 
  • Individual slides are validated via ajax on a variety of different items. The notification and process flows of this interaction are all set to feel as much a part of the total system as possible, looking exactly the same as saving the entire block
  • The list view of all slides is drag and drop. For some reason, this isn't done much in c5 image gallery / carousel / whatever blocks often. It's 2014. Jquery sortable is built into the core. How can you not use that?
  • Pixels matter 
    • The table for the list view has 8px of padding, but that was not included on the individual edit of each slide. The secondary "button text" group was all set up using the standard bootstrap syntax for c5. It required a wrapper div around the standard bootsrap styles to get it all to line up properly on the vertical axis. Honestly, I think the headers are a bit off visually. They're lined up to the pixel, but they look too far to the left if you're not holding up a piece of paper to measure the pixels.
    • The headers are slightly off on the detail page because of the add button, so that is explicitly set to a pixel height. Only 2-4px difference, but a noticeable jump up and down for the top line
    • The "pre" for the list view and the text area for the individual slide are adjusted to be the same size, padding, font, etc
    • The margins on the "save/cancel/delete' buttons when editing are spaced so that the bottom of the delete is aligned with the caption and image
    • The default bottom margin of the page picker from the c5 core has been shortened to prevent a gap compared to the other elements in the link group
  • The image wrapper is set to match the rest of the bootstrap elements for rounded corners and border style
  • Coloration is important
    • The default color for the pre / text area / div / whatever also has to be adjusted just like the normal table rows. Just in inverse. 
    • The slide validation error message actually took several hours to completely figure out. The alert *functioned* properly, but the text in the list was bright red and hard to read and didn't match. There was a lot of 'faking' of data and html content 

At the end of the day?

It's kind of weird to feel pride over something so mundane. The design is pretty minimalist. There's not a lot there. Yet what is there is the anticipation of every action the end user will take, and what it will mean to them. How that will work with the overall theme of the site. I really like working on stuff like this, honestly. 

Really, if you want a quality website, you don't want to give the end client the ability to make something like this

What really sucks, though, is that people look at the options (not just sliders, but themes, extensions, whatever) available on these 15 dollar programs and then lose sight of the value of quality code. Why pay when you can just go buy a plugin. What's missed is the process of actually understanding who will be using the site and how it will fulfill their particular needs.

The tailored fit.