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.

1. TYPO3 5.0
Experience Concept
... still iterating

2. Jens Hoffmann Björn Brockmann
Creative Director User Experience Lead
d.k.d Internet Service GmbH Leo Burnett GmbH
Clients: Lufthansa, Telekom, Clients: Fiat, Harman Kardon,
Cocoon, Anzag, Chevrolet Europe,
TAZ, VGF, WWF Cadillac, Fissler,
Kellogg´s, Samsung
TYPO3 Design & Usability Team Leader TYPO3 Usability Team Member
TYPO3 5.0 Core Team Member
„Official TYPO3 Websites“ Team Member

3. TYPO3
Inspire people to share

4. Facts of TYPO3 4.x
TYPO3

5. TYPO3

10. It‘s true Open Source
TYPO3 is completely
free of any licensing fees
and vendor driven interest
TYPO3

11. 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 developers
and an equal number of agencys
‣ 60+ Global Usergroups
‣ Currently 32 core developer
TYPO3

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

13. Functional Key-features
‣ 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“ Featureset
with comfortable Frontend-Editing
TYPO3

14. Global Events
T3BOARD10 T3UGs
T3CON10
T3SKI10-JP T3NLUG10
T3CON10-US
T3DD10
T3SAIL10-DK T3UNI10-FR
T3GA10
T3DIVE10 T3AK10
T3CLIMB10 T3AWT10
T3UXW09 TYPO3camps
T3ZTG10 T3DAM10
T3BUGDAY TYPO3

15. Biggest advantages
High Flexibility Free of licensing fees
Unlimited extendability & features No license fee for system & server
Connection to existing infrastructure Free extensions for custom usage
Shorter development periods More budget for extras & support
Fair Independence True OpenSource
TYPO3 can never go out of business Spirit & Safety
Free choice of agency at any time A step ahead of proprietary systems
No mandatory recurring fees Enormous community of knowledge
TYPO3

16. Possible Drawbacks
High Flexibility Free of licensing fees
Unlimited solutions for similar task No / Less income
Fair Independence True OpenSource
Constantly switching directions Hard to control development
TYPO3

17. Impressive feature set
TYPO3
Source: www.wenger.ch

18. Impressive feature set
TYPO3

19. Joy of use!
TYPO3

20. We started ..
TYPO3

21. from
sc ra tc h!

22. Guiding
Principles
TYPO3

23. Preserve the soul
flexibility, scalability, connect-ability, page-tree

24. Ease the pain
complexity, inconsistencies, complicated and redundant workflows

25. User centered design
goals, tasks, needs and limitations of the end user(s)

26. Good Defaults
reduce complexity in the interface

27. Reduce abstraction
were possible (eg. the „frontend“)

28. Strong consistency
honor standardised workflows, defaults and visual taxonomy

29. Context over consistency
if it makes more sense that way

30. Features on demand
Reduce the visual noise where possible

31. Inspirations
... we looked at over 150 Systems TYPO3

42. General
Concepts
TYPO3

43. Workspace
Live Workspace
Personal Workspace(s)
TYPO3

44. Workspace
Live Workspace
Team / Stage Workspace(s)
Personal Workspace(s)
TYPO3

45. Workspace
Live Workspace
Team / Stage Workspace(s)
Personal Workspace(s)
TYPO3

46. Workspace
‣ NO editing in the live Workspace
‣ At least one Workflow step is always needed!
‣ Personal Workspaces (environments)
‣ Collaborative communication
TYPO3

47. View Styles
‣ Custom views for data visualization via templating
‣ Easy to extend / add new views
‣ Pages, Lists, Thumbnails, vCards,
Google Maps, Olap, Gant, ...
TYPO3

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

50. Dashboard
‣ Communication
‣ Tasks and Workflows
‣ Widgets and Scripts
‣ History of edited elements
TYPO3

51. Tabs
‣ Internal tabs behave like Browser-Tabs
‣ Changes only happen within the current Tab
‣ Use the Bowser-Tab as user interface, too
TYPO3

52. Editing
‣ Inline-Editing
activated by Double Click
‣ Advanced-Editing
activated by Single Click to select
+ a Click to start an Action
‣ Drag & Drop for small distances
‣ Copy & Pasted for large distances
TYPO3

53. Autosave
‣ Less manual saving
‣ Do it automatically in a transparent way
‣ Easy and quick interface to roll back changes
TYPO3

54. Personas
TYPO3

55. TYPO3

56. Klaus & Margarete (Content Editor)
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
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
TYPO3

57. Robin (Content Manager)
25+ Organizer Handles job with care
Advanced PC skills Uses CMS features
to the max
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
TYPO3

