Skip to content

kiwix desktop 2 concept

Jump to bottom
Robin Schönbächler edited this page May 29, 2019 · 18 revisions

Kiwix desktop 2 design concept

Links / Ressources

Design

General

  • The layout grid bases on 1024px to make it as accessible as possible. The visuals are created with a „smallest desktop resolution first“ design approach, which is similar to „mobile first“. If it works on smaller screens it works on bigger screens as well.
  • App design has constantly been tested in low resolutions.
  • All parts of the app are keyboard accessible by design.
  • Click/tap targets are at least 40px high and wide. This makes it also accessible for hybrid devices with touch screens.
  • Default border-radius for UI-elements: border-radius: 2px;.
  • Default box-shadow for UI-elements (e.g. dialogs, menu, dropdown’s): box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.20);.

Typography

The app is designed on a 4px baseline grid. Please make sure to use 4px spaces for margins, paddings and line heights to maintain visual consistency.

Typeface

  • All visuals are designed with „Segoe UI“, a default typeface on Windows.
  • On Linux, it’s recommended to use the Ubuntu typeface. It’s a default typeface on Ubuntu, Download, Wikipedia.

Sizing

H1

font-size: 32px;
line-height: 44px;
font-weight: bold;

H2

font-size: 24px;
line-height: 32px;
font-weight: bold;

H3

font-size: 20px;
line-height: 28px;
font-weight: bold;

H4

font-size: 16px;
line-height: 24px;
font-weight: bold;

Base font

font-size: 16px;
line-height: 24px;

Article navigation

font-size: 16px;
line-height: 32px;

Additional definitions, mainly for usage in UI

font-size: 14px;
line-height: 20px;
font-weight: semibold; /*improves legibility*/

font-size: 12px;
line-height: 18px;
font-weight: semibold; /*improves legibility*/

Colors

White: #ffffff;

Grey soft: #eaecf0;
Kiwix browser interface, light separator line

Grey light: #cccccc;
Border, label/placeholder disabled state, separator line

Grey dark: #666666;
Placeholder text, table header default state

Blue soft: #d9e9ff;
Icon background enabled/active state, active search filter in address bar, in-page search result highlight

Blue light: #85a3e0;
Disabled primary CTA button background and border, disabled secondary CTA button border

Blue: #3366cc;
Link, primary CTA button background and border, secondary CTA button border, download indicator, icon border enabled/active state (1px border), keyboard focus (2px border)

Blue pop: #447ff5;
Hover primary and secondary CTA button background

Red: #dd3333;
Alert, error message

Black: #000000;

Notifications

  • The Kiwix app makes use of native notifications on Windows and Linux.
  • Notification inventory
    • Download completed: The item „Wikipedia English“ has been downloaded.
      • Behavior: A click on the respective notification opens the local files page in the Kiwix library.
    • Update completed: The item „Wikipedia English“ has been updated.
      • Behavior: A click on the respective notification opens the local files section in the Kiwix library.
    • Update available: A newer version of „Wikipedia English“ is ready to download.
      • Behavior: A click on the respective notification opens the update section in the Kiwix library.
    • Kiwix update available: A newer version of the Kiwix Desktop app is ready to download. Click here to update.
      • Behavior depends on technical feasibility:
        • Ideal scenario if built-in app updates are supported: a click start the update wizard on the respective operating system.
        • If built-in app updates are not supported, a click leads to the respective download URL and automatically starts downloading the newer version. In this case, the installation needs to be done manually by the user.

Tabs

  • A tab element contains a favicon (highly important for users to orient if multiple tabs are open), a title and an always visible close option.
  • The tab bar is always visible.
  • Tabs are navigable with 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. Alternative options: Open new tabs with: „Empty page“ or „Same page“.
  • Open/active tabs are remembered for the next launch of Kiwix when the app’s been previously quit by users. This preference can be disabled in the app’s settings.

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).
    • (Default application UI elements on Windows/Linux, such as minimize, collapse/expand and quit).

