Project Interface Proposal

Professor Littleton
CDA4010: User Interface Design

Team:
Angel Selva Rodriguez
Jimmy Pena
Benton Lamlein
John Armon Antolin
Karli Dattilo

Section 1: Platform

In determining a platform to support the digital employment

application interface the team assessed what would be essential
to properly display the information, be easy to correct or update
and be easily available to anyone applying to the position. A
desktop application could work but would be a bit of overkill for
an employment application. In addition, the proposed applicant
would have to download the application, and this would further
delay the application process. What if the applicant is unable to
correctly download the desktop? This led the team on deciding to
use a web-based application in which future applicants can visit
and apply accordingly. The decision seemed logical as a web-
based application can be feasibly maintained/updated and the
data from each user profile can be secured in a SQL database for
future reference/record keeping. Not to mention that the
accessibility that a website can provide is suited well for all types
of applicants, no matter what age or possible disabilities.

Section 2-3: Forms & Controls including Organization

Section 4: Using Space Efficiently
Using Space to Call User Attention
To call the user attention and improve efficiency, usability, and
accessibility, our website will use several design techniques. One
of them will be based on the rise of the objects and the space
where they are positioned.

Desktop Version Design

For example, to call the user attention and improve efficiency
while filling the form, the website will use a whole page design for
the forms. The header indicating the company branding will be
present. However, the main section of the page will be taken by
the form itself. This will focus user attention on the form to be
filled out instead of the links and branding of the header section.

The same principle will be applicable for the footer. The footer
section will not be added as a main part of the page.

If possible, the footer section will be hidden when filling out the
form. This will allow users to complete the form faster since their
attention will be centered on the form itself and not in the
adjacent elements of the page. There will be no lateral bar or
lateral navigation bar while filling out the form. This will maximize
the space available for the form. It will also allow us to use bigger
fonts and fields.
This also will help people with some sort of visual disability. Since
the space for fonts and fields will be maximized. The attention of
the people that are easy-distractible will be focused on the big
section of the page. This section will contain the fields and labels
that will indicate the users the actions to take and what is next to
do.

Mobile Version Design

The mobile version of the
page will be more space
restrictive. It will utilize as
much space as possible
depending on the device the
page is visualized. Mobile
devices have a limited
space.

Furthermore, the space

available varies greatly
depending on the device.
For that reason, our mobile
design will hide the header
section or upper navigation
bar. Instead, once the site is
opened in a mobile device,
a hamburger-like menu will
appear in the upper-right
corner of the device screen.

When the user taps on this

option the navigation bar
will display. This avoids the
utilization of space for tasks
that will take away attention of the user and minimize efficiency.
Likewise, the footer section will be hidden completely while using
a mobile device to access the website. Instead, the information
section will be added to the hamburger-like menu on the top of
the screen.

Section 5: Data Validation

In Line Validation
For field validation the website will combine
color and text when a value is missing or
incorrect. This will ensure that color-blind
people can still use the website effectively
and efficiently. They will not miss the
validation notice since the text will also
indicate that the field is missing a mandatory
value, or the entered value is incorrect.

Likewise, mandatory fields will be notably

marked as such by using an asterisk in red
color. Just fields that are mandatory will have
this asterisk. By doing so we avoid confusion
in people with sight limitations.

For instance, when a user leaves a blank field

that is mandatory or the value entered is
incorrect, the application will indicate that to the user. It will do so
by changing the field’s border color and showing a validation
message below the field.

The text displayed below the validated field will be big enough so
the user can notice that there is an error. The user will also be
able to clearly read what is the error.

For people that cannot read, adding a clear and precise error
message will help their page-reading software to convey to them
what the error is. This type of software is capable of
understanding what parts of the page labels are and ready them
back to the user.

Post Submit Validation

Once the user has submitted the form and a validation message
has been returned from the backend, a pop-up window will clearly
indicate what the error is. The window will be color-coded but will
also contain clear written messages indicating the error returned
from the server. When the user closes the window, the fields
containing the error will be marked in red and an error message
for the field will be displayed below it.
Section 6: General Accessibility

