Category Archives: Final Project

Digital Disability Storytelling (DDS) as a Sociotechnical System

Jalyn Marks

Abstract

Can a planned sociotechnical system change culture? I hope to do this with a website that collects stories by disabled people and people with mental illnesses. The fields in which I am working are interdisciplinary. Disability Studies in higher education is often departmentalized as English, Anthropology, and American Studies courses. In this piece, I bring Disability Studies into conversation with the fields of Communications and Computing. I look at artefacts, Mahoney’s “Histories of Computing(s), and systems.

 

Author’s Note

My inspiration for the Disability Storytelling (DDS) website comes from my experience as a disabled person (my main disabilities are Ehlers-Danlos Syndrome and rapid cycling bipolar disorder).  As an undergraduate student at Grinnell College with undiagnosed physical health conditions and mental illness, I faced isolation and confusion around where to seek help and how to talk about my experiences, like so many others with disabilities. My close friend and classmate, Devyn Ellis, another self-identified disabled person, and I received funding from Grinnell’s Student Publications and Radio Committee (SPARC) to publish Vantage Point, a magazine highlighting multiple student perspectives on disability and mental health on campus, including research papers, poetry, photography, scanned journal entries, and more. Vantage Point distributed over 600 copies in two years.

Use of identity-first language (the conscious choice to use “disabled person” instead of “person with a disability) is used throughout this piece because disability is such an integral part of identity, and shapes the need for the computing I am describing. The disability community frequently advocates that “disabled” is too often stigmatized as a negative characteristic, rather than a simple fact of humanity.

Within the disability community, I have many people to thank for their personal encouragement: Liz Weintraub, Pat Kinley, Devyn Ellis, Jennifer Tuell, Oksana Klimova, Rylin Rodgers, Emily Ladau, Sheida Raley, Alice Zhang, Ben Kaufman, Andy Imparato, Luis Valdez, and my crew, Teresa Nguyen, Andy Arias, and Frances Isbel. Others, whom I admire from afar, include Alice Wong, Sara Luterman, Imani Barbarin, Caitlin Wood, and the AUCD Network. An additional thanks to Georgetown University professors Tawara Goode, Martin Irvine, Denise Bedford, and Jeanine Turner.     

 

Introduction

As a disabled student, employee, family member, etc., I’ve been lucky enough to have the advocacy skills and family support that I’ve needed in order to be successful. One aunt, though, recently lovingly reminded me that everything I’ve worked hard for could be taken away because of my disabilities. If I acted a certain way because of my mental illness, or even if someone assumed I was acting that way because they knew I had a mental illness, then I risk being fired, being pressured to leave school, being accused of being crazy. Every day that nothing bad happens is an accomplishment for me. And I’m not alone. Go to any disability or mental health advocacy event, and you will get the message, “One in four Americans has a disability, one in four Americans has mental illness.”

When I was first working toward my undergraduate degree, I formed a community of disabled and mentally ill students by collecting various student perspectives on their experiences with disability and mental health on campus, publishing and disseminating our information in a magazine. At the time, I knew nothing about the disability community, and the Americans with Disabilities Act (ADA) was a new concept for me–I never even learned about it in school. Since then, I have expanded my network and disability knowledge, and dreamed of expanding this idea into a national, digital, fully accessible endeavor.

I know that networking and sharing experiences is a way of building disability culture. “Culture is the name we give to the infinite web of meaning that human beings have been weaving for millennia. We participate in culture when we imitate one another’s behaviors, adopt common values and practices,  share symbolic codes like language, music, or the latest dress style. To see any artifact (i.e., any human-made object) as part of culture is to understand how it becomes meaningful through the social activities, thoughts, and actions of the people who engage with it” (Murray, 2012, pp. 1). Within cultures, users are meant to manipulate those artefacts (Vermaas, 2015). Disability culture is as rich as disability itself. “Disability is mutable and ever evolving. Disability is both apparent and nonapparent. Disability is pain, struggle, brilliance, abundance, and joy. Disability is sociopolitical, cultural, and biological. Being visible and claiming a disabled identity brings risks as much as it brings pride,” (Wong, A., 2020, pp. xxii).  I know computing is going to be the most widespread, accessible way to manipulate and affect change within disability culture, by disabled people.

Materials: black ink, white paper. The side profile of a concerned-looking woman. Her hair is in a tight bun, lips pursed, and has a thin frame (sharp collarbone and cheeks). Text in all capitalized letters reads "Therapy is sill. No more therapy!"

Vantage Point Submission: Sketchbook excerpt from Rein Brooks, 2015. Materials: black ink, white paper. The side profile of a concerned-looking woman. Her hair is in a tight bun, her lips are pursed, her eyebrows are slightly raised, and she has a thin frame (sharp collarbone and cheeks). Text in all capitalized letters reads “Therapy is silly. No more therapy!

 

Vantage Point, 2015. Artwork by Linden Deforest. Cartoon-style black ink on white background. Image of boy with long hair in a bathrobe walking a dog, lifting its hind leg to urinate on a tree. Speech bubble reads "Emotional support dog: 1. Depression: 0.

Vantage Point, Submission: Cartoon by Linden Deforest, 2015. Black ink on white background. Image of boy with long hair and glasses in a bathrobe walking a dog, smiling. The dog is lifting its hind leg to urinate on a tree. Speech bubble reads “Emotional support dog: 1. Depression: 0.”

Like the magazine I created in college, I want to use computing to create a Digital Disability Storytelling (DDS) sociotechnical system. “A system is understood to be an entity that can be separated into parts, which are all simultaneously linked to each other in a specific way” (Vermaas et. al, 2015, pp. 68). The goal of DDS is for it to be a system which ultimately enhances the agency disabled people. Enhancing the agency of disabled people will elevate our power and roles within society, reduce ableist stigma, and improve attitudes of mainstream culture to accept and include disabled culture. Disabled people will be adding to their own history. “History is the record of our collective experience, our social memory. We turn to it as we do our personal experience, consciously when we meet new situations, unconsciously as we live day to day,” (Mahoney, 2005, pp. 120). In this piece, I am going to examine what a sociotechnical system is and how computing can make DDS possible.

 

Main Body

“Sometimes there is the expectation that… I am looking for solutions to social problems. In fact, though, I am looking at the processes of the problems.” —Anna Deavere Smith, Twilight: Los Angeles, 1992

In one of the letters from the editors from my undergrad magazine (which I now repeat as much as possible), I say “stories are one of the most powerful tools we have” to enact change. When I reference “stories” and “storytelling” throughout this piece, I am using Alice Wong’s definition. “Storytelling can be more than a post, essay, or book. It can be an emoji, a meme, a selfie, or a tweet. It can become a movement for social change,” (Wong, A., 2020, pp. xviii). Going digital is a way to make these stories accessible to everyone, combining knowledge of disabilities and accessibility with the knowledge of computing. “We can manipulate them, and they in turn can trigger actions in the world,” (Mahoney, 2005, pp. 129).

“From the early 1950’s down to the present, various communities of computing have translated large portions of our world–our experience with it and our interaction with it–into computational models to be enacted on computers” (Mahoney, 2005, pp. 127). That translation of information from our world to the virtual world is a transformation of information (Denning & Martell, 2015). Translation from storytelling to a digital format is a process that I am not completely comfortable with yet, but know that a great deal of it involves making each story searchable, so that others can find it based on keywords and metadata.

Some of these submitted stories will be short. Others, longer. Each story contributes symbolic culture to the system. Think of each story like a symbol for something else going on outside of the digital space. “A symbol-based system of communication” is “the defining aspect of the human mind” (Wong, K., 2005, p. 94). The symbolic culture of DDS will represent a sample of all disabled people’s perspectives, which will be accomplished by its design. “Design is… about modelling the world in the computer, about computational modelling, about translating a portion of the world into terms a computer can ‘understand,'” (Mahoney, 2005, pp. 128). Computation is symbolic, syntactical, sequential, and structural (Mahoney, 2005, p. 129).

If disabled people can find others’ stories based on search terms like “autism”, “education”, and “midwest,” then they will be able to find people like them. Finding others through software and computation is empowering to disabled people, validating their own experiences, fighting feelings of isolation, and providing agency to feel like they are doing something by contributing to the DDS. “Software and computation were specifically designed from the start as inter-agency and extended or distributed cognition (delegating cognitive tasks and creating actions that computers can do, perform, or ‘execute’)” (Irvine, 2020, pp. 5). Agency is often something that is challenged or even unavailable to disabled people, for a number of social and political reasons, but DDS will be an interface which offers agency for disabled people to describe their own lives, to share their own stories, possibly for the first time in their lives.

It’s quite common for publicly-funded research projects “to make their data available for free to the public” and for other projects to “mine” that data “for possible insights” (Denning & Martell, 2015, p. 31). In addition to fostering community between disabled people, I would like for DDS’ data to be available for free to scientists, educators, policymakers, and anyone else who wanted to use these stories.

Disabled people submitting to DDS will use their personal phones, tablets, and computers. “To ‘use’ a ‘personal’ computer today is, despite its much-hyped origins in the counter-culture, to work in a variety of environments created by a host of anonymous people who have made decisions about tasks to be done and the ways in which they should be done,” (Mahoney, 2005, pp. 132). Designing DDS will prioritize accessibility, and contributors will not need to be tech savvy in order to participate. “Most of the ‘computing’ actions, what makes the device work as you perceive it, is actually distributed across many invisible networked computers, the “massive modularity” of Internet system design” (Irvine, 2020, pp. 2). Using combinatorial design principles of existing programs and systems will be key, and something I will be thinking about when designing DDS.

“Different groups of people saw different possibilities in computing” (Mahoney, 2005, p. 124), and it is with this same type of vision that I am able to have a goal of using computing to help solve a social problem. Too often, to the point of incarceration, and murder, disabled people’s voices and stories are not heard, and not cared about. I know computing is powerful, and wanted to learn more about technology because I think I can use it to better the lives of disabled people and their loved ones. Through computing, I want to form a database of narratives collected from disabled people in order to 1) form a community of practice, and 2) enhance scientific research, education, and advocacy efforts benefiting disabled people.

Computers were first designed for and by scientists and engineers (Mahoney, 2005, pp. 124). The use of computers has evolved based on the groups who need them for different purposes. Using computing to manage data is no new concept. Data processing, the field of management science, is the first group, or community of practice, to use computing for commercial purposes (Mahoney, 2005, pp. 124). This data, when applying “media theory and technical mediation as part of social systems theory provide conceptual models that enable us to get inside the ‘black boxes’ by recovering the implemented design principles that come from the same system in which we are a part” (Irvine, 2020, pp. 1).

In discussing how problems get solved, it is helpful to look at the tools people are using. These tools, or technical artefacts, are physical objects combined with a plan to peform a function (Vermaas et al., 2011). Who uses these tools? People who need to accomplish a task. The people using technical artefacts are in the position to accomplish said task based on the roles they play within society (Vermaas et al., 2011).

Figure 1.2 from Vermaas et al., 2011, pp.19.) Text reads: A conceptual anatomy of the notion of technical artefact. A circle with "technical artefact" written inside. A diagonal solid ray extending from "technical artifact" to the bottom right connects with another circle, with "use plan" written inside. A diagonal solid ray extending from "technical artifact" to the bottom left connects with another circle, with "physical object" written inside. Another circle, with "function" written inside, is at the top of the figure, connected with a solid ray extending up from the middle "technical artefact" circle. Dotted rays from "function" extend down, one to each side, connecting "function" to "physical object" and "use plan.

(Figure 1.2 from Vermaas et al., 2011, pp.19.) Text reads: A conceptual anatomy of the notion of technical artefact. A circle with “technical artefact” written inside. A diagonal solid ray extending from “technical artifact” to the bottom right connects with another circle, with “use plan” written inside. A diagonal solid ray extending from “technical artifact” to the bottom left connects with another circle, with “physical object” written inside. Another circle, with “function” written inside, is at the top of the figure, connected with a solid ray extending up from the middle “technical artefact” circle. Dotted rays from “function” extend down, one to each side, connecting “function” to “physical object” and “use plan.”

 

DDS is going to be a tool that solves a problem, but it doesn’t have a physical object. Does this make it an artefact still? Yes, but instead of a technical artefact, all of the submissions, since virtual will be examples of cognitive artefacts. DDS will be an example of a “cognitive-semiotic” technology (Irvine, 2020, p. 2), as the unseen and unheard stories of disabled people are collected. Also, users of DDS will not see the computing or other technological mechanics of how the metadata helps the code retrieve a submission or anything else; the interface will be user-friendly and imperatively accessible. A huge part of my future research will be dedicated to making the interface accessible, but for now, I think it’s just important to highlight how each submission is a representation of and a tool demonstrating the perspective of the the person who submitted it. This is huge because too often disabled people are treated like they’re stupid, or their thoughts don’t matter, like they are less than human. This is wrong. These incorrect stereotypes are what keeps disabled people excluded from society, denied access to resources like employment, healthcare, and education, and in the worst cases, killed.

There are known features of interfaces that are well-accepted navigational tools, which DDS will apply, like WIMP. “The graphical user interface, known for its main features as ‘WIMP’ (windows, icons, mouse, pull-down menus), emerged from the human augmentation community, with roots in behaviourist psychology and military command and control systems” (Mahoney, 2005, pp. 132).

Lastly, DDS will be a hybrid system. “Hybrid systems, in which certain components, are described and researched using the natural sciences and other components, are described by drawing on the social sciences are called sociotechnical systems” (Vermaas et al., 2015, pp. 69).

 

Conclusion

The future of the humanities is digital (Mahoney, 2005), and as a hybrid, sociotechnical system, DDS will create agency for disabled people. It will gather cultural artefacts which act to symbolize multiple perspectives of disabled people, foster community, and affect the mainstream culture in a way that makes life easier for disabled people.

 

References

Denning, P. J., & Martell, C. H. (2015). Great principles of computing. MIT Press Books.

Irvine, M. (2020). “Understanding media, mediation, and sociotechnical artefacts:
methods for de-blackboxing.” Georgetown University. (Draft of book chapter, for student reference only.)

Mahoney, M.S. (2005). “The histories of computing(s).” Interdisciplinary science reviews, 30:2, 119-135, DOI: 10.1179/030801805X25927

Murray, J. H. (2012). Inventing the medium: Principles of interaction design as a cultural practice. The MIT Press.

Vermaas, P., Kroes, van de Poel, I., Franssen, M., & Houkes, W. (2011). Technical artefacts; Sociotechnical systems. In A philosophy of technology: From technical artefacts to sociotechnical systems (pp. 5-20; pp. 67-81). Morgan & Claypool Publishers.

Wong, A. (2020.) The disability visibility project. Vintage Books, a division of Random House Publishing, LLC.

Wong, K. (2005.) “The morning of the modern mind: controversial studies suggest that the roots of our vaunted intellect run deeper than is commonly believed.” Scientific American. June 2005. Scientific American, Inc.

Abstraction, Modularization, and Layering in Digital Artifacts in the Past Two Decades: Advantages, Disadvantages, and Future Developments

 Xiaomeng Xu

I. Abstract

There has been a lot of digital artifacts created in the past two decades built around various design principles. The success of these creations did not only rely on execution of tasks in the development cycle, but equally important as well are the very principles underlying each task. In this paper, I’ve chosen to examine where abstraction, modularization, and layering design principles were applied in some of the biggest technological breakthroughs of the 21st century to date focusing on the advantages of applying these principles, the challenges faced by the implementors/creators of these technologies, and how these design principles might impact future advancements. The examples are both for hardware (tangible) and software applications (immaterial). The application of the three selected design principles is widespread, indicating its vast importance in today’s new media.  Despite the challenges in the implementation, the advantages far outweigh the difficulties and the way in which these were also implemented opens a huge opportunity for further developments. It’s not difficult to see the role it could play in digital artifacts of the next decades. 

