LeoFinance: My modest considerations on how to improve the user interface (EN/ES)

Valid clarification: My goal is to help, build and contribute to the community. I'm not trying to trash all the work that full-time developers do, rather, to do my bit to make things go as smoothly as possible.

LeoFinance

You may ask: Who is Infinity to come and talk about these issues on how to improve the Leofinance website?

Well, I'm a computer engineer with years of graduate studies, and I'm not the best programmer in the world, but I try to learn a little more every day. I like programming and design. Currently dabbling in different projects as a Front End Dev.

Having said all this, let's get to the point.

Aclaración valida: Mi objetivo es ayudar, construir y aportar a la comunidad. No intento echar por tierra todo el trabajo que realizan los desarrolladores a tiempo completo, más bien, aportar mi granito de arena para que las cosas salgan lo mejor posible.

Te preguntarás: ¿Quién es Infinity para venir a hablar de estas cuestiones sobre cómo mejorar la web de LeoFinance?

Bueno, soy Ingeniero Informático con años de graduado, y no soy el mejor programador del mundo, pero trato de aprender cada día un poco más. Me gusta la programación y el diseño. Actualmente incursionando en diferentes proyectos como Front End Dev.
Dicho todo esto, vamos al punto.

Why not to use React JS?

This is my main suggestion and the one I would like to see in the future. It would certainly be a 100% improvement for the whole user experience.

react.dev

"React is an open source JavaScript library designed to create user interfaces with the goal of facilitating single page application development. It is maintained by Facebook and the open source community."

React JS is one of the most widely used libraries today because of all the facilities it offers, due to its reusable components that make life easier for developers. In addition, it is easier to understand compared to others such as Vue or Angular and this makes the development of applications with React JS faster and less time consuming. Also, the same code can be reused for Android or IOS and this does save time.

¿Porque no usar React JS?

Esta es mi principal sugerencia y la que me gustaría ver en un futuro. Sin duda alguna seria una mejora del 100% para toda la experiencia de usuario.

“React es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la comunidad de software libre.”

React JS es una de las librerías más usadas en la actualidad por todas las facilidades que ofrece, debido a sus componentes reutilizables que les hacen la vida más fácil a los desarrolladores. Además, es más fácil de entender en comparación con otros como Vue o Angular y esto hace que le desarrollo de aplicaciones con React JS sea más rápido y se requiera menos tiempo. Además, el mismo código puede ser reutilizado para Android o IOS y esto sí que ahorra tiempo.

With React JS you are guaranteed a reduction in rendering time, and with this a more pleasant and enjoyable user experience. When designing a complex and high load application such as LeoFinance (or any other here at HIVE), it is essential to first determine the structure of the app, as this will have a great impact on its performance and with React JS and its Virtual DOM you can solve the problem of slowing down the site due to high data consumption.

A fundamental part that you will get with React JS and that currently personally bothers me a lot in LeoFinance, is the fact that the entire website reloads whenever I touch a link. With React JS this doesn't happen, the website doesn't need to reload in that way. For a better understanding of the readers, you could check Ecency, it is made with React JS and when you touch a link, you can see that the web does not reload completely, it only updates the part you want to see quickly.

Con React JS tienes garantizado la reducción del tiempo de renderizado, y con esto una experiencia de usuario más agradable y placentera. Cuando se diseña una aplicación compleja y de alta carga como lo es LeoFinance (o cualquiera otra aquí en HIVE), es fundamental determinar primero la estructura de la app, ya que esto tendrá un gran impacto en su rendimiento y con React JS y su Virtual DOM se puede solucionar ese problema de la ralentización del sitio por el alto consumo de datos.

Una parte fundamental que obtendrás con React JS y que actualmente en lo personal me molesta muchísimo en LeoFinance, es el hecho de que se recarga la web completa siempre que toco un link. Con React JS no sucede esto, la web no tiene la necesidad de recargarse de ese modo. Para un mayor entendimiento de los lectores, pudieran revisar Ecency, está hecha con React JS y cuando tocas un link, puedes ver que la web no se recarga completamente, solamente se actualiza la parte que quieres ver de forma rápida.

I understand that such a radical change takes a huge amount of time to restructure the project. But from my point of view, if they want to be the definitive web, they should seriously think about it and start taking the first steps in the near future.

On the other hand, if I am not mistaken, I see that LeoFinance is using Tailwind and that without a doubt is the best option as CSS framework, it is even the most used at present. Every day new solutions come out that are undoubtedly excellent, but Tailwind remains at the forefront. Even Bootstrap that once shined, is currently a little behind.

Entiendo que un cambio así de radical, conlleva un tiempo inmenso de reestructuración del proyecto. Pero desde mi punto de vista, si quieren lograr ser la web definitiva, deberían pensarlo seriamente y comenzar a dar los primeros pasos en el futuro cercano.

Por otra parte, si no me equivoco, veo que LeoFinance está usando Tailwind y esa sin duda es la mejor opción como framework de CSS, es incluso el que mas se usa en la actualidad. Cada día salen nuevas soluciones que sin duda son excelentes, pero Tailwind se mantiene a la punta. Incluso Bootstrap que en su momento brillo, actualmente esta un poco mas rezagado.

CSSFrameworks2022

Some bugs I have found / Algunos bugs que he encontrado

  1. My monitor is 1920 wide in resolution, and the web doesn't display fully when I'm in threads or notifications, but if I open the articles part it does expand.

