Week 8 Glossary

Leave a comment

GCOM 360

Week 8 Glossary

 

JPG

JPG, also known as JPEG, is a method for compressing digital images. Digital images of high definition are compressed accordingly, causing quality loss in exchange for smaller storage size.

 

GIF

GIF is short for Graphic Interchange Format. This format supports animation and only up to 256 different colors for each frame. They are suitable for simple animation images and static images with solid areas of color.

 

PNG

PNG is the acronym for Portable Network Graphics. It is a raster image format designed for transferring images on the Internet. It supports lossless data compression and palette-based full color images with or without backgrounds.

 

Lossy Compression

Lossy compression is a method used to reduce data size for storing and transmitting. Common examples of this method are JPEG images, MPEG videos, and MP3 audio files. It can provide high degrees of compression and results in smaller files, but the loss of data is irreversible.

 

Progressive Image

When clicked on in a web page, progressive images will load in at full size, looking pixelated and becoming clearer as it loads. Compared to normal pictures that load line by line, progressive images greatly improve user experience by quickly giving users a rough idea of what these images are about.

 

Dithering

Dithering is a process of random arrangement of pixels. It creates illusions of color that are not actually present in order to give images more details.

 

8-bit color

8-bit color graphics is a method of storing image information. Each pixel is represented by one 8-bit byte. The maximum number of colors that can be displayed at any one time in an 8-bit color image is 256.

 

Hexadecimal

Hexadecimal color is a six-digit, three-byte hexadecimal number used to represent colors in HTML, CSS, SVG, and other computing applications. Each byte represents red, green and blue components of the color. One byte represents a number in the range of 00 to FF in hexadecimal notation or 0 to 255 in decimal notation.

 

Transparency Matte

Transparency matte works with the GIF, PNG, and JPEG formats. It simulates transparency by filling or blending transparent pixels with a matte color that matches the web page background. Background matting works best if the web page background is a solid color.

 

Image Map

 In HTML, an image map provides a way of linking various parts of an image without dividing the image into separate image files. It is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different link destinations.

Week 7 Glossary

Leave a comment

GCOM 360

Week 7 Glossary

 

Iterative

Iterative is related to a cyclic and repetitive design process. Such a design process comprises of prototyping, testing, analyzing and refining a product. Each iterative process brings a product closer to the ideal goal.

 

Paper Prototypes

Paper prototypes are rough hand-sketched prototypes created for usability and user-interface testing. They are effective in helping designers to find and fix design mistakes quickly.

 

Low-Fidelity Prototypes

Low-fidelity prototypes consist of lines and simple gray shapes that demonstrate the structure and the basic visual hierarchy of the design. They are cost-effective tools for designers to present the structure and interactivity of the project to stakeholders.

 

High-Fidelity Prototypes

High-fidelity prototypes mimic all the elements that will appear in the final design with realistic detail. They look almost completely like the real product, and allow stakeholders get a clear idea of how the product will work. They also engage users to provide meaningful feedback during usability testing.

 

Heuristic

In computer science, heuristic is a technique designed to solve problems more quickly with a “good enough” instead of a perfect solution. It is a shortcut to achieve results rapidly by trading off accuracy and completeness.

 

Rollovers

Rollovers refer to buttons on webpages that react when users roll their mouse cursors over them. That is achieved by using JavaScript to replace the picture on the button with another picture, creating an interactive effect.

 

Front-end development

Front-end development is the practice of using HTML, CSS, and JavaScript to create a graphical user interface for users to interact with on webpages and other web applications.

 

Back-end development

Back-end development is associated with the unseen aspect of website and web application development. It consists of working with servers, applications, and databases.

  

Below the Fold

Below the fold refers to the area of a webpage that can only be seen when scrolled down.

 

Favicon

Favicon is also known as bookmark icon, tab icon, or URL icon. It appears as an icon next to a page’s title on the browser tab, or next to a page’s name on a bookmark list. It is an important icon of a website’s branding, as it quickly help users distinguish a specific website from others.

Week 8 Critical Analysis

Leave a comment

GCOM 360

Week 8 Critical Analysis

 

Discuss how each of the 5 Design Decision Styles were used or referenced in the IDEO Shopping Cart Project story?

 

  1. Unintended Design

On the second day of the IDEO shopping cart design process, one member came up with an idea of a “privacy blind”. He gave an example of “a privacy blind, like when you buy six cases of condoms.”[1]

As Spool said, “the team focuses on the act of development and deployment without any consideration of what will happen when people try to use it.”[2] This team member forgot about how users would react to this design. Even if the customer put six cases of condoms under the privacy blind, eventually he would still have to take them out and put them on a conveyor belt where everyone could see what he was buying.

 

  1. Self Design

Self Design style is more or less practiced throughout the whole design process, as a shopping cart is something everyone would use in daily life.

As Spool put it, “decisions from the Self Design style are informed by the team members own use of the design.”[2] The team members all somewhat took reference from their own life experiences with a shopping cart, and wanted to design a shopping cart that they would love to use themselves.

 

  1. Genius Design

During the research phase of the design process, the team members were divided into groups. One group went to ask for advice from an expert who had an insightful experience with shopping carts. The expert’s experience with plastic shopping carts gave them a good reference for choosing the proper materials.

As Spool said, “the Genius Design style looks to the vast previous experience of the team members… Genius design works well with very experienced team members.”[2] The design team taking the advice from a shopping cart expert is an example of implementation of the Genius Design style.

 

  1. Activity-Focused Design

The shopping cart design project was carried out in a heavy Activity-focused Design style. Team member did all kinds of activities: researching, brainstorming, team discussion, etc.

As Spool explained that, “Teams using the Activity-Focused style will plan and execute research looking at the users’ activities.”[2] For example, during the researching phase, one member proposed that the shopping cart seat should be redesigned according to the shopping cart injury reports he had read.

 

  1. User-Focused Design

When team members split into groups, Jane Fulton Suri went to grocery store to observe how customers use shopping carts. She noticed that, “people don’t like to let go of the cart.”[1] Later this observation was transformed into more comfortable handles on the new shopping cart design.

As Spool said, User-Focused Design “is necessary if the team is looking to create an excellent experience overall.”

 

Which of the 5 styles played the most important role in the design process in the video, and why?

Activity-Focused Design and User-Focused Design played the most important roles in the design process in the video. The teams conducted a lot of research beforehand to ensure every team member understood what problems they needed to solve in order to design a shopping cart that could provide a better user experience. After that, they conducted intense trial and error activities within the lab to iterate the design. These two high-end design styles ensured the final shopping cart met the requirements both functionally and aesthetically, while at the same time giving an excellent user experience.

 

References

  1. “5 Design Decision Styles. What’s Yours?”. Jared M. Spool. Jan 21, 2009.
  2. “ABC Nightline – IDEO Shopping Cart”. Youtube Video.