Skip to content

kiwix desktop 2 journal

Jump to bottom
schoenbaechler edited this page May 31, 2018 · 9 revisions

Kiwix Desktop 2 Design Journal

About this document

This document is work in progress and will be updated regularly. I’ll try to keep these notes as comprehensible as possible but it might occur that context might be missing here and there.

2018-05-30 | Reading Design Review

  • Design critique: Kiwix Desktop 2 Menu
  • Est. time required: 10 min
  • Type of work being shared: Visual design
  • Goal(s) of critique: Conceptual/visual design feedback
  • Comments/Notes:

Rita:

  • Alignment of the menu icon (three dots) and the icons in the menu could be improved. Suggests to vertically and horizontally align them
  • Questions the positioning of the menu icon, should be more to the right? E.g. as in Firefox or Chrome
  • Sidebar
    • Mentions that the sidebar element is currently unclear and positioning is confusing
      • Shows a sketch where the sidebar icon is positioned on the left side of the tab bar (the first element). Robin mentions that it could potentially be confused as a pinned tab when positioned there
    • Main sidebar critique point is that a global element (Reading lists and a content agnostic element (Table of contents) are grouped together in the sidebar
    • Also shows a Wikipedia iOS in progress mockup where the table of contents is positioned on the left of the Wikipedia article

Pam:

  • Mentions that the filter and menu icon could be confused by some users
  • Is used that window actions (minimize, maximize, close) are on a separate level
  • Agrees with Rita to position menu button on the right side of the screen
  • Suggests to restructure the toolbar icon order, e.g. grouping the library and the sidebar icon together
  • Would appreciate if the table of contents sidebar would have a label that says „Table of Contents“ somewhere, since the icon is not 100% recognizable

2018-05-29 | Design Update

Hi all

Though we already talked about a few things yesterday, here’s a quick update of what I was working on last week (journal and concept are updated as well).

Talk to you soon,
Robin

Changelog

Sidebar

  • Reversed order of sidebar navigation to make the Table of contents accessible with one click.
  • 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)

