Due to delays earlier on in the year, the project timeline has shifted. To compensate for this delay, I have decided to carry out user testing by the completed pages with users that are familiar with the project and are knowledgeable in this area too. This gives be key inputs on the design and implementation while I am also in development of the project.
The first page was shown to two colleagues who are familiar with the idea behind the project. With experience in Web Development, they provided significant insights that directly improves the user experience or performance of the site.
One of my colleagues, Jurrell, saw the symbol animation above and suggested the use of CSS pseudo-elements (::before, ::after) rather than simply adding a space between the symbol and the text. With the use of pseudo-elements, I was able to add a significantly nice looking animation, that doesn't adjust the position of the rest of the row. This method even proved to be easier once understood and a valuable learning experience, and I continued the use of pseudo-elements throughout the project.
My other colleague, Shane, added to this point and shared a youtube tutorial he saw a few weeks prior by Kevin Powell, which explained how we can animate the underlining of a link element on a page. This is a very useful suggestion as it brings more focus to the visual change when hovering over a link, making the point more obvious.
Shane also suggested that I should look into:
@media (hover){ }
Which I found out checks to see if a device actually has hover capabilities, and decides to execute the code within, depending on whether it's a touchscreen or not. This has proven to be quite useful with certain elements that have a complex hover animation and I want them to just be show on the mobile with no hassle.
