Gabe

Gabe

Location

Effort to convert into PL

Form Layout

Alignment

Label location

Tooltips

Placeholder text

Validation

Location of validation

Advance input fields

Semantic HTML

Links

Action buttons

Submit

Screenshots

Location

Effort to convert into PL

Form Layout

Alignment

Label location

Tooltips

Placeholder text

Validation

Location of validation

Advance input fields

Semantic HTML

Links

Action buttons

Submit

Screenshots

homepage

 

Single form input field and button

inside navigation somewhat right aligned

positioned within form field

none

"Search" but it does not disappear once the user starts typing

 

 

 

 

"Return" key or click on magnifying glass runs the search

"Return" key, or click magnifying glass

 

Active state:

homepage

 

single form input field and button

right aligned

none

none

none

 

separate page with new set of form fields

 

 

 

 

 

Active state:

Validation:

/course

 

Single form input field and button

right aligned

within form field

none

"Search" but it does not disappear once the user starts typing

 

above search results

 

 

 

"Return" key, or click magnifying glass

 

Active state:

Validation:

While search is running the query:

/careers

 

single dropdown

left aligned

none

none

N/A

N/A

N/A

 

 

 

 

 

dropdown at the bottom of this screenshot:

/careers

then click Apply Now, then click a specific listing

 

single column

left aligned

 

none

 

 

 

 

 

 

 

 

many more fields below this set

https://courses.edx.org/register

 

single column

center

above each field

none

semantic to each field

 

above the form at the top of the page, lists what you missed

 

 

 

"create your account"

 

Active:

Validation:

blog.edx.org

 

single form field

right aligned

none

none

"enter keywords"

 

search results page with text

 

 

 

 

 

Active:

Validation:

blog.edx.org (login for wordpress)

 

single column

center

above each field

none

none

 

above all fields

 

 

"forgot password"

 

 

Active:

Validation:

/enterprise

 

single column

right align

above each form field

none

none

 

above form

 

 

 

 

 

Active:

Validation: