Improving the UX and UI of steemtools

in utopian-io •  5 days ago

Repository

https://github.com/nawab69/steemtools

Introduction

Steemtools is a website that offers many tools that are useful for many Steemit users. Some tools such as steemit post word count and checking for blacklisted account are very useful and I often use them. The website have other tools such as modifying the withdrawal route of an account and also changing a user recovery account.

Components

My suggestion is on the

  • Website Header
  • Check Blacklist Page

Proposal

The website looks good with the present functions and I believe it can be improved to even look better
I propose the addition of

  • Header logo as link option - Visiting the site and navigating through the pages there, you will discover that there is no way to access the main menu via any link in the website. turning the header logo into a link will allow users to easily move back to the menu at any point in time with just a single click.
  • Blacklist page navbar feature - The navigation button in the blacklist page is not functioning. You can't visit other page on the website thereby making the page looking like a static stand-alone site. The addition of a functional navbar will solve this.

This will be explained further in the mockups below.

Mockups/Examples

You can see the actual behaviour of the website in the above video.

The above video showed how my proposal should work when implemented. I gave the proposed solution below.

My Proposed Solution

In making the header logo a link, the image has to be wrapped with an anchor tag. That will give <a href="index.php"><img class="navbrand" src="../include/logo.png" height="50px" width="200px"></a>

What this means is that the image should be clickable and redirect to the homepage which is index.php

In order to make sure that the blacklist navigation page is working, I observed that the bootstrap javascript links were not included on the page.

The following code should be included on the page code so that it can function well.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

They should be pasted after the last Div tag just before the body tag

Benefits

Header logo as a link- Having this feature will greatly improve the website. Users will be able to move to the main menu with a single click rather than pressing the browser back button numerous times just to achieve that. It will improve the UX user experience UI user interface of the website and also reduce the time, stress involved in navigating to the home page.

Blacklist navbar feature- This is another feature that will improve Steemtools. It will improve the website UI and the UX as users will be able to navigate to other parts of the website with ease.

Conclusion

Implementation of these features will greatly improve the website. It will have a major impact on how users use the website too.

My GitHub profile

https://github.com/zoneboy

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Hello @zoneboy!
Nice to see you contributing again.
While navigating to check blacklist, there is indeed no way to go back to the home page when you click on steemtools and the drop-down menu. The addition of this feature will really be useful and less time consuming for the users.
Glad to see that you have provided the solution to this problem as well.
I hope that PO considers your suggestions.
We are already looking for your next contribution.

Edit: The menu issue on the blacklist is more of a bug than a feature and the header logo as link feature is trivial.
Therefore your contribution has to be rescored and I apologise for making a mistake earlier.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

·

Thank you for your review, @syedumair! Keep up the good work!

Hi @zoneboy!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Thanks for using eSteem!
Your post has been voted as a part of eSteem encouragement program. Keep up the good work! Install Android, iOS Mobile app or Windows, Mac, Linux Surfer app, if you haven't already!
Learn more: https://esteem.app
Join our discord: https://discord.gg/8eHupPq

Honestly, your suggest is very good sir @zoneboy

Hey, @zoneboy!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!