pastanaga ui

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


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.org100%17:14G Mobile 100%17:14G Mobile

Uncollapse toolbar to edit Private content

Visual hierarchy

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 titlingForm

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 editingguillotina.plone.org

Type content…

Type the title…

/title-of-documentPrivate

Adaptative editingguillotina.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

User-centricity

Pastanaga UI

Mobile

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 agoCREATED

EDITED

5 days agoDRAFTED

3 days agoPUBLISHED

3 days agoEDITED

6 minutes agoEDITED

!

"

#

!

"

#

History of Name of the content$

!

"

Pastanga UIguillotina.plone.org

Guillotina 1.0.1714CMF 2.2.10

Zope 2.13.24

Python 2.7.13 (default, Jan 12 2017, 17:59:37) [GCC 6.3.1

20161221 (Red Hat 6.3.1-1)]

PIL 3.3.0 (Pillow)

You are running in "debug mode", intended for

development. Changes will take effect

immediately, but will make your site run slowler.

100%17:14G Mobile 100%17:14G Mobile

GENERAL

CONTENT

USERS

SECURITY

SECURITY

PLONE FORM GENERATOR

PRODUCE & PUBLISH PDF CONNECTOR

SMASHDOCS SETTINGS

ADD-ONS CONFIGURATION

ADD-ONS CONFIGURATION

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

RULES EDITING IMAGEHANDLING

MARKUP CONTENTSETTINGS

DEXTERITYTYPES

MARKUP

HTMLFILTERING SECURITY ERRORS

MAINTENANCE INTERFACEMANAGEMENT

CONFIGURATIONREGISTRY

MAINTENANCE

Desktop

guillotina.plone.org


!

"

#

$


!

"

#

$

Guill O’TineNAME

PERSONAL INFORMATION PERSONAL PREFERENCES

%Guill O’Tine &

[email protected]

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 13ITEMS 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 first

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 13ITEMS CREATED UPLOADS REVIEWS


!

"

#

$


! "#$

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

AVAILABLELANGUAGES !

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


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…





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 addedEVENTTRIGGER





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

GENERAL

RULE CONDITIONS

RULE ASSIGNMENT

Short explanation of rule

and its purpose…

DESCRIPTION

Comment addedEVENTTRIGGER

If all of the following conditions are met:

State Draft, Revie…are

File extension PDFis

Group Administrat…is

Perform the following actions:

Email [email protected]…

Logger text_contentrul…

Notify Info “Message al…

content ! page

Assign rule to the locations where conditions must

be perform.

Select the folder where you want to apply the rule,

or site root to apply to all whole site.

ASSIGN TOLOCATION

!

page !

Select type…ADD ACTION

Select type…ADDCONDITION

Reference

30x30

icon

default #826A6Aprimary #007EB1destructive #E40166disabled #B8C6C8bullet #069182

toucharea

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

ErrorConnection 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


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>







error.svg

warning.svg

info.svgclear.svg

ready.svgclear.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.svgdelete.svg

ahead.svg

@albertcasado

Pastanaga UI :: Buttons 1/2

HIERACHY

TEXT BUTTONS

GROUPS

PSEUDO-STATES

Update

SAVE AND TEST

Destructive Default Primaryhappy path

Defaultnot highlighted

Non-iconizable buttonsdo 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

Thanks | Gràcies

pastanaga ui

Internet