Author Topic: Formatting dialogues  (Read 24985 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.