Browser Display & End User Experience


CMX Dashboard Administration tool enables the admin user to manage the runtime behavior and the appearance of the CMX Dashboard.

There are configuration specifications that drive the CMX Dashboard behavior and the User Interface.

Browser Display

Browser Display enables the admin user to see and manage the appearance of the CMX Dashboard services on mobile devices of the customers at the venue.

The simulator is provided as part of the CMX Dashboard Administration tool to replicate the representation specific to the end-user devices.

Currently, the CMX Dashboard supports the most of the Android & iOS devices including iPhone 4S, Samsung Galaxy S, Samsung Galaxy Tab, iPad 2.

The following is the schematic representation of the mobile browser.

Figure 9-1 Mobile browser

The administrator user can select a device type and simulate the following:

Runtime behavior

Appearances of the various settings

Banner appearance with different colors and logos

Banner animation

Icons or Images

Following are the various icons for which logos or banners can be used.

Search

Deals

HTML5 Maps

Following are the details of the logo and banner.

Main logo:

In this 7.5 release, CMX Dashboard Admin tool supports uploading the main logo as a square of any size, but is limited to 45x45 pixel to support the display aspects of various mobile devices.

Banner:

Banner should go across the end-user device in conjunction with the main logo icon. CMX Dashboard Admin tool provides color palette to pick the following

Background Color start

Background Color end (can be the same as start if no fading required)

Service icons are the ones that show up on the banner across and are location aware. Service icon specification are:

45x45 pixel for Mobile

64x64 pixel for Tablet/Desktop

Figure 9-2 Icon example

The service icons can be uploaded while creating/editing individual Services via Administration tool and can be previewed through the simulator tool.

Service Item icons are the ones that pop-up when user clicks on a Service. Service items includes deal items, offer items, map icons, store icons, messages. These icons have with the following specifications.

60x40 pixel

75x50 pixel

Rolling Messages (Advertisements) - Same as Service Item icons.

Figure 9-3 Service icons example

UI templates

The UI template is a page layout that is designed for the CMX Dashboard UI.

Runtime presentation of Service Items for a specific service should be driven through UI templates and should be configurable via Administration tool.

Currently, the following templates are supported:

Table (Item Icon, Item name + description) - Entire row can be clicked if a URL is provided. For instance, the Maps Service has various items that can be shown as a table.

Figure 9-4 Table example

Grid - It is with icon and name to display. For example, a point of interest has various items (Casino, Restaurants, and Coffee) as a 2 x 3 grid.

Figure 9-5 Grid example

Animation

Animation focuses on gaining and retaining the user attention while browsing live at the venue.

It enables the admin user to define the way logo displays on the mobile device browser.

Setting the Services appearance

To set the appearance of the services, complete the following steps:

From the left side bar menu, select Appearance. Service Bar and Animation tabs appear. Figure 12-2 depicts the settings.

On the Service Bar tab, do the following.


Step 1 Choose the type of display of the services as on-demand or always from Display.

Step 2 Choose the position of the service bar from Position. You can choose the position at the top of the mobile device browser or at the bottom.

Step 3 Enter the URLs of the websites where you do not want the services bar to appear, in the Exceptions: text box.

Step 4 Choose the background color from Background Color Start and Background Color End.

Step 5 Enter the time in (number of seconds) for which the services bar appears on the mobile device browser, in the Banner Display Time text box.


Note Minimum display time is ten seconds.


The Cisco logo is loaded as the default logo.

Step 6 To view the changes in the real time, click Auto-Preview. The right pane displays the preview.

Step 7 To save and apply the settings, click Save Settings.

Figure 9-6 Services appearance

Setting the animation appearance

You can set the way in which the service bar appears on the browser. The CMX Dashboard admin user can choose the type of animation for the service bar.

There are various options such as show from the page center, fly and bounce, rotate the logo once, rise to the top, or no animation amongst others. The following figure shows the different animation options available.

Figure 9-7 Animation options

To set the animation, do the following:


Step 1 From the left side bar menu, select Appearance. Service Bar and Animation tabs appear.

Step 2 On the animation tab, choose the animation effect for the service bar from Load Effects.

Step 3 To preview the changes in the real time, click Auto-Preview. The right pane displays the preview.

Step 4 To save and apply the load effect settings, click Save Settings.

End User Experience

The CMX Dashboard is simple and intuitive to use and provide value-added services to the customers, while the enterprise can explore revenue generation by mobile ads and analytics.

The guest or the customer at the venue is the end user of the CMX Dashboard. Following is the end user experience for instance, at a shopping center with a Wi-Fi network managed by XYZ.

A customer walks into the enterprise that has a Wi-Fi network.

The customer starts to avail the internet at the venue on the mobile device.

On the web page, a XYZ logo appears on the browser at the bottom right corner. This is an indication CMX Dashboard service is available.


Note The logo of the enterprise would appear on every web page that the customer browses.


The customer clicks the XYZ logo and opens the CMX Dashboard service bar. There is a toolbar that shows the CMX Dashboard services available at the enterprise.

The customers can click "hyper-local search" icon, enter a search keyword, and the CMX Dashboard shows the results on top of the CMX Dashboard banner. The guest can click the map logo, enter name of store or keyword, and the CMX Dashboard opens a map that displays the results.

If the enterprise wants to utilize the CMX Dashboard to generate revenue with mobile advertisement, the admin user can set the appearance of the ads.

For instance, the ad is from one of XYZ clients. They have business relationships with the ad agencies who buy ad inventory on XYZ cable television network. These ad agencies would buy the new ad inventory generated by the CMX Dashboard on XYZ Wi-Fi network. There can be a process of integration of the CMX Dashboard with XYZ's ad server.

Make a Wish

The Make a wish link on the top right corner enables you to send the feedback through email.

To access, click Make a wish. It directs you to the email id mse-wishlist-external@cisco.com on the MS Outlook.

You can send the response and comments on the CMX Dashboard to this email id.

Browser and Operating System support

The following are the web browsers and the operating systems that the CMX Dashboard supports currently.

Table 9-1 Browser &

Browser
Operating Systems

Safari

iOS

Android browser

Android

Chrome

Google Chrome OS

Mozilla Firefox

Windows, OS X, and Linux, with a mobile version for Android


OS


Note CMX Dashboard is not supported on Windows Internet Explorer on desktop devices and on Windows phones. CMX Dashboard is not supported on Blackberry.



Note If you access the desktop version of the CMX Dashboard UI on a mobile device, it can be small and unusable.



Note The CMX Dashboard supports approximately 95% of all websites.