Ames' syllabi

What makes up interaction design and what are some of the industry’s challenges?

An interaction design must include a goal-drive design which focuses on personas, user scenarios and experience maps. Usability is also important; the product must be intuitive and reliable before it can be used by users. Learnability, so that the interfaces would feel more natural and more usable with less distractions. The interface should also be quick at responding so that it would feel like a real conversation for the user. Some of the industry’s challenges would be trying to create convergent products that are easy to use and pleasant to encounter; however, as the physical and digital product development evolves, the only differentiator in service would be the cost. Not only should the design be easy to use, the design should also have a strong emotive aspect to engage the user.

What is interaction design, how its evolving. What fields does it draw knowledge from?

Interaction Design is the dialogue between person and product, system, or service. The dialogue is both physical and emotional in nature. The dialogue is manifested in form, function and technology. Interaction is evolving because interaction used to be intangible. Interaction design impressed users with simple interactions with unexpected to animation, but now it became a required feature with the interface. New interaction designs continue to arise as new technologies are developed. Interaction design draws its knowledge from the field of psychology because interaction design uses the cognitive, memory, and perception from it to create designs for the user.

 

 

1. What makes up interaction design and what are some of the industry challenges?

Interaction Design is the creation of a dialogue between a person and product, service, or system. It is complied with many different aspects; some of which include media accessibility and usability, user understanding and learning ability, and physical and emotional dialogue between user and design. Although the concept is growing, there have been some challenges within the industry as a whole. The novel expressed the theory of “The User Is Not Like Me.” Sometimes, it is hard for designers to take into consideration the wants of a user since they are the ones designing the product. It is important to remember who you’re designing for and what they may want from you. Just because a design works for its creator does not mean it may work for everyone else. In return, it may become challenging for designers to be new and innovative with ideas and concepts. With demand for new media and technology growing at an alarming rate, it tends to be difficult to be new and creative; one of the biggest challenges of the industry is the industry itself.

2.  What is interaction design, how its evolving. What fields does it draw knowledge from?

As stated previously, interaction design is the creation of a dialogue between a person and product, service, or system. As demand for media evolves, so does the media itself. People are beginning to experiment with new ideas and concepts and incorporate more cultural and personal aspects into their designs. It draws knowledges from fields like computer software development, behavioral studies, data analytics, and construction (but on a different, non-building sky scrapers kind of way). It utilizes parts of each of these fields to effectively create new ideas and concepts.

 

What makes up interaction design and what are some of the industry’s challenges?

• There are Six Core Components in the process of design that Kolko defines (Page 22) as follows:
  • Define- team building; technical assessment; hypothesizing
  • Discover- contexts; benchmarking; user needs
  • Synthesize- process maps; opportunity map; frameworks; personas; scenarios
  • Construct- features and functions; behavior; design language; interactions and flow models; collaborative design
  • Refine- evaluation; scoping; interaction; specification
  • Reflect – post mortem; opportunity map; benchmarking; market acceptance
• Some Challenges in the Industry:
  • Discovering the needs and wants of potential users. Needs and wants of users is not always made completely obvious. These “hidden wants, needs, and desires” are things that designers need to dig for and design for in advance. The potential user is not always like the designer, therefore, the designer needs to design for the audience and not themselves. Designers cannot be selfish. Going to the Users is often the best way to figure out how they will move within an app/design.
  • Staying focused within the context of the project sometimes proves to be a challenge. Designers want to be able to have everything, but the book makes it a point to stay focused to find more detailed information.
  • I don’t know if this is a challenge, but the book mentions divergent thinking. Kolko says that is can sometimes be tricky because it can get very complicated very fast, but it can often lead to extremely innovative ideas.
  • Benchmarks for success for prototypes and user testing is muddy. There is always a lot of self-criticizing and this makes it harder for designs/projects to get off of the ground and into further production.

 

What is interaction design, how it’s evolving. What fields does it draw knowledge from?

• Interaction Design:
  • Design that is honed in on the way something or someone (the user) will interact with the technology and functions of the technology. The function is paid attention to just as much as the physical appearance of the system. Interaction design uses function and design elements to make a system work efficiently and effectively for the desired user.
• How Interaction Design is Evolving:
  • Other fields have to be involved. Outside sources need to be considered and consulted. As answered in the next question, interaction designers draw knowledge from other fields to help improve the function and reception of their work. By outside sources, I mean other companies. With the app that we have been working on in class, like many other apps that already exist, we would need to consult with gas companies and convenient stores to come up with a points system that they would all agree upon. Then we would have to get them all using the same type of technology to make out app function at its full capacity and properly. There is more than just the design that goes into the success of an interaction designer’s project.
