Design/Whiteboards/Start Center

TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate

• Wiki Home
• Development
• Design
• QA
• Events
• Documentation
• Website
• Localization
• Accessibility
• Marketing
• Diversity
• Wiki Help

• Design Home
• Whiteboards
• Development Blueprints
• UX Principles
• UX Guidelines
• Artwork Resources
• Branding Guidelines
• Meetings

This page was marked as inactive and is retained for historical reference. Either the page is no longer relevant or consensus on its purpose has become unclear. To revive discussion, seek broader input via a forum such as one of our mailing lists.

Summary

Redesign the LibreOffice Start Center.

Status

Analysis

Call for Proposals

Shaping Tentative Design

Blueprint

Implemented

Scope

In Scope	Out of Scope
Less emphasis on and/or different placement of buttons that launch individual components Using the LibreOffice logo Getting rid of unnecessary visual elements	Getting rid of buttons that launch individual components Fixed dimensions

Discussion

• tdf#61914 - Tweak the new template manager to act as a start center
• GSOC Ideas: "Use Widget Layout for the Start Center (completed GSoC 2013)"
• UX-Advise ML: "Use Widget Layout for the Start Center"
• Design meeting: "2013-11-06"
• Design ML call for input: "Start Center"
• Design meeting: "2013-11-10"
• Design ML: "Welcome screen LO 4.2"
• Design meeting: "2013-11-24"
• Design ML call for input for next Design meeting: "Controversial topics for the start center"

Proposals

Mockups

• 

  an Apple NS iWork feel

• 

  another Apple NS, with Recent Files button

• 

  "All" tabs

• 

  "Documents" tabs

• 

  "Mateusz - 20131015" tabs

• 

  "Mirek - 20131023" tabs

• 

  "MinHsien - 20131110" move left, tabs

• 

  "LLyaudet - 20131110" move left, tabs

• 

  "Astron - post mtg 21031110" move left, no tabs, icons only

• 

  "Astron - post mtg 20131110" move left, no tabs, welcome

• 

  "Pavel - 20131114" move left, no tabs, no thumbnails just greyscaleIcons with corner color tab

• 

  "Kendy - implemented 20131114" no tabs, mix icons & thumbnails

• 

  "another Mateusz's mockup - this one is based on Kendy's implemented vision

Relevant Art

• iWork Pages start screen
• Gnome Documents whiteboard

Controversial Topics

This section lists the controversial topics linked to the start center and the pros and cons for each topic. Decisions on these topics have been reached on our IRC chat.

Sidebar Positioning

On the left

On the right

Pros: Most functional as it locates thumbnail view pane on the right and allowing it to fully expand across wider monitors Vsfoote (talk) Follows standard LTR reading pattern. (One first opens a file, then can use Recents.) --Mirek2 (talk) 2013-11-27T20:42:00 (UTC) Cons: With keyboard only navigation, end up on sidebar first--should really first land in recent documents thumbnail view Vsfoote (talk) The keyboard focus sequence is independent of the layout, so the app can start with focus on thumbnails. --Mirek2 (talk) 2013-11-27T20:42:00 (UTC)

Pros: Keyboard focus sequence making initial sub-menu the recent documents thumbnail view Vsfoote (talk) Cons:

Decision: Keep it on the left for LTR locales, have it on the right for RTL locales.

Icons or Thumbnails

Icons	Thumbnails	Icons with thumbnails on mouse over
Pros: Concise neat layout Vsfoote (talk) Respect privacy LLyaudet Cons: Icon alone often not enough detail for selecting document to open Vsfoote (talk)	Pros: Thumbnails are information rich Vsfoote (talk) Cons: Size of the document previews rendered to thumbnails will vary, visually jarring Vsfoote (talk) Added overhead of rendering document into thumbnail view, or inability to render non-ODF documents. Latency in accessing CMIS and other network resources for document rendering to thumbnail view Vsfoote (talk)	Pros: Has the pros of the two other solutions LLyaudet Cons: Has the cons of the two other solutions --Mirek2 (talk) 2013-12-03T11:05:16 (UTC) With thumbnails of various sizes, the layout of icons and thumbnails will move on mouse over LLyaudet

Decision: Use thumbnails, but indicate file type using colors or badges. (To be designed.)

Tooltips and Labels

• Whether thumbnail or icon, must have complete document name and type available as Tooltip for a11y accessibility. Also, should implement at least a two line file names and truncate but include last 8 char for longer file names--as in the Gnome Documents design. Vsfoote (talk)

Decision: Show the full file path (including extension) in a tooltip, have 2-line labels as described in the comment above.

File Type Tabs

No tabs	Tab for all recent documents and a tab for each file type
Pros: Saves users vertical screenspace. Maintains simplicity given no filter is needed, as the number of recents is limited to 25. --Mirek2 (talk) 2013-11-27T20:42:00 (UTC) Cons: Dose not allow users to sort their documents.	Pros: Users with many different documents, accumulated after years of work may need to sort them by file type. Business organisations often through around many different file types and to sort through exactly what you need would be nice. Cons: uses vertical screenspace.

Decision: As we only have 25 recent documents max, filters aren't needed.

Sidebar Button Names

Create New Document, New Spreadsheet, New Presentation, New Drawing, New Formula, New Database	Create Writer Text, Calc Spreadsheet, Impress Presentation, Draw Drawing, Math Formula, Base Database	Create New with "title" on the icons to display Writer, Calc, etc. on mouse over
Pros: Accessibility : all the information is on the button LLyaudet Cons: label New repeated on each button is distracting, and may not translate/present well for l10n needs Vsfoote (talk)	Pros: the average user can associate a module name (which s-he knows well; eg: Calc) and a document type (which s-he knows less often; eg: Spreadsheet); the labels are consistent with the OS start menu LibreOffice entries. labels as module name a better UX when translated Vsfoote (talk) Cons: longer text.	Pros: Better solution than Create New without title LLyaudet Cons: l10n LLyaudet

Decision: Create Writer Text Document (or simply Writer Document, if Writer Text Document is too long in some languages), Calc Spreadsheet, Impress Presentation, Draw Drawing, Math Formula, Base Database

Greeting

Welcome! You can open or create a new document!	No recently opened files. Use the sidebar to open or create a file.	Welcome to LibreOffice. Open or create a file to get started.
Pros: Simple welcome treatment. It is easily translated and to the point. Cons: Not visually very appealing, no mention of the thumbnails as recent files "Not visually appealing" -- we're only talking about the wording in this section. --Mirek2 (talk) 2013-11-27T20:51:42 (UTC) No instructions to use the sidebar

Decision: Welcome to LibreOffice. Use the sidebar to open or create a file.

Further Design

File Type Differentiation

• 

  Top right corner color code

• 

  use 300px tile to hold nominal 256px ODF "thumbnail", or 256px document type icon where no thumbnail. Maximum of 25 tiles, with vertical and horizontal scroll bar when needed.

• 

  widget UI allows user to resize down to convenient size

• 

  widget UI should get no smaller than the menubar

• 

  SC with fully populated thumbnail view