Full screen mode

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 (File, Edit, View, Tools, Help).
  • 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
    • 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 table of contents [icon] Ctrl Shift 1
      • Show/Hide reading list [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 of an article can be accessed by clicking the bottom left icon in the article view. The icon only appears when a table of contents is available.
  • After the icon has been clicked, a TOC sidebar appears and pushes content to the right.
  • The TOC can be hidden again via „Hide“ button.
  • Once an item has been clicked in the table of contents, the article page on the right scrolls to the corresponding position.
  • The TOC includes the in page/article 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 Kiwix reading list provides basic functionality to save/bookmark articles.
  • Reading list items can be accessed by clicking the reading list icon in the toolbar.
  • The reading list sidebar can be hidden again via „Hide“ button or by clicking the respective icon in the toolbar.
  • A reading list icon in the address bar 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 article can be saved 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 are accessible via sidebar.
  • The reading list in the sidebar shows the most recently added articles first and lets users filter the list with a text search.
  • 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 corresponding article opens up and the blue dot disappears.
  • Once an article has been added to the reading list, it is stored locally and available to read at any time. Even if the corresponding ZIM file has been removed.
    • *Plan B: If storing reading list items locally is technically not possible, the item’s description displays (in red): The library item „Wikipedia English“ that contained this article has been removed. A click on the item should take users to the library and highlight the ZIM file that needs to be downloaded.

Search

  • A search via address bar contains results from all local books by default. A filter can be set with the corresponding filter icon on the right side of the address bar (s. chapter „Search filter“).
  • After typing, the address bar auto suggests relevant search results. I’ll leave the complexity of the search suggestion up to Mathieu but I’m happy to consult.
  • Search results can be selected by mouse or keyboard. Clicking on an item takes users to the respective page in the active tab.
  • Below Kiwix search results, the auto suggest dropdown displays results from the reading list, history and open tabs.

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 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 be performant by design: The visuals feature lazy loading (load as users scroll) to reveal results quicker.
  • If no search results can be found, Kiwix suggests to download books from the library.

Search filter

  • Default search behavior: Results from all books
  • If a custom search is active, e.g. when users disable „Wikipedia EN“ 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 source is selected as a filter, the indicator next to the icon displays the source’s full name (in the visual example: „Wikipedia EN“). Also, if a user specifically opens a book from the library, it automatically applies the filter for that respective book and displays it in the same way.
  • Once a specific search filter is set and users quit Kiwix, the filter is remembered in the next launch of the app.

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 suggestions to keep this simple).
    • The search includes matches from local and online books.
    • Local books are listed first when the search term matches.
  • Library filter / navigation:
    • 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 types of media. 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, results are sorted by relevancy.
  • Detail option for library items
    • Users can access details of a file by clicking on an item (UI element: accordion)
    • Once the details view is active on a library item, the download call to action is emphasized as a button. Books can also be downloaded without expanding the details by directly clicking on „Download“ in the list view.
    • The details view provides extended information about a file
      • Contains file description, release notes, additional file infos and the option to remove files from the local library.

Download and open books

  • Books can directly 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, a download status icon 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.
  • A click on „Open“ leads users to the home page of the corresponding book in a new tab next to „Kiwix library“. It also adds a book specific search filter in the app’s address bar. The user assumption here is that once a user decides to open a specific book, the search should only display results from this active book. The book filter in the toolbar can be reset at any time.

Updating books

  • If a book update is available:
    • A blue indicator (blue ball in Kiwix logo) in the permanent Kiwix library tab informs users that an update is available.
    • An „Update“ section appears in the library 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. Also, if users are within the Kiwix app, an app dialog appears. In addition, a system (native) notification informs users about the finished download (s. chapter „Notifications“).
  • Indication on article level: an indication message at the top of an article informs users about an update. It’s only shown in articles that belong to the book where the update is available. A click on the message takes users to the update section of the library.

Local Kiwix server

Settings

  • Settings information architecture:
    • UI language (default: system language) [select]
    • Open web links with: (default: system browser) [select]
    • New tabs open with: (default: Top articles, options: Empty page, Same page) [select dropdown]
    • Remember tabs (default: checked) [checkbox]
    • Remember book filters (default: checked) [checkbox]
    • Font size / Zoom level (default: 100%) [select]
    • Port for local Kiwix server: (default: 8000) [number input]
  • To structure available options, setting groups can be introduced. Currently this is not necessary since the amount options is manageable. With that said, also a „Search settings“ feature could make sense at a later stage.

Universal content page

The universal content page can be used to display different type’s of information within Kiwix. The most obvious one is the Kiwix Help page. It consists of a navigation (left) and article section (right). It can also be used to create content in dialogs, here’s an example of the about dialog.

Future / Feature ideas (please extend @Kiwix-Team!)

  • Introduce ZIM extensions
  • Browsing history page, similar to web browsers
  • Introduce „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 Wikipedia’s new feature
  • Reading mode for articles, similar to Safari
  • Customizable toolbar, drag and drop to customize
  • User onboarding / help tooltips.
  • Stéphane: Export a reading lists and share it with nearby users. The discussion was about a teacher preparing a curriculum and sharing it with his/her many students.
Clone this wiki locally