[UI] modifying better UI and easy to use.

[OiCkilL]

Hi, the Maskbook is a very cool project, but the UI system is so ugly and not easy to use. Why? I think the UI system and UX system are not meet the platform standards.

Let me just give you some idea.

• CSS may more conform to twitter webpages.
• Special mode custom the special color.
• Optimize the user experience.

I tried to make a small UX prototype.

[Tedko]

The tech reason of the UX is limited in current stage:

we need to inject code etc into shadow DOM to avoiding being spied by the platform it self - twitter/fb. So for now it’s hard to merge 2 compose box into one.

Good points though.

[Jack-Works]

@guanbinrui hey! Is there a screenshot about our new composition UI!

[guanbinrui]

Thanks for reporting :)

At this moment we just using facebook composition UI in twitter directly. Thus, it not meet the twitter's way. Our new composition UI for twitter will ship soon. We used extra compose dialog instead of compose box which sticks under platform one for composing new tweet.

Here are some screenshots:

As you can see from the screenshots. Our injected component try to follow the twitter's style guide and use the user customizable color as it's primary color. It's still not perfect but we are going on this for better user experience.

[neruthes]

Thanks for your love! We welcome feedbacks on all aspects of Maskbook, and I would like to let you know that https://github.com/DimensionDev/Maskbook-Talk is the principal place for these discussions while https://github.com/DimensionDev/Maskbook remains focusing on development activities. :)

Your drafts are impressive. I look forward to drawing inspirations from them. Keep in touch as we continue to refactor UI components.

P.S. Are the labels made with Sketch-Measure by Utom? I like using it but eventually turned to using Figma... 🤔

[OiCkilL]

Thanks for your love! We welcome feedbacks on all aspects of Maskbook, and I would like to let you know that https://github.com/DimensionDev/Maskbook-Talk is the principal place for these discussions while https://github.com/DimensionDev/Maskbook remains focusing on development activities. :)

Your drafts are impressive. I look forward to drawing inspirations from them. Keep in touch as we continue to refactor UI components.

P.S. Are the labels made with Sketch-Measure by Utom? I like using it but eventually turned to using Figma... 🤔

Nice, I have been using Sketch, I think Sketch is better then other.

[OiCkilL]

Thanks for reporting :)

At this moment we just using facebook composition UI in twitter directly. Thus, it not meet the twitter's way. Our new composition UI for twitter will ship soon. We used extra compose dialog instead of compose box which sticks under platform one for composing new tweet.

Here are some screenshots:

As you can see from the screenshots. Our injected component try to follow the twitter's style guide and use the user customizable color as it's primary color. It's still not perfect but we are going on this for better user experience.

Good jobs, but have some thing wrong with UX. Please do not place more then 2 focus buttons in a window that needs to complete the final operation. Because users will make mistakes. Here are some try.

[neruthes]

do not place more then 2 focus buttons in a window

This is true. I will note.

However, immersive composing may remain infeasible for a longer time than we originally expected, and we had some discussions in #9 regarding possible races of changing DOM structure with social network platforms. We will work on immersive composing when we have time.

Also note that a total replacement with immersive composing experience may lead to UI trivialization. This problem remains challenging til today.

[guanbinrui]

@OiCkilL You are absolutely right on the double buttons problem. Sometimes I was confused on this too. Unfortunately according to tech reason mentioned by @Tedko. For now we can not merge two compose boxes into one.

Secondary, your timeline switcher idea is awesome. But I think it's impossible for us filtering user tweets. Maybe we can add some visual tips on encrypted tweets, different background color?

[OiCkilL]

@OiCkilL You are absolutely right on the double buttons problem. Sometimes I was confused on this too. Unfortunately according to tech reason mentioned by @Tedko. For now we can not merge two compose boxes into one.

Secondary, your timeline switcher idea is awesome. But I think it's impossible for us filtering user tweets. Maybe we can add some visual tips on encrypted tweets, different background color?

Yes, I think so. Different background color or special icon tag may be a better solution. If one compose box only, we must tell user it works.