Segmentation Tool Wireframes v · The wireframes are not designed to the grid system. Transactional Data Purchases Contact Filter Count Total. Document Usuage ... session if they

Segmentation ToolWireframes

Author: Xavier Akram ([email protected])Version: 0.3Date: 09/04/2013

ConsiderationsPattern Library

Some elements within the pattern library might not be suitable for the

purposes of this feature. We will need to determine as per implementa-

tion which elements are/not suitable and decide upon a best alternative

to replace them.

Known elements that do not exist and will be introduced are as follows:

Numerical Stepper – an input that allows stepping numerically + / - 1

The visual design of this feature needs to adhere to the grid system in

the pattern library. The wireframes are not designed to the grid system.

Transactional Data

Purchases

Contact Filter Count Total

Document UsuageOverview of the terminology and visual indicators in this document.

Description of element / item

Click Interaction

Drag / Drop Interaction

Interaction Behaviour

Interaction Transition / Animation

Validation / Disabled

1

Hover Interaction (including delay time)

Keyboard Input and Input Term

1

1

1

1

1

1s

Hover Interaction

“...”

Modal Dimensions

556px

907px

Using a fixed size of 907px width and 556px height for the responsive

grid as it fits both screen sizes.

First Load Transactional ModalDropping the TD Block in the Easy Editor loads the modal upon releasing

it on the drawing canvas.

Drop down containing transactional data collectionsClose the modalCancel the current segmentAdd current segmentation rule

(1)(2)(3)(4)

Clicking opens the drop down to show the contained collectionsClicking closes the modal and prompts the user to save if they’ve made any changes.

(1)(2)

Fade modal from 1.0 opacity to 0.0 opacity over 500ms.(1)

Add is disabled until the user starts creating a segment on screen.(1)

Transactional Data

select a data collection

AddCancel

2

1

2

1

2

1

3 41

1

Transactional Data

Selecting a data collectionSelecting the different collections will change the interface for the user

to give only options available to that collection.

Transactional Data


1

Transactional Data

Purchases

Events


2

Transactional Data

AddCancel

Purchases

Contact Filter

The number of transactions for each contact must be

Number of Total of

Transaction Filters

select a data �eld

Clicking opens the drop down to show the contained collectionsSelects the hovered collection

(1)(2)

More Than 1

Transactional Data

AddCancel

Purchases

Contact Filter

Each contact must have transaction.

Count Total

More Than 1

Transaction Filters


Drop down changes to show chosen collection(1)

Clicking opens the drop down to show the contained collections, the currently selected collection is highlighted.

(1)

Fade filters from 1.0 opacity to 0.0 opacity over 250ms.(1)

Changing the collection prompts the user that they can only use on collection per transactional block, if the user continues the current filters (and options) set will be saved to memory and recalled within the same session if they switch back.

(1)

Contact filter - aggregation methodsComparison Operator - Equal To, Not Equal To, More Than, Less Than, More Than or

Equal To, Less Than or Equal To, Between.

Numerical Stepper (accepts input and mouse stepping)

(1)(2)

(3)

Clicking changes the statement below and the comparison methods depending on the data field selected.Shows a dropdown of available comparison operators.Clicking the arrows steps the input +1 or -1

(1)

(2)(3)

The statement below is faded (1.0 - 0.0) 250ms and the Total is faded in (0.0 - 1.0) 250ms.

(1)

Changing from count to total will keep the values of count in memory, if the user switches back to count their values will be still set.

(1)

1 11 1

Transactional Data

AddCancel

Purchases

Contact Filter

Transaction Filters


Number of Total of

The number of transactions for each contact must be More Than 1

1 11 1

2 2 3 3

Transactional Data

Purchases

Contact Filter Count Total

Data field selection for transaction filters(1)

Clicking shows the custom dropdown with a tree structured data field list and an input filter to allow searching.

(1)

The dropdown option list is faded on the screen from (0.0 to 1.0) over 150ms

(1)

Add segmentation rule to easy editor(1)

Clicking saves the segmentation and adds it to the easy editor.(1)

Fade modal from 1.0 opacity to 0.0 opacity over 500ms.(1)

Transactional Data

AddCancel

Each contact must have transaction.More Than 1

Transaction Filters


1 1 1Transactional Data

AddCancel

Purchases

Contact Filter

Each contact must have transaction.

Count Total

More Than 1

Transaction Filters


1 1 1

Contact FiltersDifferent aggregations will change the statement on screen to more

