Test and Evaluation | Web Design Project Documentation


This is a series of web development logs for a local meditation group called Mantra Meditation. The series consists of:

  1. User research
  2. Site requirements
  3. Conceptual design
  4. Visual design
  5. Prototype: Constructing and Styling
  6. Prototype: Adding Functionality and Animation
  7. Test and evaluation

This page is documentation for 6. Test and Evaluation.

Link: Prototype

 

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.

 

Problems

COULDN’T LOAD THE PAGE!

 

Solutions

  1. Replaced background video to slideshow for mobiles.
  2. 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.

Ref: Simple Auto-Playing Slideshow

Ref: Play iFrame embedded YouTube Video on click

 

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.

 

Devices

iPhone SE (x2)

iPhone 7 (x1)

Samsung Galaxy S7 (x1)

android (x2) (I for got to keep the phone models)

laptop (x2)

 

Result

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.

 

Expert Review

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.

 

header-background

Fixed header nav

Ref: Jquery – fixed background color change in each section

Ref: api.jquery.com

 

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.

form-validation

Form Validation

 

Outline colour changes as:

  • focus: light green
  • error: red
  • in active/validation true: purple

 

Ref: jQuery focusout() Method

Ref: Trim to remove white space

Ref: Super simple email validation with javascript

 

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.

Original | Click to enlarge

Modified | click to enlarge

 

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.

testimo-quote

testimo-quote

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 “aa@aa.aa”
  • 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.

 

W3Schools Validation

html-validation

HTML Validation

 

CSS Validation

CSS Validation


About Aiko Ohakoda

I'm a graphic designer and front-end developer. Love kawaii stuff and yummy cakes. Can't live without coffee or soy sauce.