UX Paradigm exploration

slifty commented 5 years ago

@margoyle is working on the possible UX paradigms, digging a bit deeper than the rough wireframes referenced by #39.

margoyle commented 5 years ago

Conclusions of 1/14 discussion of UX paradigm explorations: [After adding text to empty screen] begin UI flow with 04 (high level comment view). When a flag is clicked, UI changes to 05 (detailed view of flag info). From here the user can X out to return to the comment view, can click on a 'next' or 'previous' button to advance through the flags in the text, or can edit the flag to resolve it, which will close the detailed view and return to the comment overview. When the user has resolved all the flags they want to resolve, they can advance to a final 'review changes' screen that shows the original text, with flags, and edited text side by side (11).

margoyle commented 5 years ago

v1

margoyle commented 5 years ago

Some style considerations:

slifty commented 5 years ago

These are really nice -- some thoughts below -- also apologies if any of these are more granular than you want right now!

Use of color

I'm loving everything that involves color especially in here. The highlight style you're exploring (where it isn't highlighting the entire word). It conveys the concept really nicely, and seems legible.

I assume it isn't my imagination that some lines are lighter / darker than others (I assume to convey the intensity). Subtle and elegant IMHO. Is that going to be a gradient (e.g. 0 to "100") or are you thinking more bucketey like "light red" "dark red"?

As I type this I'm realizing that actually might mean that is the word you have selected! It might be worth exploring something else for that -- e.g. maybe when you select the word the highlight becomes full height. I do still think we might want to try using intensity of "partisanship score" as intensity of color.

Logo / Tooling message

Since this is the primary (well, maybe even only) digital presence of Truth Goggles (e.g. we won't have a separate "Truth Goggles website") I think we should consider using the "full" Truth Goggles logo rather than the smaller "T".

Related -- when talking with Bill he suggested that this specific tool will need some kind of name which conveys some kind of meaning to a potential user; we had been calling it "Language Check" before and he liked that.

What do you think of our top bar saying something like "[Truth Goggles logo] Language Check" Joanna is exploring some ways to incorporate the name of a tool with the core logo. Maybe we use the "T" (to your point about how Truth Goggles as a brand might not actually be what we want this to be labeled with so explicitly at first).

Grouping

Shout out to the idea of counting number of instances rather than re-rendering the same instance a bunch of times in the list. Love it.

"Partisanship Score"

I'm a wary of declaring a partisanship score for an overall article for a few reasons. The first is that I don't think we actually have a good way of measuring that; but even so I think it might come off as an oversimplification of a complex challenge (an article isn't "partisan" because it said the phrase citizen-centered more than it said family values for instance).

I think it's OK to say that certain PHRASES have a partisanship score -- but even then lets think carefully about whether this is actually measuring partisanship.

What we are actually trying to convey is "baseline risk of being perceived as partisan." <-- both for an article and the overall phrase.

Maybe instead of a score for overall, we can use words somehow. e.g. "Based on text analysis, this article is at risk of being perceived as strongly / slightly / etc. liberal / conservative leaning"

Marking as OK

There will absolutely be times when an author does NOT want to change a word or phrase (and be totally legitimate in that choice); we should support that use case / make it possible to mark an instance of a word as being fine.

On that note, the "X" might come off as being that feature -- maybe we should consider it being a "back" arrow since it is going back to the high level view.

Instances in the wild

I do think that the detail view would be well suited to try to show off some "instances" of the phrase in the wild. We may not have that section by the demo, but if we do I think it could be quite compelling. Thinking here is that providing the context of potential perception of partisanship might make it easier for an author to appreciate the risk / know how (or whether) to edit based on it.

Original vs Edited

Since the point of this screen is really to communicate what happened during the "demo" -- I wonder if we can somehow convey a "diff" view here. (e.g. https://www.diffchecker.com/diff <-- though color won't be effective)

margoyle commented 5 years ago

Explorations of how selected flags might look in the text editor. Leaning towards E but also like B. Full screen views in pdf:
selected_flags_variants.pdf

margoyle commented 5 years ago

tg_button_splash Exploration for button click 'splash' effect.

reefdog commented 5 years ago

Oh that's lovely.

reefdog commented 5 years ago

(I'm armchair-observing all this, it looks so great.) Are the various colors/weights/sizes in https://github.com/BadIdeaFactory/truthgoggles/issues/43#issuecomment-462080664 representing different ways of indicating intensity of partisanship?

margoyle commented 5 years ago

Thanks Justin! They are different ways of indicating which of the highlighted phrases in the text is being viewed in the panel on the right - hopefully clearer in the full view:

reefdog commented 5 years ago

Oh! That makes sense. 👍

margoyle commented 5 years ago

BUT, the different opacities of the highlights is supposed to indicate intensity of partisanship/prevalence of the flag... we might be trying to communicate too many things at once.

reefdog commented 5 years ago

(Again, jumping in from the sidelines, so obvs take all this lightly,) Actually I really love the opacity-as-intensity! My personal vote for "selected" would be A; seeing it in a full mockup would verify this suspicion, but I suspect a page full of underlined terms along with a single "full background" term + sidebar would be a very clear "this is selected, but also, you can still see/interact with all the others at full fidelity" mode.

reefdog commented 5 years ago

I can also imagine a nice quick animation from "underline" to "background" and back when selecting/deselecting terms.

margoyle commented 5 years ago

good point!

margoyle commented 5 years ago

Changes based on this morning's discussion.

Text window, flag highlight, stacked bar graph? (not sure how we'd use a histogram here but let's discuss), partisan language and low relevance tags reduced in size, menu changed to text, and toggle tweaked.