[CONTEDIT-27] First take at visual design for Article editor UI Created: 03/Feb/17  Updated: 08/Sep/17  Resolved: 21/Mar/17

Status: Closed
Project: Content Editor
Component/s: None
Affects Version/s: None
Fix Version/s: 1.0

Type: Task Priority: Neutral
Reporter: Anja von Gunten Assignee: Cedric Reichenbach
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File 00 AE visual design master spacing padding.png     PNG File 01 AE visual design meta data collapsed.png     PNG File 02 AE visual design meta data expanded.png     PNG File 03 AE visual design text without lead image.png     PNG File 04 AE visual design text with lead image.png     PNG File 05 AE visual design font styles invitations.png     PNG File 06 AE visual design font styles.png     PNG File 07 AE visual design focus.png     PNG File validate_required_fields.png    
Issue Links:
Relates
relates to CONTEDIT-49 Edit meta data of an article Closed
causality
is causing CONTEDIT-67 Remove the light blue border around h... Closed
is causing CONTEDIT-68 Dynamic input fields that grow in hei... Closed
is causing CONTEDIT-64 UI improvements Closed
dependency
depends upon CONTEDIT-6 Seamlessly add, edit and jump between... Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Epic Link: Initial Article editor
Sprint: Basel 88
Story Points: 8

 Description   

Intro

The visual design aims at re-using design elements from the current Magnolia look & feel but clearly brings in some visual fresh-up. The aim is to have a visually simple, clear, distraction-free editing environment. The labels and form fields have a new design and the user is generally guided by text invitations. Title and Lead text are different from normal form fields. They have special font styles which at first glance already show what values they'll actually contain.

The following style guidelines contain the:

  • General look & feel, Re-design of the forms and new "Add-image-pattern"
  • Spacing & padding specifications
  • Font styles for input text in forms
  • Font styles for invitations in forms
  • Focus specifications for Edit-Mode and Move/Delete-Mode

They are described in the images below.
All further UI components for the Article Editor will be described in follow-up issues.

Guidelines

General look & feel, Re-design of the forms and new "Add-image-pattern"

  1. The forms have a new look: Labels are above the input field, the input field has no borders and contains invitations to guide the user.
  2. We aim at introducing a collapsable dialog box for all kinds of meta data. We've heard it many times over that an editor wants to focus on writing an article and gets distracted by having to fill in loads of data before he can actually start writing the story. That's the reason why we want to enable to collapse/expand meta data which is only important one time and the user can choose at what point of time.
  3. We also aim at introducing a new pattern to add an image: Before you add an image there is only a simple box with an invitation visible. By clicking in the box the "select-image" dialog opens as usual. Only after selecting an image we show the common form fields as is. The reason is to clarify the user experience and simplify the workflow.




Spacing & padding specifications

The spacing and padding is systematically built up and is designed for all three status of a form field: normal, with edit focus, with move/delete focus.

Font styles for input text in forms

We are using only the Verdana font but in different variations. As already mentioned above we particularly want to differ Title and Lead font styles from all other normal input fields.

Font styles for invitations in forms

Invitations font styles are slightly modified to the input text styles. They are bit lighter and italic.

Focus specifications for Edit-Mode and Move/Delete-Mode

The focus of the Edit-Mode has a light bg-color whereas the focus of the Move/Delete-Mode has a distinct border and a delete icon. The position of the delete icon is also the reason why the input field has a bigger padding from the right border so it will not collide with the delete icon.



 Comments   
Comment by Philip Mundt [ 20/Mar/17 ]

avongunten seems the field labels from the outline do not show the required asterix anymore. Was this omitted on purpose?

Comment by Philip Mundt [ 20/Mar/17 ]

avongunten similar question along the lines of validation in the new look: how is it supposed to look?
See:

Comment by Cedric Reichenbach [ 21/Mar/17 ]

avongunten/weder (just stacking up findings for now):

  • Field descriptions: The "?" buttons as in classic dialogs are currently hidden, so descriptions are not accessible - do we need those descriptions at all, and if so, how should we expose them?
  • The CKEditor toolbar by default doesn't fit inbetween blocks (see here). We were able to mitigate the problem a bit, but it should be taken into account for the next design iteration at least.
  • The lead text area currently has a fixed height of 3 lines, no matter the content, and shows a scrollbar if necessary. How should it actually look and behave?
  • Free bonus bug, not related to UI design: Placeholder for lead text is not italic
Generated at Mon Feb 12 00:16:19 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.