human readable format.

Clicking opens the drop down to show the contained operatorsSelects the hovered comparison operator

(1)(2)

Transactional Data

AddCancel

Purchases

Contact Filter

Transaction Filters


Number of Total of


Transactional Data

AddCancel

Purchases

Contact Filter

and 2


Number of Total of

The number of transactions for each contact must be Between

1

1

Transactional Data

AddCancel

Purchases

Contact Filter

Transaction Filters (optional)


Equal To

More Than

Not Equal To

More Than

Less Than

More Than or Equal To

Less than or Equal To

Between

Number of Total of

The number of transactions for each contact must be 1

2

TotalTransactional Data

AddCancel

Purchases

Contact Filter

Transaction Filters


Number of Total of


Transactional Data

AddCancel

Purchases

Contact Filter

The Total of must beSelect Data Field 1

Transaction Filters


Number of Total of

More Than

2

1

Clicking the radio button changes the statement view belowOpens the data field selection drop down (custom drop down)

Current statement fades out (1.0 to 0.0) 250ms next statement fades in (0.0 to 1.0) 250ms

(1)(2)

(1)

Equal To

Not Equal To

Between

Total of (Number)More Than

Less Than


Less Than or Equal To

}

Transactional Data

AddCancel

Purchases

Contact Filter

The Total of must be 1

Transaction Filters


More ThanSelect Data Field

�lter �elds

IDDateBasket

Payment

QTYPriceVAT

Amount

Number of Total of

12

3

4 1Transactional Data

AddCancel

Purchases

Contact Filter

The Total of must be 1

Transaction Filters


More ThanBasket > Price

Number of Total of

56

Filter data fields by typingData fields displayed as a tree structureParent NodeChild node of parentParent node of selected data fieldSelected node (child node)

(1)(2)(3)(4)(5)(6)

Selecting this node closes the drop down and changes the drop down’s selected state to the picked node.

(1)

Transaction FiltersDepending upon which data field is selected, different comparison

operators and value fields will be available to the user.

Transactional Data

AddCancel

Purchases

Contact Filter

Each contact must have transactions.

Count Total

More Than 1

Transaction Filters


1

Transactional Data

AddCancel

Purchases

Contact Filter


Count Total

More Than 1

Select Data Field

�lter �elds

IDDateBasket

ItemCategoryQTYPriceVAT


2

Transactional Data

Purchases

Contact Filter


Count Total

More Than 1

Basket > Category is

and

Equal To type to lookup



1 2

3

Transaction comparison operators (changes by data type)Input field (changes by data type / comparison operator)Adds a new filter

Click to show custom drop down for data fieldsSelect data field to use for filter

(1)(2)(3)

(1)(2)

Transactional Data

Each contact must have transactions.More Than 1


and



Transaction Filters (optional)Transactional Data

Purchases

Contact Filter


Count Total

More Than 1


and




1

Fade drop down control from (0.4 to 1.0) 250ms.(1)

Editor’s viewHow the statements will view within the easy editor.

Purchases data collectionThe Number of transactions for each contact must be between 1 and 2.Including only Purchases for which

Basket > Category is Equal To ‘Software’and Basket > Item starts with ‘Microsoft’and Basket > Price is Greater Than or Equal to ‘79.99’

Number of

Purchases data collectionThe Total of Basket > Price is Less Than 100.Including only Purchases for which

Payment > Method is Equal To ‘PayPal’and Payment > Card > Type starts with ‘VISA’and Payment > QTY is Greater Than or Equal to ‘2’

Total of

Interface Scrolling

Transactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Less Than 7


and


Basket > Category is Equal To type to lookup

Transactional Data

AddCancel


and



and Basket > Category is Equal To type to lookup






Maximum of 7 transaction filters per transaction data block.(1)

1

Save prompts

Transactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Transaction Filters

Less Than 7


and



Exit without adding?

You will lose all changes you’ve made to this rule.

ExitCancel

Data fields drop dropAn overview of the data fields custom drop down

Select Data Field

�lter �elds

IDDateBasket


1

2

3

1

2

3

Select Data Field

�lter �elds

IDDateBasket


Filter inputScroll data fieldsData fields

Select data field to filter results belowScroll the data fields panel to view more data fieldsSelect a data field to use in the statement.

(1)(2)(3)

(1)(2)(3)

Focused InputSuggestive Search (lookups fields as you type)Clear filter

Focus Input on click

(1)(2)(3)

(1)

1

Select Data Field