II. Introduction

We are living in the new media age, where digital artifacts get created fast like the doubling of transistors in integrated circuits every 18 months as described in Moore’s Law (Dally, 2009). In the past decades, we have seen innovations and breakthroughs that could have only been science fiction in the early 1940s. A stark example are the portable computers we now have in our pockets that are more powerful than the first programmable digital computer, the ENIAC, that filled an entire room with 18, 000 vacuum tubes in 1946 (Computer History Museum, n.d.). We have come a long way.

Design has always been something that humans keep on improving on. From the stone hunting tools of the paleolithic era, to metal tools of the iron age. Humans create something out of necessity that revolves on its function only and then spends many years improving it, improving the design, establishing principles that will become the foundation of the next innovations, and so on and so forth.

The same can be said today. Except now, there are intangible principles that transcends functionality and separates a useful design to a top-notch one. Ask any designer or a programmer to create something as mundane as a simple snake game, and you’ll see more than just a flowchart or a list of functionalities as what you’ll probably see from a programmer two decades ago. Things have become more abstract, modular, and layered and there’s a lot of emphasis on good design and not just a design revolving around a simple function but a design that eclipses functionality. We go beyond just binary code especially in complex systems.

This paper is going to be examining some of the digital artifacts born in the past two decades when it comes to abstraction, modularization, and layering along with the advantages and disadvantages of its implementation and its role in the fast advancement of technology.

III. Data Abstraction

“Abstraction (in computer science) is the gathering of the general characteristics we need and the filtering out of the details and characteristics that we do not need” (BBC Bitesize, n.d.). The premise is stripping the specifics of certain elements in a system and using general terms. By Janet Murray’s example in her book, in a single abstraction, “fruit” can be used to describe apples, bananas, or grapes (2012). It seems like a very nonconcrete concept, which begs the question what is the practical application of abstraction? What role does it play in new media?

It’s difficult to grasp the purpose of abstraction because of how intangible it is. However, despite that, this principle is ever present in new media, technically and conceptually. To begin with, abstraction is used to create models which are then used to develop algorithms to achieve a goal or solve something. Technically, in Object Oriented Programming (OOP) which is the paradigm of the programming language Java, the language used in developing majority of Android applications in the past decade, abstraction is one of the main concepts (Javatpoint, n.d.). There are literally classes that are made abstract to hide the complexity of an implementation and simplify an algorithm. As a simple example, supposed an abstract class named Animal has a function called makeSound() (notice that true to its definition, these are general terms and functions). When a specific class named Dog implements the makeSound() function, it will be the sound of a barking dog, while a class named Cat implementing the makeSound() function will be the sound of meowing cat. The programmer who will use either classes will not worry about how the makeSound() is implemented, only that he/she can invoke it if needed for any purpose. The concept is the same even for complex systems.

Abstraction is embedded in some of the programming languages of today, as mentioned, especially in the programming language used to develop Android applications. That means that we probably encounter the very technical meaning of abstraction every time we use our smartphones. But abstraction as a concept doesn’t stop there. Let’s take for example, Facebook (Figure 1).

Figure 1. Facebook new post abstraction

In the homepage, you see an option to post an update on your timeline. When you click the “post” button, the update then appears on your profile and your friends’ news feed. We don’t see what happens to the data, we don’t know how the data is processed and inserted into their database (and we don’t really have to know), we don’t know how complex their system is just to make sure your update appears on your friends’ feeds. We just know that the click of the post button does it. The button is therefore an abstraction of all the processes that happens in the back-end.

Let’s take another example: a chess game mobile application. When you play against the computer, you first select a skill level to play against and then select if you’ll play white or black. Once the game starts, take note that every countermove the computer makes is based on the current state of the board and the skill level that you’ve selected at the beginning. The skill level determines how many alternatives the computer will anticipate on before making a move or how far ahead it will look into the game before it decides its next move. The computer is an abstraction of all the set of rules and the strategy that the chess game algorithm deems best. It doesn’t care what processor the smartphone is running nor does it care about the memory available to it, it doesn’t care how input/output is captured by the application. You don’t also see the calculations it is making to counter your move. It just does it and the only representation of it is the countermove it makes after you make your move on the chess board. The complexity is hidden from the users.

It is also important to note that abstraction is not only limited to mobile applications, in fact, it is also used in library products (i.e. algorithm providers, middleware libraries, communication libraries, etc) where the design concept layering is also implemented. It is generally good practice because it simplifies a certain design as long as it is not overdone.

Abstraction is a powerful design concept which helps designers of all kinds, in every field, focus on the fundamentals and then take care of the minute details at a later date. This approach isolates the complexity of a design. In succeeding chapters, we will see how abstraction can coexist with layering and modularization in a single system. 

IV. Modularization

Modularization is the process of dividing a system into multiple independent modules where each module works independently (Langlois, 2002). It is something that can be very tactile unlike abstraction when it comes to new media’s hardware. However, there is also a type of modularization that is immaterial. In this paper, let us examine the most used modularized systems of today: a smartphone and the system unit of a personal computer (Figure 2) and classify them as physical or immaterial modularization accordingly.

Figure 2. Modularized systems. (computerit4u.com, n.d., ComputeHope.com, n.d., Business Insider, 2017)  (from top left to bottom)

Personal computers have been around since the 1990s, but it wasn’t until the past two decades that separate parts started getting sold commercially. Nowadays, you can assemble your own system unit by buying each major part – independent modules – from different manufacturers (i.e. ASUS motherboard, Ballistix RAM, Seagate SSD, Intel processor, etc.) and have a customized system unit which can be more powerful than buying a ready-assembled one. This is top-level modularization and is obviously of the physical type. But what about in the deeper level, will we also find independent inner modules seamlessly working together to form a top-level module? In Figure 2 below, we can easily find the answer to this question with the motherboard as an example.

Figure 3. Operating System Concepts Hierarchy Diagram (Informationq.com, n.d.)

A computer’s motherboard is made up of various components, that although not as easily replaced or assembled like the system unit example earlier, are independent from each other in an operating system (OS) perspective. A computer must have an operating system (i.e. Windows, Linux, macOS, etc.) for it to know what to do and for humans to be able to tell the computer what to do. In Figure 3, the four major concepts of an operating system are itemized. The Intel processor in the customized system unit in the earlier example resides in the motherboard and the Ballistix RAM also resides in the motherboard. They are physically wired together in their slots in the motherboard but in the operating system, they are modularized such that the processor is under the process management “module” while the RAM is being managed by the memory management module. This is an example of immaterial modularization.

Another example of immaterial modularization that is very much used nowadays is modularization in software development (called modular programming). It is also worth nothing that with modularization, those that will use a certain module will be blind to the complexity of it – abstraction. This software design technique originates from way back 1960s but has endured ever since and is applicable in all major languages developed in the past three decades. This is a software development technique that is known by programmers nowadays. The calculator app in your smartphone, for example, is probably modularized according to “addition”, “subtraction”, “multiplication”, and “division” modules. Each module is called according to the user input. And as already shown in Figure 2, a smartphone is not only immaterially modularized but also, physically.

Much like a personal computer system unit, a smartphone has a motherboard, it also has a power source (the battery), a camera component, speakers, and etc. Each component is independent from each other, they are replaceable, and the parts are not necessarily manufactured by a single company. In the case of the iPhone 11, Broadcom supplies the Wi-Fi and Bluetooth chips (Kifleswing, 2020) while O-Film supplies the camera module (Neely, 2020). While in the case of Samsung S9+, Sony supplies their camera module while Qualcomm supplies its transceiver (iFixit, n.d.). Each part/module work together and are all managed by the smartphone’s operating system (i.e. Android, iOS, etc.) similar with a personal computer regardless of the brand of the phone – they both have modularized components.

Modularization has a lot of particularly important advantages. For physical modularization, it’s easier to manage and debug independent modules than a huge system of wires and connections. In the example of a personal computer, if your computer is not booting up, troubleshooting usually starts with checking if the power supply module is working. If you hear the fan and the led power indicator turns green, then it is working. The next step is to probably check if the RAM is working or if the SSD is failing, sometimes a technician swaps these components with a spare RAM or SSD and tries booting up again, and so on and so forth until the problematic component is identified. The rest of the components are left as is and the errant component is replaced, and the problem is fixed without having to buy a new system unit. It also allows room for more flexibility and options as is again, the case with a personal computer. As for immaterial modularization, on top of the ease of debugging and management, it elevates reusability and readability. With the OS example, if your WiFi stops working, you can just shut down and restart your WiFi service from the task manager (if you know which service it is) or turn off and turn on the WiFi adapter from the settings without having to restart the entire computer. Restarting is usually the last resort if everything else fails. It is an extremely useful design principle especially in these types of scenarios. In the simpler calculator example, the advantage is heavier on the reusability of the code. There will only be four modules that will be invoked repeatedly to calculate for each operation depending on the user’s input. More reused code, less source code size, more manageable, clearer and easier to understand by another team member in the case for more complex and intricate systems.

With all the above advantages, there’s only one disadvantage (or challenge) that I encountered while researching and it is that the modules must collaborate with each other very well and have a set of agreed-on standards for it to work. In the system unit example, with various vendors of a RAM or an SSD, each vendor must follow a certain standard such that their product will fit in the slots of a motherboard from MSI, ASUS, or any other major motherboard suppliers and that it must also work regardless of the operating system. A Solid State Standard, for SSDs for example, is explained by the Storage Networking Industry Association (SNIA, n.d.). Meanwhile, manufacturers of motherboards and developers of operating systems must also adhere to the standard to work seamlessly with other components and modules from various other vendors. The same scenario goes for smartphone components and operating systems.

As for the challenge in modularization in software development, a similar close collaboration is also needed. Developers in modules that work together must know the parameters and return types of the modules they’re working on in order to avoid variable type errors. It is also a good programming practice to provide comments on what a certain module does so when other programmers encounter it, they would know what it’s function is (called function headers).

Because of the massive advantage of modularization, it will most likely prevail in the next decades to come. But what is the future of this design principle in new media? MSI’s modular motherboard concept and LG’s modular smartphone might give us an idea as to what that future might hold for modularization (Figure 4).

In 2016, MSI has announced an April Fool’s joke of a fully modularized motherboard they called The One. It has been four years since then and it has become obvious that MSI doesn’t have any plans to produce modular motherboards like but they did introduce us to the concept of modular motherboards and how incredible that could be. In theory it supports all types of RAM, all Intel and AMD processors, all storage devices, and etc (MSI, 2016) – we could only imagine the endless potential of this theoretical product design. It’s basically the dream of computer enthusiasts alike. But unlike the modularized motherboard that we haven’t seen in fruition, modular smartphones are way ahead (although it hasn’t been very successful either). In the same year of MSI’s announcement of their theoretical motherboard, Google demoed their modular smartphone under Project Ara but then also announced the suspesion of this product later of the same year stating that the Ara smartphone will not be commercially available (Statt, 2016). Little is known to the reasoning behind the suspension, but we can only guess that it probably has something to do with the collaboration challenges of modularization (or maybe cost in production). A modular smartphone that went into market however, is the LG G5 with its LG CAM Plus module as an accessory. The options are very limited at the moment, and even with 1.6 million units of the G5 that were sold in the first month of release (Android Authority, 2016), the market of smarphone today is yet to embrace modular smartphones. Perhaps in the next few more decades.

Figure 4. Modular motherboards and smartphones (MSI, 2016, talkandroid.com, 2016)

V. Layering

Layering “involves organizing information into related groupings and then presenting or making available only certain groupings at any one time. Layering is primarily used to manage complexity, but can also be used to reinforce relationships in information.” (Oreilly, n.d.)

The most obvious form of layering in new media is the internet – interconnected computer networks. Table 1 below shows the conceptual models that the communication of the internet is built on. Although the modern internet is based on the simpler TCIP/IP Model, the OSI model helps visualize how network communication operates.

 

Layer OSI Model TCP/IP Model
7 Application Application
6 Presentation
5 Session
4 Transport Host-to-host transport
3 Network Internet
2 Data link Network Access
1 Physical

Table 1. The OSI Model vs TCP/IP Model

In summary, the network access layer combines layers 1 and 2 of the OSI model (Science Direct, 2017). It is pertaining to the data bits and how it is carried around the network (i.e. fiber optics, wireless, etc.) and it also addresses how the bits are converted into protocol units (i.e. MAC Addresses). The internet layer on the other hand is where IP addresses lives and are routed for data transmission while the transport layer connects the internet layer and the application layer. Lastly, the application layer specifies the protocol and interface used by hosts in a network, it focuses on end-user services and is in itself, an abstraction. It is easy to confuse what one layer does but it’s easy to remember that there’s a layer for a certain task/role. You might forget that the transport layer is what connects the internet and application layers but you know there is such a layer that does the connection. And this is why, layering is very effective in network communications.

Within the Application layer where the Presentation layer in the OSI Model resides are other layers (the internet is built of layers upon layers that communicates with each other through protocols and standards). Figure 6 below shows these inner layers.

Figure 5. Presentation Layer layers. (Ragnarsson, 2015)           

Layering in current network communications also plays an important role in information security. Although it doesn’t guarantee a completely safe network, this design principle enhances the integrity of a system. In software security design there is a “defense in depth design principle”. It is “a concept of layering resource access authorization verification in a system and reduces the chance of a successful attack” (Merritt, 2013) This approach requires unauthorized users to bypass each layer’s authorization to gain access to a certain resource.

The internet is considered to be one of the most important inventions of the century. And in the future, rest assured that the internet layers will endure, if not improved further. This design principle will continue to be part of the internet even in the next years.

VI. Conclusion

Examining the latest digital artifacts of the past two decades makes it very clear that the design principles abstraction, modularization, and layering plays a huge role in these successes. With the advantages far outweighing their disadvantages (challenges), inventors, designers, and programmers were able to create advanced technologies with a lot of potential for growth. Even better, these design principles are not isolated in themselves, an abstraction can also have layering and modularization, a layering design can also exist together with abstraction and modularization in a single system, and a modularized design can also have layering and abstraction. Examining these principles is crucial in understanding what role they will play in the breakthroughs of the next decades to come and how they have opened a huge opportunity to improving current systems and creating new ones for the advancement of technology.

WordPress v. Webflow: Creative capabilities and constraints of website creation platforms

Mary Margaret Herring

Abstract

This paper offers a comparative analysis of the interfaces of the popular content management systems WordPress and Webflow. WordPress and Webflow have become widely adopted tools for website creation they offer powerful graphical user interfaces (GUIs) that allow users of any technical skill to create and maintain a web presence. This democratization of web creation has enabled many nontechnical users to publish their ideas or products online. However, GUIs can over simplify a program’s complexity by relying heavily on metaphor and ease of use instead of illustrating new possibilities. Do the GUIs of WordPress and Webflow increase or limit users’ creative capabilities? To answer this question, a comparative analysis of WordPress and Webflow will be conducted using Murray’s (2011) digital affordances as a framework.

Introduction

It goes without saying that having a web presence is extremely important. Yet, many people with a product, idea, or story may not have the technical skills required to develop their own sites from scratch. Luckily, content management systems with graphical user interfaces (GUIs) – like WordPress [i] and Webflow – allow users to create websites without writing a single line of code. These products have greatly democratized web creation by creating interfaces that are reminiscent of other programs that nontechnical users are already familiar with. But, does a reliance on convention limit the creativity of WordPress and Webflow users?

