Hotel reservation website UI specification Tom Hastjarjanto Christina Manteli Oscar de Groot Benjamin Bach

Page Flow Diagram

Assumptions Suggestions are only relevant if there are no matches All necessary information about a room type can be displayed in the results list Specification is intended both for developers and designers An existing back-end specification supports this UI specification Conventions Every page is considered a function taking arguments – e.g. Page(someArgument) “  Page(…)” indicates navigation to specified page.

Search(errorList)

Description: Main search form for available rooms Labeled input fields for – Date of arrival – Date of departure – Number of people – Desired room type Page will include error messages (errorList) if previous search input was invalid. When form is submitted: – If valid  Search(errorList) – Else  Results(…)

Results(searchInput, pageNo, sortOrder)

Description: Display list of matches or suggestions based on user’s input If there are exact matches – Display matches in ResultPanel Else if there are suggestions – Display suggestions in ResultPanel Else – Display message that there are no results.

ResultPanel Description: A list of bookingOptions (matches or suggestions) that can be sorted and browsed per page. A message describing the type and number of bookingOptions For each bookingOption, display: – For each room type in bookingOption, display: Room type, description, picture – Total price – Checkout button  Checkout(bookingOption, error) Asc./desc. sorting buttons – Total price of each bookingOption  Results(…, …, sortOrder) Limit no. results per page to some constant: – If next page exists: Display next-button – If previous page exists: Display previous-button

Checkout(bookingOption, errorList)

Description: Input form for user’s personal data and payment information Display brief overview of selected bookingOption Page will include error messages (errorList) if previous checkout input was invalid. On Submit, information is validated: – If valid  Confirmation(bookingOption, checkoutDetails) – Else  Checkout(bookingOption, errorList)

Confirmation (bookingOption, checkoutInput)

Description: Allows the user to review his choices so far and confirm them. Displays an overview of: – Details of the booking option – Supplied personal information – Supplied payment details Confirm-button  Completion()

Completion() Congratulation, you’ve just successfully booked a set of rooms. Rest assured that you will be billed.

Questions?