Segmentation Tool Wireframes v · The wireframes are not designed to the grid system. Transactional...
Transcript of Segmentation Tool Wireframes v · The wireframes are not designed to the grid system. Transactional...
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
select a data collection
1
Transactional Data
Purchases
Events
select a data collection
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
select a data �eld
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
select a data �eld
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
select a data �eld
1 1 1Transactional Data
AddCancel
Purchases
Contact Filter
Each contact must have transaction.
Count Total
More Than 1
Transaction Filters
select a data �eld
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
select a data �eld
Number of Total of
The number of transactions for each contact must be More Than 1
Transactional Data
AddCancel
Purchases
Contact Filter
and 2
select a data �eld
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)
select a data �eld
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
select a data �eld
Number of Total of
The number of transactions for each contact must be More Than 11
Transactional Data
AddCancel
Purchases
Contact Filter
The Total of must beSelect Data Field 1
Transaction Filters
select a data �eld
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
More Than or Equal To
Less Than or Equal To
}
Transactional Data
AddCancel
Purchases
Contact Filter
The Total of must be 1
Transaction Filters
select a data �eld
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
select a data �eld
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
select a data �eld
1
Transactional Data
AddCancel
Purchases
Contact Filter
Each contact must have transactions.
Count Total
More Than 1
Select Data Field
�lter �elds
IDDateBasket
ItemCategoryQTYPriceVAT
Transaction Filters (optional)
2
Transactional Data
Purchases
Contact Filter
Each contact must have transactions.
Count Total
More Than 1
Basket > Category is
and
Equal To type to lookup
select a data �eld
Transaction Filters (optional)
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
Basket > Category is
and
Equal To type to lookup
select a data �eld
Transaction Filters (optional)Transactional Data
Purchases
Contact Filter
Each contact must have transactions.
Count Total
More Than 1
Basket > Category is
and
Equal To type to lookup
select a data �eld
Transaction Filters (optional)
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
The number of transactions for each contact must be
Number of Total of
Less Than 7
Basket > Category is
and
Equal To type to lookup
Basket > Category is Equal To type to lookup
Transactional Data
AddCancel
Basket > Category is
and
Equal To type to lookup
Basket > Category is Equal To type to lookup
and Basket > Category is Equal To type to lookup
and Basket > Category is Equal To type to lookup
and Basket > Category is Equal To type to lookup
and Basket > Category is Equal To type to lookup
and Basket > Category is Equal To type to lookup
Transaction Filters (optional)
Maximum of 7 transaction filters per transaction data block.(1)
1
Save prompts
Transactional Data
AddCancel
Purchases
Contact Filter
The number of transactions for each contact must be
Number of Total of
Transaction Filters
Less Than 7
Basket > Category is
and
Equal To type to lookup
Basket > Category is Equal To type to lookup
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
ItemCategoryQTYPriceVAT
1
2
3
1
2
3
Select Data Field
�lter �elds
IDDateBasket
ItemCategoryQTYPriceVAT
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
ItemCategoryQTYPriceVAT
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)
Select lookup result(3)
“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 |
Select lookup result(4)
Remove item(5)
Undo auto tagging(6)
Redo auto tagging(7)
Transactional Data
Purchases
Contact Filter
The number of transactions for each contact must be
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
The number of transactions for each contact must be
Number of Total of
Transaction Filters
select a data �eld
More Than 1
Selected data collectionThe rules you de�ne are applied tothis data collectionTransactional Data
AddCancel
Purchases
Contact Filter
The number of transactions for each contact must be
Number of Total of
Transaction Filters
select a data �eld
More Than 1
Number of transactionsThis rule is set against the number of transactions a contact has.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
More Than 1
Total of a data �eldThis calculates the sum of all transactions against a given �eld.
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
More Than 1Comparison Typeyou wish to apply against the number of transactions
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
More Than 1Comparison DataHow many transactions are you comparing for?
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
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
Each contact must have transactions.
Count Total
More Than 1
Basket > Category is
and
Equal To type to lookup
select a data �eld
Transaction Filters (optional)
Add another Data �eldSelect a data �eld to start creating your rule de�nition
Second level tooltips
Select Data Field
�lter �elds
IDDateBasket
ItemCategoryQTYPriceVAT
Filter Data FieldsStart typing to �lter the data �elds below.
Select Data Field
�lter �elds
IDDateBasket
ItemCategoryQTYPriceVAT
Date [type: Date]e.g. 23/08/2012, 18/02/2010
Select Data Field
�lter �elds
IDDateBasket
ItemCategoryQTYPriceVAT
Basket [data type: collection]contains: Item, Category, QTY, Price, VAT
Select Data Field
�lter �elds
IDDateBasket
ItemCategoryQTYPriceVAT
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
More Than or Equal To
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
‘Transaction Filters’
Transactional Data
AddCancel
Purchases
Contact Filter
The number of transactions for each contact must be
Number of Total of
Category is
and
Equal To
select a data �eld
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
Transaction Filters (optional)
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
SelectPurchases Collection
Select‘Total of’
for Contact Filters
Select‘PRICE’
SelectData Field‘Contact Filters’
Select‘Less than or
Equal To’
Type‘500’ in
Comparison data
Select‘Category’
Select‘Date’
Type‘Printers,
Peripherals, Smartphones’in comparison
data
SelectData Field
‘Transaction Filters’
SelectData Field
‘Transaction Filters’
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
and select a data �eld
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
Transaction Filters (optional)
Advanced SegmentCreation based off test requirments
Create new segment
Name Segment
DropTD Block
SelectPurchases Collection
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
‘Transaction Filters’
Select‘Date’
SelectData Field
‘Transaction Filters’
Select‘Less Than’
Set date‘1 FEB 2013’
Select‘Category’
SelectData Field
‘Transaction Filters’
Select‘not equal to’
Type‘Computers’
in Comparison data
Select‘Attended’
Select‘TRUE’
Select‘Date’
SelectData Field
‘Transaction Filters’
Select‘More Than’
Set date‘18 MAR 2012’
DropTD Block
SelectData Field
‘Transaction Filters’
Add to‘Segment’
SelectEvents
Collection
SelectData Field
‘Transaction Filters’
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
and select a data �eld
Item starts with
and
and
Date is Less Than
Category is Not Equal To Computers
1 FEB 2013
Acer
Transactional Data
Events
and select a data �eld
Attended is TRUE
and
and
Date is More Than
Course Starts with
18 MAR 2012
Adobe
Contact Filter
The number of transactions for each contact must be
Number of Total of
More Than 1
Transaction Filters (optional)
Transaction Filters (optional)
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