WordPress and Webflow offer an interesting case study because they appeal to both novice, nontechnical users and experienced developers. Further, these two sites have very different interfaces that should yield a rich comparison. After examining the limitations of GUIs that draw heavily from metaphor, this paper will compare WordPress and Webflow. The comparison will be structured using Murray’s (2011) four affordances of digital media. Overall I argue that Webflow maximizes the affordances provided by digital media more successfully than WordPress and is likely easier to use by novice users.

Design Challenges in Democratizing Web Development

Content Management Systems

Creating a website with traditional front-end web development practices can be a painstaking process. Even on the most basic level, websites consist of many files: HTML files dictate the site’s structure and content, styling is added with CSS files, and JavaScript files make the site more interactive. After publishing the site by uploading these files to a server, editing the site’s content can be difficult. In order to swap out an image on a site, for instance, the administrator would not only need to upload the new image file to the server, but would also have to modify the HTML file where the image was displayed to call the new image. Then, the HTML file would also have to be re-uploaded to the server. In order to make content management more seamless, systems called content management systems (CMSs) have been developed. These systems facilitate content creation and publishing and have been used to create blogs, eCommerce sites, portfolios, and nearly everything in between (Cabot, 2018).

CMSs have become increasingly popular due to their ease of use and wide range of functionalities. In 2018, Martinez-Caro et al. found that nearly 50% of web pages are implemented using CMSs which usually consist of three elements: the content manager’s files, a hosting provider where these files are stored, and a linked database to store site information (Martinez-Caro et al., 2020). Rather than directly uploading files of code to the server, CMSs act as a more user-friendly intermediary where content can be stored and edited. To facilitate this, most CMSs have an administration area where pages, posts, and functionalities can be added to the site. This administration area is referred to as the back-end while the part of the site that a visitor would see is called the front-end (Martinez-Caro et al., 2018).

Martinez-Caro et al. (2018) believe that CMSs have become so popular in part because they are accessible to a wide audience while still offering a plethora of functionalities. To make their programs accessible to users who may not have a technical background, CMSs implement back-end GUIs that allow non-technical users to quickly create stylized sites by utilizing rich-text editors and drag-and-drop functionalities. Enabling non-technical users to create and maintain a web presence has democratized web publishing. Yet, many CMS services, including WordPress and Webflow, aim to create scalable products that can be used by both non-technical web creators and large corporate clients. While these services share the same mission, the platforms operate in quite different ways.

Since its launch in 2003, WordPress has become the most widely used CMS. As of December 2020, over 39.2% of all websites were implemented using WordPress (W3 Techs). WordPress is a highly collaborative open-sourced software. The WordPress Core, which configures access to a user’s files, WordPress settings, database configuration, and dashboard settings, is developed by The Core Development Team (Hughes, 2017). However, plugins, which can be implemented to add functionalities to WordPress sites, and themes, that stylize content, can be developed by anyone. The design rules for plugins and themes are well documented and a massive repository of these crowdsourced add-ons exist making site functionalities and designs highly customizable. Users can create content from a block-style page and post editor. Alternatively, free and paid versions of plugins like Elementor or WP Bakery provide extended drag-and-drop content creation elements. Finally, users can fine tune their site’s style in the customizer.

A newer competitor to WordPress is Webflow. According to Sanchez-Olivera (2019), Webflow “attempts to fill the space between DIY software like Wix and Squarespace, traditional content management systems like WordPress, and actual front-end web development.” This is accomplished by providing a “Photoshop-like” GUI that creates HTML, CSS, and JavaScript files as content is added to the drag-and-drop editor. This allows users to create custom templates for dynamic content and static pages alike. Unlike WordPress, however, Webflow is a for-profit platform that offers hosting services and charges users to export their files after they’ve created their sites. Nevertheless, this platform has garnered attention from the web design community for its visual design capabilities.

Both WordPress and Webflow offer an interesting case study because they market their sites to both novice users and experienced developers alike. These sites simplify the website creation process by allowing users to develop content in GUI, What You See Is What You Get (WYSIWYG) editors. But, as Gentner and Nielsen state, “the problem with WYSIWYG is that it is usually equivalent to What You See Is All There Is (WYSIATI)” (1996, p. 75). How do these sites simplify and abstract the process of web development to be utilized by nontechnical users? Does this limit the capabilities of experienced developers? Before offering a comparative analysis of the two website creation platforms, the intentions of GUI pioneer, Alan Kay, and Gentner and Nielsen’s (1996) Anti-Mac Interface will be discussed to determine the limits and benefits that GUIs offer.

Alan Kay and The Anti-Mac Interface

In the same way that WYSIWYG website builders rely on GUIs to allow non-technical users to publish websites, GUIs were employed in the 1970s to make computers more accessible to the general public. In his book, Software Takes Command, Manovich (2013) highlights the inconsistencies between Alan Kay’s intentions as the “pioneer of GUIs,” and the way that GUIs have been commercialized. Manovich writes that “Kay wanted to turn computers into a ‘personal dynamic media’ which could be used for learning, discovery, and artistic creation” (2013, p. 61). To do this, Kay and his team simulated the way that people interacted with pre-existing media on the computer while adding functions that the prior media was lacking (Manovich, 2013). For instance, the folder icon was used to demonstrate to users that files could be grouped together and organized like their physical counterparts. However, files can also be searched for words or phrases in a way that paper files cannot. This helped users feel more familiar in their digital environment and understand the machine’s capabilities. Apple and other technology companies readily adopted this convention to help make interfaces more intuitive by drawing heavily from metaphors from the physical world (Manovich, 2013). In this way, the GUI should be so intuitive that it becomes transparent. But, as Manovich argues, instead of the transparent interface that was adopted commercially, Kay and his colleagues had envisioned a “GUI as a medium designed in its every detail to facilitate learning, discovery, and creativity” (2013, p. 100). While it is clear that GUIs have greatly democratized the use of computers and website creation, it is worth wondering if the transparent interfaces limit users’ capabilities.

To consider alternatives to the transparent interfaces implemented commercially, Gentner and Nielsen (1996) discuss an alternative to Apple’s Mac interface. In 1996, one of Apple’s human interface guidelines stated the importance of using metaphor in design. However, Gentner and Nielsen (1996) argue that using metaphor in designs can constrain users and designers. Users may become constrained by the use of metaphor when the digital implementation of the metaphor lacks or has additional features that the physical equivalent lacks. In the example of the file folders used above, physical file folders are not searchable. A person cannot walk up to a file cabinet, type in a search query, and receive a list of relevant physical documents. However, they can do this on the computer. In this example, by solely relying on metaphor to demonstrate what users can do, a user may not know that they can search for relevant documents. Instead of relying on metaphor, Gentner and Nielsen (1996) recommend integrating more language based commands and providing a richer representation of objects that reveal more about the contents the objects contain.

According to Gentner and Nielsen (1996), Apple’s human-interface guidelines also stipulated that users should always be in control of the interface. One way of giving users control is by implementing a direct manipulation interface where users interact directly with objects. This allows the user to understand exactly where they are in the task that they are completing. However, this also means that users must be involved at the atomic level of the operation. Gentner and Nielsen state that by directly manipulating content users are reduced to assembly line workers that complete monotonous tasks instead of executives who can issue high-level commands (1996, p. 74). While these are just a few examples of how Apple’s human-interface guidelines may be violated for the better, it becomes clear that ease of use is often at odds with the functionalities of a technology. This sentiment is summarized by Gentner and Nielsen who state that “[t]he GUIs of contemporary applications are generally well designed for ease of learning, but there is often a trade-off between ease of learning on one hand and ease of use, power, and flexibility on the other hand” (1996, p. 79). When this tradeoff is applied to web creation platforms, I ask: in what ways do the GUIs of Webflow and WordPress limit and empower design capabilities and functionalities for novice and experienced users?

WordPress v. Webflow

A comparative framework: Maximizing the affordances of digital media

With this tradeoff in mind, we can now begin to compare WordPress and Webflow. When comparing these two platforms, Murray’s (2011) grid of digital media affordances will be used. Murray writes that “[t]he digital designer has two responsibilities: to create the artifact that best serves the needs of the people who will interact with it, and to advance the digital medium as a whole” (2011, p. 87). To advance the digital medium, Murray (2011) argues that the four affordances of digital media must be maximized. She writes that digital media afford procedural, participatory, spatial, and encyclopedic actions (Murray, 2011). Digital media are procedural because computers are able to execute conditional behaviors in ways that prior forms of media could not. Computers also afford participation by taking inputs from users and producing outputs accordingly, and vice versa. The spatial affordance of digital media builds upon the participatory and procedural properties of digital media by offering an abstract space for users to interact with digital content. Finally, computers are encyclopedic because they can transmit and organize more information than any other previous media (Murray, 2011). While this list of the affordances of digital media may not be comprehensive, it offers a framework that emphasizes utilizing all of the functionalities afforded by digital technology in the creative and expressive ways that Kay intended.

Maximizing Procedural Affordances

As machines that are controlled by conditional logic, computers and digital media are fundamentally procedural. Yet, computer users may never realize the underlying procedural behavior of computers. This is because these behaviors are shrouded in layers of abstraction that hide the complexity of the operations performed by the device. To manage this complexity, Murray (2011) recommends developing modular programs. Irvine defines modularity as “conceptual models of systems with interconnected subcomponents that can be implemented in real constructed things” (n.d., p. 1). Developing subcomponents makes it easier to add or remove parts of the system as long as all parts of the system comply with a universally accepted set of design rules. These modular subcomponents maximize the procedural capabilities of technologies by dividing effort and coordinating tasks and decisions (Baldwin & Clark, 2000). Therefore, examining the modularity of WordPress and Webflow will be an indicator of how much the platforms maximize the procedural behaviors afforded by digital media.

WordPress

As an open-source program, WordPress is massively modular and encourages developers to create and modify subcomponents of their site. In order to understand how this is possible, it is important to first take a look at the relationship between the WordPress core, themes, and plugins. The WordPress core is a set of files that are developed by The WordPress Core Development Team. These are the main files that control access to uploaded content, dictate WordPress settings, configure the database and dashboard and allow for additional features to be added to the site (Hughes, 2017). According to the WordPress Plugin Developer Handbook, there is one cardinal rule: “Don’t touch the WordPress core” (WordPress Community, n.d., Plugin Handbook). This is because the core files will update with each new instance of WordPress. Instead of making changes directly to the core files, developers recommend using plugins to add additional functionalities to the site.

Plugins greatly expand the functionality of a WordPress site without modifying the core files. On the most basic level, WordPress plugins are PHP files with a WordPress plugin header comment (WordPress Community, n.d., Plugin). Plugins operate by using hooks, actions, and filters to tap into the core files. Hooks are inserted into the core files and act as placeholders for plugin developers to tap into. Actions are a type of hook that allows the developer to add or change a functionality of the core file and filters are hooks that allow the user to alter content as it is displayed (WordPress Community, n.d., Plugin). When the site runs, WordPress identifies the plugin files by searching through the plugins folder to find PHP files with WordPress plugin header comments. By adding hooks in the core files, plugin developers are able to greatly expand the functionality of their site with actions and filters. Because of its crowdsourced nature, these design rules are well documented in the Plugin Handbook (WordPress Community, n.d.). Further, problems with a plugin will not cause the entire site to crash. The site can easily be repaired by uninstalling the plugin. This modularity has also been a boon to novice web creators who can activate any of the plugins in the repository without touching a line of code.

While plugins extend the functionality of WordPress sites, themes control the way that site content is displayed in the browser. Like plugins, theme development is crowdsourced and massively modular. On WordPress, users can create static pages or dynamic content like blog posts. Themes typically contain different templates for displaying these varying types of content. To determine which template to use, WordPress has a default template hierarchy that first determines what type of page is being requested, selects a template based on the order in the hierarchy, and then uses that template (WordPress Community, n.d., Theme). There are only two design rules stipulated by the core for theme development. First, a theme must contain an index.php file which acts as the main template file and a style.css file that contains styling information. Second, the theme cannot add a critical functionality ­– a site should not fail to function solely because the user changes the theme (WordPress Community, n.d., Theme). Themes are modular because they merely contain templates for displaying the content. Aside from the way it is displayed, the content remains unaffected by the theme that is installed. This allows experienced developers to create their own WordPress themes and novice users to benefit from free and paid professionally designed themes from the repository that are easily customizable.

The template hierarchy used by WordPress.

WordPress’s template hierarchy. This is the process that the system takes to determine what template to use.

Webflow

Webflow differs quite drastically from WordPress. It is worth noting that the for-profit nature of Webflow means that there are fewer guidelines about the way that the software works. Yet, in interacting with the visual editor, the way that the program operates becomes more clear. Unlike WordPress, there is no distinction between core files, plugins, and themes. Rather, all creation and editing takes place in the visual editor or designer.

On Webflow, this distinction between content and style is eliminated. When creating static pages, users have complete design over all elements of the site – from the header and footer, to the way that the body text is displayed. Much like using a text box in Microsoft Word, users add containers for their text and then directly add text or media into those containers. This generates clean and easily readable HTML. For example, the following screenshot of a section of a website created with Webflow generates the following HTML (images from “Webflow vs. WordPress,” n.d.).

A section of Webflow's site

The way the site appears to users (Image from “Webflow vs. WordPress,” n.d.).

The HTML generated to design that site.

The HTML that Webflow generated for this section of the site (Image from “Webflow vs. WordPress,” n.d.).

 

 

 

 

 

 

 

 

 

This customization is fabulous for users who have wanted to create WordPress themes from scratch but lack the knowledge of PHP to do so. However, creating each individual page is a tedious task. To avoid this, Webflow allows users to save and reuse blocks of code and also offers a CMS service where users can add custom fields of content and create custom templates. For example, a user creating a template for a blog may want each entry to have a blog title, date, author, category, blog post, featured image, and featured color field. The user can add or delete these fields as they find necessary and when they publish the post, they just upload the relevant content into each of these fields. Then, to stylize the posts, they can create a template that accepts content from the fields. This streamlines the coding process by utilizing the digital medium’s procedural behaviors to display similar forms of information using conditional logic.

Webflow’s heavy reliance on traditional web development practices means that the learning curve may be quite steep for users unfamiliar with front-end development. However, there are several tools that may help non-technical users get sites up and running. Webflow offers several free and paid templates created by developers. This offers users a site that is already mostly built and simply requires inputting content. Also, while Webflow lacks plugins, they do offer a library of integrations which are bits of code developed by third-parties that can be embedded into sites. While Webflow believes that the lack of plugins are beneficial, embedding content using iframes has been known to slow down performance because of the increased memory required (MDN Contributors, 2020). It is also worth noting that integrations can only be embedded in a page and therefore are not able to add functionality to an entire site in the same way that WordPress plugins can. There are also extensive “hacks” that can be used to upgrade site functionality that will be discussed later on. Yet, these hacks are nowhere near as extensive as WordPress’s plugin repository.

While the lack of modularity offered by Webflow may be viewed as a negative, Webflow emphasizes the simplicity of the platform. Webflow believes that this is preferable to a more modular design because there is no extra code from plugins to slow down the site, there are no automatic updates to core files (because there aren’t any), and there’s no PHP (“Webflow vs. WordPress,” n.d.).

Comparison

