UX≠UI by Sreelakshmi Menon

Sreelakshmi V Menon Global Innovation Design Critical and Historical Studies Dissertation 2016 Royal College of Art Word Count : 7551 Tutor : Dr. Gregory Votolato

UX â&#x2030; UI

To you, who might be a UX Designer at heart.

And to you, who ask me what I do and cannot understand what being a UX designer is all about. If youâ&#x20AC;&#x2122;re curious enough, read on!

UX â&#x2030; UI

INDEX

Introduction 9 Chapter 1 : The Old Man and The Sea

Chapter 2 : Twist and Shout 23 Chapter 3 : See What Develops 31 Chapter 4 : The Happiest Place on Earth 39 UX â&#x2030; UI

Chapter 5 : Centurion 45 Conclusion 51 Bibliography 57

UX â&#x2030; UI

INTRODUCTION Specialization is for insects. Man should be able to change a diaper, run a marathon, build a house, write a book, appreciate good music, and fly in space.1

When I have hungry friends at home, my mother specializes in ensuring that there is a delectable 4-course meal, guaranteeing the tastiest experiences for everybody’s appetite. My father specializes in coming up with creative ideas to solve problems using his rich knowledge in a variety of topics, establishing a motivating experience for those who have discussions with him. My brother enjoys singing and entertaining an audience, bringing in positive auditory experiences for them. As I understand, I come from a family that specialises in User Experience! These experiences are tangible and abstract. Traditional and modern. Technology-driven and skill-driven.

UX design is the art and science of generating positive emotions through product interactions

says Tomer Sharon, Senior UX Researcher at Google.

It’s a commitment to developing products and services with purpose, compassion, and integrity

says Whitney Hess, Experience Design Coach at WhitneyHess.com. According to a study2 from the Oxford Journal, the goal of UX design in business is to

improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in the interaction with a product.

Therefore, UX design is the process of designing (digital or physical) products, services or systems that are useful, easy to use, and delightful to interact with, the prime aspect being the human element at the core of the design process and experience.

UX ≠ UI

As a student of Global Innovation Design at the Royal College of Art and Imperial College London, I’ve been fortunate to be able to study design in three of the greatest cities in the world. 1 Dr. Jerry M Linenger in his book, Off The Planet 2 UX Curve: A method for evaluating long-term user experience - Interacting With Computers, Oxford Journals

Introduction

I’m reminded of my grandma’s dosa when I look at my plate of savoury pancakes at My Old Dutch in London. I’m reminded of the Kolam, drawn outside houses in South India every morning using rice flour, when I see books on Colouring Therapy at the Strand bookstore in New York. I’m reminded of the vast array of terracotta, stone, and ceramic ware in my ancestral home in India when I browse through teapots at the largest outlet of Muji in Tokyo. Specializations are important - that is what makes one the master of what they do. They are acquired in different ways - one is exposed to the art of drawing the Kolam using rice flour at a very young age by observing older women in the household as they do it every morning. The child learns through observation, trial and error, and becomes a master of the skill over the years. Product designers at Muji would sketch ideas for a teapot, select one for production, keeping in mind the perfect form and function, strictly adhering to the brand guidelines of Muji. A high level of skill and specialization, developed through observation, trial and error, endless practice, and a great sense of design creates the best user experience designers, commonly known as UX designers. As a UX designer, one turns into part marketer, part designer, part project manager ; the UX role is complex, challenging and multi-faceted. A great UX designer understands sociology, cognitive science, people and great products.

UX ≠ UI

However, with an upsurge in the number of organizations understanding the power of design to get better at what they do, regardless of the industry they specialize in, UX Design is now loosely interpreted with the term UI. User Experience Design is in theory a non-digital practice, but used and defined predominantly by digital industries3 to have solutions by the means of an interface.

Having actively been in the field of User Experience for the past five years, I have seen many designers and organizations being ignorant of the meaning of the terms UX and UI. Listening to people using the wide array of UX buzzwords of today - stakeholder analysis, focus groups, card sorting, information architecture, mental models, personas, user scenarios, journey maps, brand positioning, sitemaps, user task flows, wireframes, gamification, look and feel, form and function, interaction elements, mock-ups, prototypes, usability testing, pattern libraries, lean UX, service design, and interaction design to name a few, - in completely wrong contexts, makes me wonder how many people truly understand the meaning of UX. Every buzzword mentioned 3

UX stands for User Experience ; UI stands for User Interface

Introduction

above is a part of the UX design process, used together or in isolation depending on the kind of user experience expected from the design . In the following chapters, I look at five famous personalities from the past, who contributed to the society and to their industries way before the term “User Experience” was coined. Their work do not involve the internet, smart phones or pixel-perfect interface design. I have taken the opportunity to compare their work, their processes and outputs to today’s UX design processes, to prove that each one of them were early adopters of user experience design themselves.

Define interaction models, user task flows, and UI specifications. Communicate scenarios, end-to-end experiences, interaction models,and screen designs to stakeholders. Work with our creative director and visual designers to incorporate the visual identity of Twitter into features. Develop and maintain design wireframes, mockups, and specifications as needed.

is the job description of an Experience Designer at Twitter.

Concept and implement the visual language of Airbnb.com. Create and advance site-wide style guides.

is the job description of a User Interface Designer at Airbnb.4 Clearly, there is close symbiosis between UX and UI today, making UI an integral part of the UX. This is an attempt to differentiate between User Experience and User Interface without the use of plenty of design terminologies, based on personal viewpoints and experiences.

UX ≠ UI

I hope the following chapters encourage you to become the best UX designer that you can be, if you are a writer, musician, scientist, animator, sportsperson or anyone else who aspires to have and to deliver the best experiences through what you do.

An online marketplace to list, find and rent vacation homes with a processing fee and daily rent costs

UX â&#x2030; UI

“Today that term has been horribly misused by people to say “I’m a user experience designer. I design websites” or “I design apps” and they have no clue as to what they are doing and they think that the experience is that simple device.. that website or the app or..who knows what. NO. It’s everything! It’s the way you experience the world. It’s the way you experience your life. It’s the way you experience the service..or yeah, an app or a computer system.. But, it’s a system. It’s..everything.

UX ≠ UI

Got it?”*

- Don Norman

UX â&#x2030; UI

Chapter 1

