This is a series of web development logs for a local meditation group called Mantra Meditation. The series consists of:
- User research
- Site requirements
- Conceptual design
- Visual design
- Prototype: Constructing and Styling
- Prototype: Adding Functionality and Animation
- Test and evaluation
This page is documentation for 6. Test and Evaluation.
Testing on my phone
Before the meeting with a client and members of the meditation group, I tested the prototype on my phone, which is Windows phone Nokia Lumia 520. My phone couldn’t load the page since it was too heavy.
The prototype holds a background video and 4-5 YouTube videos which required so much memory.
Background video was replaced with slideshow and YouTube videos were replaced with cover images which trigger on click event to load the video.
COULDN’T LOAD THE PAGE!
- Replaced background video to slideshow for mobiles.
- Replaced YouTube videos to cover images and applied functions: if a user presses a cover image, on click event will be triggered and loads YouTube video.
Testing with Users
Prototype was tested by 6 members of the meditation group, 2 males and 4 females. Age ranges are not clear as I didn’t ask but I assume it is over 30 to mid 50. One of them have some knowledge about HTML/CSS as he maintains his business online. Other members are moderate users of mobile devices such as smartphones, tablets and laptops.
iPhone SE (x2)
iPhone 7 (x1)
Samsung Galaxy S7 (x1)
android (x2) (I for got to keep the phone models)
It worked on all devices.
Small devices with landscape load a background video which might be better to replace with slideshow with appropriate image size (currently image size is portrait friendly).
Overall impression was good and members were very happy with selected fonts and colours. They enjoyed smooth scrolling effect and impressed by background video on laptop.
Prototype was review by a teacher and co-students at presentation. I received some crucial feedback from the teacher.
1. Horizontal Navigation
I was suggested to have a fixed navigation to make it easier for a user to access to other pages.
This is fixed. I also added text “Mantra Meditation Brighton” to the navigation, which has been replaced to “MMB” as the former seemed too long and over dominating.
2. Contact form Validation
Suggestions were given to validate contact form, and I selected to use “focus” method. It validates input value when a user moves away from input field.
Outlines colour change to notify a user if there are errors before submit. Submit button is disabled until all the input fields are completed and validated.
Outline colour changes as:
- focus: light green
- error: red
- in active/validation true: purple
3. Spacing for Header Title
Originally the title had margin on left side, which creates uneven spacing to the other side and looked uncomfortable. I wanted to create larger space on the left side (not by using text-align), but I couldn’t get the effect I wanted, so it became simpler.
4. Adding Quote to Testimonials
Testimonial holds a video and a name of interviewer. I was suggested to add a quote.
It is good idea to have some text that related to the video for better usability.
Ref: CSS content Property
Things need to be Developed
Better Design and Usability for Small Landscape
Some elements are not very user-friendly for a small landscape.
- goto top button is too big
- YouTube videos are too big
- background video might be better as slideshow
Contact Form validation
Validation applied to the form is very simple and have some problems which require further development.
- name can be “a”
- email can be “firstname.lastname@example.org”
- message can be “a”
- need to outfocus all input fields to enable submit button
Prepare for Testing with Users
Previous user testing was run without setting tasks, which seemed not effective to collect data. I should have set tasks and questions.