A Comparison Between UI Design in Game Development and CAD Software○ Weam Numan *1, Yuval Kahlon *2 and Haruyuki Fujii *3*1 Master’s Student, Department of Architecture, Tokyo Institute of Technology, BS.
*2 Assistant Professor, Department of Architecture, Tokyo Institute of Technology, Ph.D.
*3 Professor, Department of Architecture, Tokyo Institute of Technology, Ph.D.
Keywords: User Interface; Computer Aided Design; Game Development.

1. Introduction

If Ng. Edward’s (1997) statement “the architects imagination

There is no denying that CAD programs are a crucial part ofworks with its eyes open” is true(3), then the creation process

today’s architectural framework and pipeline. To sharpen thedepends on the consistent ping pong motion of thinking of asystems architects use, there is a need to improve on thesolution, externalizing it, and visually perceiving it. We would

numerous components that comprise the software. The aim ofwant to help the eyes perceive these depicted ideas as quickly

this paper is to explore ways to improve the intuitiveness ofand effortlessly as possible.

human-computer interaction in computer aided design systems,

This is one reason CAD systems are valuable to architects; itby focusing on its User Interface. We compare UI elements ofdiminishes the need for designers to: 1) rely on their own

the game Sims4 with their counterparts in CAD software Revit.

understandingof

thespecifications

ofnumericalandmathematical parameters which they need to create designs
2. Prelude to CAD System value

digitally(4), and 2) visualization and rendering skills acquired byArchitects have expressed varying yet often compatible

mastering the traditional medium. It does that by providing

thoughts when it comes to the importance of software inon-the-spot visual representations of the virtual objects fromenriching the design. Durfee, a professor and director of thetheir ideas, which is much more natural for architects.

design education department at the University of Minnesota in

Dillon argues that the success of a computer application

Minneapolis argues that CAD programs cannot be used like adepends on it providing appropriate facilities for the task at

drawing board, they are a tool for producing and not forhand in a way that enables users to use and exploit them (5).Qi

brainstorming. "You fire up the application and three minutes

Su, the founder of Modelo, a 3D modelling tool designed bylater you're making a rectangle. Twenty minutes later, you'rearchitects and not software engineers, says that the UI of current

coming up with your first idea," he says, "A good designer

CAD programs are strong from the development perspective,

could come up with 100 fledgling ideas in that time.”.(1)but hinder, rather than help, the architect’s design flow.(6)This may explain why many architect use CAD software
only as a visualization tool for their existing ideas. The qualityof the final product depends on the talent of the architect, buthaving a sharper knife makes you a better cook. CAD programs
allow veteran architects to advance their designs, and aid themin realizing architecture that could have taken much more time,effort, and budget otherwise.
“Architects make images from ideas” is a concept You canfind everywhere from St Thomas aquinas’s philosophical quotes
About God making the world, to modern key texts about
creative cognition(2). But these fleeting ideas cannot be turned
into a creation with the architect remaining inside his head andkeeping his eyes closed(3). there must be a process in which theFigure 1. Properties panel in Revit depends on written tables.

architect finds a way to pour his thoughts onto a tangible(Autodesk 2021)

medium he can look at, to edit, test, and improve upon hiscreations.
日本建築学会情報システム技術委員会
第 44 回情報･システム･利用･技術シンポジウム論文集， 379-382 ， 2021 年 12 月，京都
Proceedings of the 44th Symposium on Computer Technology of Information ，Systems and Applications ， AIJ ， 379-382 ， Dec. ， 2021 ， Kyoto

The visual support CAD systems provide to the user does－ 379 －not seem to extend to its user interface; an aspect of softwarethat the novice, and even professional architect might find to behindering to their creative flow. Panels are wordy anddisconnected from one another, making you spend time looking
for commands even if you have used them before.
Because we know systems can be improved by examining
ones that succefully implement solutions, we studied game UI.
Game UI designers have pioneered creating user friendly
interfaces where players cannot get lost, confused, or keep

Figure 3. UI elements classification based on their position (7)guessing what to do. What UI elements are used in CAD
programs and games, and how do they compare?