58. Hermine (User Manager)
30+ Right hand of the boss or HR
Always charming Proficient with
keyboard and mouse Occasional usage
of the CMS
Goals Administer System Users
Tasks Create, Edit, Delete:
Users, Groups & Access Rights
Needs Simplicity and ease-of-use
Guidance Reduced abstraction
Proactive communication
TYPO3

59. Sgt. Hartman (Project Manager)
25-35 Good People/Soft skills Well
dressed Stressed Too much coffee
Needs to use information externally
Goals Get the website live on time
Tasks Monitor and manage tasks &
employees workloads
Needs Resources & task managing tool
TYPO3

60. Bill (Marketing Manager)
30+ Humans are only Resources
Stressed & out of time Well dressed
Weekly Haircut Expert in excel & word
Lives in email
Goals Monitor performance of the site
Tasks Run analytic queries and
communicate them in reports
Needs Site performance data gathering
visualization & export
TYPO3

61. Cornelius (HTML Designer)
16-25 Designer gone coder & vice-versa
Hacker dude beyond Dreamweaver
Knows his Mac inside out Doesn't accept
the status quo
Goals Implement site design
Tasks Create, Edit: HTML, CSS & JS code
Add fluid syntax to HTML templates
Needs HTML editor & QA tool
TYPO3

62. Gallus (TYPO3 Integrator)
20+ Aims to be a developer Deep
knowledge in TYPO3 Certified by T3A Able
to read modern programming paradigmas
Goals Connect HTML with TYPO3
Tasks Create, edit & debug TypoScript
Enhance HTML templates with Fluid
Configure packages
Needs Powerful editing
and debugging tools
TYPO3

63. Roger R. (PHP Developer)
25-45 Loves modern programming
paradigmas Uses power editors
Likes challenging tasks
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
TYPO3

64. Kaspersky (System Administrator)
30-50 Avoids sunlight The console is
his interface Love to automate tasks
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
TYPO3

65. TYPO3

66. Integrator Content Ed
it
TYPO3 or
Conten t Manager
Pr oject Manager
User Manager
HTML Des
igner
eloper
PHP Dev
Marketing M
anager
System Administrator
TYPO3

67. Content Editor
Marketing Manager
Content Manager
HTML Designer
User Manager
TYPO3 Integrator
PHP Developer
System Administrator
TYPO3

68. Content
Report
Man agement
Layout
System
TYPO3

69. Management Layout
Content Report System
TYPO3

70. UI Architecture
User
Global Functionalities
CMS Sections
Content / Structure / Settings
TYPO3

71. UI Layout
Global Widgets User
System Sections
Section Moduls
Content / Structure / Settings
TYPO3

72. The Concept
TYPO3

73. What is a Wireframe?
TYPO3

76. All you going to see
are Wireframes

77. All you goingOUTS
to see
NO T L AY
are Wireframes

78. Login
TYPO3

83. The „Backend“
TYPO3

86. Global Widgets Brand & User
System Sections
Section Moduls
Modul content

87. Menu display style
TYPO3

90. Content editing
TYPO3

121. Version comments
TYPO3

127. Page settings
TYPO3

130. Page management
TYPO3

134. Page protocol
TYPO3

138. Page workflow
TYPO3

141. Page scrolling
TYPO3

145. Management view
TYPO3

150. Rootline navigation
TYPO3

158. Tree view definietion
TYPO3

163. Management editing
TYPO3

169. Management multi-editing
TYPO3

173. Global overlays
TYPO3

174. Global Messages
TYPO3

176. Clipboard UI
TYPO3

181. Snapshot menu
TYPO3

183. Chat UI
TYPO3

196. Help menu
TYPO3

198. User widgets
TYPO3

200. Modul view filter
TYPO3

203. Search
TYPO3

209. Input action UI
TYPO3

210. Regular user
Job Tasks Tasks Tasks Done
TYPO3

211. Advanced user
Job Tasks Done
TYPO3

212. 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;

213. Input action UI
Action Type Context
TYPO3

224. Help wanted
Feedback is very welcomed!
TYPO3

225. Get involved & create buzz!
tr.im/t35ui
Abstract & Channels
Structure, Wireframes, & Scribbles
TYPO3

226. Questions?
We need feedback! Meet us, please.
TYPO3

227. Thank‘s
Jens Hoffmann Björn Brockmann
Mail: Mail:
jens@typo3.org bjoern@typo3.org
Twitter: Twitter:
wrybit headballooning
TYPO3

228. Go uxcamping ;)
TYPO3