dr4ft
dr4ft copied to clipboard
dr4fters
UX Support / Redesign
Continuing the redesign conversation from the Discord chat -
Hey there, here's this week's update.
First off is the latest iteration of the join flow. Instead of ditching the join table entirely I've stripped it down and relegated it to the home page for browsing (fig 1). The primary way to join now is through a small join form that pops out from under the header. A unique / custom link is generated in the draft lobby - shared with other players via 3rd party - other players submit the link into this form - they arrive in the draft lobby (fig 2-3).
.
Next is a quick refresh of the Create form - the modal dialogue has some better context now. Not much has changed other than the +Add pack button placement and the adoption of number inputs within the other dependent selections (fig 1-2). The <ol> delete behavior has also been illustrated (fig 3): when a list item is deleted the following <li>'s in the list collapse upwards in the order in which they were generated.
.
Onto the draft lobby. Once the user has submitted the create form they will find themselves in a draft lobby (fig 1-2). The current point of view is that of a hosting user (write / admin), the joining players would simply have only read access to the lefthand form. Within this form secondary draft details such as Pick type and Timer can be chosen along with custom link generation.
If changes need to be made to the draft they can be done so with the Edit form (fig 3). Limited options from the Create form can be reconsidered here. For example if the host forgot to add an extra pack, or if chat decided they'd rather play a sealed draft - that can all be done. If the host wishes to rename the draft, make it private, or change how many players the draft supports they will need to remake the draft entirely as these qualities are fundamental.
Towards the middle of the page is the Players section containing a roster of joined players. Mostly to display status, there is nothing to interact with here except for a Ready button. Currently seat order is determined chronologically by those who joined first - Some ideas about custom seat order so far are either drag and drop <tr>'s or perhaps (more engineering friendly) editable number inputs on the Seat column.
The Settings form can be accessed by all players with the gear icon (fig 4). From here preferences such as notifications, sorting and view can be chosen. Access to this form persists into the actual draft by visiting the same gear icon.
Chat is pretty self explanatory, notably it is default and locked to encourage user interaction while in the lobby, but can be minimized during the draft itself. I have some ideas about avatar's / custom colors, but that can be discussed. Attached is the form's scroll behavior (fig 5).
And now for the draft itself - to begin with there is the draft flow (fig 1). Picks and sideboarding should function exactly the same as dr4ft currently does (already nailed it), the only thing added here is the ability to minimize the main deck and sideboard sections (fig 2). Notably the card Scale here is set to the default of medium.
Below the draft header (titled "iko") there is a transparent overlay visualizing important game details. In its default state the user can see a left-aligned <tr> containing pack / pick numbers, how many packs they have lined up behind them, and the timer. There is also a lands icon, but more on that later. If the user wishes to monitor the other players' draft progress (who's got all the packs?) they can do so by expanding the overlay's table (fig 3-4). As well as the overlay table the Settings menu and Chat can all be min / maxed (fig 5)
Post draft. Once all players have made their picks and the draft has concluded the overlay <tr> is replaced with an export form. To complete the draft deck basics can be added with the land picker (fig 6-7). This can be displayed by visiting the land icon to the right. The design is super minimal as is - it can definitely get bigger if needed. I also added Waste's into the mix with return to return to Zendikar on the horizon. Lastly - after decks have finalized - the list can either be copied or exported with the newly appeared form for use elsewhere, or perhaps just to have.
These gifs were pretty big so imgur links it is.
This is quite the TL; DR, and I'm sure there's a few things I missed. Looking forward to the feedback and further iterations.
Thanks,
Justin
Modals and hover-overs
Upon further reflection I decided to go with modals for all other forms and menus. While the previous design could be more visually appealing I ended up asking - why have the user learn 3 different interfaces? The hover-overs are pretty self explanatory, but I had been meaning to address these for a while now. Hopefully they fit in well enough.
Looking forward to feedback,
Justin
@justinvoorhees added a light mode/theme screenshot with color palette in https://github.com/dr4fters/dr4ft/pull/1136#issuecomment-659185740.
looks like nice work @justinvoorhees
Interested in what next steps for this might be. Would it be possible to break this up into parts, or ask "what would be one small part of this someone could modify / build". I'd be happy to try something simple
If I recall the last conversations correctly the next iteration would be to look at the start page.
Hey there,
Yes, that was the next step. We’re you thinking about working on implementing it now?
Justin
On Mon, Sep 28, 2020 at 10:40 AM tooomm [email protected] wrote:
If I recall the last conversations correctly the next iteration would be to look at the start page.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dr4fters/dr4ft/issues/1095#issuecomment-700181404, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL5YR45MAOT7RJJMRAMBCNTSIDDATANCNFSM4NYEKD6A .
If you're talking to me - then I'd like to try and help. I would be doing it limited spare time, and might need some direction about which slice of the design is to be implemented
Hi @mixmix , and pardon the indirect - I fired from the hip through gmail. The next step would just be the landing / home page which would consist of the top nav bar, welcome message with the main call to action, and the footer. Something like this:
@justinvoorhees left some feedback at Discord regarding the current modal implementation:
I think the most impactful edit would be simply adjusting the max-width of the .modal-container to 70%.
.modal-header <h2> is inheriting a margin-block-start/end rule from div.modal-container that gives the appearance of excessive padding-top/bottom when compared to .modal-footer.
The margin-bottom rule for the .modal-section-content <fieldset> is doubling up with the .modal-section’s padding-bottom, this also appears as excessive padding-bottom.
The .modal-section <label>’s display cursor:pointer, while the .modal-section <select> inputs are displaying cursor:none. This probably was intended to be the other way ‘round.
I acknowledge the use of em/rem but for fluency I feel the text visual hierarchy could condense down to something more like <h2> font-size: 22px / <label> font-size: 18px, font-weight: medium/500.
The input fields were intended to have a background-color: #FAFBFC and box-shadow: 0px 1px #F1F2F3.
The tooltip text would look better in white.
With the addition of scss support we can apply localized changes more easily.
On Mon, 19 Oct 2020, 00:43 tooomm, [email protected] wrote:
@justinvoorhees https://github.com/justinvoorhees left some feedback at Discord regarding the current modal implementation:
I think the most impactful edit would be simply adjusting the max-width of the .modal-container to 70%.
.modal-header
is inheriting a margin-block-start/end rule from div.modal-container that gives the appearance of excessive padding-top/bottom when compared to .modal-footer.
The margin-bottom rule for the .modal-section-content
Started improving the set picker. https://github.com/dr4fters/dr4ft/pull/1474