University of Southern California Dissertations and Theses

Post modern UI/UX, an anti-design manifesto for 21st century

(USC Thesis Other)

Post modern UI/UX, an anti-design manifesto for 21st century

PDF

Download a page range

Download transcript

Copy asset link

Request this asset

Transcript (if available)

Content

POST MODERN UI/UX,
AN ANTI-DESIGN MANIFESTO FOR 21
st
CENTURY

by

Xixi Huang

A Dissertation Presented to the
FACULTY OF THE USC ROSKI SCHOOL OF ART AND DESIGN
UNIVERSITY OF SOUTHERN CALIFORNIA
In Partial Fulfillment of the Requirements for the Degree
MASTER OF FINE ARTS
(DESIGN)

May 2020

Copyright 2020 Xixi Huang

ii
Table of Contents
List of Tables ...................................................................................................................... iii
List of Figures ..................................................................................................................... iv
Abstract ................................................................................................................................ v
Introduction ......................................................................................................................... 1
My Story .............................................................................................................................. 6
Projects ................................................................................................................................ 7
Innovative VR Interface .......................................................................................... 6
Upside-down Type Game ...................................................................................... 11
Funny Calculator ................................................................................................... 16

Conclusion ......................................................................................................................... 21
Bibliography ...................................................................................................................... 22

iii
List of Tables
Table 1 A Manifesto for “alternative” design practices in the 21st century .................... 1

iv

List of Figures
Figure 1 Vanna Venturi House .................................................................................... 5

Figure 2 Universal Signs ............................................................................................. 7

Figure 3 Your view in Oculus Home .......................................................................... 8

Figure 4 Controversial way to adjust brightness in a digital interface ........................ 9

Figure 5 Adjust brightness in a VR interface by using body gestures ........................ 9

Figure 6 Innovative way to adjust brightness in a VR interface ............................... 10

Figure 7 The cover for the Yale University Art Gallery Fall 2010 program ............. 12

Figure 8 Upside-down Type Game Version One ...................................................... 13

Figure 9 Upside-down Type Game Version Two ..................................................... 14

Figure 10 Upside-down Type Game Version Three ................................................... 15

Figure 11 The Evolution of The Calculator ................................................................ 16

Figure 12 Funny Calculator: Code .............................................................................. 17

Figure 13 Sixteen-segment Display ............................................................................. 18

Figure 14 Funny Calculator: Different ways to input numbers ................................... 18

Figure 15 Digitalized numbers and writing samples ................................................... 19

Figure 16 The legend of possible ways to input a number .......................................... 19

v

Abstract

Many of today’s designers are trained to be rational and conventional in order to produce
the most efficient result. My project aims to bring back what has been removed and lost due to
“efficiency”— emotions, friction, confrontation, and fun. This project creates experiences that
the user doesn’t and won’t forget by delivering a series of powerful and effective designs in both
digital and physical forms while challenging the importance of “efficiency.”
Keywords: Experience design, Interaction design, Fun, Playfulness, Efficiency

1
Introduction

From my own experience as a UI/UX designer, a “good design” is always clear,
predictable, and frictionless so that users can complete the goal in the most efficient way
possible. Many of today’s designers are trained to be rational and conventional in order to
produce the most efficient result. The challenge then is to bring back what has been removed in
the name of “efficiency” and seek out powerful and effective design that does not shy from
emotions, friction, confrontation, and fun and that the user does not and will not forget. Such
design changes behaviors and calls the user to actions for good. It’s a position that design should
hold and does affect its outcomes. “Make me think” is my motto for both designers and users.
(Table 1.)
Table 1, A Manifesto for “alternative” design practices in the 21
st
century
Efficient Effective
Competent Confrontational
Forgettable Memorable
Safe Risk-taking
Predictable Unconventional
Follows the rules Accommodates change
Passivity Action-oriented

This project is a reaction to the sense that most of today’s designers are “playing it safe
“ — they duplicate the solutions that have been proven to be “efficient” rather than inventing
“effective” solutions, which makes users less adaptive to new design ideas. This project aims to
let designers and users rethink affordance, encouraging more creativity while critiquing the

