For a business system that is used every day, it is very important for users whether the input interface (input screen) is easy to understand and whether it is easy to use.

Relating a Workflow system, I often hear people saying such as;

  •  "I don't know what to input."
  • "It could be easier if there were examples or templates."
  • "I entered all the way, but it ended up as an error."
  • "The way of input varies depending on individuals."

And when I look back at our day-to-day operations, such as "Report of hours worked", "Request for approval", "Report of order receipt", "Answer to inquiries", etc., many of the occurrences of delays and reworks are mostly caused by erroneous or inappropriate input at upstream Steps.

"Improvement of work" tends to be a grandiose story such as standardization of business flow and optimal placement of resources, but as the content to be tackled becomes bigger, it takes time to get the effect. On the other hand, it can be said that "devising the input screen to reduce inputs that is erroneous and inappropriate" is a small "business improvement" that can be addressed immediately in daily work. Iterating small improvements will lead to major achievements.

In this workflow sample, I would like to introduce you the devising of "input example button" on an input screen, which allows input by clicking on it.


[Test flow for Input form]



[Test flow for Input form: "1. Input Test" screen]



When designing the input screen, it is basically necessary to set a "Data Item name" that is easy to understand, and to describe sentences and examples (Input hint) that explain how to input. Furthermore, by making it possible to select by option instead of typing, or by setting the initial value of data, the burden of inputting for a user is reduced and it also leads to suppression of variations in input data.

In addition to these means, it is also a good idea to consider using scripts such as arranging buttons for input assistance or performing input checking or setting data to other Data Items.

Even though you can set arbitrary HTML/JavaScript in [Input hint] of Questetra, in some cases it may be a trouble such as "it will destroy the layout of the whole input form". It must be set by staff members who have knowledge and experiences of HTML/JavaScript at their own risk within the range of their capability of maintenance.

▼[Input Hint] Setting Example (HTML/JavaScript):"Service Item"
E.g.: <button type="button" id="btnConsultant_1">Monthly advisory fee</button>、
<button type="button" id="btnInstruct_1">Workshop instructor fee (Diem)</button>、
<button type="button" id="btnDoc_1">Documentation fee</button>

<script type="text/javascript">
jQuery('#btnConsultant_1').on('click',function(){
jQuery('input[name="data\\[1\\].input"]').val( "Monthly advisory fee" );
});
jQuery('#btnInstruct_1').on('click',function(){
jQuery('input[name="data\\[1\\].input"]').val( "Workshop instructor fee (Diem)" );
});
jQuery('#btnDoc_1').on('click',function(){
jQuery('input[name="data\\[1\\].input"]').val( "Documentation fee" );
});
</script>
▼[Input Hint] Setting Example (HTML/JavaScript):"Quotation price"
E.g.: <button type="button" id="btnS_2">(15 years career) 820,000</button>、
<button type="button" id="btnA_2">(5 years career) 452,000</button>、
<button type="button" id="btnB_2">(Less than 15 years) 339,000</button>

<script type="text/javascript">
jQuery('#btnS_2').on('click',function(){
jQuery('input[name="data\\[2\\].input"]').val( "820000" );
});
jQuery('#btnA_2').on('click',function(){
jQuery('input[name="data\\[2\\].input"]').val( "452000" );
});
jQuery('#btnB_2').on('click',function(){
jQuery('input[name="data\\[2\\].input"]').val( "339000" );
});
jQuery('input[name="data\\[2\\].input"]').parent().parent().css("background-color","#FFC0CB");
</script>
▼[Input Hint] Setting Example (HTML/JavaScript):"Reason for Leave"
E.g.: <button type="button" id="btn1_5">Leisure and Home matter: Private</button>、
<button type="button" id="btn2_5">Local volunteer: Private (Local volunteer)</button>、
<button type="button" id="btn3_5">Got abdominal pain in the morning: Illness (abdominal pain)</button>、
<button type="button" id="btn4_5">Child's fever: Child care</button>

<script type="text/javascript">
jQuery('#btn1_5').on('click',function(){
jQuery('input[name="data\\[5\\].input"]').val( "Private" );
});
jQuery('#btn2_5').on('click',function(){
jQuery('input[name="data\\[5\\].input"]').val( "Private (Local volunteer)" );
});
jQuery('#btn3_5').on('click',function(){
jQuery('input[name="data\\[5\\].input"]').val( "Illness (abdominal pain)" );
});
jQuery('#btn4_5').on('click',function(){
jQuery('input[name="data\\[5\\].input"]').val( "Child care" );
});
</script>
▼[Input Hint] Setting Example (HTML/JavaScript):"Approval request overview" "Budget classification"
Frequent: <button type="button" id="btnExhibit_78">(Exhibitions within budget)</button>、
<button type="button" id="btnProcurement_78">(Unexpected procurement)</button>