My recommendation: I think it should always be expanded to the full width of the screen, so that all the space is used and the user does not experience that sudden change.

1.Mi monitor es de 1920 de ancho en resolución, y la web no se muestra de forma completa cuando estoy en threads o notificaciones, pero si abro la parte de artículos si se expande.

Mi recomendación: Creo que debería de ser siempre en expandido al ancho total de la pantalla, así se aprovecha todo el espacio y el usuario no experimenta ese cambio brusco.

LeoFinance

LeoFinance

  1. If I am in posts/hots and I see all the articles there, I read the title and the description, I would like to give a vote directly there, when I do it, it opens the article completely.

My recommendation: To be able to vote directly there without having to enter the article.

2.Si estoy en posts/hots y veo todos los artículos allí, leo el título y la descripción, quisiera darle un voto directamente allí, al hacerlo, me abre el articulo completamente.

Mi recomendación: Poder votar directamente allí sin tener que entrar al artículo.

3.The voting bar does not work for me to drag the slider of the vote in the part of the articles.

3.La barra de votar no me funciona arrastrar el slider del voto en la parte de los artículos.

4.When in notifications I have an answer from a user, I give Reply and it opens a modal. When I reply, when I press the Thread button, the modal does not disappear, although the reply has been sent. I have to close the modal myself.

My recommendation: have the modal close automatically once the reply is sent.

LeoFinance

Suggestions / Sugerencias

  1. I would like to have the possibility that when I slide the slider to vote, the $0.001 according to your voting level would be shown next to it, not only the %.

1.Me gustaría que existiera la posibilidad de al deslizar el slider para votar, se mostrara al lado el $0.001 según tu nivel de voto, no solo él %.

2.In Power Up, in the amount part, I would like to have some buttons with %, for example: 25%, 50%, 75% and 100%. That the user has the option to write, but at the same time to select the % directly that he/she wants to use for Power Up.

2.En Power Up, en la parte de amount, que tenga unos botones con %, ejemplo: 25%, 50%, 75% y 100%. Que el usuario tenga la opción de escribir, pero a su vez de seleccionar el % directamente que quiere usar para Power Up.

LeoFinance

  1. Show the Wallet just below the user profile as Threads and Blogs. Currently the profile is deleted and only the Wallet is shown.
  1. Mostrar la Wallet justo debajo del perfil de usuario como Threads y Blogs. Actualmente se elimina el perfil y se muestra solo la Wallet.

LeoFinance

4.Eliminate the Follow button in the same user profile.

4.Eliminar el botón de Follow en el mismo perfil del usuario.

LeoFinance

5.In Settings I see the option "Default Vote Weight for Posts", which I think is great. If I put 5% for each post I want to vote I don't have to move the slider, I like it. But what if I want to give more vote to a specific post, do I have to go to Settings to change the configuration?

Suggestion: When I leave the mouse over the heart for 3 seconds, I can show a modal with the slider to select the % of vote that I will give to that post that I liked more than the others.

5.En Settings veo la opción “Default Vote Weight for Posts”, la cual me parece genial. Si pongo un 5% por cada post que quiero votar no tengo que estar moviendo el slider, me gusta. Pero qué pasa si quiero darle más voto a un post en específico ¿Tengo que ir a Settings a cambiar la configuración?

Sugerencia: Al dejar el mouse unos 3 segundos encima del corazón, que se muestre un modal con el slider para poder seleccionar el % de voto que le daré a ese post que me gustó más que los demás.

  1. In Profile: Threads, Blog, Wallet and Awards, why not separate in Threads the answers we make from the original Threads? This way we have a better control as users.

6.En Profile: Threads, Blog, Wallet y Awards. ¿Porque no separar en Threads las respuestas que hacemos de los Threads originales? De esta forma tenemos un mejor control como usuarios.

  1. Include what Ecency has when you tap the heart icon to see who has given you a vote, with the % and how much $ it gave you. This is definitely something I love in particular.

7.Incluir lo que tiene Ecency cuando tocas el icono del corazón para ver quien te ha dado un voto, con el % y cuanto $ te proporcionó. Esto sin duda es algo que me encanta en lo particular.

Ecency

  1. Finally, in the creation of articles, advance as much as possible in it, to make the user have the best experience when writing an article from the Front end of LeoFinance.I do not say more because I think they are working on it.

8.Por último, en la creación de artículos, avanzar tanto como se pueda en ella, para hacer que el usuario tenga la mejor experiencia a la hora de escribir un artículo desde el Front end de LeoFinance. No digo mas porque creo que están trabajando en ello.

Infinity

These are some of my considerations and in the short time I have been able to work with LeoFinance.I say this as one more user that I would like to help to make Leo increase its popularity every day.

Estas son algunas de mis consideraciones y en el poco tiempo que he podido trabajar con LeoFinance. Lo digo como un usuario más que me gustaría ayudar a hacer que Leo aumente su popularidad cada día.

I hope I have been helpful / Espero haber sido de ayuda

@khaleelkazi

Thanks for reading me today guys / Gracias por leerme hoy chicos...

Resources:

Images are from LeoFinance, Ecency, React JS and CSS Frameworks.

https://react.dev

https://2022.stateofcss.com/en-US/css-frameworks/

LeoFinance Visual Support for Posts

LeoGlossary

H2
H3
H4
3 columns
2 columns
1 column
4 Comments