Thoughts on Interaction Design Chapter 6: Interaction Design and Communication

Interaction design, as defined by the text, states that it is “a human-centered field and the creation of a framework in which to experience [designs] (pp. 6-7). The text states that design is influenced by “the individual designer’s world view” (Kolko & Connors, 2010, p. 100). However, I believe this can go both ways. Design can be influenced by others, but can also have an impact and influence on others. Either way, interaction is used in all parts of a design, whether just explaining a concept to another person, finding out a client’s needs, or making the product appeal to the consumer. 

The text mentions that art and design are very much a part of communication, especially in terms of technology (p. 100). In my life, I’ve realized that communication can have many outcomes, but cannot always convey our message accurately. Therefore, messages are often misinterpreted. Messaging through a text message or social media can pose a challenge. A message can easily be misinterpreted because tone cannot be read or seen through body language when communicating through words. 

I feel this will be a challenge in my career path in graphic design and advertising. Not all graphics include a picture or other visual aid. It is essential to design for others to have an understanding of the design, but the message must be understood through only colors, words, and shapes. As designers, it is important to remember that we influence the way people view and think about their experiences throughout life. Semiotics, the study of signs (both physical and conceptual) can help with recognizing these needs (p. 103). However, these needs can also relate to aesthetics and hooking the senses, as senses heighten your awareness (p.104). 

It is important to remember that once the product is released to the consumer, it is out of your control how they experience and think of it. This can be scary for a designer because interaction design has a start and an end and therefore ignores interaction with the consumer afterward (pp. 108-109). This makes it especially important to be mindful of the time you have with the client and also the amount of time you have to work on a project. Also, I feel interaction design is about taking our understanding of both our current and future environment and creating something that will still be needed in the future. 

Reference

Kolko, J., & Connors, C. (2010). Thoughts on interaction design: a collection of reflections. Burlington (MA): Morgan Kaufmann Publishers, an imprint of Elsevier.

AR Questions – Danica Teodoro

Grocery/Nutrition Experiences

  1. Tell me about your typical day.
  2. Tell me about how you fit grocery shopping into your schedule.
  3. Tell me about the foods you most often buy at the grocery store.
  4. Tell me a funny story about when you forgot what you were supposed to buy.
  5. What aspects of grocery shopping do you love? You hate?
  6. Tell me about past experiences that made you feel this way about shopping.
  7. Tell me about a time you impulse-bought at the grocery store. Tell me about your last impulse buy?
  8. Tell me about the last time you had difficulty finding an item in the grocery store.
  9. How do choose what grocery store to go to?
  10. Tell me about what keeps you loyal to your favorite grocery store.
  11. How does nutrition play a part in your life?
  12. Tell me what you look for in nutrition information before buying a product?
  13. Tell me about your experiences with any nutrition changes or diets you’ve tried in the past? 
  14. When you follow a specific diet or follow dietary restrictions, tell me about how you obtain and prepare those foods.
  15. Tell me about your interest in eating a healthy diet.

“Objectified” Documentary Response – Danica Teodoro

Do you agree or disagree with any of the designers’ statements, why?

I agreed with almost all of the designer’s statements. None of them spoke about anything that caught me off guard or I didn’t agree with. The first thing that I agreed with was right off the bat, design editor Alice Rawsthorn mentioned how “almost everything is designed one way or another” at 4:12. I agree with this and I don’t feel that many other people see things this way. As a graphic design student, people often say to me “what can you do with that degree?” I love to tell people and make them realize that everything is design so they don’t think design is a dumb career choice anymore. Dieter Rams, former design director says that “Good design is long-lived” at 12:51. I agree with this statement. A lot of designs now are sold with the intention of having a shorter lifespan. Although these products are probably sold more because they are “trendier,” I truly think a good design is meant to last. 

Has anything the designers said changed how you thought about design?

