Interface Structure

The application's visual architecture focuses on organizing, structuring, and labeling functionality in an effective way. The goal is to help users intuitively find information and complete tasks. The two primary areas are the Passenger Name Record (PNR) and the Terminal.


Travelport Smartpoint is divided into 2 primary areas.

PNR Viewer

The PNR Viewer is on the left side. This is where the booking file details appear.

Terminal Window

The Terminal window is on the right side. This is where the agents enter formats and obtain general responses.

sp1gv-interface-example

Header

The Header contains (left to right) the Application Icon, application title, work area tabs, connection dropdown and terminal mode switch

sp1gv-interface-header-dropdown

PNR Viewer

The PNR Viewer provides an instant view of the PNR/ Booking File. It shows all relevant PNR/ Booking File information, with the primary view featuring the passenger(s), flight segment(s), and the data toggle buttons.

sp1gv-interface-pnr-example01

PNR Action Bar

The PNR action bar contains functions that interact with the PNR screen or provide general application feedback.

The PNR icons are 40 pixels x 40 pixels with a 5 pixel margin. The PNR icons have 4 states: Default, hover, down and selected (hover triggers a tooltip). Clicking on an icon will trigger an action or display a menu which opens above the icon.

PNR action bar menus should open above the clicked icon. The menu window should not expand beyond the PNR area.

sp1gv-interface-pnr-actionbar-flyout
sp1gv-interface-pnr-actionbar-iconstates sp1gv-interface-pnr-actionbar-menus

Application Menu

The application menu provides access to terminal and window configuration options, history options and access to the Smartpoint tools

sp1gv-interface-header-menu-dropdown

Terminal

The terminal area includes the terminal windows (tabs) and the terminal action bar (right).

sp1gv-interface-terminal-example01

Terminal Interactions - Color Uses

The terminal utilizes different colors to indicate the interactions that an item provides.

sp1gv-interface-terminal-interactioncolors

Green Links - #00DD00
Green links indicate that the link relates to a primary action, such as "Book," or that clicking the link will open a window or replace the current display with a different one.

Blue Links - #43C0FF
Blue links indicate that the link relates to additional information, and should only be used on text that reveals a tooltip, or reveals additional text within the current display.

Orange Links - #F39A26
Orange links indicate warnings, and may or may not be clickable. For example, wait-listed flights and unknown hotel rates are displayed in orange.

White Text - #ffffff
White text is always non-clickable, and is generally support text.

Terminal Interactions - General

The following are a few examples of interactions available from the terminal.

sp1gv-interface-terminal-splitscreen02
sp1gv-interface-terminal-splitscreenmodification

Terminal Color Schemes

The terminal has multiple themes that the user can choose from.

sp1gv-interface-colorschemes

Terminal Action Bar

The Terminal action bar contains functions that interact with the terminal screen. The area is 55 pixels wide with a 5 pixel padding. Terminal action bar content should be no wider than 45 pixels. The terminal action bar is divided into two sections. First, icon triggered actions on top followed by buttons below. The buttons are divided into two areas: queues and plugins.

sp1gv-interface-terminal-actionbar-allicons sp1gv-interface-terminal-actionbar-standardicons
sp1gv-interface-terminal-quickcommands-example sp1gv-interface-terminal-quickcommands-replay sp1gv-interface-terminal-actionbar-filters sp1gv-interface-terminal-actionbar-flyout