Existential
Desktop
15.4″ Macbook Pro (2880 x 1800)/Mac Sierra V10.12.4
Firefox Quantum 58.0.2 (64-bit)
Safari Version 10.1
iPad Wi-Fi 9.7″ (2048×1536) iOS11
- The parallax sections do not function correctly. Instead, they are static images split into sections.
- Using Samsung Internet, there is an integrated back-to-top button which interferes with the back-to-top button featured on my website. As a potential improvement, I would run a script to detect the browser it is running on and remove the button if it detects Samsung Internet.
- The associated charities slider works considerably lesser then on desktop. When manually dragged across, the motion is glitchy and does not roll along smoothly. I would like to add left and right buttons to help to view these logos easier.
Performance
I have conducted six different tests to test load times on 3 different pages. I have included the two Chrome presets (Slow 3G and Fast 3G), three presets from our internal Web Deployment Record taken from Ofcom.org.uk (average broadband, average 3g and average 4g) and the WiFi provided at our university. I have disabled the cache for each test.
Homepage
Chrome Slow 3G
Behaviour
- Were requested pages easy and intuitive to find?
- Do you have any comments on the aesthetic design?
- What do you think of the colour scheme? Do you think it suits the ethos of the charity?
I also asked them to look at the pages where I had included plug-ins. The plug-ins I had installed at the time were:
- Contact Form
- NextGen Gallery
- Team Members
- Business Hours Indicator
These are the test results:
Whilst on a current page, were you able to find the next page you wanted to be on easy enough?
Compared to your last prototype, it’s definitely an improvement. It’s great that links are organised within appropriate categories, so you get bonus points and cookies for that.
Do you have any comments on the aesthetic design?
The aesthetic design is good and I’m happy with it, however, I have my own way of interpreting design so I won’t go into too much detail. There are only 1 or 2 minor design issues. The caterpillar-like buttons on the homepage parallaxes need a little more floating space and they will be fine. Personally, I would make the navigation bar white and the links green.
What do you think of the colour scheme? Do you think it suits the ethos of the charity?
The colour scheme isn’t a problem, and I do think it suits the charity.
Plugins:
Contact Form 7 – The main text box becomes buggy when inputting text when Grammarly is installed. (The test was performed on my laptop and I use Grammarly in my Firefox browser).
NextGEN Gallery – Good
Team Members – Good
Business Hours Indicator – Good
Whilst on a current page, were you able to find the next page you wanted to be on easy enough?
Generally yes, using the new menu with the drop-down links, it’s easy enough to find commonly-accessed pages but a lot of the pages have links to other pages which I don’t think are always in the menu system, meaning that sometimes I felt a bit ‘lost’ on the site – but the menu is always present so it’s easy to go back to home or another page.
Do you have any comments on the aesthetic design?
I love the leaf image on the homepage, the text is easy to read and the design is nice and fluid. It looks modern. There are a few pages that could do with more images or centre aligned elements, like the volunteer page and the literature page. Align text to the left and see how that looks. It could be easier to read compared to centre aligned.
What do you think of the colour scheme? Do you think it suits the ethos of the charity?
Overall, I feel that the sire manages to take colour inspiration from the previous/existing site that they have but it looks so much better! The colour fit the brand.
Plugins:
Contact Form 7 – Try a different one that can have more horizontal fields.
NextGEN Gallery – Include artist and piece names. Have a look and see if there is a slideshow plugin that can handle the aspect ratios more efficiently.
Team Members – Looks good but try to get the same amount of text for each team member so that the boxes are evenly spaced. Either that or add some line breaks to the ones with less information to force the boxes bigger.
Business Hours Indicator – Great feature. Quite unusual but maybe try a different font to the Courier CSS preset but try to keep the uniqueness.
Whilst on a current page, were you able to find the next page you wanted to be on easy enough?
Yes, the pages were very easy to navigate and find what I wanted.
Do you have any comments on the aesthetic design?
Add a margin underneath the buttons in the parallax sections on the homepage. Keep the back-to-top button in a fixed place. Block quotes need to include their own quotes from the WordPress layout.
What do you think of the colour scheme? Do you think it suits the ethos of the charity?
Yes, the colours feel pure and earthy. It fits their goals extremely well, good job!
Plugins:
Contact Form 7 – E-mail messages went through to Naomi’s student e-mail address (which is the correct, assigned destination). Both messages sent from real and fake accounts come through as well but the user did click ‘Yes’ to Recaptcha. No Recaptcha on the Volunteer form.
NextGEN Gallery – Gallery is aligned left and makes the centre aligned title look out of place. The bottom image should be centralised if there are less and 4.
Team Members – Boxes should all be the same size.
Business Hours Indicator – Within the top parallax there should be an opening times button which links to a full menu of opening times. This could be integrated using a .toggle jQuery function.
Whilst on a current page, were you able to find the next page you wanted to be on easy enough?
Yes. Everything was easy enough to find and the only problem I encountered was with the donate button. The home button is also linked to a wrong version of the homepage.
Do you have any comments on the aesthetic design?
Parallax was a good choice. Display images, background image and overall theme are suitable. The typeface of the opening times on the top parallax looks out of place as it is completely different from the rest of the website. You need to make a decision about whether to left align or centre align text. Margin needs to be added to the bottom of the text box in the top parallax.
What do you think of the colour scheme? Do you think it suits the ethos of the charity?
Works well with the look and feel fo the whole website.
Plugins:
Contact Form 7 – E-mail was sent through to Naomi’s student e-mail address which ensures functionality.
NextGEN Gallery – The left aligned art gallery looks out of place with the centre aligned title.
Team Members – Add read-more option to expand the additional text.
Business Hours Indicator – Typeface of the notification element in the top parallax (and footer) should be the same as rest of the website.
Whilst on a current page, were you able to find the next page you wanted to be on easy enough?
The navigation system is good. Information wasn’t presented in an easy-to-consume way.
Do you have any comments on the aesthetic design?
Include more images because there is a lot of text. The meaning of the website is unclear. Place a down button at the bottom of the top parallax section to show there is more.
What do you think of the colour scheme? Do you think it suits the ethos of the charity?
I think it is well adapted to an older user group.
Plugins:
Contact Form 7 – E-mail was sent and delivered to Naomi’s student e-mail address as predicted.
NextGEN Gallery – Good
Team Members – Visual design is nice. This is a good example of easy-to-consume information.
Business Hours Indicator – Good
Thematic Analysis
My alpha test has produced a lot of qualitative data, meaning that there is plenty of descriptive improvement suggestions, as opposed to quantitative data which would be mainly numerical. This has stemmed from the open-ended nature of the test and the type of questions I asked. For this reason, I will be using thematic analysis to pick apart my data set. Thematic analysis works by identifying any recurring patterns, or themes, in a set of data collected.
Theme 1: The green buttons featured in the parallax sections on the homepage need padding underneath.
I asked all of my testers to start on the homepage and to navigate their way around from there. A majority commented on the green caterpillar/leaf buttons featured in the ‘Welcome to The Greenhouse Trust’ and ‘The eARTh Project’ parallaxes.
They commented that the button looked out of place being so close to the bottom of the text box. As an improvement, the testers that commented this, suggested that I add padding to the bottom of the white text box. This will make it look more like a button and fit in with the box better. There are two ways in which I could go about resolving this:
Solution 1: Bring the button out of the box entirely so it is it’s own element.
Solution 2: Add extra padding to the bottom of the white box as suggested by my testers.
Theme 2: Centre or left aligned text?
Throughout my website, I left some text centre aligned and others left aligned. I wanted to see whether my testers preferred one or the other, but it just ended up construed as confusing. I had testers land on pages and instead of the desired comment “Ooh, this looks a lot better!”, I received a lot of “Oh, what? Why?”. Upon questioning them for their opinion, it came to light that the majority had no preference and just wanted it to be consistent. I will be left aligning all main bodies of text throughout my website whereas titles and subtitles will remain centre aligned.
Theme 3: NextGEN Gallery is left aligned but the page title (as per every page) is centre aligned.
Another alignment issue was detected when I asked the users to look through the various plug-ins I had installed. The NextGEN Gallery is featured on the ‘Art’ page and showcases a handful of artwork from local artists which is also featured, in real-life, in the gallery above the café shop floor. The online gallery is aligned to the left, whereas the title text is centre aligned. Unfortunately, I’m not sure if I can change the alignment of the gallery plug-in on the page and this might be a case of hacking into the HTML of the page (if I can find a plug-in which is capable of doing so). If this can’t be done, I may look into a nicer gallery plug-in with greater alignment capabilities.
Another potential improvement, that one of the testers mentioned, was to centre align the last image featured as they are displayed in rows of 4. Someone else mentioned this as well but quickly followed with the idea that it may look out of place in the middle. This confirms my opinion as personally, I am happy to keep the next image looking like it is the start of a next row. Compiled with the fact that only one tester mentioned this, it is not as pressing as other issues.
Theme 4: Team Members information boxes are all different sizes.
- I could edit the <div> class in HTML and assign the same CSS attributes which defines a fixed width and height. This could be applied to all the boxes.
- To avoid hacking into the code and sticking with the plug-in rules, I could keep each description to a two sentence minimum. This could keep the boxes all the same height.
Theme 5: Centre align the Contact Form 7.
The contact form I currently have installed is a fixed width and automatically aligned to the left. Even when I select for the page to be ‘Full Width’ in the WordPress pages editor, it still sticks to the left. I agree with my testers’ comments when the majority of them said that this makes the whole page look messy. I am unsure as to whether I would be able to fix this using HTML and the easiest option may be just to find another contact form plug-in that scales better.
Theme 6: Choose a different typeface for the Business Hours Indicator plug-in.
Almost all of my testers said that they disliked the typeface I had used for the opening times indicator on the homepage. Honestly, this was disappointing because I used this in the hope it would look like an alarm clock and stand out from the rest of the page. Having said this, they did see the latter, therefore I had the right idea but the execution was poor. I will be looking to choose another typeface which differs from the rest of the homepage but not ‘Courier’.
