Ideas to improve the Usability of Typo3 4.x / 5.0

Transcription

Ideas to improve the Usability of Typo3 4.x / 5.0
File-Version: 0.6
FileDate: 06.11.2006
Typo3--Team: HumanTypo3
Human-Computer
Computer--Interaction
By Jens Hoffmann
Chart: 1
Index
Index
Target Groups
One Concept
Inconsequent
Done by One
One good way
New Pagetype / -options Structure
Actual Options
New Structure
New Function-Tree
Less Pagetypes
New Pagetree
Menu
Actual Menu Problems
New Menu Structure
Pro & Contra of Actual Menu-Type’s
Default Menu-Type’s
Tapio Menu 1 & 2
The DoJo-Extension
Lasses Menu 3 & 4
Kaspers new Ajax Top-Menu
Context-Menu 2.0
Possible new Backend Version
Menu variation
N ew “Add to Ico nbar W izard”
New Alert Box
New Edit Page
N ew “Add Co ntent W izard”
N ew Listview “Lig ht”
File-Manager variation
TemplaVoilà variation
Usability in Modules / Extension
New Module Ideas
New Help-Tool / -Section
New TS Editor
Taskcenter 2.0
1-2-3 … 11 Installer Inspiration
Ideas from the HCI Team
Competition Partners Backend Designs
Appendix
Icon Click vs. regular Right-Click
New Context-Menu
Icons vs. Text Button
By Jens Hoffmann
Chart: 2
Which Target Groups need which Changes?
By Jens Hoffmann
Chart: 3
Target Groups
Typo3 User (Just an Id ea. It’s n o t based o n any An alytics!)
Administrator
Improve Install- / Config-Modules
Developer
Improve TypoScript / TemplaVoilà
Editor
Improve Content handling / Typo3 Interface (Backend)
“B o ss”
Improve Control-Mechanism (Workflow)
Marketing
Improve Statistics (Google Analytics)
By Jens Hoffmann
Chart: 4
Google Analytics (Focus on Marketing Service)
By Jens Hoffmann
Chart: 5
One Concept!
By Jens Hoffmann
Chart: 6
Sam e Co n cept fo r “sam e” Thin g s!
Inconsequent Examples:
The Menu
Top-Menu = Fade down
Sub-M en u = Co m bo bo x / Text lin k / Ch eckbo x sw itch / …
There should be the same Menu-Style in the Sub-Frame
Add Something
How do I add/move a Page (Steps?/Wizard?)
How do I add/move Content (Clipboard for Page?)
The whole Backend should look like done by one Group
Actual all Extensions could look different
Actual all Extensions navigation could be different
O ne So lutio n: “Layo ut-API-O bjects” fo r the Extensio ns (E.g. FlexForms)
By Jens Hoffmann
Chart: 7
Reducing redundancyredundancy-functions
Nothing should be double available !!!
One good way to do something !!!
One Concept to Navigate in Typo3 (Menutypes)
O ne Co ncept to Create/D el. thing s (Files, Pag es, Co ntent, … )
O ne Co ncept to M o ve/Copy thing s (F., P., C., … )
O ne Co ncept to Edit thin g s. (F., P., C., … )
Examples
No need for the Page-Context-Menu inside of TV.
Already in the Pagetree
Or, no need for the Pagetree, if you selected a Page
If you save it, you get back to the Overview with the Pagetree
No need for the Content-Context-Menu inside of TV/Site.
Ajax Move/Copy + Other-Func. (Icons) directly placed in the C.-Header.
By Jens Hoffmann
Chart: 8
New Pagetype / -options Structure
By Jens Hoffmann
Chart: 9
Actual PagePage-Edit Functions
Defaults
Hide page
Type
Pagetype
Layout
Last updated
“N ew ” until
No search
Access
Selected
Items
TV
Page Template Structure
Use Template Design
Subpages – Page Template Structure
Subpages – Use Template Design
Content
Pagetitle
Alias
Target
No Cache
Cache expires
Subtitle
Hide in Menu
Navigation title
Files
Add Files from Fileadmin
Upload files Direct
TSconfig
Input-Box
Stop page tree
Restrict editing by non-Admins
General Record Storage
Input < Page
Is root of website
Localization settings
Hide default translation of page
Hide page if not translation for current language exists
Login Mode
Contains Extension
Show content from this page instead
General options
Start
Stop
Include Subpages
Advanced
Abstract
Author
eMail
Keywords
Description
Backend User Section
(No Options)
External URL
URL
Type
Shortcut
Shortcut to Page
Shortcut Mode
Mount Point
Mount Point (advanced) < Page
Substitute Mount Point (this page) with Mounted Page
Spacer
Recycler
By Jens Hoffmann
Chart: 10
New Groups for the PagePage-Edit Functions
Default
Page Description - Metadata
Pagetitle
Subtitle
Alias
Navigation title
Target
Layout
Author
eMail
Abstract
Keywords
Description
Last updated
“N ew ” un til
Special Types (Change Icon)
Spacer
SysFolder
Recycler
Contains Extension
Hide Options
Hide page
Hide in Menu
Hide by Calendar
Start
Stop
Include Subpages
TV
General Record Storage
Input < Page
Is root of website
Page Template Structure
Use Template Design
Subpages – Page Template Structure
Subpages – Use Template Design
Content
Connection Types
Shortcut
Shortcut to Page
Shortcut Mode
Mount Point
Mount Point
Substitute Page with Mounted Page
Page Rights
Login Mode
Backend User Section
Group Access-Rights
Show content from this page instead
External URL
URL
Type
Selected Rules
Possible Items
No search
No Cache
Cache expires
TSconfig
Input-Box
Stop page tree
Restrict editing by non-Admins
By Jens Hoffmann
Files
Add Files from Fileadmin
Upload files Direct
Localization settings
Hide default translation of page
Hide page if not translation
for current language exists
Chart: 11
Function Tree for the new PagePage-Edit Concept
Default
Get Settings
from Parent
Special
Types
Hide
Hide
Options
Options
By Jens Hoffmann
Page
Page
Rights
Rights
Normal
Page
TSconfig
Connection
Types
TV
Hide
Options
Page
Description
Page
Rights
Files
TSconfig
Hide
Options
Page
Rights
TSconfig
Chart: 12
Less Pagetypes
Now: 10 Pagetypes + Own Module
Header
closed
Header
open
Future: Only 1 Basic Content-Holder
Add more functions to
the Page, if needed
Like adding Content in TV
Tree-Icon depends on the Functions
Depending on the already added Options above
the new Option you only see Options with make
sense to add. (Check the Diagram with the Functions)
By Jens Hoffmann
Chart: 13
New Pagetree
Ajax is an “m ust h ave” h ere!
Use it like Windows Explorer
Drag & Drop = Move default.
+ CNTR Key = Copy
Click Twice = Rename it
Click + ENF = Delete it
Drag & Drop technique to
create/copy/move/delete Pages
Crate: Drag a new Page into the Pagetree from the Top
(Dummy-Page-Holder:
Click on it to change the predefault Page-Functions)
Move/Copy: Drag&Drop Pages insight the Pagetree around
Delete: Drop it to the box at the bottom
(Typo3 Recycler:
Click on it to get into the Recycler (KJ TYPO3 Recycler))
By Jens Hoffmann
Chart: 14
Actual Menu Problems
By Jens Hoffmann
Chart: 15
Actual Menu
Actual: The Menu is not really Configurable!
User-/Group-R ig hts co uld “hide thin g s” but there is
no w ay to Edit/M o ve/Add/R enam e/… thing s.
Bad Menu Structure
Solution: Pre-Default but editable Menu Structure Setups
(eg .: Ver. 4.0 / Ver. Adm in / Ver. Editor / Ver. N ew bee / … )
Stored in new Config-Data-Records
(Gives us the ability to Export/Im port config urations betw een Typo3’s.)
New Topmenu: Use Ajax to Add/Delete/Rename/Move (Sort) things
(eg: Like in the Windows Startmenu)
Add Separators and Subfolder like in FireFox Bookmarks
Bad Wording
N o t Visible eno ug h W o rding … fine fo r Adm ins o r N erds :)
Eg: Docs = Open Documents
By Jens Hoffmann
Chart: 16
Actual Menu
Inconsequent Menu Design already in the first Menu-Level
„D o cs“ lo o k like a To pic fo r a Subm en u
Admin (Cache) Looks different too
Different Menu types for all Menu levels
Level.1: Foldout Menu Topics
Level.2: GFX Main Buttons
Level.3: Combo box / Checkbox switch
Level.4: Text Link
If you try to understand the Backend as usual Website,
you would never expect this type of Navigation, right?!
Why should an even more complex Backend be like this?
No Icon-Bar at all, only a Menu is possible
Kaspers Solution: The nice Icon-Bar
B ut Ico n s in a “Ico n s-Menu-B ar” sh o uld be m o re like in M $ O ffice 2007
Order in Groups which can be renamed/moved/deleted
Groups can be associated with Modules/Functions so they are Context sensitive
If Gro ups aren’t asso ciated w ith so m ethin g they are Static (alw ays visible)
Otherwise they are Dynamic (only visible if needed by a Module)
By Jens Hoffmann
Chart: 17
“Co nten t Sensitive M en u” in M $ O ffice 2007
By Jens Hoffmann
Chart: 18
New Menu Structure (Predefault & Admin Mode)
Actual
New
Web
Content
Page (TV)
Page
View
List
Info
Access
Functions
Versioning
Template
TemplaVoilà
Direct Mail / Newsletter
Cache All
File
Filelist
Docs
Users
Taskcenter
Setup
Workspaces
Tools
User Admin
Ext Manager
DB Check
Configurations
Install
Log
Indexing
Recycler
phpMyAdmin
VTS
View Page
Edit Page
List Data
File Manager
Extensions
Recycler
Editor Tools
Site Infos
Site Wizzards
Content History
Workspaces
Statistics
Caching
Core Tools (Administration)
Templates
Templavoilà
Extensions
T3 Configuration
User Management
User Accessrights
My Typo3
Dashboard (Taskcenter)
My Configuration
Help
Help
Editor Manual
Admin Manual
About Typo3
About Modules
About
Manual
Admin
Logout
Clear Cache in typo3conf/
Clear FE cache
Logout
By Jens Hoffmann
Legen:
Topic (No Modul behind)
Topic second Style (No Modul behind)
Modul
Extra Installed Extension
Removed
Chart: 19
New Menu Structure (Predefault & Editor Mode)
Actual
New
Web
Page (TV)
Page
View
List
Info
Access
Functions
Versioning
Template
Content
View Page
Edit Page
List Data
File Manager
Extensions
Recycler
TemplaVoilà
Cache All
My Typo3
Dashboard (Taskcenter)
My Configuration
Filelist
Help
File
Docs
Users
Taskcenter
Setup
Workspaces
Tools
Editor Manual
Admin Manual
About Typo3
Logout
User Admin
Ext Manager
DB Check
Configurations
Install
Log
Indexing
Recycler
phpMyAdmin
VTS
Help
About Modules
About
Manual
Admin
Clear Cache in typo3conf/
Clear FE cache
Logout
By Jens Hoffmann
Legen:
Topic (No Modul behind)
Topic second Style (No Modul behind)
Modul
Extra Installed Extension
Chart: 20
Actual MenuMenu-Type’s
Pro ‘s & Co ntra‘s
By Jens Hoffmann
Chart: 21
Menu--Types: Sidemenu
Menu
Pro
All Modules available for direct action at once
Contra
Too much at once (lost of view)
Lost of horizontal Space
Scrolling (sometimes)
Inconsequent Design
By Jens Hoffmann
Chart: 22
Menu--Types: TopMenu
Top-Optionsbox
Optionsbox--Menu
Pro
More Space for the Content
Contra
Not really user friendly
No Icons
Scrolling in a Combobox
By Jens Hoffmann
Chart: 23
Menu--Types: TopMenu
Top-Icon
Icon--Menu
Pro
All Modules available for
direct action at once
Separators
Space for the Content
By Jens Hoffmann
Contra
Too much at once
(lost of view)
Unusable for Newbee's
Need to wait for a Tooltip
if yo u do n ‘t kn o w th e Ico n
Chart: 24
Menu--Types: Tapio Menu 1
Menu
Pro
Space for Content
Very visible Categories
Submenu stays visible
It could be configurated
By Jens Hoffmann
Contra
Even more bad wording
Spaces d o n ‘t m ake sen se
Chart: 25
Menu--Types: Tapio Menu 2
Menu
Pro
Space for Content
Submenu stays visible
It could be configurated
By Jens Hoffmann
Contra
Even more bad wording
Spaces d o n ‘t m ake sen se
M o re h ig h isn ‘t usefull,
just takes space
for Content
Chart: 26
Typo3 with the DoJoDoJo-Ext. In the Backend
Pro:
Fast Ajax Tree
Drag & Drop Pages
Loading animation in Page-Sub-Tree
Contra:
R ed un d an t M enus d o n ‘t h elp usability!
A bit slow at the first load > No loading animation!
No way to copy pages @ D&D Mode
By Jens Hoffmann
Chart: 27
Menu--Types: Lasses Backend Skin 1 for 4.x/5.x
Menu
Pro
Space for Content
Menu is known from
usual Applications
By Jens Hoffmann
Contra
Submenus will hide
Actual Menu is not visible
No Seperator
Chart: 28
Menu--Types: Lasses Backend Skin 2 for 4.x/5.x
Menu
Pro
To have the possibility
of Windows is nice
We got a lot of Space for
Icons/Shortcuts and the
Main Content
Switch faster between
Modules
(E.g.: Open the Fileadmin
doesn't close
Web_layout.)
Contra
Missing Taskbar like
under Linux/Windows
witch shows
me all the open Windows
Can’t edit/crate ow n
Desktop Icons jet
API doesn't work 100% :)
Idea
Maybe we need more
default for a Window
(Start size, Level, Sticky,..)
Would be nice to open
more than one
Web_layout Window
Maybe only some Modules
open in Popup, and other
get display in the old Way
Role the Window up,
like under Linux
Make a Window Stick,
to stay on top
By Jens Hoffmann
Chart: 29
Menu--Types: Kaspers new Ajax TopMenu
Top-Menu
Contra
Pro
Space for Content
Menu is known from
usual Applications
Ajax Functions possible
Could be configured
A Icon-Bar is possible
By Jens Hoffmann
Submenus will hide
Actual Menu is not visible
No Separator
Icon-Bar is the visible
Topmenu (Confusing)
Right 3 Menus are
the Main-Menu
Icons & Words mixed
Chart: 30
New ContextContext-Menu 2.0
By Jens Hoffmann
Chart: 31
Icon click vs. regular RightRight-Click
Pro Right-Click
Known from other Programs
Bigger field to hit an object, much easier to use
(100% of a Element is the Hit-Area)
Contra Right-Click
Could be disabled via Browser
Could be used by the Browser
By Jens Hoffmann
Chart: 32
New ContextContext-Menu
Context-Menu
Shadow behind it = More Contrast
Submenus need an arrow
Is it really necessary to have Submenus?
Use Action/Context-Sensitive Menus?
Reduce the Icons/Options to a minimum
eFX-Lib. from the Top-Menu
New Context-Menu Concept
dHTML Menu opens under the
Entry after some Milliseconds
Examples:
Context-Menu replacement in the Pagetree
File-Options in File Manager
Options in the List-View
Penetrate Icons in the Manuals and
Backend so that no description is needed
By Jens Hoffmann
Chart: 33
Icons vs. Text
By Jens Hoffmann
Chart: 34
Icons vs. Text
Text Pro
Text is easier to understand in the first Moment
Text needs a lot more space, sometimes doesn't work
Icons Pro
Two kinds of Icons
B asic Ico ns (Like: Pag e, Co ntent, … )
Actio n Ico ns (Like: N et, Edit, Cut, Paste, … )
Logical combination of known Icons to a new Icon
Penetration of Icons push the learning curve
Less Icons need to know/produce
Solutions are between
Direct Tooltips for all Icons
User could configure what should be displayed (Like under FireFox)
Only Icons
Icons & Text
Only Text
By Jens Hoffmann
Chart: 35
Possible new Backend Version
By Jens Hoffmann
Chart: 36
A possible variation for the new Menu + Accessrights
Style
Softer Typo3 Colors
Main-Menu and Submenu are clearly optical
spitted
A Company Logo could be
placed in the Right Top at
the Green Icon-Bar
Icon-Bar
Has Groups and Separators
Obj. could be Moved/Deleted
Click the Add Icon to Add
more Icons or Groups
Content
No need for Combo-Boxes anymore
The Content-Menu in the Content-Area got
the same Styling as the Top-Menu
The “D epth” Function is an Ajax based M enu
in the Submenu of the ContentMenu
Desc. of the Icons in the Right Top:
(Direct dHtml-Tooltips are needed)
Logout
User Switch
Cache Management
Workspaces
Search
Bad things about it
Submenus will hide
Actual Menu is not visible only the Category
Still quite a lot Menu-Levels
By Jens Hoffmann
Chart: 37
A possible variation for the new Menu
Top-Menu is Ajax based,
animated dHtml Menu
with JS+CSS
The “Sub-M enu” g o t Ico ns
and Separators and Arrows
Arrows indicating a
another Sublevel
If you click on the Shortcut Icon
in the Content-Main-Menu then
yo u w ill g et the “Add a Sho rtcut”Screen (last Chart) with the Preconfigured Setting to get to this
Screen. You only got to select a
Group and Save. But you could
change the Icon or the Function.
Accessibility vs. Usability
My Solution:
Different Menus!
One for good Usability
and with supporting nice Effects
One for perfect Accessibility
A combination is bad
for both User-Groups
And we already have
different Menus with
acceptable Accessibility
By Jens Hoffmann
Chart: 38
Add a Icon to the IconBar
After a Click on the Add Icon
in the Icon-Bar the Screen
get darker and a dHtml Popup
open up
Here you could create your
own Shortcut with a own Icon
and own Groups for the
Shortcut
Icons: Check the Resources
Chart at the End, for the here
used free Icon-Libs. (silk)
The “save” an d the “abo rt
B utto n” are o n th e left top
of the Popup
(Edit/Delete it) If you double
click a existing Icon in the
Icon-Bar, this Popup will
show up with the actual
Configurations of the
Shortcut.
By Jens Hoffmann
Chart: 39
Possible Variation
of the last Screen
Center Popup
By Jens Hoffmann
Chart: 40
Possible Variation
of the last Screen
Center Wizard Popup
“Sub”-Menu with:
Icons
Tabs
Button at Bottom ?
By Jens Hoffmann
Chart: 41
New JS AlertAlert-Box
New Alert-Box
Fading the Background
to dark with dHtml
Ajax Dialog-Box
BG signal color =
Type (Good, Bad, ..)
Multiple-Button Version
Dialog-Box with a big Symbol
This Screen
User-Version: Icon + Text
“Ico n o nly” is also Possible,
because: The User just hit the
“sam e” Ico n befo re.
Button variation?
(One left, one right)
Colors
Orange = Important, Danger,
R isky, Error, Exception, …
Green = Default, Question,
Information, Unimportant,
Save, …
By Jens Hoffmann
Chart: 42
New JS AlertAlert-Box
New Alert-Box
Fading the Background
to dark with dHtml
Ajax Dialog-Box
Color Signal
Dialog-Box with Symbol
By Jens Hoffmann
Chart: 43
A possible variation TV Pageview
New Look of TV Edit Site
Menu changes
Functions form the
Functions-Tab are in the
Main Content-Menu
(Content View, List View)
Rest of the Tabs are
now in the Submenu
Clear Cache is in
the Top-Menu
Other Option are in
the User Configurations
Style changes
Header is one Box
Content is one Box
In this Screen the Header
(the Page-Options) is closed
By Jens Hoffmann
Chart: 44
A possible variation TV Pagetype edit Screen
In In this Screen the Header
(the Page-Options) is open
Default Option are closed
Normal Page Options
are closed
Hide Options are open
Under the existing Options
you could add new once
With the Trash Icon on the
side you could remove
a Function set
Changes will be saved
via Ajax directly
For better Usability the
Options will be flood-out /
fade-in or a other Usability
supporting Effects
By Jens Hoffmann
Chart: 45
A po ssible variatio n fo r the “Add Co ntent W izard”
General
Abort Action Icon at Top Right
Same Icon Style
Less Object = Less Scrolling
More Default Object possible
(If a Company always has the
Picture at the left, it would be
nice to add this to the Typical
Content Group via TS.)
Groups
Old Content Groups
Close Groups
Hover Groups
Empty Groups are hidden
Content Object
Hover single Object
Mouse-Over Help for an Object
Add Icon at top and left
Color Background
By Jens Hoffmann
Chart: 46
New Listview Light
Changes:
Shortcut-Icon at the top of the Page
Add Tabs to Records,
so no scrolling is needed
Reduce of all visible Icons
and rearrange them
Search-Field in the Head to
reduce the Category-Results
live via Ajax
Combo-Box in Head to select
the Ref. live via Ajax
All Records are only 60 % visible
Selected Records get 100% visible
H over R ow on “MouseOver”
Use Ajax and Drag & Drop to move things up & down
„Create Icons“ g ot description
New Versioning Icon
New order of Content
(Select-Box, Topic, Action-Icons, Ref.)
“Action on selected R ecords”Menu-Icons are on the Bottom.
Because you like to do the “action”
after your “selection”. (W orkflow lo g ic)
“Show all R ecords at once” are now at
the lower right (Like resize Windows)
Move Options & Clipboard
to the Work-Area
By Jens Hoffmann
Chart: 47
New Listview + Workarea in the Sidebar
Here you can see
the new List Module
Work-Area Sidebar
is open
Can be resized
Or hidden to the right
More Plug in’s could be
offered via Extensions
Clipboard is open
Better Thumbnail Icon
N ew “X” Icon
[Menu] replaced by Icons
at the top of a Sub-Category
Notes are Open
Ajax will update the
Content it directly
Use Arrows to navigate
throw the Notes
Use the Icon at the top right
to create a now Note
ToDo's are Open
Create how many Category's
you like with the Folder Icon
at the Top Right.
Content sensitive
Options are Open
Here you find all usual Option
with where placed below the
Content
By Jens Hoffmann
Chart: 48
A possible variation for the File
File--Manager
More Ajax
Faster at the beginning
without all thumbnails
Sorting via Ajax
Open the Pictures or Text
examples like in the KDEKonqueror Preview-Mode
dHtml Popup after
about 100ms
MouseOver
HTML-Preview
via Ajax
PDF Preview via IM
Display/Function like in
the new Pagetree
Files should be Drag & Drop
able into the
Foldertree
Clipboard
Image found via Google
By Jens Hoffmann
Chart: 49
A possible variation for TV TemplateTemplate-Module
TemplaVoilà
Split the actual site
into more sites
Create New Template
Edit existing Templates
(Default, after the first Template was made)
Try to Auto-Update Templates
Change the order of the TV-Elements
via Ajax in TV-Admin Module
More default TV-Objects via Extension
Easer to build
Flexible-Content-Objects
Make Images of Templates
FCO for TV direct and
automatically in the Backend
Make a PDF of it >
Convert it to a Image
Real Menu as replacement
o f a “Ch eck field”
Replaced Buttons with Icons
(Like usual for T3)
Typical new Layout Problems
3 Content-Menu Rows
Button at the Bottom
Topic Style
By Jens Hoffmann
Chart: 50
( Just a sm all View in to it … )
By Jens Hoffmann
Chart: 51
New Wizards under Functions
Create Multiple Page
Two Dimensional (More Rows + More Values)
Ajax based to add more Rows
Via Combo-Box you could add more Values to a Rows
User- / Group-Settings
Group things better
Not everything in one Box
Actual there are two different Concepts, reduce it to one!
… Go t so m e o ne a g oo d Idea fo r this ?
Own User Configuration
More than one Page (Tabs)
More things to configure
Better Wording for some things
Add more Fields to the User Conf.
Address, Phone, ICQ, etc.
User Admin
+ to Add things
Better Icon to Switch a User or Try a User
Order of things (Now: Layout unclear)
Hover open Values ? More on one Screen ?
By Jens Hoffmann
Chart: 52
New HelpHelp-Tools
Open-Help-Center
O n “M o use-O ver” H elp B o x in th e W o rk-Area
Ajax based
Like a huge Tool tip (wait ~150ms)
Web based IRC Chat room for Administrators
irc://irc.freenode.net/#typo3_admins
http://t3chat.think-open.org/irc.cgi
Web based IRC Chat room for Editors
irc://irc.freenode.net/#typo3_editors
Possibility to add custom IRC Server for Agency's
which like to give a Clients a special Support Service
By Jens Hoffmann
Chart: 53
New HelpHelp-Section
Editor Manual
Startpage is the new About Modules Page
Should be the entrance to the Categories of the Manual
Flash based Edito r H o w to ’s (Like the old “W elcom e” extension.)
Reactivate the VIDEO-UG (Reactive the group!)
Admin Manual (All based on External Content or the Wiki)
TSref
(Typo3.net or a own new one at Typo3.org)
General H o w to ’s
(There are a lot FAQ Site in the Net. Ask them to submit solutions.)
List of all Extension Manuals
(Direct Links to: Online Doc, SWF/PDF Download)
Wiki.typo3.org
(Newbie's find some help direct in their Backend
an d d o n ‘t n eed to search aro un d th e W eb.)
By Jens Hoffmann
Chart: 54
Sub--Content / -Functions
Sub
Cache
Clear Sites Cache
(Old Front-End)
Clear Template Cache
(Old option insight of the Template Module)
Clear T3Config Cache
(Old Clear /typo3conf option)
ReCache All Sites
(New but there is a Ext. for it)
My Configurations
First Site after Login
Select own Skin (BK Ext.)
Should look like the T3 Configurations
By Jens Hoffmann
Chart: 55
New TS editor // T³E
Main-Functions should be:
Syntax Highlighting
(Colour-Template via XML)
Code completion
(Code-Tree in XML)
Additional Functions should be:
Snippet library
with category's in a tree
('Ajax‘ + XM L o r M ySQ L)
Automatic code formatting
(Style via XML)
Syntax error handling
(If possible)
Search and replace
(Via RegEx.)
Copy-Board with Backup
(Stored in MySQL)
By Jens Hoffmann
Chart: 56
Taskcenter 2.0
By Jens Hoffmann
Chart: 57
Mac OS.X
By Jens Hoffmann
Chart: 58
Goowy.com
By Jens Hoffmann
Chart: 59
NetVibes.com
By Jens Hoffmann
Chart: 60
Suggestion form a HCI Member
By Jens Hoffmann
Chart: 61
New Taskcenter 2.0
Dashboard
Name: T³Board?
Examples:
Mac OS.X
( New Mac Web Wiz. ? )
Goowy.com
NetVibes.com
Pageflakes.com
Protopage.com/v2
Live.com
Try to use other
Engines, so we could
use other Widgets too.
By Jens Hoffmann
Possible Widgets
Recent Work
Open Documents
Todo / Workflow /
Gantt-Calendar
Actions like a 1-2-3 Wizard.
New Page >> Where?
Header >> Content >> Pictures
Save and View
Last Errors from Log
Preinstalled RSS Feeds!
Typo3.org News
Podcasts
New & Updated Extensions
Chart: 62
The new Typo3 Dashboard
In the Sub-Content-Menu you
can:
Add new
D ash board Plug in ‘s
Customize your Dashboard
(Background, etc.)
Plug in ’s can be:
Move
Reload
Edit
Removed
Share?
O th er Po ssible Plug in ’s:
Plug in ’s from th e Sidebar
Actions
1-2-3 Wizards
U sual To do ’s
Workflow
Mail Accounts
…
Possible Names:
Dashboard
Infoboard
Blackboard
Taskcenter (2.0)
Startscreen
Typo 3 …
T3…
My …
By Jens Hoffmann
Chart: 63
The 11-2-3 … 11 Installer Inspiration
By Jens Hoffmann
Chart: 64
Example of a good wizard Install Script
Why is this Installer good?
Branded
Easy to Understand
Much small Steps
Steps with Names
Nice Progress-Bar
Help-Centre for it
Restart Button
This Screen:
Here you have to check all
important Server Settings,
before you could install
everything / get to the
next step.
Would be quite useful
for Typo3 too.
By Jens Hoffmann
Chart: 65
Example of a good wizard Install Script
I think this could be a good for Typo3 too.
The installation starts with a
really small Set/Version of Typo3.
And on the end of Typo3 Installation you
could select/install more default
Extensions (TV, DAM, TT_NEWS, ec.)
Name, Version, Description
So a N ew bee do esn ‘t n eed to U n derstan d:
What is the Extension-Manager
What are the good Ext. you really need
And we could offer Pre-Default stuff like:
More BE Skins
Renew the old Static Templates
More Free Templates
(So you could use Typo3 directly
without understanding of TS.)
Advanced Administrators could setup
Typo3 a lot faster with a lot less clicks.
And, if you like to, you could get rid of
some Pre-D efaults yo u do n ‘t n eed if yo u
already know what you want.
(Upload of imports.)
By Jens Hoffmann
Chart: 66
Ideas from the HCI Newsgroup / Wiki
By Jens Hoffmann
Chart: 67
Ideas from the HCI Newsgroup – Part 1
Save as ... Icon
Prin t B utto n … Ico n
Icon-Bar (Should be more like Shortcuts)
1. Add an Icon from an Icon Set (Like for the NetVibes-Tabs)
2. Associate a Function/Action/Module with it
Backend Search Tool
(Already done, Kaspers T³Finder)
Remove static templates and stuff like this from Core > move it into a Add-on-Package
Improve the actual Typo3 Skin
(More Contrast!, More Structure, Typo3 Colours!)
Improvements in the workflow-system - more intuitive
approach to workflows & workspaces.
Wizard to create new Wizards which create special Workflow Actions
Install-Statistics from all Typo3 Installs
will be send anonym to Typo3.org > So we know what is a default Typo3 setup
Nice looking Donate-Button in the Backend beside the Extensions
More options under user setup (like kb_skinselect)
So rry, this is no t everything , but + 1000 Po sts … need so m e tim e :)
By Jens Hoffmann
Chart: 68
Ideas from the HCI Newsgroup – Part 2
Typo3 Bot (Avatar) could answer questions (Help Search) like under IRC
Reduce the number of "PLACES CONTAINING TYPOSCRIPT" ... Template, User and Page TS
Have a wizard for the defaults of a Website
Doctype
Default blurlink() outputted?
Auto upd ate Exten sio ns like “apt-g et upg rade“
All Ico ns sho uld be co nfig urable as Text links … big space Pro blem s
List View
Possibility to add completely new Control-Buttons to
Define how big the output should be
Add expand/collapse Function
R em o te U sability Testing … any results ?
Typo 3 B acken d Taskbar sho w s all already lo aded “Tasks” M o dules (Like D ojo Ext.)
TYPO3 should work with checkboxes in the backend like all applications do (Trash Icon instead)
RTE
Ability to add more Custom Buttons
Drag & Drop links (Word to Side / Site in Text)
So rry, this is no t everything , but + 1000 Po sts … need so m e tim e :)
By Jens Hoffmann
Chart: 69
View Page in the 4.x/5.x Backend
(Design by Lasse
Lasse,, modified by Me)
Better Grouping
Create Record @ Records Top
Clear Page Cache & Edit-Mode @ Page Top
Search @ Backend Top
Create Shortcuts @ Shortcuts Top
Login / Out @ Username
Reloading Pagetree @ Pagetree Top
100% width for the Main-Elements
By Jens Hoffmann
Chart: 70
Edit Content in the 4.x/5.x Backend
(Design by Lasse
Lasse,, modified by Me)
Tabs vs. Scrolling
Always available
nice Workarea
Known from all
M$ Office
Programs
Possible Content:
Clipboard
Search Results
Notes (maybe
Content sens.)
Additional
Content Infos
By Jens Hoffmann
Chart: 71
Create a Link - DreamWeaver like
Good Idea, but it is
not possible with
the actual Frame
technique we have
in the Backend
By Jens Hoffmann
Chart: 72
Rollup Categories + Mac Menu
Icons to open / close categories in the Backend
Configuration via TS
Mac Menu as HTML version but only for FF
By Jens Hoffmann
Chart: 73
Page Icons always on the same Place
Advanced is not the right
Wording, maybe a better
Icon will be enough, but
this a good one!
I do n’t think that a m ix o f
the Content-Menu and
the Icon-Bar makes a lot
sense.
Having the Icons allways
on the Top is a nice, but
plz not in the Icon-Bar!
If w e g o t the “W o rkarea”
we could put such
information
in it on MouseOver Action.
By Jens Hoffmann
Chart: 74
DynBeEdit Idea
Cascading content View
Mixed View of Categories and Content
By Jens Hoffmann
Chart: 75
Listview with TreeTree-Function
By Bernhard Kraft (Public Release?)
By Jens Hoffmann
Chart: 76
Windows like TabTab-Styled Topmenu
http://screens.typoheads.at/t3_tabs/
By Jens Hoffmann
Chart: 77
Typo 3 “D eskto p like” by Jo H
By Jens Hoffmann
Chart: 78
1-2-3 Wizard CMS by Dassault Systems
http://194.117.233.66/t3dl/scenario/
By Jens Hoffmann
Chart: 79
1-2-3 Wizard CMS by Dassault Systems
http://194.117.233.66/t3dl/scenario/
By Jens Hoffmann
Chart: 80
Inspirations from
Competition Partners Backend Designs
By Jens Hoffmann
Chart: 81
Inspirations from Competition Partner
By Jens Hoffmann
Chart: 82
By Jens Hoffmann
Chart: 83
By Jens Hoffmann
Chart: 84
By Jens Hoffmann
Chart: 85
By Jens Hoffmann
Chart: 86
By Jens Hoffmann
Chart: 87
By Jens Hoffmann
Chart: 88
By Jens Hoffmann
Chart: 89
By Jens Hoffmann
Chart: 90
By Jens Hoffmann
Chart: 91
By Jens Hoffmann
Chart: 92
By Jens Hoffmann
Chart: 93
By Jens Hoffmann
Chart: 94
By Jens Hoffmann
Chart: 95
By Jens Hoffmann
Chart: 96
By Jens Hoffmann
Chart: 97
By Jens Hoffmann
Chart: 98
By Jens Hoffmann
Chart: 99
By Jens Hoffmann
Chart: 100
By Jens Hoffmann
Chart: 101
By Jens Hoffmann
Chart: 102
By Jens Hoffmann
Chart: 103
By Jens Hoffmann
Chart: 104
Appendix
By Jens Hoffmann
Chart: 105
Resources from the Web
Typo3 HCI Newsgroup
http://lists.netfielders.de/pipermail/typo3-team-hci/
Inspiration
http://www.stuntsoftware.com/Overflow
Video of an easy to use Shortcuts-Tool for a Mac
http://lojjic.net/script-library/ScriptSheet-test.html
Hover Mac Menu
Installer
http://codex.gallery2.org/index.php/Gallery2:How_do_I_Install_Gallery2
The „H ow to Install“ for the nice „Installer W izard“ of Gallery 2.0
You can see all Steps with Images.
Nice Free Icons (E.g. for Extentions)
http://www.famfamfam.com/lab/icons/silk
http://www.maxpower.ca/free-icons/2006/03/05
http://tango.freedesktop.org/Tango_Icon_Gallery
http://www.drweb.de/weblog/weblog/?p=541
http://www.pixelgirlpresents.com/icons.php?cat=pc
http://www.freefunfiles.com/software/desktopapplications/icons/index.html
http://www.fasticon.com/downloads.html
Human Interface Guidelines
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html
http://www.theparallax.org/wissen/usability/references.html
By Jens Hoffmann
Chart: 106
M y big To D o ’s fo r this PPT
Read
… the rest o f the “w iki.typo 3.o rg ” and find co o l inspiring ideas
Write
… so m e m o re Ideas fo r new M o d ule / Extensio ns
Access rights
User rights
Extension-Manager
Create
… a Typo3-123-Installer Layout
… a Typo3-Configurator Layout
… a W eb 2.0 Style Versio n
… a B lue-Gray (Actual Color-Set) Style Version
By Jens Hoffmann
Chart: 107
Thanks for reading
Please give me some Feedback at the HCI list!
By Jens Hoffmann
Chart: 108

Ideas to improve the Usability of Typo3 4.x / 5.0

Transcription

Similar documents

June - Continental Austrian Club

YVES MACAUX

View our Events Brochure

60 PI/s with TYPO3

February 2015 - German American Club

Untitled - CooGiE`s Cafe Santa Monica

Learning to Look - Grand Rapids Art Museum

Fox Communities Credit Union