3.2. SITUATED
Situated UI components that reside inside the viewport and can

3. A comparison between games and Architectural software

directly be added and edited by the user.

3.1. UI ELEMENTS ORGANIZATION
To understand what the user perceives in a software we will
dissect the interface into two prominent sections based on therelative position to one another: the Viewport, and the Tools

Table 1. Situated UI used in Revit and in Sims4
SimplePointsoverlay. Every UI element in the software belongs to one ofthese two sections(7):volumesManual 3DLinesmeshes• Viewport: The empty screen/canvas . This is where thecreation is viewed and edited.

Compound• Tools Overlay: A layer, separated from the workspace, oforganized panels that contain the tools you use in that

Simpleworkspace to edit the creation.

surfaces

Premade3D blocks

3D modelsHuman
2D blocks
model

3.3. SPATIAL AIDSUI components can only be seen from outside the viewport.
meaning a hypothetical person inside the viewport cannot see
them. They are often added to guide users focus to certain areasin the viewport, and to create visual aid for distinguishingdimensions.
Table 2. The main Spatial aid UI elements used in Revit
Figure 2. The main User Interface of two programmes:

Grid

Autodesk Revit (Autodesk2021), Sims4 (ElectronicArts 2014)
To further understand the role of every element in assisting

Annotation

the user navigate, find information, and accomplish goals, asecond classification based on the UI elements can be applied
after asking two questions:
Does this element exist inside the viewport?

Highlightedselection

Does a person see this element if they stood in the design?
The answer to these questions is either yes or no, we can create

Games excel in using spatial aid elements to highlighta flow chart resulting in 4 categories as follows:

報告 H37－ 380 －

selections, errors, or important situated elements, giving thePropertie

player immediate ability to edit and constant feedback whiles optionsfully being immersed in game play, while spatial UI in CAD isbrowsers

Popupwindows

noticeably less than games.
Navigatio

Table 3. The main Spatial aid UI elements used in Sims4.
GridLabels

Statusn tools
PopupRibbons
summary

Highlighted

Editing tool

selection

overlay

SearchCallbarto action

3.5. META
Error orflaw

Important

UI components do not reside inside the viewport, but aresituatedviewed as conditions that have a direct effect on it and on theelements

design in its extent. Generally, it is possible to control these UI
elements, but they are made to mimic real-life physics allowing
the user to simulate original conditions.

3.4. NON-SITUATED
UI components that do not reside inside of the viewport, and area part of the tools overlay are non situated components. TheseTable 6. Meta UI elements in Revit after rendering.

contain the panels and commands you can use to edit thesituated components inside the viewport.

Sunlight

Shadows

Table 4. The main Non-situated UI elements used in Revit
Properties

In games, meta UI components can be subtle or dominant(8),Context

options

but unlike CAD programs which require a rendering command

menuandto produce visuals of meta components, games usually operatebrowsers

on a high frame real time rendering basis, and do not require aRibbon

Navigation

special command, allowing these components to be visible, andTabs

tools

provide real time feedback to the user; for example: the amountControlStatusbars

Popupof light needed to illuminate a certain room area.

windows

Table 7. The main Non-situated UI elements used in Sims4

Because the main purpose of CAD software is to create, theSunlight

Seasons

Shadows

WeatherTime

Pollution

placement and context of non situated components arededicated to creation and editing tools. Whereas in games, nonsituated elements can also provide players with feedback andprompts, for example an assessment of resources or stat meters,
as well as keeping track of points, time, inventory, and progress,
which aids in deciding the next step of play.
Table 5. The main Non-situated UI elements used in Sims4
StatusTabs

報告 H37bars－ 381 －

• Pro: Having the icons drawn in one composition helps

4. The issue of feedback
When you compare between the two, you find that CAD
interface provides a set of menus, buttons, and lists thatorganize the way you can create, edit, and manipulate yourunderstand the icon in relation to the others.
• Con: Unnamed icons force the player to hover over themto view information, wasting seconds each time.

