New User InterfaceTraining Guide for eCat

November 2013

2

IntroductionThe purpose of this document is to help users quickly and easily transition to the new interface for eCat. The new interface offers a streamlined approach to navigating and using the application.

• For questions or more information, please contact ecat@mit.edu or visit the website at https://ecat.mit.edu

3

Where to find the information you need…

This guide has two sections:

• Overview of the new interface – Navigation 101– Introduces the new user interface and instructions on how

to navigate around the three main areas of the interface.

• Side-by-side comparison – What is different?– Provides a side-by-side comparison showing how and

where tasks were completed in the old interface as well as in the new interface. This information provides a great snapshot of differences.

4

Overview of the New Interface

5

Three Main Areas of the SystemThere are three main areas of the new eCat user interface explained in this training guide.

Side NavigationMenu

Top Banner

Main Workspace

6

Main Workspace The main workspace is where you view and manage the active screen. • Only the main workspace changes as you access other areas within the site. The side

navigation menu and top banner remain in place• The navigation breadcrumb in the top left corner of the main workspace tells you

where you are in the application • A drop-down icon beside a page name indicates that you can select it to access

another page

Breadcrumbs display active page and navigation path.

7

Side Navigation BarMost areas of the application are accessed from the Side Navigation bar. • The side navigation bar contains the top-level menu items • When you roll over the main menu icons, slide-out sub-menus display • Menus are generally grouped by related tasks• Click on the icon to return to the homepage from anywhere in the application

8

• Accessed directly from the Shop menu, Product Quick Search allows you to do a simple item search. In addition, quickly access advanced search and favorites.

• Note: The quick-key Alt + P also allows access to the product search.

• The My Carts and Orders sub-menu contains options for viewing your active cart, draft shopping carts and your most recent orders.

• Some users may have access to the Admin sub-menu, where they can view draft carts from other users.

Side Navigation BarShop Menu

The Shop menu contains the menu options related to shopping tasks including product quick search, access to the shopping page, favorites, and access to carts and orders.

9

• Document search tasks are accessed from the Document Search sub-menu.

Side Navigation BarOrders & Documents Menu

Menu items related to Document Search are located in the Orders & Documents menu.

10

• The View Contracts sub-menu contains all options for contract management.

Side Navigation BarCatalogs and Contracts

Tasks related to contracts are located in the Catalogs and Contracts menu.

11

• You can search on menu keywords to locate that menu in the application. In addition to menu option link, the search results display breadcrumbs that show you the path to the menu item.

• In addition to accessing the Menu Search from the side navigation bar, you can use the quick-access key combination Alt + M.

Side Navigation BarMenu Search Option

If you are unsure of the location of a specific menu, you can use the Menu Search feature . Menu Search is a keyword search that returns a list of pages containing that keyword. Search results are clickable to take you directly to the page.

12

Side-by-Side Comparison – What is different?

13

General Navigation

• The new interface features a slide-out menu. Menu items stay out of the way until they are needed for a cleaner, less cluttered site.

• The Classic interface was navigated via a tab-driven menu that is always present across the top of the page. Sub-menu items were located in sub-navigation tabs.

Classic New Interface

In the new interface, tab navigation has been replaced by a clean, slide-out side menu that displays the available menu options.

14

Menu Item Groupings

• Classic interface often separated related pages on to separate tabs. For example, the shopping page and favorites page were located in individual tabs.

Classic New Interface• Menu options are grouped by related tasks,

making them easier to locate.

• Pages are easier to find with a Menu Search option. A keyword search returns a list of pages containing that keyword. Search results are clickable to take you directly to the page.

In the new interface, the menu has been reorganized in a more logical manner to make locating pages easier. A brand new feature in the new interface is a Menu Search option to help find pages that are not frequently used.

15

• Action items were located on the shopping page. Clicking on the action item took you to the appropriate area of the application to complete the action.

Action Items

Classic New Interface• Action items are located in the top banner

making them accessible from all areas of the site. Clicking on the action item takes you to the appropriate area of the application to complete the action.

In the new interface, action items are located in the top banner area, making them accessible from anywhere in the application.

16

• Notifications are located in the top banner making them accessible from all areas of the site.

• Newer notifications are highlighted.

• You will continue to receive email notifications.

Notifications

• Notifications were not viewable in the application. You were notified by email only.

Classic New Interface

Certain action items and/or tasks trigger notifications to specified users. These notifications are not viewable in the Classic interface and are available only by email. In the new interface, you can view these notifications in the top banner. As with action items, notifications can be accessed from anywhere in the application.

17

• User profile tasks were accessed from a series of navigation tabs and sub-tabs.

• As shown below, additional task buttons may display on the main page of the user profile.

User Profile

Classic New Interface

In the new interface, the user profile contains simpler navigation. A main user profile menu groups similar tasks in a logical manner and Quick Links contain most commonly used tasks.

• All options are available in a single user profile menu. Options are grouped by similar tasks.

18

User Profile (continued)

Classic New Interface• Users access their own profiles by selecting the drop-

down menu beside the user’s name, and selecting View My Profile.

• Users would access their own profiles through the my profile link.

19

Cart Preview

Classic New Interface• The new interface features a Cart Preview. By

clicking on the shopping cart icon, you can get a quick view of the active cart from anywhere in the application.

• Clicking the View My Cart button takes you to the active cart.

• Clicking the Checkout button takes you directly to the page where you can review all order details and checkout.

• To view your current cart in the Classic interface, it was necessary to leave the page you were on and go to the active cart tab.

20

• Quick Search is still accessible from all pages, but is hidden until you select the icon to display it.

• You can also use the quick-key Alt + Q to access the Quick Search menu.

• Quick Search was located at the top-right of the screen.

Quick Search

Classic New Interface

21

In Summary… • The new interface provides a more modern, usable application for

users. We hope you enjoy working in the system!

• The same functionality is available BUT the “look and feel” is different.

• For questions, please contact ecat@mit.edu or visit the website at https://ecat.mit.edu.

22

THIS PAGE LEFT INTENTIONALLY BLANK