Over the past few weeks, I have explored the the Tremor website, and while I have found it to be quite pleasant and very informative, it is clear that some changes are needed to further enhance its UI and make the user experience even more pleasant. A few possible areas of improvement:
Homepage
I love me a good graph; however, I'm not sure that's a popular opinion among many users. I think that having a graph on the homepage of the website can make it a little uninviting to users.
I would suggest a more generally visually appealing image that would spark a user's curiosity and make them want to explore the website and learn more about Tremor.
Or, we could including a landing page.
Consistent Appearance
Like symmetry, I think that consistency contributes a lot to visual appearance. While the Getting Started, Blog, FAQ, Community, Community Chat (we should probably find a way to combine these two, or find a better way to phrase/differentiate them) and Governance pages have a similar layout, the Docs and RFC pages are very different.
For instance, the logo on the upper left differs on the two categories. Moreover, the Docs page has a search bar that Getting Started lacks, but lacks a navigation menu that would direct the user back to the other pages.
On a positive note, the website is highly responsive and looks very impressive on mobile. Furthermore, the logo is consistent on all the web pages. However, the mobile interface design reveals even more inconsistencies. For example, the hamburger menu on the Docs and RFCs pages appears on the top left whereas on the rest of the website, it appears on the top right of the page. This can be a little confusing or even frustrating for users.
This variation is hugely thanks to the use of different frameworks to build either the Tremor documentation or the rest of the website, i.e. MkDocs for documentation and Hugo for the website. This can be solved by using a single framework that unifies all the website's content forms under a single consolidated theme and design. Refer to #121.
We are currently still testing different frameworks- Hugo and Docusaurus being at the forefront at the moment- to find out which one best addresses our concerns. More about the findings on a separate later issue.
I also think that the Fork me on GitHub menu item on the top right is highly inconsistent with the rest of the menu items apropos the positioning, colour and font. Perhaps it would be more visually consistent and less distracting if it matched the other items.
Smooth Navigation and Transition
As I had mentioned earlier as one of the inconsistencies, the Docs and RFCs pages lack a navigation menu that would transition a user back to the rest of the website. And, although the rest of the site contains a navbar, it still doesn't efficiently guarantee a smooth navigation around the website, and definitely doesn't provide a seamless transition to different web pages (e.g. using previous and next links).
To address this, we would need to list all pages in the nav configuration so that they can all be included in the global site navigation menu, and linked from the structure of the menu.
Breadcrumbs would be helpful in easing navigation for users; they lay out the structure of the website, so that the user knows exactly where they are, and where to go next. A breadcrumb trail would serve as an excellent visual aid, indicating the location of the user within the site’s hierarchy.
Search Bar
Browsing through the whole website can be quite tedious, especially if a user already has an idea of what they are looking for. A search bar would come in handy in improving the findability of items within the website, just as with breadcrumbs and web pages. It's also an enormous time saver.
Multimedia
This is probably not as important as the first four proposals, but including interactive content such as images, videos, GIFs, graphics and infographics could be a good way to engage the user by providing them with a second visual element to look at besides text. With an impressively detailed documentation such as Tremor's, it can sure get a little boring reading through text without a break- I reckon having the break right there in the form of a video or GIF would be a hoot!
Dark/Light Mode Toggle (Welcome to the dark side! :D)
Recently, Dark Mode has gained a lot of traction as many people are continually showing preference towards it. Consequently, more and more websites are implementing Dark Mode design. We could add a color mode toggle button to further enhance user experience by providing them with a choice. People love having a choice in matters, don't they?
darach
commented
3 years ago
This issue is in reference to Web Content Redesign #121.
Over the past few weeks, I have explored the the Tremor website, and while I have found it to be quite pleasant and very informative, it is clear that some changes are needed to further enhance its UI and make the user experience even more pleasant. A few possible areas of improvement:
Homepage
I love me a good graph; however, I'm not sure that's a popular opinion among many users. I think that having a graph on the homepage of the website can make it a little uninviting to users.
Consistent Appearance
Like symmetry, I think that consistency contributes a lot to visual appearance. While the
Getting Started,Blog,FAQ,Community,Community Chat(we should probably find a way to combine these two, or find a better way to phrase/differentiate them) andGovernancepages have a similar layout, theDocsandRFCpages are very different.For instance, the logo on the upper left differs on the two categories. Moreover, the
Docspage has a search bar thatGetting Startedlacks, but lacks a navigation menu that would direct the user back to the other pages.On a positive note, the website is highly responsive and looks very impressive on mobile. Furthermore, the logo is consistent on all the web pages. However, the mobile interface design reveals even more inconsistencies. For example, the hamburger menu on the
DocsandRFCspages appears on the top left whereas on the rest of the website, it appears on the top right of the page. This can be a little confusing or even frustrating for users.This variation is hugely thanks to the use of different frameworks to build either the Tremor documentation or the rest of the website, i.e. MkDocs for documentation and Hugo for the website. This can be solved by using a single framework that unifies all the website's content forms under a single consolidated theme and design. Refer to #121.
We are currently still testing different frameworks- Hugo and Docusaurus being at the forefront at the moment- to find out which one best addresses our concerns. More about the findings on a separate later issue.
I also think that the
Fork me on GitHubmenu item on the top right is highly inconsistent with the rest of the menu items apropos the positioning, colour and font. Perhaps it would be more visually consistent and less distracting if it matched the other items.Smooth Navigation and Transition
As I had mentioned earlier as one of the inconsistencies, the
DocsandRFCspages lack a navigation menu that would transition a user back to the rest of the website. And, although the rest of the site contains a navbar, it still doesn't efficiently guarantee a smooth navigation around the website, and definitely doesn't provide a seamless transition to different web pages (e.g. usingpreviousandnextlinks).To address this, we would need to list all pages in the nav configuration so that they can all be included in the global site navigation menu, and linked from the structure of the menu.
Breadcrumbs would be helpful in easing navigation for users; they lay out the structure of the website, so that the user knows exactly where they are, and where to go next. A breadcrumb trail would serve as an excellent visual aid, indicating the location of the user within the site’s hierarchy.
Search Bar
Browsing through the whole website can be quite tedious, especially if a user already has an idea of what they are looking for. A search bar would come in handy in improving the findability of items within the website, just as with breadcrumbs and web pages. It's also an enormous time saver.
Multimedia
This is probably not as important as the first four proposals, but including interactive content such as images, videos, GIFs, graphics and infographics could be a good way to engage the user by providing them with a second visual element to look at besides text. With an impressively detailed documentation such as Tremor's, it can sure get a little boring reading through text without a break- I reckon having the break right there in the form of a video or GIF would be a hoot!
Dark/Light Mode Toggle (Welcome to the dark side! :D)
Recently, Dark Mode has gained a lot of traction as many people are continually showing preference towards it. Consequently, more and more websites are implementing Dark Mode design. We could add a color mode toggle button to further enhance user experience by providing them with a choice. People love having a choice in matters, don't they?