3. Help on Template Editor
• Design Help file to indicate “How Template Editor works” and its properties
• Text Help file to indicate “Text editor properties”
• Send Test Email will open a pop up where the User can Quicksend a test mail to a
manually added email address.
• Preview Email opens the HTML file a new Window
5. On Mouse Hover & Clicks
On Mouse hover the Black border frame appears on the UI. This
should be non-moveable border.
The section name in the template also gets defined on the
middle of the div.
On Mouse Click the Div enters the Editable state.
*Deleting Multiple container can also be implemented in case of long scroll email templates.
Email Body Content
6. Mouse Cursor UI on Div
• On Click
• On Mouse Hover for div & for links
• On Mouse Down (Hold) for div & for links
• On Mouse Move (Drag) for div & for links
• On Mouse Up (Drop)
Above are the standard defaults used in various operating systems. Use of customs can also be done to add
better Usability during interactions.
8. Duplication
Hover focus shifts on the newly created container;
Feature case: on clicking the container area it should become
editable. This works in-sync with edit button functions.
The duplicated container is always created below the
parent container.
9. Deletion
Displays a JS message:
“Are you sure u want to delete this section?”
The deleted section cannot be restored once deleted
Ok |Cancel
*Deleting Multiple container can also be implemented in case of long scroll email templates.
* The deleted section can also be restored as per a history which would required the Template Editor to have Redo-Undo Functionality
10. Drag-Drop a container
Detailed Interaction Diagram:
(Refer excel for more details)
Property:
Page Load Mouse Hover Mouse Down Drag Initiated
Drag Leaves
Original Location
Drag Re-Enters
Original Location
Drag Enters
Valid Target
Drag Exits
Valid Target
Drag Enters
Specific
Invalid Target
Drag Exits
Specific
Invalid Target
Drag is Over No
Specific Target
Drag Hovers
over Valid
Target
Drag Hovers
over Invalid
Target
Drop
Accepted
Drop
Rejected
Drop On
Parent Container
Page drag invitation,
help file that
suggest how
drag works.
Cursor normal (default) draggability
grabbable area
displays
selected (drag) dragging (drag) dragging (drag) dragging (drag) drop will be valid (Tick) drop will be invalid
(Cross)
drop will be invalid
(Cross)
drop will be valid;
(Tick)
springloading - a
state where void
expands
drop will be invalid
(Cross)
drop was accepted
(Can animate)
drop was rejected
(Can animate)
drop returned home (Can animate)
Tool Tip "This area can be
dragged."
Drag
Object
normal draggability
grabbable area
displays
selected dragging dragging dragging drop will be valid drop could be valid
or invalid,
depending on
whether the drag
has proceeded
directly to another
valid target
drop will be invalid drop could be valid
or invalid,
depending on
whether the drag
has proceeded
directly to another
valid target
drop will be invalid drop will be valid drop will be invalid drop was accepted drop was rejected drop returned home
Drag
Object's
Parent
Container
normal draggability
grabbable area
displays
selected void is created void is created void goes off dragging home drop was accepted drop was rejected drop returned home
Drop
Target
normal We can provide a
drop invitation in
terms of lines.
drop invitation;
possibly starts in
neutral state
drop will lose its
neutral state: All
drop targets get a
line size
drop will be neutral drop will be valid:
The void size is
equal to drag area
any highlighting of
target should be
removed: The void
size shrinks from
drag size to line
size
drop will be
invalid: No ui
change
any treatment
given to this
specific invalid
target (e.g. a
tooltip explaining
why the target is
invalid) should be
removed or
animated off
drop will be valid:
The void size is
equal to drag area
drop will be invalid drop was accepted drop was rejected drop returned home
What does the
page contain to
indicate drag
and drop?
What happens
when the mouse
hovers over the
draggable object?
What happens
when the mouse is
pressed on the
draggable object
but dragging has
not initiated?
What happens
when drag starts?
What happens
when the drag
leaves its original
location?
What happens
when the drag
object, having
been dragged
away from its
original location, is
dragged back to
that location?
What happens
when I drag over a
valid drop target?
What happens
when the drag
leaves a valid
target? (E.g., that
target's
highlighting turns
off or animates
off.)
What happens
when I drag over
an invalid drop
target?
What happens
when I drag back
to my home
area/container/slot
?
What happens
when my drag is
over a page region
that includes no
targets, valid or
invalid? E.g off
page drops
What happens
when the drag
pauses over a
valid target? (E.g.,
the target is
"springloaded",
the drag-and-drop
canvas transforms
to reveal the
contents of that
What happens
when the drag
pauses over an
invalid target?
What happens
when the drop is
accepted?
What happens
when the drop is
rejected?
What happens when
dropped over the
original
position/container?
Drag drop container
Drag and Drop
Ideas to be build moving forward in Product
15. On Drag
• Top-Down drag: Disables top-down holder
• Left-Right drag: Disables left-right holder
• If the holder is clicked and dragged in complementary direction, then the
complementary holder activate and current holder disables. See states below.
E.g If a user clicks right holder and drags the container to right or left, the top-down holders enable and left -right holders disabe.
• If the holder is clicked and dragged at any angle then follow the same activation
pattern. No change in handles occurs in this case.
16. On Move initial
• The container which is dragged creates a void as it leaves. The width of void is
equal to width of dragged container, but the height shrinks to 20px.
20px height
17. On Move final
• The container which next to the dragged container occupies its initial place as it
leaves past it. And the void it creates as it shifts is now displayed with “Drop here”
Drop here 20px height
18. On Drop
• The drop area expands as the dragged container sits on it.
20. Mouse hover
over drag object
Mouse click on
the drag object
Drag Start Drag leaves
original place
Drag sent back to
original place
Drag Drag (Selected) Drag (Dragging) Drag (Dragging) Drag (Dragging)
“Drag this area to change
its position."
-- -- -- --
CursorTooltipInterfaceInteraction
Spring
loading
Black Border: solid 1px #4b4b4b > Increments to #000;
On hover, The tools for editing
the selected element appear .
Edit button has been kept
separate from the other two.
One, it avoids cluttered
spacing of the icons, due to
which the user may click on
the wrong icon
unintentionally. There is a
feedback on hover as the
tools and top-bar appears and
the cursor changes to a move
icon.
The element can be dragged
from any position over itself.
On mouse state click-Down,
four handles appear in
addition to the enclosing
translucent box and top-bar
disappear.
While there is drag occurring,
the handle dots change there
transparency contrary to the
movement of the element.
While dragging and dropping,
there is apparently no need
for the top function bar,
hence it is visible only on
hover, not on a mouse-down
click state.
On leave, the element creates
a void with the same width
but small (and fixed) height.
This gives the user a feedback
for successful lifting of the
element.
The visual element shall
return back to its original
position with its original visual
attributes. There is no
bounding box as it returns to
the void by spring-loading.
21. Drag over valid
drop target
Drag leaves valid
target
Drag over/leaves
invalid target
Drag exactly on
the Drop target
Drop is accepted
Drag (Dragging) Drag (Dragging) Drag (Dragging) Drag (Selected) Default
“Drop on this area."
--
“Container cant be
dropped on this area."
-- “Drag-Drop of
container was
successful"
CursorTooltipInterfaceInteraction
Spring
loading
Spring
loaded
When the element hovers on
a valid target, and the drop is
acceptable at that place, it is
surrounded by a blue box.
While the mouse state is still
down, the handles and box
stay at their place.
There shall be a prompt in the
form of a blue rectangle, that
is indicative a place being
drop-worthy. When taken
away from a valid target, the
prompt remains calling out
the validity of the drop if
made.
There is no apparent feedback
from the visual system if the
drag is upon an invalid target.
This should ensure no activity
from the user (to drop).
When a valid drop is made,
and the mouse state is no
more down, the element
settles within a blue box, this
shall appear only for 1-2
seconds and then disappear.
The element is now at its new
place and the ‘mouse-over
state’ shall sustain.
22. Feedback for Error states
Drag over outer
area
Drag pauses over
an invalid target
Drag hold for a
very long time
Drop is rejected Drop Save
becomes issue
Drag (Dragging) Drag (Dragging) Drag (Selected) Default Default (Error)
“Container cant be
dropped on this area."
“Container cant be
dropped on this area."
“Drag-drop this area to
change its position."
--
“Drop Error."
CursorTooltipInterfaceInteraction
original
While there is drag occurring,
the handle dots change there
transparency contrary to the
movement of the element.
While dragging and dropping,
there is apparently no need
for the top function bar,
hence it is visible only on
hover, not on a mouse-down
click state.
In the state of hovering or
pausing over the invalid
target, there is no apparent
feedback from the visual
system . This should ensure
no activity from the user (to
drop).
While there is drag occurring,
or the element is just being
held but a mouse-down state,
the handle dots do not
change there transparency
contrary to the state when
there is any sort of movement
of the element.
There is no tool-tip on an
invalid drop, the element just
returns to its original position
by spring-loading. The layout
regains its original form
indicating no change.
Editor's Notes
Spring Loading is the concept where something when physically moved restrains the initial state. When something is taken out from a box the box proceeds a void. Similarly when something is taken to the box the box assumes the state of the object under movement.
Spring loaded is the final condition when box assumes the state of the object which is dropped. On release it takes the final shape of the object.
Drag on the sides to be inner locked or outer locked. Overflow should be hidden.