While Webflow’s creators praise the product’s simplicity, WordPress’s modularity has proved to be one of its greatest assets because it makes the program scalable. Murray states that scalable programs are defined by “being able to accommodate more users, more data, more related procedures without having to be reengineered” (2011, p. 55). WordPress’s scalability is likely part of why it is the most popular CMS (W3Techs, 2020). Large companies are able to manage massive sites by delegating user roles and the functionality of the site can easily be extended with plugins. While Webflow enables collaborators to be added to the course and users can edit their exported files, extending the sites’ functionality requires the user to understand how to code additional functions instead of simply installing a plugin if one doesn’t exist in the more limited repository. Because of WordPress’s modularity and scalability, it maximizes the procedural affordance offered by digital media more successfully than Webflow.

Maximizing Participatory Affordances

Digital media afford participation because the user and computer communicate in a meaningful way. The way that this communication takes place is deeply rooted in the procedural affordance of digital media. Computers, for instance, may ask for an input, use predefined procedures to decide what to do with this information, and then produce an output. Most of the time, however, the procedures used by the computer are irrelevant to the user. Most procedural operations performed by digital media are hidden from the user so that the user only sees the result (Murray, 2011). This process of abstracting elements to hide their complexity is called encapsulation (Baldwin & Clark, 2000). While encapsulating items is important for productive communication between the user and digital medium, visibility is also important. Murray writes “[t]o achieve the design goal of visibility, the designer must support the creation of a coherent mental model of the computer’s processing” (2011, p. 329). Here, visibility offers the user an understanding of how the program is operating so they know the possibilities and limitations of the action that is being completed. For these reasons, a balance of encapsulation and visibility will be an important benchmark when analyzing the participatory properties of WordPress and Webflow.

WordPress

Because WordPress is composed of open-source software, there is an abundance of information on how to develop plugins and themes for WordPress. However, the interface of the software is largely encapsulated and possibly quite mysterious to novice users. When users create posts or pages of content, they use a rich text editor that is reminiscent of Microsoft Word. The mental model encouraged by this WYSIWYG editor is not representative of how the system actually works. HTML is a markup language used by documents that are displayed in browsers. Content is marked as elements like headers, paragraphs, or bullets to give the page structure. This is especially important when considering things like search engine optimization as search engine crawlers rank headings as being more important than body text. But, most rich text editors emphasize style over structure. In Microsoft Word, for example, it does not matter if I use the Heading 1 style defined by my computer or if I simply change the font, weight, and size of my lettering – it will all look the same on the printed page. On the web, however, lacking to designate elements in the proper way may lead to problems like poor search engine ratings. While WordPress’s content editor does a wonderful job of encapsulating the complexity of web content by providing a familiar rich text editor, this design does not encourage users to form an accurate mental model of how the technology actually works.

The themes and plugins that can be installed on WordPress sites are also encapsulated. The vast repository of plugins available means that novice users can easily extend the functionality of their sites by installing and activating the plugins. The GUI that WordPress provides makes this easy to do; adding plugins can be accomplished without ever seeing a line of code. The mental model that plugins bring to mind is apt for the way that plugins function. As previously discussed in the above section on procedural affordances, plugins allow users to extend the functionality of a site without touching the WordPress core files. In this instance, the metaphor of a plugin being something additional that can be added or removed easily corresponds well to the function of a WordPress plugin. Similarly, themes are well encapsulated and can be implemented by clicking a few buttons. The idea that a site can change themes while the content remains the same also is a useful mental model.

Webflow

While WordPress’s content editor conceals important aspects of the web development process from the user, Webflow’s drag-and-drop GUI is built around generating clean HTML files. In fact, the GUI is so reliant on the conventions of HTML that Webflow designer Sanchez-Olivera (2019) states that “designing in Webflow requires (and encourages) thinking less like a graphic designer and more like a front-end developer.” The Photoshop like GUI abstracts the process of coding by offering a visual editor that transforms text box-like objects full of content into lines of code. Similarly, changes to color, size, and alignment are compiled in the CSS files and animations and interactivity are added in JavaScript files. All of these files can be seen by the user as they create in the visual editor. When a user clones a theme, the structure and style of the page can similarly be found in the visual editor. By encapsulating the processes that are taking place, Webflow offers a design environment that non-technical users will be familiar with. While the mental model that the GUI inspires may be difficult to learn because of its deep foundations in traditional web development, it requires users to understand more about the roles of HTML, CSS, and JavaScript files in the content that they are producing.

Webflow’s CMS also encapsulates the processes taken by the software in a way that encourages a useful mental model. By allowing users to create their own custom fields, Webflow sustains the flexibility that programmers have when creating websites. Further, Webflow allows users to create custom templates in a way that is much more reminiscent of traditional web development. This differs from WordPress’s content editor that has fixed input areas and does not allow the user to create custom templates within a theme – although experienced developers may create their own custom themes and templates to get around this issue.

While the visual editor and CMS affords participation in a way that WordPress does not, the lack of plugins may be more intimidating to non-technical users. Instead of pushing a button to activate a plugin, Webflow offers a series of modifications that can be added to a site called F’ing Sweet Hacks. F’ing Sweet Hacks are a collection of 45 “hacks” that users can copy and paste into their code. Each hack has a video that walks the user through each line of the code to explain what the code does and how it can be modified. While this is an awesome learning tool for users who are unfamiliar with programming, the processes of the program are not abstracted in a way that is helpful to novice users.

Comparison

Webflow’s structure enables users to create content in a way that mimics the flexibility of traditional web development. This is made possible by abstracting the creation of HTML, CSS, and JavaScript files into a visual, drag-and-drop editor. Webflow’s CMS also abstracts the creation of templates more effectively than WordPress because the user has the ability to create custom fields and design their own templates. This flexibility is more representative of the options that a front-end developer would have at their disposal. Although developers with a working knowledge of PHP can create their own custom fields, themes, and templates on WordPress, I argue that Webflow does a better job at abstracting and encouraging a mental model for the processes that are occurring when they design and add content to their site.

Maximizing Spatial and Encyclopedic Affordances

While the procedural and participatory affordances of WordPress and Webflow received in-depth discussion, the discussion of their spatial and encyclopedic affordances will be combined. This is due to the fact that the spatial and encyclopedic affordances of digital media draw extensively from the procedural and participatory affordances and much of this content will overlap with the previous discussion. Because the encyclopedic properties of WordPress and Webflow are mostly the same, an abbreviated discussion will be included in the comparison section.

Murray (2011) writes that “digital space is created out of bits rather than bricks, and it rests upon the procedural and participatory affordances of computation” (p. 70). Digital media create space by using abstracted representations of physical objects like file folders, windows, and trash bins. By clicking, dragging, and manipulating these items, space is created. Murray (2011) points out, however, that we can only interact with these items in a way that reinforces their functions as pieces of information or chunks of code. In this way, the spatial affordance relies upon the procedural and participatory affordances of digital media. Therefore, when analyzing how Webflow and WordPress maximize the spatial properties afforded by digital media, it will be important to pay special attention to how manipulation of the objects reinforces their functions as pieces of code.

Because of the computer’s ability to store and transmit massive amounts of information, digital media are encyclopedic. Murray (2011) argues that the encyclopedic capability of the computer raises the expectations of the designer to clearly communicate and display content in a way that makes it easy for users to sort through and find information. When analyzing WordPress and Webflow’s maximization of the encyclopedic affordance of digital media, it will be important to determine how the sites allow content creators to organize their content in a clear and consistent manner.

WordPress

While WordPress’s customizer allows users to change colors and fonts, it does not really allow users to interact with the objects in the theme’s header and footer in a spatial manner. Similarly, in the blocks editor, where content is added, users can add different blocks of code but do not have much control over how this content is displayed in the page. However, there are a number of drag-and-drop plugins that users can add to build their content visually. Yet, the lack of objects that can be manipulated and the highly encapsulated nature of the theme files leads to an interface that does not maximize the visual affordances offered by digital media.

Webflow

Webflow’s visual editor maximizes the spatial affordances offered by digital media by creating a drag-and-drop interface that only allows the user to manipulate elements in ways that will lead to the generation of HTML and CSS files. This is perhaps why Sanchez-Olivera (2019) states that Webflow encourages users to think like front-end web developers. Rather than allowing users to drag-and-drop content in a way that would lead to unresponsive websites or generate poorly formatted code, Webflow reinforces the objects’ functions as pieces of code. For this reason, understanding basic front-end development principles equips Webflow users with a knowledge of what can and can’t be done in the visual editor. Overall, Webflow’s visual editor does a great job of maximizing the spatial affordances of digital media by representing lines of HTML code and objects in the visual editor and allowing users to set CSS properties in a GUI.

Comparison

The visual editor of Webflow allows users to manipulate visual objects in a way that is not possible in WordPress. Because WordPress relies on PHP templates for themes, the number of customizable elements available to the user vary depending on what theme is installed and the reasons for this inconsistency are kept hidden from the user. This issue is avoided in Webflow’s visual editor because users start with a blank canvas and can see the code that is being generated. Overall, Webflow maximizes the spatial affordance provided by digital media in a more successful way than WordPress.

Both WordPress and Webflow maximize the same encyclopedic functions of the digital medium in similar ways. Webflow touts its ability to generate clean HTML files that make its pages easily searchable by search engine crawlers. However, there are a number of plugins available on WordPress, like Yoast, that enable users to approve their site’s indexability. Because they are both CMSs, WordPress and Webflow also maximize the computer’s encyclopedic functions of storing and displaying content. For this reason, WordPress and Webflow are comparatively similar in this regard.

Conclusion

WordPress and Webflow are two popular web creation platforms that allow nontechnical users to create web content with GUIs. While this has led to a democratization of web creation, Gentner and Nielsen’s (1996) “Anti-Mac Interface” offers several compelling reasons that GUIs may limit a user’s understanding of the functions that a computer or program can complete. However, after examining Murray’s four affordance of digital media (2011), it becomes clear that GUIs that maximize the procedural, participatory, spatial, and encyclopedic affordances provided by digital media can allow users to interact with technology in rich and meaningful ways. Due to its open-sourced nature, WordPress is a massively modular system and maximizes the procedural affordances of digital media by dividing tasks and functions into subcomponents. For this reason, WordPress is scalable and can be used by novice users and massive companies. However, Webflow’s visual editor encapsulates the content and stylizing processes of web development in a way that encourages helpful mental models to the user and therefore is more effective in facilitating productive communication. In this way the drag-and-drop GUI editor maximizes the participatory and spatial affordances by providing users with a useful way to create HTML, CSS, and JavaScript files without actually coding. Overall, I believe that a novice user may not only find it easier to use Webflow because of the visual editor, but will learn more about web development in the process.

If considering improving their product, I would urge Webflow to maximize the procedural affordances offered to them by creating a more modular system. While there is a budding community of integration and theme developers for Webflow, it pales in comparison to WordPress’s repositories. It seems that WordPress’s modularity has made it extremely versatile and that may be one of the reasons that it is so widely used. WordPress, on the other hand, may greatly benefit by using metaphors in their interface that encourage more apt mental models. While the encapsulation of information makes the platform less intimidating to novice users, it also does not reveal much about how the program works. This may be accomplished by offering more resources to new web creators about the function of themes and plugins and how they implement the content a user adds. A more holistic understanding of this process will likely provide an important mental model that the users can utilize when designing their website. As a final note, it is worth stating that both WordPress and Webflow are fascinating case studies and more research on their interfaces may illuminate ways to get more nontechnical users involved in the process of website creation.


References

Baldwin, C. Y., & Clark, K. B. (2000). Design rules. MIT Press.

Cabot, J. (2018). WordPress: A content management system to democratize publishing. IEEE Software, 35(3), 89–92. https://doi.org/10.1109/MS.2018.2141016.

Gentner, D. & Nielsen, J. (1996). The anti-Mac interface. Communications of the ACM, 39(8), 70-82.

Hughes, J. (2017, January 19). An introduction to WordPress core files. Themeisle. https://themeisle.com/blog/wordpress-core-files/.

Irvine, M. (n.d.). Introducing Modular Design Principles. Unpublished Manuscript.

Manovich, L. (2013). Software takes command: Extending the language of new media. Bloomsbury.

Martinez-Caro, J.M., Aledo-Hernandez, A.J., Guillen-Perez, A., Sanchez-Iborra, R., & Cano, M.D. (2018). A comparative study of web content management systems. Information, 9(2), 27. https://doi.org/10.3390/info9020027.

MDN Contributors. (2020, November 8). <iframe>: The Inline Frame element. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Accessibility_concerns

Murray, J. H. (2011). Inventing the Medium: Principles of Interaction Design as a Cultural Practice. MIT Press.

Sanchez-Olvera, A. (2019, February 13). Why Webflow is the best web design program right now. Prototypr.Io. https://blog.prototypr.io/why-webflow-is-the-best-web-design-program-right-now-f128aef8b45.

W3Techs. (2020, December 6). Usage statistics of content management systems. W3Techs: Web Technology Surveys. https://w3techs.com/technologies/overview/content_management.

Webflow vs. WordPress. (n.d.). Webflow. https://webflow.com/vs/wordpress.

WordPress Community. (n.d.). Plugin handbook. WordPress.Org Developer. https://developer.wordpress.org/plugins/.

WordPress Community. (n.d.). Theme handbook.  WordPress.Org Developer. https://developer.wordpress.org/themes/.


[i] This paper discusses the open-source WordPress.org rather than the for-profit hosting service provided by WordPress.com.

How Weibo Applies and Violates Interface Design Principles and How Can It Improve Its Interface Design

How Weibo Applies and Violates Interface Design Principles and How Can It Improve Its Interface Design

Yingxin Lyu

Abstract

nowadays the popularity of mobile social applications, these publishers of the most popular social applications are too confident that they will never lose their users. Thus, they gradually put user experience in the less important place than their business interests. Weibo is a typical example. Now, users are standing this application with illogical interface design. This paper is about the study of interface design of Weibo, a popular social media app. First, it applies modularity and the eight golden rules of interface design to analyze how Weibo design its interface. Then, the paper shows some cases of Weibo’s bad and unfriendly interface design. In the last part, it gives the reasons for formation of these violations in Weibo’s interface design and tries to give advices about how to solve them in the perspective of how to improve user experience.

Introduction of Weibo

Weibo is a broadcast social media that shares short, real-time information. It is one of the most popular social media platforms in China since its launch in August 2009. The English name of Weibo is microblog, and the earliest microblog website is Twitter. The working mechanism of Weibo and Twitter are much alike. Weibo has website and mobile app. With Weibo, people can share everything they like. They can post words, pictures, videos, music, and many other media. The microblog they post named “weibo”, the same as the application. A user can follow their friends and celebrities in order to receive their weibos. Other people can also follow the user in order to see his or her posts. Now, Weibo is very famous of its “Weibo Hot Search”. It is not only a chart showing the real-time most trending topics but also offering places for advertising. Moreover, Weibo creates many topic communities for users.

The Weibo mobile application has five main pages separated by the bottom menu with five buttons. It is a general ways of separating different main pages of applications. The design of these five buttons also applies the principle of affordances. The first page is the home page with all the weibo post by people a user follows will be present here. The user scrolls down the page in order to see more. It is an infinite scroll that the user can read all weibos posted by his or her following. There is a parallel page named “For You”. Weibo uses big data and recommendation algorithm to offer recommended weibos for the user. The second page is especially for video watching. Now because short videos are more and more popular, so Weibo creates a page for videos only. The third page includes searching bar, Weibo Hot Search, and hot weibo recommendation. The fourth page is for receiving and sending message. A user can chat with their friends and other following people. He or she will receive alert if receiving comments or likes from others, or being mentioned by others. The last page is for the user’s personal data. The user can check weibos he or she posted, all weibos that he or she liked before. Moreover, the page shows the user’s most visited people and community, which are shortcuts to the destination that the user’s preferences.

 

Application of interface design principles

  1. Modularity

