Hi,
My name is Maxim, I'm interaction designer.
I'm very thankful to FCKeditor and it's developers (we used it in bunch of our projects) and I'm willing to pay back.
Could you please tell me how can I participate in interaction & visual design of new FCKeditor?
Thank you.
My name is Maxim, I'm interaction designer.
I'm very thankful to FCKeditor and it's developers (we used it in bunch of our projects) and I'm willing to pay back.
Could you please tell me how can I participate in interaction & visual design of new FCKeditor?
Thank you.
Re: Interaction Design in new FCKeditor
Hi Maxim,
I strongly appreciate your proposal.
We are at the analysis phase for V3 right now. You should check our docs for more info.
Then, feel free to propose your ideas in this Forum. We'll be then discussing things for now, then we can effectively get feedback when we start producing things.
In other words, stay in touch!
Thanks for your interest on joining us.
Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn
Re: Interaction Design in new FCKeditor
Re: Interaction Design in new FCKeditor
The "enhance toolbar" is already possible, just look at the source button: it has a text besides the icon. I blogged about how to modify the appearance of a button
But besides hardcoding the toolbar buttons and their look, one of the ideas for V3 is to improve the way the users can customize the toolbar. Some will want it with the text besides the button, others will find that a waste of space, so let them choose.
For the "Floating toolbar", look at samples 9 and 10, it's very easy to do.
And the "Quick edit" might be handy for power users, but I'm not sure if the context menu is the right place. In my own personal preference I would put that option in the context menu of the "NodePath" plugin (i never bothered to do it, the way that it works is enough for my needs)
One point that it's missing in your comments is that switching between source and design view is hard, but in fact, it shouldn't. Theoretically, it should keep the insertion point just at the same place, don't jump to the top of the page (there's already a bug filed about that from long ago)
Re: Interaction Design in new FCKeditor
"Enhance toolbar" -- good point and good hack. However it would be great if it will be in config file, so depending on context and scenario of use developer will be able to specify that option.
"Floating toolbar" - I took a look at those samples, it's very cool that it's possible. Then I believe since those 2 samples can be combined this point can be dismissed, it's all about proper positioning now Thank you for pointing my attention to it.
"Quick edit" - could you please give me link to NodePath, I was wondering if there are implementations of it for FCKeditor, but found only dead links.
But yeah, if NodePath functionality (as I imagine it ) will become standard, then it will be good to have "Quick Edit" item in popup menu there too.
It will work there very good when you are editing text in table cell, but need to change properties of the table.
And I agree with you about insertion and selection. If I select image in editor and then switch to source, that image needs to be selected (that's how dreamweaver and other desktop editors work).
Another thing that might be useful is to have nonwindow dialogs, because when you work with lot's of open tabs new window that opens when you click toolbar button or properties can be confusing. I think something similar to lightbox (without shading whole page) or even YUI Rich text editor dialogs will work just fine, but I need to think more about what is more appropriate here and so on.
Re: Interaction Design in new FCKeditor
- Good point... we must definitely make it easy to configure.
Floating toolbar - I always liked the idea, but never implemented it. It would be nice to have it out of the box.
Quick edit - Yes... the node path will be there for the V3, with options to select, delete, remove and edit each element in the path.
Source keep selection - From WYSIWYG to Source, it would be easy. The opposite would be a bit trickier. But it would definitely make the source view much more usable.
Dialogs - Surprise! Check out the nightly.
Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn
Re: Interaction Design in new FCKeditor
You can get a modified version of NodePath here http://sourceforge.net/tracker/index.ph ... tid=737639 and here http://dev.fckeditor.net/ticket/548
Re: Interaction Design in new FCKeditor
Few more ideas to consider:
Make OK and Cancel buttons in dialogs visually more different.
It will minimize error of clicking wrong button. Moving them to different sides of window will work good as well.
See Web Application Form Design (Primary & Secondary Actions) for reference.
Improve Insert Image dialog.
More and more people use XHTML where all styling is in CSS files. I think it will be good to have ability for choosing "style" for particular image.
For example: developer might specify in config that inserted images can have following styles:
Re: Interaction Design in new FCKeditor
Hey Maxim... thanks for another bunch of nice ideas.
Make OK and Cancel buttons in dialogs visually more different: nice one... to be considered.
Improve Insert Image dialog: this is currently doable with the Styles combo in the toolbar. Just select an image in the demo and you will see that the combo will have image only styles, which have been precisely defined by the developer. We should instead include those styles in the Image Properties dialog too, as well as in other dialogs, like tables, lists, etc. TODO
Rarely used commands / Popup menus: the idea I have in my mind is grouping several buttons in one. Just like we have in other desktop applications. So, for example, all form related comments will be under a single button. We can also defined other grouped elements. This is something to do, definitely, as our toolbar has already too many elements, and many others are still to come.
Custom Toolbar Implementation: yes... this is considered. We have discussed about it here.
Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn
Re: Interaction Design in new FCKeditor
Changes Preview
Another nice thing to have will be changes preview. I like the way it's implemented in Word2007: you put cursor over font color on toolbar and it lets you see how it will look in current context. The same works for alignment, fonts, styles, sizes etc. So user is able to see changes before they are actually done. In this case he might realize, that he need to change selection and so on.
However I dont know how hard it will be to implement in V3.
HTML formatting
One thing I really miss in FCKeditor is to have command for "beautifying HTML". Usually HTML is mess, and it will be nice if I can click something and it will setup proper indenting and so on. It will make manual HTML editing so much easier...
Usually I use Dreamweaver command "Apply HTML formatting" for it, but it will be nice to have in first place.
Re: Interaction Design in new FCKeditor
Re: Interaction Design in new FCKeditor
OS conventions -- yes, however we are talking about webapplications, so there are different points of view on this one.
How user can make mistake?
If he is on MacOS -- he got used that OK button is on the very right, on Windows -- it's left one. So this is one way to make mistake.
Another way is just to misclick. Imagine -- you filled out all fields and then clicked wrong button.
It's applies to touchpads on laptops and adults of age 45+.
Placing buttons on different sides of dialog is one option. Another -- to make OK button big and make Cancel button look as link and it will be bit smaller.
And I really would move them both to the left.
There is 3rd way we need to consider -- to do not use Cancel button at all. I attached screenshot of properties dialog in our CMS. I think it works pretty well.
Also from my observations of novice users -- they tend to click close button of the window instead of looking for Cancel button.
Attachments:
Re: Interaction Design in new FCKeditor
moving both to the left for no special reason doesn't sounds fine to me. And leaving one to one side and the other at the opposite also doesn't look fine, it becomes too "spread"
I did already pointed that the difference between OS is the order of the buttons, so that idea should be studied, the more the editor looks and behaves like the rest of their applications, the easier it will be for them to start using it.
From my point of view the differentiation should be done on the styling, making the OK stand out more than the cancel, and/or adding some little graphics to them (like old Borland programs, green check mark and red cross)
Re: Interaction Design in new FCKeditor
Moving buttons to the left will give better visibility for those buttons.
Take a look at GMail Compose window for example. All buttons are on the left side so user will see them during initial scan of dialog/page.
Re: Interaction Design in new FCKeditor
Anyway, we'll really take decisions about all that as soon as we start drafting some designs.
Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn
Re: Interaction Design in new FCKeditor
Interesting... even if I never see an editor doing that (I don't have Word 2007). I would definitely be a performance pain though (like Select All > move through the toolbar, looking for the button with the mouse pointer).
Doesn't look like a core feature. Hopefully very few people use the source view. Maybe a plugin fits well for it, but no priority.
Btw, does our current code formatting plays well? (when switching from WYSIWYG to source).
Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn
Re: Interaction Design in new FCKeditor
Re: Interaction Design in new FCKeditor
Keith
Re: Interaction Design in new FCKeditor
Re: Interaction Design in new FCKeditor
Re: Interaction Design in new FCKeditor
Is it possible to temporarily apply new style not to whole selection but to the selection that is currently visible?
The second series is how to
The second series is how to use this one and look forward to helping you get started in maintaining your new website and also have an interaction having a good design.