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

Revision as of 22:42, 8 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]

Some story behind this look: 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 natural interaction. 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.

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.

Possible further works and inspirations

Comments: iWork's appearance outside of the page [2] [3] fits better in the new Words design than MS Word's appearance (inside)
Styles list: Use previews, not previews+names [4] 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 [5]
Selection frames and handles:
- iWork: They are different (more pleasant) on tablets[6] than on desktops[7].
- QuickOffice[8] has rather nice handles for spreadsheet ranges[9][10]. Two colors (such as blue, white) used for handles are practical because of nice contrasting. More handles: [11] (note the extra handle for rotation).
Skeuomorphism if users wants it: [12] [13]. It's all depending on user's mood and task, sometimes they just write a few notes, yet they do that in a wordprocessor.

@@ 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]
+Some story behind this look: 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  natural interaction. 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.
+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.
+==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)]
 *Styles list: Use previews, not previews+names [http://images.apple.com/iwork/pages/images/whatis_streamlined.jpg] save space and add aesthetics
@@ Line 8: / Line 19: @@
 **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]
+*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.