Web page(s) redesign

[Igor]

Upcoming week I am having an initial meeting with WEB/UX redesigners, which should focus on overall navigation, entry, download ... The quick Armbian intro video is also in the making process by somebody else - to replace those 4 images on the entry page.

I know we already talked about those problems, some issues were resolved, some not. Since ideas are scattered around many topics I am opening a new one.

 

Roughly:

 

1. Navigation: unified on all pages. 
2. Entry page: rework + intro video
3. Download selection: search on devices must be somehow implemented
4. Download board page: rethink and rework
5. Documentation under common theme

Put your ideas under numbers. 

1. I think that ...

2. ...

[zador.blood.stained]

I think that download pages and device list pages should be redesigned and we should take some popular websites as examples for the layout.

1. For download pages we could have a device picture on the left, stuff like download buttons to the right of that picture and other stuff below that (i.e. Aliexpress product page, Amazon product page).

2. For the device list pages we could have a list layout - one device in a row, picture to the left, name and short description to the right (i.e. Youtube channel videos list page in the old design).

 

To clarify - I'm not talking about copying any design features, I'm talking mostly about changing the layout to fit more important info on the page that is visible without scrolling and to improve the UX.

[chwe]

1. Navigation: unified on all pages. 

I think this could easily be achieved when the whole page is maintained with a CMS-System. I don't know how you do it at the moment, but since I maintain some pages with DjangoCMS, I would never go back to not CMS maintained pages. Adding additional pages is a 30 seconds task, they show up in the menu on the right place - it just works.  Since I work mostly with 'standard' bootstrap elements, I can pick them by one click instead of code a single line in HTML.

 

3&4 Download selection: search on devices must be somehow implemented Download board page: rethink and rework

IMOH the download page looks nice but isn't easy to work with. Instead of 3 pages (stable, WIP, Deprecated), we should have one Download page with a better 'search engine' and a status for every board (needs some adjustments to program but would save us a lot of user questions - if I've time I'll do some testings to show what I think how this could look like). 

 

5. Documentation under common theme

As long as we use  MkDocs, I'm not sure how easy it would be to integrate this into a CMS. I like the 'Read the Docs' template for the documentation, not sure if this needs to be unified. 

[zador.blood.stained]

46 minutes ago, chwe said:

As long as we use  MkDocs, I'm not sure how easy it would be to integrate this into a CMS. I like the 'Read the Docs' template for the documentation, not sure if this needs to be unified. 

IMO we can use anything that converts Markdown into a nice looking web page, and a quick Google search suggests that there are several options to do this i.e. for Django.

[Igor]

Back on topic We are talking about redesign, not about changing technology. I don't see much point in that and I also want to keep the task manageable. With "unified on all pages" I mean something far more simple. 

 

Top menu and items in it should always be in the exact same spot. This is HTML/CSS design problem. On www.armbian.com, forum.armbian.com, dl.armbian.com and docs.armbian.com. If you look at http://www.mkdocs.org/ entry page. It should be made exactly this way, only with our top menu and CSS(colors and fonts).

 

Markdown is parsed with this raw php library which is probably used in some fancier CMS products. It works fine and things which do their job fine, I don't have the intention to break apart. I use some other library in the past and had lots of troubles.

 

5 hours ago, zador.blood.stained said:

1. For download pages we could have a device picture on the left, stuff like download buttons to the right of that picture and other stuff below that (i.e. Aliexpress product page, Amazon product page).

2. For the device list pages we could have a list layout - one device in a row, picture to the left, name and short description to the right (i.e. Youtube channel videos list page in the old design).

Good idea. It's definitely better this way from UX perspective.

 

1 hour ago, chwe said:

we should have one Download page with a better 'search engine' and a status for every board

 

Currently, we use Contentview PRO for showing results - check what is possible to do without extra coding, the search is possible to add. I already implement it for testing.

 

[zador.blood.stained]

3 minutes ago, Igor said:

I don't see much point in that and I also want to keep the task manageable.

A CMS is easier to manage (change, extend, add new stuff; and especially when multiple people want to improve things) than the current approach. IMO it has to be considered as an option. And using a premade CMS and just adjusting templates, CSS themes and plugins is IMO a manageable task, I'm not talking about writing tons of PHP/HTML/JS from scratch.

[Igor]

Just now, zador.blood.stained said:

A CMS is easier to manage (change, extend, add new stuff; and especially when multiple people want to improve things) than the current approach.

OK. Let's leave this option on the table.

[Tido]

I also like Zador's idea for the download section.

 

11 hours ago, Igor said:

search on devices must be somehow implemented

This I don't understand. I always click  for SoC and if it were then in alphabetical order, would be fine by me.

H3 rush, is ending. H2, H5 and H6 is coming so the quantity of SBC is to me small enough per SoC, that I do not see the reason for a search.

Unless you see indeed a problem.

 

CMS: I agree that it would help. So Igor could count on the help from the community.

 

Docs: I was wondering if we could have another step in it:

• Documentation
• Tutorials  - for example three lines intro text and a link to this or just a tutorial for xyz. This way it wouldn't get lost in the daily chats.

[zador.blood.stained]

11 hours ago, Igor said:

The quick Armbian intro video is also in the making process by somebody else - to replace those 4 images on the entry page.

Also: video? Why not having slides (JS based) or static images instead or in addition to the video?

 

11 hours ago, Igor said:

• Download selection: search on devices must be somehow implemented

There is an almost universal solution (except for mobile devices) and it's called <Ctrl-F> . Of course it would work best when you have a list layout that mentions SoC and base features instead of the current grid with only name and picture.

[Tido]

40 minutes ago, zador.blood.stained said:

a list layout that mentions SoC and base features instead

http://dietpi.com/#download  sorts it by SBC maker.

Armbian sorts it by SoC (which is smart to me) and some special features.. which are to me an overload and not necessary. Special features like USB3 I am listing if I want to sell a device or am I missing here something ?

[chwe]

1 hour ago, Tido said:

Special features like USB3 I am listing if I want to sell a device or am I missing here something ?

you miss something...  

Example: *random Armbianuser* looks for a new board where he need mSATA or USB3 or *random feature*. Sort by *random feature* and see which board with this feature is supported by armbian... 

 

2 hours ago, zador.blood.stained said:

There is an almost universal solution (except for mobile devices) and it's called <Ctrl-F>

You're right, but <Ctrl-F> is only known by *experienced users*  (sarcasm). I don't think that the download section has to be optimized for mobile devices... 

[TonyMac32]

I think how to categorize the boards is a separate discussion, I'd link it in closely with the matrix of kernel support I've mentioned elsewhere, then that could be searchable via a specific function (like a filter:  "I want a mainline supported USB3 Gb Eth 64-bit quad core")

[tkaiser]

26 minutes ago, chwe said:

*random Armbianuser* looks for a new board where he need mSATA

 

Doesn't work. If I today click on SATA I get a list of boards ranging from crappy USB-SATA (GL830 on Orange Pi Plus 2) over crappy native SATA (Allwinner A20) over mediocre native SATA (i.MX6) to nice USB-SATA (ODROID HC1) while the only devices that feature great native SATA (Clearfogs) are missing.

[Igor]

We already have an option to sort however we like and I don't think that is a problem. We only lack a search function for a random user which doesn't find a board. Mission tag is a bug - I fixed but ... we have mSATA and SATA. Shell we rather merge this for practical reasons?
 

8 hours ago, Tido said:

sorts it by SBC maker

Adding yet another confusion while we have to cut them down. Who - except us - are familiar to board makers?

 

8 hours ago, Tido said:

and some special features.. which are to me an overload and not necessary.

There are too many of them. Reducing this makes this page more usable. But which one to ditch and merge?

 

6 hours ago, TonyMac32 said:

I'd link it in closely with the matrix of kernel support I've mentioned elsewhere

Now we came to database design

[tkaiser]

1 hour ago, Igor said:

we have mSATA and SATA.

 

And both are WRONG! That's the problem. Better no information than misleading/wrong information. Unless this categorization can be edited/reviewed by us (eg. part of board config files) I would really prefer to stop 'advertising' wrong features.

• mSATA: the Hummingboard has no mSATA but mPCIe only, same with the Clearfogs by default: you need to rebuild u-boot and have to freeze the packages to get reliable mSATA/SATA on the mPCIe slot(s)
• SATA: This category is totally worthless if boards with crap SATA like the Orange Pi Plus and Plus 2 are listed here too. People look after SATA since they associate 'fast storage' with this. This is already wrong with those A20 boards but it gets bizarre when we're talking about the crappy GL830. And the only boards with real fast SATA -- not on mSATA slots but M.2 slot with key type B -- are missing here

Again: user perspective. The features listed there should match user expectations (and that's fast storage and not 'technically a SATA port is on the board even if it's crap'). Just another part of the same problem...

[Tido]

I am better in speaking than in writing - so I want to make clear

10 hours ago, Tido said:

Armbian sorts it by SoC (which is smart to me)

@Igor, that says it all .  It also has the option date/name whereas with DATE, which/what date is meant - is a mystery to me = leave away what is not clear.

 

2 hours ago, Igor said:

We already have an option to sort

A couple ! 

Sort:

date, name.

Filter:

Then there are filters for Current, WiP, Depricated, SoC and for features (SATA)

And now I repeat myself:  and some special features.. which are to me an overload and not necessary.

 

8 hours ago, chwe said:

Example: *random Armbianuser* looks for a new board where he need mSATA or USB3

I guess you missed my comment. If you want a recommendation, you go to the Forum.

If you want to download, you go to download.

And if you want a specification - which is only needed at one place in the internet: https://linux-sunxi.org/Xunlong_Orange_Pi_Zero and in detail.

KISS (keep it simple s..)

 

8 hours ago, TonyMac32 said:

I'd link it in closely with the matrix of kernel support

Is this a need or nice to have. The website shall cover the majority of people.

If you try to make everybody happy, you will fail terribly. Beside - how big are the efforts to keep this up to date ?

 

For an example, while doing some tests I came accross this link and for newbies the same 'correct' words are important to see the relation.

It is written: armbian-config utility to switch to beta branch. There is no such thing as beta-branch in the armbian-config Menu.

What I want to say - as it is Now - it is already a lot to cope with to keep the Website and Development in-sync.

 

 

Edited November 27, 2017 by Tido
Filter & Sort

[tkaiser]

10 hours ago, Tido said:

http://dietpi.com/#download  sorts it by SBC maker.

 

Nope, they sort it by popularity or whatever (Pine64 at the top and ROCK64 at the bottom for example) and try to group by board names (eg. putting LeMaker's Banana Pro and SinoVoip's BPi M2+ in one section while both are totally incompatible -- same problem also with NanoPis). Doing so is HIGHLY MISLEADING since not brands are important but the technical base. A NanoPi NEO 2 and a NanoPi M3 are from two different worlds while a NEO 2 and an Orange Pi Zero Plus are almost the same (especially when Armbian is running on them it will be very hard to spot any difference in usage and performance!)

 

If people search on the download page they search for features. If they're absolutely clueless we can't help them anyway. If we want to guide people a little bit we have to stop what we're doing now (focused on technical details) and start to get into the heads of our users (what are they interested in? And are these the correct reasons? Again 'SATA': Not the existence of a small port with 7 pins to connect a SATA cable to is relevant but what users associate with this. And on boards we list as what they consider the label for 'fast storage' they get just insanely slow and broken GL830 USB-SATA crap).

 

