33

My team has been "tasked" to create an application that follows the task-based UI (not necessarily with CQRS). I really like a UI that helps the user accomplish common tasks easily, but many pieces of this application really "feel" (to me) like a job for a typical CRUD interface (ex: all the details for a product in a catalog).

At this point, we need examples of good task-based UIs to help us see what is possible. What have you seen in the interwebs?

Byron Sommardahl
  • 12,743
  • 15
  • 74
  • 131

5 Answers5

31

The easiest way to generate a task based UI is to protect all attributes/properties of your models. i.e. remove all setters.

From this (pseudo code):

public class TodoTask
{
    public Date getDateAssigned();
    public void setDateAssigned(Date);
    public string getAssignedTo();
    public void setAssignedTo(string);
}

to this:

public class TodoTask
{
    public Date getDateAssigned();
    public string getAssignedTo();

    public void AssignTo(string userId);
}

You can't create a basic CRUD app anymore. You have to perform a task (Assign()) to update the model.

Start by removing all setters and then analyze what kind of actions (task) you should be able to do on each model.

Then you're all set.

I've blogged about it: http://blog.gauffin.org/2012/06/protect-your-data/ (scroll to the bottom to see mockups for CRUD vs Task based)

jgauffin
  • 99,844
  • 45
  • 235
  • 372
  • +1 and good article, though some people miss the point of your article in the comments; that's inevitable. Question: Even with this approach, at some point we need to update the db record to set the `AssignedTo` and `AssignedOn` fields, so is that not U from CRUD? I totally agree we should move the update and put it close to the db and not allow this from the UI or domain model, but I ask because I always thought that even with this approach it is called a CRUD. My understanding of CRUD is at some point you do one of those operations on the entity or many entities, is my understanding wrong? – CodingYoshi Oct 14 '18 at 21:46
  • I have always thought non CRUD apps are those apps which just don't deal with a db. For example, an application which compresses files. – CodingYoshi Oct 14 '18 at 21:48
  • Question 2) In your article you removed the *Assign To* and *Assigned at* and *Completed* fields from the screen. Cool, makes sense. But now a user can no longer tell if the item is assigned to anyone, or completed. I guess, instead of interactive fields, we can just place them as labels? – CodingYoshi Oct 14 '18 at 21:57
  • 2
    You are absolutely right. CRUD is CReateUpdateDelete, the basic operations when using databases. You need to use those. What I was talking about was applications that where designed to wrap CRUD. That is, no enforcement of business rules but let the user store whatever they want directly in the database. With business entities (enforce rules) you still have to use CRUD, but that's hidden in the DB layer and not exposed in the application. – jgauffin Oct 15 '18 at 06:40
  • 1
    So "CRUD applications" = Applications that require that the users enforce the business rules. Task based applications = Fields are protected and the methods make sure that all data entered by the user follows the business rules. – jgauffin Oct 15 '18 at 06:43
  • 1
    Questions 2: That's right. The fields should not be editable by the user, but it's perfectly fine to display them in labels. – jgauffin Oct 15 '18 at 06:43
26

I think this would qualify as a Task Based UI. Windows Control Panel

Dmitry
  • 17,078
  • 2
  • 44
  • 70
  • 2
    Looks like a glorified menu to me. What am I missing? – Marco Faustinelli Jan 26 '15 at 09:27
  • 9
    @Muzietto: A menu is a user control (like a text box). Task based UI (as I understand it) is an approach that is centered around tasks that a user needs to accomplish, as oppose to CRUD form that is geared toward editing data. One can call the screenshot a glorified menu, but I'm not sure the downvote is justified. – Dmitry Jan 27 '15 at 02:52
  • 1
    OK, I see what you mean. That's the explanation I missed. – Marco Faustinelli Jan 27 '15 at 13:47
  • 3
    This is one of the most difficult to use (glorified) menus I know of - I never find what I want, always have to search, which never returns anything close to the right option, and then I end up having to Google up a screenshot-by-screenshot tutorial instead. :) – conny Jun 30 '15 at 03:01
  • 2
    One of the best explanations of task-based UI vs CRUD is at https://kylecordes.com/2014/task-based-user-interfaces - "Change of Address Example" section. It illustrates value behind the TB-UI approach - from there, I think it's easier to figure out UI design which achieves those goals. – Leo Feb 23 '18 at 01:56
13

CRUD Interfaces

CRUD interfaces have a "Save" button when editing and you miss the "reason" why something changes.

For example changing the address of a customer from "Fountain St. 55" into "Birds St. 444" has the very same semantics than changing it from "Fountain St. 55" into "Fountain St. 555". Just "updated" the street.

Task-based Interfaces

Task-based interfaces have "Action buttons" that "mean" something of the business.

For example you could have a "Correct Address" button to signify that you are changing the address because it contained a typo and the address in fact "conceptually" is the same, only that now it reads correctly. In this case the customer did not physically move.

And then you could have another different action like "Move Customer to a new address" that means that the customer actually moved to a new place and the address change carries all that meaning.

So... in short

In CRUD UIs => You "edit data".

In Task-Based UIs => You "signal that business things happened".

Conclusion

The second is always more powerful, although is harder to think in advance and the system must be flexible to add, carry and convey new "meanings" as they are discovered during the business operation itself.

But you get a huge benefit: Know "why" things mutate. In other words... capture the user's intent.

Xavi Montero
  • 9,239
  • 7
  • 57
  • 79
10

Microsoft Money 2000 was an example by Microsoft (although they call it Inductive User Interface. Here are the underlying guidelines and a few screenshots along the way: Microsoft Inductive User Interface Guidelines

Dennis Traub
  • 50,557
  • 7
  • 93
  • 108
1

I guess I don't really think of UI's having an appearance of being task-based or CRUD-based (although Dmitry's example is one that does demonstrates being task-based -- lots of commands). I see a task-based UI more in terms of how it interacts with the underlying domain and data model. If your interaction is nothing more than a typical out-of-the-box MVC application with action methods for Get/List/Insert/Update/Delete, then you're building a basic CRUD application. But if your forego those default action methods and create actions/commands that are meaningful to the application (e.g. add item to shopping cart, deactivate a class, etc.), then this gets more into the task-based UI world.

I do think it's a pretty gray line between the two.

As for an example, I know that a site that I work on (braincredits.com) is my attempt at a task-based UI. It's definitely a work in progress and I'm making changes to it to constantly improve it, but the implementation is command-based (e.g. post to transcript, add lesson, view transcript, etc.) and parts of it do use the CQRS pattern.

I hope this helps! Good luck!

David Hoerster
  • 28,421
  • 8
  • 67
  • 102