SlideShare a Scribd company logo
1 of 22
Download to read offline
Email Template Editor
Interactions and Scenarios
Preview Email Send Test Mail
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
Editing Scenarios
• Mouse Hover and Clicks
• Duplicate
• Delete
• Drag- Drop
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
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.
Duplication/Deletion a Container
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.
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
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
On Hover container
Transparent handles
for the container
On Hover handles
Hovering on the handles, changes the transparency css for
opposite handles.
On Click
Handles for the
container activates
When clicked on them.
On Drag Top-Bottom
On Drag Left-Right
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.
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
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
On Drop
• The drop area expands as the dragged container sits on it.
Disintegrating the states
Drag - Drop Storyboard
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.
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.
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.

More Related Content

What's hot

A360 - Guide to Getting Started
A360 - Guide to Getting StartedA360 - Guide to Getting Started
A360 - Guide to Getting StartedAutodesk A360
 
NewTek Lightwave 3D: Modifying Lightwave Objects
NewTek Lightwave 3D: Modifying Lightwave ObjectsNewTek Lightwave 3D: Modifying Lightwave Objects
NewTek Lightwave 3D: Modifying Lightwave ObjectsSamuel Edsall
 
Adobe Illustrator CS5 Keyboard Shortcuts
Adobe Illustrator CS5 Keyboard Shortcuts Adobe Illustrator CS5 Keyboard Shortcuts
Adobe Illustrator CS5 Keyboard Shortcuts Fanus van Straten
 
Adobe illustrator getting started
Adobe illustrator getting startedAdobe illustrator getting started
Adobe illustrator getting startedDanielle Oser, APR
 

What's hot (7)

A360 - Guide to Getting Started
A360 - Guide to Getting StartedA360 - Guide to Getting Started
A360 - Guide to Getting Started
 
Fusion 360 training course
Fusion 360 training courseFusion 360 training course
Fusion 360 training course
 
NewTek Lightwave 3D: Modifying Lightwave Objects
NewTek Lightwave 3D: Modifying Lightwave ObjectsNewTek Lightwave 3D: Modifying Lightwave Objects
NewTek Lightwave 3D: Modifying Lightwave Objects
 
Flash tutorials
Flash tutorialsFlash tutorials
Flash tutorials
 
Adobe Illustrator CS5 Keyboard Shortcuts
Adobe Illustrator CS5 Keyboard Shortcuts Adobe Illustrator CS5 Keyboard Shortcuts
Adobe Illustrator CS5 Keyboard Shortcuts
 
Adobe illustrator getting started
Adobe illustrator getting startedAdobe illustrator getting started
Adobe illustrator getting started
 
Acad12 tips online
Acad12 tips onlineAcad12 tips online
Acad12 tips online
 

Similar to Email template editor

Star logo nova code cookbook
Star logo nova  code cookbookStar logo nova  code cookbook
Star logo nova code cookbookBarbara M. King
 
Star logo nova code cookbook(1)
Star logo nova  code cookbook(1)Star logo nova  code cookbook(1)
Star logo nova code cookbook(1)Barbara M. King
 
Corel draw 12 notes
Corel draw 12 notesCorel draw 12 notes
Corel draw 12 notesSirajRock
 
Google earth skills
Google earth skillsGoogle earth skills
Google earth skillsMr Cornish
 
Drawing Splines on 3D
Drawing Splines on 3DDrawing Splines on 3D
Drawing Splines on 3Dgraphitech
 
Advanced CSS.pptx
Advanced CSS.pptxAdvanced CSS.pptx
Advanced CSS.pptxDiyonaVas
 
Google earth skills
Google earth skillsGoogle earth skills
Google earth skillsMr Cornish
 
Tips and tools for creating flipcharts
Tips and tools for creating flipchartsTips and tools for creating flipcharts
Tips and tools for creating flipchartsManuel S. Herrera
 
how to use design by software.pptx
how to use design by software.pptxhow to use design by software.pptx
how to use design by software.pptxNitinKumar12570
 
Google sketchup8
Google sketchup8Google sketchup8
Google sketchup8Trianz King
 