|

IDDateBasket


Select Data Field

Bas|ket

BasketItemCategoryQTYPriceVAT

1 2 3

“Bas”

Input TypesAn overview of the different input types available within the

transactional data modal.

Input [type=text] Lookup

type to lookup

|

S|

“S”

“o”

“p”

“backspace”

S|

Software

Smartphones

Screen

+

+

+

P|

Printers

Peripherals

+

+

So|

Software+

1

2

3

Software |

Software Printers |

“backspace”Software Printers|

Software |

Software

Focus input(1)

Select lookup result(2)


“backspace”

“Smartphone”, “Printer”, “Peripherals”, “Laptops”, “Computers”

Pasted listSoftware, Smartphone, Printer, Peripherals, Laptops, Computers

Software Printers|

Printers+

Software Printer|

4

Software Printers |

5

Software |

Software Printers Peripherals

Laptops Computers

Smartphone |

Software Printers

Peripherals Laptops Computers

Smartphone

|

Software, Smartphone, Printer, Peripherals, Laptops, Computers

Software Printers

Peripherals Laptops Computers

Smartphone

|

6

7

Software, Smartphone, Printer, Peripherals, Laptops, Computers |


Remove item(5)

Undo auto tagging(6)

Redo auto tagging(7)

Transactional Data

Purchases

Contact Filter


Number of Total of

More Than 1Transactional Data

17

*Removal of is one of and just use is equal to and is not equal to.

| “Gardening”

|Gardening

No results found

Gardening

Input [type=number] numerical stepper

1

1

Default value is 1(1)

Clicking adds focus onto the numerical stepper(1)

Clicking outside removes focus from the stepper(2)

1

2

1| “7”

1| “qwerty”

1|

17|

18|

17

+1 to the current value and add focus to the input(3)

-1 to the current value and add focus to the input(4)

3

4

1

letters are rejected and shows no visual feedback(1)

Input [type=date] picker

18 AUG 2010

1

Default value is today’s date(1)

Clicking adds focus on the date picker, and opens the datepicker ui modal

(1)11

18 AUG 2010|

18 AUG 2010|

13 MAR 2012

“13 MAR 2012” Return

“18/08/20”

Return

“10”

18/08/20|

18/08/20|

1

2Invalid Date03/10/2012, 03 OCT 2012

18 AUG 2010|

Input [type=date] picker “between”

17 AUG 2010 18 AUG 2010

1 211

and

18 AUG 2010and

Default value is yesterday’s dateDefault value is today’s date

(1)(2)

Clicking adds focus on the date picker, and opens the datepicker ui modal

(1)

Clicking selects the date and then puts focus on the second date input, the second date input takes the selected date + 1 day.

(2)

17 AUG 2010|

2

21 AUG 2010|and

Clicking selects the date and then closes focus on the open input.(3)

20 AUG 2010

3

1

Dates in the past are disabled from the date picker.

(1)

17 AUG 2010 18 AUG 2010and

Clicking adds focus on the date picker, and opens the datepicker ui modal(1)

Visual feedback to user informing them they can not manually enter a date in the past

(1)

1

18 AUG 2010|and17 AUG 2010 “10 AUG 2010”

and17 AUG 2010 10 AUG 2010|

1This date can’t be in the past

Tooltips are dispalyed after a 1s hover time and are present on screen until the user moves the mouse away from element.Or when the user clicks the (X)

1s

TooltipsDifferent types and states of tooltips within the segmentation tool

Transactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Transaction Filters


More Than 1

Selected data collectionThe rules you de�ne are applied tothis data collectionTransactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Transaction Filters


More Than 1

Number of transactionsThis rule is set against the number of transactions a contact has.Transactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Transaction Filters


More Than 1

Total of a data �eldThis calculates the sum of all transactions against a given �eld.

Transactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Transaction Filters


More Than 1Comparison Typeyou wish to apply against the number of transactions

Transactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Transaction Filters


More Than 1Comparison DataHow many transactions are you comparing for?

Transactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Transaction Filters


More Than 1

Data �eldSelect a data �eld to start creating your rule de�nition.

Top level tooltips

Transactional Data

AddCancel

Transaction Filters

select a data �eldData �eldSelect a data �eld to start creating your rule de�nition.

Transactional Data

Purchases

Contact Filter


Count Total

More Than 1


and




Add another Data �eldSelect a data �eld to start creating your rule de�nition

Second level tooltips

Select Data Field

�lter �elds

