Embed Size (px)
DESCRIPTION
Presentation of the new UI for TYPO3 5.0. It showed the new way to the new UI and the UI itself, based on Wireframes. We cover some Theoretical topics for e.g.: Underlaying guiding principles, Some Inspirations, typical CMS Personas, our General Concepts and the Concept as Wireframes. This is the extended Version of the Presentation. At the UXcamp 2010 #uxce10 we showed a shorter Version, which was still to long, sorry for that :) This is the Presentation from the TYPO3 Conference 2010 in Dallas.
Citation preview
... still iterating
Experience ConceptTYPO3 5.0
Björn Brockmann
Creative Directord.k.d Internet Service GmbH
Clients:
TYPO3 Usability Team MemberTYPO3 Design & Usability Team LeaderTYPO3 5.0 Core Team Member„Official TYPO3 Websites“ Team Member
Fiat, Harman Kardon, Chevrolet Europe, Cadillac, Fissler, Kellogg´s, Samsung
Lufthansa, Telekom, Cocoon, Anzag, TAZ, VGF, WWF
Jens Hoffmann
User Experience LeadLeo Burnett GmbH
Clients:
TYPO3Inspire people to share
TYPO3
Facts of TYPO3 4.x
TYPO3
TYPO3
It‘s true Open Source
TYPO3 is completelyfree of any licensing feesand vendor driven interest
TYPO3
World‘s most used CMS
‣ Estimated 500.000+ installations
‣ 100.000+ registered users worldwide(potential developers for TYPO3 and your project)
‣ Huge powerbase with ~5000 developersand an equal number of agencys
‣ 60+ Global Usergroups
‣ Currently 32 core developer
TYPO3
Technical Key-features
‣ Unlimited extendability (4000+ Extensions)
‣ Flexible configuration language (TypoScript)
‣ Very powerfull serverside graphic-engine
‣ Unique Templating systems(Classic, TemplaVoilá & Fluid)
‣ Fully static content publishing for maximum performance and security
‣ Lots of authentication schemes and services connectors
TYPO3
‣ Full Multi-language & Multi-site support
‣ Workspaces & Versioning (History / Undo) with advanced custom workflows behind
‣ Complete user permission management
‣ Enterprise Digital Asset Management (DAM)for content, media-files & documents
‣ Fully integrated Rich Text Editor (RTE)
‣ Impressive „Frontend“ Featuresetwith comfortable Frontend-Editing
Functional Key-features
TYPO3T3DAM10
T3SAIL10-DK
T3NLUG10
T3BOARD10
T3CLIMB10
T3BUGDAY
T3UXW09
T3DD10
T3UGs
T3ZTG10
T3DIVE10 T3AK10
T3UNI10-FR
T3CON10
T3AWT10
T3SKI10-JP
T3GA10
T3CON10-US
Global Events
TYPO3camps
TYPO3
Biggest advantages
Free of licensing fees
No license fee for system & server
Free extensions for custom usage
More budget for extras & support
High Flexibility
Unlimited extendability & features
Connection to existing infrastructure
Shorter development periods
True OpenSource
Spirit & Safety
A step ahead of proprietary systems
Enormous community of knowledge
Fair Independence
TYPO3 can never go out of business
Free choice of agency at any time
No mandatory recurring fees
TYPO3
Possible Drawbacks
Free of licensing fees
No / Less income
High Flexibility
Unlimited solutions for similar task
True OpenSource
Hard to control development
Fair Independence
Constantly switching directions
TYPO3Source: www.wenger.ch
Impressive feature set
TYPO3
Impressive feature set
TYPO3
Joy of use!
TYPO3
We started ..
fromscratch!
TYPO3
Guiding Principles
flexibility, scalability, connect-ability, page-tree Preserve the soul
complexity, inconsistencies, complicated and redundant workflowsEase the pain
goals, tasks, needs and limitations of the end user(s)User centered design
reduce complexity in the interfaceGood Defaults
were possible (eg. the „frontend“)Reduce abstraction
honor standardised workflows, defaults and visual taxonomyStrong consistency
if it makes more sense that wayContext over consistency
Reduce the visual noise where possibleFeatures on demand
TYPO3
Inspirations
... we looked at over 150 Systems
TYPO3
General Concepts
TYPO3
Workspace
Live Workspace
Personal Workspace(s)
TYPO3
Workspace
Live Workspace
Team / Stage Workspace(s)
Personal Workspace(s)
TYPO3
Workspace
Live Workspace
Team / Stage Workspace(s)
Personal Workspace(s)
TYPO3
Workspace
‣ NO editing in the live Workspace
‣ At least one Workflow step is always needed!
‣ Personal Workspaces (environments)
‣ Collaborative communication
TYPO3
View Styles
‣ Custom views for data visualization via templating
‣ Easy to extend / add new views
‣ Pages, Lists, Thumbnails, vCards, Google Maps, Olap, Gant, ...
TYPO3
Rootline Menu‣ Fixed area of navigation
‣ Stay consistent in all navigation levels
‣ Sneak peek into any previous navigation level
‣ Jump back into any previous navigation level with one click
‣ Sitemap like overview
TYPO3
Dashboard
‣ Communication
‣ Tasks and Workflows
‣ Widgets and Scripts
‣ History of edited elements
TYPO3
Tabs
‣ Internal tabs behave like Browser-Tabs
‣ Changes only happen within the current Tab
‣ Use the Bowser-Tab as user interface, too
TYPO3
Editing‣ Inline-Editing
activated by Double Click
‣ Advanced-Editingactivated by Single Click to select + a Click to start an Action
‣ Drag & Drop for small distances
‣ Copy & Pasted for large distances
TYPO3
Autosave
‣ Less manual saving
‣ Do it automatically in a transparent way
‣ Easy and quick interface to roll back changes
TYPO3
Personas
TYPO3
Klaus & Margarete (Content Editor)
Goals Implement new content and keep it up to date
Tasks Add, edit, move and delete content
Needs Simplicity and ease-of-use \\ Guidance \\ Reduced abstraction \\ Proactive communication
All ages and backgrounds \\ Proficient with keyboard and mouse \\ Interact with the system on a irregular basis \\ Do not change the structure of the site
TYPO3
Robin (Content Manager)
Goals Structure the site \\ Enable new feature sets
Tasks Manage site & page structure \\ Apply templates \\ Configure modules \\ Integrate assets
Needs Maintain an overview at all times \\ Focus on task at hand
25+ \\ Organizer \\ Handles job with care \\ Advanced PC skills \\ Uses CMS features to the max
TYPO3
Hermine (User Manager)
Goals Administer System Users
Tasks Create, Edit, Delete: Users, Groups & Access Rights
Needs Simplicity and ease-of-use \\ Guidance \\ Reduced abstraction \\ Proactive communication
30+ \\ Right hand of the boss or HR \\ Always charming \\ Proficient with keyboard and mouse \\ Occasional usage of the CMS
TYPO3
Sgt. Hartman (Project Manager)
Goals Get the website live on time
Tasks Monitor and manage tasks & employees workloads
Needs Resources & task managing tool
25-35 \\ Good People/Soft skills \\ Well dressed \\ Stressed \\ Too much coffee \\ Needs to use information externally
TYPO3
Bill (Marketing Manager)
Goals Monitor performance of the site
Tasks Run analytic queries and communicate them in reports
Needs Site performance data gathering \\ visualization & export
30+ \\ Humans are only Resources \\ Stressed & out of time \\ Well dressed \\ Weekly Haircut \\ Expert in excel & word \\ Lives in email
TYPO3
Cornelius (HTML Designer)
Goals Implement site design
Tasks Create, Edit: HTML, CSS & JS code \\ Add fluid syntax to HTML templates
Needs HTML editor & QA tool
16-25 \\ Designer gone coder & vice-versa \\ Hacker dude beyond Dreamweaver \\ Knows his Mac inside out \\ Doesn't accept the status quo
TYPO3
Gallus (TYPO3 Integrator)
Goals Connect HTML with TYPO3
Tasks Create, edit & debug TypoScript \\ Enhance HTML templates with Fluid \\ Configure packages
Needs Powerful editing and debugging tools
20+ \\ Aims to be a developer \\ Deep knowledge in TYPO3 \\ Certified by T3A \\ Able to read modern programming paradigmas
TYPO3
Roger R. (PHP Developer)
Goals Expand functionality \\ Fix problems
Tasks Create/Edit PHP Code \\ Implement features \\ Connect other services \\ Unit testing \\ Write stand-alone applications
Needs Web-Application framework \\ Debug functionality \\ Unit status monitor
25-45 \\ Loves modern programming paradigmas \\ Uses power editors \\ Likes challenging tasks
TYPO3
Kaspersky (System Administrator)
Goals Set up TYPO3 installation \\ Keep the system secure and running \\ Manage multiple installations
Tasks Installing, optimizing & updating TYPO3 \\ Performing backups
Needs System monitor \\ Service interfaces
30-50 \\ Avoids sunlight \\ The console is his interface \\ Love to automate tasks
TYPO3
TYPO3
TYPO3
Content Manager
Content Editor
HTML Designer
Marketing ManagerPHP Developer
System Administrator
TYPO3 Integrator
User ManagerProject Manager
TYPO3
Content Editor
Marketing Manager
System Administrator
HTML Designer
PHP Developer
TYPO3 Integrator
Content Manager
User Manager
TYPO3
Management
Content
Layout
Report
System
TYPO3
ManagementContent
LayoutReport System
TYPO3
UI Architecture
User
Global Functionalities
CMS Sections
Content / Structure / Settings
TYPO3
Content / Structure / Settings
System Sections
Global Widgets User
Section Moduls
UI Layout
TYPO3
The Concept
TYPO3
What is a Wireframe?
All you going to seeare Wireframes
All you going to seeare WireframesNOT LAYOUTS
TYPO3
Login
TYPO3
The „Backend“
Modul content
Section Moduls
System Sections
Global Widgets Brand & User
TYPO3
Menu display style
TYPO3
Content editing
TYPO3
Version comments
TYPO3
Page settings
TYPO3
Page management
TYPO3
Page protocol
TYPO3
Page workflow
TYPO3
Page scrolling
TYPO3
Management view
TYPO3
Rootline navigation
TYPO3
Tree view definietion
TYPO3
Management editing
TYPO3
Management multi-editing
TYPO3
Global overlays
TYPO3
Global Messages
TYPO3
Clipboard UI
TYPO3
Snapshot menu
TYPO3
Chat UI
TYPO3
Help menu
TYPO3
User widgets
TYPO3
Modul view filter
TYPO3
Search
TYPO3
Input action UI
TYPO3
Job DoneTasksTasks Tasks
Regular user
TYPO3
TasksJob Done
Advanced user
sex is updatedb; locate; talk; date; cd; strip; look; touch; finger; unzip; uptime; gawk; head; apt-get install condom; mount; fsck; gasp; more; yes; more; umount; apt-get remove --purge condom; make clean; sleep;
TYPO3
Input action UI
Action Type Context
TYPO3
Help wantedFeedback is very welcomed!
TYPO3
Get involved & create buzz!
tr.im/t35uiAbstract & Channels
Structure, Wireframes, & Scribbles
TYPO3
Questions?We need feedback! Meet us, please.
TYPO3
Thank‘s
Mail:[email protected]
Twitter : wrybit
Jens Hoffmann
Mail: [email protected]
Twitter :headballooning
Björn Brockmann
TYPO3
Go uxcamping ;)