2
“efficiency” factor. I believe designers should optimize their creativity to provide users with
unknown — not-yet-designed possibilities and options that allow experiments, accidents or
playfulness — just like our real life.

Research Methods and Deliverables
Focusing on visual design languages and user interactions, my projects rely on both
research and design practice. The research explores traditional intuitive design, human-computer
interaction, affordances, and so on. Research materials include literature on capitalism and
commodities, papers of human-computer interaction, and case studies of historical digital and
physical design. The deliverables are a series of design projects that focus on “effective” rather
than “efficient” digital and physical design. The projects breakdown into the following groups.
I. Digital:
Prototyping and programming of digital device interfaces (desktop, mobile, and VR),
such as innovative navigation, functionality, and other UI elements
II. Physical:
Objects designed as commodities such as doors, cups, or laptops. Usability studies are
given to test how people interact with these designs. The deliverables are collected as an
exhibition and a website.

3
My Story
Contemporary user Interface (UI) and User Experience (UX) design is a product of the
continued influence of modernism on design that emphasizes “rational” “logical” knowledge
production. UI and UX design is often considered research-based and very rational. The
presumption is therefore that it is simple and efficient and that users do not need to spend time
figuring out how to use a product. It should be very consistent and predictable: “Users have
become familiar with interface elements acting in a certain way, so try to be consistent and
predictable in your choices and their layout. Doing so will help with task completion, efficiency,
and satisfaction.”
1

A good UI/UX design is often defined as efficient, intuitive, product-oriented, and user-
centered, which is also what I have always believed as a UI/UX designer. However, this all
changed one day when I was designing the user interface for an educational mobile app and was
suddenly overcome by the sense that I would become very sick.
I have designed more than 10 complete sets of interfaces for different digital product
(apps and websites), and they all look similar. My clients all wanted their interfaces to look like
other apps—Instagram, Twitter and Lyft—so that users would already be familiar with them and
would know how to use the “new” product. Big IT companies like Google, Microsoft, or IBM
have all developed their own design systems, sets of UI/UX principles that claim to provide users
optimal user experiences, and smaller companies have followed those principles. As a result,
most user-interface design on the market has come to look the same, and is intentionally
forgettable.

1
Usability.gov. 2014. “User Interface Design Basics.” Accessed February 25.
www.usability.gov/what-and-why/user-interface-design.html

4
Thinking back to 2000, my third year of elementary school, I made my first website
about the animated series “Sailor Moon.” At that time, web design was not standardized—the
word “usability” did not yet exist. The website was based on nothing but my imagination. I put
my blood and soul into every pixel on the screen even though it was very rough, not user-
friendly at all, and extremely inefficient compared to current design standards. None of these
issues prevented my website from being greatly popular.

History
In the 1960s, while modern architecture was under the influence of the moto that “less is
more,” in pursuing minimalism and uniformity, Robert Venturi, an iconoclastic architect often
considered the father of postmodernism, argued that less is bore:
Architects can no longer afford to be intimidated by the puritanically moral
language of orthodox Modern architecture. I like elements which are hybrid rather
than ''pure," compromising rather than "clean," distorted rather than
"straightforward," ambiguous rather than "articulated," perverse as well as
impersonal, boring as well as "interesting," conventional rather than "designed,"
accommodating rather than excluding, redundant rather than simple, vestigial as
well as innovating, inconsistent and equivocal rather than direct and clear.
2

Like Venutri’s reaction to the architecture of the 1960’s (Figure 1), my response to much
of the UX/UI currently being made is that while claiming to be “pure, clean, straightforward,
articulated, interesting, designed, simple, direct and clear”, is in fact dull. I want a UX/UI design
that is: hybrid, compromising, distorted, ambiguous, perverse as well as impersonal, boring as
well as "interesting," conventional, accommodating, redundant, vestigial as well as innovating,
inconsistent and equivocal.

