Updated visual design about adventurelookup HOT 77 CLOSED

Drafts
Drafts are my way of solving a few problems, and are based on the assumption that these records require a good deal of effort to enter, and update. My experience has been that as the level of entry-effort rises, the risk of people becoming frustrated and abandoning their work increases.

So a draft is a very cheap way to let a user save their work without it cluttering up the system in the event of errors, or partial data. It might not be that useful of a feature though, so I'd say it can go the bottom of the implementation list.

Errors
I don't think, at the moment, there are many/any required fields, other than the adventure name. We should work with @MattColville to determine what values would be minimally necessary for a new adventure submission.

Create/Edit/Read
I went with a horizontal layout during edit and creation mostly out of experience. Tight, perfect layouts during field entry always suffer from a few issues. How do you communicate errors? Where does help text go? What happens when the user's entered text is longer than the layout is capable of showing?

I had originally planned on just re-using the read-only view (which I think should look very laid-out), but as I tried to place help text, errors, etc. I ran into all of those problems and decided to punt to long-list view.

Home Page (L)
This was intended as the moderators home page, to make it quick for someline like @MattColville to log in, and see what work needed to be done on the database in terms of approvals. I'm not 100% happy with the presentation at the moment, so I'll revisit and make that clearer. Normal users will, however, see the regular home page without all the moderator artifacts.

Notes/Reviews
Those are tabs, but clearly they aren't clearly tabs. I'll revise to make that clearer.

Price
Easy to throw out if we don't think it has value. Also easy to automatically pull from DriveThruRPG and DM's Guild, once we have those links.

from adventurelookup.

Ah, maybe you were looking locally and the random adventures didn't contain many 5e adventures. The list is sorted by the number of occurrences.

from adventurelookup.

You had referred to the three rating questions, I don't see those in invision, are they part of the sketch files, I presume?

from adventurelookup.

They're in the Invision screens. Click on the Grid icon at the bottom right, and search for "Free Adventure Reviews (User)" in the screen list.

The review UI is at the bottom of that screen.

from adventurelookup.

Oh ok they just aren't tied into the UX clickables, thanks!

from adventurelookup.

Yeah, I need to go back through and fix the hotspots again. I'm trying to keep them up to date, but it's low on my list as I try to get the files organized and ready for development.

I'll make sure I stay on top of that though.

from adventurelookup.

Not a big deal

from adventurelookup.

So are you planning on implementing all of the visual designs yourself? You were also talking on reddit about trying to also do it w/ vuejs? Were you thinking of doing that incrementally, PRing it in as you finish it, or in one big PR once its all done?

from adventurelookup.

I think it'll be incremental somewhat. I'll have to graft a JSON API into the existing code base first, so that'll be one PR, then I'll want to implement a feature parity version of the current UI, and finally an "upgrade" which adds any new feature that gets dreamed up.

I don't really see a good way to do the UI incrementally though. One way or another, I've gotta rip out the markup, and restyle it, and that's before breaking up the site into Vue components.

I'll probably create a branch and a new staging server so people can track the progress.

from adventurelookup.

Can we make the layout and styling changes before implementing an API or refactoring into a Vue app? It would be really nice to get the current site looking better quickly. Rather than grafting on an API as a band-aid, could we just get the HTML/CSS looking better, then start a branch focused on proper refactoring to a Vue.js app backed by a proper API?

Mostly, I just think it would be great to get some quick improvements to design and usability. While an API is absolutely the right solution in the medium-term, it seems we could get some quick wins by improving the current markup.

from adventurelookup.

Is a quick win necessary? The current solution is working and patches based on feedback are easy enough with Bootstrap.

I'm happy to try a more incremental approach if I can think of way to do it without knowing I'll just have to redo a bunch of stuff later.

I don't think an API is going to be all that hard, really. There's not much surface area to the current application. A complete REST API is maybe a night or two of work.

from adventurelookup.

The current interface was never meant to last into deployment...which we've quickly jumped to. So yes, I think there is an argument for the quick gains augustyn refers to.

from adventurelookup.

I've crafted a bulk edit screen and altered ratings / reviews so it's a thumbs up / thumbs down model.

Does anyone see anything lacking that I've forgotten (keeping in mind some stuff is being re-used between undocumented states such as edit mode looking like create mode).

@Harkenn, @MattColville, @jsaugustyn?

from adventurelookup.

The "Review and approve" screen (is that the Bulk edit one?) looks good, but will be interesting to implement to say the least. Still, I like it.

