84
DESIGNING A CMS FOR THE FUTURE TYPO3 NEOS UX | UX ROMANDIE |  17TH OF DECEMBER 2013 |  @RASMUSSKJOLDAN

UX Romandie: Designing a CMS for the future

Tags:

Embed Size (px)

DESCRIPTION

Invited by the local @IxDA group UX Romandie in Lausanne to talk about how we applied urban planning principles to the UX planning for the TYPO3 Neos CMS. It was also a talk about how to apply framework-thinking to any kind of User Experience project to overcome death-by-wireframes. When you're able to architect activity compartmentalization, you free up time as a UX'er. In addition, my goal for this talk was to explain how we bridged quite abstract UX concepts to actual implementation in practise on an enterprise-level, complex piece of software. More information: UX Romandie: http://uxromandie.ch/episode-21-designing-a-cms-for-the-future/ Sponsor: Ttree http://ttree.ch/live/agenda/2013/uxromandie-21-designing-a-cms-for-the-future-of-web-edition.html TYPO3 Neos: http://neos.typo3.org/ Karen McGrane about TYPO3 Neos: www.youtube.com/watch?v=RhOQfnEQ7lc

Citation preview

Page 1: UX Romandie: Designing a CMS for the future

DESIGNING A CMS FOR THE FUTURE

TYPO3 NEOS UX | UX ROMANDIE |  17TH OF DECEMBER 2013 |  @RASMUSSKJOLDAN

Page 2: UX Romandie: Designing a CMS for the future

UX INFRASTRUCTURE

Page 3: UX Romandie: Designing a CMS for the future

1. URBAN PLANNING PRINCIPLES

Page 4: UX Romandie: Designing a CMS for the future

2. TYPO3 NEOS MASTER PLAN

Page 5: UX Romandie: Designing a CMS for the future

3. AUTHOR EXPERIENCE DESIGN

Page 6: UX Romandie: Designing a CMS for the future

ME & TYPO3

Page 7: UX Romandie: Designing a CMS for the future

NUMBER-FREE ZONE

Page 8: UX Romandie: Designing a CMS for the future
Page 9: UX Romandie: Designing a CMS for the future
Page 10: UX Romandie: Designing a CMS for the future
Page 11: UX Romandie: Designing a CMS for the future
Page 12: UX Romandie: Designing a CMS for the future
Page 13: UX Romandie: Designing a CMS for the future
Page 14: UX Romandie: Designing a CMS for the future
Page 15: UX Romandie: Designing a CMS for the future

URBAN PLANNING

Page 16: UX Romandie: Designing a CMS for the future
Page 17: UX Romandie: Designing a CMS for the future

BEAUTIFUL PROBLEMS

Page 18: UX Romandie: Designing a CMS for the future

CMS, A TOOL TO DO… !

LOTS OF UNKNOWN STUFF

Page 19: UX Romandie: Designing a CMS for the future
Page 20: UX Romandie: Designing a CMS for the future
Page 21: UX Romandie: Designing a CMS for the future
Page 22: UX Romandie: Designing a CMS for the future
Page 23: UX Romandie: Designing a CMS for the future
Page 24: UX Romandie: Designing a CMS for the future
Page 25: UX Romandie: Designing a CMS for the future
Page 26: UX Romandie: Designing a CMS for the future
Page 27: UX Romandie: Designing a CMS for the future
Page 28: UX Romandie: Designing a CMS for the future
Page 29: UX Romandie: Designing a CMS for the future
Page 30: UX Romandie: Designing a CMS for the future

URBAN PLANNING: INCLUSIVENESS REGENERATIONTRANSPORT WAYFINDING LIVABILITY PRIVATE & PUBLIC SPACE

Page 31: UX Romandie: Designing a CMS for the future

NEOS MASTER PLAN

Page 32: UX Romandie: Designing a CMS for the future

5 GUIDING PRINCIPLES

Page 33: UX Romandie: Designing a CMS for the future

CREATE BOUNDARIES

Page 34: UX Romandie: Designing a CMS for the future

THE CMS MUST FOLLOW YOUR THINKING — NOT THE OTHER WAY AROUND

Page 35: UX Romandie: Designing a CMS for the future

WHEN YOU NEED POWER FOR YOUR SHED, DON’T USE A NUCLEAR PLANT

Page 36: UX Romandie: Designing a CMS for the future

TEST STUFF BEFORE YOU SHIP IT

Page 37: UX Romandie: Designing a CMS for the future
Page 38: UX Romandie: Designing a CMS for the future

