Movie tickets booking system (Frontend only)

I developed this tickets booking system recently to showcase HTML5 features. I would like you to review it from the UI/UX perspective. Also if there is something more that I can add.

Is it good enough?

JS/HTML5/CSS3:



`$(document).ready(function(){

// first check the movies already booked
checkMoviesBooked();

// apply jQuery UI Redmond theme to 'Book Tickets' button
$("#submit").button();

// calculateTotalPrice on keyup or on change of movie/date/tickets
$("#movie_name, #date, #tickets_quantity").keyup(calculateTotalPrice);
$("#movie_name, #date, #tickets_quantity").change(calculateTotalPrice);

// on form submit
$("#book_tickets").submit(function(event){

// prevent on submit page refresh
event.preventDefault();

// check locally stored data
if(window.localStorage){
var moviesListJson = localStorage.getItem('movies_list');
var movies_list = moviesListJson ? JSON.parse(moviesListJson) : [];
var movie = $("#movie_name").val();
movies_list.push(movie);
localStorage.setItem('movies_list', JSON.stringify(movies_list));
}

// clear the form
$( '#book_tickets' ).each(function(){
this.reset();
});

// reset (enter data first) message
$("#total_price").html("(enter data first)");

// update movies booked list
checkMoviesBooked();
});

// set minimum date in datepicker as today
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('min', today);

});

function calculateTotalPrice(){
if($("#tickets_quantity").val() != "" && $("#movie_name").val() != "" && $("

UX (User Experience)

I'll start with a few possible improvements to the User Experience functionality.

-
In order to offer the best possible interface you have to provide the same or similar experience in all browsers, simply listing something isn't supported, in my mind, is lazy and not a great UX/UI option. I'd look into webshims or a similar polyfill. Basically, you should provide a fallback or functional date picker in browsers that don't support the HTML5 feature. Check the caniuse.com and html5please.com to see support levels and polyfill options for all these HTML5 features.

-
There is no mobile optimized content or media queries. There is an increasing number of movie goers that are utilizing mobile devices in order to purchase tickets. Not providing mobile optimized layout is a huge draw back to the UX for half the people that would utilize this tool. (source)

-
I'd look into Flying Focus to provide tabbed and arrow key users the ability to see where they are going when tabbing through fields.

-
I'd look into `'s (webshims provides support for it) to use in place of your 's, but since support is shaky for this HTML5 feature you could also provide a search box in the dropdown similar to Select2 in browsers that don't support it or if you choose not to polyfill.

UI (User Interface)

To me, this tool is a bit bland, it has a fairly antiquated look/feel. I'll offer a few suggestions that may help you achieve a better UI. That said, it doesn't look bad, just old.



• Since is difficult to style, I would visually hide it (see .visuallyhidden style below) and apply an or some other form of heading that is easier to style.

css

.visuallyhidden {
     border: 0;
     clip: rect(0,0,0,0);
     clip: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;
     width: 1px;
     margin: -1px;
     padding: 0}

html

Booking Details
Booking Details

-
A possible option to bolster the appearance is to provide some contrast using color, having the border to separate the modules is fine, but perhaps you could look into using background as an additional way to ease some of that excessive white color. This Fiddle is a quick example of using color to separate items in a little more up to date fashion.

-
I'd recommend using a to do the styling for the form areas, and having the 's styles removed. (see fieldset normalize & reset below)

css

/* from http://necolas.github.io/normalize.css/ */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em}
    /* remove default styles */
    fieldset {
        border: 0;
        margin: 0;
        padding: 0}

-
I'd add a greater padding on the form fields to offer interaction with touch screens. The code below should suffice.

input,select{padding:7px}

-
I'd also add some transitions transition:all .2s ease; to ease changes to different form states. :focus, :hover, onmouseenter, onmouseleave or something of the sort.

-
I'd also take advantage of the placeholder option and tabindex attributes. A good rule of thumb is the ` is for the descriptor, the placeholder is for an example.

-
I won't touch base on the semantics too much, but I will say you should add ARIA support.

I like the idea, I just think the concept fell a little short. Providing a simple method of searching movie options in a easy to use form is great; however, the concept isn't used very often due to people being more visual these days, using forms for searchable content works in some cases, but I'm not entirely sure it is suitable for this particular instance.

Take a look at Flixter, I love the UI/UX on both the mobile and desktop versions. It's very intuitive and easy to navigate, seeing what's playing shows the actual movie cover instead of having a bland form to interact with.

Links list:

• http://afarkas.github.io/webshim/demos/

• http://nativemobile.com/mobile-playing-increasingly-vital-role-among-moviegoers-6253

• https://github.com/NV/flying-focus

• http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element

• http://afarkas.github.io/webshim/demos/#Forms-forms

• http://html5please.com/#datalist

• http://ivaynberg.github.io/select2/

• http://necolas.github.io/normalize.css/

• http://www.flixster.com/#/browse

• http://caniuse.com/

• http://html5please.com/

• http://www.w3.org/WAI/intro/aria

• http://jsfiddle.net/darcher/9u45Q/60/

StackExchange Code Review Q#49623, answer score: 6