UI/UX Design of Website and Wiki

[Mycobee]

Overview

I have been doing some research on other FOSS privacy tool projects, and had a very nice conversation with a person who was on the privacyguides.org team. He pointed out that UX/UI could be improved upon a lot on the main site/wiki, and thinks doing so would have a meaningful impact on usage and interest in Whonix.

I agree with this sentiment, and would like to help.

Ideas

Firstly, I think that many of the stock images and graphics take away a bit from the usability of the site. If you look at grapheneos.org, it has a very simple layout with straightforward “click and install” front and center. I think something like this is a great idea for the Whonix site.

IMO many of the stock images and logos are a bit dated, and a little cheesy. This is not intended to be a dig at anyone who did this work, and the Whonix site is an AMAZING resource. I simply think it could benefit from a bit of tidying up.

Secondly, I am curious how the pages are hosted? The wiki is easy to find, but what about the home page? I think having a singular website repo using a static site generator (jekyll, hugo, etc) would be a good way to standardize the layout and increase maintainability. This would make it easier to focus on documentation and HTML/CSS separately.

Lastly, I think the welcome page in TOR should ask for donations front and center, in the same way that TAILS does. TAILS project kindly requests donations and saying something similar to this “Whonix is entirely free, and relies on user donations. If all users of Whonix gave just $5, we could make a great impact in keeping users free and secure for many years to come.”

Commitment

After I get my CI project running WATS, I am happy to tackle this project, and get the site more concise and clean. My partner is a graphic designer, and I could probably get a little bit of help with some custom/unified graphics on some areas that might need them.

It would be nice as this unfolds to try to discern outdated information and what needs to be archived

Thanks for taking the time to read

[Mycobee]

this probably belongs in the Website category instead of Development, apologies

[Patrick]

Trying to split my replies into different forum threads.

@Mycobee

He pointed out that UX/UI could be improved upon a lot on the main site/wiki,

Do you mean skin / style / CSS or just the specific points you mentioned below (such as illustrative images)?

@Mycobee

If you look at grapheneos.org , it has a very simple layout with straightforward “click and install” front and center. I think something like this is a great idea for the Whonix site.

https://www.whonix.org/ is currently still too difficult? The first slide / section is a very brief introduction into Whonix, the second one contains the various available platforms and Download buttons.

Should there be a download button further up?

@Mycobee

Firstly, I think that many of the stock images and graphics take away a bit from the usability of the site.

@Mycobee

IMO many of the stock images and logos are a bit dated, and a little cheesy.

Answered here just now:

illustrations images wishlist for Whonix

Many stock images such as on lets’s say for example Anonymity Operating System Comparison - Whonix ™ vs Tails vs Tor Browser Bundle (which is this image File:Balance-154516-640.png - Whonix at time of writing) are indeed not very customized. These are more of a stopgap than perfect. But that stopgap could go on for years. Would it be better to have no such thumbnail than a just only good enough one? I think it’s useful to have one that is at least good enough than not having one at all. That is…

@Mycobee

the Whonix site is an AMAZING resource

Glad to hear!

@Mycobee

Secondly, I am curious how the pages are hosted? The wiki is easy to find, but what about the home page?

Answered here just now:

New Qubes Website! New Whonix Website?

Big update on how the homepage is implemented nowadays… The homepage that is whonix.org is nowadays also based on MediaWiki. If you are on https://www.whonix.org/ end press edit (using the supermenu). related: Documentation for Kicksecure ™ Wiki Devs chapter Supermenu and Edit Button in Kicksecure wiki Documentation for Kicksecure ™ Wiki Editors chapter Super Menu in Kicksecure wiki Much details on homepage: Documentation for Kicksecure ™ Wiki Devs chapter Homepage (/wiki/Homepage) in Kick…

@Mycobee

I think having a singular website repo using a static site generator (jekyll, hugo, etc) would be a good way to standardize the layout and increase maintainability.

Do you mean move Whonix from MediaWiki to a different content generator? That would be a gigantic task…

Related:
Dev/About Infrastructure - Kicksecure chapter MediaWiki in Kicksecure wiki

@Mycobee

Lastly, I think the welcome page in TOR should ask for donations front and center, in the same way that TAILS does. TAILS project kindly requests donations and saying something similar to this “Whonix is entirely free, and relies on user donations. If all users of Whonix gave just $5, we could make a great impact in keeping users free and secure for many years to come.”

Will reply here:

Local browser homepage for Tor Browser in Whonix

Will reply soon.

@Mycobee

Commitment

After I get my CI project running WATS, I am happy to tackle this project, and get the site more concise and clean. My partner is a graphic designer, and I could probably get a little bit of help with some custom/unified graphics on some areas that might need them.

It would be nice as this unfolds to try to discern outdated information and what needs to be archived

Sounds great!

[Mycobee]

@Patrick

Do you mean skin / style / CSS or just the specific points you mentioned below (such as illustrative images)?

Both. I think lots of the stock images take away from the meat of the site, and are unnecessary. Personally I think the same thing for the forum categories as well. I think the fewer stock images there are, the more navigable the site is.