The Old Man and The Sea Fast turnarounds in communication, technology and industries that have a direct impact on design have introduced us to futuristic domains that one can explore. By using a virtual reality headset, one is immersed in experiences that expand the senses through a new medium, within a virtual environment. The field of user experience design plays an active role in this environment as the most important aspect of any virtual reality setup is the experience itself. This involves skilled UX designers to design adaptability, audio-visual input and output, movement, interactions and the interface for the best use of resources. Immersing oneself in an alternate reality through technology may be a modern concept but man has always been familiar with a similar notion of being a part of the another reality through one of the oldest forms of communication - the written word. Biographies let you become a part of others’ lives. Non-fiction allows for one to be immersed in a reality that once existed. Fiction immerses the reader into a different world which may or may not have existed/exist, in the past, present or future. As part of the User Centered Design process and having considered myself a UX designer for the past few years, some processes require creating personas5 to build use cases and scenarios using mental models. A mental model represents a person’s thoughts and associations about a particular subject. They include experiences, existing factual knowledge and intuitive ideas and perceptions6. This fundamental principle that is familiar to a user experience designer was also used by one of the greatest literary figures of all time, Ernest Hemingway. He believed that the writer’s task is to last and get your work done and see and hear and learn and understand; and write when there is something that you know; and not before; and not too damned much after. Let those who want to save the world if you can get to see it clear and as a whole.7 This could very well be adapted into being a design manifesto!

UX ≠ UI

His most celebrated work, The Old Man and The Sea, which paved way for Hemingway to be awarded the Nobel Prize in Literature in 1954, is about the protagonist, Santiago, who is considered the unluckiest fisherman as he returned from the sea with nothing for several days, who sets out far into the 5 6 7

Fictional characters created to represent the different user types that might use a site, brand, or product in a similar way Frameworks used to intuitively design user experiences Sanderson, Stewart (1959), Hemingway.2

Chapter 1

ocean and catches a Marlin but faces adversities while coming back. How can there be any “UX” in this classic example of literary fiction? Some of the most successful companies of today have the principles of UX at their core. Constant improvement, a dire need of hope at the time of distress or what designers today call “the designer’s block”, and the will to deliver better user experiences with the right intentions often give greater results. This virtue of perseverance ties together The Old Man and The Sea. Right at the beginning of the story, describing the appearance of the protagonist, Hemingway says brown blotches of the benevolent skin cancer the sun brings from its reflection on the tropic sea were on his cheeks…and his hands had the deep-creased scars from handling heavy fish on the cords.8 Santiago’s appearance is marked by his struggle against the wrath of nature over the years, but his scars hold meaning. This description of Santiago’s features can be interpreted as wabi-sabi, an ancient aesthetic philosophy rooted in Zen Buddhism in Japan, where zen masters used precious handmade bowls which were irregularly shaped with uneven cracks and glaze, during tea ceremony rituals. Wabi-sabi became popular as people began to find beauty with deliberate imperfections of revering authenticity over man-made creations, over luxury, lavish aesthetics and machine-made products. This is also what one can see in the growing trend of “minimalism” in products and UI, across the world today. As the story proceeds, every step is a mystery. However, after killing the marlin that he caught, he reconciles his actions by saying to himself,

You were born to be a fisherman as the fish was born to be a fish,9

even though he leaves it to the readers to contemplate over matters of sin.

UX ≠ UI

This can very well be a design principle, often termed “reflective design”10 which elaborates on the experience of the entity that is designed, beyond the initial stage of getting familiar and associating with it. This involves one’s

8 9 10

Hemingway, E. (1994) The old man and the sea. 4 Hemingway, E. (1994) The old man and the sea. 47 Norman, D.A. (2003) Emotional design. 63

Chapter 1

opinions towards it - if it stays the same after the first interaction or not, the values that one relates to the entity in hindsight after first-hand experience. The most recent example of a UI based discussion which sparked a variety of opinions on its UX was after the latest iOS update, iOS10, where Apple Inc. radically changed user interactions on the lock-screen of the iPhone. They got rid of a visual cue (the icon of a camera) and replaced it with a left-swipe on the screen. The phone can now be unlocked by pressing the home button. One can say that with the most commonly used widgets (such as calendar, news, chats, weather reports, music, maps, etc.) and the camera being accessible from the lock screen, the experience of using the phone changes as a whole. This new experience is the result of the change in its interface.

UX ≠ UI

Ernest Hemingway was no UX designer. In fact, he passed away almost three decades before the term ‘user experience’ was coined by Don Norman. However, The Old Man and The Sea continues to inspire generations and if one looks closely enough, fundamental principles of design can be found etched in his writings, just like the scars on Santiago’s skin.

UX â&#x2030; UI

Chapter 2

Twist and Shout One of the many things I’ve inherited from my parents is their passion for music. With a history of Indian classical music in the family, I was exposed to everything that is musical from a very tender age. Being acquainted with the classics, the science behind music and artifacts alike, it felt like Paradise City11 to have been a part of the Making Music Modern12 exhibition at the Museum of Modern Art, New York, in November 2015. The history of music is full of examples of great men and women who have contributed towards enriching this field in diverse ways. Some of these inventions are of prime importance in the history of industrial design as much as it is in the history of music. Conducting a thorough analysis on three artifacts - the Edison Home Phonograph, the Fender Stratocaster Electric Guitar and Milton Glaser’s Dylan poster - iconic in their own ways, helped me understand how close-knit design and music are. The results derived from the best congruences of this close association have had a global impact. Music inspires many and the field of design is no exception. In 1961, American songwriters Bert Russell and Phil Medley wrote a song, initially titled ‘Shake It Up, Baby’, which came to be known as ‘Twist and Shout’ after a few years. The very first version of the song was recorded by the Philadelphia based R&B band Top Notes in 1961. Set to a repetitive beat with a hint of latin rhythm and tune, this version of the song failed to become very popular. The second version of the song was recorded by Ohio-based The Isley Brothers in 1962. This became a huge hit which gave it more charm as an improvised version of the existing track, emphasizing on more energetic vocals, the wind-up exuberance of the track and a raucous, shout-along bridge.

UX ≠ UI

This was the time when rock ’n’ roll was gaining popularity in Europe. Liverpool-based boy-band, The Beatles, started to play The Isley Brothers’ version of Twist and Shout as a cover song in their shows. This eventually led to the Beatles recording their own version of the song in 1963 as part of their first album in the UK, Please Please Me, with John Lennon on lead vocals. This version of ‘Twist and Shout’ has been the most famous one. Not only did it showcase The Beatles at their glorious rock ’n’ roll best, giving them a permanent spot at the top of all charts in the following decades in listings 11 12

