Showing posts with label user interface. Show all posts
Showing posts with label user interface. Show all posts

Saturday, 25 September 2021

#39 UI: Cybertext

"Substance before Style"

 Another post, another storytelling device: The user interface, or for short UI.

Principles of Interaction Design

On his website, Bruce Tognazzini gives a holistic (my favourite!) introduction to what he calls "interaction design". The background he is writing from is that of the great design, UI, UX (user experience) trends which came up with the arrival of digital interfaces. He writes about core topics such as aesthetics, anticipation and autonomy. Here's the link for anyone interested:

First Principles of Interaction Design

However, while Tognazzini is primarily interested in communicating correctly with the user, I as a storyteller am equally interested in the question of how to give the designed interface a style consistent with the narrative or: what options I have to tell a narrative via the interface.

I think the answers lie in all the gaps, the variables that are not determined by interaction design principles. Today's project will serve as a demonstration of this thought:

The User Interface of Cybertext

A recurring reader of this blog or a person studying game studies with me might remember this project. It is, essentially, an interactive novel enriched with some audiovisual and interactive features.

You'll notice that various elements are at times heavily inspired by Cyberpunk 2077, especially its UI (see e.g. this great portfolio). Note however, that this is an unofficial fan work and is not approved/endorsed by CD PROJEKT RED.

Before the actual game starts, the player is presented with a view allowing to determine
herself when the actual gameplay starts.
Also: Opens up a void, which wants to be filled. Color and character usage sets up the theme.
 

When pressing ENTER, the logo is faded in and distorted,
accompanied by an electronic, distorted sound. Link

The standard gameplay view is accompanied by soundtrack and has several
sub-elements with specific thoughts put inside.

The lines and boxes framing text, decision and quest UI have two-fold meaning: Once, they create the impression of a system that can be steered - this is especially reinforced by the line's fading in and out over time. Second, they create the impression of being boxed in, unable to break out of this system - a thought which is reiterated in the game's tutorial and ending, where seemingly corporate messages are delivered about how the game should be enjoyed, for instance. It tells the meta-story of this game.

Regarding the story happening inside the boxes, the right UI is a visualization of the non-linear quest graph with its current state and possible future events. It tells the story that is written down and decided on the left in a way that may generate interest in the future or alternatives.

The entire visual style with mechanical moving elements and a clear reference to Cyberpunk aesthetics sets the atmosphere, thus possibly helping with immersion.

Conclusion

Even if I'm surely no "native" UI designer or 2D Artist, I do am a little bit proud of my work. It feels coherent in the right way - and this, in the end, is what a good production should be like, I guess. Anyway. I would have uploaded the whole game on itch.io already and embedded it here, but I'm not sure yet whether I'm allowed to.

If you already found this post and want to play - stay tuned! As soon as I know more about the legal stuff I'll post this on Twitter with an updated post including the - possibly altered - game.

Until then, have a good time!

Sunday, 22 August 2021

#33 Quest Logs

 This post is about quest logs, journals, in-game quest descriptions and the like. Following some paragraphs on the topic I'll write a quest inspired by the ever glorious Diablo.

Quest Logs

In many games with a substantial narrative and goals related to space there is also some kind of quest log, oftentimes detailing what is to be done, why and (to some degree) how. It is also a good place to document things that have been done and give some contextual information.

From a media studies perspective, quest logs can be regarded as a visualization of the avatars goals/plans/ etc. It is thus a way to

  • give an in-game rationalization of the tasks given to the player
  • make the player understand her avatar better
  • focus on task selection, pursuing rather than remembering

In a way, one might say that quest logs are a very good quality of life feature for games. This is underpinned by the vastness of task management tools like Trello, todoist or Slack which all have the same goals and effects.

I'll continue with showcasing some of the components/features actual quest logs have. First of all it is to say, that such a log is usually based on visual communication (with the occasional sound effect). It is from this perspective then that quest logs shall be deconstructed here.

A list of quests, categorized

Probably the most common feature and component: A list of all discovered quests is queried and displayed as a scrollable list of signifying visual blocks, labelled with the respective quest titles. Such a list is usually either filterable by pre-defined filters or search strings, or it may also be ordered into collapsible sections. Usual categories are: main/side/.. quests, location in the game world, timestamp for when it was acquired or finished/unfinished.

A classic quest log (from WoW) where quests are categorized by location.

Quest properties

Hereby I mean all static and dynamic (changing on runtime) attributes a quest might have. These can be coded by quest name color (see example above), extra small texts/numbers or tracking symbols. For instance in the above image, the green color of "Vault of the Wardens" means this quest is deemed "easy". Of course there are other attributes besides difficulty might be displayed: belonging to base game vs. expansions, number of participants (see e.g. "Solo", "Solo only", "Small Fellowship", or "Fellowship" in LOTRO), or is/is not tracked. Often there is a possibility to set a quest to "(un)tracked".

