kiwix desktop 2 concept

Kiwix Desktop 2 Design Concept

About this document

Please be aware that this document is work in progress and will be updated regularly.

Minimum Viable Product (MVP)

General

• If the application is closed with a book open, it should reopen with the last book opened

Typography

• Typeface Choice on Windows: Segoe UI (native)

• Todo (Robin): Evaluate default typeface on Linux (Ubuntu/Fedora)

Design

• Layout grid: Based on a 1024px to make it as accessible as possible

• Baseline grid: Design bases on an 8px baseline grid

• Design approach: Smallest resolution first (similar to mobile first): if it works on smaller screens it works on bigger screens as well

• App design is constantly being tested in low resolutions (Tool: SwitchResX)

• Base Font Size (16px)

• Keyboard accessible

• Click/tap targets at least 40x40px (makes it accessible for hybrid devices with touch screens)

• Todo (Robin): Unify enabled state of icons. Elements to consider: - Sidebar - Download - Library - Settings

• Todo (Robin): Design Kiwix app icon for Windows/Linux

• Todo (Robin): Define button states

Tabs

• Adding Favicon to tabs, high importance to orient if multiple tabs are open

• Define min width of tabs (Chrome as Example)

• Show tab bar only when there are open tabs

• Navigate with keyboard shortcuts (switch with ctrl + 1 etc.)

• Move tabs (e.g. with ctrl + alt + arrows)

• Todo (Robin): Loading indicator in tab (spinner)

• Todo (Robin): Sticky tabs design

• Todo (Robin): Empty Tab State design

• Todo (Robin): Usage of Language 639-1 ISO Codes to recognize tabs from a certain source (currently applied when opening a book from the library)

Reading lists

• Reading lists provide basic functionality to save/favorite/bookmark articles
• A reading list icon appears as soon as an article has been fully loaded. It replaces the search icon (magnifier glass) on the left side of the address bar
• The current page can be favorited with the reading list icon in the address bar
• A filled reading list icon (black) indicates that an article has been added previously to the reading list. If it hasn’t been added previously, the icon is filled white (default),
• Articles that have been added to the reading list area accessible via the sidebar
• The reading list in the sidebar shows the most recently added articles first and lets users filter the list
• A blue dot next to the article title in the reading list (sidebar) indicates that an article has been added recently. If users click on the article, the blue dot disappears

Toolbar

• Contents

  • Show the previous page
  • Show the next page
  • Show/hide sidebar
  • Open library
  • Open settings
  • Print
  • Zoom in / Zoom out (increase / decrease) text size
  • Full screen mode (show/hide toolbar)
    • If toolbar is hidden, it reveals the toolbar on mouse over (similar to Google Chrome’s behavior)
    • The tab bar stays visible all the time (also in full screen)
  • If viewport size is narrow, functionalities/icons that don’t fit the available space are grouped within show/hide „more“ panel

• Todo (Robin): Define behavior of show/hide „more panel“ and deliver visual design for it

Table of Contents

• The table of content can be accessed by clicking its dedicated icon in the toolbar or via the sidebar

• Once an item has been clicked in the table of content, the article page on the right scrolls to the corresponding position

• Todo (Robin): Connect in page article search and TOC (e.g. by highlighting results in the chapters with yellow)

Sidebar

• Pushes content aside in a responsive way
• Currently contains reading lists and table of contents
• Both reading lists and table of contents are part of the sidebar that can be triggered from the app’s toolbar
• The sidebar content has the advantage that it can be extended with features in the future.

Address bar

Search

• Default search across all books (can be filtered) see chapter „Search Filter“

• After typing, the address bar auto suggests relevant search results (I’ll leave the complexity of the search up to Mathieu but I’m happy to consult) here

• Search results can be selected by mouse or keyboard and the return key takes users to the respective page

• Kiwix search should work similar to a search engine or file search, we don’t want to bother users with settings.

• This requires that the search experience needs to be smart and group search results

• Searches across favorites and search history

• Todo (Robin): Empty state of search field? What is displayed when there are no books added yet? What is display when the search field is clicked on? Bookmarks? Recent search? Safari displays bookmarks and frequently visited. Chrome and FF don’t use the pattern.

• Todo (Robin): No search results, suggest to download books via media library

• Todo (Robin): Open tabs should be listed in search bar as well

• Todo (Robin): Design/Concept for in page search

Filter

• Default Search -> All books
• Show active filter number when a filter is set
• The goal is to find content and not bother users with settings
• Once a filter is set, the app remembers the choice
• If a user specifically opens a book from a library, it automatically applies the filter for that respective book. If only 1 book is selected as a search source, the interface displays the name of the book (e.g. Wikipedia EN)
• Todo (Robin): Add possibility to quickly remove a filter in the search bar (e.g. with an „x“ to reset)

Library