Song by American rock band Guns ‘n’ Roses An exhibition at the Museum of Modern Art in New York that ran from 15 November 2015 to 18 January 2016

Chapter 2

across the globe, more than fifty decades later, this track is considered to be one of the finest examples of British rock ’n’ roll in the history of music for its exemplary vocal performance. The Isley Brothers and The Beatles reproduced an existing entity, in this case, a song, with their own creative inputs, making the newly-formed entity a whole new song. This is different from reproducing the existing song as it is. Each version of the song received different kinds of reactions from the masses thereby making one version of the song more popular than the other. This process of finding inspiration and promising originality in what is designed after treating it with different tools or methods is at the core of a UX design process called iterative design. The feedback one receives through interactions with the people for whom the product/service/system is designed (called the ‘target audience’), helps in re-iterating and coming up with better designs, which can be reflected through tangible products, interfaces (UI), services or hypothetical concepts. Iterative design is a design methodology based on a cyclic process of prototyping, testing, analyzing, and refining the problem which needs a solution through design methods. Based on the results of testing and user feedback on the most recent iteration of a design, changes and refinements are made to create something different from what it was in its initial stages.13 The Edison Home Phonograph, which was produced many decades before the Beatles recorded Twist and Shout is certainly one of the greatest examples of early-American industrial design. However, looking at the timeline of its evolution to identify its equivalent of today, one can see how user experience goes hand-in-hand with industrial design, following iterative design methodologies for products and services that are created for suitable target audiences.

UX ≠ UI

The Home Phonograph portrayed itself as a musical machine which could carry out all functions that a superior Phonograph could. This instrument became extremely popular within a short span of time as it was priced much lesser than other varieties of phonographs that were available. Simple in construction and easy to operate and maintain, it was superior to other cheap machines for music.14

Much that was then anticipated has come true, and much more

13 14

A UX design process to make changes to the design based on user feedback after usability tests Tewksbury, E. A Complete Manual of the Edison Phonograph (1977).3-5, 13- 18, 20, 65-67

Chapter 2

than was then expected has happened

said Edison, almost a decade after the first Phonograph. The concept of reproduction of music for popular enjoyment was acquainting itself to everyday life. With timely improvements in the form and function of the Phonograph, the inventor himself did not anticipate distinct ways of using the instrument, such as the use of phonographs for public entertainment. A large number of persons not possessing the instrument themselves, received satisfaction and pleasure from its exhibition by others, which can be termed a ‘delightful product experience’. The impact that the phonograph had on interpersonal relationships and to oneself individually was an interesting one. Edison said, In one sense it knows more than we know ourselves, for it retains the memory of many things which we forget, even though we have said them . It teaches us to be careful of what we say, and I am sure makes men more brief, more business-like, and more straightforward. Advertisements for the devices often pictured family members, young and old together, clustered around their phonograph. The implication was that the phonograph could bridge the generation gap and bring families together in happiness. This led to Edison naming one of his models ‘The Home’. The invention and commercialization of the phonograph revolutionized the music industry by commencing the ever-so-high-paced evolution of industrialization and consumption of sound and music. These aspects of the phonograph, right from its sheer shape and size to the way it was used by people who owned it, to its impact on people and behavior and the influence of advertising were driven by the feedback received by consumers.

UX ≠ UI

Iterating on these responses and with the onset of the technology era, consumption of music went from phonographs, to gramophones, to vinyl records, to turntables, to the radio, to compact cassettes and cassette players, to portable cassette players, to compact disks, to digital music which gained worldwide admiration with the launch of the Apple iPod15, and today we have product systems and services in the music industry, such as the Sweden-based music streaming service, Spotify. Spotify claims to have a 100 million active users today. It recently underwent 15

An electronic device for storing and playing music, designed and manufactured by Apple Inc.

Chapter 2

a minor UI change - the ‘Lyrics’ tab on the desktop app was removed - but the change in the experience of the product is not minor at all.

UX ≠ UI

One wouldn’t think of User Experience Design when they listen to Twist and Shout. One can realize that magic when they know that every version of Twist and Shout is just a search away on music streaming platforms like Spotify. However, without the (passive) application of UX processes that are followed today, neither would John Lennon have sung Twist and Shout, making it one of the greatest songs of all time in the history of western music, nor would digital music streaming services exist today. So, shake it up!

UX â&#x2030; UI

Chapter 3

See What Develops Science and design have been long considered two independent areas of focus from the dawn of human invention which began as a form of experimentation in the early 16th century, although both science and design have pliantly gone hand-in-hand since the beginning of time. From Galileo Galilei’s basic thermometer to his practical telescope (1609), to Isaac Newton’s three laws of motion (1687), to George Stephenson’s first practical steam locomotive (1814), to Christopher Latham Stoles’ modern typewriter and the QWERTY keyboard (1868), to Albert Einstein’s explanation of the photoelectric effect (1905), and more, science has changed the way we live making our lives easier and in today’s world, smarter. Most materials take up more space and expand as they are heated. They do this in such an orderly way that we can use the amount of their expansion to measure a difference in temperature. This is the basic scientific principle that is applied behind the construction and working of a thermometer. A common thermometer uses mercury in a glass tube. An increase in temperature makes the mercury expand and rise in the glass tube. To understand what that means so that the temperature can be perceived, the thermometer has to be calibrated accurately. This also means that the width of the glass tube has to be constant, or directly proportional to the amount of mercury inside the tube to have precise readings. This fundamental principal of expansion of materials when external heat is applied is no rocket science, but the working of a simple thermometer alone proves that it takes homogeneous amalgamation of science and basic design principles to make things work most efficiently. The director of the MIT Media Lab, Joi Ito, made a declaration last year during the Lab’s 30th anniversary celebrations. He said, Connecting science and design is the future of the Media Lab.16 Science, design, art, and engineering, are no longer domains to be explored in isolation, but together, in the hopes of expediting progress and discovery. Independent work is now a thing of the past as we see more industries and people collaborating, thereby creating a culture of interdependence.

UX ≠ UI

Edwin Herbert Land was an American inventor and physicist in the 20th Century, whose inventions actively involved principles of physics and design. He once said