Quest content

By selecting a quest often an overview is displayed: Containing such diverse elements as a dynamic description, dynamic objective overview, rewards, location on the map or links to fitting entries of any external view.

A dynamic description tells the context and set up of the quest, but is updated and extended at certain points in the quest progress to reflect new happenings.

A dynamic objective overview lists the current objective(s) and possibly also preceding ones.

A rewards section lists wha the player will gain when finishing the quest or from which items she'll be able to choose from (although I've found the latter only in MMORPGs so far).

So this is it. These are the features I encountered in video games so far (I think). But what about some design guidelines?

Quest Title Guideline: Regarding the quest title, I'd suggest that such a name should reflect the quests underlying theme(s) in some way, catch the quests mood - but not too explicitly (e.g. not spoiling things), rather in a convoluted or artistic way, like a piece in the puzzle you understand only when having experienced the main point of the quest.

Quest Description Guideline: With the quest description it is more about giving the player the information to understand what's going on in the quest right now. So one might provide the trace in the quest by motivating the objectives and explaining what happens. Ideally the description is also embedded in the games narrative itself (e.g. written from the avatar's perspective.

A Diabolic Witcher Quest: And Thou Shalt be a-Blessing..

My quest design today won't be for Diablo as a game but as a genre, I guess. As base game I'll assume some standard open world/story RPG like The Witcher/Skyrim/etc. Anyway, here's the - quite dark - quest:

Gameplay Event: Quest giver sees the avatar and calls them for help.
Scene with Quest Giver: They asked for help because their aunt, Leyla is acting strange of late.
Objective: Visit the aunt in her hut
Log: A busy merchant approached you on the market and asked for help with family troubles: His aunt Leyla showed strange behaviour of late and he himself did not find the time to deal with this situation, so he sends you.

Investigation at Hut: She's religious, avatar decides to ask neighbour.
Objective: Ask in the neighbouring hut about Leyla.

Scene with Neighbour: They tell she went to cathedral of the nearby city and was weirding since, eventually vanished into woods.
Objective: Trace Leyla into the forest
Objective (optional): Speak to the cathedral's priest.
Log: Leyla appears to have been very religious, even venturing as far as to the city to visit the cathedral there in bad times. Her neighbour though tells you she had last been seen wandering into the forest.

Scene with Priest: Aunt had a hard time with herself after the husband died, apparently he'd been burned by the local lord for witchcraft. The priest prayed for her thus and ended with the standard formula "And Thou Shalt be a-Blessing..". On right choice/force induction he'll tell you that she had a very bad reaction to that ending.
Log: From a priest in the cathedral you learned of Leyla's troublesome past. She apparently sought the priest for help at times. [If learned:] To the priests confusion, a blessing he gave her tremendously affected her.

Tracing Footprints into Forest: Leyla is found praying by an ancient altar.

Scene with Leyla:
[Option 1:] If the avatar didn't find out about the blessing and her extremely negative reaction to it, he won't be able to guess that it was the blessing that made her snap - she'll loose hope and sacrifice herself on the altar when the player leaves sight radius.
Log: When you found Leyla, she was already in a state beyond help. You could but stand by and watch her way of concluding with life.
[Option 2:] But if the information was gained, then the player will  be able to convince her of living in a monastery and the true reason for her unsettlement on the blessing will be unveiled: After a long life of not achieving anything being left alone she felt a god-like redemption like that would just not be right (even though unconsciously she of course wished it to be true).
Log: When you found Leyla, she was almost in a state beyond help. Discussing her blessing seemed to remind her of the earthlyness of her troubles and she decided to take a more peaceful road for the last times of her life.
Objective: Return to the quest giver.

Scene with Quest Giver: The avatar tells of what he learned and achieved and receives respective rewards.

Ideas for Feedback

  • Do you have any principles for the design of quest log contents?
  • Might the quest maybe be a bit too dark?
  • How could "good" vs. "bad" ending be more balanced into a morally grey difference? Is that even necessary?

Conclusion

I find quest logs interesting because they are a very direct interface to the underlying quest system. While the "real quest" plays out in the non-UI gameplay, the quest log is a means to access meta informations to the happenings (which is probably also one reason why they're more often abstract in their signs?).

Concerning that quest I wrote, well, I played Diablo II Resurrected the other day so I got inspired. Might be a candidate for turning into an inkle game next time, we'll see.

Until then, have a good time!