designs. Unlike games, however, this toolkit usually does not• Con: The participant would look for the icon first, andgive any feedback on the progress or quality of the design. For athen utilize the search bar, making it difficult to locate if

novice cook without a recipe, making a tasty dish requires goodthey did not use the correct word.

kitchen ware, a sharp set of skills and a trusty sous chef to taste
test the food as he goes. The latter represents external aid that• Con: Promenant icons are distracting by suggestingpriorities to the player.

provides real-time feedback, and because of it, you can be surethat your dish is up to quality without having to rely on the final
taste test by your costumers.
5. UI case study: The Sims4 game
In February 2000, Sims 1 was Developed by Maxis andpublished by Electronic Arts. The game used dimetricprojection and featured open-ended simulation of the dailyFigure 4: Progress between the starting build (after 10 minutes)

activities of one or more virtual persons ("Sims") in a suburban

and the final build (after 60 minutes)

area near SimCity.(9) It was successful in allowing anyone tocreate architecture using readily available building blocks on a6. Conclusion

computer screen. Sims utilized the intuition and experience

The intuitive interface design of the game and the real-timeplayers traditionally rely on to solve design problems by

feedback feature built in game is worth exploring to aid theoffering a simple procedure and user interface.(10)inexperienced user to become aware the problems in his/her
design while creating it, and attempt to find viable solutions,5.1. EXPERIMENT OBJECTIVE
The objectiveof thisexperiment

lowering frustration and improving the speed of creating.
istoexplore

theeffect/influence of an intuitive game interface on the process ofdesign and the quality of the final architectural work.
5.2. EXPERIMENT PROFILE
A student from Tokyo Institute of Technology participated in abrief experiment for the sake of this study. W.T, a civilengineering student with a brief background in using CAD
software SketchUp and no previous background in playing thetest game.
The participant was introduced to the game The Sims4, (EA,2014), and was asked to build their dream house using the gameinterface and resources within a time frame of 60 minutes. The
participant had no information that this research is interested intheir interaction with the user interface, they were requested tovoice their opinions and thoughts while playing.
5.3. OBSERVATIONS
The following are pros and cons that appeared after observation:• Pro: Spatial aid UI elements like the editing tool overlay
help avoid going to non situated UI elements for editing.
• Pro: Meta elements - changing time and seasonconstantly help to check the design’s response to change.

報告 H37

References
1） Thilmany, Jean.:2019, Pros and Cons of CAD. Associate Editor.
The American Society of Mechanical Engineers, USA.1 ）Lieberman, Henry.:2002, Computer-Aided Design of User
Interfaces by Example. 1-12.
2）Robbins, E.L., & Cullinan, E.:1997. Why Architects Draw. 29-32.
3）Ng, Edward.:1997. An Evaluative Approach to Architectural
Visualization. source, CAADRIA '97, Singapore. 449-463.
4) Card S, Moran T and Newell A.:1983, The Psychology of
Human-Computer Interaction. Hillsdale, NJ: Lawrence
Erlbaum.40-84.
5） Dillon, Andrew.:2006. User Interface Design. University ofTexas , Austin, TX, USA. 453-458.
6) Su, Q.: 2015. CAD today isn't about design. Medium. from<https://medium.com/design-idea/cad-today-isn-t-about-design-f1
f5b5ca400> (Retrieved July 21, 2021)
7） Bowers, M.: 2019, Level up: A guide to Game UI (withInfographic).
ToptalDesignBlog.
<
https://www.toptal.com/designers/gui/game-ui>(RetrievedSeptember 12, 2021)
8）Llanos, Stein & Jørgensen, Kristine. (2011). Do Players Prefer
Integrated User Interfaces? A Qualitative Study of Game UIDesign Issues.
9) Thesims
4.
TheSims.
(n.d.).,
from<https://sims.fandom.com/wiki/The_Sims_4> (July 1, 2021)
10) Nazlena Mohamad Ali, Hyowon Lee, Juhana Salim·:2013 :Exploring user experience in game interface: a case study of The
Sims 3. Universiti Kebangsaan,Malaysia, 6-16.

－ 382 －