Chapter 6 Response

Interaction designers have contributed the the shift in cultural norms. The first norm that changed was the thought that technology was fragile. Through developments with technology and interaction design, everyday users have the ability to be a bit more lax with their skills and still end up getting done what they need to with minimal error. The second norm was that only engineers could use computers and softwares alike. Computers and technology have become apart of mundane life. Anyone can have access to a computer or a smart device with infinite possibilities and activities.

 

A designer must make decisions about the technology they are working on so that it makes things feel like common sense to the user. This was something that really stuck out to me from this chapter. At first mention of this, I thought that it was obvious: it’s common sense but it can’t be that hard. However, common sense is not all that common, especially when there are so many options and pathways to take in technology and design. The book mentions a designers thinking of adding a “Mention This Person in a Tweet” button when a user would click on someone in their contact list. To me, that sounds ridiculous. Why would I go to my Phone’s contacts to tweet someone? Yet, from a designer’s perspective, this is a possibility so why not explore it?

 

Another thing that this chapter points out is how design could negatively affect society/behavior. They ask, “Consider a day without digital technology. Can you make it through one day–still completing your major goals for the day–without utilizing digital technology?” (p. 93). This really struck me because I think (I know) my answer would be a strong and resounding “NO”. Everything I do revolves around technology. If I don’t have wifi, I can forget about any assignments for my classes or talking to any of my friends or family. Stay updated with the news? Nope, no chance. It’s kind of terrifying, but when the technology is there and working properly, it’s amazing and makes my day run so smoothly.

 

This chapter was interesting because it really made me think about the possible positive and negative effects of design and technology. The ways that technology have already changed the way that people learn and think and interact with other people and things around the is incredible. The way that my grandmother learned is completely different from how I learn now. Technology does not scare the newer generations. It will be interesting to see how technology and design will continue to change and shape society and our norms.

Thoughts on Interaction Design: Chapters 3, 4, & 5

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

  • Ethnography can teach designers about what users will want and need. Ethnography will help predict how users will interact with a design. Study groups/user testing could show us that a user is concerned with the security of their online banking website/app. They could express that they would be comfortable if it looked a certain way or had extra checkpoints (like security questions or verification of their password).

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

  • A design is finished when the function of the design doesn’t seem like it was designed at all. The way a design functions and the way someone interacts with the design should feel intuitive and instinctual as if it has to be designed that way. The design should serve its purpose completely and leave the user without questions of how to use the technology.
  • A design should be balanced between aesthetics and user engagement/useage.
  • A design should serve its purpose easily and with little to no question/complication.

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

  • Apple: I have an iPhone, which I stay up to date on all of the new gadgets and updates. I have a Macbook Pro that I use everyday and connect it to my iPhone. I have an iPad to stay connected in more portable situations, but when I don’t need my phone or my laptop. Everything that I purchase, as far as technology goes, is Apple friendly. I will not buy a product that is not compatible with all of my devices or if the product will harm any of my devices (like some charging cables from outside sources).
  • Apple’s brand is all about being innovative, but completely intuitive and user friendly. Apple’s tagline is “Think Different”, which speaks a lot about the brand and how they want to be viewed.
  • Apple is not just a product, it’s a lifestyle. Everything that I do revolved around how I use one of my Apple products. All of my assignments are done on a Mac. All of my communication-other than in person- is done on an iPhone or Mac. Everything is connected to each other in iCloud. Everything I do (sadly, probably) revolves around Apple technology.

Movie Response

Movie Response

 

Two big points really stuck out to me from the in-class movie: (1) Good design will make the object make sense and (2) good design is as little design as possible. When these points were presented, they went on to talk about Apple and how innovative yet intuitive their products are. Apple products are made to be so user friendly that there is no question on why something is designed the way that it is. The functions and designs of Apple products are received in a way that makes sense. “Makes sense” meaning that it is as if there is no other way the technology could have been designed; it is made that way because of course it was made that way! Why would it be any other way? This way just makes sense.  

The movie went on to interview a designer from Apple. He explained how they tried to design functions on the MacBook Pro to be subtle signals to the user (blinking light on the front that lets the user know that the device is on) but that when the device is being used and there is no use for that function, it fades away as if it was never there. Another function that the MacBook Pro has is the battery life bar on the left side. There is a button to press that will show the user the battery life of the laptop without having to actually open the laptop. I think that features like this are important, especially for aesthetics purposes; small features that offer support but don’t overwhelm the design. After having that pointed out to me in the movie, it really started to make sense of all other Apple products and the way we interact with them.

