Interaction Patterns

Establish Guidelines and a Common Nomenclature to Describe Interaction Patterns

Establishing a set or library of interactive patterns involves several important practices. The first order of business is establishing a basic set of web guidelines.


Solving the Hierarchy Problem – Exhibit A

Problem: In the FNB commercial card environment, companies can be set up with in an infinite number of Account Groups and sub groups within those Account Groups. Under those account groups, there are a possible infinite number of Account Holders. Think of organizational structure such as a university; there are various colleges (account groups), departments within those colleges (account sub-groups), students, instructors, administrators, etc. (account holders). Creating a hierarchy that was compact and modular was essential. The ability to accommodate a small commercial card business as well as a complex business with multiple groups and account holders with the same interface was the challenge.

Avoid the “nested tree” – while in some circumstances, this may be an appropriate solution, but when it comes to commercial card scenario of needing to select from multiple account groups, sub-groups, and users the nested-tree could become visually complicated and confusing.

Solution: Allow users to easily select desired account group, sub group and account holder from an Account Selector widget. The goal was to accommodate a small, medium, large. and x-large commercial card business environments with a single, intuitive interface. This interactive design pattern was used throughout the site because most functions within the commercial card domain required account group selection.


The Ad-Hoc Button Placement Quandary – Exhibit B

Problem: Prior to proper analysis and style definitions, buttons were used based on the whims of developers or product owners during the delivery phase of the product. This resulted in ad-hoc button usage, inconsistent placement and hierarchy.

There was a lack of consistency and confusing ordering of desired actions. I was able to determine through quantitative and qualitative analysis that this experience was costing the bank valuable conversions.

Solution: Clearly define a set of guidelines for A: when buttons should be used B: how they are used (placement, ordering, etc.) and C: insure guidelines are adhered to during the feature and user story phases.


  • Determine what the desired Primary Action is for interactive component. Once determined, this is granted “button rights” and can be assigned as a button.
  • Primary action button is aligned right within the interactive component container.
  • Determine secondary and tertiary actions. These are not granted “button rights” and are assigned as links. These will be aligned in descending order from right to left of the Primary Action.
Enhance the Balance Transfer Experience – Exhibit C

Problem: Through a combination of quantitative and qualitative analysis, it was determined the established pattern for completing a balance transfer online was costing the bank valuable conversions. In order to complete a balance transfer a customer had to input a 3 digit code from an offer they received in the mail. We found this to be a major fail point. Another problem there were a possible 8 steps a customer could take during the balance transfer application process. Most steps were not critical to balance transfer conversion.

Solution: Remove the 3 digit offer code input requirement and allow user to select from up to three balance transfer offers in the initial balance transfer step. Remove the credit limit increase option – user can still apply for a credit limit increase, but this can be achieved outside the balance transfer interaction. We were able to reduce the number of steps the user had to complete in order to complete a balance transfer.

Modularity – Adding Content to Existing Page – Exhibit D

Problem: FNB offered FICO Scores to account holders. FICO had numerous compliance restrictions and very specific guidelines on how FICO Scores are displayed. I designed FICO “summary page” that incorporated those requirements. After the product was released, FICO wanted educational videos included within the summary page. I needed to solve for including the numerous videos in a way that did not overwhelm the page.

Solution: Combing the videos into a carousel was a solution that allowed for multiple videos to be displayed in a non-obtrusive way – while maintaining site consistency.


Modifying an Account – Exhibit E

Problem: A common interactive pattern on the banking site is modifying an account in some fashion – be it requesting statements or ordering checks, etc.. There are multiple types of accounts – checking, savings, loans, credit cards, etc. – that may or may not be eligible for modification.

Solution: Create a standard and modular interactive pattern that allows user to select from multiple accounts. Also do not list accounts that are not applicable to specified action.