Interaction Design in new FCKeditor

Make OK and Cancel buttons in dialogs visually more different

Improve Insert Image dialog

Rarely used commands / Popup menus

Custom Toolbar Implementationhere

Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn

Fri, 02/22/2008 - 19:09

#10

maxim.soloviev

Joined: 12/02/2008

Posts: 14

Re: Interaction Design in new FCKeditor

Few more thoughts:

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.

Fri, 02/22/2008 - 19:52

#11

alfonsoml

Joined: 31/12/2006

Posts: 3735

Re: Interaction Design in new FCKeditor

maxim.soloviev wrote: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.

Fri, 02/22/2008 - 20:10

#12

maxim.soloviev

Joined: 12/02/2008

Posts: 14

Re: Interaction Design in new FCKeditor

alfonsoml wrote:The OK and Cancel buttons are standard element of any OS, and given the fact that we are talking about the dialogs, then the logical thing is to match the current conventions as much as possible. I don't think that any OS has placed those buttons at each side of the dialog, instead they are always at the bottom right, and the only disagreement is about which one should be the first.

So if we are going to review them, then we should check what makes them different that it might be possible for the user to click the wrong button, but work fine with the rest of the programs in his computer.

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:

Attachment	Size
nsmproperties.png	10.15 KB

Fri, 02/22/2008 - 21:37

#13

alfonsoml

Joined: 31/12/2006

Posts: 3735

Re: Interaction Design in new FCKeditor

You might not believe me, but I've suffered clients that didn't know how to close a window if it didn't have a close/cancel button. Sad but true

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)

Fri, 02/22/2008 - 22:21

#14

maxim.soloviev

Joined: 12/02/2008

Posts: 14

Re: Interaction Design in new FCKeditor

Styling -- yes, completely agree.

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.

Sat, 02/23/2008 - 01:04

#15

fredck

Joined: 19/01/2007

Posts: 898

Re: Interaction Design in new FCKeditor

Impressions I have about it:

Different button styles: sounds like the only agreed idea until now. I also like it, and is the main thing we can get from the doc indicated by maxim... another option: colored bold button for ok and light gray style for cancel.

Separated buttons: it could minimize unwanted cancel clicks, but could also make actions slower: is it really the ok button?

No cancel button: not sure... it would certainly make it harder to cancel. Also... does close means cancel, or it means just close? (see MacOS... close is just close).

Alignment: maxim pointed us to a doc about forms, where fields are almost always vertically aligned (like maxim's screenshot or gmail). In that specific case, putting the ok button aligned to the fields makes sense. In our case instead, we have dialogs, with a much more complex elements positioning. There is no fixed alignment axis, so buttons are usually placed near my hand, to the right. It is not a case that desktop app dialogs are made that way.

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

Sat, 02/23/2008 - 01:15

#16

fredck

Joined: 19/01/2007

Posts: 898

Re: Interaction Design in new FCKeditor

maxim.soloviev wrote: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.

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

maxim.soloviev wrote: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.

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

Sat, 02/23/2008 - 22:06

#17

maxim.soloviev

Joined: 12/02/2008

Posts: 14

Re: Interaction Design in new FCKeditor

fredck wrote:Btw, does our current code formatting plays well? (when switching from WYSIWYG to source).

Primary & Secondary Actions in Web Forms

Sun, 02/24/2008 - 23:51

#18

keith.pitt

Joined: 15/01/2008

Posts: 9

Re: Interaction Design in new FCKeditor

The HTML formating sounds like a good idea. I always dread hopping into the html source when im using the FCK Editor. Mainly beacause its un-formated, and really hard to read. I always find myself copying the html from the editor, pasting it into my text editor, and pasteing it back into FCK. If the text was highlighted, or even indented with a better font, it may make my life a bit easier.

Keith

Mon, 02/25/2008 - 00:26

#19

alfonsoml

Joined: 31/12/2006

Posts: 3735

Re: Interaction Design in new FCKeditor

So you don't really mean formatting, but syntax-highlighting of the html code. Right?

Wed, 02/27/2008 - 05:01

#20

keith.pitt

Joined: 15/01/2008

Posts: 9

Re: Interaction Design in new FCKeditor

Doesn't formatting include font-size & font? If so, then yes, I think the font and font size play a major role in the editing difficulty of the source view.

Tue, 03/04/2008 - 21:01

#21

maxim.soloviev

Joined: 12/02/2008

Posts: 14

Re: Interaction Design in new FCKeditor

I was thinking about letting user to preview changes without giving up performance.

Is it possible to temporarily apply new style not to whole selection but to the selection that is currently visible?

Tue, 12/18/2012 - 08:35

#22

Alkmore

Joined: 18/12/2012

Posts: 1

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.

Web Design Nottingham