I have recently been working on a website design. Being still a beginner, I would love to have some feedback so that I can Improve. It would be really helpful if you can share your positive/negative thoughts with me.
The site layout is made with tailwind.css and it uses algolia for realtime search. I have used laravel and vue.js for the purpose of learning. I have tried making it fully responsive however I think there is room for improvements.
Here is the link: https://moviemag.herokuapp.com/
Waiting for your feedback Thanks.
For a newbie, very good, but you need to decide something with color, because, damn it, dude, don’t you see how these colors don’t combine?
First impression is a nice and organized layout on desktop.
Next is frustration that the “Critic’s Picks” aren’t linked to the review of the pictured movie.
Next, what do the red numbers in the Realese Date check list stand for? …I guess it’s the number of releases that date, but it’s not obvious. The order of the two lists is by release and review numbers???
It’s confusing that the list is reordered when items are checked. Also very awkward that it’s not sorted by dates here too.
Then on mobile, why are the red circles displayed like a staircase at medium device width? At that width the two check lists could be adjacent for less scrolling in e.g. landscape mode.
I also think the one column display of the movie boxes is kicking in too soon when I try different viewport widths.
The “Info” button could be better named and have a notice about what the info is about.
IMHO the color scheme is good.
I would agree with that.
You also seem to be using
<h6> headings incorrectly, based on their appearance, rather than as a hierarchical structure.
Thank you for your reply About the color scheme, i respect your opinion however I also think that appearance and color scheme is more of a personal preference. Some may like it and some may not. I have made some changes though. Thanks again.
Thank you so much Eric_J for the detailed feedback. I loved reading it, tbh. It is the kind of constructive feedback that anyone needs
1- Critic’s picks are linked to the reviews that appear below the photos.
2- I can understand why you’d think the red dots are confusing. I don’t really like them either, however they were a big part of learning search with algolia so I am keeping them. I have re-sorted the lists however, never noticed these were sorted based on number of results, my mistake.
3- The list sure is re-order when checked, again this is also a built in feature for building search with algolia-vue. I have however highlighted the selected results that in my opinion improve the UX a little bit.
4- I have changed the responsive widths as well, it’s a two column layout for small screen size now and the red dots don’t appear staircase now as well. One column layout only kicks in for the smallest screen size now.
5- Thank you for liking the color scheme
Thanks again for the detailed feedback, I really appreciate it.
Thank you for your feedback. The console errors have been resolved now
Linked in a coupled way, yes. I notice the changes in the slider captions and the review links. I would prefer how it looked before though.
First: Please remove the auto carousel sliding, it serves no purpose and is like hitting a moving target trying to use it. Why isn’t the slide arrows overriding the auto play to freeze the slide? The few second pausing is just annoying and makes me abandon the “feature” if not the whole site as too frustrating to use!
Second: I suggested the review pics to also have links to the review. The captions could have a NYT review link button. Please read point 5 here, though the auto play opinions are somewhere else: https://www.nngroup.com/articles/designing-effective-carousels/
Now the review link below only has the little arrow to find and click, please make the whole title a link as it was before! It would be good to have both these titles in whole and a button the pics linking to the review.
By the way, the outgoing links needs something that indicates they are not local (pity the NYT icon is difficult to recognize and the logo is their whole name). Please notice why this is important: https://www.nngroup.com/articles/link-promise/
Maybe just a href attribute/data-tooltip would do. Or an ordinary html title attribute. Please check the Nielsen accessibility site again: https://www.nngroup.com/articles/tooltip-guidelines/
How to code the above is easy, Google or DuckDuck for “css data tooltip”.
2 - Good.
Highlighting is nice and a remedy. If you also could find a way to not reorder, highlighted would be enough, for me anyway.
4 - Well done!
5 - You’re welcome!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.