The basic module of app is a single weibo that posted by a user. On the home page and “For You” page is the array of weibos posted by following people or recommend weibos. The video page shows only weibos with videos posted by other users that Weibo recommend to the user. Moreover, the hot search chart is also depended on every weibo. It calculated keywords’ frequency of appearance in weibos posted in real-time. Entering one of these hot searching keywords, the page is also composed of the array of weibos, which includes the keyword. Thus, Weibo uses three ways to distributed all kinds of contents in different pages, and the basic element is a single weibo.

  1. strive for consistency

First, the theme color of Weibo is orange, and the icon is a cartoon figure of an eye. In the operating interfaces, orange functional buttons are everywhere. The names of vip users are also orange. Secondly, Weibo creates its own identical terminology: “topic” and “super topic”. Words and short sentences can create their “topic” community, and fans can send posts with hash tags of the topic. The font design is the same as operating system. Normal literal contents are black. The “topic” contents with hash tags are blue, the same as the color of usual hyperlink. Weibo also keep the way of presenting contents in a same way: in a rectangular area, from the top to the bottom are name, literal content, pictures or a video, and “Repost”, “Reply” and “Like” buttons. Each rectangular area has a short interval. Users browse all the posts by sliding up and down.

  1. Seek universal usability

Weibo can learn from people’s preferences and recommend contents that the users may like. For a new user, who has not followed many celebrities and friends, Weibo will recommend many weibos for him or her, and quickly learn the preference in order to improve the recommendation’s accuracy. For intermittent users, Weibo knows them well, so they will receive many recommended weibos in “For You” and “Hot” pages, which offer them abundant contents. Weibo not only bring contents for users to read and watch, expert users will discover more communities and areas which lead them to make friends and have a chat group with other fans and even the celebrities.

  1. Offer informative feedback

Weibo offers feedback of users’ operations. Weibos on the home pages only show limited words and pictures, so if he or she wants to see the complete content, the user needs to tap the white background of the weibo. The feedback is that after tapping, the color of the background of posts will become deeper, and then it will transfer to the page of the full content of the weibo.

If the user taps the “Like” button, the color will also change from grey to red.

Moreover, every time after the user scrolling down the home page to refresh, at the top of the interface, it will present the informative hint saying how many new weibos are updated.  

The third example is that after a user tapped the button to download a picture, a hint message will appear in the middle of the screen telling the picture is already saved in the album of the smartphone.

  1. Design dialogs to yield closure.

When the user wants to post texts, pictures, or videos with the application, Weibo gives them a good series of guideline of how to operate step by step. To make it transparent, let’s suppose that a user wants to post a weibo with pictures and texts. First, he or she needs to tap the “add” button at the top right corner of the home page, and then there will appear a menu, so they can choose to upload a post, picture, or video. After choosing “picture”, it will jump to an interface that is connected to the photo album of the smartphone for the user to choose photos.

Then, he or she can tap the top right “next” button, the same as “add” button. Now the user coming into the editing interface, in which chosen pictures can be put on labels or stickers, cropped or adding some mosaic. The “next” button is still on that position. After completing editing pictures, the user can go to the next step.

In this new page, he or she can write descriptions of the pictures. Alternatively, if he or she wants to come back the edit pictures again, tapping the picture will guide the user back to the last step. The final step is to tap the “send” button, which is still at the top right. If the user wants to discard the post, the “cancel” button is just at the top left.

These key buttons that guiding users to move to the next step are all placed in the same position makes the processes of sending posts easy to follow.

  1. Prevent errors.

Weibo offers some interface design for users to prevent error. For example, a user can like a weibo by tapping the “Like” button. However, if he or she taps the button by mistake, they can click it again to cancel the “Like”. Moreover, when a user is editing the post, if he or she clicks “cancel”, then there will jump out an interface with three choices: “Save as a draft”, “Don’t Save”, and “Cancel”. These choices give the user the chance to save the content as draft or discard it. The more important is that “Cancel” gives him or her the chance to prevent the unintended error so that he or she can keep the content. If the user still makes some mistakes after publishing the post, he or she still has the chance to get rid of mistakes; however, Weibo only provides the function of editing a published weibo to vip users. It is not suitable for this function to be a rechargeable one. Since editing is such a general function for every user, and there is no other way for a non-vip user to edit a published weibo except deleting it and publish a corrected one. Otherwise, Weibo just wants to force as many users as they can to pay money to them.

  1. Permit easy reversal of actions.

Weibo offers many units of reversibility to users in order to improve their experience. Firstly, users can post or repost a weibo, and correspondingly they can easily delete them. They can follow other users and can unfollow them by easily tap the same button. Secondly, the main pages of the application are marshalling rectangular areas of weibos, and each area has many buttons. For users browsing them with a finger scrolling down continuously, unconsciously tapping buttons is a common phenomenon. However, whatever buttons users tapped by mistake, the actions are reversible. Maybe it will jump into the comment page, but the user can quit the page although it will cause abundant operations than expected. Maybe the user will click “Like” button by mistake, but he or she can tap it again to reverse it.

 

  1. Keep users in control.

Since Weibo created its mobile application, the arrangement of “Repost”, “Comment”, “Like”, these three buttons have never changed. It provides users of familiar convention of how to use the app’s most basic functions. The interface of editing a new weibo is also almost the same. Whatever the user needs to insert pictures or not, there is always a large area of blank area to type content. People are used to such interface, so weibo does give them the strong “sense that they are in charge of the interface and that interface responds to their actions.”

  1. Reduce short-term memory load.

As mentioned before, each weibo possesses a rectangular area, but both literal contents are summarized and only nine pictures can be presented, if there are more than nine pictures with the weibo, the remaining ones will be hidden. Thus, if the user wants to see the complete content, he or she needs to tap the white background, and it bring them go to the page of complete content of the weibo and its comments. In order to avoid short-term memory load, in the summarized version of the weibo, the nine present pictures will be loaded at first. Then on the page of complete content, these pictures do not need more time to load. The same information is used on one display and then on the other display.

Violations

  1. Unfriendly arrangement of advertisements

First, on the main page where should be full of weibos posted by following people of the user, but there are too many advertisements which have already prevented the user to normally enjoy the contents. Every seven normal weibos there will appear one advertisement weibo inserting in the array. These high frequency advertisements are disturbing for users who want immersive and continuous reading experience. On the “For You” page, which is full of recommended weibos, there are still insert advertisements. Format of these ads is quite like a normal weibo, the only difference is that under the name of the posting account, there will be a small icon saying “AD”. If the user does not read carefully, at the first sight he or she will take it as a normal weibo because they look so similar. It is a crafty way to push advertisements. Probably, the user will be interested in one picture of the advertisement weibo, so he or she taps it. However, it takes the user to another page, a page for advertisement. Then he or she finds out that it is a cheat. It is hard to say that such an advertisement can be defined as content that the user is interested. It is harder to say that using such a way to push advertisement is smart or annoying. The point is that, these advertisement weibos may cause unintended and unnecessary operations in order to come back to normal browsing page. “Time is precious,” everyone wants to complete their task smoothly, without externally imposed delays, even if the task is entertainment.

Second, Weibo designs the position of banners of ads easily to be tapped by users’ finger so advertisers can achieve more clicks. The page of complete weibo content should be composed of literal contents, pictures or videos, and comments. However, now Weibo inserts a banner of ads in the gap of media content and comments. The exact position of each ads banner is depending on the length of the content of the weibo. If the banner is coincidently placed at the position that the user usually swipes the screen to exit the page, then he or she will easily tap the ads out of expectation, which is quite annoying. This design violated the principle of “preventing errors”. Moreover, it caused unprecedentedly numerous errors to tap these advertisements by mistakes.

Third, advertisements will bounce out and cover more than half of the page, which frequently leads users tap it unconsciously. On the page for watching the video, the page is separated into three parts: the upper one is the window for video watching, the banner of advertisement is in the middle, and the lower one is a part for several elements including the literal content introducing the video, comments and recommended related videos.

After a user watching the video on this page over two minutes, there will bounce out an ads from the bottom and fill in the whole page except the area of the video. If at that time the user is just browsing the comments or recommendations, the suddenly appeared advertisement will be tapped by mistake. Moreover, if he or she watches the video in full screen, when going back to the original page, the advertisement will suddenly bounce out as well. Since in the video watching area the swiping right gesture is for video speeding, so people tend not to swipe on that area. However, all the other area is filled out by the advertisement, if the user is not careful enough, the way he or she swiping out will be identified as a tap. This will lead the application go to a new website. More seriously, it sometimes allows opening another application without the need of inquiry. It is so annoying that the user has to close several things in order to go back to the original page.

  1. Confusing partision

First, the home page includes two main subpages: one is for weibos posted by following people, the other is “For You” recommended weibos for the each user. However, on another main page, under the area of hot search, there are the hot weibos also recommended by Weibo for each user. These two kinds of pages have something in common, and it is hard for a user to tell the difference between their functions. Thus, Weibo should make it more clearly for users to browse recommendations, instead of giving users two similar things in different pages.

Second, two different video watching interfaces bring novice users a lot of confusion. The first kind is what mentioned before with three parts in the whole page. The other one is much alike the Tik Tok video watching interface. The whole background is black, and a landscape video is in the middle, or a portrait video filling out the whole screen.The introduction is at the bottom of the page, and the buttons of “Like”, “Reply”, and “Repost” is on the side.

It is well known that for watching a video on a portrait device, most apps share the same pattern of gestures to pause, start, and fast forward. However, in these two concurrently existing video watching interfaces, they do not share the same pattern of gestures. It is so confusing and annoying that the user should realize and learn to use different gestures to operate two kinds of video watching interfaces, or it will mess up the enjoyable mood of surfing a social media app. This is the violation of the first golden rule of interface design: strive for consistency.

  1. Illogical placement of buttons

First, Weibo changed the placement of “add” button, which leads users to post a new weibo. The change first made old users very hard to get used to it, and make mistakes frequently. The “add” button was in the middle of the bottom menu, the banner including five buttons guiding to five main pages. The placement is quite like instagram, and instagram is still using such a design.

Now the middle button is for “Discover” page, and “add” button is moved to the top right side of the banner of the home page. Moreover, it became much smaller than before. Thus, using the new version of Weibo, users always found out that when they want to post a new weibo, they made mistakes to tap the “Discover” page. However, on the “Discover” page, there is nowhere to find the “add” button, so they have to go back to the home page. After ensured that there is no button for adding a new weibo in the lowest banner, they will find out that what they want is on the top right corner.

This change of the placement of the button that users are so accustomed for year is such a bad decision. It violated the principle of “Keeping users in control”. Even expert users in such a situation will also find that the app is almost out of their control feel disappointed and annoying.

Second, placement of buttons on the right side of the interface causes many unintended tap. One example is the “Like” button, which is arranged with “Repost”, “Reply” under the content of a weibo, and “Like” is on the most right side. Most people are used to holding their smartphones with right hands and use their right thumbs to swipe the screen. The problem is that the “Like” button is just in the area that users mostly swiping the screen, so it is so often for them to tap a “Like” out of their expectations.

Sometimes they will quickly find out that they liked a wrong weibo, but sometimes they cannot realize it in time. It may not have some serious results in most cases. However, on one’s personal home page, there not only shows weibos you posted but also weibos you liked. Thus, if the user unconsciously liked a weibo that is not suitable to be presented to his or her followers, it is embarrassing.

Reasons for violations and how to revise them

The core problem of all these unfriendly interface design is that Weibo put more emphasis on something other than users’ experience. If Weibo wants to revise all these bad designs, put user experience in the first place is the most crucial thing that it needs to realize now. Whatever the app is for profit or non-profit, the user is so important that if nobody uses the app anymore, the app have to declare the death.

First, the placement of advertisements that guide users to tap them is for their commercial interests. Moreover, the high frequency of advertisements weibos is for achieving more advertisement and making more profits. It is understandable that an app needs advertisements to make money, but it need to present the advertisements in ways that are more acceptable. Now it is taking advantage of schemes to achieve more clicks, which is a consumption of users’ enthusiasm.

There are several ways to solve this problem. Weibo provides rechargeable vip services. Now, vip users are standing these annoying ads as other normal users. Actually, if reducing and hiding all ads should be one of the vip services, at least it will improve the experience of vip users. For other users who still need to be exposed to advertisements, Weibo should change their ways to present. Considering principles of interface designs, even if there should be some advertisement, they still need to be under the control of users. The first thing it needs to revise is every possibility that may lead unintended tap of an advertisement. Second, clearly telling user that it is an advertisement is important. An advertisement pretends to be a weibo is crafty and will arouse discontentment. Then, normal users have the possibility and chance to ignore these advertisements. Moreover, if it can make effort to the make advertisements more creative and interactive, that can reduce some detestation.For example, interactive ads in WeChat Moments are quite interesting. Some of them make users feel like they are interacting with the celebrities. These advertisements do not play a video automatically, only after users’ swiping the finger as the arrows present, it will jump to another page and show the whole video.

The logic is same to the design of “Like” button that is easy to be tapped when swiping the screen. It is a guess that Weibo wants user to be more active, so it hopes that there will be some unintended tapped “Like”, which can increase to data of numbers of active users. However, users do not want so many unintended operations. If Weibo really wants users to be more active, it should make the interface more user-friendly.

It is easy to solve the problem, taking Instagram and Facebook as examples, both of them do not place “Like” on such an embarrassing position. Instagram put “Like” and “Comment” on the left side. “Like” and “Comment” of Facebook are more close to be in the middle, and “Like ” is on the left side, so it will less be tapped by mistake. Whatever the placement of the banner of “Repost”, “Reply”, and “Like”, leaving the space for finger to swipe the screen is the essence of this interface design.

Second, repeated pages of recommended weibos is to provide more channels for those publishers to achieve more exposure and reading, so they can further achieve more followers, and more exposure. However, for users who read these recommended content, they cannot feel distinct differences between “For You” page and “Hot” page. These two pages need to be classified into one page, instead of being separated. It can remove the “For you” page to “Discover” page, and parallel it with “Hot” page. It will make the function of each page more clear.

As for the two different interfaces for videos, there are two interfaces because videos are uploaded on two different platforms. In Weibo, there are areas for short videos and original videos (longer than one minute). Thus, short videos will be present in the interface that like Tic Tok, with a black background, and original videos have a more specific interface to present detailed introduction, comments and similar videos. Because their interfaces and operating gestures are so different, they caused so many confusion and failure.

According to the principle of striving for consistency, these two kinds of videos should be presented in the similar interface. Whatever it is a short video or longer video, users only want to watch and enjoy it. If they can keep in the same interface, the experience will be much better. The interface with three partition of the page is better for all kinds of videos. Now Weibo wants to establish its own original video platform. It must keep the interface that can clearly show the introduction of the video. Moreover, the gesture operation of this version of interface is the same as other video watching app. The most important thing is that Weibo should remove the advertisements that will suddenly bounce out and fill out almost the whole screen. The advertisements that will fill the window of the video after finish playing the video is more friendly because at least, users have some safe space to quit the page.

Third, the “add” button loses its place in the lower banner is because of the appearance of “Video” button. Now browsing short videos is a very trendy way for people to socialize, and Weibo wants to join the market, so it especially created a page for video watching. There is no more space for a button in the lowest banner, so it moved “add” button away. However, the problem is that the distance between the original and new placements is too far away. Even for an expert user, it cost some time to find. Now users are getting used to this new placement of these buttons. The lesson that Weibo need to learn is that it should avoid such a big change on core interface design.

All these suggestions about how to improve the Weibo’s interface design is based on the consideration of user experience. There may be better ways to solve these problems. Solutions mentioned in the paper just work as possible ways. Hoping that Weibo can try to become better in interface design and offer better experience to users.