Menu

  • The Kiwix browser menu is accessible via „More“ icon (three dots) in the toolbar
  • If there’s not enough screen estate, e.g. a viewport of 1024px and below, the toolbar shortcuts are accessible in the menu (Example on InVision: Full screen, Share with nearby computer, Random article, Print)
  • Below these toolbar shortcuts, a classic Windows menu can be found
  • Here’s the reworked menu structure w/ corresponding keyboard shortcuts:
    • Full screen [icon] F11
    • Share with nearby computer [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
      • Recently open
        • 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
    • Exit [icon] Ctrl Shift Q

Next up

  • Evaluate feedback from the design call with the Kiwix team (2018-05-27), which includes:
    • Mathieu
      • Suggested behavior for pinned tabs to save space in the tab bar: Open tabs in normal width, once users switch to another tab, the Kiwix library tab resizes to the size of a pinned tab (only the icon visible)
        • Robin
          • Flags a possible problem with the suggestion: users loose orientation when tab size is modified and other open tabs lose their position.
          • Explains the foreseen behavior: Kiwix library tab can be pinned by the user. Similar to the behavior of pinned tabs in common web browsers, the choice will be remembered (also when restarting Kiwix)
    • Emmanuel
      • Kiwix library related and open questions should be addressed before development starts
      • Would like to see the article search results page next
    • Stéphane
      • Make the update button more obvious
      • Detail page: It makes sense to show alternative versions of a file on the detail page (Intro only, Text, Text + Images, Audio)
  • Continue to work on open issues, according to the concept document

2018-05-28 | Design Call w/ Emmanuel & Mathieu

  • Mathieu
    • Suggested behavior for pinned tabs to save space in the tab bar: Open tabs in normal width, once users switch to another tab, the Kiwix library tab resizes to the size of a pinned tab (only the icon visible)
      • Robin
        • Dlags a possible problem with the suggestion: users loose orientation when tab size is modified and other open tabs lose their position.
        • Explains the foreseen behavior: Kiwix library tab can be pinned by the user. Similar to the behavior of pinned tabs in common web browsers, the choice will be remembered (also when restarting Kiwix)
  • Emmanuel
    • Kiwix library related and open questions should be addressed before development starts
    • Would like to see the article search results page next
  • Stéphane
    • Make the update button more obvious
    • Detail page: It makes sense to show alternative versions of a file on the detail page (Intro only, Text, Text + Images, Audio)

2018-05-22 | Weekly Call

  • Last week was all about updating/optimizing concept/design according to your feedback two weeks ago

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

  • Next up:

    • Kiwix Icon for Windows
    • Kiwix iOS feedback
    • Design Feedback from the WMF design team
    • Settings
    • In page search

  • Mathieu:

    • Latest Update in the center

  • Emmanuel:

    • Menu
    • Sharing
    • Full Screen
    • Night Mode

  • Meeting next Monday

2018-05-20 | Design Update

Hi everyone, here’s the promised update for this week!

Changelog

  • Library
    • Removed functionality to switch the view in the library (list view | grid view). The focus should be on a default view in the MVP and done right. Emmanuel, Mathieu and Robin agreed to this. Visuals and concept paper have been updated accordingly. However, the list view has been added to the „Future / Feature ideas“ section.
    • Changed offline content button style from black to the already existing blue (#36c) for consistency. After discussions with Kiwix, labeling it differently (Download / Open) is enough distinction, different colors would only confuse
    • 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.
    • Download/updating library items
      • Added a more sophisticated download/update indicator that features the current download speed and progress in library items and the detail page.
      • Clicking the update button on a library item in 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“)
  • Reading lists
    • Reading lists now feature the content’s source favicon to improve recognition value and scannability
    • Iconography has been updated to match the metaphor of reading lists (previously bookmarks)
    • Articles can be added the same way to the reading lists as bookmarks before (via address bar after loading a page)
    • 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
  • Table of contents
    • Table of contents is now accessible via toolbar with one click
  • Notes about the sidebar (and icon)
    • Both reading lists and table of contents are still 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.
    • Though it’s questionable to leave it there in it’s current state since we only have two features that are using (reading list / TOC). Up for discussion @team!

Visuals and concept document have been adapted to mirror the changes mentioned above.

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

One more thing: I’ll be back in Zurich for a month from next week on until the end of June.

As always, feedback is much appreciated. Maybe best in this email thread to have it all in one place?

Cheers, Robin

2018-05-16 | Reading Design Review

Design critique

Feedback

  • Rita:
    • Mentions double heading in detail page (logo and title)
    • Move „Media type“ meta information higher up to make it more distinctive from similar content (e.g. Wikipedia with images, Wikipedia without images)
    • Make it possible to switch to related variants of a ZIM file from the detail page
    • Also, list different languages of the same file
    • Mentions the Wikipedia Android app which has a setting to download only when in WiFi
  • Carolyn
  • Nirzar
    • Filled tile / empty tile to indicate that an item is in the library, currently the distinction is not clear enough
    • Mentions possible problems for the library tile view as a default:
      • Hard to scan
      • Uses a lot of space
    • Suggests to explore a list/table view that features an accordion to reveal details below an entry

2018-05-18 | Weekly Call

  • Still finding solutions for the feedback we’ve discussed last week, so I haven’t sent out a design update last week
  • Concept paper is up to date: https://github.com/kiwix/kiwix-desktop/wiki/Kiwix-Desktop-2-Design-Concept, all the things to work on are there
  • Questions
    • Should it be possible to link to a ZIM detail page?
      • Emmanuel:
        • Mentions the server feature, where a URL can be shared
        • Todo (Robin): Think about ways to make this feature more user friendly, a share link the toolbar? Article related links?
      • Mathieu: Stop sharing should also be considered in the concept
    • Are updates incremental or a complete new file?
      • Emmanuel/Mathieu: Updates are not incremental, it’s a new version of the file
    • Should the Kiwix allow, or make it possible to have two versions of one file in your library?
      • Emmanuel/Mathieu: It should be possible to have two versions, but the main use case is to only show the most recent file and delete the old one once it’s downloaded. Comment from Robin: notification system once a file is downloaded and dialog what to do with the old file.
    • Todo (Robin): Design Kiwix app icon (Windows)

2018-05-09 | Reading Design Review

Updates

Design Critique

  • Rita:

    • Sidebar
      • Separate reading lists and TOC functionality
      • Reading lists as a side panel that overlays content, It’s likely to be closed after usage, or maybe auto close it after a link has been s
      • Table of contents as side panel that pushes content aside in a responsive way. Mentions the app „Overdrive“ as an example.
    • Library
      • Terminology: Instead of the label „Update“, use „Newer version available“
      • What happens to the old file when the update has been done? After discussing this in the call it’d probably makes sense to incorporate this into the app’s notification system. This could be done e.g. in the form of a dialog that notifies users once the update has been downloaded. It’ll then ask users if they’d like to keep the old file or not.
      • Further ressources

  • Carolyn:

    • TOC / Search
      • Suggests to connect search and table of contents. E.g. when an in page search is being performed, the table of contents will also highlight where in the page that result is listed.
    • Mentions the app „Test Flight“ as an example for release notes and different builds
    • Questions the camera icon and suggests to go with iconography for an (frame with mountains) than a camera. Robin comments: we’ll probably get rid of the icon completely and use a different pattern to download multiple versions of a ZIM file

2018-05-08 | Weekly Call

  • Updated Design Journal with notes from the meeting yesterday with Emmanuel and Mathieu
  • This week:
    • Will update concept / screens according to what we’ve discussed yesterday
    • Going to work on settings and menu this week
    • Leave Feedback for iOS app
    • Contract from Fred

2018-05-07 | Design Feedback Call with Emmanuel and Mathieu

Mathieu: - Library Feedback: - Filter for downloading ZIM - Enough distinction with 2 buttons (change of color probably not necessary, +1 by Emmanuel)

Emmanuel:

  • Mentions that the design should work with right to left languages (Robin: this is considered in the designs)
  • About opening a book: use the existing tab if there’s one open
  • Concern about updating books: Users currently have limited details about the update, suggests to add link for more info
    • Mentions a card switch (Robin: Release notes?)
    • There are different updates (versions) available for one ZIM file, let users choose which one they want to download
    • Introduce a filter for cloud and local books?
  • Download button:
    • Version with images / without images, the iconography (camera) won’t be needed anymore with a pattern like this
    • At time when you download, choose the download with or without images
  • About extensions:
    • More articles available
    • It probably won’t be implemented in this version
  • More (meta information) indicator:
    • Update and size are most important
    • People want to know more about the file than „just“ the infos accessible with the dots (slider)
    • Is not quite convinced about the dots
    • The interface must have a way to get more details (Mathieu: combine different update infos with these details)
    • Also mentions the possibility to add screenshots (as e.g. in an app store)
    • Lightbox / Overlay
  • Suggest to rethink sidebar since the table of contents is heavily in use and needs to be accessible with one click
    • Reading list
      • Suggests to add the favicon (logos) of the content source as well
      • Case: Link has been added to reading list, but content is not available anymore (Robin will think about this)
  • Work on settings menu (next on the menu for Robin)
  • Emmanuel asks for feedback for the iOS app on Github (Robin will do that this week)

2018-04-27 | Design Update

Hi everyone

Here’s the weekly Kiwix Desktop 2 Design Update. I’ve been intensively working on the library concept and visualization of it. All screens on InVision are up to date. These are the main parts I’ve set the focus on:

  • How to navigate to, browse and search the library
  • Download and open books
  • Updating / extending books
  • Book item information architecture

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 always open as a first tab but can be dragged and dropped 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
    • All Languages: After choosing a language (or multiple languages), the book results view gets updated and only shows results from the selected languages
    • All Categories: Similar to the iOS app: Content can be sorted by category, e.g. Wikipedia, Wikivoyage, Wikibooks, etc., multiple categories can be set here

  • Display options:

    • Grid view (default) and list view: Lets users switch the view (list view not designed yet, see question below)
    • Sort By: Lets users sort by name, size and release date

  • Todo (Robin): Design of the language and category 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.

  • 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.

  • Question @Team: What would best fit as a default view once the Kiwix Library has been accessed (Newest book? A-Z? Curated content à la app store (e.g. with a featured section)
> Emmanuel: OS language should be detected, if not language selection set. Otherwise I would put the most popular one... but we do not have these numbers server side. So, I would said alphabetically... it is not good, but I have nothing better.

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

  • Books can be downloaded by clicking the blue download button
  • Once clicked, this button appearance changes to display the download process in percentage (64%) and a loading indicator (spinner)
  • To also indicate that a book is currently downloaded, an icon with the 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
  • Once a book is downloaded, the blue button changes to a black „Open“ button and a secondary call to action (CTA) is added („Remove“). Both elements indicate that the book is now available offline in the local library
  • „Remove“ will remove the book again from the local library
  • „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

  • The update indicator works similar to the „Download“ functionality explained in „Download and open books“: once clicked, the button appearance changes to display status of the update. Also, the app’s toolbar displays the current status of the download.

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

  • Todo (Robin): Design a notification system (native notifications on Windows or Linux?) for the user that informs about a finished download? 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?

  • 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)

Book item information architecture (InVision Screen # 21-23)

  • A slider element indicated with three dots is located below the most important meta details of a book (File Size, Article Count, Latest Update)

  • A click on one of the inactive dots reveals more details (Indexed, Media Count, Creator, Publisher, ID)

  • The camera icon on the top left of a book item indicates that the book contains imagery.

  • Question @Team: It’s currently foreseen that the indicator on the top left only indicates if a book contains pictures. Should we add an indicator, e.g. for other media (video/audio) as well there? A possible solution is also to use a general icon for media, which indicates that the book contains imagery, audio or video

  • Question @Team: Do you agree with the current prioritization of the meta infos of a book or would you suggest another order here? Also appreciate any general feedback about a book item.

Please leave feedback in this email thread or comment on the screens directly on InVision. There’s still a lot to discuss and do from a design perspective but we’re on a good way.

Btw., I’ve also updated the concept document on Github. Looking forward to talk about it on Monday, 07.05.18 18:30-19:00.

As a reminder, I’ll be on vacation next week (W18), but if you consider something a blocker for development, feel free to reach out, it’s no problem.

Thanks, Robin

2018-04-25 | Reading Design Review

Updates

Design critique

Kiwix Library Terminology and Iconography

  • Est. time required: 10 min
  • Type of work being shared: In-process mocks
  • Goal(s) of critique:  Get suggestions for a fitting term and icon
  • Comments/Notes: 
    • Link: https://wikimedia.invisionapp.com/share/78HIF7STPCQ
    • Pau: Library terminology and icon option is ok, but a single book is not representative as a library
    • Carolyn: Concerned that the Kiwix icon is a bit too complex scaled at that size
    • Alex:
      • Suggests „Explore“, „Compass“ (Carolyn +1), „Browse“, „Store“
      • Use Kiwix logo as home icon/button?
      • Filter Feedback: „All | Local“ instead of „All“ | „Online“ | „Local“
    • Rita: Library icon could be a bit more "library style", have a look at Firefox library icon

2018-04-24 | Weekly Call

2018-04-20 | Design

Done

  • Stars/Favorites: Changed favorites treatment so it works well together with having a filter on the right side. Favorite stars appear if an article has been loaded and replace the search icon in the address bar
  • Grouped search suggestions: I updated the search dropdown with grouped search suggestions. One is "Kiwix search" and the other "Favorites and History". Naming / labeling of favorites to be discussed. We’ve talked about incorporating a reading list in our dedicated design meeting last week. Bookmarks / reading lists will be treated at a later stage since it’s not defined as priority.
  • Book Filtering and Iconography: I changed filter pattern according to design review feedback with the foundation. Changed it because active filters would be hard to indicate with the previous pattern + it’s a secondary action.
  • Updated the InVision Prototype link and screens to match the changes mentioned above
  • Created Kiwix Desktop 2 Design Concept and Kiwix Desktop 2 Design Journal on Github document to be fully transparent about the design process

Up Next

  • Library and Download of Books
  • Search result page
  • Settings
  • Toolbar (Full Screen Mode etc.)
  • Table of Contents Treatment

2018-04-18

WMF Design Review

  • Check what’s been presented in the Reading Design Review on Etherpad
  • Notes from Design Feedback:
    • Rita: Filter after search, mentions filtering on Foursquare, which indicates Filter functionality
    • Alex: If a filter’s been set, a possible pattern is to show hidden search results in the search dropdown after the search results within a book
    • Nirzar: Showed a draft of filtering on the right of the search which shows number of active filters (1 | Filter)

2018-03-20

Open Questions to Emmanuel / Matthieu

What is the vision (mission statement) of Kiwix for the next few years? What is planned in regards to the app portfolio? Which features are in the pipeline? Would be valuable information to consider while designing the „new generation“ of Kiwix Windows apps.

  • Increase available content and quality that can be used with Kiwix. Today, there are 2’000 ZIM files available, in a year, there will be 10’000.
  • In terms of content, there will be topic specific ZIM files available (e.g. for math or chemistry)
  • For the next 18 months, a key goal is to optimize user experience in all Kiwix apps
  • Wikipedia is of high priority to Kiwix. The goal is to split Wikipedia’s ZIM file content into smaller parts
  • Another thing to mention is the dynamic of the MediaWiki platform and collaborate with Wikis that use the open source software.
  • Incorporate the possibility to incorporate ZIM extensions and updates. ZIM extensions allow to add content to existing ZIM files. ZIM updates allow to update content in existing ZIM files
    • @kelson42 and @mgautierfr are going to clarify if the technology is available or not.

Is there a use case for readers that switch devices? E.g. look up an article on Desktop then continue to read on Mobile? Any plans to incorporate a sync service that checks which libraries have been downloaded on a platform? (or would it not comply with Kiwix’s whole „offline philosophy“?)

No there’s no plan to incorporate syncing in the near future.

Do you have any specific new features in mind for Desktop V2? Or feedback requests from users that stand out? (related: Emmanuel’s user feedbacks)

  • Adding the Table of Contents (TOC) to the ZIM file by adding JS API. Currently it’s not possible to see the TOC of a ZIM file on Desktop. It’s a side panel on iOS and Android.
  • Emmanuel is going to list the most important feature requests for Kiwix Desktop 2 on the Github Features Wiki
  • As documented in the Kiwix 2 Desktop Brainstorming: Open links in the default browser should be fixed as well (more of a bug fix than a feature)

Is it possible to load mobile styles when viewport size is below a certain width? E.g. for Wikipedia. Noticed that it’s using Desktop styles. Not sure if this is a path we want to go down though since apps should be responsive by design.

Are there specific constraints with Qt you already know about upfront? From the first glance at the link Emmanuel provided today it seems like a lot is possible!

What typefaces can we use for the Windows / Linux app? Can we include an (open source) typeface in the installer or do we have to rely on a system font?

Do we have existing Kiwix style conventions that need to be considered?

Do we have stats, analytics for Kiwix apps on different platforms? (downloads/installs per platform, daily active users, session duration, etc.)

About existing resources, is there an icon library from iOS or Android that could be reused for the Windows app? No newline at end of file

Clone this wiki locally