• Fields that Interaction Design Draws Knowledge from:
  • There is a lot of mention in the book about pulling information and knowledge from graphic designers, industrial designers, and user interface developers. These fields all bring forth knowledge about design, technology, and user experience to help strengthen interaction designers’ work.

 

Source: Kolko, J. (2011). Thoughts on interaction design: A collection of reflections. Amsterdam: Elsevier/Morgan Kaufmann.

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? (Chapter 3)

• Apple’s goal is previewing all the latest gadgets trying to grab the user’s attention. While doing so the user’s become an existing user and they could also navigate to their designated tab such as Macbooks or IPhones, they want both new users and existing users to find use for the website. Another feature they allow new or existing users to do is navigating to the support tab in case they have questions on the product or assistance with a malfunction.

What are the functional specifications of Facebook’s wall? If you are not on Facebook what are the specs for the signup page? (Chapter 4: Functional Specifications, Content Requirements an Prioritizing Requirements)

• Facebook is meant to be a site for people to connect with friends and families. The website allows one to share posts, images, or memories with one another. On the Facebook wall, users are presented with recent shared images, posts, and ads from different sites.
• When signing up on Facebook, you are asked to insert your first and last name, email, birthday, and gender.

What are four architectural approaches to information structure? Find one example of each. (Chapter 5: Information Architecture)

• Hierarchial – family tree
• Matrix – clothing websites
• Organic – wikipedia
• Sequential – a textbook

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

• On the Huffington Post index page, the entire page is navigation while there are a few links to content.
• On the Google index page, majority of the page is content and no navigation.
• On the Wikipedia index page, there is no navigation just content.
• On the Etsy index page, there is a little bit more navigation than content.

How does http://landor.com guide the readers’ eyes and focus their attention on what is important? (Chapter 7: Follow the eye)

• Landor guides the reader’s eye by giving the user a guided tour, there are very few options its just a straight scroll up and down. The website is trying to use as little distractions as possible so that the user has an easier time navigating through the website. They also use very bright colors like yellow, to really grab the user’s attention on what is important. The most important or most recent post is of course the first image you see on the page.

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?

To me, it seems that apples website tries to get new products on the website first, while making other products accessible with a lot of information to view.

For example, when you first get to their web page, the first thing you see is a minimalistic ad for their iPhone 7, that just says “iPhone, This is 7.” with a black and gray iPhone and a gold and rose gold colored ones peaking out of the corners. This information is the first thing you see, and it lets you know they have a new product right away.

If a user has just purchased a macbook, they can easily find the MacBook page, and it shows a tab where you can view mac specs and “find the best Mac for you.” A student buying their first MacBook can find necessary information and easily compare models to find a computer to best serve their needs.

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

The functional specifications of Facebook’s wall, to me, is to be a home base for the website, with scrolling available to look through new posts by the user’s friends on the site. This helps to let the user connect with other users through shared content. Also, available are links to messages, pages, groups, games, and other links to explore different areas of the website.

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

The four architectural approaches are hierarchical, matrix, organic, and sequential structures.

Hierarchical structure is made up of nodes that have a “parent/child” relationship with other nodes. The child nodes represent narrower concepts within the broader category that is the parent node. And example of a hierarchical structure is family trees, classification trees (like the classification of living things), and other ways to sort needs.

A matrix structure is a structure that allows the user to move between the different nodes along two or more dimensions. According to the book, matrix structures can accommodate different needs of users, for example, browsing products by different categories. An example of matrix structures would be where structure in a company have dual reporting relationships, like between manager and product manager.

An organic structure is one that doesn’t attempt to follow any consistent pattern. The nodes are connected through a case by case basis and are useful for exploring a set of topics whose relationship is unclear or evolving. An example of an organic structure would be mind mapping as a use of brainstorming.

A sequential structure is one that is a flow of language that follows an order. the book calls this structure the most familiar one to most of us and the use of this structure is better for smaller scale structures like, for example, articles and instructional material.

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

It seemed to me the almost 100% of the Huffington Post home pages navigation. While there are titles with blips about the articles, the majority of those are links to content.

Google is the same way, as it is used as a tool to search for content.

Wikipedia is less so a navigational tool, as it’s index page has full content on it. The home page has a featured article that you can read on the same page without the need to redirect you.

Etsy is more of a shopping site, showing you clothing and other content for sale. The information is there right away but for more you are redirected to the products information page, where you can read reviews, comment, or buy the product.

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

This website guides the eye downward and through the content, with a few stops along the way to redirect you to content and information about the company.  By leading the eye downwards in a sequential order through examples of their work and articles, they help control where the user is looking and what they have to look at.