Conclusion

For any mobile application, focusing on its interface design and making it more friendly for users is an important step to success. However,Weibo, as one of the most popular social media application in China, with a strong and solid foundation of users, seems to gradually lose its core competition. The interface design becomes more friendly to their business interests. It is necessary for Weibo to go back to the right way to persist longer in the competitive market. That is, its users’ trust and pleasant. The paper first introduces how Weibo applies interface design principles to build a good application for users to enjoy their modern and smart social life. Then it shows how currently Weibo violated these rules and principles and cause more and more dissatisfaction of users. It needs to take them as an alarm. Now users are bearing these confusing and annoying designs, it doesn’t means they will bear them forever. Thus, it is significant for Weibo to win back users’ heart. They need to revise most of these bad designs. The last part of the paper is about some suggestions of how to solve and better them. These suggestions may not be the best answer, but it provide some thoughts that may bring better experience to users. Designing a perfect interface is impossible, but every application should try best and make progress with the changing trends of the time and generations.

 

References:

Ben Shneiderman, Catherine Plaisant, et al. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 4th ed. Boston: Pearson, 2005.

Ben Shneiderman, Catherine Plaisant, et al. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 6th ed. Boston: Pearson, 2016.

William Lidwell, Kritina Holden, and Jill Butler. Universal Principles of Design. Beverly, MA: Rockport Publishers, 2010.

 

Dating and Gaming Application Combinatorial Design: A Logical Next Step

Victoria Gomes-Boronat 

Abstract 

Inspired by empirical research, anecdotal evidence, and the wake of a worldwide pandemic, this paper intends to explore the rationale and combinatorial design behind an online, gaming/dating application. Now, more than ever, people are craving human connections, and mounting evidence shows that online gameplay not only creates bonds but fortifies them as well. Although the dating application market is quite saturated with options, there has yet to be an introduction of a gaming/dating application. By examining modular design principles, this paper attempts to act as a blueprint for an application that has the capability to shake up the market. 

Introduction

Cognitive Artifacts: Personal Ads

Anecdotal evidence shows that many people find comfort in meeting significant others through gaming because it sidesteps the superficiality that can come with the beginning stages of dating (Landau 2020). Some couples note that dating someone you met in an online game used to be considered very taboo, but now, it has become much more normalized because of the prevalence of social media in our society and the surge of dating applications in the last decade.

Growing up, I remember constantly being warned by my teachers about the dangers of meeting strangers through the internet, however, a survey/study done by Stanford University shows that between 1995 and 2017 the number of heterosexuals who met their partner in an online environment rose tremendously from 2 percent to 39 percent (Shashkevich, 2019). Michael Rosenfeld, the head researcher in the study, explained that there were two technological innovations in the past two and a half decades that contributed to this sharp rise: the introduction of the graphical World Wide Web around 1995 and the spectacular rise of the smartphone in the 2010s,

“The rise of the smartphone took internet dating off the desktop and put it in everyone’s pocket, all the time,” (Rosenfeld as cited by Shashkevich, 2019).

Rosenfeld also inadvertently explains how online dating applications we see today stem from cognitive artifacts. Norman (1991) defines a cognitive artifact as “an artificial device designed to maintain, display, or operate upon information in order to serve a representational function” (p 17). Rosenfeld says that online dating originated from hundreds of years of personal ads in newspapers (many times looking for love and companionship) that then led to old text-based bulletin board systems in the 1980s. It was then greatly improved and propagated by the introduction of the graphical web and its affordances, i.e. pictures and search functionality. This may be why modern dating applications, such as Tinder or Bumble, resemble personal ads with resume-like profiles and bios that you are able to swipe/flip through. Personal ads functioned as a way to find romantic connections, and the technology used in dating applications, i.e. GPS tracking/geotargeting, data algorithms that show users their best matches based on the users’ preferences and parameters, graphical user interfaces that are capable of showing high-resolution photos, etc. expands and enhances the “cognitive capabilities of the total system of human, task, and artifact,” (Norman, 1991).

This phenomenon can also be observed in online chat rooms and bulletin boards. The idea for the dating/gaming application that will be discussed later in the paper, stemmed from an experience I had while playing the hugely popular, online mobile/desktop game, Among Us. While playing in the public rooms, I observed many people using the group chat as a way to make connections. Many would type in “A/S/L?” in order to find out the age, sex, and location of other players. If they connected with other players of their desired sex, location, and age during gameplay, they would then use the chat to promote their Instagram profiles in the hopes that the other player would connect with them, and they could continue the friendship outside of the game. I then started to contemplate my own experiences with building relationships and realized that the strongest friendships/romantic connections I had created in the past were all due to sports, video games, and online games- all activities that included some level of competition and/or collaboration/teamwork. Empirical evidence shows that because of the aforementioned factors, games can actually give rise to and fortify friendships/romantic relationships.

Empirical Research 

Research has shown that games help build trust and therefore can be used to fortify various types of relationships, even work relationships. One study that investigated the effectiveness of commercial digital games in developing trust in virtual teams compared to social icebreakers found that a digital game with trust-building aspects is far more effective at building trust than a social icebreaker. This is because games with clear shared goals and high interdependence facilitate social closeness by requiring players to interact, communicate, and collaborate (Tan & Cox, 2019) This may be why the mafia-esque game, Among Us, became so hugely popular this past year. By forcing crewmates to work together and strategize to find the imposters, the game was able to create feelings of camaraderie between players. Although the game also introduces competition by randomly assigning imposters, studies show that even a competitive game that is high in interdependence (defined by the degree to which group members must rely on each other to complete tasks i.e. tasks that crewmates must all do to save each other and win the game) can still help two players form a connection.

According to prior research, the pull of a game is many times correlated to its out of game effects. Researchers argue that games have such a strong pull because of their ability to generate, “three key feelings of well-being: autonomy (sense of willingness), competence (challenge and feeling of effectiveness), and relatedness (feeling of connection with other people),” (Ryan et al., 2006). According to the Entertainment Software Association, 63% of adult gamers play with other people as a social activity. On average, they spent 4.8 hours a week playing with others online and 3.5 hours a week playing with others in-person (2019). Before online gaming, gamers were forced to physically be together in-person to socialize while gaming. However, because of innovations in game design and platforms and the addition of online multi-player functionalities, gamers have increased opportunities to interact and socialize while playing, especially during a worldwide pandemic.

Research and infographic done by the Entertainment Software Association.

Market Research 

According to the Washington Post, giants of the video game industry, Microsoft, Nintendo, Twitch, and Activision have thrived financially during the pandemic. In April, Microsoft’s Game Pass service (basically a Netflix-for-gaming) cracked 10 million subscribers, “among those subscribers, Microsoft reported a 130-percent increase in multiplayer engagement across March and April,” (Smith, 2020). According to the research by WePC.com, the number of gamers who claim they are playing video games more due to the pandemic increased 46% in the United States from the months of March to June. Data shows that gaming is the most lucrative entertainment industry. It was worth $145.7b in 2019, compared to $42.5b in Box Office earnings and $20.2b for Music, and with the shutdowns of movie theaters/sets and musical festivals/concerts due to the pandemic, the difference is sure to be even more astounding in 2020. Most recent numbers show that the Video Gaming Industry is now estimated to be worth $159.3 Billion in 2020, a 9.3% increase from 2019 (2020).

Projected Video Game Market Growth- credit to WePC

Data also shows that mobile gaming is quickly becoming a front runner in the gaming industry. Industry revenue for mobile gaming is expected to hit $76.7 Billion by the end of 2020 and 2.2 million mobile gamers worldwide. It’s become so popular and prevalent in our every day lives that 72.3% of mobile users in the US also engage in mobile gaming (WePC, 2020), and clearly, game developers are noticing. Mobile games made up 39% of the games developed in the past year. 51% of Total Global Gaming revenue comes from mobile games alone. Currently, there are 2.2 billion mobile gamers worldwide, and 203 million of them are gaming in the US (Ibid.). That’s 203 million people in the US who could find their ideal, in-real-life (IRL) player 2s (partners) using a mobile gaming/dating application 🤑.

credit to WePC (2020)

Dating applications have also seen sharp increases in usage/engagement due to the pandemic. According to Business Insider, “the number of smartphone dating app users in the US will reach 26.6 million this year. That’s an 18.4% increase from 2019, ” (Kats, 2020).

Dating application companies such as Match (owner of dating platforms such as Match.com and Tinder, to name a few) have also found that the way users engage with the application is changing. For example, users’ behaviors have shifted- they are now looking for more serious relationships rather than casual hookups. Match CEO Hesam Hosseini cites two main consequences of the pandemic as the reasons for this shift: the discussion of more serious topics early on and the use of virtual dating to adhere to social distancing prior to deciding on meeting in person.

Match’s latest  Singles in America survey confirms Hosseini’s assessment, “In the scientific study of over 5,000 people, Match found that 58 percent of single app daters shifted toward more intentional dating due to the pandemic. Sixty-three percent said they’re spending more time getting to know potential partners, with almost 70 percent saying they’re being more honest in their interactions,” (Iovine, 2020). As a consequence of the worldwide pandemic, many people are looking for a partner/teammate that can help them get through these challenging times, similar to how gamers look for teammates who can help them through the challenging levels of a video game.

“Recent cataclysmic events have led singles to want more from dating: a desire for a relationship over casual dating; more meaningful conversations, and more honesty and transparency during a date,” Dr. Helen Fisher, biological anthropologist and Chief Scientific Advisor to Match, said in the Singles in America press release, (Iovine 2020).

With the large increase in mobile gaming and online dating application usage, it’s almost surprising that a gamer dating application has not hit the market yet. Therefore, for the rest of the paper, I will be discussing the combinatorial design that would have to happen in order to make that possible.

Application Design Principles

Modularity 

Behind the graphical user interface (GUI) that you interact with when using applications, there are various unseen moving parts that work together in order to make seeing and interacting with that GUI possible. Various applications employ modular combinatorial designs, meaning that the architecture of the application is made up of various modules that have “interdependence within and interdependence across modules,” (Baldwin, 2000). This means that within each module are various interconnected parts, however, they are independent of other modules, meaning that a designer can make changes and updates to one module without affecting any of the others.

There are various modules that go into making mobile gaming and dating applications work. We will look at the various modules that would need to come together in a combinatorial design in order to create a dating application that truly has it all for the modern gamer looking for love. To do this, we are going to start by listing the fundamental modules and functionalities that are necessary for gaming and dating applications. For future reference, we will name my combinatorial app design LUSIO (Latin for ‘act of playing). LUSIO will contain many of the same modules as a dating application, however, it will also incorporate those of gaming applications such as Among Us and Game Pigeon.

According to Murray, “[t]he digital designer has two responsibilities: to create the artifact that best serves the needs of the people who will interact with it, and to advance the digital medium as a whole” (2011, p. 87). There is clearly a demand for dating applications and gaming applications, therefore, combining the two would hopefully advance the digital medium by providing the people with an application that meets their needs all in one place.

Because of the various layers of abstraction that hide the complexities of the operations performed by the application, LUSIO would be fundamentally procedural. To truly understand the complexity of the application, we must study the various modules it is comprised of. Developing a design that is made up of independent modules makes it easier to add or remove parts of the system without affecting the whole system. This modular design maximizes the procedural capabilities of technologies by dividing effort and coordinating tasks and decisions (Baldwin & Clark, 2000).

Source: RubyGarage

LUSIO Modules 

The LUSIO application will have a Cloud-based microservices architecture, “Microservices, also known as microservice architecture, is a specific method of designing software systems that structures an application as a collection of loosely coupled services,” (Watts & Shiff, 2018) The application is broken down into various components or “microservices” located in the cloud that are entirely independent of each other, allowing each service to run its own unique process and communicate autonomously without having to rely on the other services or even architecture of the application as a whole. This architecture allows for almost unlimited data storage and allows the designers to change microservices within the application, i.e. online gameplay updates, matching algorithm updates, etc. without affecting any of the other microservices/modules. Listed below are the included modules/microservices:

  • Copyrights and Trademarks: Copyrights and trademarks need to be procured in order to protect the ideas and brand of the application. Currently, the brand name LUSIO, with regards to electronics and applications, has not been Copyrighted or Trademarked.
  • Back-end Programming Languages: The application will be built from a stack of languages that include: Python for general application programming, JavaScript for HTML/web programming, Node.js for developing server-side web applications, MongoDB for harnessing and utilizing data, ReactiveX for composing asynchronous and event-based programs, and Perl for text-processing, (CometChat2018).
  • Logging in/Registration: In order to access the application functionalities, users must create a profile for the application via a phone number or email. Unlike many other dating/gaming websites, it will not use other social media websites such as Facebook for log in purposes.
  • Profiles: Creators will create a public and private profile. The public profile will be an avatar that the user creates in order to keep anonymity within the public, online gaming module of the application. The private profile will look like a typical dating profile and contain similar information such as age, location, bio, preferences, education, work, and mutual interests. The user may elect to use either their private or public profile in the typical swipe feature of profile matches. However, once a match has been made, the private profile information will be available to matches. The public profile avatar will be customizable and added customizations such as accessories and outfits can be purchased inside the application.
  • Location and Geotargeting Algorithms: With the help of GPS, Google maps, and analytics, organizing profiles by location has become commonplace in modern app development. Location targeting or mapping, specifically, is one of the most critical features for an online dating application. Mapping allows the production of important features like geocoding, geohashing, and proximity awareness, (CometChat, 2018). With regards to Lucio, geolocation is especially necessary to show users others in their area and create public game rooms that are dependent on the location of the players- think of an online Among Us game room but constructed with other people of your age and area preference.
  • Discovery Settings: Users may change their settings in order to find matches and game rooms that are set to their preferences. Advanced algorithms will need to be used in order to do so. The algorithms will need to store the following data in order to fine-tune and update itself to fit each user (According to CometChat):
    • How many profiles did a user discover in that session,
    • How many profiles did a user respond to,
    • The average amount of time spent by the user on a profile to make a decision,
    • The number of times a user responded negatively or positively,
    • The location where a user found the most number of matches or where he/she found the least number of matches,
    • How many profiles did a user visit per day,
    • How many matches does a user get on average and how many do they respond to,
    • How many players the users interacted with during gameplay,
    • What kind of players users exchanged player cards with post-game-play.