As I am still very new to being a design student, I am constantly learning more about it and beginning to think more from a designer’s view. Many of the designers made statements that truly made me change the way I think about design. The first is a statement by design curator Andrew Blauvelt. He explains at about 5:05 how a design may be used in different ways in different cultures and that there is a context that comes with a culture that makes the design makes sense. Also, Dan Formosa, responsible for design and research, said at 6:16 to look and design for the extremes on the user spectrum and everything else will fall in place. I would have never thought of this strategy but will take this advice when designing in the future. Jonathan Ive, senior vice president of industrial design, said something in his interview around 14:30 that made me realize that when we doubt or try to find solutions, even if it is in our mind, that we are designing. The last statement that changed the way I think about design is another one by Andrew Blauvelt. At 21:56 he says how the relationship to a Roomba is different. There is no human interaction relationship, but it is to the room it is cleaning. It was different for me to think like this. Before, I just assumed or didn’t really think that design could be made with no human interaction in mind. Overall, this documentary was very eye-opening for me in the way I see design.

Each designer interviewed for “Objectified” defined how they see Design, how would you define design and how has that definition changed?

The way I would define design is something that is made for the wants or needs of someone’s daily life. It should be easy to use and understand. The graphic designer in me also believes that everything should be very aesthetic, as well. A statement by Dieter Rams, former design director says that “Good design is long-lived” and I think this is true. To me, design should be creating something new, even if it is just an interface or surface-level change. I’m not sure that my definition of design has changed from this documentary, but my perspective definitely has. Watching it has made me more aware of how I deem a design as good or bad and how I see it in general.

Danica Teodoro – Interaction Design

Interaction design plays an important role in the lives of the common consumer. While it has only been well recognized within the last two decades or so, interaction design has been around for much longer. Most people do not understand what interaction design is and do not realize that interaction design is implemented into almost everything. However, it can be recognized through the senses, whether through visual stimulation, touch, or sound.

 The benefits and value in interaction design are so important that it is defined as the very first sentence of the book itself “Interaction design is the creation of a dialogue between a person and a product, service, or system” (Kolko, Connors, 2010, p. 11). Some things to consider when reflecting on interaction design is that it “shapes human behavior” in a never-ending cycle. Much of the influence for designs comes from behavior and then is redesigned based on that behavior. An interaction designer combines the artistic thoughts of an artist with the form and technicality of designers.

Interaction design draws from many industries. Many people aren’t even sure which it belongs to because defining where the field belongs gets a little bit cloudy. It is often recognized in art, engineering, and business strategy, but is a part of so many more. Interaction design also pulls from the thought processes through psychology so it makes sense that it also gets confused with this field as well. 

Some other difficulties and challenges that the interaction design industry faces is with coming up with something new and fast. The competition for technological advances is hard, as you always want to be the first. This can cause it not to be the best ergonomically or functionally. Convergent product design is also a major problem. As interactive design in engineering and psychology start to merge with new technology, the job of the designer becomes more difficult. Other countries such as China and India are becoming especially good at the technology and form it takes to have a well-developed outcome, so the United States is left with figuring out the best ways to fuse the two (Kolko, Connors, 2010, p. 23).

The benefits of new innovations in technology and an increased need for interaction designers heavily outweigh the disadvantages of the industry. With the growing exposure to these interactions, I believe people will become more familiar with the industry and will gain an interest in it as well. 

Reference:

Kolko, J., & Connors, C. (2010). Thoughts on interaction design: a collection of reflections. Burlington (MA): Morgan Kaufmann Publishers, an imprint of Elsevier.

Thoughts on Interaction Design: Chapters 3,4,5 – Danica Teodoro

What information can ethnographic tools give you to improve the interactivity of an online banking website? (pp. 48-54)

Ethnographic tools can help people to see what is working in a design and what isn’t. Sometimes journey mapping can be a great tool to help plan how a user could use the product in “real life” scenarios. An example of how an online banking website could use ethnographic tools is through analytics. Through analytics of a website, you can find the number of page views and view time, and compare this to other times. This can help to identify what was the most successful and least successful parts of the site and how people navigate through the site itself. This can be important when thinking about redesign and updates for the site in the future. 

At what point is a design finished? What makes it a success? What is its purpose? (pp. 54-62)