As I review the nature of the creative drive in the inventive

An interdisciplinary research laboratory at the Massachusetts Institute of Technology devoted to projects at the convergence of technology, multimedia, sciences, art and design

Chapter 3

scientists that have been around me, as well as in myself, I find the first event is an urge to make a significant intellectual contribution that can be tangibly embodied in a product or process. This informs one of Edwin Land’s scientific knowledge and creative intellect, which is a skill mastered only by a handful of the best UX designers we have today. Land’s primary work was in the field of physics and optics. Land founded the Polaroid Corporation, Cambridge, Massachusetts, in 1937. Subsequently he developed a widely used, three-dimensional motion-picture process based on polarized light. During World War II, he applied the polarizing principle to various types of military equipment. He began work on an instantaneous developing film after the war, based on an idea he had conceived earlier. In 1947, he demonstrated a camera that produced a finished print in 60 seconds. The concept of instant photography was unknown to the world at that time. This photographic process soon found numerous commercial, military, and scientific applications. Many innovations were made in the following years, including the development of a colour process. These cameras, commonly called Polaroid cameras, were able to produce developed photographs within one minute after the exposure and went on to become some of the most popular cameras to have ever been produced, starting a new culture of photography across the globe, thereby designing for the present and a distant future. The similarities between the most successful UX firms and Edwin Land’s story are many. Land’s way of doing things at Polaroid, besides his insight, vision and eloquence, including how he crafted the products, advertising and its corporate culture which exists even today shows that business is at the heart of design and intellect when they are treated as corresponding entities to bring about big changes. All aforementioned qualities act as prerequisites to being a UX designer who stands out from the crowd.

UX ≠ UI

Land’s ability to see beyond the line and the skill to spot unforeseen opportunity is as prevalent in the success of Polaroid as his ingenuity. As he said to his employees in December 1942,

If you dream of something worth doing and then simply go to work on it and don’t think anything of personalities, or emotional conflicts, or of money, or of family distractions; if you just think

Chapter 3

of, detail by detail, what you have to do next, it is a wonderful dream even if the end is a long way off, for there are about five thousand steps to be taken before we realize it; and start making the first ten, and stay making twenty after, it is amazing how quickly you get through those five thousand steps.

These words justify the feeling of irresistible curiosity one feels if they are a true dreamer at heart, irrespective of what they call themselves, a designer, engineer, thinker, artist et al. The phenomenon Land started in the mid-20th century has evolved tremendously over the years. In 1978, Konica launched the first point-andshoot camera, Sony introduced to the world the first digital electronic still camera in 1981, Fuji launched the first disposable single-use camera in 1986, Sharp launched the worldâ&#x20AC;&#x2122;s first camera phone in 2000 and the first consumer-priced full-frame DSLR cameras were launched by Canon in 2005.17 From being a product which has complex electronic circuits within to develop photographs, photography too, like music, has services and product systems today.

Instagram is a fun and quirky way to share your life with friends through a series of pictures. Snap a photo with your mobile phone, then choose a filter to transform the image into a memory to keep around forever. 18

UX â&#x2030; UI

This self-introduction of Instagram describes how instant photography and sharing have evolved over the years. Right from the logo of Instagram, which has been inspired by a Polaroid camera, to its UI, which displays square-shaped photos taken by its users, Instagram has changed the way people use photography as a medium of communication. The concept behind traditional Polaroid cameras and Instagram overlap, as they function as tools to instantly develop photographs (in two different media). The former evolved as a product since its inception with better features to have better photographs while the latter has evolved as a product-system with a strong influence of UX design principles, impacting people and industries all over the world, bringing in new trends like selfies, amateur travel photography, sharing personal stories from everyday life visually, and food photography, thereby turning every user into an artist. Polaroid Corporation drew inspiration from this and launched the Polaroid Socialmatic Camera, a camera designed like the logo of Instagram, 17 18

DSLR stands for Digital Single Lens Reflex cameras The description of Instagram from its official website

Chapter 3

compatible with a smartphone. This is a classic example of how pop culture inspires traditional product design and service design to deliver interesting user experiences, where UI in this context is both on a smartphone and on paper.

UX â&#x2030; UI

Edwin Herbert Land was never considered a UX Designer. However, what he started, how it evolved and inspired to reflect on one of todayâ&#x20AC;&#x2122;s most successful companies known for its UX, informs us that he was nothing short of a UX designer himself.

UX â&#x2030; UI

Chapter 4

THE HAPPIEST PLACE ON EARTH Design is a highly misinterpreted term. The study of art history goes back a long way, from evidence of human art found from the Stone Age to ancient Mediterranean Art, to the rise of Renaissance, Baroque, Neoclassicalism, Realism, Modern and Contemporary art forms after the decline of the Roman Empire.19 The study of design history, however, begins only from the 15th century, of artifacts that symbolize a cultural, social, economic, political and technological standpoint. This raises questions about how art is different from design and how one can be called an artist or a designer, or, why it is called UX design and not UX art. Art is left for interpretation. It can be perceived differently by different people. It also gives infinite freedom of expression to the artist wherein one is not bound by any rules or definitions over oneâ&#x20AC;&#x2122;s creations. The talent that one is born with or is interested to build upon can be expressed through art. Design cannot be left for interpretation alone. It does not allow for different opinions, as designers strive to communicate specifically through their creations. Consider the classic example to understand the importance of form and function in design, Jacques Carelmanâ&#x20AC;&#x2122;s Coffeepot for Masochists. It is an aesthetically appealing coffeepot with the handle and the spout on the same side. It is beautiful but not usable. Design cannot only be aesthetically pleasing. It always serves a purpose by communicating what it is intended to convey, so that the experience that the design is expected to deliver is administered. Nonetheless, there is only a thin line between art and design and more often than not, the two combine to form a single unit, which is a design commodity. Walter Elias Disney, or simple, Walt Disney, started off as started off as an illustrator but went on to become one of the best entrepreneurs, animators, voice actors and film producers the world has ever seen. The pioneer of cartoon films who followed the fundamental principles of design from the very start, designed for the future, for the people, realizing the magic of immersive experiences in a world where not many immersive experiences were present. He once said,

UX â&#x2030; UI

You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.

Understanding the importance of the user is the most important rule in UX Design. User-Centered Design is the process of designing a tool from the 19

Different periods in the history of Art

Chapter 4