I think that these two points are the biggest takeaways for me and my major/minor. It will be important for me to keep users and consumers in mind when working in advertising and/or web design. Making things almost painfully obvious for the user can only be a beneficial thing. You never want to make your users/consumers feel stupid, so making things make sense is the best way to avoid that issue.

Thoughts on Interaction Design: Chapters 1 & 2

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.

Gas App Narrative: Why Me?!

Have you ever had a morning where everything seems to be going wrong? By “wrong” I mean “why is my life like this?” kind of wrong. Wake up late. No hot water. Forgot to put away the laundry, which means your clothes are all wrinkled and there’s no time to iron them. Gotta forget about doing your hair or trying to look presentable, because that train left an hour ago when you were still sleeping (a better time). Don’t even think about grabbing coffee. Your manager is already judging you enough for how you look. Maybe just grab the basic coffee from the nice lady at the front desk- I think her name is Jan? Janine? Jenna? Great woman.

 

So, you make it out the front door and get in the car. You have an “oh my god why me?!” moment when you remember that you were running low on gas yesterday. But then you remember- you had an app take care of that. On your way out of the office yesterday your phone went off letting you know that your gas tank was running low. So you login on the app with your thumbprint and see that you have 8 miles until empty and then check the prices at the closest gas stations. When you find the one with the best deal that will offer you the most reward points, you make your way to the station. As you pull in you scan the pump and pay from the app (a nice feature for someone who doesn’t want to deal with the general public after a long day of acting like you care at work). Once the tank is filled, you get another notification on your app saying that you received enough points for a free cup of coffee.

 

Back to reality and you realize that maybe Jan can keep her coffee today. The tank is filled and you have just enough time to grab that free coffee and make it to work on time. Sure, your manager is still looking at your sideways for the wrinkled clothes, but you’re alert and on time and the day can only get better from here.

The Element of User Experience Q&A

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.

Review #4: Restaurant Comparison

A possible contender for our restaurant, The Woking Taco, is Over the Bar Bicycle Cafe. Over the Bar Bicycle Cafe is located in Southside in Pittsburgh, Pennsylvania.  This restaurant is competition for The Woking Taco because it is in the same general location. Also, the two restaurants have have similar brand qualities when it comes to appeal, audience, and overall tone as they are a more edgy/quirky themed restaurant with a unique name.

 

For Over the Bar Bicycle Cafe’s website, it is quite simple. It is a one page site with very little information offered at first glance. There are links to the different menus that they offer and a link to apply for a position. They have a link for directions and to their social media accounts. This layout makes navigation tricky. This page feel less engaging and harder to locate the information/answer that you are seeking; it takes a bit more digging. The colors are consistent on the homepage. The darker colors with the bright green adds a fun element to it but keeps it clean. The background, wooden panels with drawings of bicycle/sports related logos, adds a bit of texture to the page. All of these elements, however, are lost when you click on the menu links. The theme is not as strongly represented on the other pages, which causes some disconnect when switching from homepage to linked menus.
When comparing Over the Bar Bicycle Cafe’s website to our site for The Woking Taco, it is clear that The Woking Taco is more cohesive across all pages of the site. The Woking Taco’s website is consistent in overall design with special regards to color and layout. The links and the information that they hold are easily navigated. This is the most important aspect of our site for The Woking Taco that stands out against the website for Over the Bar Bicycle Cafe. This is because a user is more likely to stay on a sight when it is extremely easy for them to find what they are looking for. Not only does the Woking Taco offer easy navigation on our website, it also offers a pleasing and sensible design and layout for a restaurant. Having the colors cohesive throughout all links within the website will stand out against our competition’s websites.   

Review #3: Restaurant Comparison

I focused on two local restaurants, Six Penn Kitchen and BJ’s Restaurant and Brewhouse. At first glance, both websites seem fairly similar in terms of the type of content that they provide: menus, location, about page, and some links unique to their establishment. In regards to balance, Six Penn Kitchen seems to appear more balanced in terms of layout on the homepage. The logo is in the middle with three links on either side. On BJ’s website, it isn’t as aesthetically pleasing because of the imbalance on the navigation bar. There is a location/shopping cart in red at the top right corner that throws off the look, at least for me. Looking at the unifying qualities of both websites is interesting, because of the overall quality it speaks to the user. Six Penn Kitchen does a much better job keeping in theme on every single page of their website. The color scheme is consistent throughout with the black, grey, white, and green. BJ’s is consistent for a few pages by keeping the same background and basic layout, however, when you move to the “Our Craft”, “Our Beers”, and “My Rewards” sections, they change theme and it kind of throws everything off as a user. A far as emphasis is concerned, the sites are very similar. Both sites put the most emphasis/attention on their logos by making them the largest thing with the most color at the tops of their pages. For layout, Six Penn Kitchen’s menu reads like a typical menu you would see in a restaurant. BJ’s is more of a boxy/square layout that shows the categories of food that they offer that you have to click on to see the dishes. Six Penn has a more straightforward layout that is much easier to find exactly what you’re looking for with the least amount of clicks; BJ’s is the exact opposite.

