Pastanaga UI

Let’s make something
great together

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

• Workﬂows: 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 ask the user how, just let him
decide where he wants to end
PRIVATE DRAFT REVIEW INTRANET PUBLIC
Just make it Public!

Follow the path intuitively,
not even reading
!"

!"
Done
Save
Accept
OK
Next
Agree
Cancel
Close
No
Dismiss
Remove

Reassurance
Hint current content status

! ! !
Edit
Draft
content
Edit
Intranet
content
Edit
Public
content
Color hint of content status

Color hint of content status
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Uncollapse toolbar to edit Private content

Structured elements
Visual hierarchy
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 ﬁles here or click to browse

313 icons and counting
Visual hierarchy

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

Accessiblity
Consistency & Patterns
• Follow Font & Contrast standards
• Reuasable patterns keep
everything accessible

Easiness
Visual hierarchy
• Patterns make easier to
become involved and help
community

Cognitive stress
Adaptative editing
• Show to the user only what he
needs and want
• Adapt UI elements to ﬂow
circumstances

Adaptative editing
Presenting new Pastanga Editor. Yes, it is simple!
www.pastanga.io

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.
www.kitconcept.com
#252525
BOLD ctrl+B

Pastanga UI
Log in
Forgot password? Ask for a new password.
SIGN IN TO START SESSION
!
"
Guill O’TinaUSERNAME
••••••••••••••PASSWORD

Pastanga UI
You are now logged in! "

Pastanga UI
!"#

Pastanga UI
!"
Public
Standard
PORTLETS
6 days ago
STATE
VIEW
MODIFIED
SHARING PERMISIONS
#
#
###
$
%Name of the content

Pastanga UI
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
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

!
"
#
$
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

!
"
Public
Standard
PORTLETS
6 days ago
STATE
VIEW
MODIFIED
SHARING PERMISIONS
%
%
%%%
Name of the content#
$

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…

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 ﬁrst
State
Type comments…COMMENTS
PrivateSTATE !
If checked, this will modify the status of the folder
and its subfolders and items.
INCLUDE CHILDREN ITEMS

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
!
100%17:14G Mobile
!!
SITE SETUP
126 43 13
ITEMS CREATED UPLOADS REVIEWS

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
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

Content Rules settings
ENABLE CONTENT RULES
CONFIGURE CONTENT RULES
Rules automatically perform actions on content
when certain triggers take place. After deﬁning
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…

Content Rules settings
ENABLE CONTENT RULES
CONFIGURE CONTENT RULES
Rules automatically perform actions on content
when certain triggers take place. After deﬁning
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
inﬁnite 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
inﬁnite 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

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
!

<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
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>
immediately, but will make your site run slowler.
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">
<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">
<span class=“button-label”>OK</span>
</button>
</div>
</dialog>
There was an error loading
the modal
User must conﬁrm 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">
<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

Pastanaga UI

More Related Content

Viewers also liked

Similar to Pastanaga UI

More from kitconcept GmbH

Recently uploaded

Pastanaga UI