Seriously: people looking for the NAS use case click on GbE, click on SATA, check the boards, think 'the more DRAM the better', think 'the more CPU cores the better', weigh some features and end up buying an Orange Pi Plus 2 instead of an ODROID-XU4 (which is magnitudes faster as NAS but is not even considered since users think 'SATA is better than USB3'). What we do here is highly misleading and must stop.

[tkaiser]

Current categories:

• 64-bit: Useless since Orange Pi R1 is listed here. Drop the category if we can't manage to provide correct information!!!
• Wi-Fi: Useless since onboard Wi-Fi is crap on all the boards we support (on some even real crappy) and boards are listed that have no onboard Wi-Fi but mPCIe slots. Yes, it's known that for good Wi-Fi you need to buy another device (either USB or mPCIe) and attach it. So what is this 'selection criteria' for other than spreading misleading information? If we want to help users we would need to explain what onboard Wi-Fi is usable for.
• BT: What is this for? Working BT support or 'chip that could do BT if you use kernel xy and solve the remaining problems yourself'. Useless as criteria if Armbian can't provide full BT support so either it will be this or should be dropped entirely.
• A10: One board nobody is using, let's make pcDuino 2 EOL and get rid of the category
• H2 vs H3: Why? These SoCs are more or less identical and differentiation between makes no sense IMO
• SoC vendors: Is anyone ever searching for this? Almost all boards appear when clicking on Allwinner and with the other vendors it's not much to gain
• mpci: should be mPCIe
• msata: totally wrong
• Notebook: Why? We support only one and people will never search for this since they visit us only since they already own a PineBook and not since they want to inform themselves about 'laptops with good Linux support'
• USB3/SATA: Highly misleading though I have no idea how to solve this other than starting to implement subjective categories like 'fast storage' (A20 and i.MX6 SATA) and 'very fast storage' (USB3 and Marvell SATA)

[Tido]

1 hour ago, tkaiser said:

and try to group by board names (eg. putting LeMaker's Banana Pro and SinoVoip's BPi M2+ in one section

You want to see through the others eyes - dietPi does it fully correct.

If I have bought a Banana Pi --> I search for Banana Pi downloads  STOP  |  Now I look for My Modell  STOP  |  Now I download  IF Available -> done.

 

Armbian sorts it by SoC (which is smart to me)

Both approaches have their use case.

[tkaiser]

3 hours ago, Igor said:

Adding yet another confusion while we have to cut them down. Who - except us - are familiar to board makers?

 

If we would ever start to develop this kind of stuff from the right starting point (the user perspective) we would immediately get that there are two different use cases for the download page:

• pre purchase: user wants to buy a new board based on certain criteria (both hardware and software related, the latter eg. kernel support). Here user expectations and selection criteria are important. From a user perspective it's again not about 'SATA' but 'fast storage' and we do really no good job advertising GL830 boards as 'fast storage' boards (which we DO when looking at the download page from a user and not biased techie perspective)
• post purchase: user holds board in his hands, wants to download the appropriate OS image for his device. In this case filtering for board names -- ODROID, Banana, Orange, Nano -- would be nice (but by switching to 'name based' sort which no one ever does since it's hidden on the page instead of being directly above the individual board links this could already be achieved). And it would also be great if the names on the download page would be the real ones so differentiation is more easy. It's replacing the + sign with the five characters ' Plus' (expect for ODROID C1+ where it's not necessary). There's a huge difference between 'Orange Pi Zero+' and 'Orange Pi Zero Plus' especially with default sort order (date of added support)

As soon as we would switch perspective and ask what's needed from a user perspective and not doing what's ALWAYS WRONG and NEVER WORKS (puzzling together some technical details and make some of them available for whatever reasons in a weird fashion) all these questions would already be obsolete. Seriously the buttons on top are overloaded with confusing stuff and itself ordered in a way that make them totally useless. Eg. there's a button 'm2' (should be 'M.2' instead!) that appears between 'legacy' and 'mainline' due to alphabetical order for no reason. Useless.

 

[zador.blood.stained]

 

1 minute ago, tkaiser said:

pre purchase

Can be partially solved by linking some relevant reviews/articles on the forum from the main armbian.com page ("Selecting a cheap NAS solution", "Selecting a high performance NAS solutopn", "Why it's best to split NAS and router boards, NAS and desktop/multimedia boards").

 

5 minutes ago, tkaiser said:

post purchase

categories could be unified to include both the trademark and vendor name: "Banana Pi/Sinovoip", "Orange Pi/Xunlong", "Odroid/Hardkernel", etc

[tkaiser]

5 minutes ago, Tido said:

If I have bought a Banana Pi --> I search for Banana Pi downloads  STOP  |  Now I look for My Modell  STOP  |  Now I download  IF Available -> done.

 

Why that complicated? As soon as we would start to look at Armbian from the outside (which I doubt will ever happen) it's as easy as this:

We only need to unhide the invisible sort order that's currently hidden in a wall of text and name it appropriately.

 

6 minutes ago, Tido said:

Armbian sorts it by SoC

 

No, Armbian sorts by 'date of support added' by default which is OK since some users monitor the download page for devices becoming ready. But it needs an easy accessible way to switch to name based order. If it's the default make a large enough single clickable line called 'Sort boards by name instead'. If it's sorted by name then let this link read 'Sort boards by date of support added instead'. Problem solved.

[tkaiser]

33 minutes ago, zador.blood.stained said:

categories could be unified to include both the trademark and vendor name: "Banana Pi/Sinovoip", "Orange Pi/Xunlong", "Odroid/Hardkernel", etc

 

IMO it's not necessary to mention vendor names since why? If these filter links would be categorized itself unlike now with alphabetical order something like the following would most probably work (needs UX tests of course):

• Filter by board: Banana Pi, Nano Pi, ODROID, Olimex, Orange Pi, Pine, Others
• Filter by feature: Fast storage, very fast storage, Gigabit Ethernet, video acceleration, M.2/mPCIe, USB3, SPI NOR flash
• Filter by feature: 32-bit, 64-bit, BT, onboard Wi-Fi, A20, A31, A33, A64, H2+/H3, H5, i.MX6, Marvell, Rockchip, Amlogic

[tkaiser]

34 minutes ago, zador.blood.stained said:

Can be partially solved by linking some relevant reviews/articles on the forum from the main armbian.com page ("Selecting a cheap NAS solution", "Selecting a high performance NAS solutopn", "Why it's best to split NAS and router boards, NAS and desktop/multimedia boards").

 

Yes, but not in the usual 'let's throw walls of text on users to ensure they don't read a single sentence' manner but context sensitive. If we would provide filter buttons like

16 minutes ago, tkaiser said:

Filter by feature: Fast storage, very fast storage, Gigabit Ethernet, video acceleration, M.2/mPCIe, USB3, SPI NOR flash

and if it's possible to display then individual headers/footers a mini explanation what 'fast storage' means over the listed devices with links to such relevant articles below the device listing would be IMO an improvement in guiding users in this 'pre purchase' stage. Same with video acceleration quickly explaining legacy vs mainline and that they can forget about browser support. Same with Wi-Fi explaining that onboard Wi-Fi is only usable with basic scenarios. And so on...

[zador.blood.stained]

6 hours ago, tkaiser said:

• Filter by feature: Fast storage, very fast storage, Gigabit Ethernet, video acceleration, M.2/mPCIe, USB3, SPI NOR flash

What is "fast storage" and what is "very fast storage"? For many users underlying HDD/SSD would be the bottleneck for storage related tasks. Also we may talk about onboard storage (eMMC), rootfs storage (SD slot with host controller and voltage switching limitations) and external USB/SATA/NVMe storage.

I don't know about mixing hardware features, software features and features that depend on 3rd party additional hardware.

 

And what is "video acceleration"? We may talk about video decoding, video encoding or GPU acceleration, and for the most devices we don't provide any of these possibilities.

[tkaiser]

1 hour ago, zador.blood.stained said:

What is "fast storage" and what is "very fast storage"?

 

Stuff that can be explained on the page that appears when clicking on it. Same with video.

 

Anyway, I give up and only hope Igor is showing this thread to those UX experts...

[zador.blood.stained]

4 minutes ago, tkaiser said:

Stuff that can be explained on the page that appears when clicking on it. Same with video.

I just wanted to say that using those expressions as filters/tags is misleading.

 

4 minutes ago, tkaiser said:

Anyway, I give up and only hope Igor is showing this thread to those UX folks...

I'm not sure that UX people that are not familiar with SBCs can understand what and why we are discussing some things. So, again, ideally we would need a CMS with visual design being as close as we can get to the current one + enhancements suggested in this thread.

[zador.blood.stained]

Regarding UI/UX problems: one of the current ones is that on a device download page users are presented with multiple download options and it's hard to put a short enough explanation on how to select the right image. Where do we encounter similar stuff? On support/download pages of big vendors (HP, Nvidia, Logitech) and there it is solved with multiple drop-down menus where you have to select several options and you will be presented with some download links as a result.

So we could have drop-down menus (or radio buttons since we have few choices with long descriptions):

 

- Which OS release do you need?

• Debian
• Ubuntu

- Which image type do you need?

• Server/CLI
• Desktop

- Which kernel do you want to use?

• Legacy 3.4.x with limited video decoding and GPU acceleration support
• Mainline 4.x with improved security and performance

and if there is no image wit selected configuration we could display an instructions on how to build an image (possibly with pictures, video, ...)

[chwe]

21 hours ago, tkaiser said:

23 hours ago, zador.blood.stained said:

What is "fast storage" and what is "very fast storage"?

 

Stuff that can be explained on the page that appears when clicking on it. Same with video. 

 

Anyway, I give up and only hope Igor is showing this thread to those UX experts...

 

But then it comes to opinions and the problem with opinions is that everybody has another...  I understand your concerns about 'crappy SATA' implementation shows up and better ways over USB3 doesn't. So, to rethink my suggestion:

 

On 27.11.2017 at 12:52 AM, chwe said:

Example: *random Armbianuser* looks for a new board where he need mSATA or USB3 or *random feature*. Sort by *random feature* and see which board with this feature is supported by armbian... 

4

 

New Suggestion: Don't use the download page to 'educate' users cause there's not enough space to do it properly. IMO the only 'sort feature' beside sort by date/name is the SoC, because we have 54 boards, which is a lot of scrolling when you're there the first time (and use zadors <Ctrl-F> 'life-hack' )...

 

From a noobs perspective:

I go to armbians download page, chose my board and prefer for a *random reason* Debian. So I go to other downloads and cause I'm new to the SBC/Armbian world, I don't understand armbians naming scheme  I can easily end with a debian stretch nightly (instead of a default jessie witch should run without major issues). Couldn't we solve this better?

Ugly 'paint' picture to show how I think this could be achieved... 

Instead of:

Quote

Stable images were tested and they must work apart from known issues and features that were not implemented. Support is provided as far as possible (in general there is no support for 3rd party hardware like DVB tuners and software like Kodi). Please check the documentation and existing forum posts before posting a question.

If you don’t find your board, check other download sections: Work in progress and Deprecated.

 

 

I would prefere to have one download page and set a reminder above the download button on each board where WIP or Deprecated (or maybe don't provide downloads for deprecated boards, so that people wich are interested in images for those boards see clearly that there's no support and that they should build it by their own - if you're not able to follow the instructions to build an own image with armbians build script, IMO you should not work with a deprecated board). This could look like:

 

maybe with an additional CSS rule set the background to red, that people see it as a warning...   

.board-wip {
  background-color: red;
}

 

[Piv Klit]

1. How about a uploader top100 to motivate users to share bandwith with torrents ? and that way limit your bandwith use on your servers ? (if it´s a problem)