<script type="text/javascript">
jQuery('#btnExhibit_78').on('click',function(){
jQuery('input[name="data\\[7\\].input"]').val( "Outsourcing related to the Cloud Expo" );
jQuery('input[name="data\\[8\\].selects"][value="1"]').prop('checked', true);
});
jQuery('#btnProcurement_78').on('click',function(){
jQuery('input[name="data\\[7\\].input"]').val( "Purchase of personal computers due to breakdown" );
jQuery('input[name="data\\[8\\].selects"][value="3"]').prop('checked', true);
});
</script>
▼[Input Hint] Setting Example (HTML/JavaScript):"Reason of request"
<span style='color:#ff0000;'>* Brief in Bullet</span><br>
E.g.: <button type="button" id="btnReasonA_9">(P.C. breakdown)</button>、
<button type="button" id="btnReasonB_9">(Abrupt procurement due to the increase of personnel)</button>、
<script type="text/javascript">
jQuery('#btnReasonA_9').on('click',function(){
var myReason = "";
myReason += "External Monitor output is corrupted by the dropping in transportation (Dec. 2015)\n";
myReason += "Hindrance to the operation of the latest OS, past more than three years since the purchase of January 2013.\n";
myReason += "Choose a familiar conventional series machine, even though D Company is not the lowest price, but the difference is small.";
jQuery('textarea[name="data\\[9\\].input"]').val( myReason );
});

jQuery('#btnReasonB_9').on('click',function(){
var myReason = "";
myReason += "Increase 30 part-timers to correspond due to receiving order of more than assumed.\n";
myReason += "20 spare PC. Need 10 more.\n";
myReason += "(D company is the cheapest and fastest.)";
jQuery('textarea[name="data\\[9\\].input"]').val( myReason );
});
</script>
▼[Input Hint] Setting Example (HTML/JavaScript):"Service start"
<button type="button" id="btnThisMon_11">This month</button>、
<button type="button" id="btnNextMon_11">Next month</button>

<script type="text/javascript">
jQuery('#btnThisMon_11').on('click',function(){
var myToday = new Date();
var y = myToday.getFullYear();
var m = myToday.getMonth() + 1; // Jan: 0
if (m < 10) { m = '0' + m; }
jQuery('input[name="data\\[11\\].input"]').val( y + "-" + m );
});
jQuery('#btnNextMon_11').on('click',function(){
var myToday2 = new Date();
myToday2.setDate(1);
myToday2.setMonth(myToday2.getMonth() + 1);
var y2 = myToday2.getFullYear();
var m2 = myToday2.getMonth() + 1; // Jan: 0
if (m2 < 10) { m2 = '0' + m2; }
jQuery('input[name="data\\[11\\].input"]').val( y2 + "-" + m2 );
});
</script>
▼[Input Hint] Setting Example (HTML/JavaScript):"Service end"
<button type="button" id="btnOneYear_12">→1 year cintract</button>、
<button type="button" id="btnTwoYear_12">→2 years contract</button>

<script type="text/javascript">
jQuery('#btnOneYear_12').on('click',function(){
var myDateStr = jQuery('input[name="data\\[11\\].input"]').val();
var myStartMon = new Date( myDateStr + "-01");
var myEndMon = new Date();
myEndMon.setMonth( myStartMon.getMonth() + 11 );
var y = myEndMon.getFullYear();
var m = myEndMon.getMonth() + 1; // Jan: 0
if (m < 10) { m = '0' + m; }
jQuery('input[name="data\\[12\\].input"]').val( y + "-" + m );
});
jQuery('#btnTwoYear_12').on('click',function(){
var myDateStr = jQuery('input[name="data\\[11\\].input"]').val();
var myStartMon = new Date( myDateStr + "-01");
var myEndMon = new Date();
myEndMon.setMonth( myStartMon.getMonth() + 23 );
var y = myEndMon.getFullYear();
var m = myEndMon.getMonth() + 1; // Jan: 0
if (m < 10) { m = '0' + m; }
jQuery('input[name="data\\[12\\].input"]').val( y + "-" + m );
});
</script>
[Data Item list]

