Skip to content

kiwix desktop 2 concept

Jump to bottom
schoenbaechler edited this page Jun 20, 2018 · 18 revisions

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

  • Open/active tabs are remembered in the next launch when Kiwix quit Kiwix. Preference can be disabled in the app’s settings.
  • The app also remembers active book filters. Preference can be disabled in the app’s settings.
  • External links within the Kiwix app open in the operating system’s default browser

Typography

  • Typeface Choice on Windows: Segoe UI (native)

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

Ressources

Design

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

  • Baseline grid: Design bases on a 8px baseline

  • 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): Define button states

Tabs

  • An tab element contains of a favicon (highly important to for users to orient if multiple tabs are open), its title and an always visible close option
  • The tab bar is always visible
  • Tabs are navigable through keyboard shortcuts: Ctrl 1 - Ctrl - 9
  • Moving tabs is possible via keyboard shortcut: Ctrl Alt + Arrow left/right)
  • New tabs can be opened by clicking + in the tab bar or by using the keyboard shortcut: Ctrl + T. New tabs open with „Top articles“ by default. Top articles include reading list and frequently visited articles. Users can choose alternative behaviors for new tabs in settings. Alternatives: Open new tab s with: „Empty page“ or „Same page“.

Toolbar

  • Contents
    • Show the previous page
    • Show the next page
    • Reading lists
    • Menu bar icon (see chapter „Menu“)
    • Full screen mode (show/hide toolbar)
      • If toolbar is hidden, it reveals the toolbar on mouse over (similar to Google Chrome’s behavior)

Full screen mode

  • Full screen mode can be entered by clicking the icon in the toolbar (top right)
  • It completely hides the Kiwix browser
  • Users can exit the full screen mode by hovering to the top of the screen or by pressing the keyboard shortcut (F12 on Windows)
  • Question @Mathieu: Since Windows doesn’t feature a „real full screen mode“, I’ve positioned the Kiwix full screen icon between the standard „window management“ features on the top right (between minimize and maximize on Windows). Is that technically possible? From a structural point of view, it’s the most logical positioning.

Menu

  • The Kiwix browser menu is accessible via „Menu“ icon (three dots) in the toolbar
  • Below these toolbar shortcuts, a classic Windows menu can be found
  • Menu information architecture and corresponding keyboard shortcuts:
    • Start local Kiwix server [icon] Ctrl I
    • Random article [icon] Ctrl R
    • Print [icon] Ctrl P
    • File F when menu is open
      • New tab Ctrl T
      • New window Ctrl N
      • Close tab Ctrl W
      • Close window Ctrl Shift W
      • Reopen closed tab Ctrl Shift T
      • Browse library [icon] Ctrl E
      • Open file Ctrl O
      • Open recent
        • Displays a list of recently opened files
      • Save page as ... Ctrl S
      • Print Ctrl P
        • Unified „Print“ and „Print to PDF“ since this is handled by system dialog
      • Exit Ctrl Shift Q
    • Edit E when menu is open
      • Search articles Ctrl L
      • Search library Ctrl Shift L
      • Search Find in page Ctrl F
        • Find next Ctrl G
        • Find previous Ctrl Shift G
      • Copy Ctrl C
      • Select all Ctrl A
      • Preferences
        • Moved to quick access in menu and renamed it to „Settings“
    • View V when menu is open
      • Enter/Exit full screen [icon] F11
      • Show/Hide sidebar [icon] Ctrl Shift L
      • Show/Hide table of contents sidebar [icon] Ctrl Shift 1
      • Show/Hide reading list sidebar [icon] Ctrl Shift 2
      • Zoom
        • Zoom in Ctrl +
        • Zoom out Ctrl –
        • Actual size Ctrl 0
      • Tabs
        • Removed, tab bar is always shown
      • Status bar
        • Removed, status bar is unnecessary
      • Language
        • Moved to preferences, system language is used by default
      • Skin
        • Deprecated, night/dark mode possible in a future version
      • Inverted colors
        • Deprecated, night/dark mode possible in a future version
    • Tools
      • Random article
        • Moved to quick access in menu
      • Server
        • Now called share and moved to quick access in menu
      • Launch indexing
      • Integrity check
      • Purge history
    • Help
      • Help (F1)
      • Feedback
      • Report a bug
      • Request a feature
      • About Kiwix
    • Settings [icon] F12
    • Donate to support Kiwix [icon] Ctrl < 3
      • A click on „Donate to support Kiwix“ opens up a new tab in the default web browser that leads to a Kiwix donation page. Remark: I haven’t found a dedicated donation page for Kiwix, only the donation element in the footer on kiwix.org. I recommend to create a separate donation page to lead users there when clicking this link in the app.
    • Exit [icon] Ctrl Shift Q

Table of contents

  • The table of contents can be accessed by clicking the bottom left icon in an article. The icon only appears when a table of contents is available.
  • Once an item has been clicked in the table of contents, the article page on the right scrolls to the corresponding position.
  • The TOC can be hidden again via „Hide“ button
  • In page search (search in article)
    • TOC sidebar includes the in page search
      • It can be opened with the keyboard shortcut Ctrl F
      • Table of contents highlights where search results are found
      • Previous / next is accessible via buttons in the sidebar or with the keyboard shortcuts Ctrl G (next) or Ctrl Shift G (previous)