Google sketchup8
Google sketchup8Google sketchup8
Google sketchup8Trianz King
 
Petec Google Earth
Petec Google EarthPetec Google Earth
Petec Google Earthdamopsu
 
Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01momayabhavana
 
Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01bhavanalm
 
Responsive Navigation Patterns - Respond 2014
Responsive Navigation Patterns - Respond 2014Responsive Navigation Patterns - Respond 2014
Responsive Navigation Patterns - Respond 2014David Lewis
 
AiM Spinner Design Tutorial in Solidworks
AiM Spinner Design Tutorial in SolidworksAiM Spinner Design Tutorial in Solidworks
AiM Spinner Design Tutorial in Solidworksdsp39
 

Similar to Email template editor (20)

Star logo nova code cookbook
Star logo nova  code cookbookStar logo nova  code cookbook
Star logo nova code cookbook
 
Star logo nova code cookbook(1)
Star logo nova  code cookbook(1)Star logo nova  code cookbook(1)
Star logo nova code cookbook(1)
 
Corel draw 12 notes
Corel draw 12 notesCorel draw 12 notes
Corel draw 12 notes
 
mastercam_full
mastercam_fullmastercam_full
mastercam_full
 
mastercam_full
mastercam_fullmastercam_full
mastercam_full
 
Google earth skills
Google earth skillsGoogle earth skills
Google earth skills
 
Drawing Splines on 3D
Drawing Splines on 3DDrawing Splines on 3D
Drawing Splines on 3D
 
drag and drop.pdf
drag and drop.pdfdrag and drop.pdf
drag and drop.pdf
 
Advanced CSS.pptx
Advanced CSS.pptxAdvanced CSS.pptx
Advanced CSS.pptx
 
Google earth skills
Google earth skillsGoogle earth skills
Google earth skills
 
Tips and tools for creating flipcharts
Tips and tools for creating flipchartsTips and tools for creating flipcharts
Tips and tools for creating flipcharts
 
how to use design by software.pptx
how to use design by software.pptxhow to use design by software.pptx
how to use design by software.pptx
 
Google sketchup8
Google sketchup8Google sketchup8
Google sketchup8
 
Google sketchup8
Google sketchup8Google sketchup8
Google sketchup8
 
Bromley Google Earth CPD
Bromley Google Earth CPDBromley Google Earth CPD
Bromley Google Earth CPD
 
Petec Google Earth
Petec Google EarthPetec Google Earth
Petec Google Earth
 
Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01
 
Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01
 
Responsive Navigation Patterns - Respond 2014
Responsive Navigation Patterns - Respond 2014Responsive Navigation Patterns - Respond 2014
Responsive Navigation Patterns - Respond 2014
 
AiM Spinner Design Tutorial in Solidworks
AiM Spinner Design Tutorial in SolidworksAiM Spinner Design Tutorial in Solidworks
AiM Spinner Design Tutorial in Solidworks
 

More from Sandeep Supal

Software quality metrics
Software quality metricsSoftware quality metrics
Software quality metricsSandeep Supal
 
Idea digital language - UX moodboard and content writing
Idea digital language  -  UX moodboard and content writingIdea digital language  -  UX moodboard and content writing
Idea digital language - UX moodboard and content writingSandeep Supal
 
Restaurant application ux delivery
Restaurant application ux deliveryRestaurant application ux delivery
Restaurant application ux deliverySandeep Supal
 
Datagrinch product experience
Datagrinch product experienceDatagrinch product experience
Datagrinch product experienceSandeep Supal
 
Restaurant Application Project workflow
Restaurant Application Project workflowRestaurant Application Project workflow
Restaurant Application Project workflowSandeep Supal
 
Restaurant application UX delivery
Restaurant application UX deliveryRestaurant application UX delivery
Restaurant application UX deliverySandeep Supal
 
eCommerce sample wireframes
eCommerce sample wireframeseCommerce sample wireframes
eCommerce sample wireframesSandeep Supal
 
eTorF (MPAS) website-ecosystem
eTorF (MPAS) website-ecosystemeTorF (MPAS) website-ecosystem
eTorF (MPAS) website-ecosystemSandeep Supal
 
