Author Topic: Formatting dialogues  (Read 24993 times)

Sekoia

  • Titan Network Admin
  • Elite Boss
  • *****
  • Posts: 1,848
Formatting dialogues
« on: September 19, 2010, 05:38:04 PM »
So I've been toying around a bit with formatting dialogues and here's what I have to show for it:
http://paragonwiki.com/wiki/User:Sekoia/Sandbox/Dialogue_Testing

I have two primary goals here.

The first is that I'm trying to represent the in-game text in a way that's fairly similar to how you'd see it in game. There's a few reasons for this. It makes it very clear that the text is the game's text, and not ours. It allows us to provide both text and response(s) in a way that makes sense. It's familiar since it matches the game. And it stands out, making it easy to pick out dialogue from the rest of the article.

The second goal is that I'm also trying to provide a framework for handling the new branching/flexible dialogue options we see in game. I really don't like the indentation method we've been using for this. Not only does it look (in my opinion) unfinished, but it also doesn't really represent how all of the dialog works in game. In some cases, you don't have a simple tree. In Nance's mission where you talk to Agent G, for example, all of the steps give two options; the second in each case leads to the same destination. I also think I've seen stuff in Praetoria where you can explore a menu of choices and go about them in an arbitrary order; that can't be represented in a tree. So instead, I'm simply linking things together. Each dialogue window can have an anchor tag. The options in the dialogue windows can link to other dialogues. And a dialogue can also list off what responses might have led you there. This loses some of the visible structure we see in current layouts, but at the same time, that visible structure can't be applied universally anyway.

There's a few caveats with the current design. I'm colorblind, so I don't have the colors perfect. I figured those could be improved later. The link text is in particular difficult to view, but that'll require global CSS changes (doable, but I didn't want to much with the global stylesheets at this point...). Also, it looks best in Google Chrome. It also works in MSIE, but it looks slightly different because MSIE doesn't support using CSS rounded corners. I haven't tested Firefox.

Before I go any further exploring this, I wanted to get some opinions. No point in putting more time into it if it's universally despised. ;)
« Last Edit: September 19, 2010, 05:43:38 PM by Sekoia »

eabrace

  • Titan Moderator
  • Elite Boss
  • *****
  • Posts: 4,291
Re: Formatting dialogues
« Reply #1 on: September 19, 2010, 07:28:20 PM »
I like it.

(But then, this is not all that different from what I wanted to do with contacts waaaay back when I first started editing the wiki, so I'm biased.)

I would suggest a lighter color on the backgrounds, though.



(Screenshot from Firefox, BTW.)
Titan Twitter broadcasting at 5.000 mWh and growing.
Titan Facebook

Paragon Wiki admin
I was once being interviewed by Barbara Walters...In between two of the segments she asked me..."But what would you do if the doctor gave you only six months to live?" I said, "Type faster." - Isaac Asimov

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #2 on: September 19, 2010, 09:17:48 PM »
I like it... but... I would recommend completely different colors... if I'm to be frank, right now it looks very bad. :/

I would also not make it so *IN YOUR FACE* *OMG I'M A CONTACT DIALOGUE* *HORRY CHITS*

I recommend making use of {{divbox}} or at least use similar styling (thin lines, pale colors) - that's the style that's used throughout the wiki.
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

taosin

  • Boss
  • ****
  • Posts: 245
Re: Formatting dialogues
« Reply #3 on: September 19, 2010, 10:22:27 PM »
I like it as well.

On a possibly related point: at present when dialogue includes yellow text, I'm posting it in black (as yellow is very hard to read against the light background of the wiki; whereas in-game it's on a black background which is ok).

When dialogue includes yellow text that is describing what a contact does, I'm posting it in italics.

Sekoia

  • Titan Network Admin
  • Elite Boss
  • *****
  • Posts: 1,848
Re: Formatting dialogues
« Reply #4 on: September 19, 2010, 10:30:55 PM »
I added some global stylings for the links. You may have to clear your browse's cache for them to reflect, though (see the top of Mediawiki:Common.css for directions). I've basically made them white if unvisited and silver if visited. The colors aren't ideal (they can get tweaked by someone else who isn't colorblind later), but at least they're now readable.

I'm trying to match the in-game styling here, and the in-game dialog box is on the darker side. If we make it light, we can't use a white font like is used in the game. And if we make it a light background, we also can't use the special colorings that we see in the in-game dialog text. Well, we can, but then it often ends up unreadable if the game uses lighter colors and in some cases, that leads other editors to understandably just strip those colors out later.