INCLUSIVENESS REGENERATIONTRANSPORT WAYFINDING LIVABILITY PRIVATE & PUBLIC SPACE

Page 39: UX Romandie: Designing a CMS for the future
Page 40: UX Romandie: Designing a CMS for the future
Page 41: UX Romandie: Designing a CMS for the future
Page 42: UX Romandie: Designing a CMS for the future
Page 43: UX Romandie: Designing a CMS for the future
Page 44: UX Romandie: Designing a CMS for the future

NEOS MASTER PLAN

Page 45: UX Romandie: Designing a CMS for the future

FULL-SCREEN / IN-PLACE EDITING

Page 46: UX Romandie: Designing a CMS for the future

TOP ENABLED, PUBLISHING (SEND TO NEXT STEP IN WORKFLOW)

Page 47: UX Romandie: Designing a CMS for the future

FULL MENU SHOWING SITES (THERE CAN BE MORE) + MODULES

Page 48: UX Romandie: Designing a CMS for the future
Page 49: UX Romandie: Designing a CMS for the future

NAVIGATE / CONTENT TREE (CAN SHOW ARTICLES, CHAPTERS, TAGS, BLOG POSTS, SHORTCUTS ETC.)

Page 50: UX Romandie: Designing a CMS for the future

“STRUCTURE” MENU GETS YOU INTO NESTED ELEMENTS

Page 51: UX Romandie: Designing a CMS for the future
Page 52: UX Romandie: Designing a CMS for the future
Page 53: UX Romandie: Designing a CMS for the future

INSPECTOR – PROPERTIES, META-DATA, VARIANT SELECTIONS

Page 54: UX Romandie: Designing a CMS for the future

INSPECTOR – CHANGING THE PUBLISHING DATE

Page 55: UX Romandie: Designing a CMS for the future

INSPECTOR – CHANGING THE PAGE TITLE

Page 56: UX Romandie: Designing a CMS for the future

EDIT / PREVIEW MODES

Page 57: UX Romandie: Designing a CMS for the future

EDITING CONTENT WITHOUT TEMPLATE

Page 58: UX Romandie: Designing a CMS for the future

TEMPLATE-LESS EDITING INTERFACE IN FULL-SCREEN

Page 59: UX Romandie: Designing a CMS for the future
Page 60: UX Romandie: Designing a CMS for the future

STR

EETS

HO

MES

Page 61: UX Romandie: Designing a CMS for the future

PUBLIC

PRIVATE

Page 62: UX Romandie: Designing a CMS for the future

CONTENT

METADATA

Page 63: UX Romandie: Designing a CMS for the future
Page 64: UX Romandie: Designing a CMS for the future
Page 65: UX Romandie: Designing a CMS for the future

AUTHOR EXPERIENCE DESIGN

Page 66: UX Romandie: Designing a CMS for the future

TAILOR THE AUTHORING EXPERIENCE

Page 67: UX Romandie: Designing a CMS for the future

“AXD” !

1. EDIT MODES !

2. PRIORITIZED PREVIEWS !

3. CUSTOMIZE UI’S

Page 68: UX Romandie: Designing a CMS for the future

EDIT PREVIEW

EDIT/PREVIEW FRAMEWORK

Page 69: UX Romandie: Designing a CMS for the future
Page 70: UX Romandie: Designing a CMS for the future
Page 71: UX Romandie: Designing a CMS for the future
Page 72: UX Romandie: Designing a CMS for the future
Page 73: UX Romandie: Designing a CMS for the future
Page 74: UX Romandie: Designing a CMS for the future
Page 75: UX Romandie: Designing a CMS for the future
Page 76: UX Romandie: Designing a CMS for the future
Page 77: UX Romandie: Designing a CMS for the future
Page 78: UX Romandie: Designing a CMS for the future

AMERICAN EXPRESS: STRUCTURED CONTENT—WITH IN-PLACE EDITING

Page 79: UX Romandie: Designing a CMS for the future

WHAT’S NEXT?

Page 80: UX Romandie: Designing a CMS for the future

LOCALISATION

Page 81: UX Romandie: Designing a CMS for the future

RELATIONSHIP PLANNING

Page 82: UX Romandie: Designing a CMS for the future

RITUALISTIC DESIGN

Page 84: UX Romandie: Designing a CMS for the future

@RASMUSSKJOLDAN !RASMUSSKJOLDAN.COM !SLIDESHARE.COM/RASMUSSKJOLDAN