# UX / UI ideas Hi all, So this is gonna be a long one. No TL;DR. This is all my idea and notes written down over the last two months about how to improve the twt.social and re-branding it into Yarn.social. It is a wishlist and an ramble. Hopefully not a rant - it is at least not mean as one. I was also thinking to post this as an issue on Github, but let us start the conversation here. Prioritizing the TODOs ---------------------- * What is the MVP of yarn.social ? - What is the killer features? What it is yarn.social does, that no other platform does - Conversations (reply by posting to your own twtxt.txt file adding a #hash of the original message) - Discover via being on the same pod and by mentions in conversations - Able to self-host - Easy to make CLI clients - Also fairly easy to make web or GUI clients - No AI / ML timeline, just chronological - Just pure boolean logic - What is just nice to haves that every other "new" social network also has? - Blogging (longer than 250-500 char and with a headline) - Private Messages - Likes (No!) - Public bookmarks could be harvested to generate a kind of like indicator - Re-post (No!) General ------- - Replace "twt" with post - Lose the "me" and use the NICK of the user instead CSS/Design ---------- - Make a new logo - Make the design more compact - Make the default color-scheme more borrowing - Footer is a mess Onboarding / Sign up -------------------- - Went you got to a pod and you are not already a user or signed in, the page should tell the user something more than just the feed. - Like what is this thing anyway? how does it work? and it this specific pod anything for me? - Info is missing => jlj voice memo * Sign up / Sign in - User "Register" and "Log in" instead, since "Sign up" / "Sign in" is too close to each other - Lose the leading slash in "/register" and "/login" * Sign up form (register) - Should you not cofirm email and password? - Explaing the thing about not storing the email. Most people will not get this * Sign in (Login) - Clean up the text: remove repetitions Navigation ---------- * Change to sidebar design, with one or two sidebar? * FEATURE: Add the time ago from last post for each feed/timeline * Top menu - Timeline (me) - Mentions (me) - Discover (pod) - Blog (me/pod) -- Right now the blogs are kind hidden/buried. If this is a important feature it should also be at the top, or it should be removed. - Add Feed (me/pod) - Search/Filter - Follow (me) - Combine with Add feed? - Bookmarks (me) - Private messages (me) - Profile (me) - Settings Timelines --------- * ISSUE: Same Posts is show in both your timeline and discover - Discover should only you posts that does not show up in you own timeline * ISSUE: You cannot see in the timeline feeds what the original post of a replay is (unless your are very good at memorizing the #hashes) - This results in you have to open up all the replies when scrolling through your timeline and the you often open up the same conversation several times. - SUGGESTIONS: - Show new post under the original post, but collapsing all the other replies. - Show the original post under the new post with a metatext: NEWPOST /n this is a reply to /n OLDPOST - Show all conversations in Conversations view and some kind of forking Posting/Replying --------------- * Unclear from the UI if you are making a new (root) post or if you are replies to an older post - There is a post-form at the top of timeline view, but in conversations view it is a the bottom. This kind of makes sense, but the forms looks the same, and there is no clues which is which - SUGGESTIONS: - Add a headline saying what each does - Force visual including of ([#hash](https://twtxt.net/search?tag=hash)) when it is a reply in the form-text-input * FEATURE: Add preview option before posting (like on Github), so you don't have to go back and edit a bunch of time if something is off. Like you are replies to the last post (new fork) or to the original post (root) * The EDIT option: If you make a mistake the EDIT-button does not show up all on all the places that your post shows up - Maybe it is a cache issue, but the user should not need to hit refresh. Post-item/menus ---------------- - Only show the "Conversation"-button if the post is part of a conversation - Bookmark at the bottom next to reply Conversations ------------- * See mockup at http://darch.dk/yarn-hack/YARN_Conversation_Nested.html * https://twtxt.net/conv/ghryeqq - Only show the "Conversation"-button if the post is part of a conversation - Show both "Reply to original post" (root) and "Reply to this post" (fork) - This can be done visually so you don't need to show the words "root" and "fork" to the end users - Headline for "Conversation [#Hash](https://twtxt.net/search?tag=Hash)" => "Conversation started by NICK" - Sub-headline: typo or what does this mean? Freshness of post ----------------- I would like to suggest a way to show how old a post is, that is more visual than the "XX minutes ago", "XX hours ago" etc. This would help you to know when you are starting to reach a place in the timeline that you have already been since you last checked. I imagine it a bit like a fading flower or plant. > [An argument against relative timestamps, from a UX designer.](https://medium.com/swlh/user-engagement-is-code-for-addiction-a2f50d36d7ac) > [name=JJ] An easy way to implement it would be to color-code the "XX time ago": - X minutes ago (green) - X hour ago (yellow) - X days ago (white) - X weeks ago (grey) I would like to avoid the use of red since it this used for notification badges and I don't want to introduce this stress creating feature into our UI. It could also use a gradient scale from green over yellow to white or some kind of visual counter like: 🍀🍀🍀🍁 or (* * * -) A way to calculate a gradient or visual counter could be to say 100 hours meaning 100% filled up like the charge of a battery. - below one hour: 99.X % - One hour: 99% - Two hours 98% - Ten hour: 90% - One day: 76% - Two days: 52% - Five days: 0% With a number like this between 0 and 100 it would be easy to implement visually using CSS as for example the background color of the date-time element or even using a gradient to have multicolored indications. Using a color to convey information of course have some pitfalls in relation to accessibility to consider. Right now the information is all ready there (X time ago), but not very visible. User Journey ------------ - Maybe it is a cache issue, but the user should not need to hit refresh to see new stuff. * What screens are you taken to after you make any kind of submit to the system? * SUGGESTION: The confirmations box should be show at the top of the page you just posted to and your new post should be highlighted, so you can easily see what you just did. - Making a new post: Show your on your timeline - Posting a reply: Show your post as part of the Conversation - Adding a new feed: Show you the posts from this feed or the page of this user - Saving a bookmark: Show your bookmarks Feeds vs. Follow ---------------- Would it be an idea to combine the "Create Feed" and "Follow" pages? In a way they do some of the same thing, but maybe the /feed page is just a mix of too many different things. * Follow: - Make the nickname optional or prompt the user for a nickname only if this is not found in the file at the end of the URL. User-page and Settings ---------------------- * User-pages (not logged in): Hide these features on /user/nick when not logged in: - Block/report - NICK does not follow you * User-pages (not me): - ISSUE: Post-form on a user page unclear: Is this gonna post to just this use adding a @mention or will it just post to "everyone" ? * User-page (all): Reorganize info and links in side-menu and add description of what they each can do or is good for: * mock-up: http://darch.dk/yarn-hack/YARN_User_Profile.html - Main section: ``` Ava--- | NICK ---tar | Tagline Timeline/Posts | Blog | Followers | Following | Bookmarks Does NICK follow you? (maybe it should be in the sidemenu...) ``` - Side-menu: - Move icons to the left, so before the text like it is everywhere else on the site ``` - Does NICK follow you? (maybe it should be in the sidemenu...) --- - Follow NICK here on PODNAME/URL - Twtxt (For use in other twtxt clients) - Atom (For use in other feed readers) ----- - Block / Report user ``` * User-page (current user): Hide these features on your own profile page: - Block/report * Settings/config page: - The user-page and the settings-page looks too much a like. The only difference the "Config"-link that just take you to a config-file. - Follow the design suggested above and replace the the Block/report with the link to config and rename it to "Download your config-file" - Confirm new password and email + unclear info about not storing the e-mail addresses itself - And info/help-text about the API and messages tokens Following / Followers / Bookmarks --------------------------------- - Add a header of the user whose f/f/b you are currently views, as suggested above (minus the side-menu) - Use UL instead of OL on all three pages - Show Avatar and URLs for all the feeds: Avatar | NICK Avatar | URL * Following/Followers - Make [Follow] / [Unfollow] into real buttons using CSS - Add icons or colors to them as well - (+) Follow - (x) Unfollow - Option to sort Following and Followers by Nickname (A-Z) or by time added (guess that is what it is now) * Bookmarks: - Find a better bookmark icons across the system like a Unicode-star: ★ / ☆ - Pull in the post and show it as a any other timeline - Option to sort/filter - Option to access a raw bookmarks.txt file using this syntax: ```URL date-time post-content´ Private Messages ---------------- - Add a way to see the message you have sent (auto CC yourself, maybe) ATOM-feed: ---------- - ISSUE: Remove p-tags etc for title in the Atom-feed, since some feed-readers get messed up: ![](https://twtxt.net/media/nSsiop9QxLTgqWggi2UBbX) Search/Filter/Views ------------------- Being a librarian I'm all for advanced search systems. So a way to discover new posts and feeds/people to follow would be to have various was to filter the content: - Show only posts with [#tags](https://twtxt.net/search?tag=tags) (not conversations), maybe in a tag-list or tag-could - Show only posts containing images or video, maybe in a gallery view like this http://darch.dk/twtxt/picogram.php Deal-breakers ------------ - Than you cannot edit or delete posts (except for your last post) - Give access to edit the full text (with proper warnings!) - Have it in a git or other version control system. Maybe that would help with not breaking conversations. - Replies in timelines is a mess --- Thank you for reading all this. Where should we start? What should we be working on and what should stay in the backlog? Cheers, Søren Peter