I did tweak the other colors a bit as well -- I have no idea if I made them worse or better. I also made the border thinner. And I added a parameter that should make Firefox round the corners.

taosin

  • Boss
  • ****
  • Posts: 245
Re: Formatting dialogues
« Reply #5 on: September 19, 2010, 10:38:21 PM »
The improvements are better.

I'm now thinking that in a standard contact page, the dialogue is going to have the main visual weight on the page -- wondering if that will make it harder to find/notice other elements such as mission objectives, enemies and so on?

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #6 on: September 19, 2010, 10:40:43 PM »
I'm trying to match the in-game styling here, and the in-game dialog box is on the darker side.
Which works because the in-game window is surrounded by colors, often slightly on the dark side (there aren't very many BRIGHT places in the game).

It doesn't work on Paragon Wiki because it's surrounded by a white background, which means the darker colors that work in-game need to be toned down so that they're not *STUNNING* against a white background.

I'm playing around with some colors that will preserve the "look" of the in-game window but will play nicer with Paragon Wiki's white/light blue scheme.
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

taosin

  • Boss
  • ****
  • Posts: 245
Re: Formatting dialogues
« Reply #7 on: September 19, 2010, 11:07:41 PM »
It doesn't work on Paragon Wiki because it's surrounded by a white background, which means the darker colors that work in-game need to be toned down so that they're not *STUNNING* against a white background.

Which is precisely why I've been rendering yellows as black and italic (as above). My thought was the wikia valued clarity and an understated thematic excellence :)

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #8 on: September 19, 2010, 11:33:31 PM »
dialogue color suggestions

I like Sekoia's changes to the top "reference" links to make them white, however this makes links within the "body" of the dialogue obscured ({{yellow}} and {{orange}} are links!)
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

Sekoia

  • Titan Network Admin
  • Elite Boss
  • *****
  • Posts: 1,848
Re: Formatting dialogues
« Reply #9 on: September 20, 2010, 12:02:23 AM »
Well, hrm. I just changed the white-links to only apply to the references and options section. The body links are now the normal colors, but that now makes them unreadable. :( Even if they were readable, whatever color we pick (including the default link colors) is likely to get used in custom coloring at some point. Maybe we should consider a non-color means of styling? I dunno.

For the choice links, the reason I went with arrow is because I wasn't sure how to style thing choice lines in such a way that linked lines would be obvious. Just because it's colored, doesn't mean it's obvious as a link; especially with all the other coloring going on. I thought an arrow would be a more obvious signal for a link (because what else would the arrow be there for?). Plus, it's then very easy to distinguish which lines are linked and which aren't. (There's no reason to link dialogs together on older contact articles, for instance. And even in newer contacts, not all dialog windows will need links.) Did you have something in mind that would differentiate between linked and non-linked lines, Agge?

I'm also not sure I like the lighter color in Agge's demo. It doesn't really look as much like the in-game window. And it looks too light to me, lol. But I think I can live with that if consensus prefers it.

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #10 on: September 20, 2010, 12:10:00 AM »
Differentiate the "selectable" ones with an arrow on the end? Other options that don't lead to other dialogue (like "Leave" or the last choice in a dialogue line) don't get an arrow? I'm not sure how to easily template that.

My demo looks like the in-game window. It's just lighter than the in-game window. It's going to need to be lighter, period. That's the point: the darkitydark colors from in-game don't work against the whitespace surrounding dialogue options in Paragon Wiki. They work in-game because in-game is darker.
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

eabrace

  • Titan Moderator
  • Elite Boss
  • *****
  • Posts: 4,291
Re: Formatting dialogues
« Reply #11 on: September 20, 2010, 12:33:54 AM »
All in all, Contact dialogue in-game is going to look a little different for everyone depending on how they have their windows options set up.  I have mine set to only about 28% opacity, so I see most of what's behind the window when I'm reading dialogue.

My preference if I have to choose between one or the other would be the lighter background on Agge's example.  It may not exactly reflect the in-game look, but it's easier to to read in most cases (blue text being an exception.)

Checking with Vischeck, it looks like Agge's example should be a little more friendly for colorblindness.  However, since I can't say first-hand how accurate that representation is, I leave that to Sekoia to determine.

Sekioa's example through Vischeck
Agge's example through Vischeck
Titan Twitter broadcasting at 5.000 mWh and growing.
Titan Facebook

Paragon Wiki admin
I was once being interviewed by Barbara Walters...In between two of the segments she asked me..."But what would you do if the doctor gave you only six months to live?" I said, "Type faster." - Isaac Asimov

Sekoia

  • Titan Network Admin
  • Elite Boss
  • *****
  • Posts: 1,848
Re: Formatting dialogues
« Reply #12 on: September 20, 2010, 12:48:27 AM »
I just happened to look at a mission dialog against a really light background in game and sure enough, it actually does look considerably lighter -- even lighter than Agge's version, actually. So I concede. :) I went ahead and updated my template to use Agge's color.

(I'll take a look at some of the other stuff later.)

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #13 on: September 20, 2010, 01:00:54 AM »
Quickie mockup for differentiating between selectable lines and non-selectable. (view)
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

Sekoia

  • Titan Network Admin
  • Elite Boss
  • *****
  • Posts: 1,848
Re: Formatting dialogues
« Reply #14 on: September 20, 2010, 01:53:41 AM »
Oo, I like the dialog icon Agge. I applied it to my version. It looks great when some or all of the entries are dialog links. Unfortunately the indentation looks a bit weird when none of the options have links, and it also looks fun when it wraps. But I think we can fine tune that. (I'll work on it a bit.)

Taosin, you have a good point with respect to the other elements on the mission pages. Some of them may need to have their visual presentation improved as well.

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #15 on: September 20, 2010, 03:11:19 AM »
Just a note: that icon was made via tweaking the "Insert Quote" button on these forums. Don't know if we want to actually use THAT icon or make our own (Liz? :) )



Also: In your Borea section, you list one of her greetings as a mission dialogue option, when it's not. Those are already documented in "Greeting" subsection under "Introductions".



Also also: the Azuria section looks terrible compared to the current version. That would definitely need to be thought about before going through with it. I don't know if "Unnecessary Solicitation" needs to have the dialogue box, and I'm iffy whether we need the "Briefing"/"Mission Acceptance" with the introduction of the new dialogue template.

edit: I think if we implement these in the old style contacts that don't have branching dialogue, there needs to be a way to incorporate the Briefing/Mission Acceptance/Unnecessary Solicitation into the template. That would get rid of the weird look that Azuria has.

Perhaps a second template, {{Contact Branching Dialogue}} as the current demos are, and {{Contact Dialogue}} for non-branching contacts that include Briefing/Mission Acceptance/Unnecessary Solicitation headings instead of reference links at the top (briefing/acceptance should be optional, due to chained missions).

edit2: {{Contact Dialogue}} versus {{Contact Branching Dialogue}}
« Last Edit: September 20, 2010, 03:23:08 AM by Aggelakis »
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

Sekoia

  • Titan Network Admin
  • Elite Boss
  • *****
  • Posts: 1,848
Re: Formatting dialogues
« Reply #16 on: September 20, 2010, 03:46:44 AM »
The Borea section was just some content I grabbed out of game so I had someplace to start with, for mock-up purposes. I was trying to match what was in game on those as a point to start with. They have several things we'd probably not want to include: the "Leave" option, a choice of two random missions, etc.

I wonder if the inconsistent indentation is a factor that's contributing to the sense of clutter? I removed the left/right spacing on the dialog boxes so that it lines up better with other things. Does that look better or worse?

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #17 on: September 20, 2010, 03:59:38 AM »
Having the text out of the box is still jarring, though less so now that it's not at a different indentation. I updated my non-branching demo to flesh it out a little.


(If we do this, we REEEEEALLY need to update {{Mission Obective}} so it's more noticeable.)
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

Sekoia

  • Titan Network Admin
  • Elite Boss
  • *****
  • Posts: 1,848
Re: Formatting dialogues
« Reply #18 on: September 20, 2010, 04:14:57 AM »
(If we do this, we REEEEEALLY need to update {{Mission Obective}} so it's more noticeable.)

Yeah, definitely. I'm tempted to say let's format it like it'd be in game, but I suspect that'd look horrible since in-game it's a rather smallish box.

We may also need to update the stylings for the text that pops-up when you enter the mission and the message you receive when completing the mission.


Your non-branching demo is growing on me, I think I'll ruminate on it a while.

taosin

  • Boss
  • ****
  • Posts: 245
Re: Formatting dialogues
« Reply #19 on: September 20, 2010, 11:49:20 AM »
... versus {{Contact Branching Dialogue}}

I'm finding that the red and darker green are difficult to read on the grey background (especially from my normal reading distance), I think it may be a moire-type effect.

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #20 on: September 20, 2010, 01:28:29 PM »
That's why the green says "might need ltgreen template". Not sure about the red, I can read it fine but if it's difficult for others, we'll have to think of something for it.
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #21 on: September 21, 2010, 06:41:04 AM »
Did quickie (REALLY quickie) templating for mission objectives and clues to match up with the contact dialogue boxes. This makes them not fade into the background!

However, now it's big blocks of color followed by more big blocks of color, followed by more big blocks of color... Need to choose a color scheme for each one that complements the others but allows a user to find the correct block of color at a quick glance. Don't know what colors to suggest. Recommend keeping the "title bars" the same through each template, just changing the background/"body" text colors (meaning it needs to play friendly with whatever color is chosen for the "title bars", currently goldenrod-ish).

Also, need better icon suggestions for the title bars. :p

(view)
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

taosin

  • Boss
  • ****
  • Posts: 245
Re: Formatting dialogues
« Reply #22 on: September 21, 2010, 08:48:16 AM »
> now it's big blocks of color followed by
> more big blocks of color, followed by
> more big blocks of color

Yes it is! I'm so used to the current wiki I'm having issues imagining how this might look when widely implemented, and what impact (if any) it has on the usability and feel of the wiki. I'd imagine a good ToC on each page will become even more important ???

In your example, I'd prefer the Mission Objective to be left justified rather than centre-justified.

Again, my $0.02 worth!

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #23 on: September 27, 2010, 06:52:10 PM »
Sample page from a multi-mission, multi-arc contact that includes all of the quickie templates I made for all of the other, non-dialogue templates. Still needs A LOT of work on colors and emphasis, as I think the {{Mission Objective}} box needs to be the most obvious box on the contact page, but right now it's vying with {{Contact Dialogue}} for impact, since they're using the same coloring. I faded out {{Clue}} and {{Ambush}}, and once I can figure out how to twiddle with {{NPC Text}} without ruining the collapsability, it will also be faded like Clue and Ambush, since those are not *as* important as Mission Objective.

EDIT: I figured out the {{NPC Text}} thing. I was having trouble figuring out where to put the style bits, but it's all figured out now. Preliminary color choices made, can probably be made better.
« Last Edit: September 27, 2010, 07:24:03 PM by Aggelakis »
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

taosin

  • Boss
  • ****
  • Posts: 245
Re: Formatting dialogues
« Reply #24 on: October 06, 2010, 05:21:49 AM »

Zombie Man

  • Elite Boss
  • *****
  • Posts: 296
Re: Formatting dialogues
« Reply #25 on: October 06, 2010, 06:25:00 PM »

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #26 on: October 07, 2010, 01:12:47 AM »
I have twiddled with my mockup (other mockup). I have implemented:

  • Faded out the contact dialogue so that Mission Objective is the most emphasized template
  • Replaced "Mission Objective" at the top of the template with the actual mission objective (tentative suggestion)
  • Left-aligned the mission objectives inside the template
  • Made Ambush and Clue thinner than Mission Objective and Contact Dialogue to de-emphasize them
  • Centered and basically-matched NPC Text width with Ambush and Clue (slightly smaller boxes at high resolution -- use of {{hidden}} makes it hard to match exactly)
  • Changed "Unnecessary Solicitation" to "Check-In Text" (aka "Still Busy Dialogue" in MA, but the wiki uses "busy" to mean "too many missions open" already, which would make "Still Busy" confusing)

Regarding white space, none of the other boxes (except maybe MeritAward) have content that works all on one line. They all really need their descriptive titles. There isn't actually a lot of white space unless there are short sentences within a box (creating right-side white space).

EDIT: Regarding {{Mission Objectives}}, how the heck do I get rid of that ugly white padding around the image thumbnails (other mockup)? It's only present if using "thumb" inside [[File:]]. It is ugly!
« Last Edit: October 07, 2010, 01:56:47 AM by Aggelakis »
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

Aggelakis

  • Elite Boss
  • *****
  • Posts: 3,001
Re: Formatting dialogues
« Reply #27 on: October 07, 2011, 09:20:51 AM »
Bob Dole!! Bob Dole. Bob Dole! Bob Dole. Bob Dole. Bob Dole... Bob Dole... Bob... Dole...... Bob...


ParagonWiki
OuroPortal

eabrace

  • Titan Moderator
  • Elite Boss
  • *****
  • Posts: 4,291
Re: Formatting dialogues
« Reply #28 on: October 07, 2011, 01:10:44 PM »
Cool.  I think that'll work most of the time.

(Prometheus is still a "special" case.)
Titan Twitter broadcasting at 5.000 mWh and growing.
Titan Facebook

Paragon Wiki admin
I was once being interviewed by Barbara Walters...In between two of the segments she asked me..."But what would you do if the doctor gave you only six months to live?" I said, "Type faster." - Isaac Asimov