The altered review/rating screen looks good. Should we put the thumbs up / thumbs down next to each other on the left? Just a thought, its not a strong opinion.

On some of the other designs, now that I've thought about it a bit more:

• Do we want to differentiate "draft" from an "adventure that has empty data points" ? A draft would (presumably) be private, but since editing existing adventures should be easy, shouldn't submitting an adventure (however incomplete) be more valuable than saving a private draft?
• If we remove draft and allow users to submit an adventure, however sparsely populated, does the "Errors" page make sense? Should it be less imposing or use different phrasing such as "This adventure is largely incomplete" or "This adventure is missing a number of data points, can you help?" similar to how wikipedia does for low-quality articles?
• Create/Edit adventure screen could have a better layout, since we're moving to static models. Most of the things there don't need their own line. Hell, if it could resemble the "Adventure Details" page, that would be best?
• Home page (L) - each adventure row takes up quite a bit of space. The footers that show last updated/recently created that aren't on the "Home Page" screen might need to go? The 'new' could still show up on the top-right hand corner of the adventure card, when appropriate.
• How do you get from "Notes" to "Reviews" on the adventure details page? They seem to occupy the same space mutually exclusive to one another. Tabs?
• Elsewhere, did Matt question the "price" data point? I thought I saw that come up on reddit somewhere?

from adventurelookup.

Quick update - work has been a bear the last week, but I started my initial build last night. Should have something working for review in a few days.

from adventurelookup.

You're working off of dev, I presume? It has all the static models now

from adventurelookup.

I'm working in isolation at the moment. Until I have the key components and styles in place, I don't want to be fighting with the underlying code. Easy enough to mock everything.

from adventurelookup.

Once I have the basics in, I'll start working with live ammo.

from adventurelookup.

I finally got some time on my creative teams schedule on Friday.

First pass at a logo is attached, what's everyone think?

from adventurelookup.

Looks good to me!

from adventurelookup.

Have you made implementation progress on this @etchalon ? If not significantly, I can put some time in on this.

from adventurelookup.

I have. I've got the search UI complete, and am working through secondary screens and clean-up.

Works been overbearing the last three weeks, but I'm heading to GenCon Wednesday and should have something showable soon. Will def. need help once I've got the main work down.

from adventurelookup.

from adventurelookup.

Hey @etchalon if you have some piece of this already done, I would strongly encourage you to submit a PR and let us see / help build on it. If you don't have anything meaningful done on it just yet (implementation wise) let us know so that someone else can try to pick it up and run with it.

from adventurelookup.

I'll get something together over the weekend that people can dig into.

from adventurelookup.