Similar Models

Related Articles


Free download Business Template : Test flow for Input form

(Japanese Entry (ε’Œζ–‡θ¨˜δΊ‹))
Concerning "Designation in Uneven Hierarchy", we learned methods for "Absolute designation according to the job title, "Relative designation according to organization hierarchy, and "Methods of separating business processes, designating approver".

As the last of this series, I will introduce a past article that describes "Method of separating the starting position according to job position".

Even though it is a similar idea to "Method of separating business processes", it addresses by separating the start position in one business process in this article. Although it is a "method of starting by boss" instead of "method of designating boss", please keep it in your memory as one of the methods of designing a Workflow App for an organization with variations in its hierarchy.

Regarding designation within an organization in which its hierarchy is uneven, we studied "method of absolute specification by job title" in Part 1, and "method of relative designation according to organization hierarchy" in Part 2.

Both methods have advantages and disadvantages, and approver/decision-makers are needed to be careful during operation. After all, in the case of "an organization with unevenness in depth", it is difficult to simply describe business rules.

The easy-to-use and easy-to-operate Workflow (setting method) will also vary depending on the size of the organization or proficiency to business rules/system of the organization members, and so on. Although we will introduce two more Workflows this time, please consider and choose "which description method is easy to operate without misunderstanding" according to the actual situation of each company including those introduced in the past articles.

One way is to separate the Workflows according to the requester.
In other words, if the approval route differs depending on the job title of who made a request, it may be good to separate into different Workflows.

[Approval flow (Separate the request of the Manager)]


Continuing from the last week, let's study about "Operator setting".

In the article of "Episode 587: Designation in Uneven Hierarchy, part 1", I introduced you a method of two-step approval which is to obtain an approval from "superior" then obtain from the "superior's superior". It is a form of approval flow that is common even for other than decision-making. This time, I will introduce a different way of writing about the previous Workflow diagram.

In the following Workflow diagram, the second Swimlane is set to "superior of the applicant" (relative designation), instead of "manager" (absolute designation by position).
By setting like this, "2. Approval/Decision" task will be assigned to the manager of the organization to which the applicant belongs. That is, if a "member" among "two directors, ten managers, and fifty members" makes a request then a "manager" approves on it, and if "manager" makes, "director" approves it.

[Approval flow (relative representation)]



Let's study about "Operator setting" from popular articles of the past.
To specify a "superior" is comparably difficult among settings of a Workflow since there are several ways to do and also it depends on the organization structure. It is better to know various ways of thinking at first.

One President, two (executive) Directors, four managers, and twelve employees.
Suppose that 4 of the "12 employees" are assigned to "directly under the Directors". More specifically,

  • 2 people are directly assigned respectively to the Departments where each of two directors supervises.
  • 2 people are assigned respectively to the Units where each of 4 managers supervises.

Every "Units" are belonging to either of the "Departments", of course. Specifically, It is a case of where the sales manager himself directly directs five sales staff members besides Units under the umbrella of the sales department. And while there are many Units under the affiliation of the manufacturing department, the manufacturing department manager himself is directly supervising five people as quality control staff.


The characteristic of this organizational structure is that there is "variation in depth". It is a common story.

Now, in the case of such "organization having variations in depth", what kind of business flow diagram should be to express the path of escalation in the approval flow? Let's consider how to write according to international standard notation BPMN. The point where to be controversial is how to draw an in-house rule that is "In principle, after the manager approval, the director will make a decision". That is, those five people in each department in this organization have no Manager.


[Approval flow (absolute representation 1)]


Continuing from last week, I will introduce the past articles of "Workflow Sample" concerning the method of Workflow definition using BPMN (Business Process Model and Notation).

BPMN stands for "Model" and "Notation". The Workflow definition written in BPMN can be run as Workflow system on a BPM system. Would you like to learn BPMN and try systemizing your work?

For information on how to write BPMN, please also refer to BPMN Introduction.



In this blog, "Workflow Sample", we introduce you various Workflow definitions of businesses. Since a Workflow definition is drawn using BPMN (Business Process Model and Notation), so it is not only the flow of the business to comprehensible at a glance but also sharing the contents of the business to be easy.

We are going into Golden Week, so I will re-introduce the articles of the past concerning "how to draw BPMN" for the next two weeks. I hope you take those as an opportunity to learn about BPMN which is a notation system for Workflow diagram and how to draw with them.