In this Presentation you could see the first details about the radically new interface for TYPO3 5.0. (Authors: Jens Hoffmann, Björn Brockmann)

1. The radically
new interface
for TYPO3 5.0
TYPO3

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

3. CSS
TYPO3

4. Crowd Shouts Slides
Click Read Shout
TYPO3

5. TYPO3
TYPO3

6. GOOD!
TYPO3

7. TODAY
TYPO3

8. WE
TYPO3

9. MAKE
TYPO3

10. TYPO3
TYPO3

11. HISTORY
TYPO3

12. AGAIN!
TYPO3

13. tt_clap
TYPO3

14. How we got here
Holiday Inn Frankfurt City South Conference Center
50° 5'31.26" N 8°41'27.75" E
TYPO3

15. First thoughts
Kopenhagen
Rasmus & Jens

16. Project setup
Berlin
Robert & Jens

17. Project kickoff
Lübeck
Björn, Rasmus, Robert, Karsten & Jens

18. Project details
Frankfurt
Jens & Björn

19. Concept refactoring
Ibiza
Jens

20. Reviewing concepts
Björn & Jens

21. Syncing current results
Mainz
Björn, Robert, Karsten & Jens

22. First public presentation
Frankfurt
Björn & Jens

23. Early Snap Shot of the
TYPO3 5.0 UI Project

24. E SS
Early Snap Shot of the
R
P R
TYPO3 5.0OUIG Project
IN

25. We started ...
TYPO3

26. from
scratch ...

27. Inspiration
TYPO3

38. Guiding Principles
TYPO3

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

40. Ease the pain
complexity, inconsistencies, complicated and redundant workflows
TYPO3

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

42. Good defaults
reduce complexity in the interface
TYPO3

43. Reduce abstraction
were possible (front-end)
TYPO3

44. Standardised workflows
based on good defaults
TYPO3

45. Strong consistency
honor established workflows and visual taxonomy
TYPO3

46. Context over consistency
if it makes more sense that way
TYPO3

47. General Concepts
TYPO3

48. General Concepts
‣ Workspace
‣ Views
‣ Navigation
‣ Dashboard
‣ Tabs
‣ Editing
‣ Autosave
TYPO3

49. Workspace
Live Workspace
Personal Workspace(s)
TYPO3

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

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

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

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

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

56. Tabs
‣ Behave like Browser Tabs
‣ Changes only happen within the current Tab
TYPO3

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

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

59. Personas
TYPO3

60. TYPO3

61. TYPO3

62. Mr. Klein Key Characteristics
Editor
‣ Content editing
‣ Editor is restrained from
a lot of the CMS details
‣ Typically doesn't remember
their password
‣ Will never change the
overall structure of a site
TYPO3

63. Mr. Klein Goals
Editor
‣ Keeping the website up to date
Tasks
‣ Add, edit, move and delete content
‣ e.g. produce news articles
TYPO3

64. Mr. Klein Needs
Editor
‣ Simplicity and ease-of-use
‣ Guidance
‣ Help moving from big picture
to specific actions
‣ Proactive communication
TYPO3

65. eloper
cri pt Dev
TypoS Editor
Conten t Manager
User Manager
Designer
HTML Des
igner
eloper
PHP Dev Marketing M
anager
System A dministrator
TYPO3

66. Editor
Marketing Manager
Content Manager
HTML Designer
User Manager
TypoScript Developer
PHP Developer
Designer
System Administrator
TYPO3

67. Content
Report
Man agement
Layout
System
TYPO3

68. Management Layout
Content Report System
TYPO3

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

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

71. The UI concept
TYPO3

72. What is a Wireframe?
TYPO3

75. All you going to see
are Wireframes

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

77. Login
TYPO3

78. Login transition
www.domain.com /the/path/to/my/subpage
TYPO3

79. Login transition
www.domain.com /typo3 # /the/path/to/my/subpage
TYPO3

82. Global dataview Global widgets Branding & Version
User account
CMS Sections
Moduls
Content / Structure / Settings

83. Menu display style
TYPO3

85. Search
TYPO3

90. Overlay Menus
TYPO3

93. Content editing
TYPO3

117. Version comments
TYPO3

124. Page settings
TYPO3

128. Page management
TYPO3

132. Page protocol
TYPO3

136. Page workflow
TYPO3

139. Page scrolling
TYPO3

143. Management view
TYPO3

148. Rootline Navigation
TYPO3

153. Tree view definietion
TYPO3

156. Management editing
TYPO3

162. Management multi-editing
TYPO3

166. Input action UI
TYPO3

167. Regular user
Job Tasks Tasks Tasks Solution
TYPO3

168. Advanced user
Job Tasks Solution
TYPO3

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

170. Input action UI
Action Type Context
TYPO3

180. Next ...
TYPO3

181. How we will proceed
1. Ongoing weekly sessions
2. Qualitative reality checks
3. Prototypes & Refactoring
4. Core concept freezing
5. Creating screen designs
6. Creating module concepts
7. Results reviewing / QM
TYPO3

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

183. Support big visions!
TYPO3

184. ~100.000 Registered User
~300 Association Member
TYPO3

185. Join the Association
Transparent communication?
Ask for more influence!
TYPO3

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

187. Questions?
Meet us at a „Birds of a Feather“ session
Friday - 18:00 - Baden
TYPO3

188. Enjoy the event. ;)
TYPO3