• The goal of Apple’s website is to be a hub for all things related to their products. It’s a great resource for a potential customer that wants to gather information on products, a current customer interested in the latest information on their products, and also offers support to current customers having an issue with an Apple product. A customer who has just purchased their first MacBook will have all of their needs met on this website. The navigational bar is very clear and at the top of the page. This customer would find the most use out of the Support page, as the Mac page is aimed at potential customers interested in learning more about the product. From their, the customer can enter in any questions they have about their new MacBook. If they need more help than the support page and support communities can provide, the website also has the option to chat with a representative either online or on the phone. Overall, the website is very helpful to any type of customer!
• Functional specifications are typically typed up in one big document that details what the programmers want to be included on their site. Facebook, for example, has a search bar to look up friends/pages/events, drop down bars showing your notifications/friend requests/private messages, a home button, a left navigational bar with shortcuts to your popular pages, a place for you to update your status, the wall itself which shows your friend’s and liked page’s posts, a sidebar for easy access to messaging, and details on a page if you have one. The programmers wanted to make sure that you had easy access to everything you wanted to do while on Facebook. This allows people to quickly find what they want, making the experience more enjoyable and making the user have a more positive outlook toward the site.
• The four architectural approaches to information structure are hierarchical, matrix, organic, and sequential. The easiest example of a hierarchical structure is software. Software uses a parent/child relationship that is found in the hierarchical structure. The matrix structure can be found in websites like Amazon or some clothing store like H&M that allows you to browse by color, size, or price. Organic structures, which don’t follow any consistent patterns, are good for some educational and entertainment sites which allow users to have a free-form exploration but make it difficult for them to reliably find their way back. Lastly, sequential structures are the most popular offline. This structure is similar to how we view books, articles, and audio and can be found in online articles, or anything on a smaller scale.
• The majority of the Huffington Post, Etsy, Google, and Wikipedia pages are navigation. News sites like the Huffington Post are relying on you clicking on their articles, that’s how they make their money and that’s the point of their business, to provide information. So they list a bunch of links to all of their articles, hoping one will catch your eye and you’ll click on it. Marketplaces like Etsy are heavy in navigation because they want you to click on a product and purchase it. Informational and search engine sites also have a lot of navigation because they want all of the information you want to be just a click away so you’ll like them and keep coming back.
• Landor has a beautifully executed, rectangular, and asymmetrical design. The limited color use allows the user to focus on what’s important, and the color also guides your eyes to where the designers want to lead you. Having their navigation tucked behind a hamburger menu also keeps the viewer’s eyes on the information they want them to know and they can decide later what they’d like to do with it. The clean cut, rectangular design makes the site clear in its intentions and doesn’t distract from the message.

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? (Chapter 3)

• The goals of Apple’s website is to showcase their products and explain to users everything that an Apple product can help them do. Apple likes to show their consumers that it isn’t that hard and they are user friendly, especially if they want to create/interact with content.
• Once the user clicks on the Macbook that they have purchased, they have access to every detail they could need or want to know about their new device. Apple provides written and visual information about the technology itself as well as the interactability of the device. If the user has any questions, there is also a section of the website where they can find answers or contact Apple Support.

What are the functional specifications of Facebook’s wall? If you are not on Facebook what are the specs for the signup page? (Chapter 4: Functional Specifications, Content Requirements and Prioritizing Requirements)

• I have a Facebook account but I never use it. From the interactions I have had with the website and app I feel that Facebook has a major drive for user generated content. By this, I mean that Facebook’s main function is to give every user the same tools to create, share, and show interest in different organizations or subjects. Facebook provides users with a “status” and a “wall” to provide information to their “friends” and interact with each other. Facebook even further developed their “Like” button to a “reaction” button so that they could show more emotion and exactly what they were feeling regarding a post. From my experience (or lack there of), Facebook is more of a platform with everything set up to be used. It also has ads which are meant to engage users and potentially interact with them. The ads are also geared towards each individual user’s account based on their likes and interests and searches. This function makes it possible for Facebook to learn about each user. All of these details are functional specifications that the makers of Facebook knew were critical to the success of their website/app.

 

What are four architectural approaches to information structure? Find one example of each. (Chapter 5: Information Architecture)

• Hierarchal
  • www.bjsrestaurants.com, or other restaurant pages alike, have a navigation bar with links that drop down from the menu to offer more options and paths. The links in the drop downs are related to the parent link but offer more information.
• Matrix
  • When shopping online, I may narrow my search for dresses by color, size, cut, brand, and fabric. This allows me to search for several different things at once to help narrow my search because I have more that one need asking to be met all at once.
• Organic
  • This one is confusing me a little bit because I am having a hard time finding examples. I think that a good example of an organic structure would be buzzfeed.com. Any link you click on leads to a completely new page with information only related to the link you just clicked but nothing relating to your previous searches/clicks. Everything seems a bit random and without much structure, but I think some more examples would be a big help in clearing this up for me.