perspective of how it will be understood and used by the end-user. Rather than requiring users to adapt to new interactions to get familiar with a system, it can be designed to support its intended users’ existing beliefs, attitudes, and behaviors. The result of employing UCD to a system design is a product that offers a more efficient, satisfying, and user-friendly experience for the user, which is likely to increase sales and customer loyalty. With the launch of a new design language termed Material Design in 2014, Google took a step further by designing for mobile experiences first over every other platform. Google’s popular services such as Search, Maps, Gmail and Translate were being used by people more on-the-go, thereby convincing Google that it is smarter to design for mobile first. This user centered approach led to a complete redesign of all their services in which they combined a tactile experience with a bold and vibrant aesthetic. It worked wonders.20 Airbnb is one of the pioneers of today’s ‘shared economy’. Through its user experience, Airbnb convinces its users of a sense of belonging all over the world, allowing people to feel at home wherever they go. Users of the service first have an online experience as they interact with Airbnb’s UI to book their place of stay. The offline experience starts when they travel, right from experiencing what they were promised by interacting with people local to the new place, to online payments that happen automatically immediately or during the reservation. The entire experience is designed based on its users not just the traveller but also the host. This is a perfect example of designing with no boundaries in terms of platforms, across cultures, languages and people. 21 Walt Disney most definitely designed for people and more importantly, never stopped experimenting. After the huge success of Mickey Mouse in the late 1920s, he incorporating then-available technological advancements to his films like Snow White and the Seven Dwarfs, Pinocchio and Cinderella. Later in the 1950s, Disney expanded to create a more immersive experience for people by venturing into the world of amusement parks. The first Disneyland opened in July, 1955, in Anaheim, California.

UX ≠ UI

UX designers are at the core of designing immersive experiences today. From live-art installations which are massive in size, to interactive experiences in museums and live shows such as concerts, to marketing campaigns that aim

20 Material Design used bold colours and type which were not very prominent in Google’s previous design language(s) 21 The UI of Airbnb is available in multiple languages to bridge the gap between cultures

Chapter 4

to communicate specific messages to the target audience, the true success of the design lies on the sole experience of the user and the sensory feedback that is received from those experiences. Tokyo-based group, TeamLab, consists of technologists - artists, designers, engineers, musicians, architects, programmers, mathematicians, etc. - to create immersive experiences that are powered by technology. One of their featured works, Flutter of Butterflies Beyond Borders, consists of patterns on the butterflies’ wings which transform as they fly through space. As the work progresses, the butterflies fly seamlessly into the nearby installations, dissolving the concept of the artwork’s frame, and eliminating the boundaries between the works. This process ultimately creates an all-encompassing interactive installation. The pattern of where and how the butterflies move is influenced by the state of the other works in the surrounding space, as well as the behavior of the viewers. The butterflies gather in places where flowers bloom in the other works and if a viewer touches a butterfly, it loses its life. 22 This is a completely immersive art installation with a focus on the user, who is the viewer, thereby guaranteeing a happy user experience.

UX ≠ UI

Contrex, the mineral water brand, had a cheeky campaign to advertise their product, a bottle of mineral water. Exercise bikes with feminine aesthetics were installed in front of a building in France, which encouraged women to use it. The bikes power up neon wires that climb up the wall of the building, where the giant neon outline of a well-toned man appears. He dances to the music that is now being played. He starts to take off his clothes, which encouraged these users to continue using the bikes to see what the giant neon man would do next. In the end, he holds up a strategically placed sign which announces that the users have burnt 2000 calories, as the users proceed to drink Contrex mineral water from bottles that were placed next to the bikes. This campaign not only promoted their product but also conveyed the importance of exercise for women, with an immersive and a delightful user experience with a hint of surprise at every stage during user interactions. Disney’s focus was to create unique experiences that could not be found elsewhere. His constant desire to incrementally improve whatever had been done not by adding clutter but by ensuring better experiences, his ability to take big risks and innovate using real numbers and data to make things better and to maximize profits, and his understanding of the importance of user feedback as he sent family and friends on rides at Disneyland before they were opened to public, all assure that Walt Disney was one of the most successful UX designers of his time. 22

An installation which was exhibition at the V&A, London, in September 2016

UX â&#x2030; UI

Chapter 5

CENTURION Design is everywhere. On the streets in shops, in the crowds on the pavement, with people in those crowds ; in your home right from the ceiling to the floor, from the bedrooms to the kitchen to the bathroom, in everything that adorns your house with or without serving a purpose ; out in the wild on mountains that give way to rivers, in the sea by the shore where marine life meet the land, out there in the universe where the earth keeps the moon close by exerting a centripetal force which defines its orbit. These designs, functioning seamlessly and efficiently to their maximum capacity without any hindrances, can seem effortless to one who is not a part of the system. Traffic lights at the right spot just at the intersection of two roads, doorknobs placed correctly on the door to be able to open and close it, switches indicating whether it is in ON or OFF state by its position. These are all designed for the best user experiences after repeated failure, a lot of tests and iterations. Design often starts with instinct but it takes a great deal of practice to hone several skills to be a good designer. As irony would have it, bad designs are often under the spotlight whereas good design is discussed less often as it is ‘natural’, just the way things are supposed to be, and one must strive to be a good designer to deliver the best user experiences. There is just one method to achieve that - by brute force, which translates to endless practice to become the best, by developing a keen eye to identify what is good or bad with the design regardless of the medium, and to always have other people who are great to work with, who motivate, and give the right honest feedback which can help in making the design better. These design principles are similar to the ethics that drove Sir Donald George Bradman or just simply, Don Bradman, to become the greatest batsman in the history of the game of cricket.

UX ≠ UI

Passion drives creativity. There has been no designer or artist who created great designs without being passionate about it, or because of being told to do so. Don Bradman was passionate about cricket. As a young boy in the early 20th century, it is said that Bradman designed his own coaching by throwing golf balls at brick walls and hitting the ricochet with cricket stumps, which are commonly made out of ash wood. This must have surely helped him develop an eye for different parabolic paths that the ball would take, improving his hand-eye coordination to react to the ball in the most desirable way. A skill with that measure of refinement comes only with unending practice, high levels of self-motivation and dedication. This is perhaps the reason behind the ‘Bodyline’, or the ‘fast leg theory bowling’ , which was a cricketing tactic conceived by the English Cricket Team for their 1932-33 Ashes tour of

