Rate my UI and UX

#webdev #css #showdev #community

Well hello again everyone!

My project, The TinkerTechLab has been slowly improving over the past few months, and I would love some more feedback on the project!

Last time I did this, I got some amazing suggestions and ideas that were implemented in one way or another.

So if you have some extra time (Even if its just 5 seconds), I would love to know your first impression, and any suggestions you may have!

(Oh, and for you dark mode people, that feature is coming soon, so don't worry!)

URL: Tinkertechlab.com
YouTube: The TinkerTechLab - YouTube

Oh, and check out tinkertechlab.com/advertising as well :)

Top comments (7)

Kyle Martin • Jul 8 '22

On mobile it’s not very intuitive. Ads pop up the second it loads in a huge container at the bottom. When you minimize it it blocks the ability to close the cookies and data storage notification. The bright green icons are not a great look and you can’t even click on them on mobile. Most of the day to day web is accessed on mobile devices.

TechMan09 • Jul 9 '22 • Edited

Thanks for the suggestions. The ads on the bottom should be able to be closed completely, at least according to Google.

Maybe you have some adblocker or event blocker, but the lime green share buttons work for me on mobile, although I agree that the colors should be changed (They have been updated, what do you think now?).

Edit, I just removed the share icons on mobile, they don’t really fit. The next UI update will bring a better place for them. You can view the color change in desktop.

Kyle Martin • Jul 10 '22

I don’t have a Adblock on mobile hence why I could see them in the first place, however by moving to the top looks like you fixed the issue which derived from the cookies notification and the ad widget popping up at the same time.

However now you got another issue, the ad widget arrow on mobile blocks your sites icon in the nav. I would center the site name and icon and have a hamburger menu on the right side.

Also between the htaccess and the coming soon sections there’s some weird excess margin on mobile.

Removing the bright green was a good choice. It’s incredibly aggressive on the eyes. Though the dark green seems too, old school. Which isn’t always a bad thing but your site doesn’t have any other old school vibes. I’d use more of a pastel green. Rather than that deep moss camo green.

TechMan09 • Jul 10 '22 • Edited

Actually, the adplacement is managed by Google, and Google being Google, I have absolutely no control over weather the ad is on the top or the bottom. Custom developing a collapsible ad menu is on my To-Do list, but it lacks priority at the moment.

All the weird spaces (Above and below the footer, between some buttons and cards) seems to be caused by a combination of Google Tag Manager and Google Custom Search. This has a much higher priority, and fixing it is mostly trial and error. I was not aware of that particular space though…

Regarding your last point, I seem to have been born without a good sense of color theory. I can tell what looks good and bad (The color of the icons), but am 100% lost when trying to find the correct color. Thanks for the suggestion, I will certainly try it!

EDIT: Yeah, that color looks a lot better, thanks!

Supportic • Jul 7 '22 • Edited

Pretty solid page. Suggestions:

Lighthouse points out that your performance is good but not great
use <figure> HTML element instead of plain <img> and use the .webp image format for all non SVGs to reduce file sizes and img as fallback
add lazy loading to images below the fold (FCP)
remove the space at the end of your page
reduce the contrast of the bright green color if you focus the input field in your footer
mobile users use their fingers (how logical) therefore I would open the dropdowns in your footer via the whole element instead of just the icon
in the search bar use type="search" for better semantics (it will also add the X to clear the input)