“Saving all these preferences helps the app understand user behavior which in turn enhances the user experience. Such algorithms harness the ability of machine learning techniques to learn from successful or failed matches, thus adjusting the future suggestions accordingly,” (CometChat, 2018).

  • Data Protection and Security: Strong Authentication and authorization is a must with an application that houses so much data. The application will enforce multi-factor authentication, rather than just relying on usernames and passwords alone. Users must also submit an application to verify their profiles and identities. This is essential in making sure that users don’t create fake identities or use another person’s identity for their private dating profiles. Since the app stores personal data like name, number, email, pictures, and also user location, encryption has to be done in information databases (CometChat, 2018).
  • Audio/Visual: The application will use the speakers of the mobile device in order to give users feedback on their actions. They will get notifications and accompanying sounds when getting a match or a message. It will also access the microphone and camera modules of the mobile device in order to allow users to call and video chat with each other through the application.
  • Matchmaking and Profile Access: Once two people have matched, whether it be through the feed of profiles or the online game room, their private profiles will be made available to each other. Once that has happened, they now have the functionality to message each other and play asynchronous, turn-based games in the chat.
  • Graphical User Interface that is supported by IOS and Android devices: The Graphical user interface must draw upon the available modules and functionalities afforded by IOS and Android devices, i.e. picture resolution capabilities, capacitive touch screens, all of the screen and software layers that are designed to monitor changes activated by touch and gesture motions. The screens must also be pixel-based in order to become a, “two-way medium for representation and directing human agency into a computing system while it is in the process of processing symbolic structures,” (Irvine, 2019).
    • Gestures/Interactivity: The application will register gestures such as swiping and tapping so that users may interact with and get feedback from the application/game. The swiping gesture will be used for the matching section and for gaming.
  • Gaming: The chat will contain only asynchronous, turn-based games but the online, streaming game portion of the application will house hundreds of games that can be subscribed to. The application team will either hire video game creators to create an array of web-based games that can be housed and used in the application or collaborate with cloud game-streaming services such as Microsoft’s xCloud. Algorithms within the app will place players in rooms/teams in the online game that align with the users’ preferences.
    • 5G Network Connectivity: Fast and easy game streaming is one of the affordances that the current 5G network infrastructure gives game developers and users. Not only does it allow for faster streaming and download speeds, it also affords higher resolution graphics and even larger multiplayer experiences, (Leong, 2018).
    • Spine Animation– Spine is a 2D skeletal animation software used for video game development and animation.
    • Constraints: Apple’s App Store does not allow multiple streaming games per application (Apple Store Review Guidelines, 2020). However, redirecting to web browsers is how companies such as Microsoft bypass the artificial constraints that apple imposes on developers.
      • However, a simple game such as Among Us provides a strong technical foundation for the exchange of human meaning, therefore possibilities are endless through the use of human logic and strategy. Creating a game that follows a similar human-centered interface design could be a first step to creating the online game module. It would only require updates now and then in order to stay relevant, user’s logic, meaning-making, and varying group dynamics will do most of the work in keeping the game interesting.
      • In order to bypass the constraints set by Apple in the development of the application, the application team can also create collaborations with already established games, such as Among Us. users could sign in to these gaming applications with their LUSIO profile in the same way that you can sign in to many applications with social media accounts such as Facebook.  In using the LUSIO gaming function, once you’ve selected the game you want to play in, you would be redirected to that game either through the application for the game or the web. However, through using the LUSIO account profile, the algorithm will still sort you into rooms or tournaments that have players of your location and age preferences.
      • Other constraints are the RAM and processing capabilities of mobile devices used. The RAM and processing power needed to run the application and the games within should not exceed those of the “weakest” devices. Therefore, native games should be simple and require little memory/processing power, and any of the larger more complex games should be housed outside of the app to be streamed on the web.
  • Payment: Because it is an application that will require a large team and plenty of collaborations due to all of the working parts and modules, LUSIO will require payment from users. The basic version of the application will be free, however, to access the more advanced functionalities, such as the library of games, there will have to be some kind of payment system in place. The download of the application will be free, and the basic matching/chat system will be free. However, users will have to pay a monthly subscription in order to have access to a majority of the games that are capable of being played on the app and other useful functions such as: going back to a match you accidentally swiped left on and seeing users who have already swiped right to your profile. Extra customizations to their public avatars, i.e. outfits, accessories, pets, etc. can be purchased using EXP (expression points). expression points can be purchased in-app. The EXP can then be used to purchase the avatar customizations. The application will employ subscription payments and in-app purchases in order to avoid using advertisements and disrupting the user experience.
    • In order to process the in-app purchases, the application will integrate Apple and Google’s wallet for the app (CometChat, 2018).

The design of the application is participatory because it interacts with users in a meaningful way. The various modules contained within the application allow users to interact with it in different ways because of its procedural affordances. By utilizing the affordances of the capacitive touch screen that is used by most, if not all, touch screen enabled mobile devices, the application allows users to swipe through matches or swipe a ball in a game of ping pong, creating meaningful interactions between the user and the application. The design of the application is spatial because while the design of the application is fixed with regards to colors and fonts, etc. the public profile/player card that users can create is highly customizable. Users are able to create a space within the application that is unique to them. The application is also encyclopedic in nature because it stores information on users’ preferences, gameplay history, matching success, and more in order to inform and fine-tune the algorithm.

Interface Design

Example of the LUSIO Application

Schneider identified 8 Golden Rules of Interface Design, and I believe that the application will be successful because it will abide by most, if not all, of the rules (2016, p. 95-97).

  1. Strive for Consistency: The tasks, roles, and markers of the main online game will aim to stay consistent throughout all gameplay. The players can be confident in the consistency of the interface and will therefore able to glean meaning through how other players interact with it. The dating portion of the application will also be consistent with the experience that users have on other dating applications. There will be clean designs and icons that indicate the function, i.e. the heart indicates other users who have liked a user’s profile and the world indicates the online, free-world game. 
  2. Seek Universal Usability: The application facilitates the gameplay for all adults above the age of 18, expertise levels, and international variations. It uses visuals and task demonstrations in order to bridge cultural/language differences. It utilizes language censorship in the chat function in order to protect users/players. Once it has been established in North America, language translation modules will be introduced into the application design in order to expand to other regions and markets. 
  3. Offer Informative Feedback: When a task isn’t done correctly in a game it will notify the user. When users interact with tasks in a game, they will receive feedback. If a user is swiping in the match section of the dating application, they will receive feedback in the way of a match notification or the introduction of a new card to swipe through. 
  4. Design Dialogs to Yield Closure: The app will notify users when a message has been sent and been read. In gameplay, it will also notify users when a task has been completed. 
  5. Prevent Errors: The creators of the app will continually conduct updates to address any issues or errors. The application will utilize real-time error tracking services such as rollbar to detect errors in the application. It will also use Crashlytics, a crash-reporting solution for Android and iOS.
  6. Permit Easy Reversal of Action: When typing in a chat you are able to delete and change what you want to say before sending, you are also able to go back when you swiped left to someone you intended to swipe right to (functionality afforded by the paid subscription). 
  7. Keep Users in Control: The users are in control of whether or not other users see their private profiles. They also have control over the types of users they meet through online gameplay. Users can also customize their avatars/public profiles. 
  8. Reduce Short-term Memory Load: Users/players are given a list of all of the players/users they have matched with and can organize the list by attributes, i.e. age, location, sex etc. Users are also given short instructions on how to use the various functionalities of the app when they’ve first registered. Each game will have instructions that users can access to learn the rules of the game. 

Conclusion 

Because of the modularity of many existing technologies, it is completely feasible to bundle them together and create a new combinatorial design for a gaming/dating application. Mobile online gaming is now especially possible with the introduction and implementation of 5G. 5G’s technological advancements have given rise to the next wave of mobile innovation, especially in mobile gaming. The exponentially faster download and upload speeds allow mobile games to be downloaded and streamed instantly, (Leong, 2018). Even extremely large games that require heavy processing power such as Genshin Impact are able to be easily downloaded and played on mobile devices. As discussed, there’s clearly a demand for both dating and mobile gaming applications, and now, we have the technical capabilities to provide the functionalities of both in one application design.

References

2019 Essential Facts About the Computer and Video Game Industry. (2019, May 2). Entertainment Software Association. https://www.theesa.comesa-research/2019-essential-facts-about-the-computer-and-video-game-industry/

2020 Video Game Industry Statistics, Trends & Data. (2020, October 13). WePC | Let’s Build Your Dream Gaming PC. https://www.wepc.com/news/video-game-statistics/

Anastasia. D (2019, February 26) How Much Does It Cost to Build a Dating App Like Tinder? Retrieved December 9, 2020, from https://rubygarage.org/blog/how-to-develop-an-app-like-tinder

Albury, K., Burgess, J., Light, B., Race, K., & Wilken, R. (2017). Data cultures of mobile dating and hook-up apps: Emerging issues for critical social science research. Big Data & Society, 4(2), 2053951717720950. https://doi.org/10.1177/2053951717720950

Android Developers. (2018, May 8). The future of apps on Android and Google Play: Modular, instant, and dynamic (Google I/O ’18). https://www.youtube.com/watch?v=0raqVydJmNE

Android Developers. (2019, May 7). Build a modular Android app architecture (Google I/O’19). https://www.youtube.com/watch?v=PZBg5DIzNww

App Store Review Guidelines – Apple Developer. (2020). Retrieved December 9, 2020, from https://developer.apple.com/app-store/review/guidelines/

Baldwin, C. Y., & Clark, K. B. (2000). Design rules. MIT Press.

Building Your Own Dating App: Everything You Need To Know. (2018, August 2). Comet Chat. https://www.cometchat.com/blog/building-your-own-dating-app

Comunello, F., Parisi, L., & Ieracitano, F. (2020). Negotiating gender scripts in mobile dating apps: between affordances, usage norms and practices. Information, Communication & Society, 0(0), 1–17. https://doi.org/10.1080/1369118X.2020.1787485

de Macedo, D. V., & Formico Rodrigues, M. A. (2011). Experiences with rapid mobile game development using unity engine. Computers in Entertainment, 9(3), 14:1–14:12. https://doi.org/10.1145/2027456.2027460

Depping, A. E., & Mandryk, R. L. (2017). Cooperation and Interdependence: How Multiplayer Games Increase Social Closeness. Proceedings of the Annual Symposium on Computer-Human Interaction in Play, 449–461. https://doi.org/10.1145/3116595.3116639

Depping, A. E., Mandryk, R. L., Johanson, C., Bowey, J. T., & Thomson, S. C. (2016). Trust Me: Social Games are Better than Social Icebreakers at Building Trust. Proceedings of the 2016 Annual Symposium on Computer-Human Interaction in Play, 116–129. https://doi.org/10.1145/2967934.2968097

Duguay, S. (2017). Dressing up Tinderella: interrogating authenticity claims on the mobile dating app Tinder. Information, Communication & Society, 20(3), 351–367. https://doi.org/10.1080/1369118X.2016.1168471

Intel Software. (2019, February 11). What is “Modularity” in Game Development? | IDZ Weekly | Intel Software. https://www.youtube.com/watch?v=bDPJ_RkTs5o

Iovine, A. (2020, November 11). Dating app usage is changing for the better as the pandemic rages on. Mashable. Retrieved December 9, 2020, from https://mashable.com/article/cuffing-season-2020-dating-app-increases-hinge-match/

Irvine, M. (2019). From cognitive interfaces to interaction design: Displays to touch screens. Unpublished Manuscript.

Kats, R. (2020, September 14). Love in the time of the coronavirus: how dating is becoming more virtual amid the pandemic. Business Insider. Retrieved December 9, 2020, from https://www.businessinsider.com/dating-apps-growing-becoming-more-virtual-amid-pandemic-2020-9

Leong, L. (2018, December 4). The Future of Mobile Gaming: How 5G changes the industry (part 2) | AppLovin. AppLovin Mobile Games Blog. https://blog.applovin.com/future-of-mobile-games-part2/

Murray, J. H. (2011). Inventing the Medium: Principles of Interaction Design as a Cultural Practice. MIT Press.

Norman, D.A. (1991). Cognitive Artifacts. In J.M. Carroll (Ed.), Designing Interaction: Psychology at the Human-Computer Interface. Cambridge University Press.

Online Dating Industry: The Business of Love. (n.d.). Toptal Finance Blog. Retrieved December 8, 2020, from https://www.toptal.com/finance/business-model-consultants/online-dating-industry

Overview of Play Feature Delivery. (n.d.). Android Developers. Retrieved December 8, 2020, from https://developer.android.com/guide/app-bundle/play-feature-delivery

Patel, P., Licorish, S., Savarimuthu, B. T. R., & MacDonell, S. (2016). STUDYING EXPECTATION VIOLATIONS IN SOCIO-TECHNICAL SYSTEMS: A CASE STUDY OF THE MOBILE APP COMMUNITY. Research Papers. https://aisel.aisnet.org/ecis2016_rp/14

Ryan, R., Rigby, S., & Przybylski, A. (2006). The motivational pull of video games: A self determination theory approach. Motivation and Emotion, 30, pp.347–363.

Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Dikopoulos, N. (2016). Designing the user interface: Strategies for effective human-computer interaction (6th ed). Pearson.

Shashkevich, A. (2019, August 21). Online dating is the most popular way couples meet. Stanford News. https://news.stanford.edu/2019/08/21/online-dating-popular-way-u-s-couples-meet/

Smith, N. (2020). The giants of the video game industry have thrived in the pandemic. Can the success continue? Washington Post. Retrieved December 9, 2020, from https://www.washingtonpost.com/video-games/2020/05/12/video-game-industry-coronavirus/
Tan, E., & Cox, A. L. (2019). Trusted Teammates: Commercial Digital Games Can Be Effective Trust-Building Tools. Extended Abstracts of the Annual Symposium on Computer-Human Interaction in Play Companion Extended Abstracts, 705–713. https://doi.org/10.1145/3341215.3356296

Tanner, M., & Tabo, P. Q. (2018). Ladies First: The Influence of Mobile Dating Applications on the Psychological Empowerment of Female Users. Informing Science: The International Journal of an Emerging Transdiscipline, 21, 289–317. https://www.informingscience.org/Publications/4137?Source=%2FJournals%2FInformingSciJ%2FArticles%3FVolume%3D0-0

Technologies, U. (n.d.). Mobile game development software | Mobile games & apps monetization strategies | Unity. Retrieved December 8, 2020, from https://unity.com/solutions/mobile

The Future of Mobile Gaming: How 5G changes the industry (part 2) | AppLovin. (2018, December 4). AppLovin Mobile Games Blog. https://blog.applovin.com/future-of-mobile-games-part2/

Landau, E. (2020). They Found Community, and Then Love, in Online Games. Wired. Retrieved December 8, 2020, from https://www.wired.com/story/love-community-mmorpg-online-gaming/

Wang, H., & Sun, C. (n.d.). Game Reward Systems: Gaming Experiences and Social Meanings.

Watts, S., & Shiff, L. (2018, October 9). Monolithic vs Microservices Architecture (MSA) – BMC Blogs [Blog]. BMC. https://www.bmc.com/blogs/microservices-architecture/

What are Socio-Technical Systems? (n.d.). The Interaction Design Foundation. Retrieved November 3, 2020, from https://www.interaction-design.org/literature/topics/socio-technical-systems

Wohn, D. Y., Lampe, C., Wash, R., Ellison, N., & Vitak, J. (2011). The “S” in Social Network Games: Initiating, Maintaining, and Enhancing Relationships. 2011 44th Hawaii International Conference on System Sciences, 1–10. https://doi.org/10.1109/HICSS.2011.400

Wohn, D. Yvette, Lee, Y., Sung, J., & Bjornrud, T. (2010). Building common ground and reciprocity through social network games. CHI ’10 Extended Abstracts on Human Factors in Computing Systems, 4423–4428. https://doi.org/10.1145/1753846.1754164

Yee, N. (2006). The Psychology of Massively Multi-User Online Role-Playing Games: Motivations, Emotional Investment, Relationships and Problematic Usage. In R. Schroeder & A.-S. Axelsson (Eds.), Avatars at Work and Play: Collaboration and Interaction in Shared Virtual Environments (pp. 187–207). Springer Netherlands. https://doi.org/10.1007/1-4020-3898-4_9

Design Architecture of Spotify for Social Capabilities

Abstract

“Dear 3,749 people who streamed ‘It’s the End of the World as We Know It’ the day of the Brexit vote, hang in there.” In 2016, flexing its ‘user data’ muscles, Spotify demonstrated in its ads that it now has the capacity to extract information from social affairs and use it to peer into personal moments of users and how these affairs influence their music choices.

