TESTING.md

Pasta & Vino - Testing

View the live project here

Main README.md file

View website in GitHub Pages

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the Restaurant.

     1. Upon entering the site, users are automatically greeted with a clean and easily readable sticky navigation bar to go to the page of their choice. Underneath, there is a Carousel that immediately shows the main features of the restaurant and on top of it, a link with a catchy phrase that directs to the menu. Click here
     2. The main features are immediately shown with carousel images. Click here
     3. The user has several options: click the link that redirects to the menu, one of the links in the navbar or scroll down, where he will see the main features of the place together with a link to an impressive wine list. Click here

  2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

     1. The site has been designed to be fluid and to never entrap the user. At the top of each page there is a clean navigation bar; each link describes what page they will end up at clearly and change colour when hovering over the link. Click here
     2. At the bottom of each page there is a button that redirects you at the top of the page so that the user does not have to scroll up again, especially on the longer pages and even more if visualised on a small device. Click here
     3. The navigation bar is clearly defined and easily navigable for users to find and use. Click here
     4. The logo image on the top left of each page leads users back to the home page. Click here
     5. The footer menu is easy to use with appropriate icons for easy identification. Click here

  3. As a first time visitor, I want to easily navigate to the restaurant's social links in order to keep up with the latest news and features.

     1. The social media links are located in the footer together with the restaurant's contacts. Click here
     2. Social media links and contacts always adapt responsively in order to be clicked without any difficulty on any device. Click here
     3. The email and phone number in the footer contain a link to facilitate communication with the restaurant. Click here

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find the new features in the menu and the updated list of wines.

     1. These are clearly shown in the menu part and easily accessible via the specific links. Click here
     2. The link will immediately open in a new page a PDF list of wines and beverages with prices and details. Click here

  2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any question I may have.

     1. Contacts are easily visible in every page in the footer. Click here
     2. In the "About us" page there is a form to facilitate communication with the restaurant. Click here
     3. The footer contains links to the relevant social media (Facebook,Youtube, Twitter and Instagram) as well as the organization's email. Click here
     4. The email button is set up to automatically open up your email app and autofill the email address in the "To" section. Click here

  3. As a Returning Visitor, I want to find the social media links so that I can join and interact with others in the community.

     1. The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page. Click here
     2. An interested returning custumer has the chance to immediately click on any link in the footer to be directed to the social medias of the restaurant as much as the Youtube channel. Click here
     3. A little gallery will show interesting images to a customer who wants to show the restaurant to a friend. The menu page has been thought for the same reason other than showing the main dishes of the moment. Click here

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are any newly added features in the menu, wine list or events.

     1. The user would already be comfortable with the website layout and can easily check the menu page. Click here

  2. As a Frequent User, I want to check to see if there is any news related to the restaurant activity.

     1. The user would already be comfortable with the website layout and can easily click the links to the selected pages. Click here

  3. As a Frequent User, I want to sign up to the Newsletter so that I am emailed any major updates and/or changes to the website or organisation.

     1. At the bottom of every page there is a footer with a clickable embedded email address. Click here
     2. In the page "About us" the users can insert their personal details in a form to receive the newsletter and special offers/events. Click here

• Site Owner Goals, Testing

  1. Increasing the overall restaurant reputation and awareness.

     1. Through descriptive images and easy access to social medias.

  2. Give an immediate overview of the place, its main features, products and other important information.

     1. Gallery images, menu cards, embedded video and map abundantly provide that.

  3. Increase percentage of in-store sales made with new imported products and, in the future, also online sales..

     1. The food menu together with the PDF list of wines/spirits provides all the information regarding new products,pricing and variety.

  4. Gain a better understanding of the audience by checking their feedback both via the website and social medias.

     1. Possible via the reviews from ther social medias connected to the restaurant and the form in the page "About Us".

  5. Consequently, increase social mentions and post with regularity in order to keep attention high.

     1. Possible via regular updates of the restaurant features (menu,wine list etc) that connected to the social medias interactions give the owner a trend of its audience.

  6. Allow potential customers to fill out a contact form, sign up for the email list, visit the physical location, or simply give the restaurant a phone call.

     1. Through the form present on the website (at the moment not active), location and contacts given in the footer and an embedded map.

  7. Make the website as accessible as possible.

     1. The simple and instinctive structure of the website allows that, together with the clarifying images.

  8. Use reviews to increase customer satisfaction.

     1. The reviews are part of the improving process; social media interactions are the first indicator of popularity.

User testing

Friends and family members were asked to review the site and documentation to point out any feedback and possible way of improving it. Their helpful advice throughout the process led to many UX changes in order to create a better experience, especially regarding the styling.

It was through this testing that the following changes were made:

• Removing thumbnail from most pictures.
• Centering social media links in the footer instead of floating them to the right.
• Assessing the combinations of colours and the related contrast.
• Fonts choice looking smart and not invasive.
• Improving the overall images quality compared to the initial framework idea.
• Overall balance in the positioning and sizing of images in the pages.

Manual Testing

Common Elements Testing

Manual testing was conducted on the following pages in order to assess responsiveness,funcionality and usability:

• Hovering over the Navbar will trigger hover effect, confirming the link the users are on:

  

• Hovering over Social links will trigger hover effect and clicking on them will open a new tab:

  Social link in the footer:

  

• Clicking on the logo will take you back to the home page or refresh it:

  

• Hovering over "LET US SPOIL YOU" in the pages will trigger hover effect and clicking on them will redirect you to the menu page:

  

• Clicking on wine list link in the Home Page and Menu page will open a pdf list in another tab:

  

• Hovering over any image in the gallery will trigger hover with an ease-in-out effect:

  

Home Page

Manual testing was conducted on the following elements of the Home Page:

• All the elements are responsive (header,footer, carousel,cards,reviews)

• The Navbar turns into a toggler icon in smaller devices

  

Menu Page

Manual testing was conducted on the following elements of the Menu Page:

• All the elements are responsive (header,footer,cards,notices at the end)

• The Navbar turns into a toggler icon in smaller devices

  

Gallery Page

Manual testing was conducted on the following elements of the Gallery Page:

• All the elements are responsive (header,footer,collage,iframes)

• The Navbar turns into a toggler icon in smaller devices

  

About Us Page

Manual testing was conducted on the following elements of the About Us Page:

• All the elements are responsive (header,footer,main images,cards,form)

• The Navbar turns into a toggler icon in smaller devices

  

Automated Testing

Code Validation

The W3C Markup Validator service was used to validate the HTML code used.

Results:

• Home Page

  

• Menu Page

  

• Gallery Page

  

• About us Page

  

The W3C CSS Validator service was used to validate the CSS coded used.

Results:

Browser Validation

• Chrome
• Edge
• Opera
• Firefox

Lighthouse Auditing

• Click here
• All images have been compressed before being loaded.

Wave Web Accessibility Auditing

• Click here
• Wave validation audit of each page.

---