Best way to organize search form interface?

Question

I have a tab in my application where users can search Accounts. The account table has two different types of accounts, User and Staff type. User type is one that has a username, password, etc. Staff only holds position field and status. Both account types share next fields First, Last name, Email, and Middle name. The rest of the fields are assigned based on the account type. My search interface is more complex because of that table. When the user gets on this tab and tries to search for an account first they have to choose Account Type, then Account Status then the last step is to select the desired filter. That can be Username, Email, or Name. Both Users and Staff will have Names and Email but only the User account types will have usernames. This is the first trick, second is searching account by the name. So far what I researched it would be way easier/more efficient for my SQL query to search by Last and First name then on the Full Name. I debating how to organize my interface to accommodate something like that. Here is an example of my current interface:

$('#frmFindaccount_filterby').on('change', changeAccountAttr);

function changeAccountAttr() {
  var elementVal = $(this).val();
  $("#frmFindaccount_search").removeAttr('pattern maxlength title');

  switch (elementVal) {
    case "1":
      $("#frmFindaccount_search").attr({
        "type": "text",
        "placeholder": "Example: jcook56",
        "pattern": "[a-z0-9_-]{0,50}$",
        "title": "User name allows alphanumeric (lowercase only) characters, underscore, dash - no other special characters",
        "maxlength": "50",
        "disabled": false,
        "required": true
      }).val("");
      break;
    case "2":
      $("#frmFindaccount_search").attr({
        "type": "email",
        "placeholder": "[email protected]",
        "title": "Enter email address",
        "maxlength": "80",
        "disabled": false,
        "required": true
      }).val("");
      break;
    case "3":
      $("#frmFindaccount_search").attr({
        "type": "search",
        "placeholder": "(Last, First) or (Last+First)",
        "pattern": "[a-zA-Z][A-Za-z' .,-]{0,100}$",
        "title": "A-Z, space, dash, apostrophe, period, comma - no other special characters",
        "maxlength": "100",
        "disabled": false,
        "required": true
      }).val("");
      break;
    default:
      $("#frmFindaccount_search").attr({
        "type": "text",
        "placeholder": "Select Search Criteria",
        "disabled": true,
        "required": false
      }).val("");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmFindaccount" id="frmFindaccount" class="frm-findrecords" data-method="findAccount" autocomplete="off">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <select class="form-control find-type" name="frmFindaccount_type" id="frmFindaccount_type" required>
        <option value="">--Account Type--</option>
        <option value="0">All</option>
        <option value="1">User</option>
        <option value="2">Staff</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <select class="form-control" name="frmFindaccount_status" id="frmFindaccount_status" required>
        <option value="">--Status--</option>
        <option value="2">All</option>
        <option value="1">Active</option>
        <option value="0">InActive</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <select class="form-control find-filterby" name="frmFindaccount_filterby" id="frmFindaccount_filterby" required>
        <option value="">--Search By--</option>
        <option value="1">Username</option>
        <option value="2">Email</option>
        <option value="3">Name</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <div class="input-group">
        <input type="text" class="form-control find-search" name="frmFindaccount_search" id="frmFindaccount_search" placeholder="Select Search Criteria" disabled>
        <div class="input-group-btn">
          <button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="alert message-submit"></div>
    </div>
  </div>
</form>

I'm wondering if anyone has suggestions on how this can be accomplished to be user-friendly and efficient for a search engines? Maybe showing all search filters on the screen? In my opinion that sometimes can confuse, also too many fields and scrolling on the smaller screens.

Answer 1

I would start by doing user research to determine what they ask themselves when they are performing the search. Are they asking for a list of all active staff members for example or searching by name to find the status of a specific user or staff member.

Once you have models of the different types of results users are looking for when they use search you can work backwards from there to determine the most frictionless way to get them to those results with the interface of the search filters.

Check out: https://www.nngroup.com/articles/mental-models-for-search/ and https://www.nngroup.com/articles/mental-models/

For the curious here's how that html looks when rendered: https://codesandbox.io/embed/lxw5ln5jvz