I picked this up over vacation and spent a few hours on it. Here's what I've got thus far (the filter panel isn't quite finished):

In particular the search being in the left hand filter still bothers me, and the buttons there are aggravating too. I'm thinking of moving them to the right, something like this:

Thoughts @MattColville and @etchalon if you're still around?

from adventurelookup.

Is this just a visual design, or have you started on the CSS changes?

from adventurelookup.

These are screenshots from my local dev environment, CSS changes.

from adventurelookup.

A few more screenshots. I've taken some liberties, I'm afraid, with the design...

Ignore the icons that appear in some of the inputs (on the right hand side of the login / register areas). Those are added in by my password manager in Chrome. The login / register / reset password are all pretty lazy changes and differ the most from the designs. The designs suggested that they be modals, but AL doesn't use modals (yet?) for those pages. The changes to the adventure page differ from the design doc as well.

• We won't have a price field (or even a boolean "free" / "not free") but that was present in the design
• Left hand / Right hand sidebars felt very awkward and confining. The left hand sidebar in particular didn't feel like it served a purpose after I built it, so I combined the AL logo into the right hand menu.
• After I removed the left hand sidebar, the ux from the adventures-list (left hand filterbar) to the adventure detail (right hand filterbar) was sub-optimal. Moving the sidebar back to the left keeps the UI from jumping around...it felt much better having that sidebar consistently on the left.
• Current AL already has the ability to click on - say - an author's name to search for other stuff matching that same value. The "magnifying glass" that we have right now is really cumbersome and odd. Instead, I removed it and integrated the clickability functionality into the text itself. The helpful tooltips are still there, as shown in the above screenshots.

Right now there are some secondary screens that should be quick to get done...and the sidebar on the adventure-detail page and its "floating buttons" still looks odd to me. I'll experiment with making it more like the styles of the filter page (grey backgrounds of varying shades) to see if it feels any better. I also need to integrate the "Bookmark" functionality (which is on dev but not on production) so that it matches the current designs.

Edit: Oh! I also need to add the black "login" header (which changes to a menu after you login)!

from adventurelookup.

This looks great, Robert!

I'm truly, insanely sorry, that I've never been able to find time to implement the design myself beyond some basics. I'm attaching a screen shot, of about as far as I got in my insanely limited free time.

I have a few overall notes, thought it might be easier/faster if I was able to just edit your CSS.

Functional:

1. I know the left/right hand sidebar felt weird, but the intent was that the left hand "mini" element would always either take you to the home page, or back to your original search. Second, using the right hand side bar provided a different context expectation for what could live over there. Basically it was "left column (search/back) middle (content/results), right (object actions). There's also an aesthetic consideration that the centered buttons just look kinda awkward :/

2. I'm not sure the clear all filters button is well placed. It's too close to search. Dangerous actions like "clear all the work I've done to filter my results" should be kept fairly far from intentful actions like "search". I'd also argue it's not necessary, since users' can just click the logo / go home to clear out their work.

Aesthetic:

1. I'm worried the typefaces you used for the body don't read as well as the Adelle / DIN combo. The body font in use feels hard to read at small sizes, and the right hand column font clashes a bit with the logo.

2. For link text, I'd use dark orange, instead of the blue.

3. For the list boxes, the bullets look out of place, and the type text overwhelms the monster name. They should be of equal visual weight.

4. The drop shadows aren't quite right. I can provide CSS for the shadow effect I used in the original design. It's less of a shadow" and more a subtle raise.

I can provide the fonts if need be, or, if you have a public branch, I can go in there tonight / tomorrow and make updates.

from adventurelookup.

(Most of my time wasn't being spent in CSS, sadly, but me futzing around with the VueX store to make the object structure for search really easy to modify and track throughout the application … lost so much damn trying to make it perfect, I neglected doing the rest of the UI)

from adventurelookup.

I don't think the primary use case will be people setting up tons and tons of filters that they risk losing. We can always put a confirm on the reset, but generally speaking, resets next to submit is what users will expect.

The body typeface is standard bootstrap, I think in this case its rendering Segoe UI because I have it locally.

I don't mind changing the link color, but I've had mixed experience with "themed links" vs "standard link" when it comes to color. As of late I've found more traction with the average web-user with just sticking with blue links, but that's just my experience.

Default badge weight is 700, without it, the badges are equal weight. I tried a smaller font, and it just didn't work.

The fonts you had mentioned in the original ticket were specifically listed as premium fonts. Most non-free fonts do not permit open-source software to use them without a commercial license. They're still regarded as a commercial entity which needs a commercial license. I think I have 3 specific fonts in use, Roboto, Roboto Condensed, and Arima Madurai (sparingly used).

My fork of AL is public, you're welcome to fork it and submit a PR or if you'd like, there will be an opportunity while its on dev for you to PR against it. I'm hoping to finish it this weekend (I'm working on it right now actually).

from adventurelookup.

"Reset next to submit" isn't what user's expect. I can't think of many / any widely accepted UIs which place a destructive action like that near a intentional one. This is widely accepted in UI best practices; Don't put work-destroying things near the thing which does the work. It's asking for trouble.

Look at other faceted search examples (eBay, Amazon). They don't have a clear all filters button at all. Google's shopping site has one, but it's at the top of the left hand column above the filters (which makes more sense logically).

A confirm prompt is a solve, but it feels like a hackish solve. Better button placement would solve the problem too, or removing it altogether as it's easy enough to just go home and start a new search.

For the type faces, if they need to be included in the repository (as opposed to through a Typekit license that's URL locked), maybe we'd look at DIN alternatives, like Gidole. For Adelle, I'll have to do some quick studies on other slab serifs that would work. The paring of a DIN and a slab serif was intentional, with the DIN being used for all ornamental / UI text, and the slab for all copy text.

On the badges … it look so awkward I don't know if a badge is the right solution there, then. "Pilling" the badge a bit and compressing it might work, or using a less stark Monster Name (Type) mechanic.

I'll take a look at your repo now and see what I can do.

from adventurelookup.

After some experimentation, looks like Open Sans, Open Sans Condensed and Roboto Slab work fairly well together. All are free. Attaching screenshot.

from adventurelookup.

I've got your repo pulled down and building, though it looks like you may have forgotten to add the "vendor" directory under webpack/sass in your commits?

from adventurelookup.

Yep I've got a couple of commits that fixes all of that. One minute and I'll push it up

from adventurelookup.

Thanks!

from adventurelookup.

I just pushed up another commit that adds in the header elements for both the login/register button and the extra navigation elements you get when you're an admin or curator.

from adventurelookup.

Awesome. I'm working on the sidebar, getting the logo and fonts in place plus new elements for the things I hadn't accounted for in my current design.

Trying to make the logo my team made work too, but it feels off in context.

from adventurelookup.

Any hints on getting live-reload or hot swap working right?

from adventurelookup.

nvm guess it's the weirdness of vagrant. running it on the host solves.

from adventurelookup.

npm run dev usually works. The webpack config is written with Encore. I've not used it before...it feels like shit. Something about this VM also just feels slow. I've not bothered to dig into the vagrantfile to look at it, but its definitely way worse than any other I'm running.

Windows, Vagrant, VirtualBox.

from adventurelookup.

I think there's a missing migration. Getting an error on the adventure screen:
"Column not found: 1054 Unknown column 't8.show_in_search_results' in 'field list'"

from adventurelookup.

Robert, are you available online anywhere? Wanted to talk through your intent on the sidebar.

from adventurelookup.

Made some visual updates to the sidebar, which are closer to my original intent, but which play off the changes you made, Robert. I've also settled on Fira Sans Condensed for the UI font, as Open Sans just felt too generic.

from adventurelookup.

I've broken some of your styles, Robert, so a PR isn't quite ready, but wanted to show progress.

from adventurelookup.

Looks good. If you have one or more filter options selected, and the options list is closed, is there an indicator that tells you you have selected options? Based on the gif above, it doesn't look like it?

from adventurelookup.

from adventurelookup.

Yeah color could work. Maybe background color to something more coral colored?

from adventurelookup.

@etchalon please be careful about replying from e-mail. You doxxed yourself because your signature includes full contact information. I've edited it out because I noticed it but you might not always be so fortunate

from adventurelookup.

Thanks! Was on my phone and didn't think about it.

How wedded are we to the icons, at least in the tags? I feel like either we need to include the icons in the sidebar (which adds a LOT of visual clutter) or just eliminate them altogether. I don't think they add much, as the labels are unique enough on their own.

from adventurelookup.

(I'm also not a huge fan of FontAwesome's icon set, maybe it'd be less terrible if we had some custom ones…)

from adventurelookup.

Also, can I ask why the boolean options have three possible values (All, Yes, No) ?

Seems like a simple "Yes" would suffice for all off the options. None of them are such that I think a DM would want to search for something which specifically doesn't have that option.

This might be a @MattColville question.

from adventurelookup.

Also, can I ask why the boolean options have three possible values (All, Yes, No) ?

Ease of implementation

How wedded are we to the icons, at least in the tags?

I think there's meaningful value for associating icons to certain things (the most frequently used ones, particularly system, length, common monsters, boss monsters, items, and maybe others?). Some of those would be better suited to have custom icons, but I don't think the value is big enough to put any time into it myself.

tldr; I'd like to see them kept, I see your argument about using them in the filter bar for consistency

from adventurelookup.

Sadly, they look like garbage in the sidebar.

I'll see if I can find a set that translates to smaller sizes.

from adventurelookup.

In terms of "Ease of Implementation", I'm not sure what that means.

If I do the work to make them simple toggles, would there be a disagreement?

from adventurelookup.

Symfony's handling of those values (null, bool-true, bool-false) means that yes no all makes it easy to handle. Its just a convenience thing translating how the backend handles those values. Its certainly not all that much more difficult to handle them as - say - "on off" toggles. Getting stuff out is better than getting stuff perfect.

We don't want to hold stuff back, we have to be pragmatic. I mention this in particular because I'm fine with doing a pass or two to finish off the design but I don't want to hold it beyond what is pragmatic.

from adventurelookup.

That's why they were done as 'yes no all'...just to allow christian to get AL out quicker. We can refine and polish that now, or in the near future, or whenever...really

from adventurelookup.

I gotcha.

With you taking a first pass, and me having the freedom to go in and clean things up, I think the pragmatic concerns are less.

I won't sink much time into it, but since the sidebar really IS the primary interface for most users, I'd like to get it right.

from adventurelookup.

Sidebar animation preview:

from adventurelookup.

That's fine. I'll hold a day or two because tomorrow aught to be a busy day for me, but I'd like to get it merged into dev after that. If you're still working on your changes beyond that time frame, just put them in as a separate PR after you finish them

from adventurelookup.

Do you know what's going on with the schema error posted above?

Again, when visiting any adventure I get:

`An exception occurred while executing 'SELECT t0.id AS id_1, t0.version AS version_2, t0.content AS content_3, t0.approved AS approved_4, t0.created_by AS created_by_5, t0.changed_by AS changed_by_6, t0.tag_id AS tag_id_7, t8.id AS id_9, t8.version AS version_10, t8.title AS title_11, t8.approved AS approved_12, t8.type AS type_13, t8.description AS description_14, t8.example AS example_15, t8.use_as_filter AS use_as_filter_16, t8.show_in_search_results AS show_in_search_results_17, t8.created_by AS created_by_18, t8.updated_by AS updated_by_19, t0.adventure_id AS adventure_id_20 FROM tag_content t0 LEFT JOIN tag_name t8 ON t0.tag_id = t8.id WHERE t0.adventure_id = ?' with params [14]:

SQLSTATE[42S22]: Column not found: 1054 Unknown column 't8.show_in_search_results' in 'field list'`

from adventurelookup.

I'll finish my first set of changes and do a PR to your repo for those.

I'll likely want to touch every screen, but I don't think we should hold release until that happens. What you have is already a very, very solid improvement.

from adventurelookup.

That SQL error references a missing column in a very very early migration. You'll need to reset the schema and run the migrations again. I think the command to drop is as follows:

app/console --env=prod doctrine:schema:drop --full-database

The other commands you'll need are in the readme. These should all be run from within the VM

from adventurelookup.

What all have you been able / plan to do? Did you do any work on the login, register, or forgot password pages? What about the edit/new adventure form?

If you're not planning / not able to work on them, I can try.

from adventurelookup.

My fork is public, on my account, and I've pushed all my changes if you want to check it out.

Primarily, yesterday, I worked on the home screen, and the sidebar.

Left to do on the home screen:

1. Booleans need to be a single toggle.
2. Larger lists need a filter field at the top (the Monsters, Found In fields are just unusable at their current length).
3. Header needs to be tweaked.
4. Search Box needs to be designed.

Likely be done with that by tomorrow.

After that, I'll tweak the adventure detail screen, which based on the work you've already done should be minor, and then I'll hit up the rest of the screens to drag them closer to my design.

If it'd help, here are my Sketch files. Knowing you're on Windows (?) might make them useless to you:
https://thisismess.box.com/s/rwt478k1mnfs8nf0uf6dpw3ccbgnsugo

Overall, I think so long as there's a first pass at every screen, even if I haven't touched them yet, we can push to a staging server and start to get feedback / QA on it.

from adventurelookup.

Made some additional progress last night, though not as much as I wanted:
https://youtu.be/wSCY8fFgorA

from adventurelookup.

Responsive is going to need a serious pass, but I'm going to do that second. The current site is already fairly awful in mobile, so I'm not sure it's a requirement to have it perfect for relaunch.

from adventurelookup.

@etchalon I'm working on some other stuff that I'm pretty sure isn't styled right, and then I'm going to PR this into dev. If you have some stuff done, however partial, I suggest you PR it in or else you'll need to merge it into dev on its own (and hopefully before dev goes to prod)

from adventurelookup.

Should I PR to yours? I worry we're gonna have some conflicts to sort out.

from adventurelookup.

Yeah PR to mine, if it takes me until tomorrow I'll get it merged

from adventurelookup.

Updated PR with a ton of design improvements, including the small left hand sidebar in Etch's original designs

from adventurelookup.

It's kind of a shame that 5th is not immediately visible when expanding the SYSTEMS / EDITIONS title. It is after all the current version of D&D and the one @MattColville's channel is often directly in reference to.

from adventurelookup.

It's kind of a shame that 5th is not immediately visible when expanding the SYSTEMS / EDITIONS title. It is after all the current version of D&D and the one @MattColville's channel is often directly in reference to.

I'm unsure what you mean, @j-frost. This is how it looks like for me, when expanding the System/Edition tab:

from adventurelookup.

Curious. Works for me now too. :)

from adventurelookup.

Aye, that's probably what happened.

from adventurelookup.

This is now live 🎉

Big thanks again to @etchalon and @burnhamrobertp who made the new design possible!

from adventurelookup.