Software that makes the user design the User Interface before using it
November 11, 2015 4:10 PM   Subscribe

I am looking for software (no video games; see inside for explanation) that lets you design the graphical user interface however you wish before you start actually using the software.

The ideal example would be one where little to no coding is required from the user. On first startup, you would be presented with a "designer" interface that would allow you to drag and drop all the elements around to create the main user interface with the ability to change colors, typeface, sizes, etc. Then as you started using the software you could tweak the layout by going back to the designer interface. I got this idea into my head when I started imagining what my ideal email client would look like, and it was pretty different from anything I currently see available.

Three things that are fairly close to what I am imagining:

-Adobe Creative Suite applications allow you to move windows around, change the color scheme, and then save "workspaces". This is similar, but I am thinking something quite a bit grander, like I could eliminate menu options I never use, reorder tools in the toolbar, etc.
-The Sims video game started with building the environment where your Sims would live.
-The new Super Mario Maker game asks you to design levels before playing them.

These last two example actually perfectly fit the kind of software I am describing, but I am not looking for video game examples. I want more utilitarian software examples, if they exist.

I am also open to hearing why you think this would never work. I have already considered that the documentation for this kind of software would be near impossible to write.
posted by 2ghouls to Computers & Internet (24 answers total) 11 users marked this as a favorite
 
Hypercard and Visual Basic would be the canonical examples here but neither is something that you could use today on a modern system. Maybe Supercard to the Mac?

As a model of software development Ui builders have fallen out of favour because it requires too much platform-specific tooling and the bulk of software development targets the web as the end-user UI these days.

On some level straight HTML is a UI builder. Maybe Jetstrap but I've never used it.
posted by GuyZero at 4:20 PM on November 11, 2015 [2 favorites]


A lot of audio software works this way to a greater or lesser extent. For instance, Reason lets you put together a virtual rack of components (both included with the software and third-party plugins) and wire them together in arbitrary ways. You can even flip the UI around (this is from a very old version) to the "back of the rack" see and adjust the virtual cables.

Many Mac apps support drag-and-drop toolbar customization. It looks something like this in Apple Mail. Firefox has a similar mechanism.
posted by zachlipton at 4:22 PM on November 11, 2015 [5 favorites]


Android Studio and XCode also both have UI builders for their respective platforms but they're not sufficient to generate a full app without at least a tiny bit of coding.
posted by GuyZero at 4:24 PM on November 11, 2015


Qt has an IDE.

Also xcode and Eclipse for mobile development, you can drag and drop to a limited extent to build up a layout.
posted by BungaDunga at 4:25 PM on November 11, 2015


Oh I think I've misunderstood your question. But IDEs like Eclipse and IntelliJ/Android Studio have pretty extensive customization options although I'm not sure how many developers ever really use them all.

But for something like Android Studio you can add and remove menu items, customize window layouts and even change key bindings. But most of the customization is done via plugins and not directly by end users except for the handful of people who refuse to move on from Brief editor keybindings.
posted by GuyZero at 4:27 PM on November 11, 2015


I don't think the IDE answers are what the OP is looking for. It sounds like he wants complete applications that provide this kind of UI builder to the end user, so every user would have a different UI that he built for himself.

IMHO the biggest issue here is that, as a developer, adding this level of configurability (and doing it right) is massively more work than just having a single user interface with potentially some minor customization. And for most classes of applications, only a tiny minority of users would want to go through the steps of building the UI before they can use the product. High cost, low beneft.
posted by primethyme at 4:29 PM on November 11, 2015 [2 favorites]


Response by poster: It sounds like he wants complete applications that provide this kind of UI builder to the end user, so every user would have a different UI that he built for himself.

Yes, thank you for phrasing this better than I could.

Even though the IDEs are not what I was imagining, I have still have found every answer interesting, and have brought new questions to mind. But I will save them for a new question after I've explored the links in more depth. :)
posted by 2ghouls at 4:37 PM on November 11, 2015


I am also open to hearing why you think this would never work.

As for this question, never say never, but the fact is that an infinitely customization UI is complicated. Software is hard enough without adding that many variables. It's vary hard to develop and test an application that can be changed to the extent you're imagining. There are a lot of little details a developer considers, such as how the choice of text, font, font size, etc... interact to ensure that a message fits in the space available, even when that message has to be translated into 15 different languages. And then someone has to come along and test that message for every language. If you get to go mess with the font sizes in the UI, chances are decent you'll cut off an important message somewhere, and then you'll blame the app.