I think a clean dark theme is a good idea. The fewer colors the better

I don’t think we “need” stock images when there isn’t an existing graphic. Again, refer to graphene site. It conveys many messagaes effectively without a stock image. For example, The Matrix is a cool movie, but not really needed as an image to say anything about what Whonix offers. I think it takes away from the message of what we are building.

@Patrick

https://www.whonix.org/ is currently still too difficult?

I don’t think it is “too difficult” per se, just that it can be even more streamlined and improved. I think small things give a good impression. Cleanliness is Godliness sort of vibe if ya dig?

A large and clear link that says “Download Now” right under superior internet privacy IMO

IMO these don’t need to be on the homepage, as it is already explained on the download page

@Patrick

Do you mean move Whonix from MediaWiki to a different content generator? That would be a gigantic task…

I didn’t realize we were using a content generator already. I thought it was hand rolled HTML and CSS. My apologies.

That said, if we ever do decide to migrate for some reason, I don’t think it would be too difficult. I think I could do it programmatically with some slick ruby code. Get it done in a couple weeks.

Again, not needed.

[Patrick]

@Mycobee

IMO these don’t need to be on the homepage, as it is already explained on the download page

These are there to avoid any doubt such as “This is for Windows only”, “This is for Linux only”, “cannot be used on USB”.

Download Whonix (FREE) is kinda duplicated but that contains answers to the more advanced usage questions about platform support.

[1] The main issue about the whonix.org homepage has always been that it has been unclear to many users what Whonix is, what it’s advantages are. Basics like this. Several layout and content evolutionary steps have been made in the past if you check out the various versions of the Whonix homepage on web.archive.org.

The current homepage preview image File:Whonix-homepage-main.png - Whonix will soon be replaced by a video link. The image might remain there as a thumbnail but there is going to be a play button to an illustrative animated video (video script) that is currently in production.

@Mycobee

For example, The Matrix is a cool movie, but not really needed as an image to say anything about what Whonix offers. I think it takes away from the message of what we are building.

Do you mean the Whonix homepage chapter security section? I will assume so during my reply.

Also related to [1]. What is the advantages Whonix? Why not use X instead? That is easy to answer for someone with a background in security, anonymity. But for someone who never heard of browser fingerprinting, keystroke deanonymization, time attacks, etc. it’s hard to summarize, contextualize why that matters.

And also low attention spawns nowadays, informational overload […]

@Mycobee

I don’t think we “need” stock images when there isn’t an existing graphic. Again, refer to graphene site. It conveys many messagaes effectively without a stock image.

@Mycobee

I think a clean dark theme is a good idea. The fewer colors the better

I am sure the simpler and or dark mode style will appeal to, be liked more by various specialized communities, among them probably highly technical users, textual learners.

[…] hence I think for most users some eye candy is required. Otherwise in the view of other communities the website is appearing bland, boring, and some other related labels.

This is based on some feedback that I received from non-technical users in real life over the years. Also inspired by some larger, high(er) popularity/usability projects such as https://elementary.io/, https://www.blender.org/, https://puri.sm/, https://www.qubes-os.org/ and others.

related to dark mode: enable wiki dark mode

Disclaimer: I am not saying one style is inherently better or worse. Personally my mind is compatible with both styles, the more simple as well as the more fancy ones.

@Mycobee

I didn’t realize we were using a content generator already. I thought it was hand rolled HTML and CSS.

Oh. That would be pretty much impossible, unmaintainable to have that much content with hand written HTML/CSS. Well, maybe the CSS if it’s always the same but the content, impossible.

Kicksecure / Whonix wiki is only rich of content because it has been open for easy editing with and without account for years. That has attracted countless contributions.

Using MediaWiki. The same software that Wikipedia is using which might be one of the most or the most user content contributed website on the internet in all history. The collaborative / simple editing was the reason why I’ve chosen MediaWiki a decade or so ago.

@Mycobee

My apologies.

No worries, none needed.

@Mycobee

That said, if we ever do decide to migrate for some reason, I don’t think it would be too difficult. I think I could do it programmatically with some slick ruby code. Get it done in a couple weeks.

I think getting the same features (including simplicity of editing, spam prevention) would a a mega task. Even choosing a content generator.

@Mycobee

Again, not needed.

So lucky and glad!

@Mycobee

I don’t think it is “too difficult” per se, just that it can be even more streamlined and improved. I think small things give a good impression. Cleanliness is Godliness sort of vibe if ya dig?

A large and clear link that says “Download Now” right under superior internet privacy IMO

Streamline, improve yes. Well, such as big “Download Now” button would just link to wiki/Download where the user has to choose yet again? That’s 1 click more. That’s why it is as currently implemented.

But something needs to change in near future anyhow. Next year Whonix Windows Installer and Whonix Linux Installer will be ready. For VirtualBox only. So targets where the links go to need to be changed. Windows and Linux can no longer share the same wiki/VirtualBox page. Not sure yet.

Under Whonix ™ for VirtualBox with Xfce chapter 2 Install_VirtualBox in Whonix wiki you can see the “tab controller” (Windows, Mac, Linux, …). Maybe that will be the way to go.