Chapter 5

Australia, to counter Don Bradman’s remarkable batting skills on field.23 However, he turned out to be the only Australian batsman to resist, adapt and come on top after being hurled this potentially dangerous bowling tactic. This is a clear case of Bradman applying UX design principles on one’s own performance, based on changed inputs. Not only did he read the pulse of his fans, adapted to it and delivered to their expectations thereby going on to achieve a batting average of 99.94, a record that has not been broken till date, he also captained the Australia national cricket team. On his 90th birthday in 1998, he hosted Shane Warne (Australia) and Sachin Tendulkar (India), who are considered to be one of the greatest bowlers in the game and the second best batsman of all time in test cricket - second only to Sir Don Bradman himself, at his home in Adeleide. These instances prove that he was a team player and even decades after his retirement, he appreciated and kept in touch with the game of cricket off-field, just as he used to when he was out there on the pitch creating history. The best designers are great team players, just as they are as independent designers. The best designers never stop learning, never give up, never stop involving themselves with everything that is design. The best designers go down in history.

Design is not for philosophy—it’s for life

UX ≠ UI

said Issey Miyake, Japan’s most celebrated fashion designer. Unlike many bespoke garments designed by established fashion labels and designers, Issey Miyake designs for the common masses. What sets him apart from many other designers in the fashion industry is his openness to experimenting with non-glamourous materials to bring out innovative results through fabric. The most celebrated example would be his ‘Pleats Please’ Collection from 199324, where he dignified the polyester fabric. The clothes were first cut and sewn together from fabric that was nearly three times larger than the finished item of clothing. It was then sandwiched between sheets of paper and fed into a heat press, where they were pleated. Clothes were very functional, easy to store, wash and maintain, thereby ensuring high usability standards. He saw the needs of the user and adapted to it. Apart from the innovation in Pleats Please, Miyake borrowed the characteristics of the kimono to his designs, for example, allowing only approximate contact between the fabric and the body, thus maintaining a Japanese identity to his collections. More recently, Issey Miyake appointed younger designers to lead his collections.

23 24

Bodyline is a bowling tactic in cricket where the cricket ball was bowled towards the body of the batsman on the line of the leg stump Issey Miyake’s collection inspired by pleats

Chapter 5

He is also one of the co-directors of Japanâ&#x20AC;&#x2122;s first design museum, the 21_21 design sight, which combines all arenas of design, including fashion. Sir Don Bradman and Issey Miyake are individuals from the early and late 20th century respectively, with no obvious overlap in their field of work or contributions. However, we can see that the sense of redesigning oneself to adapt to changing circumstances, to deliver the most efficient and pleasing experiences as a result of hard work and innovation, and most importantly, to enjoy what one does with a creative fervour that can be seen in only those who test and hone their creativity in order to deliver their best, match all qualities one must have to be a successful UX designer today.

UX â&#x2030; UI

Has anyone called Sir Don Bradman or Issey Miyake UX designers? Perhaps not. Do they exhibit innate attributes of a good UX designer? Yes they do.

UX â&#x2030; UI

UX ≠ UI

Yes, it’s everything!

UX â&#x2030; UI

CONCLUSION In a complaint received from a customer by the Pontiac Division of General Motors, it was stated his newly purchased car would not start when his family went to buy vanilla ice cream from their favourite ice-cream parlour. When they bought any other flavour of ice cream, there were no problems with the car. GM then sent an engineer to inspect the situation. After a few days of being in the shoes of the user, he had different kinds data about the ice cream visits - time of day, type of gas used, time taken to drive back, etc. It was noticed that it took lesser time to buy vanilla ice cream compared to other flavours because of the layout of the store. Vanilla being the most popular flavour was in a separate case at the front, making it easy for quick pickup. This key finding helped the engineer realise that there was no time for the vapour lock in the car to cool down when the user came back with vanilla ice cream. The engine was then still too hot for the vapour lock to dissipate! This problem would not have been solved if one did not turn into the user to analyze the ordeal faced by the user close enough to find that the real problem was not being tackled. In this case, the problem was thought to be vanilla ice cream but the real problem was the time taken to buy it. This proves that there could be logical design solutions to problems that may sound absurd at first. In a series of letters written to his 14 month old son John, aboard space shuttle Mir, Dr. Linenger says,

UX â&#x2030; UI

I always liked adventures. I remember exhausting the elementary school library of mystery books by someone I think was named Orton. Trying to figure out the ending before the ending. Anticipating. Observing the situation, and trying to predict the outcome. Reading about people who were in unusual situations, and studying how they were challenged, and how they responded. Anyway, that curiosity characteristic is what got me on this space station. Oh sure, I went to lots of schools, did pretty well in our great United States Navy, and went through all the mechanics of the application and interview process. But the basic trait of insatiable curiosity is what drove me through all of that.

To be a UX designer worth oneâ&#x20AC;&#x2122;s salt, one needs to be intuitive. As natural as it might seem, that intuition comes from honing new skills, unending practice, developing oneâ&#x20AC;&#x2122;s eye to see beyond the obvious, given that there is basic talent, basic intent, knowledge of basic tools and an open mind to not have biased views and to be genuine and loyal to the cause. Just like Dr.Jerry Linenger, the basic trait of insatiable curiosity is what drives me to become a

Conclusion

better UX designer than what I am today. Every breakthrough solution is designed for the future. The Old Man and The Sea, Twist and Shout, Polaroid Cameras, Disneyland and being the best sportsperson in the world are as relevant today as they were many decades ago. Late Prof. N S Ramaswamy, who founded one of the most prestigious management schools in India, Indian Institute of Management Bangalore, believed that there are complex problems in the world which cannot be solved by complex solutions. These complex problems need to be broken down into simple parts, either simultaneously or separately, and the solutions must be stitched together, resulting in the formation of a comprehensive complex solution with appropriate buffer. We have had the Industrial Revolution which had great impact on the design industry. We are in the middle of a technological revolution which influence us every day, making the world more connected than ever before, making complex tasks simple. I believe that, as people understand the importance of UX design in everything they do and with impending crises like global water shortage and climate change, a Design Revolution is not too far away. If human beings were called human doings, all UX could be easily done. Designers need to be human doings. Following design frameworks to create expected solutions, or even being intuitive, is of far lesser value than doing right, doing more right and applying intuition. That said, if you, dear reader, meet anybody who is a â&#x20AC;&#x153;UI/UXâ&#x20AC;? designer, who believes that the essence of user experience all lie on a vector graphic that was designed by them to show up on a mobile interface, talk to them about the greatness of Ernest Hemingway, John Lennon, Edwin Land, Walt Disney, Don Bradman, or anyone else you believe is a true UX Designer at heart.