2
Venturi, Robert, and Vincent Scully. Complexity and Contradiction in Architecture. New York:
The Museum of Modern Art, 2019.

5

Figure 1, LaFrance, Rollin, Vanna Venturi House, 1964, Philadelphia, Pennsylvania. Uncube
Magazine. Accessed February 25, 2020. http://www.uncubemagazine.com/blog/15926627

6
Projects
I. Innovative VR Interface
A significant part of this project aims to break the limitation of digital devices, change
users’ perception of icons, and challenge users’ “affordance” just as David Carson challenged the
legibility of conventional typography. To describe this work two concepts must first be
explained: affordance and iconography.
“Affordance” is an important term for UI/UX designers. According to the Merriam-
Webster dictionary, “affordance” is “the quality or property of an object that defines its possible
uses or makes clear how it can or should be used.” In order to let people understand the
functionality in a user interface, which leads to a more efficient result, designers often apply
“affordances” to the design of user interface elements. For example, when users want to adjust
the brightness on a mobile game, they first need to find the thing that represents “brightness,”
which usually is an icon that looks like a sun. Then they find the associated operation—a slider
with a button, or a pair of plus/minus buttons. Because all of these operations are the projection
of people’s real-life experiences, like TV controllers or radio dials, they provide users with
information that all they need to do press or slide virtual buttons and knobs just as they would in
the real world.
Without a doubt, applying affordance makes design very efficient for both designers and
users. Designers don’t need to think anymore. They just need to skeuomorph
3
—ornament or
design an object by copying a form ordinarily made from another material or technique— again

3
Dictionary.com, “Skeuomorph.” Accessed February 25, 2020
http://www.dictionary.com/browse/skeuomorph

7
and again. All while repeating that “if we change it, users won’t know how to use it.” Similarly,
users don’t need to think anymore because once they learn how to use one thing, they know how
to use everything. As a result, design is becoming more and more standardized and mass-
produced. At the same time everybody can be a “designer.” The feeling has emerged that even if
we do not know anything about design, we can all quickly use online services to create a decent
logo and a website. This arises from a belief that there are design principles that are “right” or
“correct” or that according to unverifiable criteria “work 99% of the time.”
“Iconography” is also a very important notion in design; iconography is a particular range
or system of types of the images used by an artist or artists to convey particular meanings.
UI/UX designers create icons based on affordance to provide implication of functionality.
Usually, users consider icons something that unambiguously informs—they are just there,
designers designed them, and that’s it (Figure 2).

Figure 2, Huang, Xixi, Universal Signs, Digital, 2019.

When VR (Virtual Reality) came to the market, interfaces of programs such as Oculus
and Steam were identical to computer desktop interfaces (Figure 3), because people already
knew how to interact with a computer, they could quickly learn how to use VR. In other words,

8
VR has been built by taking for granted established affordances and iconography. As VR is an
environment that provides users a sense of space, I want users to interact with icons in space and
be co-creators of the icons instead of just watching them, which gives the icons a life rather than
just passively providing information.

Figure 3, Rubin, Peter, Your view in Oculus Home, 2018. Wired. Accessed February 25, 2020.
https://media.wired.com/photos/5ae899616980dc4b0948830e/master/w_1600%2Cc_limit/oculus
home.jpg

Designers usually use a sun icon to indicate brightness. In my innovative VR project’s
environment, instead of using additional operations, such as a slider, or a plus/minus button to
adjust the value of brightness (Fig 4), the user can directly remove the light around the sun so
that the sun darkens, thus reducing brightness by using body gestures (Figure5). Users can put
the removed lights back to increase the brightness (Figure 6), or even use any long-shaped object
in the environment as the “light,” such as a banana, a bottle, or an umbrella to form a new sun
icon.

9

Figure 4, Huang, Xixi. Controversial way to adjust brightness in a digital interface, Digital, 2019.

Figure 5, Huang, Xixi, Adjust brightness in a VR interface by using body gestures, Digital, 2019.

10