UI designers also consider their craft a specialized skill. While allowing an interface to be customized is useful, especially for the kind of special software people use 8+ hours a day every day, such customization is usually limited to the rearrangement and organization (including removal) of certain elements, rather than constructing the main UI itself.

That said, there are some applications that allow their plugins/extensions to customize pretty much everything about the UI. These extensions require some programming skill, and an understanding of the details of the original app, but can be installed by causal users. Firefox/Thunderbird/Seamonkey are significant examples. On the other hand, building the cross-platform UI toolkit that enables this level of customization was a big part of what took Mozilla/Netscape 6 so long to ever ship.

Another model is skinning, like the Winamp skins of old. These were built out of XML and image files, not a fancy designer interface though.
posted by zachlipton at 4:43 PM on November 11, 2015 [2 favorites]


One thing I used to use that was fairly like this was BMC Remedy, though I will grant you it was a much, much older version and it may be radically different now. Its official use is helpdesk ticket tracking, but it was essentially a graphical front-end to a database table. You defined what fields you have, how search results are delivered, and what the actual form looked like (with several versions if necessary, and users can further modify them for their own personal needs), and away you went. There were some fields that were required (mostly must-have holdouts from it being a trouble ticket system, so you had to have an Assigned To and an ID and a status, for instance) but other than that you could store most anything else. You could even create relations between forms and define some programmy things to do various tasks, like update various fields when things do X or send an email when someone clicks Y or do this thing Z at time A.

The downsides to this (and why we got rid of it in favor of a purpose-built helpdesk system) were several. For one, a lot of work had to go into moving the physical layout of the fields around - even the relatively simple client app had a pretty fully functional form designer in it, and that overhead tended to make everything slow. Once you got a lot of records in the system, it got really rather slow - instead of just having a defined table, you then had to link to several *other* tables to make sure you got things like permissions and field names and such, so there's just a lot of stuff going on. Maintenance was a nightmare, especially since there were several administrators and form designers and such over the lifespan of the install, so hooray about 200 fields no one used anymore and phantom forms and god forbid you tried to get at anything directly because the DB structure was spaghetti (of course, why wouldn't it be?). On top of all that, it was expensive as hell - this is not something you'd pay for personal use, unless you're ridiculously rich. Maintenance alone was in the mid 5 figures, and that was after cutting things back a good bit.

I will grant you that some of these problems we had were more about the fact that it was a system initially deployed in 1994 or so and then replaced around 15 years later and managed by largely non-programmers but some of those caveats are just Things That Will Happen. I was glad to replace it but I did gain a lot of knowledge about what to do and what not to do when writing code and a much greater appreciation for the power of such a system. Once you were used to it, a fairly complex system could be banged out really fast. (Of course, with all the frameworks and such available now, development time for just doing it "for real" is pretty good now too.) I will also again put the caveat there that Remedy might have changed a great deal since the last time I looked at it, but even the newer versions of it I've seen (still a while ago) looked not too dissimilar from what we were using.

I believe you can do something similar using Oracle Forms (again, really really really spendy) and I think(?) Access has some of that kind of stuff? People certainly have used Office to do up front-ends for data stores that they have. It's not something I've ever done (I can barely use Excel as it is) but I've seen it done.
posted by mrg at 4:47 PM on November 11, 2015 [1 favorite]


User-friendly database softwares like Filemaker or Bento, or even some CMSes/CRMs are like this: you create the data structure / ui and then use the database itself.
posted by suedehead at 5:00 PM on November 11, 2015 [1 favorite]


Midi controller software is often like this. Check out the video at http://mididesigner.com.
posted by doctord at 5:19 PM on November 11, 2015 [2 favorites]


Best answer: Foobar2000 comes fairly close to your idea, I think. It's Windows-based audio playback software that can be fairly radically customized. You can arbitrarily split the interface horizontally and vertically into container panels (which you can lock to size or allow to be dragged/resized), add tabs to any panel you like, then populate the panels and tabs with assorted media library viewers, playlist editors, metadata viewers, playback controls, visualizations, etc. So you can set it up to work something like iTunes, or set up something super minimalist. Everything is plugin-based, from the audio decoding to the available interface elements. The only thing you can't do (I think) is edit individual menu items. You can hide the menus altogether, though.

It has a reputation for being able to handle outrageously large media libraries that iTunes et al. choke on, and is beloved by a certain breed of music/audio nerd. I haven't done a clean install in a while, but I think first-time users are presented with a few "demo" interface options to choose from, and at any give time you can enter layout editing mode and adjust the interface on the fly, or turn on a dummy "scratchpad" interface to mess around with.

