stacks-archive / blockstack-browser

The Blockstack Browser
Mozilla Public License 2.0
1.12k stars 199 forks source link

Blockstack Browser Review #1177

Closed guylepage3 closed 6 years ago

guylepage3 commented 6 years ago

Blockstack Browser Review

1. Home Screen

The Home Screen design and layout is currently made for mobile as well as only a limited number of applications. The layout makes it hard to find and navigate to the apps you want to use. The current browser has a lot of friction when trying to submit apps to into the browser as there is no automated way of doing so.

Solutions and/or enhancements

2. App Store

Currently there is no App Store but many in the community as well as on Blockstack Core have talked about the need for an app discovery mechanism such as this.

Solutions and/or enhancements

3. Navigation

The current navigation seems to be working now that we have simple and self-explanatory icons over descriptive text. But the placement may need to change depending upon the layout of the rest of the content. If there is a Home screen, App Store, etc. Whether or not the browser becomes a stand alone application and to what extent. As of this second I personally feel they could be a bit larger and fit better into the over all feel of the UI.

Solutions for making the navigation more usable could be to pull the elements to the edges of the window allowing for better use of space.

4. UI Design

The current state of the UI is still in a bit of disarray as opposed to cleanliness, utility app feel, etc. Although it's in a better state than it's previous predecessor, the UI is still a bit ad hoc as the design was created based upon a much different set of requirements than what we see today. The flat UI design works well but currently lacks depth with a wrapper/bounding box and box-shadow. This is discussed further in the Profiles section of this review.

Some solutions for a much better UI experience could go in two different routes visually;

  1. Flat UI design. ie. Airbnb, etc.
  2. Traditional generic UI design. ie. Chrome, Firefox, Safari, etc.

Both directions work but I personally feel that going down a new, modern path of flat UI design is where we are headed and will assist in being a market separator.

One additional piece that will make a difference is to ensure that the UI stay neutral in feel, functionality and color. In doing so it will allow for greater focus on apps, profiles, etc.

5. Type

Currently there are a few to many variables in the total type set. Although we've transitioned over to a simpler type style, Lato, and have applied it throughout both the browser and the brand, there remains a wide variety of type sizes and weights. In doing this the UI can become quite untidy.

Reduction and better consistency throughout the browser will allow for better legibility resulting in a better experience through faster navigation throughout the product.

6. Color

Currently we are in transition when it comes to the overall color of the browser. There has not been time to do a proper retouching of color based upon future goals/requirements of the browser. The color has quickly transitioned to neutral and a simple black and white color call was made for quick application of the neutral theme.

7. Use of neutral space

Again there is a lack of proper use of neutral/negative space throughout the browser's UI. As previously mentioned, this is a result of the design requirements changing from mobile design back to desktop.

Once a more defined set of requirements are complete, there will be an opportunity to address this wrapper/bounding box and box-shadow issue for desktop.

8. Profiles

The profiles are currently a bit off from what the approved design was to be. There are some card like features such as a bounding box with box-shadow that have not yet been applied as well as the new colored background to provide depth and emphasis on the white card like feel seen below..

image From issue https://github.com/blockstack/blockstack-browser/issues/928

This layout may change of course with upcoming transition to a fully native Blockstack Browser/App.

9. Multiple usernames

Currently the multiple username process is broken. It is difficult to understand how things work. Also, there could be better wording around the ID navigation as well. Currently the ID nav link says "IDs" which is ok if you were to click on the button and then see multiple ID's. But the user only sees one and is expected to click "More" to view more than one ID.

Once the user navigates to the multiple ID's view, there is limited information on each ID. It would be nice to see the ability to choose a different view, compact and extended that would allow for a broader view of the ID's but also allows for a compact quick view.

10. Wallet

The current wallet is simple and easy to use for the most part. But it would be nice to see a more traditional wallet with all the "copy" paste functionality we are accustom to in wallets like "Coinbase", etc.

11. Support - Live?

Currently we have a support button that takes the user to the Blockstack Forum where they can learn more. As this is fine for a quick fix it would be a much better experience for the user to easily and quickly get a response. Adding intercom capability would be a very nice feature with the addtion of a possible "in app FAQ".

12. Advanced Settings

Again the current state of settings was designed for a simple mobile view while following the previous button system for quick deployment in the super fast redesign. It would be a much nicer experience to list out all the settings where the user can simple scroll down the page, find what they want and execute what they wish. ie. Onename, Google Chrome, Spotify

13. Global enhancements for better UX

14. Messaging, on-boarding & copy

Currently the browser has had a round of simplification of copy, on-boarding and messaging which has resulted in a much greater experience than before. On-boarding via it's own page would allow for more space to provide clear instructions and messaging so that the user understands all implications of the on-boarding actions they are making. The current copy within the browser could also be more simplified in language for the layman and where need be, sectioned out more technical/advanced language for the developers.

wbobeirne commented 6 years ago

Closing as stale.