Skip to main content

How to visually format questions/answers to easily follow the story? [Resolved]

I'm designing a booklet about science facts and stories for kids. The format is based on questions and answers between a teacher and a student. It's text based; few images/graphics are used. The booklet tries to emulate a real interaction between a student that wants to learn more about science and the teacher. My question is how to visually format all those questions/answers in an easy to follow the story?

Things that I want to avoid.

  • Enclose the spoken words with quotation marks. The whole booklet is a "dialog", so it will look quite ugly having every sentence/paragraph quoted.

  • Using an indicator like A: and Q:. That can help separate the questions from the answers, but it doesn't indicate who is "talking", if is the teacher or the student.

I initially thought of separating the content by colours. For example. When the teacher "talks", the font or background would be in blue. The student will be yellow. My concern is that a) it will increase the printing price b) it may become "too" colourful. So, I'm not sure now.


Question Credit: OldCastle
Question Reference
Asked July 11, 2019
Posted Under: UI UX
12 views
6 Answers

I'm not sure what tone you're going for, but I'd consider going with a chat-style UI, with one person's speech aligned on the left, and the other (perhaps the one with which you'd like your reader to identify) on the right. This pattern is widely recognized as an exchange between two (or more) people.

iMessage conversation

If you'd still like the questions to be easily scannable, you could utilize some of the following techniques:

  • Ensure the questions are in a standalone message
  • Bold the keywords in each question
  • Use headers to separate the conversation into topics

credit: maxathousand
Answered July 11, 2019

OldCastle is asking questions, which Jeff Zeitlin is attempting to answer. OldCastle’s questions are larger, and bold, while Jeff’s answers are in normal text.

How can I separate the student’s questions from the teacher’s answers?

Since, presumably, the answer will be an explanation, rather than a short sentence, you could format the question as a header, and leave the explanatory answer in normal text. You don't need to call out the one as question and the other as answer, because it will be obvious.

Does this break the paradigm I want to establish, of it being a dialogue between the student and the teacher?

I don’t believe so; you can always explain the convention in an introduction. Since each question is presumably a new topic, it’s not unreasonable for each question to start a new section in the book.

Is it really going to be one question per topic?

Only you, the author, can answer that for sure. But it seems reasonable to assume it, initially.

But what if it's not?

In that case, subsequent questions on the same topic can use the next heading size down (I did this one two sizes down, only because of the formatting that SE uses as the default for interpreting MarkDown).

I don’t understand. It doesn’t look like a dialogue.

It won’t, because we’re used to dialogues looking like Q: Natter? A: Grommish. But it’s still a dialogue, because you’re presenting it as alternating questions and answers, and wording both as though they were people talking.


credit: Jeff Zeitlin
Answered July 11, 2019

left-right motive I see the left side of the page stating the question of the student, and the right one the answer of the teacher.

colour scheme every left or right page has one distinctive, repetitive colour scheme. either background colour or font colour. try out, which is best for your purpose.

graphics whereever there is blank space there comes an explanatory graphics.

these three elements seem quite vivid but harmonious to me.

i think this is also a question for the graphicdesign group :)


credit: dortje
Answered July 11, 2019
Your Answer