Category: Weekly Discussion

User Interface Metaphor Discussion Presentation

User Interface Metaphor Discussion Presentation
Teresa Haun, Yang Tan, Meghana Battini

[Please note you can see the presentation attached as images of each slide. The below are some written out explanations, similar to what we talked about during our presentation. Due to the image # limitations per post, there will be an additional addendum post to cover remaining slides]

What is an affordance?

“An affordance is a property of an object, or a feature of the immediate environment, that indicates how to interface with that object or feature.”
Metaphors help us understand affordances. We associate characteristics or emotions from one thing and apply them to another.

Affordance example 1: Computer mouse (Teresa Haun)

A computer mouse allows you to click and select different items on a computer. A metaphor for this is driving a car that gets you around the world quickly, since a mouse is like a little transport vehicle to get you around your computer quickly. This is a universally understood example that works across cultures as people all over the world use the computer mouse and drive automobiles. This metaphor is understood through teaching, since it is not very intuitive to figure out what to do with a computer mouse or how to drive a car. You are taught both usually by a parent or mentor and there is even driving school to make sure everyone understands the process similarly.

Affordance example 2: Apple Home Button (Yang Tan)

The apple home button is the sole tactile button. Metaphors for this are:
– “big red button”, with associations of power;
– rube goldberg machines, with associations of one touch that triggers a delightful cascade of events which you do not have to do yourself, whimsy, fun;
– a nest, which is perhaps a more personal metaphor, with associations of warmth, familiarity, comfort. The home button’s round design evokes this, as well as its function of bringing you “home”.

The metaphor of the big red button for example is more universally understood in post-industrial societies. This metaphor is learned through experience (cause and effect is pretty directly observable without being taught).

Affordance example 3: Mug Handle (Meghana Battini)

Whenever we hold a mug using its handle, we build a connection towards it and feel like it’s ‘ ours!’ just like holding onto something or someone really close to you. Keeping this in mind, the metaphors used for this object are – Affection or holding onto something / someone really close to you.

HOW and WHY do we associate that action and feeling towards it?

We can see that the shape of the object implying the purpose and function of the affordance. In a way, the shape itself can be used as an interface to use the object. We have been trained to do that action whenever we see that shape and we associate that in many other situations like holding a scissors/ a ring/ a person etc. We can see how these metaphors are being used in actually designing an object

It is Universally understood and works across cultures. We have been trained to do that action right from our childhood and now we do it by instinct. No matter how you hold it, the basic initial actions of your hand is the same and that is how you connect with it.

Bad Design example 1: Door that is too close to toilet (Teresa Haun)

An example of bad design is a bathroom that is far too small and the door is so close that your legs hit it while sitting on the toilet or you just can’t get out easily. A metaphor for this is public transportation systems where there are far too many people jammed together and so you don’t have the space you need. Even with more experience using a tiny bathroom or commuting on a packed train, this would not improve the bad design since it is a functional problem driven by too little space accounted for. This is a universally understood example but it is appreciated more by certain cultures that value more space and have the opportunity to give each person more space. This metaphor can really only be understood and appreciated by experiencing the inconvenience of small spaces for the sake of efficiency.

Bad Design example 2: Rally Race Computer (Yang Tan)

The Rally Race Computer has a lot of knobs, buttons and requires a lengthy key combination to execute a simple task. Metaphors for this race computer include: traditional programming thermostat, airplane cockpit, a robotics technician (evokes technology and “expertise required”). Some of these metaphors contain some positive associations (airplane cockpit could connote excitement, speed, technological expertise) but a lot of them have negative associations and emotions such as frustration, overly-complex, confusing.

Experience could improve this, such as by learning key combinations, but only up to limit. After that a functional matter because the core function is impeded: you could forget how to access certain core functionality because of the complexity and diminish your experience.

These metaphors are perhaps more personal. Metaphors for this object are somewhat individual – e.g. generational, expertise-based.

These metaphors are taught, based on your exposure to electronics, tech experience, and/or media concerning race car cockpits, airplane cockpits etc.

Bad Design example 3: An Umbrella (Meghana Battini)

I personally had bad experiences with this object and because of this I would split the metaphoric interpretations into 2 parts –
1. When using it for the first time: Protection/ Blessing.
· An umbrella can be associated with a roof, which protects us from rain and other environmental factors.
· It can also be associated with an Indian way of blessing, which usually implies support.
2. After bad experiences with the object: Weapon/ Pushing people away from you.
Due to some aspects of the object, which makes it a bad design, unintentionally we tend to use it to push people away from you or used as a weapon to protect yourself.
· It is too big for one, too small for two, has sharp ends at its circumference.
· Because of its size and material, it is really hard to use this object in the crowded areas – We usually tend to lift our umbrella due to lack of space.

It is universally understood and works across cultures. The metaphoric associations wouldn’t improve the experience of it as it’s purely function based and is personally linked with every individual using it.

Aesthetic Process Interviews

A Junior Designer in B2B SaaS

One of our interviews was with a user interface/user experience designer at ClickTime, a business-to-business SaaS company specializing in time tracking and budgeting products. She studied industrial design as an undergraduate and has been working professionally for the last year. For her, design is “the discipline of producing strategies and solutions for a goal or purpose.”

An important part of the design discipline is user research. She explains that “understanding the users and contexts is essential when I begin skinning a product or interface.” As part of the user needs research process, stakeholder interviews are conducted and personas are created. Some internal factors to discover and incorporate are the product’s positioning and communication goals. It is also important to consult, update, or create the company’s style and brand guide. She says that she also does a large amount of her research on user research and design trends online, where “the research resources are endless and there is so much information out there.” However, It is often “a matter of sorting out fact from opinion” when it comes to online research.

She then produces multiple design compositions at each stage of fidelity for peer and/or client review. Her work involves cross-functional collaboration, so team buy-in is important and her “creative decision-making is calibrated in order to work successfully toward a common goal, purpose, or aesthetic.” It can sometimes be a challenge to find the right balance of information to display on an interface. It is often that “having an uncluttered and easy-to-use interface helps define a successful user experience.”

When she needs to introduce users to a new experience, she builds associations by building context a little at a time. This can mean starting with something familiar, if possible, so that the new experience isn’t as jarring. She finds creative inspiration in trying new things and meeting new people, and she predicts that the future is in VR: “Interactions will be a full-body experience.”

Virtual Reality Designer – Google

I got the chance to speak with a virtual reality designer at a conference in Los Angeles. He has been doing this work professionally for only 6 months, but the field is still relatively new. He received his MFA in motion graphics with an emphasis on three dimensional technologies.

When I asked him what his concept of VR design is, he replied that the goal is to create an immersive and memorable experience without making the user feel sick. Unfortunately, making someone feel vertigo or motion sickness is common in the virtual reality field. In order to not make someone’s first experience in this medium and uncomfortable one, constraining the design guidelines to optimize comfort is a prevailing emphasis on his team. Taking cues from human factors and ergonomics creates three dimensional “zones” to place user interface elements that do not strain the user’s neck or eyes.

Another interesting concept was the emphasis on acknowledging the viewers agency in the VR application. Because virtual reality is a very intimate medium (the user is a part of the experience, not simply viewing it) it is important to tell the user how he or she fits within this experience. Part of this involves identifying what they can do. Can they move their arms and interact with elements, are they a ghost in a scene, or are they simply being taken on a ride?

Furthermore, there is a lot of experimenting taking place to see how to best guide a user’s attention. Since we cannot confirm where he or she is looking, how can we use motion, lights, and sound to coax someone to look a certain direction? Inspiration from immersive theatre, haunted houses, and even restaurants provide great examples on how to establish ambience within a scene that does not force a certain perspective on the user.

Overall, it seemed like a lot of the design process involved trying new things, and seeing if they work. It’s hard to know how something will be perceived once in virtual reality, so rapid prototyping then experiencing it in VR is paramount. While some design choices are obviously not going to be ideal in three dimensions, two dimensional design principles should be challenged often. Although there is skepticism over how this new medium will take off, it’s undeniable that it is an exciting space for design.

Principal Product Designer at Salesforce
Mark is a well-liked and highly regarded product designer at Salesforce. He is a key design lead for a young and growing product in the Salesforce ecosystem, Wave Analytics.

His design philosophy sees experience more as a feeling. It might fill a need, but instead of being strictly utilitarian about the purpose behind it, there also needs to be some sort of emotional resonance. The emotion can be something as simple as the sense accomplishment, ie: I did this thing and I can move on to the next thing. Data can be applied design, but the most important thing to mark is the feeling that his designs illicit.

He also spent some time about design being both a team activity as well as a solo pursuit and how one can go back and forth and how it’s healthy to keep other people in the loop, but it is also good to put your head down to get some concentrated work done. This sense of back and forth, or give and take in design is present through much of the interview. He talked about how a design is never really fully complete and how you can keep iterating on the work to try to push it further and better every day. Along the same lines, we talked about how some days may be very productive and everything will be snapping together creativity wise, but other days will be a sluggish push to produce anything. This ebb and flow of activity, creativity, sociability, and production seem to be a common trait.

When asked about what he would do if he couldn’t design, he paused because I don’t think he ever thought about his life without design, but he quickly knew how he would spend his time. It was related to how he was always curious with how things work. As a child, one of his memories is about taking apart a remote control car and understanding how each piece fit together. And he thought about how each piece was designed for a purpose both alone and how to fit into a system. From remote control cars, he now cares about bicycles enough to be happy fixing them if he wasn’t designing. Other things in his life related to design are his passion for music, animation, and painting. I think each of these relate back to his connection to emotion in design, as well as representing different forms that he can take part in constructing.

Designer Interview
Designer: Sarah
Firm: Rapt Studio, San Francisco

About Sarah:

Sarah is now a designer in a bay area based design studio. She holds a Master’s degree in Architecture from MIT. Prior to that, she studied film and media studies in Brown University. Sarah knew that she would become an architect when she was in high school. She was good at science and arts back then. After she found out that she could do her master’s degree without studying Architecture as her undergraduate major, she chose to do something else first. Sarah deems design as “problem solving with elegant solutions”. She thinks all her hobbies and interests are the sources keeping her energetic about design.

Process and Decision Making

In regards to the design process, Sarah always starts with an original concept. The concept may be from a variety of things that inspire her. Then, she would try to apply the concept almost everywhere to the design. For instance, she was asked to design a bunch of conference rooms for a tech company. The major concept for the whole project was “family”. Then, when it comes to the conference rooms, the concept was transferred to “living room”. Throughout the design iterations, she kept tracking all the ideas and decisions upon this concept and finally got to the final results. As the project moving to the construction phase, cost became a major constraint to the design. What Sarah did was trying to specify all the details and it worked out. She would be very satisfied to see people using the space really like it. Though as an architect, she is also exposed to a lot of other design field due to the studio she works for. She really enjoys the brainstorming process in her workplace, where she could have her colleague designers working at the same time to come up with ideas on a huge whiteboard.

Influences:

Her design process has changed as she becomes more confident and more experienced about the work. She also thinks as her ego turned down a bit, she becomes more capable of listening to others. To Sarah, thinking about people who will experience the space she designs mostly influences her work. Also, she also thinks having fun during the process will lead her to better work. Sarah has open-mind to almost everything, and she believes both her personal interests and work experience are important factors in her creative decision making process.

Perspectives of the design field:

To Sarah, aesthetics = simplicity, also it’s about making beautiful work. As an architect, Sarah appreciates details a lot. She values a lot on designer’s consciousness about any kind of details, on the drawings, at the construction site and so on. She thinks details reveal designer’s ability of control. In the future, Sarah sees the outlook of more hybrid practices in the design field, where people work across disciplines to create better work. As for most annoying thing about being a designer for Sarah, it’s the sexism in the construction field. There is such bias that the workers think architectural designers only care about design instead of building method and science. She’s working hard and making every effort she could as a way to advocate her attitude on that.

Beauty Measurements

Universal Beauty: A newborn baby, A sunny day, David by Michelangelo
Individual Beauty: Toile (the garment), UC Berkeley mug, Shape of a Square
Cultural Beauty: The genre of still life (our example, Still life with lemons, oranges, and a rose by Francisco de Zurbaran, Mayan artificial forehead flattening, Earthen Lamp

With the reading on Universals and its discussions regarding the difficulty of identifying what is truly “universal” or if the concept of “universal” even exists fresh in our minds, we decided to work backwards and start choosing examples of individual beauty before proceeding to the cultural and universal. For the examples of individual beauty, we worked on our personal experience, more specifically, with objects that we found beautiful in some way that we knew, perhaps from personal experience, were not universally considered beautiful. A prime example for this would be toile1, a garment that one of the group members finds rather beautiful, but is occasionally considered kitschy or simply ugly. In addition, other members of the group added examples such as the shape of a “square” (because it is a symmetric shape that was very easy to work with when it came to mathematics) and a UC Berkeley mug (because of its form, colors, and functional aspects). Working our way up from the individual, we next decided to take on the idea of cultural beauty. Just as it was for individual beauty, our personal experience was helpful for forming ideas of what could count as cultural beauty; however, for this group, we attempted to demonstrate a broader, cultural appeal for why we found this object beautiful or explain why this beauty was particular to a certain cultural group. The genre of still life was chosen because, as one of us noted, it required an appreciation and a process of learning how to look at it in order to comprehend why it could be considered beautiful. Although there are numerous examples of different cultural norms of beauty, we chose the Mayan artificial forehead flattening (a process through which infants wore an instrument on their heads to flatten the cranium, thus producing a more desirable look) since it manifests an idea of beauty that most cultures would not understand or recognize as beautiful. Finally, an earthen lamp was selected because of their use as oil lamps throughout India for a variety of purposes, ranging from the lighting at areas where there is no electricity, or by priests during worshipping deities and giving blessings, or in every hindu home during the festival of lights, Diwali2. Returning to the concept of universal beauty after exploring these other two classifications, we first tried to specify why we would possibly mean by this term. Though, for obvious reasons, we do not purport to have found the definition for “universal beauty,” the heuristic we used was that each object contained some quality that would foster some positive, affective response in any possible, sentient human or human-like being. For example, we chose a newborn baby since it represents a new life and the ability of organisms to create life; a recognition that appears concomitant with the visual appreciation of this object. Similarly, a sunny day was selected since it represents life and warmth, thus evoking a positive response in the subject that experiences this object. Finally, though we had our conflicts with putting an example that is so representative of a specific, cultural tradition of art, we chose David by Michelangelo as an example of universal beauty for its faithful representation of the human, male form.

Though our research was done drawing upon our personal experience, we attempted with each example to interrogate our own biases in considering why (or why not) we found this object beautiful, and then considering how others would react to them and if they would consider them beautiful. While we cannot account for every possible being when determining cultural or universal beauty, we made an effort to include the reaction of any plausible group that might interact with this object, including groups whose existence we may not be familiar with currently. This consideration of other possible groups when defining “beauty” was also productive in helping us think about how we could make a user interface beautiful, especially when that user interface is intended to be interacted with by a diverse group of users; specifically, it reminded us to remain cognizant of our personal and cultural biases with regards to how we define “beauty.” Additionally, the exercise lends an interesting perspective towards thinking about objects and their associations. While most of the objects we chose were beautiful because of aesthetics and emotional associations, many of them were functionally great as well. With these ideas in mind, when turning our focus towards a possible design problem, this exercise in interrogating the (various) meaning(s) of “beauty” obliges us to examine every particular detail of a design and consider its cultural and (possibly) universal connotations when viewed by a user. Although we cannot become completely free of our individual and cultural concepts of “beauty,” we must display empathy towards other concepts of beauty when working on a design meant to be seen by others. By striving to make our designs an expression of all three of these concepts of “beauty,” we can hopefully arrive at the ideal combination of personal style and universal appeal.