UX â&#x2030; UI

Perhaps you too are.

UX â&#x2030; UI

BIBLIOGRAPHY All artwork done by Sreelakshmi V Menon (www.menorama.in) Books Jerald, J. (2015) The VR book: Human-centered design for virtual reality. United States: Morgan & Claypool Publishers. Schneider, J., Andrews, K. and Lawrence, A. (2012) This is service design thinking: Basics, tools, cases. Edited by Marc Stickdorn. Amsterdam, The Netherlands: BIS Publishers. Hemingway, E. (1994) The old man and the sea. London: Arrow Books. Baker, C. (1969) Ernest Hemingway Pt. 1: A life story. London: HarperCollins Distribution Services. Krug, S. (2005) Don’t make me think!: A common sense approach to web usability. 2nd edn. Berkeley, CA: New Riders Publishing. Kleon, A. (2012) Steal like an artist: 10 things nobody told you about being creative. New York: Workman Publishing Company. Lawrence, R.G. and Coca, J. (2004) The Wabi-sabi house: The Japanese art of imperfect beauty. New York: Clarkson Potter Publishers. Norman, D.A. (2003) Emotional design: Why we love (or hate) everyday things. 3rd edn. New York: Basic Books. Norman, D.A. (2013) The design of everyday things: Revised and expanded edition. New York: Basic Books. Pollard, J. (1990) The pictorial history of Australian cricket. 3rd edn. Sydney: Hodder & Stoughton. Marks, V. and Wisden (1988) The Wisden illustrated history of cricket. Edited by Bill Frindall. Australia: HarperCollins Publishers (Australia) Pty.

UX ≠ UI

Frith, S. (1983) Sound effects: Youth, leisure and the politics of rock ‘n’ roll. London: Constable. Spitz, B. (2006) The Beatles: The biography. New York: Back Bay Books/ Little, Brown.

Bibliography

Lennon, J., Conducted, D.S. and Sheff, D. (2000) All we are saying: The last major interview with John Lennon and Yoko Ono. New York: St. Martin’s Griffin. Dennis and Mcnally, D. (2014) On highway 61: Music, race, and the evolution of cultural freedom. Ipswich, MA, United States: Counterpoint. Kanai, M., Morrison, J., Fukasawa, N. and Hara, K. (2010) Muji = Mujirushi Ryōhin. New York: Rizzoli International Publications. Honour, H. and Fleming, J.V. (2009) A world history of art. 7th edn. London: Laurence King Publishing. Center, T.B.G., McCormick, H.J. and Alderman, J.R.P. (2013) History of design: Decorative arts and material culture, 1400-2000. Edited by Pat Kirkham and Susan Weber. New Haven, CT: Yale University Press. Baylis, T. (2009) 1001 inventions that changed the world. Edited by Jack Challoner. Minneapolis, MN, United States: Barron’s Educational Series Inc.,U.S. Fierstein, R.K. (2015) A triumph of genius: Edwin Land, Polaroid, and the Kodak patent war. United States: Tantor Media. Herausgeber, A.H. (2011) From Polaroid to impossible: Masterpieces of instant photography: The WestLicht collection. Edited by Achim Heine, Rebekka Reuter, and Ulrike Willingmann. Germany: Hatje Cantz Verlag. Garrett, J.J. (2002) The elements of user experience: User-centered design for the web. 4th edn. Berkeley, CA: American Institute of Graphic Arts. Buxton, B., Greenberg, S., Carpendale, S. and Marquardt, N. (2011) Sketching user experiences: The workbook. San Francisco, CA: Morgan Kaufmann Publishers In.

UX ≠ UI

English, B. (2011) Japanese fashion designers: The work and influence of Issey Miyake, Yohji Yamamoto and Rei Kawakubo. New York: Berg Publishers.

Gabler, N., Leoncavello, L. and Leoncavallo, L. (2006) Walt Disney: The triumph of the American imagination. New York: Random House Audio Publishing Group.

Bibliography

Quesenbery, W. and Szuc, D. (2011) Global UX: Design and research in a connected world. Waltham, MA: Morgan Kaufmann Publishers In. Websites Goltz, S. (2014) A closer look at Personas: What they are and how they work (part 1) – smashing magazine. Available at: https://www.smashingmagazine. com/2014/08/a-closer-look-at-personas-part-1/ (Accessed: 20 August 2016). NASA-4 Jerry Linenger (1997) Available at: http://history.nasa.gov/SP-4225/ nasa4/nasa4.htm (Accessed: 10 June 2016). Association, T. (no date) The Iterative design process. Available at: https:// www.data.org.uk/for-education/curriculum/the-iterative-design-process/ (Accessed: 03 September 2016). Stinson, L. (2016) ReflexLOLogy: Inside the groan-inducing world of pun competitions. Available at: https://www.wired.com/2016/03/mit-media-labs-journal-design-science-radical-new-kind-publication/ (Accessed: 05 September 2016). Pace, E. (1991) Edwin H. Land is dead at 81; inventor of Polaroid camera. Available at: http://www.nytimes.com/1991/03/02/obituaries/edwin-h-land-isdead-at-81-inventor-of-polaroid-camera.html?pagewanted=all (Accessed: 10 September 2016). Mohammadruhulkader and Kader, R. (2014) Timeless lessons from Edwin Land on entrepreneurship and invention. Available at: http://futurestartup. com/2014/03/16/lessons-from-edwin-land/ (Accessed: 11 September 2016). Davlin, A. (2011) History of cameras: Illustrated Timeline. Available at: http:// photodoto.com/camera-history-timeline/ (Accessed: 11 September 2016). FAQ • Instagram (2016) Available at: https://www.instagram.com/about/faq/ (Accessed: 11 September 2016).

UX ≠ UI

Washington, S.W. - and 20201, D.C. (2015) User-centered design basics. Available at: https://www.usability.gov/what-and-why/user-centered-design. html (Accessed: 11 September 2016).

Bibliography

