Is it me, or does the Oem user guide look very fragmented?
I haven’t visited for a while, but found the number of links and bullets bewildering, and must be overpowering for site visitors.
My vision of website design is to lead visitors down a path, rather than reveal everything on one page.
I may be in the minority here guy’s, but I think that this could (should) be so much better…
Paul
Hi Paul,
Thanks for the feedback. IMHO I think the User Guide is rather good, certainly significantly better (for the first time user) than what we had before… Although I am biased, since I made it 
I’m aways happy to receive feedback for improvement ideas. Have you got an idea how we could improve things?
The general idea is the user works their way through the guide following the list of topics on the RHS bar. The topics graudaully get more technical. The guide is also searchable and there are some application specefic secitons e.g. Solar PV monitoring and a section on ‘integrations’ e.g. nodeRED etc.
What do other people think?
The guide is fully open-source on github, just click the edit-on-github link on the top right of each page if you would like to propose a change
Thanks Glyn, I’m pleased you haven’t blocked me from the forum!
The two things which stand out to me, and again this is my personal opinion…
I can’t understand why there is a site map on every page, even on the landing page, why isn’t it on it’s own page, and linked across?
IMO the landing page should really be your shop window, to market what your product is and does, but to include the 30 + links there makes the site look overly complicated. It’s like cramming everything into just one page, instead of visitors following a logical path through the site.
I can’t think of any other contemporary site which presents it’s information like this (although I’m sure there will be some!). This used to be done many years ago for SEO reasons, but of course it’s not necessary now.
I know I’ve mentioned it before, but the intrusive orange nav square bottom left, again detracts from the theme. I’m sure there is a better way of navigating to the other sub-domains.
Paul
…also, you could improve the website performance by resizing some of the images, many of which are much larger than needed and are slowing down page loading time (noticeable on poor/mobile connections).
On the home page alone, the following images are resized in HTML/CSS. as follows;
https://guide.openenergymonitor.org/images/frontpageimages/emonpi-overview.png is resized in HTML or CSS from 931x518 (378KB) to 437x243 (121KB).
https://guide.openenergymonitor.org/images/frontpageimages/sustainable-energy.png is resized in HTML or CSS from 939x523 (357KB) to 437x243 (123KB).
https://guide.openenergymonitor.org/images/frontpageimages/solarpvcoverimage.png is resized in HTML or CSS from 400x250 (92KB) to 285x178 (57KB).
https://guide.openenergymonitor.org/images/frontpageimages/homeenergycoverimage.png is resized in HTML or CSS from 400x250 (77KB) to 285x178 (48KB).
So by resizing the images as above, it would save 555KB in loading the home page alone.
I’ve attached some resized images if you wish to use them - oem_images.zip (347.9 KB)
It may be worthwhile increasing the browser cache expiration time in Cloudflare to something like 8 days (The oem site images/css/etc doesn’t change much). Currently, I think that you have caching set at 4hrs, which means that visitor browser’s need to re-cache images/etc despite them not being changed.
Cloudflare>Caching>Browser Cache Expiration
Paul
Agree with Paul on that point.
I did some research on common web page mistakes. One of the recommendations was:
Each page should have a link back to the “home” page. In this instance “home” would be the OEM Guide table of contents, starting page, etc.
A side-benefit of a link to the home page, as opposed to all of the links on each page is the elimination of another common web page “mistake” i.e. pages that are too busy, or, in other words, cluttered.
Ref: 10 Common Web Design Mistakes (Blunders) - Hongkiat
From the page in the link just above this line:
Remember, if users can’t find what they want in less than 3 clicks, most will leave immediately.
Here’s a couple more articles about common website mistakes to avoid:
https://www.incore.com/blog/30-most-common-business-website-mistakes/
For a long time, I’ve thought that the website has “grown organically” and is in dire need of an overhaul. I’d like to give it some considered thought and throw in my two penn’orth next week when I’m back at home.
[OK, thanks for the edit, Eric - I was writing that while updating another machine from Ubuntu 14.04 to 16.04. Dual tasking is not a strong point.]
Probably worth sharing: I had a few thoughts about how to improve the guide a while back, notably the site map/navigation. I based the design on the look of the forum (not for any aesthetic reason, simply because it seemed pragmatic). The current site is built with Jekyll and I had problems integrating my ideas at the time.
I’ve made a rough example of what I came up with at https://slyremarks.github.io. Note: Only looks good on smaller screens/windows (look for the burger when minimizing) since I started from that end and didn’t finish the design.
I think that you are missing my point.
I’ll be home this evening and will draft a rough example to try and illustrate my point, which may help.
Paul
This is quite a common way to structure a user guide documentation site. I based my design for the User Guide on the Read The Docs style of documentation where there is a list of all the pages of the site in the side-bar so the user knows exactly where they are on the site and how far they are from the guide at any given time. Examples which use read the docs:
Even though I like Read the Docs I choose not to use it I wanted more control and customisation over the whole site to give us the ability to create nice front page
I think the landing page does exactly this quite nicely. Or this is at least what I intendned!
Thanks for the image resizing tips and cloudflare cache. I will make these changees.
Probably not the best example… but I’ve thrown together a quick ‘Hugo’ site to try and illustrate.
Ignore the top bit, but look at the middle section which has the 6 icons (headings as per Gwil’s post above).
Although I haven’t created the links, each of the icons would link to a level #2 page which would in turn expand upon the subject heading, keeping the home page clear of clutter.
See https://digitalnut.co.uk/oem/
The blog is also integral to the theme, and the home page gives snippets of blog content at the bottom.
What I think is a good example of a modern home page is https://buy.thetrackr.co/
It really promotes the product (despite the product being junk!!) It’s easy on the eye, whilst creating a clear image of what the product is/does. There are no obvious hierarchical links further into the site, but then openenergymonitor is a different concept with loads of information to display.
We all have openenergymonitor’s best interest at heart (otherwise we wouldn’t spend so much time here!!) and we all probably have different ideas of how content should be delivered. But this is just something to consider.
Paul
Nice mockup! 
Very much appreciate your help. We have always intended to make a ‘landing-page’ site to replace the OEM.org homepage. I see this ‘landing-page’ being similar to your mockup. We will put some thought into it when Trystan is home.
What web template have you used?
I replaced the guide home page images with the resized ones last night and updated CF cache .
I’ve used ‘hugo-universal-theme’ which has it’s own blog pages within the theme, all linked to the home page which auto updates. It’s also easy to customize, and also accepts Markdown or html.
There are currently a few minor bugs in the code which stop it being deployed in a SSL environment, but I’ve made a git pull request to sort them out.
Yes, the home page ‘PageSpeed’ score has increased from 54% to 93%
Paul
