SlideShare a Scribd company logo
1 of 79
Download to read offline
Pastanaga UI
Let’s make something
great together
Simplify & Focus
What a user does most
frequently in Plone?
Final users are not Admins
Simplify & Focus
• Edit a content (main action)
• Check Folder contents
• Add a new content
Simplify & Focus
Simplify & Focus
Focus toolbar
[Add content] [Folder contents] [Edit]
Simplify & Focus
!"
Main action
Don’t make me
think
• Workflows: Send back, retract,
return to, back to the future…?
• Happy path action in
expected place
Don’t make me think
Taxi, I just wanna go
to Rome!
The user don’t care about the way
Don’t make me think
Don’t ask the user how, just let him
decide where he wants to end
PRIVATE DRAFT REVIEW INTRANET PUBLIC
Just make it Public!
Don’t make me think
Follow the path intuitively,
not even reading
!"
Don’t make me think
!"
Done
Save
Accept
OK
Next
Agree
Cancel
Close
No
Dismiss
Remove
Don’t make me think
Reassurance
Don’t make me think
Hint current content status
Don’t make me think
! ! !
Edit
Draft
content
Edit
Intranet
content
Edit
Public
content
Color hint of content status
Don’t make me think
Color hint of content status
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Uncollapse toolbar to edit Private content
Visual hierarchy
Structured elements
Visual hierarchy
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Log in
Forgot password? Ask for a new password.
SIGN IN TO START SESSION
!
"
Guill O’TinaUSERNAME
••••••••••••••PASSWORD
Title
Legend, Section titling
Form
Help, secondary options
Happy path action
A CMS deserves icons
covering all its needs
Provide a full visual experience
Visual hierarchy
Drop files here or click to browse
313 icons and counting
Visual hierarchy
Navigability
Structured UI
Visual hierarchy
Standard
6 days ago
VIEW
MODIFIED
!
!
Select options here
Go somewhere to see
Reusability
Visual hierarchy
CONTROL WHO CAN VIEW OR EDIT THIS CONTENT
!PERSONAL INFORMATION
PERSONAL INFORMATION PERSONAL PREFERENCES PERSONAL PREFERENCES
Legend, Section titling
Uncollapse section
Tabs
Consistency & Patterns
Accessiblity
Consistency & Patterns
• Follow Font & Contrast standards
• Reuasable patterns keep
everything accessible
Easiness
Visual hierarchy
• Patterns make easier to
become involved and help
community
Adaptative UI
Cognitive stress
Adaptative editing
• Show to the user only what he
needs and want
• Adapt UI elements to flow
circumstances
Adaptative editing
Presenting new Pastanga Editor. Yes, it is simple!
www.pastanga.io
Adaptative editing
!
"
#
Adaptative editing guillotina.plone.org
Type content…
Type the title…
/title-of-document
Private
Adaptative editing guillotina.plone.org
Paragraph lorem ipsum dolor sum consecuteur est sit amet.
Title of document
Sure to delete?
Paragraph lorem ipsum dolor sum consecuteur est sit amet. Paragraph lorem ipsum dolor sum consecuteur est sit amet.
Paragraph lorem ipsum dolor sum consecuteur est sit amet.
www.kitconcept.com
Paragraph lorem ipsum dolor sum consecuteur est sit amet.
#252525
BOLD ctrl+B
User-centricity
Pastanaga UI
Mobile
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Log in
Forgot password? Ask for a new password.
SIGN IN TO START SESSION
!
"
Guill O’TinaUSERNAME
••••••••••••••PASSWORD
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Log in
Forgot password? Ask for a new password.
SIGN IN TO START SESSION
!
"
Guill O’TinaUSERNAME
••••••••••••••PASSWORD
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
You are now logged in! "
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
You are now logged in! "
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
!"#
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
!"#
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
!"
Public
Standard
PORTLETS
6 days ago
STATE
VIEW
MODIFIED
SHARING PERMISIONS
#
#
###
$
%Name of the content
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
!"
Public
Standard
PORTLETS
6 days ago
STATE
VIEW
MODIFIED
SHARING PERMISIONS
#
#
###
$
%Name of the content
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Guill O’Tine
Guill O’Tine
Paul One
Paul One
Anita Llonch
Anita Llonch
5 days ago
5 days ago
CREATED
EDITED
5 days ago
DRAFTED
3 days ago
PUBLISHED
3 days ago
EDITED
6 minutes ago
EDITED
!
"
#
!
"
#
History of Name of the content$
!
"
Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
GENERAL
CONTENT
Site setup
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
DATE AND
TIME
LANGUAGE MAIL
NAVIGATION SITE ADD-ONS
SEARCH DISCUSSION THEMING
SEARCH SINDICATION TINY MCE
Desktop
guillotina.plone.org
guillotina.plone.org
guillotina.plone.org
!
"
#
$
guillotina.plone.org
!
"
#
$
guillotina.plone.org
!
"
#
$
Guill O’TineNAME
PERSONAL INFORMATION PERSONAL PREFERENCES
%Guill O’Tine &
name@domain.ctEMAIL
http://EXTERNAL URL
Tell about you…BIOGRAPHY
Guill O’TineUSERNAME
PORTRAIT
Short overview of who you are and what you do
' Browse
()
Guill O’Tine
PROFILE
!
PREFERENCES
!!
SITE SETUP
126 43 13
ITEMS CREATED UPLOADS REVIEWS
guillotina.plone.org
!
"
#
$
guillotina.plone.org
!
"
Public
Standard
PORTLETS
6 days ago
STATE
VIEW
MODIFIED
SHARING PERMISIONS
%
%
%%%
Name of the content#
$
guillotina.plone.org
!
"
#
$
guillotina.plone.org
Private
Name of the document
Name of the folder
NAME
Name of the form
Name of the news
Name of the image
1 month ago
3 days ago
LAST MODIFIED
3 months agos
1 year ago
3 years ago
1 page selected items per page
None
None
PUBLICATION DATE
None
None
None
STATE ACTIONS
Intranet
Draft
Public
Public
1 2 3 4 520
HOME /
!
!
!
!
!
!
!!!!!!!!!!
" $ % &
Search…
guillotina.plone.org
Private
Name of the document
Name of the folder
NAME
Name of the form
Name of the news
Name of the image
1 month ago
3 days ago
LAST MODIFIED
3 months agos
1 year ago
3 years ago
1 page selected items per page
None
None
PUBLICATION DATE
None
None
None
STATE ACTIONS
Intranet
Draft
Public
Public
1 2 3 4 520
HOME /
!
!
!
!
!
!
!!!!!!!!!!
" $ % &
Search…
Edit
View
Set as default view
Move last
Move first
State
Type comments…COMMENTS
PrivateSTATE !
If checked, this will modify the status of the folder
and its subfolders and items.
INCLUDE CHILDREN ITEMS
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
STATE
HOME / … / SUBFOLDER / CURRENT FOLDER /
Contents!
""""""""""
NAME
Name of document
Name o folder
Name of form
Name of news
Name of the image
Name of form
Name of news
Name of news
""""""
Private
Draft
Public
Public
Public
Public
Intran
Intran
loading contents…
100%17:14G Mobile
Guill O’Tine
PREFERENCES
PROFILE
guillotina.plone.org
!
100%17:14G Mobile
!!
SITE SETUP
126 43 13
ITEMS CREATED UPLOADS REVIEWS
guillotina.plone.org
!
"
#
$
guillotina.plone.org
!
"
#
$
guillotina.plone.org
!
"
#
$
guillotina.plone.org
! "#$
Reusable
components
Create navigation tabs only for folder items.
ONLY FOLDERS NAVIGATION TABS
Add automatically a tab of elements created at
root level.
CREATE NAVIGATION TABS
PROFILE TO IMPORT CACHE SETTINGS
WITH CACHING PROXY
WITH CACHING PROXY AND SPLIT-VIEW
WITHOUT CACHING PROXY
USE UUID FOR USERS
Automatically generate UUIDs for new users.
Newly installed content will be enabled by default unless
explicitly tuned off.
COLLECTION
COMMENT
EVENT
FILE
FOLDER
IMAGE
LINK
NEWS ITEM
PAGE
TYPES SHOWN IN SEARCHES en-us !
Nynorsk !
Catalan
Languages in which the site should be translatable.
AVAILABLE
LANGUAGES
!
Deleted successfully!
Updates available
Update installed add-ons: Standard tiles and Drafts
support
!
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
Delete selected
types?
AM
Hour Minute
9 5
8 0
7 55
10 10
11 : 15
12 20
1 25
2 30
3 35
#1FBDEE
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Content Rules settings
ENABLE CONTENT RULES
CONFIGURE CONTENT RULES
Rules automatically perform actions on content
when certain triggers take place. After defining
rules, you may want to go to a folder to assign
them, using the ‘rules’ item in the actions menu.
SITE CONTENT RULES
ADD NEW RULE
MY SUPER RULE NAME
NASTY RULE
DISABLED RULE
MY ALMOST SUPER RULE
Filter rules…
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Content Rules settings
ENABLE CONTENT RULES
CONFIGURE CONTENT RULES
Rules automatically perform actions on content
when certain triggers take place. After defining
rules, you may want to go to a folder to assign
them, using the ‘rules’ item in the actions menu.
SITE CONTENT RULES
ADD NEW RULE
NAVIGATION
STATIC TEXT
CALENDAR
CTP
Filter rules…
After this rule is executed, stop further rules
ENABLE RULE
RULE CASCADE OTHER RULES
RULE STOPS OTHER RULES
After this rule is executed, trigger other
rules. Attention! Be sure it won’t create
infinite loops.
Add Content Rule
Content rule nameTITLE
CONFIGURE RULE
Short explanation of rule
and its purpose…
DESCRIPTION
Comment added
EVENT
TRIGGER
ADD NEW RULE
STATIC TEXT
CALENDAR
CTP
After this rule is executed, stop further rules
RULE CASCADES OTHER RULES
After this rule is executed, trigger other
rules. Attention! Be sure it won’t create
infinite loops.
RULE CONDITIONS
RULE ASSIGNMENT
If all of the following conditions are met:
State Draft, Revie…are
File extension PDFis
Group Administrat…is
Perform the following actions:
Email email@address.i…
Logger text_contentrul…
Notify Info “Message al…
content ! pageASSIGN TO
LOCATION
!
page !
Select type…ADD ACTION
Select type…
ADD
CONDITION
Reference
30x30
icon
default #826A6A
primary #007EB1
destructive #E40166
disabled #B8C6C8
bullet #069182
touch
area
18x4 4x442x424
MOBILE/TOUCH BAR
Error Ready Warning Info Clear
Alert .alert-warning, role=“alert”, aria-live=“assertive”
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
!
<div class="alert alert-warning alert-dismissible" role="alert" aria-live="assertive">
<button type="button" class="alert-dismiss" aria-label="Dismiss">
<svg … >
</button>
<img class=“alert-image” src=“status.svg” aria-hidden=“true” alt=“”>
<h2 class=“alert-title”>Title</h2>
<p class=“alert-description”>Description</p>
</div>
Pastanaga UI :: Messaging @albertcasado 1/2
Error
Connection to Produce & Publish Server is not
functional
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
Info
You are running in "debug mode", intended for
development. Changes will take effect
immediately, but will make your site run
slowler.
You are now logged in!
Alert .alert-error, role=“alert”, aria-live=“assertive”
Alert .alert-warning, role=“alert”, aria-live=“assertive”
Alert .alert-info, role=“status”, aria-live=“polite”
Alert .alert-success, role=“status”, aria-live=“polite”
Recommended to use always with a dismiss. Success is auto-dismissed after 5 seconds
In the future notes can be extended to support tips, important messaging or usage recommendations
Recommended to use always with a dismiss
// Optional
// Optional
// Like a button with its label and tooltip “Dismiss”
ALERTS NOTES
<div class="alert alert-warning alert-dismissible" role="alert" aria-live="assertive">
<button type="button" class="alert-dismiss" aria-label="Dismiss">
<img … >
</button>
<img class=“alert-image” src=“status.svg” aria-hidden=“true” alt=“”>
<h2 class=“alert-title”>Title</h2>
<p class=“alert-description”>Description</p>
</div>
<p class=“note” role=“note”> … </p>
You are running in "debug mode", intended for
development. Changes will take effect
immediately, but will make your site run slowler.
You are running in "debug mode", intended for
development. Changes will take effect
immediately, but will make your site run slowler.
error.svg
warning.svg
info.svg
clear.svg
ready.svg
clear.svg
Pastanaga UI :: Messaging 2/2
CONFIRMATION DIALOGS
Delete selected
types?
<dialog class=“alertdialog” role="alertdialog" aria-labelledby=“alertdialog-title-id01">
<div class=“alertdialog-wrapper” role="document" tabindex="0">
<h2 class=“alertdialog-title” id="alertdialog-title-id01">Delete selected types?</h2>
<p class=“alertdialog-description”>Optional description, better not to have</p>
<div class="button-group" role="group" aria-label="Alert dialog actions”>
<button type="button" class="button button-highlighted">
<img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”>
<span class=“button-label”>Cancel</span>
</button>
<button type="button" class="button button-destructive button-highlighted">
<img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”>
<span class=“button-label”>Delete</span>
</button>
</div>
</div>
</dialog>
<dialog class=“dialog” role="alertdialog" aria-labelledby="dialog-title-id01">
<div class=“dialog-wrapper” role="document" tabindex="0">
<h2 class=“dialog-title” id="dialog-title-id01">Delete selected types?</h2>
<p class=“dialog-description”>Optional description, better not to have</p>
<button type="button" class="button button-primary button-highlighted">
<img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”>
<span class=“button-label”>OK</span>
</button>
</div>
</dialog>
There was an error loading
the modal
User must confirm actions that cannot be easily undo or have consequences
clear.svg
delete.svg
ahead.svg
@albertcasado
Pastanaga UI :: Buttons 1/2
HIERACHY
TEXT BUTTONS
GROUPS
PSEUDO-STATES
Update
SAVE AND TEST
Destructive Default Primary
happy path
Default
not highlighted
Non-iconizable buttons
do not use as primary
If there are several buttons a group is required. With a single button, just the button itslelf is required.
Status appears as a hint in the toolbar for the main action replacing the primary
Note that not only tooltips but shortcuts must be also translated. E.g.: Delete key “del” is “supr” in a Catalan keyboard.
Adding a shortcut is convinient, both for productivity and accessibility; addapt them to Win and Mac.
Composite shortcuts are marked nesting kbd’s tags
Just remove the <img> tag
darken 10% darken 30%
// Default
// Primary blue
// Destructive red
// Adds circled style
.button
.button .button-primary
.button .button-destructive
.button .button-highlighted
.button-public .button-intranet .button-review .button-draft .button-private
.button .button-primary
:default :hover :active :disabled :focus
<div class="button-group" role="group" aria-label="Label to the group of buttons">
<button type="button" class="button button-destructive button-highlighted">
<img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”>
<span class=“button-label”>Remove</span>
</button>
…
</div>
<div class="button-group" role="group" aria-label="Label…">
<button type="button" class="button button-destructive button-highlighted has-tooltip"
aria-describedby=“button-tooltip-id01”>
<img class=“button-image” src=“...” alt=“” role=“presentation”
aria-hidden=“true”>
<span class=“button-label”>Remove</span>
<span class=“button-tooltip” id=“button-tooltip-id01”
role=“tooltip”>Remove <kbd title=“delete”>del</kbd></span>
</button>
…
</div>
<span class=“button-tooltip” id=“button-tooltip-id01” role=“tooltip”>Delete</span>
<kbd><kbd title=“command”>⌘</kbd><kbd>N</kbd></kbd>
REMOVE del
<button type="button" class="button button-primary">
<span class=“button-label”>Update</span>
</button>
STATUS IN ICONS
TOOLTIPS AND SHORTCUTS
@albertcasado
DELETE
NEW DOCUMENT ⌘ N
backgroundTBD
So?
Pastanaga UI
Pastanaga UI
Thanks | Gràcies

More Related Content

Viewers also liked

Trust Presentation
Trust PresentationTrust Presentation
Trust Presentationecurry
 
Building Bridges - The Headless Future of Plone
Building Bridges - The Headless Future of PloneBuilding Bridges - The Headless Future of Plone
Building Bridges - The Headless Future of Plonekitconcept GmbH
 
Chris Argyris
Chris ArgyrisChris Argyris
Chris Argyrismrnelson
 
Human evolution and culture
Human evolution and cultureHuman evolution and culture
Human evolution and cultureDIEGO Pomarca
 
Knowledge management 4 (organizational learning)
Knowledge management 4 (organizational learning)Knowledge management 4 (organizational learning)
Knowledge management 4 (organizational learning)David VALLAT
 
Employee empowerment
Employee empowermentEmployee empowerment
Employee empowermentSaad Ejaz
 
ppt on empowerment
ppt on empowermentppt on empowerment
ppt on empowermentraj91221
 

Viewers also liked (10)

Trust Presentation
Trust PresentationTrust Presentation
Trust Presentation
 
Building Bridges - The Headless Future of Plone
Building Bridges - The Headless Future of PloneBuilding Bridges - The Headless Future of Plone
Building Bridges - The Headless Future of Plone
 
Self Assessment
Self AssessmentSelf Assessment
Self Assessment
 
Chris Argyris
Chris ArgyrisChris Argyris
Chris Argyris
 
Human evolution and culture
Human evolution and cultureHuman evolution and culture
Human evolution and culture
 
Knowledge management 4 (organizational learning)
Knowledge management 4 (organizational learning)Knowledge management 4 (organizational learning)
Knowledge management 4 (organizational learning)
 
Organizational Learning
Organizational LearningOrganizational Learning
Organizational Learning
 
Teamwork
TeamworkTeamwork
Teamwork
 
Employee empowerment
Employee empowermentEmployee empowerment
Employee empowerment
 
ppt on empowerment
ppt on empowermentppt on empowerment
ppt on empowerment
 

Similar to Pastanaga UI

User Profiles: I Didn't Know I Could Do That!! @SPSHI
User Profiles:  I Didn't Know I Could Do That!! @SPSHIUser Profiles:  I Didn't Know I Could Do That!! @SPSHI
User Profiles: I Didn't Know I Could Do That!! @SPSHIStacy Deere
 
User Profiles: I Didn't Know I Could Do That?-Stacy Deere-Strole-SharePoint C...
User Profiles: I Didn't Know I Could Do That?-Stacy Deere-Strole-SharePoint C...User Profiles: I Didn't Know I Could Do That?-Stacy Deere-Strole-SharePoint C...
User Profiles: I Didn't Know I Could Do That?-Stacy Deere-Strole-SharePoint C...Stacy Deere
 
Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers Jessica C. Gardner
 
Build World Class User Onboarding
Build World Class User OnboardingBuild World Class User Onboarding
Build World Class User OnboardingEnzo Avigo
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!Ashley McQuaid
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery MobileTroy Miles
 
User Profiles: I Didn't Know I Could Do That!!
User Profiles:  I Didn't Know I Could Do That!!User Profiles:  I Didn't Know I Could Do That!!
User Profiles: I Didn't Know I Could Do That!!Stacy Deere
 
iGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your LibraryiGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your LibraryEdward Metz
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptPhilipp Bosch
 
User Profiles: I Didn't Know I Could Do That? (Demo Slides)
User Profiles:  I Didn't Know I Could Do That?  (Demo Slides)User Profiles:  I Didn't Know I Could Do That?  (Demo Slides)
User Profiles: I Didn't Know I Could Do That? (Demo Slides)Stacy Deere
 
5 things STILL! TOO! HARD! in Plone 5
5 things STILL! TOO! HARD! in Plone 55 things STILL! TOO! HARD! in Plone 5
5 things STILL! TOO! HARD! in Plone 5Dylan Jay
 
UX - Behind & In Front of the Curtain (State of Search 2018)
UX - Behind & In Front of the Curtain (State of Search 2018)UX - Behind & In Front of the Curtain (State of Search 2018)
UX - Behind & In Front of the Curtain (State of Search 2018)Mary Davies
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Shane Morris
 
Mobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B ExperimentsMobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B Experimentslacyrhoades
 

Similar to Pastanaga UI (20)

Invisioning UX and UI
Invisioning UX and UIInvisioning UX and UI
Invisioning UX and UI
 
User Profiles: I Didn't Know I Could Do That!! @SPSHI
User Profiles:  I Didn't Know I Could Do That!! @SPSHIUser Profiles:  I Didn't Know I Could Do That!! @SPSHI
User Profiles: I Didn't Know I Could Do That!! @SPSHI
 
User Profiles: I Didn't Know I Could Do That?-Stacy Deere-Strole-SharePoint C...
User Profiles: I Didn't Know I Could Do That?-Stacy Deere-Strole-SharePoint C...User Profiles: I Didn't Know I Could Do That?-Stacy Deere-Strole-SharePoint C...
User Profiles: I Didn't Know I Could Do That?-Stacy Deere-Strole-SharePoint C...
 
External users
External usersExternal users
External users
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers
 
jQuery mobile UX
jQuery mobile UXjQuery mobile UX
jQuery mobile UX
 
Build World Class User Onboarding
Build World Class User OnboardingBuild World Class User Onboarding
Build World Class User Onboarding
 
Prototyping + User Journeys
Prototyping + User JourneysPrototyping + User Journeys
Prototyping + User Journeys
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery Mobile
 
User Profiles: I Didn't Know I Could Do That!!
User Profiles:  I Didn't Know I Could Do That!!User Profiles:  I Didn't Know I Could Do That!!
User Profiles: I Didn't Know I Could Do That!!
 
iGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your LibraryiGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your Library
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
 
Diigo
DiigoDiigo
Diigo
 
User Profiles: I Didn't Know I Could Do That? (Demo Slides)
User Profiles:  I Didn't Know I Could Do That?  (Demo Slides)User Profiles:  I Didn't Know I Could Do That?  (Demo Slides)
User Profiles: I Didn't Know I Could Do That? (Demo Slides)
 
5 things STILL! TOO! HARD! in Plone 5
5 things STILL! TOO! HARD! in Plone 55 things STILL! TOO! HARD! in Plone 5
5 things STILL! TOO! HARD! in Plone 5
 
UX - Behind & In Front of the Curtain (State of Search 2018)
UX - Behind & In Front of the Curtain (State of Search 2018)UX - Behind & In Front of the Curtain (State of Search 2018)
UX - Behind & In Front of the Curtain (State of Search 2018)
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!
 
Mobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B ExperimentsMobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B Experiments
 

More from kitconcept GmbH

Web Relaunch Deutsches Zentrum für Luft- und Raumfahrt (DLR) mit Plone 6
Web Relaunch Deutsches Zentrum für Luft- und Raumfahrt (DLR) mit Plone 6Web Relaunch Deutsches Zentrum für Luft- und Raumfahrt (DLR) mit Plone 6
Web Relaunch Deutsches Zentrum für Luft- und Raumfahrt (DLR) mit Plone 6kitconcept GmbH
 
Stellensuche mit Plone - Karriere- und Stellenportale umgesetzt in Plone Vol...
Stellensuche mit  Plone - Karriere- und Stellenportale umgesetzt in Plone Vol...Stellensuche mit  Plone - Karriere- und Stellenportale umgesetzt in Plone Vol...
Stellensuche mit Plone - Karriere- und Stellenportale umgesetzt in Plone Vol...kitconcept GmbH
 
German Aerospace Center (DLR) Web Relaunch
German Aerospace Center (DLR) Web RelaunchGerman Aerospace Center (DLR) Web Relaunch
German Aerospace Center (DLR) Web Relaunchkitconcept GmbH
 
Plone Conference 2021 Keynote - Plone 6: Power and Control
Plone Conference 2021 Keynote - Plone 6: Power and ControlPlone Conference 2021 Keynote - Plone 6: Power and Control
Plone Conference 2021 Keynote - Plone 6: Power and Controlkitconcept GmbH
 
Plone 6 - Volto: Past, Present and Future
Plone 6 - Volto: Past, Present and FuturePlone 6 - Volto: Past, Present and Future
Plone 6 - Volto: Past, Present and Futurekitconcept GmbH
 
On The Road - Der Weg zu Plone 6
On The Road - Der Weg zu Plone 6On The Road - Der Weg zu Plone 6
On The Road - Der Weg zu Plone 6kitconcept GmbH
 
End-to-End Testing with Cypress
End-to-End Testing with CypressEnd-to-End Testing with Cypress
End-to-End Testing with Cypresskitconcept GmbH
 
Breaking new Grounds - How we build the new excellence website
Breaking new Grounds - How we build the new excellence websiteBreaking new Grounds - How we build the new excellence website
Breaking new Grounds - How we build the new excellence websitekitconcept GmbH
 
On The Road - Plone 6 and Beyond
On The Road - Plone 6 and BeyondOn The Road - Plone 6 and Beyond
On The Road - Plone 6 and Beyondkitconcept GmbH
 
Keep 'em coming: Komplexe und umfangreiche Migrationen mit Plone meistern
Keep 'em coming: Komplexe und umfangreiche Migrationen mit Plone meisternKeep 'em coming: Komplexe und umfangreiche Migrationen mit Plone meistern
Keep 'em coming: Komplexe und umfangreiche Migrationen mit Plone meisternkitconcept GmbH
 
Plone - User Experienced Revisited
Plone - User Experienced RevisitedPlone - User Experienced Revisited
Plone - User Experienced Revisitedkitconcept GmbH
 
GatsbyJS - A static site generator in React
GatsbyJS - A static site generator in ReactGatsbyJS - A static site generator in React
GatsbyJS - A static site generator in Reactkitconcept GmbH
 
Volto - A React-based Enterprise Content Management System
Volto - A React-based Enterprise Content Management SystemVolto - A React-based Enterprise Content Management System
Volto - A React-based Enterprise Content Management Systemkitconcept GmbH
 
Volto Case Studies: When Stability and Security meet Speed and a Modern User ...
Volto Case Studies: When Stability and Security meet Speed and a Modern User ...Volto Case Studies: When Stability and Security meet Speed and a Modern User ...
Volto Case Studies: When Stability and Security meet Speed and a Modern User ...kitconcept GmbH
 
Reinventing Plone: Roadmap to the Modern Web
Reinventing Plone: Roadmap to the Modern WebReinventing Plone: Roadmap to the Modern Web
Reinventing Plone: Roadmap to the Modern Webkitconcept GmbH
 
The Evolution of JavaScript Frameworks
The Evolution of JavaScript FrameworksThe Evolution of JavaScript Frameworks
The Evolution of JavaScript Frameworkskitconcept GmbH
 
Python & JavaScript - Django, Plone, React, Angular, Vue
Python & JavaScript - Django, Plone, React, Angular, VuePython & JavaScript - Django, Plone, React, Angular, Vue
Python & JavaScript - Django, Plone, React, Angular, Vuekitconcept GmbH
 
Reinventing Plone - Pastanaga, React und Plone REST API
Reinventing Plone - Pastanaga, React und Plone REST APIReinventing Plone - Pastanaga, React und Plone REST API
Reinventing Plone - Pastanaga, React und Plone REST APIkitconcept GmbH
 

More from kitconcept GmbH (20)

Web Relaunch Deutsches Zentrum für Luft- und Raumfahrt (DLR) mit Plone 6
Web Relaunch Deutsches Zentrum für Luft- und Raumfahrt (DLR) mit Plone 6Web Relaunch Deutsches Zentrum für Luft- und Raumfahrt (DLR) mit Plone 6
Web Relaunch Deutsches Zentrum für Luft- und Raumfahrt (DLR) mit Plone 6
 
Stellensuche mit Plone - Karriere- und Stellenportale umgesetzt in Plone Vol...
Stellensuche mit  Plone - Karriere- und Stellenportale umgesetzt in Plone Vol...Stellensuche mit  Plone - Karriere- und Stellenportale umgesetzt in Plone Vol...
Stellensuche mit Plone - Karriere- und Stellenportale umgesetzt in Plone Vol...
 
German Aerospace Center (DLR) Web Relaunch
German Aerospace Center (DLR) Web RelaunchGerman Aerospace Center (DLR) Web Relaunch
German Aerospace Center (DLR) Web Relaunch
 
Plone at Scale
Plone at ScalePlone at Scale
Plone at Scale
 
Plone Conference 2021 Keynote - Plone 6: Power and Control
Plone Conference 2021 Keynote - Plone 6: Power and ControlPlone Conference 2021 Keynote - Plone 6: Power and Control
Plone Conference 2021 Keynote - Plone 6: Power and Control
 
Plone 6 - Volto: Past, Present and Future
Plone 6 - Volto: Past, Present and FuturePlone 6 - Volto: Past, Present and Future
Plone 6 - Volto: Past, Present and Future
 
On The Road - Der Weg zu Plone 6
On The Road - Der Weg zu Plone 6On The Road - Der Weg zu Plone 6
On The Road - Der Weg zu Plone 6
 
End-to-End Testing with Cypress
End-to-End Testing with CypressEnd-to-End Testing with Cypress
End-to-End Testing with Cypress
 
Breaking new Grounds - How we build the new excellence website
Breaking new Grounds - How we build the new excellence websiteBreaking new Grounds - How we build the new excellence website
Breaking new Grounds - How we build the new excellence website
 
On The Road - Plone 6 and Beyond
On The Road - Plone 6 and BeyondOn The Road - Plone 6 and Beyond
On The Road - Plone 6 and Beyond
 
Keep 'em coming: Komplexe und umfangreiche Migrationen mit Plone meistern
Keep 'em coming: Komplexe und umfangreiche Migrationen mit Plone meisternKeep 'em coming: Komplexe und umfangreiche Migrationen mit Plone meistern
Keep 'em coming: Komplexe und umfangreiche Migrationen mit Plone meistern
 
Plone - User Experienced Revisited
Plone - User Experienced RevisitedPlone - User Experienced Revisited
Plone - User Experienced Revisited
 
GatsbyJS - A static site generator in React
GatsbyJS - A static site generator in ReactGatsbyJS - A static site generator in React
GatsbyJS - A static site generator in React
 
Volto - A React-based Enterprise Content Management System
Volto - A React-based Enterprise Content Management SystemVolto - A React-based Enterprise Content Management System
Volto - A React-based Enterprise Content Management System
 
Theming Volto
Theming VoltoTheming Volto
Theming Volto
 
Volto Case Studies: When Stability and Security meet Speed and a Modern User ...
Volto Case Studies: When Stability and Security meet Speed and a Modern User ...Volto Case Studies: When Stability and Security meet Speed and a Modern User ...
Volto Case Studies: When Stability and Security meet Speed and a Modern User ...
 
Reinventing Plone: Roadmap to the Modern Web
Reinventing Plone: Roadmap to the Modern WebReinventing Plone: Roadmap to the Modern Web
Reinventing Plone: Roadmap to the Modern Web
 
The Evolution of JavaScript Frameworks
The Evolution of JavaScript FrameworksThe Evolution of JavaScript Frameworks
The Evolution of JavaScript Frameworks
 
Python & JavaScript - Django, Plone, React, Angular, Vue
Python & JavaScript - Django, Plone, React, Angular, VuePython & JavaScript - Django, Plone, React, Angular, Vue
Python & JavaScript - Django, Plone, React, Angular, Vue
 
Reinventing Plone - Pastanaga, React und Plone REST API
Reinventing Plone - Pastanaga, React und Plone REST APIReinventing Plone - Pastanaga, React und Plone REST API
Reinventing Plone - Pastanaga, React und Plone REST API
 

Recently uploaded

Benefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxBenefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxlibertyuae uae
 
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC
 
Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Eric Johnson
 
overview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualizationoverview of Virtualization, concept of Virtualization
overview of Virtualization, concept of VirtualizationRajan yadav
 
SQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxSQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxJustineGarcia32
 
Google-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfGoogle-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfMaria Adalfio
 
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...hasimatwork
 
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?krc0yvm5
 
Generalities about NFT , as a new technology
Generalities about NFT , as a new technologyGeneralities about NFT , as a new technology
Generalities about NFT , as a new technologysoufianbouktaib1
 
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondTungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondContinuent
 

Recently uploaded (10)

Benefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxBenefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptx
 
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
 
Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019
 
overview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualizationoverview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualization
 
SQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxSQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptx
 
Google-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfGoogle-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdf
 
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
 
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
 
Generalities about NFT , as a new technology
Generalities about NFT , as a new technologyGeneralities about NFT , as a new technology
Generalities about NFT , as a new technology
 
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondTungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
 

Pastanaga UI

  • 4. What a user does most frequently in Plone? Final users are not Admins Simplify & Focus
  • 5. • Edit a content (main action) • Check Folder contents • Add a new content Simplify & Focus
  • 6. Simplify & Focus Focus toolbar [Add content] [Folder contents] [Edit]
  • 9. • Workflows: Send back, retract, return to, back to the future…? • Happy path action in expected place Don’t make me think
  • 10. Taxi, I just wanna go to Rome! The user don’t care about the way Don’t make me think
  • 11. Don’t ask the user how, just let him decide where he wants to end PRIVATE DRAFT REVIEW INTRANET PUBLIC Just make it Public! Don’t make me think
  • 12. Follow the path intuitively, not even reading !" Don’t make me think
  • 14. Reassurance Don’t make me think Hint current content status
  • 15. Don’t make me think ! ! ! Edit Draft content Edit Intranet content Edit Public content Color hint of content status
  • 16. Don’t make me think Color hint of content status guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Uncollapse toolbar to edit Private content
  • 18. Structured elements Visual hierarchy guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Log in Forgot password? Ask for a new password. SIGN IN TO START SESSION ! " Guill O’TinaUSERNAME ••••••••••••••PASSWORD Title Legend, Section titling Form Help, secondary options Happy path action
  • 19. A CMS deserves icons covering all its needs Provide a full visual experience Visual hierarchy Drop files here or click to browse
  • 20. 313 icons and counting Visual hierarchy
  • 22. Structured UI Visual hierarchy Standard 6 days ago VIEW MODIFIED ! ! Select options here Go somewhere to see
  • 23. Reusability Visual hierarchy CONTROL WHO CAN VIEW OR EDIT THIS CONTENT !PERSONAL INFORMATION PERSONAL INFORMATION PERSONAL PREFERENCES PERSONAL PREFERENCES Legend, Section titling Uncollapse section Tabs
  • 25. Accessiblity Consistency & Patterns • Follow Font & Contrast standards • Reuasable patterns keep everything accessible
  • 26. Easiness Visual hierarchy • Patterns make easier to become involved and help community
  • 28. Cognitive stress Adaptative editing • Show to the user only what he needs and want • Adapt UI elements to flow circumstances
  • 29. Adaptative editing Presenting new Pastanga Editor. Yes, it is simple! www.pastanga.io
  • 31. Adaptative editing guillotina.plone.org Type content… Type the title… /title-of-document Private
  • 32. Adaptative editing guillotina.plone.org Paragraph lorem ipsum dolor sum consecuteur est sit amet. Title of document Sure to delete? Paragraph lorem ipsum dolor sum consecuteur est sit amet. Paragraph lorem ipsum dolor sum consecuteur est sit amet. Paragraph lorem ipsum dolor sum consecuteur est sit amet. www.kitconcept.com Paragraph lorem ipsum dolor sum consecuteur est sit amet. #252525 BOLD ctrl+B
  • 36. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Log in Forgot password? Ask for a new password. SIGN IN TO START SESSION ! " Guill O’TinaUSERNAME ••••••••••••••PASSWORD
  • 37. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Log in Forgot password? Ask for a new password. SIGN IN TO START SESSION ! " Guill O’TinaUSERNAME ••••••••••••••PASSWORD
  • 38. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile You are now logged in! "
  • 39. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile You are now logged in! "
  • 42. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile !" Public Standard PORTLETS 6 days ago STATE VIEW MODIFIED SHARING PERMISIONS # # ### $ %Name of the content
  • 43. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile !" Public Standard PORTLETS 6 days ago STATE VIEW MODIFIED SHARING PERMISIONS # # ### $ %Name of the content
  • 44. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Guill O’Tine Guill O’Tine Paul One Paul One Anita Llonch Anita Llonch 5 days ago 5 days ago CREATED EDITED 5 days ago DRAFTED 3 days ago PUBLISHED 3 days ago EDITED 6 minutes ago EDITED ! " # ! " # History of Name of the content$ ! "
  • 45. Pastanga UI guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile GENERAL CONTENT Site setup Warning You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this. DATE AND TIME LANGUAGE MAIL NAVIGATION SITE ADD-ONS SEARCH DISCUSSION THEMING SEARCH SINDICATION TINY MCE
  • 51. guillotina.plone.org ! " # $ Guill O’TineNAME PERSONAL INFORMATION PERSONAL PREFERENCES %Guill O’Tine & name@domain.ctEMAIL http://EXTERNAL URL Tell about you…BIOGRAPHY Guill O’TineUSERNAME PORTRAIT Short overview of who you are and what you do ' Browse () Guill O’Tine PROFILE ! PREFERENCES !! SITE SETUP 126 43 13 ITEMS CREATED UPLOADS REVIEWS
  • 55. guillotina.plone.org Private Name of the document Name of the folder NAME Name of the form Name of the news Name of the image 1 month ago 3 days ago LAST MODIFIED 3 months agos 1 year ago 3 years ago 1 page selected items per page None None PUBLICATION DATE None None None STATE ACTIONS Intranet Draft Public Public 1 2 3 4 520 HOME / ! ! ! ! ! ! !!!!!!!!!! " $ % & Search…
  • 56. guillotina.plone.org Private Name of the document Name of the folder NAME Name of the form Name of the news Name of the image 1 month ago 3 days ago LAST MODIFIED 3 months agos 1 year ago 3 years ago 1 page selected items per page None None PUBLICATION DATE None None None STATE ACTIONS Intranet Draft Public Public 1 2 3 4 520 HOME / ! ! ! ! ! ! !!!!!!!!!! " $ % & Search… Edit View Set as default view Move last Move first State Type comments…COMMENTS PrivateSTATE ! If checked, this will modify the status of the folder and its subfolders and items. INCLUDE CHILDREN ITEMS
  • 57. guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile STATE HOME / … / SUBFOLDER / CURRENT FOLDER / Contents! """""""""" NAME Name of document Name o folder Name of form Name of news Name of the image Name of form Name of news Name of news """""" Private Draft Public Public Public Public Intran Intran loading contents… 100%17:14G Mobile Guill O’Tine PREFERENCES PROFILE guillotina.plone.org ! 100%17:14G Mobile !! SITE SETUP 126 43 13 ITEMS CREATED UPLOADS REVIEWS
  • 63. Create navigation tabs only for folder items. ONLY FOLDERS NAVIGATION TABS Add automatically a tab of elements created at root level. CREATE NAVIGATION TABS PROFILE TO IMPORT CACHE SETTINGS WITH CACHING PROXY WITH CACHING PROXY AND SPLIT-VIEW WITHOUT CACHING PROXY USE UUID FOR USERS Automatically generate UUIDs for new users. Newly installed content will be enabled by default unless explicitly tuned off. COLLECTION COMMENT EVENT FILE FOLDER IMAGE LINK NEWS ITEM PAGE TYPES SHOWN IN SEARCHES en-us ! Nynorsk ! Catalan Languages in which the site should be translatable. AVAILABLE LANGUAGES !
  • 64. Deleted successfully! Updates available Update installed add-ons: Standard tiles and Drafts support ! Warning You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this. Delete selected types?
  • 65. AM Hour Minute 9 5 8 0 7 55 10 10 11 : 15 12 20 1 25 2 30 3 35 #1FBDEE
  • 66. guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Content Rules settings ENABLE CONTENT RULES CONFIGURE CONTENT RULES Rules automatically perform actions on content when certain triggers take place. After defining rules, you may want to go to a folder to assign them, using the ‘rules’ item in the actions menu. SITE CONTENT RULES ADD NEW RULE MY SUPER RULE NAME NASTY RULE DISABLED RULE MY ALMOST SUPER RULE Filter rules…
  • 67. guillotina.plone.org 100%17:14G Mobile 100%17:14G Mobile Content Rules settings ENABLE CONTENT RULES CONFIGURE CONTENT RULES Rules automatically perform actions on content when certain triggers take place. After defining rules, you may want to go to a folder to assign them, using the ‘rules’ item in the actions menu. SITE CONTENT RULES ADD NEW RULE NAVIGATION STATIC TEXT CALENDAR CTP Filter rules… After this rule is executed, stop further rules ENABLE RULE RULE CASCADE OTHER RULES RULE STOPS OTHER RULES After this rule is executed, trigger other rules. Attention! Be sure it won’t create infinite loops. Add Content Rule Content rule nameTITLE CONFIGURE RULE Short explanation of rule and its purpose… DESCRIPTION Comment added EVENT TRIGGER
  • 68. ADD NEW RULE STATIC TEXT CALENDAR CTP After this rule is executed, stop further rules RULE CASCADES OTHER RULES After this rule is executed, trigger other rules. Attention! Be sure it won’t create infinite loops. RULE CONDITIONS RULE ASSIGNMENT If all of the following conditions are met: State Draft, Revie…are File extension PDFis Group Administrat…is Perform the following actions: Email email@address.i… Logger text_contentrul… Notify Info “Message al… content ! pageASSIGN TO LOCATION ! page ! Select type…ADD ACTION Select type… ADD CONDITION
  • 70. 30x30 icon default #826A6A primary #007EB1 destructive #E40166 disabled #B8C6C8 bullet #069182 touch area 18x4 4x442x424 MOBILE/TOUCH BAR
  • 71. Error Ready Warning Info Clear Alert .alert-warning, role=“alert”, aria-live=“assertive” Warning You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this. !
  • 72. <div class="alert alert-warning alert-dismissible" role="alert" aria-live="assertive"> <button type="button" class="alert-dismiss" aria-label="Dismiss"> <svg … > </button> <img class=“alert-image” src=“status.svg” aria-hidden=“true” alt=“”> <h2 class=“alert-title”>Title</h2> <p class=“alert-description”>Description</p> </div>
  • 73. Pastanaga UI :: Messaging @albertcasado 1/2 Error Connection to Produce & Publish Server is not functional Warning You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this. Info You are running in "debug mode", intended for development. Changes will take effect immediately, but will make your site run slowler. You are now logged in! Alert .alert-error, role=“alert”, aria-live=“assertive” Alert .alert-warning, role=“alert”, aria-live=“assertive” Alert .alert-info, role=“status”, aria-live=“polite” Alert .alert-success, role=“status”, aria-live=“polite” Recommended to use always with a dismiss. Success is auto-dismissed after 5 seconds In the future notes can be extended to support tips, important messaging or usage recommendations Recommended to use always with a dismiss // Optional // Optional // Like a button with its label and tooltip “Dismiss” ALERTS NOTES <div class="alert alert-warning alert-dismissible" role="alert" aria-live="assertive"> <button type="button" class="alert-dismiss" aria-label="Dismiss"> <img … > </button> <img class=“alert-image” src=“status.svg” aria-hidden=“true” alt=“”> <h2 class=“alert-title”>Title</h2> <p class=“alert-description”>Description</p> </div> <p class=“note” role=“note”> … </p> You are running in "debug mode", intended for development. Changes will take effect immediately, but will make your site run slowler. You are running in "debug mode", intended for development. Changes will take effect immediately, but will make your site run slowler. error.svg warning.svg info.svg clear.svg ready.svg clear.svg
  • 74. Pastanaga UI :: Messaging 2/2 CONFIRMATION DIALOGS Delete selected types? <dialog class=“alertdialog” role="alertdialog" aria-labelledby=“alertdialog-title-id01"> <div class=“alertdialog-wrapper” role="document" tabindex="0"> <h2 class=“alertdialog-title” id="alertdialog-title-id01">Delete selected types?</h2> <p class=“alertdialog-description”>Optional description, better not to have</p> <div class="button-group" role="group" aria-label="Alert dialog actions”> <button type="button" class="button button-highlighted"> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>Cancel</span> </button> <button type="button" class="button button-destructive button-highlighted"> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>Delete</span> </button> </div> </div> </dialog> <dialog class=“dialog” role="alertdialog" aria-labelledby="dialog-title-id01"> <div class=“dialog-wrapper” role="document" tabindex="0"> <h2 class=“dialog-title” id="dialog-title-id01">Delete selected types?</h2> <p class=“dialog-description”>Optional description, better not to have</p> <button type="button" class="button button-primary button-highlighted"> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>OK</span> </button> </div> </dialog> There was an error loading the modal User must confirm actions that cannot be easily undo or have consequences clear.svg delete.svg ahead.svg @albertcasado
  • 75. Pastanaga UI :: Buttons 1/2 HIERACHY TEXT BUTTONS GROUPS PSEUDO-STATES Update SAVE AND TEST Destructive Default Primary happy path Default not highlighted Non-iconizable buttons do not use as primary If there are several buttons a group is required. With a single button, just the button itslelf is required. Status appears as a hint in the toolbar for the main action replacing the primary Note that not only tooltips but shortcuts must be also translated. E.g.: Delete key “del” is “supr” in a Catalan keyboard. Adding a shortcut is convinient, both for productivity and accessibility; addapt them to Win and Mac. Composite shortcuts are marked nesting kbd’s tags Just remove the <img> tag darken 10% darken 30% // Default // Primary blue // Destructive red // Adds circled style .button .button .button-primary .button .button-destructive .button .button-highlighted .button-public .button-intranet .button-review .button-draft .button-private .button .button-primary :default :hover :active :disabled :focus <div class="button-group" role="group" aria-label="Label to the group of buttons"> <button type="button" class="button button-destructive button-highlighted"> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>Remove</span> </button> … </div> <div class="button-group" role="group" aria-label="Label…"> <button type="button" class="button button-destructive button-highlighted has-tooltip" aria-describedby=“button-tooltip-id01”> <img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”> <span class=“button-label”>Remove</span> <span class=“button-tooltip” id=“button-tooltip-id01” role=“tooltip”>Remove <kbd title=“delete”>del</kbd></span> </button> … </div> <span class=“button-tooltip” id=“button-tooltip-id01” role=“tooltip”>Delete</span> <kbd><kbd title=“command”>⌘</kbd><kbd>N</kbd></kbd> REMOVE del <button type="button" class="button button-primary"> <span class=“button-label”>Update</span> </button> STATUS IN ICONS TOOLTIPS AND SHORTCUTS @albertcasado DELETE NEW DOCUMENT ⌘ N backgroundTBD
  • 76. So?