UI/UX

UI is the saddle, the stirrups, and the reigns.

UX is the feeling you get being able to ride the horse, and rope your cattle.

rileyh.com/usc-js

UX (User Experience)

• How should the user flow through the interface.
• What should a status color indicate?
• How should the layout be scoped?
• UX should be intuitive
• The user should not have to be taught 

rileyh.com/usc-js

Which Color is Correct?

Color Choice (UX)

Answer: neither!

UI (User Interface)

• Where humans and machines interact
• Translation layer between human and machine
• UI design builds the element look and feel
• UI engineering builds the translation layer

rileyh.com/usc-js

Which is best?

<!-- Submit Name to Server -->
<form action="process.php" method="get">
  First name: <input type="text" name="fname" required ><br>
  Last name: <input type="text" name="lname" required ><br>
  <input type="submit" value="Submit">
</form>

<!-- Submit Name to Server -->
<form id="a-sweet-form">
  First name: <input id="fname" type="text" name="fname" required ><br>
  Last name: <input id="lname" type="text" name="lname" required ><br>
  <input type="submit" value="Submit">
</form>

<script>
    $('#a-sweet-form').submit(function(e){
        e.preventDefault();
        var form = { lname: $('#lname').value() , fname: $('#fname').value() };
        $.get( "process.php", form, function( data ) {
          // Notifies user that their request worked
          alert( "Hey there! Your request was a success!" );
        });
    });

</script>

A) 

B) 

Answer: Usually A 

• Most accessible option
• Works if user has JavaScript disabled
• Simpler solution using browser API
• Progressive Enhancement 

• Can limit developer creativity

rileyh.com/usc-js

Progressive Enhancement

vs.

Graceful Degradation 

rileyh.com/usc-js

Graceful Degredation

• UX designed for modern browsers
• Gracefully Degrades UX to accommodate older browsers

• Limits to amount of degradation
• Future browser changes could break older code

rileyh.com/usc-js

Progressive Enhancement

• Starts from reverse side of Graceful Degradation
• Enhances UX according to browser support
• Known for better support of older technologies

• Can be difficult to implement latest UX trends

rileyh.com/usc-js

Project Lifecycle

• Concept / Requirements
• Research
• UX
• Wireframe
• Static Code
• Dynamic Code
• Refactor
• Submit for approval
• Commit to Production

rileyh.com/usc-js