List view & header redesign

patrykadas commented 6 years ago

This one I'm not sure and it's not a priority at all, however I spent some time on preparing more visually appealing and with better visual hierarchy look for widget details.

Significant changes:

Menu to keep the structure and show that it's all about sub-groups
Show the wallet icon with address of widget's owner
Swap the 'Contact' button with 'Dashboard' button, if detected owner
Visuals

betterlook

patrykadas commented 6 years ago

whitelist algorithm userfeeds

gkapkowski commented 6 years ago

I'm not sure this menu gives me subgroups idea when looking at it.

I like th swap of buttons it makes sense.

I think we need to work on wallet visual identification. I would show at least part of address and an icon generated from this adress so that the user have maximum number of chances to notice if the address is different and it's a scam. We need to be supper explicit where the coins will go in every part of the page

patrykadas commented 6 years ago

@gkapkowski Addressed feedback from #130 and made the wallet more visible, I will keep playing with subgroups identification.

feedback

gkapkowski commented 6 years ago

Awesome! This looks much better.

Re. wallet. How about we merge token icon identification with address icon and address? We could create unified identification for token (left upper corner) and combine it with go to etherscan link.

patrykadas commented 6 years ago

@gkapkowski @michalwarda @jakubsta Just a thought, as we're redoing some elements.

I thought about skipping completely left-menu, as it's not really informative either way and focus on the flow of the information a bit more.

Header Introduce here token and address' owner along with widget's specs: time till expiration, contact method and show where's the widget displayed.
Possibility to add link, I think it's important to highlight that you're not adding link to 'slots' or the widget's list in particular, but to the address.
Show whitelist & algorithm as familiar user's pattern: filter & sort. We could provide additional explanation on hover and redirect to the documentation even.
List itself, I'm thinking if it's crucial to overload user with all the info about score =/= probability, perhaps we could add one-line explanation about 'probability assigning' process.

Version below is just a wireframe, it's not 'colored' yet, however I put the elements sort-of in an hierarchical manner.

links

jakubsta commented 6 years ago

@patrykadas I think it's the right direction (only don't like that youtube part).

gkapkowski commented 6 years ago

Direction 👍

We need to have address and token identification so two addresses. somehow, I have no idea how to properly position it.
I'm not sure about the positioning, you are adding link to address but you are adding an item to one of the lists below. Maybe it should be fixed somewhere on the side rather than separating header and list. (this is a question of positioning possible actions area)
- Lets use ranked instead of sorted, sorting is too much numerical
- We can use 4/5, 5/5 notation for slots, I think it's universal and people understand it.
- 👍 on simple indicators for whitelist and algorithm with details inside
Probability depends on algorithm used and display method, so yes, I'm 👍 on showing something more tangible. Maybe this should depend on algorithm chosen, sometimes displaying 10% and sometimes 10s (bentyn video) or 10ETH or 10days (for algorithms where you can buy time on the list and probability is always the same)

patrykadas commented 6 years ago

@gkapkowski @jakubsta Please take a moment to review it (open in a new tab). I hid most of the stuff under the hovers, also simplifying a lot current interface.

le1 le1states

From top to bottom, from left to right:

Header a) Powered by Link Exchange b) Status of the platform -> see #169 c) Current status of transactions / Metamask -> see #169 d) User profile and activity -> see #169
Address information ('link aggregator') a) Address, if we entered through widget we show name connected to this address (see 'Szczepan Bentyn' instead of '0x...'.) b) Token + its address c) Description, if we entered through widget d) Social media stuff + contact methods, if we entered through widget -> Entering through widget means we clicked link provided by publisher. As currently we do not have any mechanism to attach title/description/SM to the address, it's only going to be displayed based on the provided link, however I do believe that with time we will have 'Userfeeds Explorer', therefore I want to have it as component-based as possible.
Widget details a) Expiration date b) Whitelist treated as filter, providing explanation on hover. Whitelist's attached to the address and can't be changed. c) Algorithm treated as ranking mechanism, providing explanation on hover. Works as dropdown, we can change an algorithm to show different sorting mechanism, however we should indicate that it serves only as a preview and widget's using different algorithm. d) 'Add new link' in fixed position on the right of the list.
Lists a) Slots i. Number of the slots (Filled / Total) ii. Label (Visible in the widget) iii. Short explanation (could use help here @maciejolpinski ) b) List position in Slots list i. Boost consists of probability + score, I'd use the same structure as in Boost component -> #131 to suggest the exchange ii. Title, description and link iii. Blocks timestamp - we can provide time on hover, however we need to discuss what kind of time we want to use. I'd opt to start calculating time in blocks and 'real-time' info on hover. iv. Amount of bids - I would really like to make it expandable in future, it could work as discovery mechanism as well c) Approved Similiary to the 'Slots' list, we few minor differences: Inform user that this link will not be displayed in the widget

Problems: In this scenario, if we change 'algorithm' then links will swap places, some of them could change place from 'In slots' to 'Approved'. I think we would have to make it super clean, dunno if possible. Perhaps to avoid confusion at this stage, we should only show currently selected algorithm by publisher with description. I do believe tho that it could work as a very good gateway to 'Userfeeds explorer'.

I think this changes could work as a nice bridge to 'cryptopurr efforts'. I wanted to introduce very simplified user account to show aggregated activity happening on this address. If there's no activity just to inform user that user can at this very moment start aggregating links on this address, while we provide tools to distribute them in most efficient way (LE Direct, LE Streamers, others). I will continue this one in #169

example This is short example of what could happen whenever user selects Algorithm that's different than one used in a widget, just to visualize what I've meant above.