As an example, here's a screenshot of my current setup, which is set to a light-on-dark color theme, and includes a mini library view sorted by folder structure (hallelujah!), playback controls inline with the top menu, a playlist view that displays embedded album art, a seekbar at the bottom that renders and displays the current file's waveform, etc.
posted by drumcorpse at 5:20 PM on November 11, 2015 [4 favorites]


Also consider paper prototyping, with Balsamiq
posted by falsedmitri at 5:26 PM on November 11, 2015 [1 favorite]


The older word processor Ami Pro had something like this, I think. During it's most popular years, the even older word processor WordPerfect was declining in popularity, but had been widely used in business (and scientific) settings; WordPerfect users would become really fast at using WordPerfect's key combination shortcuts. There was also something like a "ribbon" or maybe "show codes" -- or both -- that WordPerfect users loved in that software.

If I remember correctly, there was an option on install that would let you choose a WordPerfect-like setup, so that the interface would be familiar to a WordPerfect expert.

I'm sorry the details are so fuzzy, but I believe it's the closest thing I can think of to what you're asking.

I must tell you that I *love* this idea, partly because it's similar to an idea I've turned over in my own mind about setting up a beginner UI that will, over time, transition to an expert UI. Experts deserve to be able to get things done as quickly as they imagine them -- or at least to approximate this as much as possible -- while the step-by-step nature of beginner interfaces is antithetical to this. Shortcut keys help with this, but they are not a complete solution in most of the software that's out there today (as far as I can tell). I'd love to know more about what you're working on.
posted by amtho at 6:10 PM on November 11, 2015 [1 favorite]


A generic sort of term for what you're describing (sorta) are software frameworks. However, frameworks are NOT applications. What they ARE is a way to build applications using a very defined toolset. Programming them is not trivial, even though a lot of work is already done compared to programming without one.