A design is almost never finished. It can only be “finished” when it satisfies all of the client’s needs or when it has to be completed by a certain deadline. Even when a piece is “done,” there can always be updates or improvements to be made. As technology is always changing and evolving, designs and trends follow. A successful design is one that is functional in relation to its purpose and is easy for the user to comprehend. The purpose of a good design is to leave the user with a design that will do a task for the user or better their life. 

Identify a product family you use regularly (can be anything from technology to consumables except for coffee). How has its branding effected your use, relationship and experience with the product? (pp. 78-84)

My family is mixed between technology brands, but personally, I am an avid Apple user. I got my first Apple iPhone about three years ago because my Motorola one was old and I wanted to “fit in.” It seemed everyone in school had an iPhone at the time, so I decided to try it out. After that initial purchase, I realized how much I liked the interface and brand experience and never turned back. Even when I was inexperienced with Apple devices, the familiarity I got from both the website and friends helped me gain familiarity and grow confidence in the brand. Since then, I have bought the iMac to use in college because I realized that many people in the creative industry use them. I noticed this through the recommendations from professors, friends, and through social media. Last winter, I also bought an iPad Pro in place of a laptop so I could have the drawing aspect as well as most of the functions of a basic computer. I feel these products are really useful for graphic designers and to use in daily life. Apple did well in marketing that they are meant to allow you to express yourself. Also, the branding really helped to convince me that I was buying the right product. It is advertised that it is easy to sync all devices with each other, which was a big selling point for me. They also are known for their great customer service and have a lot of information on the products on their website that help you to solve many problems yourself. This takes the inconvenience of waiting out of the picture. These views helped me establish a positive feeling towards the brand and their products. 

Danica Teodoro – User Experience

What are the goals of Apple’s website? How does Apple’s website address the needs of a user who has just purchased their first MacBook?

Apple has truly utilized a strategy for a good user experience through their website. It is easy to navigate their site, whether you are just there for information, to buy a product, or need assistance. They were able to do so through a consistency in their brand identity. Brand identity isn’t just the visuals, it can include the concept or emotional associations with the brand. We don’t design for ourselves. Websites are typically designed to make the company money or save it money (Garrett, 2003). The way to plan for others is to segment users in different ways and be aware of technology awareness within that group. Usability is one of the most important things to consider when planning for a user experience. 

What are the functional specifications of Facebook’s wall? If you are not on Facebook what are the specs for the signup page?

Branding and technical requirements apply to the site as a whole and are often discussed in collaboration between both the developer and the designer with the concept of the final website in mind. It is important to determine how frequently to update. Get the base site down and plan more features for later releases. A functional specification focuses on the people interacting with the system. Therefore, Facebook specifications include connecting people from all over the world and allowing them to share thoughts and life events through a variety of media. Also, through Facebook, you can send payments, sell and buy from an online marketplace, and use it to watch entertaining videos or play games. 

What are four architectural approaches to information structure? Find one example of each.

Web architecture addresses the more abstract issues of the strategy. There are four different architectural approaches: hierarchical, matrix, organic, sequential, but picking an approach depends on the user’s needs. For an example of a hierarchal structure, rmu.edu is a great example. These sites are almost like a family tree where they get smaller and smaller as it progresses. On the RMU website, the navigation bar is the first type of approach. As you dig deeper and deeper within the site, information and links get even more specific. Zappos.com is an example of a matrix information structure. After searching for a product, you can then refine that search by style, color, brand, price, and size. An example of a sequential information structure is a book. While reading a book, you receive and comprehend the information in a sequential or linear order. Superbad.com is a website with an organic information structure. Depending on where you click on each page, each user will have a different navigation pattern. 

What percentage of The Huffington Post index page is navigation, and what percentage is content? What about Google, Wikipedia, and Etsy?