IDDateBasket


Filter Data FieldsStart typing to �lter the data �elds below.

Select Data Field

�lter �elds

IDDateBasket


Date [type: Date]e.g. 23/08/2012, 18/02/2010

Select Data Field

�lter �elds

IDDateBasket


Basket [data type: collection]contains: Item, Category, QTY, Price, VAT

Select Data Field

�lter �elds

IDDateBasket


Category [type: Text]e.g. Software, Laptops, Hardware

|Gardening

No results found

This category does not currently exist

Equal To

More Than

Not Equal To

More Than

Less Than


Less than or Equal To

Between

e.g. is the �eld value more than or exactly equal to your de�ned value.

Basic SegmentCreation based off test requirments

Create new segment

Name Segment

Type‘Software’ in Comparison

data

Type‘10’ in

Comparison data

DropTD Block

Select‘Category’

SelectPurchases Collection

SelectData Field

‘Transaction Filters’

Select‘Price’

Add to‘Segment’

Select‘Greater than or Equal To’

SelectData Field


Transactional Data

AddCancel

Purchases

Contact Filter


Number of Total of

Category is

and

Equal To


More Than 1

Software

and Price is Greater than or equal to 10

Purchases data collectionThe Number of transactions for each contact must be more than 1.Including only Purchases for which

Category is Equal To ‘Software’and Price is Greater Than or Equal to ‘10’

and select a data �eld


Intermediate SegmentCreation based off test requirments

Create new segment

Name Segment

Type‘Female’ in Comparison

data

Drop ‘Data Field’ block

Select‘GENDER’

Click‘ADD’

DropTD Block


Select‘Total of’

for Contact Filters

Select‘PRICE’

SelectData Field‘Contact Filters’

Select‘Less than or

Equal To’

Type‘500’ in

Comparison data


Select‘Date’

Type‘Printers,

Peripherals, Smartphones’in comparison

data

SelectData Field


SelectData Field


Select‘Between’

Set date 1‘1 JAN 2010’

Set date 2‘31 DEC 2011’

Add to‘Segment’

Transactional Data

AddCancel

Purchases

The Total of must bePrice 500Less than or equal to

Contact Filter Number of Total of


Category is Equal To

Purchases data collectionThe Total of Price must be less than or equal to ‘500’Including only Purchases for which

Category is Equal To ‘Software’ or ‘Printers’ or ‘Peripherals’and Date is Between 1 JAN 2010 and 31 DEC 2011.

Account data collectionGENDER is equal to ‘Female’

AND

and Date is Between

Printers

Peripherals

Smartphone

1 JAN 2010

31 DEC 2011


Advanced SegmentCreation based off test requirments

Create new segment

Name Segment

DropTD Block


Select‘Total of’

for Contact Filters

SelectData Field‘Contact Filters’

Select‘PRICE’

Select‘Less than or

Equal To’

Type‘300’ in

Comparison data

Select‘Item’

Filter and add all acer

products

SelectData Field


Select‘Date’

SelectData Field


Select‘Less Than’

Set date‘1 FEB 2013’


SelectData Field


Select‘not equal to’

Type‘Computers’

in Comparison data

Select‘Attended’

Select‘TRUE’

Select‘Date’

SelectData Field


Select‘More Than’

Set date‘18 MAR 2012’

DropTD Block

SelectData Field


Add to‘Segment’

SelectEvents

Collection

SelectData Field


Select‘Course’

Filter and add all Adobe

courses

Add to‘Segment’

Transactional Data

Purchases

The Total of must bePrice 300Less than or equal to

Contact Filter Number of Total of


Item starts with

and

and

Date is Less Than

Category is Not Equal To Computers

1 FEB 2013

Acer

Transactional Data

Events


Attended is TRUE

and

and

Date is More Than

Course Starts with

18 MAR 2012

Adobe

Contact Filter


Number of Total of

More Than 1



Events data collectionThe Number of transactions for each contact must be more than 1.Including only Events for which

Attended is Trueand Date is More Than ‘18 MAR 2012’and Course Starts with ‘Adobe’

Purchases data collectionThe Total of Price must be less than or equal to ‘300’Including only Purchases for which

Category is Not Equal To ‘Computers’and Date is Less Than ‘1 FEB 2013’and Item Starts with ‘Acer’

AND

Documents

Segmentation Tool Wireframes v · The wireframes are not designed to the grid system. Transactional Data Purchases Contact Filter Count Total. Document Usuage ... session if they