For the sake of clarity, validation will happen both client side and
server side. Visual feedback in the form of red text will indicate to
the user that the input they have just completed is not
acceptable. So to not confuse the user, there will be no “greying
out” of the submit button unless all of the fields are validated.
Instead the user will be able to submit, but the page will just
refresh and alert the user to the fields they must correct. What
happened and how to fix it will be clearly displayed. To aid in
accessibility default HTML5 input types will be used. Default input
types like: <button>, <checkbox>, <date>, <email>, <file>,
<number>, <password>, <text>, and others. are easily dealt
with by screen readers and other assistive technology. This will
also make coding easier as most of the functionality is built in.

Section 7: Common Errors

Errors in text inputs:

● length - There will likely be an upper and lower limit to the

size of most text inputs.
○ “First name needs to be less than 30 characters”

Errors in number inputs:

● Type error - if the user inputs anything but a number into the
field.
○ “Please only enter numbers”
● Length error - There will likely be an upper and lower limit to
the size of most number inputs.
○ “Phone number must be at least 8 digits”

Select Dropdown errors:

● No selection made - if the default “select an x” value is still

chosen when the user tries to submit the form.
○ “Please select a state”

Empty Errors

● Incomplete form - if the user has not filled out the necessary
fields to progress the form.
○ “Please fill out Last Name before submitting”
Section 8: Omitted Questions from Original Form

1. The applicant’s maiden name

a. This information can be used to differentiate