The concerns on this plane are with the individual pages and their components. This deals with interface design, navigation design, and information design. The user shouldn’t have to think about how they are gonna do what they’re gonna do. Make an interface similar to one’s users are familiar with. Content should provide context and reduce mental effort. There are six common types of navigation systems: global, local, supplementary, contextual, courtesy, and remote. On the Huffington Post index page, about 70% of the grid was filled with content, 10% was navigation, and the other 10% was white space. After looking up something on Google, the first page of results yields about 60% content, 5% navigation, and 35% of the page was white space. Wikipedia is a very content-heavy site, with about 85% content, 10% navigation, and 5% white space. While looking at a specific category of products on Etsy, I found that about 60% was content, 20% navigation, and 20% white space.

How does http://landor.com guide the readers’ eyes and focus their attention on what is important?

The surface plane is all about visual design. The grid system is often used for consistency. Color and typography are most effective in communicating a brand’s identity. Landor specifically did a good job in this area. The bright, vibrant yellow will surely draw attention to it. The black and white accents are also bold and modern, giving off an overall powerful vibe. There is not much included in the navigation bar, which directs the user to select a language or click on the hidden drop-down menu. This seems to be a theme throughout the site with large text and minimal designs and stuff to look at in the background. As you scroll further down the homepage, the bright animations draw your eyes to the articles linked beside them. 

Reference:
Garrett, J. J. (2003). The Elements of user experience: user-centered design for the web (3rd ed.). Indianapolis, IN: New Riders.

Burgatory vs Dizzy Dipz Website Review and Comparison

Since technology is constantly evolving, information is becoming easier to spread and find. It is more important now than ever before to have social media or a website, especially as a business. Consumers are online round-the-clock and can find out about your company in a single click. While websites used to contain only text, nowadays there are endless possibilities for layouts and design.

For my web design class, I created a new company called “Dizzy Dipz” that is a fusion restaurant that focuses on boozy ice cream. I created the brand identity and with the help of a partner, was able to bring the company to life with a semi-professional feeling website. I will compare it to that of popular local food chain – Burgatory, as they also serve a selection of boozy milkshakes.

Burgatory is known for its “helluva burgers” and “heavenly shakes.” They pride themselves on their all-natural ingredients and huge portions. Burgatory has multiple locations in the Pittsburgh area, including the PPG Paints Arena, Heinz Field, and Cranberry Township. Burgatory was established in 2011, and their website reflects the modern feel.

When you first land on the Burgatory homepage, you are met with a simple and intuitive design. At the very top of the page, the red ‘B” that is their logo sits centered on a very dark brown navigation bar. Under the logo, there are links to the menu, locations, merchandise, and careers. Below this, there is a slideshow of colorful photos that convey the customers, food, and employees of the company in a positive, tasteful light. When looking at the site’s homepage, it is easy to see where you need to go. The items on the navigation bar attracted my attention mainly because of its light gray color against the dark title bar but also because it is centered at the top of the page, and the slideshow is large, not leaving too much else to look at.

Burgatory’s website uses many design principles, such as balance, unity, emphasis, and layout. The layout and color choices across design elements on the page give it a sense of unity. The webpage seems laid back and relaxed with the choice of typography and wording. There is also a good contrast in the dark navigation bar and the stark white-gray color of the background and text. It is clear as to what words are hyperlinks because they are either underlined or change color when you glide your cursor over them. 

Overall, the usability of this website is easy for users with minimal experience with websites or the internet. Everything you could possibly want to look for is connected to a link in the navigation bar. At no point did I dwell on or think “where should I begin.” Its minimal color scheme and layout make the experience easy on the eye and mind.

In some ways, Burgatory’s webpage is quite similar to Dizzy Dipz. This is of no surprise to me because I took inspiration from their site in regards to the layout and content. I do think that Dizzy Dipz stands out because it gives off young and social vibes. The colors alone are so vibrant and different from most other companies and I think it gives it an edge when comparing it to a restaurant with similar menu items. I also like how Dizzy Dipz includes more photos that will give the consumer a better idea of the both the atmosphere and food. The wording and names of the headers and items on both sites allow for a better insight, as well. Burgatory includes a very minimal amount of photos within the bulk of content, but uses an abundance of playful typography. I think both sites look pretty clean and simple with an easy understanding of the navigation process. 

