0

I have tab in my application where users can search Accounts. Account table has two different type of accounts, User and Staff type. User type is one that have username, password, etc. Staff only holds position field and status. Both account types share next fields First, Last name, Email and Middle name. Rest of the fields are assigned based on the account type. My search interface is more complex because of that table. When user gets on this tab and try to search for account first they have to choose Account Type, then Account Status then last step is to select desired filter. That can be Username, Email or Name. Both Users and Staff will have Name and Email but only User account type will have username. This is 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 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": "example@gmail.com",
        "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 have suggestion on how this can be accomplished to be user friendly and efficient for search engine? 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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.