• Xinha Details

last modified October 2, 2008 by sonali

­Simplification and functional design of the Xinha Toolbar.

This series explores the possibility of minimizing the tools presented by Xinha but not removing functionality. Here are a set of Default Options for the Xinha toolbar.

One of the primary challenges in the current UI of Xinha is the excessive tool set that would overwhelm the user. As nice as it is to simplify complex functions into a button its equally important
to maintain the visual simplicity so the user is able to see their option clearly.

The major change in this is the use of drop down arrows. At first this may seem tedious and
unwieldy to have to click on the drop down and then choose a tool. But on further scrutiny it
allows for a fair number of tools to be folded into one. e.g.these are set of tools that would be
presented under the paragraph drop down. Often times the user is not given the choice of "2 column"
or a "Drop Cap". This is not because they are not important tools - its becuase they are not
important enough in the larger scheme of fitting icons on a bar.

­­Xinha_Improvements.graffle: flows of each Xinha tool­

 This method allows for extensibility and provides for a comprehensive set of tools. 

 

Default Set 1.

Here is a minimum set of tools that could form a default. The user is given a set of pre-formatted styles for the font and size. Other than that its the minimum set of tools needed for a smooth editing experience. 

Xinha_Improvements.graffle: flows of each Xinha tool

  1. Style Formatting 
  2. Bold with a dropdown
  3. Paragraph Alignment with a dropdown
  4. Color
  5. Horizontal Rule
  6. Split Block ­
  7. Insert Table
  8. Insert Link
  9. Insert Image
  10. Maximize
  11. Visual
  12. Code/HTML

 

Default Set 2.

This is an interesting option. It takes away the ability to rapidly add image and link with one click but on the other hand it allows for actions such as insertion of link, image, table, page all to get bundled together and separate themselves from "formatting tools".

 Xinha_Improvements.graffle: flows of each Xinha tool

  1. Style Formatting 
  2. Font
  3. Size
  4. Bold with a dropdown
  5. Paragraph Alignment with a dropdown
  6. Color
  7. Horizontal Rule
  8. Split Block
  9. Insert 
  10. Maximize
  11. Visual
  12. Code/HTML

 

Default Set 3

This is a combination of options.

­Xinha_Improvements.graffle: flows of each Xinha tool­

 

Drop Downs 

Here are the set of potential drop downs that then go on to cover a large # of the default icons you see in xinha improvements

Style Formatting

Xinha_Improvements.graffle: flows of each Xinha tool­

Fonts

Xinha_Improvements.graffle: flows of each Xinha tool­

Bold with Dropdown

Xinha_Improvements.graffle: flows of each Xinha tool­

  1. Bold 
  2. Italics
  3. Underline
  4. Strikethrough
  5. Subscript
  6. Superscript
  7. Bulleted List
  8. Numbered List

 

Paragraph Style

Xinha_Improvements.graffle: flows of each Xinha tool

  1. Left Align
  2. Center
  3. Justify
  4. Right Align
  5. Two Coloumn
  6. Drop Cap
  7. Indent Left
  8. Indent Right 

­

The complete breakdown of tools that would reside in the VISUAL tab:

Xinha_Improvements.graffle: flows of each Xinha tool

Xinha_Improvements.graffle: flows of each Xinha tool

Xinha_Improvements.graffle: flows of each Xinha tool

Xinha_Improvements.graffle: flows of each Xinha tool­­

Xinha_Improvements.graffle: flows of each Xinha tool

Xinha_Improvements.graffle: flows of each Xinha tool

Xinha_Improvements.graffle: flows of each Xinha tool­