Reference

Burgatory. (n.d.). Retrieved July 22, 2019, from https://burgatorybar.com/

Burgatory and No.9 Park – Website Comparison and Review

Since the introduction of technology into the everyday lives of the average person, information has been even easier to spread and find. It is more important now than ever before to have social media or a website, especially as a business. Consumers are online round-the-clock and can find out about your company in a single click. While websites used to contain only text, nowadays there are endless possibilities for layouts and design. As examples, I explored the websites of two local restaurants, Burgatory and No. 9 Park, to see how they compare. 

Burgatory is a popular local food chain that is known for its “helluva burgers” and “heavenly shakes.” They pride themselves on their all-natural ingredients and huge portions. Burgatory has multiple locations in the Pittsburgh area, including the PPG Paints Arena, Heinz Field, and Cranberry Township. Burgatory was established in 2011, and their website reflects the modern feel.

When you first land on the Burgatory homepage, you are met with a simple and intuitive design. At the very top of the page, the red ‘B” that is their logo sits centered on a very dark brown navigation bar. Under the logo, there are links to the menu, locations, merchandise, and careers. Below this, there is a slideshow of colorful photos that convey the customers, food, and employees of the company in a positive, tasteful light. When looking at the site’s homepage, it is easy to see where you need to go. The items on the navigation bar attracted my attention mainly because of its light gray color against the dark title bar but also because it is centered at the top of the page, and the slideshow is large, not leaving too much else to look at.

Burgatory’s website uses many design principles, such as balance, unity, emphasis, and layout. The layout and color choices across design elements on the page give it a sense of unity. The webpage seems laid back and relaxed with the choice of typography and wording. There is also a good contrast in the dark navigation bar and the stark white-gray color of the background and text. It is clear as to what words are hyperlinks because they are either underlined or change color when you glide your cursor over them. 

Overall, the usability of this website is easy for users with minimal experience with websites or the internet. Everything you could possibly want to look for is connected to a link in the navigation bar. At no point did I dwell on or think “Where should I begin”. I just instinctively knew where to click next. Its minimal color scheme and layout make the experience easy on the eye and mind.

No. 9 Park is an upscale restaurant that serves French and Italian entrees and European wines. While this restaurant only has one location, it is in an elegant townhouse in Boston’s historic Beacon Hill. The restaurant prides itself on its intilmate setting and refined cuisine. 

No. 9 Park’s website is in many ways similar to Burgatory’s. The site also features a dark brown navigation bar with a large photo beneath it. The navigation bar features similar elements, with the logo in the top left corner, and the menu and other links listed beside it. The text for both the logo and the hyperlinks appear to be light cream or white in color. The picture features the storefront location in Boston’s Beacon Hill. Like Burgatory, the site is easy to navigate because of its simple design. 

No. 9 Park’s website also utilizes design principles, such as balance, unity, emphasis, and layout. The layout and color choices across all of the internal pages and links have a sense of unity. Emphasis is put on the fine dining options with professional photos spread throughout the site of their divine courses. They also allow the user to navigate the website through distinctive buttons on the right side of the page. This leads to a more direct navigation of the site, landing the user on the proper panel, overall enhancing the user experience. 

In Steve Krug’s book Don’t Make Me Think, he addresses five things that are necessary for a user to enjoy and understand the look and content of a site. These things are:

1. Creating a clear visual hierarchy

2. Taking advantage of naming and graphic conventions

3. Breaking pages into sections

4. Making links look clickable

5. Minimizing noise

Both of these websites do a very good job at addressing these needs. In regards to heirarchy, Burgatory definitely takes the crown. Its use of bold typography and graphics is very different from the delicate and light design of No. 9 Park’s. I believe they also do a great job in dividing the page into clear sections. Burgatory mainly does this through dashed lines and bold lettering, whereas No. 9 Park uses photographs as dividers. Both websites use underlining to define what is a hyperlink throughout the body of their sites, but must not feel it neccessary in the navigation bar. It works well in their favor and leaves behind a clean and simple design.