applicants’ genders and could be used as a motive for
discrimination against sex or marital status. (FL Stat. Sec.
112.042 et seq. from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

2. The entire section of “PERSON TO BE NOTIFIED IN CASE OF

EMERGENCY”

a. This information could be seen as a question about

national origin, marital status or sexual orientation. (FL Stat.
Sec. 112.042 et seq. from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

Note: These questions can be asked after employment

3. The entire section of “MEDICAL HISTORY”

a. This information could be used as a motive for

discrimination of those with disabilities or race. (FL Stat. Sec.
112.042 et seq. from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

Note: These questions can be asked after employment

4. The applicant’s race

a. This is a question that discriminates against race. (FL

Stat. Sec. 112.042 et seq. from https://hr.blr.com/HR-
topics/Discrimination/Interviewing/Florida)

5. The applicant’s gender

 a. This is a question that discriminates against sex. (FL
Stat. Sec. 112.042 et seq. from https://hr.blr.com/HR-
topics/Discrimination/Interviewing/Florida)

6. “DAYS AVAILABLE TO WORK”

a. This information can be used as a proxy question for

religious observance especially if the weekends are not
chosen which would be discrimination against someone’s
religion. (FL Stat. Sec. 112.042 et seq. from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

7. Section on “CRIMINAL BACKGROUND”

a. This section would be permissible if the job is security

sensitive. The Ban the Box law does not necessarily have
statewide regulation but cities in Florida—including
Jacksonville—have policies for public sector jobs that do
implement its regulations. Rejecting applicants on conviction
record has shown to be disproportionate towards some races
which is racial discrimination. (FL Stat. Sec. 112.042 et seq.
from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

8. Question on “honorable discharge”

a. Questions about honorable discharge can lead to

obtaining information about medical disabilities which could
lead to discrimination of those with disabilities. (FL Stat. Sec.
112.042 et seq. from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

9. Questions about owning a vehicle, the make, model and

year, car insurance and using a personal car for work
 a. The answers to these questions could be used to
reference people’s economic status which could be tied with
discrimination against sex, race or color. (FL Stat. Sec.
112.042 et seq. from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

10. The applicant’s current marital status

a. This is a question that discriminates against a marital

status. (FL Stat. Sec. 112.042 et seq. from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

11. Questions about children (i.e. “Do you have an children,”

“how many,” and “days of work missed due to a child’s illness/out
of school”)

a. These are questions that ask about family status

which be questions that discriminate against race, religion,
sex, pregnancy, marital status, age and/or disability. (FL
Stat. Sec. 112.042 et seq. from https://hr.blr.com/HR-
topics/Discrimination/Interviewing/Florida)

12. Question about health insurance and ever losing it

a. The answers to these questions could be used to

reference people’s economic status which could be tied with
discrimination against sex, race, color, pregnancy, marital
status and/or disability. (FL Stat. Sec. 112.042 et seq. from
https://hr.blr.com/HR-topics/Discrimination/Interviewing/Flori
da)

Section 9: Modified Fields

Personal Details

This section will be like the original application form with minor
adjustments:
 • The maiden name will be omitted as reasoned out in
section 8 of this document.

• The phone numbers will have a choice of which one is the

preferred primary number so that contacting the applicant will be
more efficient.

• The SSN# will not be included even though there are no

laws that prohibits asking this question, it could lead to privacy
issues. Asking for someone’s social security number is seen as
bad practice and should only be asked later in the process for
criminal background checks. If this is the case, then the applicant
will be notified that a criminal background check is needed for
this job.

• After asking if the applicant is at least 18 years old to be

able to legally work in the U.S., there will also be a question
whether the applicant is authorized to work in the U.S. to avoid
any illegal hiring and work. It will be noted that proof of this such
as proof of citizenship, visa or alien registration number will only
be asked for after being hired to avoid discrimination laws.

To improve organization and accessibility of the data, all items

deemed appropriate from the miscellaneous sections from the
original application will be put under personal details instead of
being scattered around in the application. So, the questions about
employment availability (i.e., hours, night shift, possible first day),
employment type (i.e., full-time, part-time), military status and
having a driver’s license will immediately follow the questions on
personal details and will be categorized appropriately.

• For military status, the applicant will be asked if he/she is a

protected veteran to avoid discrimination under the Vietnam Era
Veterans’ Readjustment Act.
 • Notably, the questions about driving history (i.e. accidents,
violations, and suspension) will only be asked if the person
answers “yes” to having a driver’s license to improve layout.

Education

This section will be like the original application form with minor
wording adjustments:

• Graduation date will be changed to “Dates from and to” so

that there is better accuracy of information

• School types will only show the options high school and
college because the enumeration of undergraduate, graduate,
post-graduate and professional can be determined when the
major/degree/certificate section is filled

• Question of “what is the highest diploma/degree/certificate

you have earned” will be omitted because that information can be
determined when the major/degree/certificate section is
completed

Employment History

The data field names in the work experience section of the

original application form will not change. There will be an option if
the applicant wants to add more work experiences and a group of
fields will be available. This avoids having an excess of data
fields, inaccuracy in data filling and improves accessibility as the
user only views one grouping at a time. A grouping consists of the
employer name, name of last supervisor, employment dates,
pay/salary, address, city/state/zip, telephone, job title, email,
reason for leaving and duties/skills/advancements/promotions
learned and earned.

References
The reference section will have minor changes:

• The applicant will only see one grouping of data fields to

improve accessibility instead of looking at all four fields that
needed to be completed—this is like employment history layout.
A grouping for the references will include name of reference, title,
company, address, telephone, email address, and years known.

• A data field for “years known” will be added per reference

to improve accuracy of information.

Note: Sections of Additional Skills and Experience and Application

Acknowledgement and Waiver will remain in their positions at the
penultimate and final positions, respectively.

Section 10: Application Acknowledgement & Waiver Statement

To move forward with the hiring process, I agree to the terms and
conditions below. My at-will status with Unfinished Business will
not change for any reason like:

My application passes or is cleared. I am offered any type of

position. My contract is not guaranteed until it is finalized.
My written contract does not change for any reason. Nothing
can take the place of a contract that is signed by both
parties. Unless the president of the company and my
signature are given to make any changes.

In addition, I agree that I can end my employment at any

time that I choose. My employer does have the right to end
my employment at any given time. Lastly, my employer
does have the right to change or update benefits, policies, or
practices. This means that I agree that my employer has
permission to reduce or change my benefits.
I agree that I have read and fully understood this application. I
agree that I did not lie or mislead the employer while completing
this application. If I did lie or mislead my employer, I understand I
can be fired without notice. I agree that by including any
reference like a previous school or employer will be contacted by
Unfinished Business. I agree that I will not hold my employer
accountable for calling my listed references. I agree to take a
drug test at any point in time while working with Unfinished
Business. The drug test may come during the hiring process or
while being an employee of Unfinished Business. I understand
that this is part of the company policy and that I must always
follow the policy.

I agree that a background check may or not be used to process

my employment. It can include financial information. This will only
be completed if it is required for the position I am hired for. I know
that I have the right to request a copy of the information provided
by the background check from Unfinished Business. Finally, I
agree that my job for the next 60 days will be a trial period. In this
trial period I know that my employer has the right to end my
employment.

By signing below, I agree to all the above terms and conditions.

Applicant (Signature): ____________ Date: ___________

UNFINISHED BUSINESS IS AN EQUAL EMPLOYMENT OPPORTUNITY

EMPLOYER.

THANK YOU FOR FINISHING THIS APPLICATION AND YOUR

INTEREST IN UNFINISHED BUSINESS.