Figure 6, Huang, Xixi, Innovative way to adjust brightness in a VR interface, Digital, 2019.

This project is definitely not an efficient solution under the circumstances because users
are expecting to slide or press the plus/minus button to adjust the brightness rather than
interacting directly with the icon. Here, users are challenged to think! They may feel confused at
the beginning because of the unpredictability lack of clarity but they are compelled to consider
their own relationship to the environment in with which the interact and the conditions of which
they change through their actions. Moreover, this project also requires designers to think! In
order to design the interface, designers can no longer duplicate the solutions that others invented,
they need to think new ways of interacting as well as think through all the possibilities.
Today’s designers constantly are playing it safe — They duplicate the solutions that have
been proven to be “efficient” rather than inventing “effective” solutions, which make users less
adaptive to new ideas. My project aims to let designers and users rethink affordance,
encouraging more creativity while weakening the “efficiency” factor. An efficient solution is
always a question with a single correct answer. However, things in our life rarely have one
correct answer. An inefficient solution is a question that doesn’t have a certain answer, it
requires exploration and experimentation. I believe designers should optimize their creativity to

11
provide users with unknown — not-yet-designed possibilities and options that allow
experiments, accidents or playfulness — just like our real life.

II. Upside-down Type Game
Legibility used to be the most important value of typography, however, by the early
1990s, digital tools were colliding with a post-modernist explosion of modernism’s vocabulary.
Designers could now make and manipulate form through direct action in real time.
4
While
designers were still trying to make typography legible and easy to read, David Carson, the father
of “grunge typography” who started to twist and smash type using computers, making it almost
illegible (Figure 7). In his 2013 TED Talk “Don’t Mistake Legibility for Communication,” he
argued that “just because something is legible doesn’t mean it communicates and, more
importantly, doesn’t mean it communicates the right thing.”
5

4
Ellen, Lupton, “2014 AIGA Medalist: David Carson. AIGA,” AIGA. Accessed February 25,
2020. http://www.aiga.org/medalist-david-carson.
5
Berry, Craig. “C-Word Talks #34: David Carson.” Medium. Accessed February 25, 2020.
http://medium.com/inside-vbat/c-word-talks-34-david-carson-ce38f3182301.

12

Figure 7, Carson, David, The cover for the Yale University Art Gallery Fall 2010 program, 2010.
David Carson Design. Accessed February 24, 2020.
http://www.davidcarsondesign.com/top/img/yale4.gif

In recent years, thanks to the Internet, people have access to very large amounts of
information. People nowadays stop reading, they browsing instead. To call attention to the
underlying work that reading requires, I made a type game called “Upside down.”
In the first version the game (Figure 8), I made it very simple and conventional.
Everything is center aligned, the focal point is the important things that user needs to read and
the instruction is very clear. I set the timer to 30 seconds, the vast majority of people knew what
to do immediately and started playing the game.

13

Figure 8, Huang, Xixi, Upside-down Type Game Version One, Digital, 2019.

In the second version (Figure 9), I decided to challenge legibility just like David Carson
does by turning the letters upside down. I also altered the layout and color to change the focal
point from important words to non-important words, this forced users to read a little bit more
carefully. Most people took about 10-15 seconds to figure out what to do.

14

Figure 9, Huang, Xixi, Upside-down Type Game Version Two, Digital, 2019.

Surprisingly in the second version of the game, most people identified the word first, and
then they started to type it without really looking at it. Most of them are native English Speakers.
A significant number of people pressed the “delete” button on keyboard when they felt they
made a mistake. This comes from habitual typing. However, in this game, if users really looked
at the screen, they would know that they don’t need to press the delete to correct a mis-typed
word.

15
In the third version (Figure 10), based on observations of version two, I made several
changes:
1) I added repetition instructions to make the screen even more chaotic, so users have to
really look at every single line to understand what they need to do to play the game. Most
people can’t figure out what to do in the first 30 seconds.
2) In the vocabulary library, I intentionally misspelled some words. Because the words are
misspelled, users can’t use the “identify first, type later” method, they have to read the
word letter by letter in order to type exactly what is showing on the screen. This alteration
meant that almost all people cannot easily identify the word, but because they are looking
at everything very carefully, only a few pressed the “delete” button.