My aim in this paper is to unearth the layers of design architecture involved for enabling the social capabilities a user has on Spotify. Along the way we will see how it relies on older concepts and systems that were here long before Spotify itself. We will discover that the design at the bottom level of its architecture (its backend, the system, the cloud services, streaming, data storage, etc) is the same kind as the one used by many social media companies. Spotify steers itself in a non-social media direction under the influence of the socio-cultural landscape, to maintain itself as a solely music & podcast streaming platform, using design at the top level of its architecture (affordances, constraints, conventions, icons, features, accessibility).

 

Introduction

Fig: Spotify Ad

As one of the top music and podcast streaming services available, their user base has grown substantially over the last few years owing to the increase in available music as well as increase in services. As the user base grew so did a sense of community and a need for social bonding over music. This involves features to share on social networking platforms, features to see what your friends are listening to, collaborating on creating playlists, following each other’s playlists, etc. The data infrastructure underneath the audio and streaming infrastructure is becoming more relevant each and every day as user data grows and ML techniques are applied.

This year they are making it even more personal with their “2020 wrapped” providing more granular details on both music and podcast listening habits: how many total minutes users listened to podcasts, their top podcast with its listen-count, which songs were on repeat, which song you discovered before they went hit and more.

Fig: Spotify Unwrapped 2020

One of the benefits of using Spotify has always been its mobility. Smartphones made it easy to keep music portable by connecting the user to a central database of music collection available via streaming services on the internet. This means the user listens to music in a number of locations and during a wide range of activities. So do their friends on Spotify. Currently Spotify offers accessibility to adding friends via facebook, following a friend’s playlists, and being notified of a friend’s listening activity on the desktop app.

How does all this data get tied up together to provide a highly structured user dataset, intelligible insights and accurate recommendations? What kind of design architecture allows sensible data to emerge from this constant in-flux and out-flux of data arriving from multiple separate interactions of users? What do the design decisions tell us about how Spotify wishes to operate?

 

Data Infrastructure

Spotify shut down the last of its US data centers in 2016 freeing itself of on-premise infrastructure and migrating onto Google’s Cloud Computing Platform . The data centers existed to “send out music files and fetch back user data” (Eriksson et al,2019, 44). Now streaming and storage of their user data and music files is in Google’s Cloud Storage. The cloud computing services provide the advantage of Google tools like BigQuery cloud data warehouse, Pub/Sub for messaging and DataFlow for batch and streaming processing. In the fourth quarter of 2019, Spotify reported 271 million monthly users and 124 million Premium subscribers, and all this data is stored in Google’s Cloud Platform (Spotify Case Study (n.d.), Google Cloud Customer).

Clicking the play button, tapping on a playlist, using any affordance provided by Spotify results in an “event”. Whenever a user performs an action in the Spotify client—such as listening to a song or searching for an artist— a small piece of information, called an event, is sent to their servers (Maravić, 2016).  Spotify calls the process “Event delivery”, which makes sure that all events get transported safely from users to a central processing system, managed on Google Cloud (Maravić, 2016). Cloud Pub/Sub is the transport mechanism for all the events.

A pub/sub is a message-oriented middleware system where publishers send messages via a portal that categorizes published messages into classes on one end. The subscribers on the other end choose which messages to receive (What Is Pub/Sub? | Cloud Pub/Sub Documentation). Both do this without each other’s knowledge. Here, messages can range from commands to payment information to subscriptions to premium accounts.

Fig: (What Is Pub/Sub? | Cloud Pub/Sub Documentation)

The pub/sub system as part of the internet “uses the bundles of data packed in smaller units” (Irvine, (n.d.), pp. 6). The packet itself has no information but much like carrier waves in radio signals, it carries data that can be called the “payload”. This packet has other information in bits that determines its path in the network and the payload has the message stored in it which is received, and converted for the GUI on the other end (White, 258-259).

 

Connecting and Accessing Databases

User details, such as username, country, and email, are stored in a user database. Every time a user logs in, that database is queried (Vesterlund, 2015). Spotify uses Apache’s Cassandra and Hadoop to store user profile attributes and metadata about entities like playlists, artists, etc. (Mishra & Brown, 2015). These software libraries (by Apache) are frameworks that allow for the distributed processing of large data sets across clusters of computers using simple programming models.  Similarly, it uses these software libraries for the following (Mishra & Brown, 2015):

  1. Log collection like “completion of a song or delivery of an ad impression,” – Kafka
  2. Real-time event processing like “clicks” “search” – Storm
  3. To remove duplicate events, clean up data to “generate metadata like genre, tempo,” – Crunch
  4. Store user profile attributes and metadata like playlists, artists, etc. – Hadoop and Cassandra

It’s the Storm pipelines that fetch the metadata back, group it per user and determine user level attributes to represent a user’s profile which is then stored in a Cassandra Cluster. Spotify calls this the User Profile Store (UPS).

Fig: (Mishra & Brown, 2015)

When a user is listening in real-time, Apache Storm is at work. A large volume of data moves across all the libraries, while being worked on by Spotify’s recommender algorithm, to generate “Recently Played” songs, curated playlists like “Discover Weekly”, “Shows to try”, “Recommended Radio”, etc.

The deployment of these databases along with cloud-based pub/sub system collectively called Event Delivery system are used to generate and move critical data. These include EndSong Event (an event emitted when a Spotify user is done listening to a track), which is used to pay royalties to labels and artists, calculate Daily Active Users (DAU), Monthly Active Users (MAU); and the UserCreate Event (an event indicating a new Spotify user account was created) (Janota & Stephenson, 2019).

 

Connecting Users to Each Other

Users can integrate their Spotify profiles with their Facebook account, and, be able to find all their Facebook friends who are also on Spotify i.e. within the pub/sub system we mentioned before, these friends are referred to as “topics” that can be “subscribed” (followed). You can subscribe even without integrating your Facebook account by searching for one another, i.e. querying a database (Setty et. al., 2013, pp. 2). Similarly, publicly available user created playlists can be searched for. Users could also mark these as “collaborative” allowing others to edit, giving them writing permissions.

In the desktop version, we see a pane on the right side of the screen called “Friend Activity” that lists the songs they have been listening to.

Fig: (Johnson, 2019)

This means that real-time user metadata is being shared across the platform using the pub/sub cloud systems through Apache Storm and Casandra that is then presented on the Graphical User Interface of computers. It might be difficult to understand why Spotify has not yet integrated this feature into its smartphone app. One possible reason why they have not launched this feature on smartphones might be because UX researchers and engineers are still in the testing phases to figure out the best affordances and user flows to optimise smartphone specific user experience with the “Friend Activity” feature while still maintaining Spotify as a primarily music and podcast streaming platform as opposed to a social media platform.

Fig: Architecture Supporting Social Interaction (Setty et. al., 2013, pp. 3)

The ‘external database’ mentioned in the figure is now part of Google’s Cloud Storage. All of Spotify’s backend services are operated via Google Cloud Services still using the Pub/Sub system.

In terms of database management and access, Spotify uses similar pub/sub systems as Facebook, Twitter and Google+ (Kermarrec and P. Triantafillou, 2013, pp. 16: 5). Yet Spotify is not a social media platform. Which means that it is only on the top level of the design architecture that it fashions itself as a cloud based music and podcast streaming service. At the bottom levels of the design architecture as well as the kind of user data it has, the way it manages it and the way it leverages the data, is it remarkably similar to how many social media companies design their systems.

 

Privacy

Spotify uses data to calculate royalties, run A/B tests, process payments, serve playlists and suggest new tracks to users. (Leenders, 2018) This data is protected by encrypting it with a single keychain. “Each user has their own set of keys that should be used for the encryption” which reduces the impact of any possible data leak since even hackers need decryption keys. Additionally it allows Spotify to control the lifecycle of data for individual users centrally.

Padlock is their key management service that manages keychains for all Spotify users. “This means, for example, every time a user looks at a playlist (even their own), the playlist service makes a call to Padlock to get the keychain of the playlist owner and then decrypts the playlist. Each service that calls Padlock gets its own set of keys” (Leenders, 2018). The keys have other applications as well. For example when a user opts out of targeted advertisement, access to this user’s personal data by the targeted advertisement can be blocked by removing the corresponding key so the advertiser can no longer identify the user as a target.

We can deblackbox ‘friend activity’ and its family of features using our knowledge of Spotify’s Padlock system. The same encryption-decryption keys must be called upon when users follow each other or receive notifications about their friend’s activities. The user can opt out of displaying their data in ‘friend activity’ tabs any time. All they have to is switch off  ‘Listening activity’. This would mean that the corresponding key is removed, thus blocking access to this user’s metadata related to the relevant ‘friend activity’.

 

 

 

 

Fig: Social Privacy Settings

 

 

Social Savvy Affordances or the lack thereof

It seems that it is a strategic business/political decision then, that Spotify does not become a social media platform despite the kind of robust data infrastructure it has. With the heavy hitting that Big Tech is receiving in recent years, it seems reasonable to want to steer clear from the controversial limelight related to user data. Privacy, market power, free speech and censorship are key issues that plague social-media based platforms (Boskin, 2019). Spotify has avoided being politicized, while still proliferating its user database and metadata acquiring capacities. Despite a range of designs available out there on prototypr.io — from a ‘strong’ social features centric design (Jessica Man) to a ‘weak’ social features supplemented design (Cecilia Lu, Sanjana Seshadri), nothing even close has been integrated into Spotify.

 

Fig: Man

 

 

 

 

Fig: Lu

Fig: Seshadri

This means that in terms of UI design, Spotify may not be willing to create affordances that enable large scale social interactions internally within the app, steering clear of any Facebook wall-like features. Spotify may be trying to adhere to its privacy statements and avoid political controversies surrounding user data. Searching people on Spotify is not as straightforward as Facebook in terms of both accuracy as well as simplicity. You cannot comment, react or tag a song inside Spotify. The no of actions one can perform on a song one likes is limited. Sharing is not granted internally, nor are there many features to recommend others, notify or perform any social actions on these songs. This can partially be explained as a flexibility-usability tradeoff (Lidwell-Holden, pp. 86) and partially by Spotify’s reluctance to be more social savvy, meaning the lack of affordances could actually be a strategic design constraint.

De-blackboxing the app reveals that though it has quite similar structures to social media apps, it is on the user-front that Spotify wishes to remain a streaming platform. It is here that we see how even technical decisions at the database structure level and UI design decisions depend on not just universal design principles for efficiency, but also socio-cultural landscapes.

Spotify allows “sharing” via third party apps like Facebook, Whatsapp, Tumblr, etc, using Web-based APIs but not internally with friends or followers. It does not access contacts on the mobile phone to connect to other possible Spotify users. Facebook data integration is the only way Spotify connects its users. It is understood that Spotify Wrapped was created to be shared on Instagram Stories. Meanwhile, Spotify acquires better AI systems to improve its recommendation service, continuing to focus on being streaming service platform (Novet, 2020). This again can be noticed in the proliferating affordances provided for personalized curated music such as discover weekly, made for you playlists, recommended radio playlists, etc.

 

Conclusion

Spotify derives its power from its database management systems. All the music and all the user data is stored on Google cloud using these systems. We saw how pub/sub system is utilised to operationalise streaming services on Spotify. We saw how various software libraries are used by Spotify to engage, extract and channel metadata generated by users as they interact on that app. The library softwares, cloud storage and the pub/sub system form the backbone on which Spotify functions. Accordingly, there are UI affordances and constraints that the app provides to the user that dictate how these systems will be used on the backend. And finally we saw how these UI affordances and constraints are placed, depend not just on universal design principles but also on the overall strategy of the company i.e. just because Spotify has the user data, the systems and the capacity to provide certain services (social media related) does not mean that the top level design has to necessarily exploit bottom level design architecture just because the the bottom level design has the capacity for it.

 

References

Boskin, M. (2019, April 29). Big tech must get its house in order or risk stronger regulation | Michael Boskin. The Guardian. https://www.theguardian.com/business/2019/apr/29/big-tech-regulation-facebook-google-amazon
Greenberg, D., Kosinski, M., Stillwell, D., Monteiro, B., Levitin, D., & Rentfrow, P. (2016). The Song Is You: Preferences for Musical Attribute Dimensions Reflect Personality. Social Psychological and Personality Science, 7. https://doi.org/10.1177/1948550616641473
Jakobsen, A. Y. L. (2018). Eventization of listening: A qualitative study of the importance of events for users of the streaming service Spotify. 125.
Janota, B., & Stephenson, R. (2019, November 12). Spotify’s Event Delivery – Life in the Cloud.
Spotify Engineering. https://engineering.atspotify.com/2019/11/12/spotifys-event-delivery-life-in-the-cloud/
Johnson, D. (2019). How to Find Friends on Spotify. Lifewire. https://www.lifewire.com/how-to-add-friends-on-spotify-4692334
Kermarrec, A.-M., & Triantafillou, P. (2013). XL peer-to-peer pub/sub systems. ACM Computing Surveys, 46(2), 16:1–16:45. https://doi.org/10.1145/2543581.2543583
Leenders, B. (2018, September 18). Scalable User Privacy. Spotify Engineering. https://engineering.atspotify.com/2018/09/18/scalable-user-privacy/
Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions,.
Rockport Publishers.
Lu, C. (2018, December 16). Spotify Mobile Case Study: Integrating Friend Activity. Medium. https://blog.prototypr.io/spotify-mobile-case-study-integrating-friend-activity-30de0cf12ee
Man, J. (2019, August 10). Re-imagining Spotify as a Social Media Platform. Medium. https://blog.prototypr.io/re-imagining-spotify-as-a-social-media-platform-2a646e60ab5f
Maravić, I. (2016, February 25). Spotify’s Event Delivery – The Road to the Cloud (Part I). Spotify Engineering. https://engineering.atspotify.com/2016/02/25/spotifys-event-delivery-the-road-to-the-cloud-part-i/
Mishra, & Brown. (2015, January 9). Personalization at Spotify using Cassandra. Spotify Engineering. https://engineering.atspotify.com/2015/01/09/personalization-at-spotify-using-cassandra/
Novet, J. (2017, May 18). Spotify just bought an AI startup to help it stay ahead of Apple Music. CNBC. https://www.cnbc.com/2017/05/18/spotify-buys-niland-french-ai-music-startup.html
Nudd, T. (2009). Spotify Crunches User Data in Fun Ways for This New Global Outdoor Ad Campaign. https://www.adweek.com/creativity/spotify-crunches-user-data-fun-ways-new-global-outdoor-ad-campaign-174826/
Reach for the Top: How Spotify Built Shortcuts in Just Six Months. (2020, April 15). Spotify Engineering. https://engineering.atspotify.com/2020/04/15/reach-for-the-top-how-spotify-built-shortcuts-in-just-six-months/
Ron White, How the Internet Works.” Excerpt from How Computers Work. 10th ed. Que Publishing, 2015.
Seshadri, S. (n.d.). Spotify. SANJANA SESHADRI. Retrieved December 8, 2020, from https://www.sanjanaseshadri.com/work/spotify-friend-activity
Setty, V., Kreitz, G., Vitenberg, R., van Steen, M., Urdaneta, G., & Gimåker, S. (2013). The hidden pub/sub of spotify: (Industry article). Proceedings of the 7th ACM International Conference on
Distributed Event-Based Systems – DEBS ’13, 231. https://doi.org/10.1145/2488222.2488273
Spotify Case Study. (n.d.). Google Cloud. Retrieved December 9, 2020, from https://cloud.google.com/customers/spotify
Vesterlund, M. (2015, June 23). Switching user database on a running system. Spotify Engineering. https://engineering.atspotify.com/2015/06/23/user-database-switch/
What Is Pub/Sub? | Cloud Pub/Sub Documentation. (n.d.). Google Cloud. Retrieved December 7, 2020, from https://cloud.google.com/pubsub/docs/overview