eTorF website-implementation-rules
eTorF website-implementation-ruleseTorF website-implementation-rules
eTorF website-implementation-rulesSandeep Supal
 
eTorF Website-template-documentation
eTorF Website-template-documentationeTorF Website-template-documentation
eTorF Website-template-documentationSandeep Supal
 
Stakeholder Questionnaire
Stakeholder QuestionnaireStakeholder Questionnaire
Stakeholder QuestionnaireSandeep Supal
 
Mundu entertainment Storyboard
Mundu entertainment StoryboardMundu entertainment Storyboard
Mundu entertainment StoryboardSandeep Supal
 
Course curriculum, Department of Design, IITG- India
Course curriculum, Department of Design, IITG- IndiaCourse curriculum, Department of Design, IITG- India
Course curriculum, Department of Design, IITG- IndiaSandeep Supal
 

More from Sandeep Supal (20)

Software quality metrics
Software quality metricsSoftware quality metrics
Software quality metrics
 
Idea digital language - UX moodboard and content writing
Idea digital language  -  UX moodboard and content writingIdea digital language  -  UX moodboard and content writing
Idea digital language - UX moodboard and content writing
 
CSF - UX iOS
CSF - UX iOSCSF - UX iOS
CSF - UX iOS
 
ProHealth
ProHealthProHealth
ProHealth
 
Restaurant application ux delivery
Restaurant application ux deliveryRestaurant application ux delivery
Restaurant application ux delivery
 
The restaurant app
The restaurant app The restaurant app
The restaurant app
 
Email ck editor
Email ck editorEmail ck editor
Email ck editor
 
Project iHeal
Project iHealProject iHeal
Project iHeal
 
Datagrinch product experience
Datagrinch product experienceDatagrinch product experience
Datagrinch product experience
 
Project ux intel
Project ux intelProject ux intel
Project ux intel
 
Restaurant Application Project workflow
Restaurant Application Project workflowRestaurant Application Project workflow
Restaurant Application Project workflow
 
Restaurant application UX delivery
Restaurant application UX deliveryRestaurant application UX delivery
Restaurant application UX delivery
 
eCommerce sample wireframes
eCommerce sample wireframeseCommerce sample wireframes
eCommerce sample wireframes
 
eTorF task-lists
eTorF task-listseTorF task-lists
eTorF task-lists
 
eTorF (MPAS) website-ecosystem
eTorF (MPAS) website-ecosystemeTorF (MPAS) website-ecosystem
eTorF (MPAS) website-ecosystem
 
eTorF website-implementation-rules
eTorF website-implementation-ruleseTorF website-implementation-rules
eTorF website-implementation-rules
 
eTorF Website-template-documentation
eTorF Website-template-documentationeTorF Website-template-documentation
eTorF Website-template-documentation
 
Stakeholder Questionnaire
Stakeholder QuestionnaireStakeholder Questionnaire
Stakeholder Questionnaire
 
Mundu entertainment Storyboard
Mundu entertainment StoryboardMundu entertainment Storyboard
Mundu entertainment Storyboard
 
Course curriculum, Department of Design, IITG- India
Course curriculum, Department of Design, IITG- IndiaCourse curriculum, Department of Design, IITG- India
Course curriculum, Department of Design, IITG- India
 

Recently uploaded

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Recently uploaded (19)

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Email template editor

  • 2. Preview Email Send Test Mail
  • 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
  • 4. Editing Scenarios • Mouse Hover and Clicks • Duplicate • Delete • Drag- Drop
  • 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
  • 11. On Hover container Transparent handles for the container
  • 12. On Hover handles Hovering on the handles, changes the transparency css for opposite handles.
  • 13. On Click Handles for the container activates When clicked on them.
  • 14. On Drag Top-Bottom On Drag Left-Right
  • 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.
  • 19. Disintegrating the states Drag - Drop Storyboard
  • 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

  1. 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.
  2. 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.
  3. Drag on the sides to be inner locked or outer locked. Overflow should be hidden.