Calligra/Usability and UX/Common/Web Browser-like UX for Main Window/Modern GUI of Calligra Words: Difference between revisions

From KDE Community Wiki
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
*Mockup: to be published on March 9th
[[User:Jstaniek|Jstaniek]] ([[User talk:Jstaniek|talk]]) (March 2013)


==See also==
''Mockup: for presentation @ the Calligra Sprint on March 9th''
 
*Calligra Words web style with greetings to the Team: [http://kexi-project.org/pics/calligra/mockups/web_style.png]
*Original Oxygen style: [http://kexi-project.org/pics/calligra/mockups/original_style.png]
 
 
'''Some story behind this look:''' On a typical wide screen there is also plenty of place to display change tracking or notes on the side. I'll try to mockup this in the future, now just hoping that can be imagined. Users can pull-out and image from the document on the outside and then drag it back to other part of the document without even using clipboard. That's like a natural interaction.
 
On the top-right you see indication of user signed-in for accessing various collaboration features that would be available in more distant future. I added that to show the vision of '''"Connected Calligra"'''.
 
'''It's all highly theme-enabled''' and looks like a hybrid of QML/QWidgets would help in implementing that. The side-bar would need more love, that's just a mockup with altered
background, realigned elements and sizes. '''Backgrounds can be part of the theme users can select''' so if you don't like the all-white webby look, that's not a problem.
 
'''The vision could also lead us to a point where each Calligra app has specific look''', its own "signature". I think we were not good enough in this area in the past (e.g. Flow looked quite like Words, default tools visible in Sheets were not much related to spreadsheet's use cases) but we're steadily improving.
 
==Possible further works and inspirations==
*Comments: iWork's appearance outside of the page [http://files.computertotaal.nl/2007/8/iwork-002.png] [http://www.freeimagehosting.net/uploads/091309a264.png] fits better in the new Words design than [http://photos.pcpro.co.uk/blogs/wp-content/uploads/2012/07/word-inked.png MS Word's appearance (inside)]
*Comments: iWork's appearance outside of the page [http://files.computertotaal.nl/2007/8/iwork-002.png] [http://www.freeimagehosting.net/uploads/091309a264.png] fits better in the new Words design than [http://photos.pcpro.co.uk/blogs/wp-content/uploads/2012/07/word-inked.png MS Word's appearance (inside)]
*Styles list: Use previews, not previews+names [http://images.apple.com/iwork/pages/images/whatis_streamlined.jpg] save space and add aesthetics
*Styles list: Use previews, not previews+names [http://images.apple.com/iwork/pages/images/whatis_streamlined.jpg] save space and add aesthetics
*Scrolling: on the Words mockup persistent scrollbar has been removed (position indicator within the document could added). Scrolling with preview would fit to the design [http://regmedia.co.uk/2010/03/29/ipad_pages.jpg]
*Scrolling: on the Words mockup persistent scrollbar has been removed (position indicator within the document could added). Scrolling with preview would fit to the design [http://regmedia.co.uk/2010/03/29/ipad_pages.jpg]
*Selection frames and handles:
**iWork: They are different (more pleasant) on tablets[http://www.richardharringtonblog.com/files/ipad_sample_09.jpg] than on desktops[http://www.ibooksauthortemplates.com/blog/wp-content/uploads/2012/10/Scrolling-Side-Bar-Widget.png].
**QuickOffice[http://www.quickoffice.com/quickoffice_pro_iphone/faqs/]  has rather nice handles for spreadsheet ranges[http://d1j0ez72nmjkmb.cloudfront.net/iphone/user_guide_images/qs_formula_builder.jpg][http://d1j0ez72nmjkmb.cloudfront.net/iphone/user_guide_images/select_range.png]. Two colors (such as blue, white) used for handles are practical because of nice contrasting. More handles: [http://d1j0ez72nmjkmb.cloudfront.net/iphone/user_guide_images/rotate_resize_image.jpg] (note the extra handle for rotation).
*Skeuomorphism if users wants it: [http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2010/08/contract_03.jpg] [http://graphicriver.net/item/invoices-clean-ready-templates-/2492019]. It's all depending on user's mood and task, sometimes they just write a few notes, yet they do that in a wordprocessor.
*Many designers (e.g. on deviantart) love to work on various reworks of LibreOffice, their work stays as proposals. The only publicly available improvement in this area is [http://www.h-online.com/open/features/Highlights-of-LibreOffice-4-0-1799408.html?view=zoom;zoom=1 FF-like themes]. I hope Calligra will reach a point when designers/UX folks can be heard and can deliver value.

Latest revision as of 11:16, 9 March 2013

Jstaniek (talk) (March 2013)

Mockup: for presentation @ the Calligra Sprint on March 9th

  • Calligra Words web style with greetings to the Team: [1]
  • Original Oxygen style: [2]


Some story behind this look: On a typical wide screen there is also plenty of place to display change tracking or notes on the side. I'll try to mockup this in the future, now just hoping that can be imagined. Users can pull-out and image from the document on the outside and then drag it back to other part of the document without even using clipboard. That's like a natural interaction.

On the top-right you see indication of user signed-in for accessing various collaboration features that would be available in more distant future. I added that to show the vision of "Connected Calligra".

It's all highly theme-enabled and looks like a hybrid of QML/QWidgets would help in implementing that. The side-bar would need more love, that's just a mockup with altered background, realigned elements and sizes. Backgrounds can be part of the theme users can select so if you don't like the all-white webby look, that's not a problem.

The vision could also lead us to a point where each Calligra app has specific look, its own "signature". I think we were not good enough in this area in the past (e.g. Flow looked quite like Words, default tools visible in Sheets were not much related to spreadsheet's use cases) but we're steadily improving.

Possible further works and inspirations

  • Comments: iWork's appearance outside of the page [3] [4] fits better in the new Words design than MS Word's appearance (inside)
  • Styles list: Use previews, not previews+names [5] save space and add aesthetics
  • Scrolling: on the Words mockup persistent scrollbar has been removed (position indicator within the document could added). Scrolling with preview would fit to the design [6]
  • Selection frames and handles:
    • iWork: They are different (more pleasant) on tablets[7] than on desktops[8].
    • QuickOffice[9] has rather nice handles for spreadsheet ranges[10][11]. Two colors (such as blue, white) used for handles are practical because of nice contrasting. More handles: [12] (note the extra handle for rotation).
  • Skeuomorphism if users wants it: [13] [14]. It's all depending on user's mood and task, sometimes they just write a few notes, yet they do that in a wordprocessor.
  • Many designers (e.g. on deviantart) love to work on various reworks of LibreOffice, their work stays as proposals. The only publicly available improvement in this area is FF-like themes. I hope Calligra will reach a point when designers/UX folks can be heard and can deliver value.