How to navigate to, browse and search the library (InVision Screen # 12-13)

• As in Kiwix Desktop 1, users can access the library via the library icon the toolbar

• It’s a shortcut and opens a new tab that is called „Kiwix Library“

• The tab will initially open as a first tab but can be moved to a different position by users.

• To avoid cluttering the interface: if users clicks the library icon in the toolbar and the „Kiwix Library“ tab has been opened before, it redirects users to the tab that’s already open

• Default view prioritization: 1) Ongoing book downloads / updates 2) Local books 3) Online books that can be downloaded

• Book search:

  • The search functionality is straight forward, typing a term updates the grid view below with matching results (no auto suggestion to keep this simple)
  • The search includes matches from local and online books
  • Local books get listed first when the search term matches

• Book filters:

  • Most important filters can be set on the right side of the library search.
  • All | Local: „All“ displays online and offline books, „Local“ only displays books that have been downloaded before
  • Language: After choosing a language (or multiple languages), the book results view us updated and only shows results from the selected language(s)
  • Media type: Provides an option to filter by media type (text, picture, audio, video). By default, it searches all media type. Allows multiple filters/selections
  • Categories: Similar to the Kiwix iOS app: Content can be sorted by category, e.g. Wikipedia, Wikivoyage, Wikibooks, etc., multiple categories can be set here

• Sort By: Lets users sort by name, size and release date. Default setting

• Detail page for library items

  • Provides extended information about a file
  • Contains file description, release notes and meta file info
  • The detail page serves as an intermediate step for updates as well. Before an update is performed, the detail page informs users about the update that they’re about to download.
  • The detail page also features the option to remove books from the local library

• Todo (Robin): Design of the language and category filter dropdown. It will work/look similarly to book filter in the toolbar. Goal is to design „1 standard dropdown style to rule them all“, so we don’t have to develop multiple variations of it.

Download and open books (InVision Screen # 14-17)

• Books can be downloaded by clicking the blue download button
• Once clicked, a download status indicator appears below the clicked button. It features the current download speed and progress in library items and the detail page.
• To also indicate that a book is currently downloaded, an icon with the download status is added to the main toolbar of the app. This makes sure that users are informed about an ongoing download in all views of the app. A click on that icon takes the user to the Kiwix library tab which lists books that are currently downloaded first.
• „Open“ opens the home page of the book in a new tab next the „Kiwix library“ tab and adds a book specific filter to the article search in the app’s toolbar. The user assumption here is that once a user decides to open a specific book, the search should only display results from within the book. The filter in the toolbar however, can be reset at any time,

Updating / extending books (InVision Screen # 18-20)

• If a book update is available: an „Update“ indicator appears on the top right of a book item

• Clicking the update button on a library item on the overview page leads users to the detail page of the newer version of the ZIM file. The detail page provides additional information about the update users intend to download.

• After clicking the update button, the download indicator appears below the detail page’s call to action

• Users can continue to use the app while performing updates/downloads (e.g. go back to the overview with „Hide Details“)

• Once updated, the book’s meta info „Latest Update“ displays the latest update date, in this case

• Todo (Robin): Design a notification system (use native notifications on Windows or Linux?) for the user that informs about a finished download and a dialog that asks if the old version of the file should be kept or not

• Question @Mathieu: Is it possible to use the native notification system on Windows? Does something like that exist on Linux too and could we use it?

Start server / sharing

• Todo (Robin): Study old functionality and think about ways to make this feature more user friendly, a share link the toolbar? Article related links?

Settings

• Todo (Robin): Settings to be defined/discuss with the Kiwix team
• Todo (Robin): Concept/Design of the Settings panel. Also think about a menu bar (a Windows classic and still going strong). Maybe make it visible on mouse over by default, maybe provide a setting to have it always visible

Future / Feature ideas

• Browsing history? Similar to web browsers? E.g. when searching books?
• Open quickly feature? Similar to a code editors
• Introduce ratings for contents in „store“
• Reading mode, similar to Safari?
• Enhanced filter capabilities
• Customizable toolbar, possibly featuring an icon for
  • History
  • Favorites
  • Library
  • Tab overview
  • Zoom
  • Print
  • Settings
  • Display options:
• Library list view: Lets users switch the view ↓
  • Question @Team: Do we need a list view of the books? I’ve added the iconography for list view to the mockups. I suggest to not go down that path for the first version but if you think Kiwix users might miss it, please intervene.
    • Emmanuel: Yes, only nice to have IMO. Card view should be good enough first. Lets try to implement not to many features, but the right ones... and properly.
• Stéphane: Export a reading list so as to share it with nearby users. The discussion was about a teacher preparing a curriculum and sharing it with his/her many students
• ZIM Extensions
  • Question @Team: I’m not quite sure yet how extensions will completely work yet but I envision a similar process as for the updates. Do you see any obstacles in treating extensions similar to updates? (from a design perspective, not technical)
    • Emmanuel: That seems to me the right approach. But we can not deal with that problem for 2.0. Too much work.