The radically new interface for TYPO3 5.0
188
TYPO3 The radically for TYPO3 5.0 new interface
-
Upload
jens-hoffmann -
Category
Design
-
view
10.141 -
download
8
description
In this Presentation you could see the first details about the radically new interface for TYPO3 5.0. (Authors: Jens Hoffmann, Björn Brockmann)
Transcript of The radically new interface for TYPO3 5.0
TYPO3
The radically
for TYPO3 5.0new interface
TYPO3
Jens Hoffmann
Senior User Experience PlannerLeo Burnett GmbH
Clients:
Björn Brockmann
Creative Directord.k.d Internet Service GmbH
Clients:
TYPO3 Usability Team MemberTYPO3 Usability Team LeaderTYPO3 5.0 Core Team Member„Official TYPO3 Websites“ Team MemberTYPO3 Marketing Team Member
Fiat, Harman Kardon, Chevrolet Europe, Cadillac, Fissler, Kellogg´s, Samsung
Cocoon, Helpedia, Lufthansa, Metz, Telekom, TAZ, VGF, WWF
TYPO3
CSS
TYPO3
Crowd Shouts Slides
Click Read Shout
TYPO3
TYPO3
TYPO3
GOOD!
TYPO3
TODAY
TYPO3
WE
TYPO3
MAKE
TYPO3
TYPO3
TYPO3
HISTORY
TYPO3
AGAIN!
TYPO3
tt_clap
TYPO3
How we got hereHoliday Inn Frankfurt City South Conference Center
50° 5'31.26" N 8°41'27.75" E
First thoughtsKopenhagen
Rasmus & Jens
Project setupBerlin
Robert & Jens
Project kickoffLübeck
Björn, Rasmus, Robert, Karsten & Jens
Project details Frankfurt
Jens & Björn
Concept refactoringIbiza
Jens
Reviewing concepts
Björn & Jens
Syncing current resultsMainz
Björn, Robert, Karsten & Jens
First public presentationFrankfurt
Björn & Jens
Early Snap Shot of the TYPO3 5.0 UI Project
Early Snap Shot of the TYPO3 5.0 UI ProjectIN PROGRESS
TYPO3
We started ...
from
scratch ...
TYPO3
Inspiration
TYPO3
Guiding Principles
TYPO3
Preserve the soulflexibility, scalability, connect-ability, page-tree
TYPO3
Ease the paincomplexity, inconsistencies, complicated and redundant workflows
TYPO3
User centered designgoals, tasks, needs and limitations of the end user(s)
TYPO3
Good defaultsreduce complexity in the interface
TYPO3
Reduce abstraction were possible (front-end)
TYPO3
Standardised workflowsbased on good defaults
TYPO3
Strong consistency honor established workflows and visual taxonomy
TYPO3
Context over consistency if it makes more sense that way
TYPO3
General Concepts
TYPO3
General Concepts
‣ Workspace
‣ Views
‣ Navigation
‣ Dashboard
‣ Tabs
‣ Editing
‣ Autosave
TYPO3
Workspace
Live Workspace
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
Views
‣ 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
‣ Behave like Browser Tabs
‣ Changes only happen within the current Tab
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
TYPO3
TYPO3
Key Characteristics
‣ Content editing
‣ Editor is restrained from a lot of the CMS details
‣ Typically doesn't remember their password
‣ Will never change theoverall structure of a site
Mr. Klein Editor
TYPO3
Goals
‣ Keeping the website up to date
Tasks
‣ Add, edit, move and delete content
‣ e.g. produce news articles
Mr. Klein Editor
TYPO3
Needs
‣ Simplicity and ease-of-use
‣ Guidance
‣ Help moving from big picture to specific actions
‣ Proactive communication
Mr. Klein Editor
TYPO3
Content Manager
Designer
Editor
HTML Designer
Marketing ManagerPHP Developer
System Administrator
TypoScript Developer
User Manager
TYPO3
Content Manager
Designer
Editor
HTML Designer
Marketing Manager
PHP Developer
System Administrator
TypoScript DeveloperUser 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
CMS Sections
Global Functionalities User
Moduls
UI Layout
TYPO3
The UI concept
TYPO3
What is a Wireframe?
All you going to seeare Wireframes
All you going to seeare WireframesNOT LAYOUTS
TYPO3
Login
TYPO3
www.domain.com /the/path/to/my/subpage
Login transition
TYPO3
www.domain.com /typo3 # /the/path/to/my/subpage
Login transition
Content / Structure / Settings
Global dataview Branding & VersionGlobal widgetsUser account
CMS Sections
Moduls
TYPO3
Menu display style
TYPO3
Search
TYPO3
Overlay Menus
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
Input action UI
TYPO3
Job SolutionTasksTasks Tasks
Regular user
TYPO3
TasksJob Solution
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
Next ...
TYPO3
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
Thank‘s
Mail:[email protected]
Twitter : wrybit
Jens Hoffmann
Mail: [email protected]
Twitter :headballooning
Björn Brockmann
TYPO3
Support big visions!
TYPO3
~300 Association Member
~100.000 Registered User
TYPO3
Join the Association
Ask for more influence!Transparent communication?
TYPO3
Get involved & create buzz!
tr.im/t35uiAbstract & Channels
Structure, Wireframes, & Scribbles
TYPO3
Questions?Meet us at a „Birds of a Feather“ sessionFriday - 18:00 - Baden
TYPO3
Enjoy the event. ;)
