SlideShare a Scribd company logo
Invisioning UX and UI
PLOG - Sorrento 2017
Let’s make something
great together
Guillotina
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
288 icons and counting + ligature font
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
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
()
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
!
"
#
$
guillotina.plone.org
& ' ( ) * +,
TEXT MEDIA FIELD APP ADVANCED
--
!
"
#
$
%
Heading
Subheading
Paragraph
Bullet list
Numbered list
Table of contents
Navigation
FIELD alt+F
guillotina.plone.org
! " # $ % &'
TEXT MEDIA FIELD APP ADVANCED
((Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur?
PARAGRAPH !"## $ %&
guillotina.plone.org
! " # $ % &'
TEXT MEDIA FIELD APP ADVANCED
((Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur?
!"B #$ %
guillotina.plone.org
!
"
#
$
guillotina.plone.org
!
"
#
$
guillotina.plone.org
!
"
#
$
guillotina.plone.org
! "#$
Thanks | Gràcies
Albert Casado
@albertcasado
Víctor Fernández de Alba
@sneridagh

More Related Content

Similar to Invisioning UX and UI

Webconf 2013 - Media Query 123
Webconf 2013 - Media Query 123Webconf 2013 - Media Query 123
Webconf 2013 - Media Query 123
Hina Chen
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
teaguese
 

Similar to Invisioning UX and UI (20)

Build World Class User Onboarding
Build World Class User OnboardingBuild World Class User Onboarding
Build World Class User Onboarding
 
Learning Lunch @ Republic June 2010
Learning Lunch @ Republic June 2010Learning Lunch @ Republic June 2010
Learning Lunch @ Republic June 2010
 
Avega Group: Selfish Accessibility
Avega Group: Selfish AccessibilityAvega Group: Selfish Accessibility
Avega Group: Selfish Accessibility
 
Let's Sharpen Your Agile Ax, It's Story Splitting Time
Let's Sharpen Your Agile Ax, It's Story Splitting TimeLet's Sharpen Your Agile Ax, It's Story Splitting Time
Let's Sharpen Your Agile Ax, It's Story Splitting Time
 
Sharpen your Agile Axe by Brian Sjorber
Sharpen your Agile Axe by Brian SjorberSharpen your Agile Axe by Brian Sjorber
Sharpen your Agile Axe by Brian Sjorber
 
Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018
 
Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusSelfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF Vilnius
 
Emtech(1)
Emtech(1)Emtech(1)
Emtech(1)
 
Making Effective Prototypes
Making Effective PrototypesMaking Effective Prototypes
Making Effective Prototypes
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
 
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
 
chatgpt dalle.pptx
chatgpt dalle.pptxchatgpt dalle.pptx
chatgpt dalle.pptx
 
Arts & Crafts: 5 Tips for Becoming a Better Marketer-Designer
Arts & Crafts: 5 Tips for Becoming a Better Marketer-DesignerArts & Crafts: 5 Tips for Becoming a Better Marketer-Designer
Arts & Crafts: 5 Tips for Becoming a Better Marketer-Designer
 
Selfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceSelfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital Service
 
How to Make User Experience Practical in your Library
How to Make User Experience Practical in your LibraryHow to Make User Experience Practical in your Library
How to Make User Experience Practical in your Library
 
Webconf 2013 - Media Query 123
Webconf 2013 - Media Query 123Webconf 2013 - Media Query 123
Webconf 2013 - Media Query 123
 
Project and lean product management
Project and lean product managementProject and lean product management
Project and lean product management
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
 

More from 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 Web
kitconcept GmbH
 

More from kitconcept GmbH (20)

Keynote Plone Tagung 2024 - New Horizons: Die Zukunft von Plone 6
Keynote Plone Tagung 2024 - New Horizons: Die Zukunft von Plone 6Keynote Plone Tagung 2024 - New Horizons: Die Zukunft von Plone 6
Keynote Plone Tagung 2024 - New Horizons: Die Zukunft von Plone 6
 
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
 

Recently uploaded

Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
AlecAnidul
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
anasabutalha2013
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
cyebo
 

Recently uploaded (20)

Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
bobbi goods amelie y ximena # Bobbie gods forever
bobbi goods amelie y ximena # Bobbie gods foreverbobbi goods amelie y ximena # Bobbie gods forever
bobbi goods amelie y ximena # Bobbie gods forever
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive design
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 

Invisioning UX and UI