Figure 10, Huang, Xixi, Upside-down Type Game Version Three, Digital, 2019.

16
III. Funny Calculator
The evolution of the calculator (Figure 11), from counting fingers to the smartphones, is a
process from analog to digital. Because of the easy access to the smartphone, whose base was
computer, the calculation became so much easier. When a person wants to calculate something,
instead of counting fingers, or using the abacus, all one needs to do is take out the smartphone,
open the calculator app, tap the number and get the answer.

Figure 11, Phillips, Jeffery, The Evolution of The Calculator, 2015. Cosmo Magazine. Accessed
February 25, 2020. https://cosmosmagazine.com/mathematics/evolution-calculator

Suddenly, calculation is all about tap the screen, or press the button. It doesn’t matter
how much number you put into the calculator, all that matters was the result.
The initial idea of my web-app project “Funny Calculator” was to

17
1) challenge the current way how user interact with a calculator, which was press the
button
2) let user to have the same experience that how computer generate a number, which
could be trace back to the origin of computer -- use 1 and 0 to all the work
3) study how users read, write, and identify numbers.

In order to imitate how computer works, I used a sixteen-segment display to represent
number. Each segments can be turned to on or off which is the same with how computer
represents 1 as on and 0 as off.

Figure 12, Huang, Xixi, Funny Calculator: Code, Digital, 2019.

18
I made an assumption that the user would input the numbers based on how numbers
usually are constructed on the sixteen-segment display (Figure 13). However, after the first
round of user testing, I found that each user tend to have their own way to input numbers. For
example, 2 multiplied by 7 can have a lot of ways to display its input (Figure 14).
Figure 13, Huang, Xixi, Sixteen-segment Display, Digital, 2019.

Figure 14, Huang, Xixi, Funny Calculator: Different ways to input numbers, Digital, 2019.

Therefore, I collected a sample set of handwriting according to how people write
numbers (Figure 15). Then I analyzed and created several ways that a number can be input into
the sixteen-segment display.

19
Figure 15, Huang, Xixi, Digitalized numbers and writing samples, Digital, 2019.

In the second iteration of the design, the system can recognize that a number can be
represented in many different ways. This feature breaks the limit that a user can only have one
way to input; instead, users can input the number based on what they think the number should
look like (Figure 16).

Figure 16, Huang, Xixi, The legend of possible ways to input a number, Digital, 2019.

20
The project functions on mobile platform. In a conventional calculator, the user is able to
know how big the number is by just looking at the length of the number. However, in “Funny
Calculator,” it only shows one digit of the number at one time. In order to see the full resulting
number, users need to swipe all the way to the end. This makes every digit valuable.

21
Conclusion

In the past decade, as we entered an era of screens (smart phones, laptops, tablets),
UI/UX has become a hot topic. The book “Don’t make me think”
6
claimed that a good interface
should let users accomplish intended task as efficient as possible, which was the goal that a lot of
designers was trying to pursue. Therefore, most of the digital interface was built based on users’
pre-perception and affordances. The affordances designers invented, such as finger gestures and
graphic language are built into not only our daily habits, but also our next generations’ brains.
There are some videos on Internet showing how babies try to use finger gestures to enlarge
physical pictures, which was funny but also horrible to me. As a designer, we need to soberly re-
think the givens that we designed into our environment as well as how we want our next
generation grow up. My projects are pointing to the very serious need of re-consider the givens
that permeate our daily lives by speculatively challenging users’ habits in a playful but also
frustrating way, in which encourages users to think.

6
Krug, Steve. Don’t Make Me Think, Revisited: a Common Sense Approach to Web Usability.
Berkeley, CA: New Riders, 2014.

22
Bibliography

Usability.gov. 2014. “User Interface Design Basics.” Accessed February 25.
www.usability.gov/what-and-why/user-interface-design.html.