Reading list

  • The reading list can be accessed by clicking its dedicated icon in the toolbar

  • 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) in the address bar 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 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 an article, a tab with the page opens and the blue dot disappears

  • The reading list can be hidden again via „Hide“ button or by pressing the icon in the toolbar

  • Todo (Robin): Provide design for reading list item where the source (ZIM file) has been removed from the library)

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

  • Searches across favorites and search history

  • Todo (Robin): Empty state of search field? What is displayed when there are no books added yet? And 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

Search filter

  • Default search -> All books

  • If a custom search is active, e.g. when „Wikipedia EN“ is disabled as a search source, a number next to the search icon indicates how many sources are currently being searched (in the visual example: 6 active sources)

  • If only one specific source is being searched, the indicator next to the icon displays the source’s full name (in the visual example: „Wikipedia EN“)

  • If a user specifically opens a book from the library, it automatically applies the filter for that respective book. It’s displayed in the address bar at the top

  • Once a specific search filter is set, the app remembers the choice

  • Todo (Robin): Add possibility to quickly remove a filter in search bar (e.g. with an „x“ to reset)

Search results page

  • Typing a search term in the address bar and hitting enter (without selecting an entry from the search suggestions) takes users to a dedicated search page.
  • It currently consists of a sidebar element that lets users filter results by category and language
  • Not sure if it’s necessary due to the fact the app runs offline and will pretty quick: The designs feature lazy loading (load as users scroll) to reveal results quicker

Library

How to navigate to, browse and search the library

  • Users can access the Kiwix library via permanent tab in the tab bar
  • Default view prioritization: 1) Local books 2) Online books
  • Book search:
    • The search functionality is straight forward, typing a term updates the list 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:
    • Filters can be set on the left side of the library search
    • All files | Local files: „All files“ displays online and offline books, „Local files“ only displays books that have been downloaded before
    • Browse by category: Content can be filtered by category, e.g. Wikipedia. Results view on the right is updated once a category is selected. By default, all categories are searched.
    • Language: After choosing a language, results view on the right is updated and only shows results from the selected language
    • Content type: Provides an option to filter by media type (text, picture, audio, video). By default, it searches all media type. Allows multiple active filters.
  • Results table header consists of File name, Size, Date and Content type. By default, the view is sorted by date. Once a search term is entered, it sorted by name/relevancy.
  • Detail option for library items
    • Users can access details of a file by clicking on an item (UI: accordion)
    • The details view provides extended information about a file
      • Contains file description, release notes, meta file info and the option to remove files from the local library

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

  • Books can be downloaded by clicking the blue download link
  • Once clicked, a download status indicator appears below the clicked button. It features the current download progress.
  • 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“ section appears in the sidebar

  • The „Update“ section in the sidebar features a „notification“ bubble that shows how many updates are available

  • After clicking the update button, the download indicator appears

  • Users can continue to use the app while performing updates/downloads

  • Once updated, the book’s meta info „Date“ displays the latest update date

  • 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. Use native notification system on Windows/Linux for this functionality as far as possible.

Local Kiwix server

  • „Local Kiwix server“ can be accessed via menu in the toolbar.
  • Once clicked, a dialog appears that lets users perform a server start („Start Kiwix server“)
  • If the server is running, an indicator icon in the toolbar appears. Clicking on the icon opens the „Local Kiwix server“ dialog.
  • The URL (IP address) for the server can be copied from the read only text input field.
  • „Open in browser“ opens the URL in the system’s default browser.
  • A number input field allows to change the IP port (same functionality as in Kiwix Desktop 1)

Settings

  • Settings information architecture:
    • UI language (default: system language) [dropdown]
    • Content language (default: system language) [dropdown]
    • Open web links with: (default: system browser) [dropdown]
    • New tabs open with: (default: Top articles, options: Empty page, Same page)
    • Remember tabs (default: checked) [checkbox]
    • Remember book filters (default: checked) [checkbox]
    • Font size / Zoom level (default: 100%) [dropdown]
  • To structure available options, setting groups can be introduced. It doesn’t make sense at this point since the amount of options is currently manageable. With that said, also a „Search settings“ feature could make sense as the app continues to evolve.

Help

  • Todo (Robin): Provide design for help page

Future / Feature ideas

  • Browsing history? Similar to web browsers? E.g. when searching books?
  • Introduce an „Open quickly“ feature
    • Similar to code editors (Atom, Sublime, etc.) / Spotlight on macOS
    • Considers
      • Local and remote library items
      • Local and remote articles
      • Menu items
      • Reading list items
      • Table of contents
  • Introduce ratings for contents in „store“
  • Page previews, similar to Desktop Safari
  • 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
  • Customize Toolbar, e.g. drag and dropping icons
  • 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.
Clone this wiki locally