Inc, t. (2016) Flutter of butterflies beyond borders | teamLab . Available at: https://www.team-lab.net/works/butterflies/ (Accessed: 13 September 2016). FT.com (2016) Available at: https://www.ft.com/content/10fe18d4-f8c9-11e0ad8f-00144feab49a (Accessed: 13 September 2016). joulee and Zhuo, J. (2016) Unintuitive lessons on being a designer – the year of the looking glass. Available at: https://medium.com/the-year-of-the-lookingglass/8-unintuitive-lessons-on-being-a-designer-ca7e97a572ee#.l4vw8mayq (Accessed: 17 September 2016). Barrett, C. (2014) When the little master met the don: Bradman’s son delighted at Sachin Tendulkar honour. Available at: http://www.smh.com.au/sport/ cricket/when-the-little-master-met-the-don-bradmans-son-delighted-at-sachintendulkar-honour-20141028-11d541.html (Accessed: 17 September 2016). History of fashion designer Issey Miyake (2005) Available at: http://marybawa. com/historyofashion/miyake.html (Accessed: 18 September 2016). (No Date) Available at: https://www.linkedin.com/pulse/201407070638505270504-vanilla-ice-cream-that-puzzled-general-motors (Accessed: 21 September 2016). Schatz, B. (2011) Life lessons from the old man and the sea. Available at: http://www.artofmanliness.com/2011/07/12/lessons-in-manliness-from-the-oldman-and-the-sea/ (Accessed: 24 September 2016). Beachy, W. (2008) 10 tips to avoid designer’s block. - go Media™ · creativity at work! Available at: http://gomedia.com/zine/insights/graphic-design/10-tipsavoid-designers-block/ (Accessed: 24 September 2016). Making music modern: Design for ear and eye (1943) Available at: http://www. moma.org/calendar/exhibitions/1473 (Accessed: 24 September 2016).

UX ≠ UI

History of the cylinder phonograph - inventing entertainment: The early motion pictures and sound recordings of the Edison companies (no date) Available at: https://www.loc.gov/collections/edison-company-motion-pictures-and-sound-recordings/articles-and-essays/history-of-edison-sound-recordings/history-of-the-cylinder-phonograph/ (Accessed: 25 September 2016).

Bibliography

Smith, C. (2016) 50 interesting Spotify statistics. Available at: http://expandedramblings.com/index.php/spotify-statistics/ (Accessed: 25 September 2016). Lanoue, S. (2015) What is UX design? 15 user experience experts weigh in | UserTesting Blog. Available at: https://www.usertesting.com/blog/2015/09/16/ what-is-ux-design-15-user-experience-experts-weigh-in/ (Accessed: 10 June 2016). Oswald, J. (2016) What is business design – and why is it the most important design job of the future? - features. Available at: http://www.digitalartsonline. co.uk/features/creative-business/what-is-business-design/ (Accessed: 26 September 2016). Washington, S.W. - and 20201, D.C. (2015) User-centered design basics. Available at: https://www.usability.gov/what-and-why/user-centered-design. html (Accessed: 26 September 2016). Introduction to user-centered design (2002) Available at: http://www.usabilityfirst.com/about-usability/introduction-to-user-centered-design/ (Accessed: 26 September 2016). map, S. (2016) User-centred design (UCD) - 6 methods. Available at: http:// www.webcredible.com/blog/user-centered-design-ucd-6-methods/ (Accessed: 26 September 2016). Bercovici, J. (2014) Airbnb, Snapgoods and 12 more pioneers of the ’share economy’ - pg.1 Forbes. Available at: http://www.forbes.com/pictures/eeji45emgkh/airbnb-snapgoods-and-12-more-pioneers-of-the-share-economy/#466d2fb17226 (Accessed: 26 September 2016). Daly, E. and Seeper (2015) Why people love immersive, interactive experiences – and how you can create amazing ones - features. Available at: http:// www.digitalartsonline.co.uk/features/interactive-design/why-people-love-immersive-interactive-experiences-how-you-can-create-amazing-ones/ (Accessed: 26 September 2016).

UX ≠ UI

(No Date) Available at: http://www.espncricinfo.com/ci/content/story/239757. html (Accessed: 26 September 2016). Rutherford, Z. (2015) 6 examples of awful UX design. Available at: http:// thenextweb.com/dd/2015/09/29/6-examples-of-awful-ux-design/#gref (Accessed: 26 September 2016).

Bibliography

Videos TEDx Talks (2014) Changing perspective off the planet: Jerry Linenger at TEDxUNC. Available at: https://www.youtube.com/watch?v=-cIh_rOOgnA (Accessed: 10 June 2016). TEDx Talks (2011) TEDxTraverse city- Jerry Linenger-Changing your perspective. Available at: https://www.youtube.com/watch?v=7OoJ_756rr4 (Accessed: 10 June 2016). Norman, D. (2009) 3 ways good design makes you happy. Available at: https:// www.ted.com/talks/don_norman_on_design_and_emotion?language=en (Accessed: 29 August 2016). TEDx Talks (2011) TEDxHogeschoolUtrecht - Don Norman - the impact of persuasion. Available at: https://www.youtube.com/watch?v=Dk37LhxjPEY (Accessed: 29 August 2016). NNgroup (2016) Don Norman: The term ‘UX’. Available at: https://www.youtube.com/watch?v=9BdtGjoIN4E (Accessed: 29 August 2016) *(Don Norman’s quote after the Introduction on Page 13) Gilles Pilon (2008) Twist and shout - top notes 1961 (rare original version). Available at: https://www.youtube.com/watch?v=LsDpc-8iR8g (Accessed: 23 September 2016). mike8903 (2011) Isley brothers - twist and shout. Available at: https://www. youtube.com/watch?v=cTaqn8_gMR0 (Accessed: 23 September 2016). Beatroom7D (2014) The Beatles - twist & shout - 1964. Available at: https:// www.youtube.com/watch?v=YgVWot_xrxE (Accessed: 23 September 2016). Starck, P. (2007) Design and destiny. Available at: https://www.ted.com/talks/ philippe_starck_thinks_deep_on_design?language=en (Accessed: 23 September 2016).

UX ≠ UI

Special Acknowledgments

Dr Greg Votolato (Royal College of Art, London) Dr Jonathan Antonio Edelman (Royal College of Art, London) V Vinayachandra Menon, Suchithra V Menon, Harishankar V Menon

UX â&#x2030; UI