• Sequential
  • Book or article–meant to be read in a specific order so it is given in a specific order. I’m not completely positive about this example, but something like an online test could qualify as sequential. There is a specific order that the user is directed to take and you cannot move on until you have completely the first section provided.

 

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

• The Huffington Post
  • Going off of the index page, about 98% of the page is navigation. The only content that I see is from the headlines within the links.
• Google
  • For this index page- which I’m assuming is just the search bar and logo along with the links to gmail accounts/spin offs- it is all navigation. The only thing that I can think of that would be considered content is the Google symbol itself. This is because they sometimes have art featured or special links within the logo that would be considered content more than navigation (or maybe an alternate/creative way of navigating).
• Wikipedia
  • This index page is probably 99% navigation besides the small blurb that says who Wikipedia is hosted by towards the bottom of the page.
• Etsy
  • Etsy seems to have a lot more content because the links are all within their ads/stock photos. This is tricky though, for me at least, because I’m not sure of it should be considered content or navigation since the goal of the content is to be clicked to navigate to something else. Since there is more content visible on this page, I want to say it’s close to 60% content, 40% navigation (even though I feel like those numbers could flip flop).

 

How does http://landor.com guide the reader’s’ eyes and focus their attention on what is important? (Chapter 7: Follow the eye )

• This website makes it so that the user can only see one visual and relating text at once. This makes it easy for the user to stay focused on what Landor wants them to be focused on. Everyone reads from left to right, so when the text is on the left, it allows the reader to receive an explanation first and then move on to the visual. Sometimes there is only text or only a visual, which only intensifies the users focus on that one piece of information.

• Apple’s website serves as both an informational outlet for potential customers to do more research on Apple’s products and software as well as a way for current Apple product users to troubleshoot any problems they may be having with their devices. According to “Elements of the User Experience” by Jesse James Garrett, user needs are important. If a new Mac owner needs help setting up their device or needs assistance on how certain features work, Apple’s website breaks down step by step how to fix the problem. Each device Apple offers has it’s own tab on the homepage which allows users to easily navigate the page to find what information they need. Apple also lets their customers have the option of getting help from an Apple professional straight from their website.
• Facebook’s wall showcase a particular user’s profile picture and general information (education, relationship status, birthday, number of friends, etc.). It also shows what and when the user posts statuses or pictures, shares an article, video, or picture with their friends. The wall is also a platform for other users to post on to send that particular person a public message. The wall is in sequential order and has a scrolling function that allows users to scroll through a person’s activity throughout the week, month, and even year.
• Four types of Architectural Approaches:
  • Hierarchy – tgifridays.com (The homepage has options to take you to several different options such as lunch, dinner, and catering. Each of those links then has their own page which take you into the more specific features of that particular section of the website.)
  • Matrix – target.com (When searching for products, the user is able to specify exactly what they are looking for by color, size, quantity, etc., and the website narrows the search for you to make it easier to find the products you want.)
  • Organic – perezhilton.com (A famous blogger, Perez Hilton formats his webpage so his users can scroll down the page and read article after article, but users have to click all over the place if they are searching for a very specific topic. This, in return, may make it hard to find the same article more than once.) 
  • Sequential – pinterest.com (Pinterest allows its users to simply scroll freely down the webpage to look at and pin anything they want to their board. It’s very easy to go back and forth between pages if need be but it doesn’t take you all over the place.) 
• Huffington Post’s index page is about 10 percent content and 90 percent navigation. The homepage has a navigation bar that will take you basically anywhere on the website as well as tabs that take you to all of their social media pages. It also is filled with pictures and link that take you to all of the articles on the website. This part of the index is also part of the content of the website. Since there are so many articles listed on the homepage, it covers a lot of the recent content on their site. Google on the other hand, is 100 percent navigation. There is no set place that the website will take you; it all depends on what the user wants to search for and what he/she needs. Wikipedia is probably close to 99 percent navigation besides the small amount of text that states who Wikipedia is sponsored by and so forth. Etsy is definitely a content heavy website: 70 percent content and 30 percent navigation. Since most of the content is visible once the user does one singular search, the navigation doesn’t take up most of the surface. These numbers, though, could be interchangeable because the navigation could be related to the content.
• Landor.com has a scrolling feature that focuses on specific aspect at a time. Once the user has read one section of the website and scrolls down, the section previous begins disappear slowly and the new one slowly begins to appear where the old one once was. Once the scroll is complete, the portion of the website that wishes to be active becomes perfectly clear. This makes the website easy to navigate through without having to click all over the place to find things.