Some of this discussion reminds me that applications in the 80s and 90s did seem to be a little more customizable than they are now, as far as interface look and feel goes. I remember spending quite some time setting up Wordstar to look the way I wanted (gosh I'm old).

Typically the software environments that come closest to still having any functionality like you're describing are applications that cost a fair amount and require a fair amount of training to operate - work (or serious play) systems as opposed to simple apps/environments. The most esoteric example I can think of is commercial embroidery digitizing software. The people who use it typically make their living sitting there running it all day, so there is a lot of flexibility in letting you set up menu bars horizontal or vertical, moving menu items around, etc. so that the operator can get their workflow the way they want it.

Adobe products like Lightroom and Photoshop, in a similar way, allow for a little bit of setup, or at least remember some settings in how you have menus going, but not much.

Mass-market/simple software environments don't do this much anymore, and I think it might have to do with how software development works on a much faster cycle. I expect it's a real PITA to support a lot of flexibility in moving UI elements around, and complicates everything from building tutorials to doing customer support. "Click on the menu item on the left in the blue menu. Or at the bottom of the screen. Or on the right... in the menu that is now red..." Again, thinking about non-expert users, this could get ugly.

Balsamiq has been mentioned - it's a wireframing tool, which is what you use for building UI. Some wireframing tools do actually result in at least a semi-functioning environment (ex: buttons actually can be clicked and can take you to other documents of the wireframe, simulating the loading of other pages) but are not intended to produce "real" environments.
posted by randomkeystrike at 7:32 PM on November 11, 2015 [1 favorite]


In Liine Lemur, an audio controller app for Ableton Live, etc., controllers can be built and laid-out from scratch using a tool kit of various objects. (They also offer downloadable templates, but a basic new session is a blank slate.)
posted by mykescipark at 9:28 PM on November 11, 2015 [1 favorite]


Lotus Approach is/was (don't know if it has been updated any time in the last decade). It's database software that expects the user to define/design the forms they use, from which a database is then created.

The software itself has a static UI, but the day to day use of the databases created with it is dictated by the user's own UI design. Typically one person in a company creates a shared DB so everyone uses the same UI, but it is possible for users to move the fields around on the screen wherever after the fact.
posted by wierdo at 10:09 PM on November 11, 2015 [1 favorite]


Look at AVS (Application Visualization System) it's an older system where you have a workspace and drag graphical tokens of processes and tie a workflow together with lines. It fits in a somewhat discontinue branch of "graphical programming languages".
posted by sammyo at 5:22 AM on November 12, 2015 [1 favorite]


More code-y than what you're asking, but there's Max/MSP, a sort of visual programming environment for making music. It's very quirky but a lot of fun. You can build yourself a program with a decent interface for quickly changing parameters, entering MIDI data through a keyboard, etc. People use it for live performances.

I think about software platforms as defining languages for certain kinds of activities (making music, displaying forms), and the users then work with those languages. And the issue is that it's just hard to design a good abstract language. Max/MSP provides a lot of powerful features, and a nice, simple way of connecting them (signals flowing through wires, between boxes which operate on those signals). But for various reasons it's also quite confusing and easy to mess up - I'd spend as much time debugging a program as writing it.
posted by gold-in-green at 2:04 PM on November 12, 2015 [1 favorite]


Visual Studio's UI is probably the closest I've ever seen any program come to a "customize this thing to look/work exactly how you want" paradigm, and as anyone who uses it will tell you, there are plenty of things that they just didn't think of even so. (Luckily, that problem is largely addressed by the addin/extension mechanisms they provide). Unfortunately, since Visual Studio is also an IDE, it's not much use to you if you're not a programmer.

In general, this is an incredibly difficult problem to solve for any program of even an average complexity that it's usually just not worth it; it's much more cost effective to hire a UI designer or HCI expert and figure out a design that will work for the vast majority of people. Even if developers want to provide extensibility for their programs, they'll try to come up with a fairly standard way for extensions/plugins to work.
posted by Aleyn at 2:09 PM on November 12, 2015 [1 favorite]


As for how impossible this would be, not impossible but certainly requires a level of abstraction and detail that is a significant project. Now if this is a project/product is it what the target user would want, not think they want but actually need for the problem. In the end it's likely that the product would ship with an initial layout and 80% of the user base would never make more than minor adjustments to the base. Unless there's a huge benefit to the customization it's a huge burden to expect from the average user.

Another example would be windowing systems. The user starts the software, opens the features (applications) needed. Some windowing systems remember the layout session to session.
posted by sammyo at 8:01 PM on November 12, 2015 [1 favorite]


Best answer: This is actually pretty close to describing an API, specifically a web API.

So let's say there's a computer sitting around that does something: maybe it adds numbers, or buys postage, or turns on a light bulb, or maybe orders pizza. I don't exactly care how it's doing the work of adding numbers (using a CPU, or maybe just waiting for someone to enter the number after doing it on paper), I just know I can send the computer a request and something happens. The API is where I send my data.

Ok, so at work, we subscribe to a postage API*. We didn't buy software, or a label printer, we bought this abstract service that allows us to buy postage. There's not a graphical interface, they just provide us with a list of URLs we can send data to. This was confusing for some people because in the past, we've purchased a software package that does everything.

So now we have this postage API I can use. I built a GUI (two actually - the first was a traditional desktop application, and the second is a web page application) that runs on a touchscreen computer, which has the exact buttons and options our existing shipping workflow requires. Instead of someone typing in a package size, the GUI has a button to select a given package. When a user hits the ship button, the GUI backend assembles all the data together in the format the API wants, transmits it to the API servers, and then prints out the postage label the service returns. I didn't write any of the postage programming, but I did have to build a big GUI.

The funny side of this is that when we need to do something that our GUI doesn't do, I sometimes just type up the API call manually. It's just not worth building a GUI for a one off task, and then in that case, a text editor becomes my de facto GUI to create a 100 line text command.

From a documentation standpoint, they obviously don't have instructions for the GUI I wrote. Instead they document what happens when you issue various requests to their server.



*I'm a paying customer of EasyPost, and enjoy working with them. They don't pay me.
posted by Nonsteroidal Anti-Inflammatory Drug at 1:30 PM on November 13, 2015 [1 favorite]


Maybe Livecode? For example, this tutorial on Creating a Video Library Application has you using its interface to create the main window, add a video player to the window, create the menu, and so on.

The basic open source version is free, so you can give it a try without any outlay.
posted by kristi at 1:18 PM on November 14, 2015 [1 favorite]


TouchOSC sounds basically like what you're describing, though very audio-specific. It's a framework for audio control surfaces which basically lets you design an interface to control different parts of a DAW or other audio app or even hardware.
posted by valrus at 1:57 PM on November 14, 2015 [1 favorite]


« Older Where can I find a repository of unsettling and...   |   New Chapter...in vitamin brand and consumption-... Newer »
This thread is closed to new comments.