Venturi, Robert, and Vincent Scully. Complexity and Contradiction in Architecture. New York:
The Museum of Modern Art, 2019.

Dictionary.com, “Skeuomorph.” Accessed February 25, 2020
http://www.dictionary.com/browse/skeuomorph.

Ellen, Lupton, “2014 AIGA Medalist: David Carson. AIGA,” AIGA. Accessed February 25,
2020. http://www.aiga.org/medalist-david-carson.

Berry, Craig. “C-Word Talks #34: David Carson.” Medium. Accessed February 25, 2020.
http://medium.com/inside-vbat/c-word-talks-34-david-carson-ce38f3182301.

Krug, Steve. Don’t Make Me Think, Revisited: a Common Sense Approach to Web Usability.
Berkeley, CA: New Riders, 2014.

Abstract (if available)

Abstract Many of today’s designers are trained to be rational and conventional in order to produce the most efficient result. My project aims to bring back what has been removed and lost due to “efficiency”— emotions, friction, confrontation, and fun. This project creates experiences that the user doesn’t and won’t forget by delivering a series of powerful and effective designs in both digital and physical forms while challenging the importance of “efficiency.”

Linked assets

University of Southern California Dissertations and Theses

Conceptually similar

PDF

Visualizing text as storytelling

PDF

Stream of subconsciousness

PDF

Qìn

PDF

The application of photography technology in modern graphic design: the beauty of astrophotography

PDF

Investiture of Chinese culture in character design

PDF

Code generated visualization: Coding Collage Gallery

PDF

The futuristic world with metallic cyber plants

PDF

Exploration and reflection: a precipitation of personal memory and experience

PDF

Transplant: examining culture clash through linear storytelling and non-linear storytelling

PDF

Lost and found: escape from the longing past towards the uncertain future of art and design

PDF

Object stories for social connectivity: a digital service that improves social interactions through object’s storytelling

PDF

The crying project: understanding emotions through an investigative eye

PDF

Fragments: communication in contemporary techonology

PDF

Memories of the scent of orange blossoms

PDF

The daily life of nervous boy "Y": information visualization with multi-sensory design

PDF

Designing a personal narrative through collaged mass-market images: traditional collage and digital collage

PDF

Am I ugly? The impact of selective self-presentation selfies on self-awareness

PDF

Perceiving the environment through sound

PDF

Haitang 1971

PDF

Visions in verse: dialogues across cultural realms

Asset Metadata

Creator Huang, Xixi (author)

Core Title Post modern UI/UX, an anti-design manifesto for 21st century

School Roski School of Art and Design

Degree Master of Fine Arts

Degree Program Design

Publication Date 05/15/2020

Defense Date 03/01/2020

Publisher University of Southern California (original), University of Southern California. Libraries (digital)

Tag efficiency,experience design,fun,interaction design,OAI-PMH Harvest,playfulness

Language English

Contributor Electronically uploaded by the author (provenance)

Advisor Wojciak, Ewa (committee chair), Burruss, Laurie (committee member), O'Connell, Brian (committee member)

Creator Email bara.huang@gmail.com,xixihuan@usc.edu

Permanent Link (DOI) https://doi.org/10.25549/usctheses-c89-312792

Unique identifier UC11666156

Identifier etd-HuangXixi-8539.pdf (filename),usctheses-c89-312792 (legacy record id)

Legacy Identifier etd-HuangXixi-8539.pdf

Dmrecord 312792

Document Type Thesis

Rights Huang, Xixi

Type texts

Source University of Southern California (contributing entity), University of Southern California Dissertations and Theses (collection)

Access Conditions The author retains rights to his/her dissertation, thesis or other graduate work according to U.S. copyright law. Electronic access is being provided by the USC Libraries in agreement with the a...

Repository Name University of Southern California Digital Library

Repository Location USC Digital Library, University of Southern California, University Park Campus MC 2810, 3434 South Grand Avenue, 2nd Floor, Los Angeles, California 90089-2810, USA