Overall, both Burgatory’s and No. 9 Park’s websites look very professional but are very different in terms of the overall style. Burgatory’s style is more casual and bold, and No. 9 Park’s leans toward a more polished and simple aesthetic. Personally, I am more drawn to the unique style and typography that Burgatory utilizes. Regardless of whichever restaurant website you choose, you are sure to enjoy your experience.

References

Burgatory. (n.d.). Retrieved July 22, 2019, from https://burgatorybar.com/

No. 9 Park. (n.d.). Retrieved July 22, 2019, from http://www.no9park.com/#intro

I am Subzero.com – Review

I am Subzero is a storefront ice cream parlor located in the United Kingdom. They have been making ice cream for over fifty years and offer over sixty flavors of ice cream. They have a single-page website for their business. In some situations, a single page website may be boring or include too much information, but surprisingly, it worked extremely well for I am Subzero’s needs. The sites’ use of color, texture, and page layout makes this a captivating and appealing design. 

When looking at the website, it is easy to see and comprehend all of the content on the page. Some design elements that contribute to the clean aesthetic are the font size, the use of negative space around the content, bold headers, hierarchy, and colors that help define buttons and important information. 

The first panel invites the user to scroll down by using a vibrant pink circle with minimal text and an arrow pointing downward. This makes it clear to the user that the website utilizes a top to bottom scroll direction. While you are scrolling, there are dividers to indicate the start of a new section of content. Intuitively, the website designer used dividers that represented scoops of ice cream. Also, instead of a harsh line for a divider, a more organic wavy line was used. In my opinion, this gave the impression of melted ice cream dripping down the screen which again, invites you to scroll further down the page. 

However, I found some of the more subtle features of the site the most interesting. The navigation bar is black but fades in opacity, which makes the bar less of a distraction while scrolling through the page and also leaves the page looking more friendly because it is not a harsh line. Also contributing to the friendliness of the site is the colors. There are many fun, bright colors on the page, making the page look vibrant and young. To balance out the flat colors, a texture that appears to represent sprinkles is used throughout. 

Overall, the website is very easy for users to navigate because of the clean and innovative position of the content. While using bright colors and subtle animations, the site maintains a professional feel overall. The colors and textures are brilliantly balanced throughout, which makes for a lovely overall experience. 

Reference

Welcome to the Magical World of Subzero Ice Cream. (n.d.). Retrieved June 29, 2019, from https://iamsubzero.com/

Walmart.com Review – Danica Teodoro

Walmart is a department store and has a wide variety of products to choose from. Because it is the largest retailer in the world, you may think that the website would look crowded and give too many options when it comes to looking for a specific product. However, this was not the case. Walmart.com has a simple and sleek look to the site and it was very easy to find the product that you need.

When looking at the site’s homepage, it is easy to see where you need to go. The search bar attracted my attention mainly because of its pure white color against the dark blue title bar but also because it is centered at the top of the page.

I decided to search for a water filter that purifies tap water, but I simply searched “water filter.” When I searched without picking a department the exact brand and product that I wanted came up with a large picture advertisement that spanned the page. On this ad was an arrow directing me to click on an icon. On the left-hand side, I could still refine my search if I needed to. After clicking on the icon, it took me to a specific page that only showed that brand’s water filter, with pictures and descriptions of different color options to choose from.

I selected the “Lake Blue” filter that was listed as the second product on the list. The next page very clearly showed more pictures, the price, and an ‘add to cart’ button. The button’s dark blue color stood out against the bright white background.

Overall, The usability of this website is easy for users with minimal experience with websites or the internet. Everything you could possibly want to look for can be searched for and refined to find the perfect product. At no point did I dwell on or think “Where should I begin”. I just instinctively knew where to click next. Its minimal color scheme and layout make the experience easy on the eye and mind.

References

Carbonara, Peter. “Walmart, Amazon Top World’s Largest Retail Companies.” Forbes, Forbes Magazine, 6 June 2018, www.forbes.com/sites/petercarbonara/2018/06/06/worlds-largest-retail-companies-2018/#591d8de213e6.