Let’s look, now, at both sites in regards to Krug’s 5 “things”:

  1. Both sites create a clear visual hierarchy in the way that it is clear that all tabs are at the very top of every page in the navigation bar. Each section from the navigation bar then has a certain amount of pages under that category.
  2. BJ’s uses more photos on their menus-almost only pictures, which is overwhelming. Six Penn Kitchen has some pictures on their homepage but there aren’t any pictures on their menus, which makes it more clear but a little boring.
  3. Both sites do a great job at breaking pages into clearly defined areas that makes it easy for the user to find what they are looking for. However, I think that Six Penn Kitchen does a slightly better job than this, because BJ’s has too many things that need to be clicked to get your wanted end result.
  4. Both sites make it very obvious what constitutes a clickable link by either highlighting specific links or making it known that its clickable when you move your mouse over the graphic (like their logos to go back to the home page).
  5. Six Penn Kitchen does a better job at minimizing noise by having a small amount of clicks to get to the wanted end result (typically the menu). As stated before, BJ’s has a lot of unwanted noise by creating so many subcategories within their menus.

All in all, Six Penn Kitchen did a better job than BJ’s Restaurant and Brewhouse at drawing in my attention. This is because of their sleek layout, minimal noise, and clear and consistent layout.

Review 2: Single Page Site

Z Creative Labs

Z Creative Labs’ single page site uses only black, white, gray, and pink in terms of color. The page scrolls from top to bottom. Along the side of the page there is a navigation bar that has an arrow pointing down to further emphasize the way the page is meant to be navigated. As you scroll there is a “Get in Touch” button in the top right corner that is clickable to contact the creators. At the bottom right corner there is a “Return to Top of Page” arrow that moves with you as you scroll. Most importantly, Z Creative Labs’ logo scrolls with you along the top left of the page.There are drawings that are “drawn” in the background of each section of the site to match the information that is being provided. These drawings are moving and are actively “drawn” when you scroll over its section. All of the drawings and uniform colors provide a sense of unity in terms of design. As you scroll down the page the title of the subject is in bright pink and is the largest font size in each section, which makes it easy to scan and read and see if it is the information you are seeking. The content is very straightforward and written in in a way that is easy to understand with common, everyday terminology.

 

The single page site for Z Creative Labs creatively depicts their company’s purpose in a creative and effective way. The consistency with color, graphics, movement, navigation, and scrolling capabilities works for them. It is easy for any user to find the information they seek. The site is easy to scan, read, and interpret the content provided. The site is easily navigated due to the scrolling, navigation bar, and clickability.

 

Review 1: Ulta Beauty

Ulta has a visually pleasing website at first glance. The colors work well and tie in to the brand as a whole, coming from an Advertising point of view. The search bar is front and center with an easy-to-decipher navigation bar on the lefthand side. The categories make it easy to break down what you’re looking for into smaller subsections. Also, when looking at the homepage it has the sales pictured in a slideshow type of way in the very center of the page. There is a popup at the bottom of the homepage (it follows and stays at the bottom even when you scroll down the page) that gives you the option to sign up for emails and future sales. The homepage is very scannable.

I used the search bar to look for the Tarte Shape Tape Concealer and placed it in my cart. The process was easy and thoughtless. The links were made obvious and once I added the item to the cart there was an option to go to checkout or to continue shopping and this was made clear with the buttons shown on the screen. There were suggested  products based on my purchase interest that made it easy to browse similar products.

Going back to the homepage, if I didn’t use the search bar it would take a few extra clicks to find the exact product that I was looking for. However, I would still successfully make it there in a fairly short amount of time with minimal thinking and question. If I was searching for concealer in general, it would be easy to find all products that fall under that category and then compare all products to find the best match for me. If I wanted to shop for products in term of brand, that would be just as easy with the “Shop by Brand” link at the top of the navigation bar on the lefthand side.

There was not a moment that I questioned where I should click or what to search for or which link would be the most efficient one to click to take me where I wanted to go. Navigation through this website seemed natural and “thoughtless”. Users with little online experience would be able to successfully navigate their way around the site to find the products they’re looking for and checkout with little to no frustration. According to Steve Krug in his book, Don’t Make Me Think, it is important for users to not question where they need to go within a site; everything should be easy and scannable. When scanning Ulta’s website, I can easily find my desired destination thanks to their good use of layout and links.