Informatics 282 | Fall 2017 | UCI MHCID | Jesse Colin Jackson
The video file is linked in the PDF, but share additional link.
Note: The visual motif of a vending machine is Snap-chat vending machines.
Part2: Options-
1) Vending machine for random tickets using CrazyTalk Animator tool
Our journey to delicious food often begins at the Mariners campus.
When picking up my kid,
Kid: Mom, I’m hungry. What did you bring today?
Me: Sorry, I forgot to bring some food. Let’s go to the mart.
” Is there any candy made of broccoli? “
I would like to give you only healthy food.
My journey began at the entrance of Taekwondo academy. My son finished his taekwondo lesson, and we proceeded to follow the map through surrounding the academy. He called it treasure map. As instructed, we walked into buildings and stores; we have moved across through the mall, all the way to the other side. Although we have visited this mall many times before, we had never been to the outer area.
The area around Taekwondo academy was filled with a delicious smell. My son who had just finished exercising moved to the left in front of the bakery. The bakery was full of the children in their taekwondo clothes. There were shops selling decorations and the sound of the song playing in the direction we were instructions to move in.
While moving according to the instructions, it seemed that the sense of smell and hearing reacted faster than the sense of sight. Whenever I passed some spaces, I thought I wanted to eat something or to buy something for Christmas. It was an opportunity to think about the natural boundaries of the area.
Version 1.0: Combined five forces into one map
Mariners campus is a space for a variety of ages ranging from baby to seniors. The campus has an overall slope, and many paths have stairs. I have often seen strollers and wheelchair users coming back in front of the stairs. It can be a difficult route to use depending on who uses even the same space. I wanted to express such a force on the map, and I thought that the 3D was suitable for representing the slope; I chose the direction on the map as a good way to express the slope. Also, consistency of metaphor was maintained according to the same component; uniformity was expressed in a color of each component.
Version 0.9: Feedbacks reflected
Click to High Resolution Image
Left – Modified map; Right – Original map
#1 “Base map” changes
– Distinguishing between a parking lot and building is difficult.
=> Added detail elements at the buildings as cartoon style, and changed the parking lot to the patterns so that it can be further distinguished from the buildings. Also, stairs and lawn elements were added.
– The representation of the roads surrounding the campus is unclear
=> Added a missing route.
#2 “Accessibility” changes
– The meaning of the zones on the map is unclear.
– Mapping buildings and parking lots of color provide too strong recommendations for users. It feels like people should park in that area.
=> To express the nearest parking lot from each building, it kept several colors of grouped parking lots; added entry routes for the road to the campus. it allowed determining from which roads an good way to enter the campus and which parking lot to use.
#3 “Purpose of the buildings” changes
By expressing the characteristics of each building in a cartoon style, the identification of each building was enhanced. Also, color dots were used to indicate the grouping of the purpose of the building; which lowered the complexity by removing text on the map.
Version 0.8: Five forces on the map
Observation: the five forces of Mariners campus
I recorded the spatial information of the three-step gradual scale around my house and added the interact information of people in the morning.
1. The House – A space where my family can share
2. The Apartment Complex – A space where neighborhoods in the same complex can share or use, House + House
3. The Village – A space where residents live in the same area, Complex + Complex
The area that I chose for Project 2 is the Mariners Church campus. I have visited at least twice a day every day because my child attends preschool there, and I often have stayed for 2-3 hours.
The reasons why I chose this area are because it is used by a variety of ages-from children to elderly people-and for a variety of activities. I think that it reflects a small society, and it is interesting to me.
The photo below is a map in front of a building. But, it seems difficult to understand the map. Attempts have been made to increase the identities of buildings by marking their shapes on the map, but they do not seem to have any effect. I remember helping a lot of people who were wandering between buildings.
Five forces of this space are as follows:
1.Human activities
Various age groups, from children to adults, use them at different times for various activities such as for religious activities, child and adult learning, exercise and play.
2. Purpose of the buildings
Depending on the purpose of each building, the interior of the building is composed of various forms. For example, a student building has a big concert hall, a gym, and activities room.
3. Accessibility
The parking lot surrounds the building. People can access every entrance of the building. It is efficient to use the nearest parking lot entrance from the place I visit, in particular, when I visit with a child or a senior.
4. Flexibility in space
This space is very different from weekday to weekend. On weekdays, there are mostly children who attend pre-school, adults who exercise and learn adults with meetings. On the other hand, on weekends, local markets are held on Saturday mornings, and there are crowded with church activities on Sunday.
5. Safety factors
Since children and older adults use this spaces together, I think elements such as cars, stairs, or railings should be displayed well. Also, since the community center is under construction now, it would be necessary to display that information.
A purpose of this map is to inform a customer an entrance of parking lot when using an exhibit in a building.
A 1F and 3F are an exhibit hall, and B2, B3, and B4 are a parking lot.
To convey information, it seems five strategies use as below:
Three-Dimensional Projection: Since parking lots and exhibition halls are made up of different layers, it is more efficient to convey information in 3D than to provide it in 2D. Furthermore, it seems a 3D representation is adequate to show the vertical elevator connection between layers: the parking lot and the exhibition hall.
Proximity (Gestalt): Designed to perceive customers to efficiently distinguish between elements on the same floor and elements on the other floor.
Good Continuation (Gestalt): Designed to recognize vertically connected line-elevators as a group, even though they are displayed on each floor.
Color: Emphasized each element which has the same attribute using different colors.
Consistency: Used the same font style-size and color for elements having the same attributes: parking lot is marked with A-K, and the exhibition hall is marked with A-E
The space in the picture below is the place where our family spends the morning and evening together. Galen Cranz wrote in his book that painters often use chairs as props to explain a person or to appear what aspect of the person ‘s life they have. Our family’s chairs seem to indicate the personality of our family.
One year ago, my family moved Irvine, and we decided to buy new chairs. I wanted to buy the same designed chairs along with the big table, but my husband wanted to buy a different chair as each person chooses. So the chairs we picked are the photographic as below.
An office chair with mesh material
A bench-type chair for 2 or more people
A high chair for small children
The office chair is the husband’s pick, and he is a person who pursues practical things. He is a software and hardware engineer, every early morning I can see him who is sitting on this chair. He immerses in books and programs in his chair. It’s like his independent office.
The bench-type chair I chose is useful when my friends or my son’s friends come to my house. When I saw to sit three kid that chair, it made me smile.
The high chair for my son consisted of a guard back and forth, as seen.
When I look at the chair in the photo on the left, I always miss my dad and make me calling to him. My dad bought a chair when I was pregnant. My dad said to me, as all dads do. “Do not be afraid of what you do from anywhere; I am behind you all the time.” Nowadays, my son usually sits and reads a book.
The chair on the right is the chair at the entrance to my favorite dining room, which is a chair that sits down when I wait for my turn. If I sit in the chair, I am always happy because I am looking forward to the delicious food.
About my remote controls in my house
An object I love: Amazon Dash Wand
One of my favorite things is Amazon Dash Wand which is an online-to-offline(O2O) remote control that allows me to order essentials through barcode scanning or voice recognition easily. The reasons I like are intuitive and comfortable design, and the well-analyzed user’s main consumption habituation and patterns; People tend to reorder for the main items of the same brand repeatedly.
The way to use it is straightforward; I just say or scan by pressing the physical button. The previous Dash mapped two functions-the barcodes and voice recognition- to each physical button, but Dash Wand mapped two functions to one button. Instead, logical constraints and visual feedback were enhanced. First, the enhancement of the logical constraints is based on the user behavior pattern that Dash Wand’s slope is different when scanning barcodes and when using voice. For example, if the barcode reader is facing up, the barcode function is not performed. If the barcode reader is tilted over a particular angle, the barcode function and its visual feedback will work. Feedback also provides the same visual affordance and feedback as the Amazon Eco to give a seamless user experience, providing a connected experience. Handling of overall operation and breakdown uses audible feedback based on voice.
I think that the only problem with Amazon Dash Wand is the performance issue of Alexa. Would that be better, too?
An object I hate: Remote control in TV
The hate the complicated and counterintuitive design of remote controls in TV. The number of buttons increases with the number of functions, but most buttons are not frequently used in real life. Thus, visibility is terrible.
There have been attempts to solve this issue via using different affordances such as different colors or shape. However, this might not be a good solution to distinguish among many buttons. Also, a minor issue is the button label, which uses the same icon(affordance) as the on/off button, and the actual function and label are providing “confusion information” to the user with “All off.”
According to research, habituation by users using a TV remote is usually only possible with 3-4 buttons. Users of remote controls experience confusion since a lot of information is provided at once. Thus, depending on the frequency of use, constraints need such as using voice instead of buttons.
And of course, when the user experiences a breakdown such as not finding the desired button, there is no feedback and alternative handling.
ⓒYoungwoo Cho, 2012.10.11., Gyeonggibuk Science High School
The principle of three-dimensional projection allows users to perceive as if the design is three-dimensional by utilizing a variety of visual cues (e.g., interposition, size, elevation, linear perspective, texture gradient, shading, and atmospheric perspective). 3D is equal to the sum of 2D and projection. Through this design principle, the spatial and dimensional aspects of design are enhanced.
In addition to the areas of 3D-based VR and games, visual cues can be suitably combined with certain elements or effects in 2D-based environments to offer realistic experience.
#1 Original sources: Universal Principles of Design
An example which actively uses three-dimensional projection is video games. Three-dimensional screens are represented to provide a realistic experience. The game Black & White, for example, is a representation of a three-dimensional world, where depth cues can be observed.
#2 Online source: Link to Samsung VR Internet Application
Samsung’s VR internet application provides an in-depth gradation on the menus and background color. Meanwhile, the different sizes of the overall web page and menu panel are supplied by perspective and curves for an effective three-dimensional feel.
#3 Real life: My Samsung Galaxy S6 edge, Task manager
The three-dimensional perspective is effectively delivered by interpositioning the thumbnails of tasks in a two-dimensional space. Also, when the thumbnails are flicked up and down, size changing effects are provided.
The Fibonacci sequence principle refers to a special number sequence in which the sum of the preceding two numbers becomes the next number. This numbering system can be easily seen in nature, so designs based on the Fibonacci spiral offer people a sense of stability. The design can strongly appeal to users when applying this principle after deciding on the direction, rather than designing with the Fibonacci sequence in mind from the beginning. The principle is mainly used for architecture requiring harmony with nature or logo designs which need to be remembered for a long time and have diverse usages.
#1 Original source: Universal Principles of Design
The Modulor, created by Le Chobusier, incorporated two Fibonacci sequences which were derived from the main characteristics of the human body shape. It is said that the sequences are representations of “ideal measurements” designers can refer to for balanced design proportions. The calculation of “gold ratios” were done by dividing each sequence’s number by the number which comes before it.
#2 Online source: Mona Lisa
<Image source : Google>
Mona Lisa—long-cherished as a beautiful, harmonious painting—is also where the Fibonacci sequence has been applied.
#3 Real life: My PC’s logo
< Image’s source on the right side: Google >
Apple’s logo, which is remembered as natural and impressive, also applied the Fibonacci sequence.
The uncanny valley principle is about the emotions humans feel toward robots or other non-humans. According to Masahiro Mori’s theory, the more robots look similar to humans, the more positive feelings humans feel toward them. When the feelings reach a certain level, it suddenly turns into a strong repulsion. However, when the appearance and behaviors of robots become indistinguishable from humans, the positive feelings increase again to almost approach the level of human-human emotions. Here, the domain where the repulsion from robots similar to humans and near-human robots exists is called “uncanny valley.” This name does a good job in pointing out that the near-human robots fail to derive necessary emotions required in human-robot interaction because they exhibit excessively odd behaviors unlike actual humans. This design principle increases the strong appeal of design in certain areas.
The theory is primarily used on the fields of robotics and animation. This principle’s position in science is still under debate; there are some contradicting examples that avoid or deliberately exceed uncanny valley.
#1 Original sources: Universal Principles of Design
The classic graph of Masahiro More shows the degree of human-likeness or appeal against realism. The sharp “v” shaped curve on the right side of the graph is the uncanny valley. The beginning of the valley drops suddenly right before the point of the “healthy person.”
#2 Online sources: Robots
(1) An example of avoiding uncanny valley (Flower Robotics by Tatsuya Mastui)
A favorable feeling is maintained at a certain level while expression of human-likeness is reserved. It is made like a human but distance is kept from making it near-human.
(2) Examples of exceeding uncanny valley, intentionally(byDavid Hanson, robotics designer)
These images insist that the feeling of aversion is not just appearance but a result of various reasons. The electric circuits are made visible by taking off the rear side of the head.
#3 Real life: Security robot in my apartment complex
This is a security robot which moves around our complex. It is avoiding uncanny valley, my son and his friends like it and wants to touch.
The principle of Freeze-Flight-Fight-Forfeit is about the sequential responses expressed when people confront danger. Since this response is human nature, the designer’s in-depth understanding of each stage and sequence may help her make better design decisions as well as strengthen the aspect of usability. Also, each stage may be skipped through training. This design principle must be considered when designing contexts including the functions of life-critical control system, emergency response plans and systems, and emergency and self-defense training functions.
#1 Original sources: Universal Principles of Design
In January 2009, an airplane fell into the Hudson River due to the engine failure caused by birds. Although the , as the plane was expected to sink in less than 30 minutes, the crew managed it well and, as a result, all passengers (150 in total) and crew members landed safely on the ground.
#2 Online sources: Link to Vívosmart® 3
The wearable Vivosmart 3 Activity Tracker can measure heart rate variability (HRV) and converts it into a stress level. Each stage of stress is provided visually; continued self-monitoring helps the user predict and prepare for sudden dangers.
#3 Real life: (1) My iPhone, medical ID, (2) Weekly feedback in course
(1) Image on the left side – My iPhone, medical ID
When a user’s medical information such as certain allergies, illnesses, or blood type are saved in his/her phone, accurate information can be sent to medical staff without having to panic about what to do during emergencies.
(2) Image on the right side – Weekly feedback in course
The level of satisfaction for a course can be checked on a weekly basis and the feedback can be analyzed, allowing for continuous monitoring. This can help the users not to freeze or fight in the following classes.
The factor of safety principle is about a system’s degree of flexibility during regarding the preparation for structural uncertainty in error conditions. The bigger this value, the greater risk-control is possible for the designed system’s emergency situations.
This principle should be considered in all context requiring error handling. In particular, it is often used in structural design, because structures are designed to endure heavier loads than those they are expected to hold.
#1 Original sources: Universal Principles of Design
The O-ring design of the rocket booster of the space shuttle Challenger was designed to have a “3” value of safety factor. It was found out that at low temperatures the O-rings were eroded, making the safety factor go below three. On the day of the launch, engineers objected to launching the rocket because the temperature of the launch pad was very low. The launch was proceeded as planned, believing that the safety factor would guarantee its success. Unfortunately, the launch failed, as the safety factor decreased due to the temperature condition.
#2 Online sources: (1) Link to Visual wall, (2) Crosswalk lighting
(1) A visual wall; a laser hologram traffic light concept by artist Hanyoung.
< Image source : Google >
(2) Crosswalk lighting in South Korea; reduces the danger of pedestrians by alerting drivers through the strong light rays projected when pedestrians cross.
#3 Real life: Playground slide
Children’s slide needs to bear a higher load than normally expected, since it needs to account for uses by larger children as well as misuse.
The inattentional blindness principle refers to the phenomenon or situation in which the location of the object a person’s eyes are set on cannot be perceived due to lack of attention. As this principle affects users’ cognition, the core elements for each context should always be inspected. Inattentional blindness is especially utilized for security, advertising, and product design.
Designers use various methods, such as using point colors, adjusting component size, adding pop-ups, etc., to highlight the information which they want users to pay attention to. For example, the input field of the major information on membership applications or the file delete button are emphasized with point colors. Meanwhile, actions such as “delete” are accompanied by pop-ups which require another confirmation. In the case of the virtual reality (VR) area, the space within and outside the user’s sight needs to be designed effectively. Within the angle of vision, spaces should be adjusted as visual cues to prevent peripheral content from disturbing the focus on the main content.
#1 Original sources: Universal Principle of Design
Daniel Simons and Christopher Chabris, in their famous Inattentional blindness experiment, showed participants a short video of students tossing a basketball in two teams. Participants were asked to count how many times the students wearing white shirts passed the ball while observing the students’ quick movements. Halfway through the video, a person in a gorilla costume appears in the middle of the scene. Although the gorilla tried to catch attention by beating her chest before walking out, about half of the participants did not even notice her presence.
#2 Online sources: Link to Samsung VR Internet app
Design should prevent the surrounding menus from coming into the angle of vision to allow users to fully engage with the web page. However, a visual cue should be given so that users can expect to see menus when turning sideways.
#3 Real life: My Car – blind spot sensor
Drivers look at side mirrors to change lanes, but sometimes other automobiles or people may be not readily visible. As a supplement, there are lights near the side mirror which help with recognition. Audio feedback is provided to enhance the driver’s attention, informing there are objects and changing lanes is difficult when the left or right signals are on.
The principle of common fate—one of the Gestalt principles of perception—recognizes elements moving in the same direction. Even if the shapes or colors are different, this principle perceives those elements which move in the same direction to be more relevant to one another than those moving in different directions. It is a basic principle used when inducing users’ perception according to the designer’s intention.
The principle is usually used when designing the navigation menu, since elements moving in the same direction are perceived to be related. It is particularly useful when designing the drop down menu with a hierarchical structure or the content browsing menu which has the same attribute.
#1 Original sources: Universal Principles of Design
When staying still, the Xs and Os are grouped according to their similarity (i.e., Xs with Xs, Os with Os). When Xs and Os are mixed and moving in a similar manner, the common fate principle is mainly applied to group them.
#2 Online source: Link to VR Interface Design Pre-Visualization Method
Horizontal movement takes place within the same document category; vertical movement refers to the movement such as “video,” “photo,” etc.
#3 Real life: My iPhone’s App store app
Scrolling up and down moves “each game group” (i.e., new games, new games we love, etc.), while scrolling left and right allows you to move each of the “new games.”
