Product testing a website...

Hey there tech enthusiasts! Welcome to my blog!!

Today we're practicing product testing on a website specifically an HNG website. For those who aren't aware, HNG is a computer science (mostly software) training program that offers a unique opportunity to learn from industry experts and collaborate with talented developers. HNG offers learning and internship benefits separately. Visit this site for more info: https://HNG.tech

On with the program💃🏾💃🏾

Here's the website I 'tested': https://hng.tech/

Here are my reviews:

Overall it's a very good looking website, I love the animations and color combos, they're very appealing 😍

However,

There were a few problems with navigation and colors which I have broken into three groups:

Those that apply to the entire website

Those that apply to the "For Talents" page

Those that apply to the "For Clients" page.

GENERAL REVIEWS

The navigation bar is too large. It restricts movement by limiting space. We can make it so it remains it's current size at the top of the page but reduces when we move up or down the page, that way there's enough room for reading and we still have easy access to the navigation bar.

The scroll bar and scroll up button are hidden under the navigation bar. That restricts navigation on laptops/desktops because some people prefer to scroll by moving the scroll bar up and down. It's easier and faster than pressing the buttons to scroll since not all laptops/desktops have interactive display (touch screen). Even though moving down is easy, moving up isn't.

The scroll bar could be wider so it's easier to select, the scroll buttons could also be made bigger and should show a dark color when selected so the users know it's selected

All buttons should have the basic setting of light colored button-dark colored text-visible border, dark colored button-light colored text! That way they're easier to locate and use😎. It should also apply if the buttons change when hovered on or selected.

Links should have a line underneath when selected or hovered on(and only then so as not to ruin the asthetic of the page, looks matter just as much as functionality) to show that they have been clicked or that the cursor is hovering over them.

FOR TALENTS PAGE

The paragraph:

"HNG is a company with a mission — we work with the very best techies to help them enhance their skills through our HNG internship program and build their network. We also work with clients to find them the best technical talent across the globe",

is written in white font and the background in that area is white so it isn't visible. It's also blocking what I assume to be a button placed there(but could just be part of the animation) so it isn't useful. The above text could be moved down to where the slideshow is on the left hand side so the slideshow passes under it. However I noticed this problem doesn't occur on mobile phones.

I'm not sure if its meant to be that way but above the first image, there's a kind of search bar but it's not interactive, same with the bookmark tag on the "Unlock your Tech potential" images at the bottom of the page🤷🏾‍♀️

Under Frequently Asked Question 3, sentence 2: It's supposed to be "you're" not "you re", though that's more of a grammatical error.

In showing what HNG has to offer, it's better to place the navigation buttons beside the images rather than above them(it?) so we don't have to scroll up and down because we want to see the full picture and navigate at the same time.

FOR CLIENTS PAGE

Under "why HNG" in the field client's page, the forward button is not visible at all, not even the border outline, it only shows when hovering over it with a cursor. Both navigation buttons don't show when on the middle slides, the color used is too close in hue to the background color so I'd resort to the light colored-dark button, dark colored -light button rule

Under "No Limit No Boundaries", part of step 3's text is blocked by Step 4. Step 3's text could be more centered to avoid this.

The second "Hire talents" button should darken when the cursor hovers over it.

That's all I've got so far. Feel free to share any I may have missed and other approaches you'd take to solve these issues.

Stay curious! Keep Coding 😉

Bye👋🏾💃🏾💃🏾

Refer to these sites for HNG info:

https://hng.tech/internship

https://hng.tech/hire

https://hng.tech/premium