lifesimulator/about.html at main · arraysius/lifesimulator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/style.css" />

  <title>Life Simulator</title>
</head>

<body>
  <div id="background"></div>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-md navbar-dark">
    <div id="nav-buttons" class="container-fluid">
      <a class="navbar-brand">Life Simulator</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Play</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" aria-current="about" href="">About</a>
          </li>
        </ul>
        <div class="d-flex">
          <a class="me-2" href="https://github.com/arraysius/lifesimulator" target="_blank">
            <img src="images/GitHub-Mark-Light-32px.png" alt="GitHub">
          </a>
        </div>
      </div>
    </div>
  </nav>

  <div id="content">
    <!-- Card -->
    <div id="about-card" class="card">
      <div class="card-body text-center">
        <div class="container">
          <div class="row">
            <h1> <strong><em>Life Simulator</em></strong>:<br />Modes of Control in Technology</em></h1>
            <p>
              My work <em>Life Simulator</em> aims to explore modes of control in technology, through the form of a
              questionnaire game. It aims to raise awareness about how consumer technology and social media companies
              exert certain amounts of control on our lives.
            </p>
            <p>
              The four modes of control explored in <em>Life Simulator</em> are agreements, the illusion of choice, the
              pressure to conform and inconvenience.
            </p>
          </div>
          <hr>

          <!-- The Agreement -->
          <div class="row d-flex align-items-center">
            <div class="col-md-6">
              <div class="w-100">
                <h2>The Agreement</h2>
                <p>
                  Before using a product, users will always need to accept its terms and conditions. Often, users will
                  blindly accept these terms, trusting that the companies will operate fairly. These agreements usually
                  also request the user to give up certain rights. In Life Simulator, the player agrees to accept the
                  presented choices and attributed scores without complaint, but tech companies would request the user
                  to voluntarily provide data for advertising analytics. If users disagree with the terms, they will be
                  prevented from using the product.
                </p>
              </div>
            </div>
            <div class="col-md-6">
              <img class="img-fluid rounded mx-auto" src="images/agreement.png" alt="">
            </div>
          </div>

          <hr>

          <!-- The Illusion of Choice -->
          <div class="row d-flex align-items-center">
            <div class="col-md-6 order-md-5">
              <div class="w-100">
                <h2>The Illusion of Choice</h2>
                <p>
                  Each question in Life Simulator presents three choices while smartphone app stores contain a large
                  catalogue of apps. Users will believe they have free will over the choices that they make. However, in
                  both scenarios, the choices have been pre-approved to be displayed. Published apps require a review by
                  the company that owns the app store before being listed. Any choice that a user makes will be within
                  the company’s accepted range of behaviour, hence giving the user the illusion of choice.
                </p>
              </div>
            </div>
            <div class="col-md-6 order-md-0">
              <img class="img-fluid rounded mx-auto" src="images/choice.png" alt="The Illusion of Choice">
            </div>
          </div>

          <hr>

          <!-- The Pressure to Conform -->
          <div class="row d-flex align-items-center">
            <div class="col-md-6">
              <div class="w-100">
                <h2>The Pressure to Conform</h2>
                <p>
                  After completing Life Simulator, a table is shown commenting on the different range of scores and
                  their level of acceptability. The score attributed to each choice nudges the player towards the good
                  choice for the fear of receiving a low score. A player with a high score is praised while a player
                  with a low score is criticised. Similarly, social media companies can promote accounts and posts
                  sharing about positive topics while banning those that share about controversial matters. As a result,
                  the companies have set a standard of what content users should share on their platforms. Hence, users
                  face pressure to conform to the rules so that they will remain on the platform.
                </p>
              </div>
            </div>
            <div class="col-md-6">
              <img class="img-fluid rounded mx-auto" src="images/pressure.png" alt="The Pressure to Conform">
            </div>
          </div>

          <hr>

          <!-- The Inconvenience -->
          <div class="row d-flex align-items-center">
            <div class="col-md-6 order-md-5">
              <div class="w-100">
                <h2>The Inconvenience</h2>
                <p>
                  The neutral choice is locked in every scenario presented in Life Simulator. It hints to the player
                  that alternative options are available but are difficult to achieve. The option can be unlocked but
                  will require additional effort. This parallels with the ability to install unofficial apps onto
                  smartphones. Although many users are unaware of alternative app stores, they are in fact available but
                  require certain technical knowledge to install unofficial apps. Thus, it might not be worth the effort
                  for the average user to learn the additional technical knowledge to enable such a feature. Installing
                  an unofficial app is too inconvenient and users are much more likely to the catalogue of pre-approved
                  apps.
                </p>
              </div>
            </div>
            <div class="col-md-6 order-md-0">
              <img class="img-fluid rounded mx-auto" src="images/inconvenience.png" alt="The Inconvenience">
            </div>
          </div>

          <hr>

          <!-- Unlocking the neutral choice -->
          <div class="row">
            <h2>Unlocking the Neutral Choice</h2>
            <img src="images/unlock.gif" alt="Unlocking the neutral choice">
          </div>
        </div>
      </div>
    </div>

    <!-- Scripts -->
    <script src="js/bootstrap.bundle.min.js"></script>

    <!-- Animated background scripts -->
    <script src="js/three.r119.min.js"></script>
    <script src="js/vanta.net.min.js"></script>
    <script src="js/load_vanta.js"></script>
</body>

</html>