Category Archives: Week 6

The Affordances of Flash Cards: Interaction with Paper and Digital Variants

Flash cards have been a common tactic for many students to learn lists of vocabulary words and concepts. They are a quick way to test knowledge, and then flip the card to see how well they knew the contents of that card. Students can test themselves on any kind of content that can be drawn on the card, whether in the form of text, images, and/or color coding. Cards can be laid out on the floor, sorted and/or resorted into different boxes, and They can even be mobile, often stored in a small box or on a key ring. Grab a friend and they can easily pull out the cards and quiz you on your knowledge.

These perceived and actual action possibilities are what designers call “affordances”. They are what drive people to make and use flashcards. Software designers have sought to make money by translating these affordances into a digital format, with varying degrees of success. In some ways flash cards make more sense in a digital environment, but in other ways certain affordances are not as immediately perceived.

Don Norman, a leading thinker on the concept of affordances, said that “…affordances are of little use if they are not visible to the users. Hence, the art of the designer is to ensure that the desired, relevant actions are readily perceivable (Norman, 1999).”. In other words, if those affordances are not immediately apparent on the digital media display then the digital format for flash cards will not be very useful, even if they have many more applications and “usefulness” baked into their design.“Strong visual cues” are what indicate the potential uses on the screen, such as “clickable buttons and tabs,draggable sliders”, things that suggest actions and effects (Kaptelinin, 2013).

We can see some of these visual clues specific to digital flashcards. Take for example Anki, one of the more powerful flashcard applications.

Within the above image, you can see three screens. These screens are images from an iphone where I’ve downloaded a flashcard list of portuguese phrases. On the first screen, I can immediately see that there is a “play” icon that lets me listen to the phrase being recited out loud. With a tap, the second screen reveals the answer, and I can indicate on the bottom whether I want that card to be repeated in 1 minute, 1 day, or 4 days. These lengths will change automatically through continued study of the flashcards, whether repeated success or failure, the software has algorithms that spaces the card to best help you learn the concepts. If i were to swipe the screen I can modify the card or its location through a slider and a series of buttons.

Paying attention to actual affordances, Anki is a superior offering to traditional flashcards. Within the confines of my phone and one screen, I can store tens of thousands of flashcards that can be spaced out for frequent or sporadic practice organically. I can embed audio for practicing pronunciation, insert images, even see statistics on how well I am progressing with certain terms or data sets.

Paying attention to perceived affordances, and it’s hard to see all of this value. It’s not immediately obvious that tapping the card will flip it to the other side. The spaced repetition algorithms offered at the bottom of the second screenshot are also not immediately obvous despite an attempt to indicate accomplishment through a color code. (Red for don’t know, so give it back in a minute. Green for so-so, give it back in a day or so. Grey for it’s solid, bring it back in 4 days.)

I love anki. It’s a powerful application to do a lot of cool things I used to use flashcards for. Many others, however, find it useless. I don’t blame them.

Sources

Kaptelinin, Victor. “Affordances.” The Encyclopedia of Human-Computer Interaction, 2nd Ed., 2013. https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/affordances.

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Affordances and Constraints of Apps

Apps present an interesting design construct when it comes to affordances. As the gateway to almost all of the digital content we consume, the app is a crucial piece of the digital world. We use them every day, for a myriad of purposes.

Pre-Engagement

The first design element I notice about the app is its shape on the screen. Designing the app as a button icon affords a “pushing” (or tapping) action. We are familiar with buttons, and already know what to do with them when encountering one. The icon will usually consist of an app-relevant picture with the title of the app underneath, similar to a book or album cover. The app is positioned in a grid next to other apps. We are familiar with this concept of a row/grid of various titles from the other marketplaces of audio/visual content, like movie stores, book stores, or music stores. One constraint of this process is 2D substrate of the device. Unlike books or records or DVDs/VHS tapes, you cannot pick up the app and manipulate it in 3D. There is no back cover of the app, which is where a lot of information was stored in those older forms of media. This constraint can often be played with, or overcome, through the design choices of the particular app. There is a relatively infinite amount of information that can be stored on digital apps, and can be accessed through scrolling, which is a digital affordance we now have.

Opening the app

Once clicked, the app springs to life by covering the entire screen of the device. The phone/tablet turns from a marketplace of potential uses into a tool for one. The software takes over the entire screen of the device, allowing for not only a much larger range of visual features, but also the multi-touch features of the touchscreen. The full screen also affords a larger share of attention to the particular app. One constraint of this app interface is, again, the 2-Dimensional substrate. You cannot open an app the same way you open a book or album. The entire process takes place on a flat grid.

Design Principles

The designer of the app has to contend with the unique constraints of digital devices while pulling from the affordances we expect from traditional media and devices. The Murray reading did a good job of explaining how the introduction of digital media meant a new school of design was needed to explore this “problem”. Nowadays, we are building on this already established school of digital design affordances, but there is always more to add and refine. One of the central lessons I have gleaned from this course, so far, is that design is an exercise of choice. The individuals and institutions that have guided our design processes so far have made conscious and distinct choices to follow certain affordance paths and move away from certain constraint paths.

References

1. Murray, Janet. Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012.

2. Kaptelinin, Victor. “Affordances.” The Encyclopedia of Human-Computer Interaction, 2nd Ed., 2013. https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/affordances.

3. Norman, Donald. “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Contemporary Images on Instagram: a case for Facetunes 2

Grace Chimezie

Introduction

According to Murray (2012), Digital design is about shaping interaction within new combinations of the format and genre conventions that make up a new medium. New media technologies such as Facetune or the Instagram applications are attractive to us because they offer new opportunities for the defining human activity of symbolic expression. Design can be directed at objects, for pleasure or utility.

My mobile phone, facetune, and Instagram make up a joint attentional scene. When it comes to creating content with images in a contemporary and aesthetically driven world, everyone has cultural biases, expectations, and value judgments that are the result of associating with a particular subgroup. It is the job of the designer to identify and consciously examine these biases so they can become the subject of active choices rather than passive acceptance.

Image 1. Instagram Layout : @t2pitchy 

Design Principles of Facetune/ Screen Based Interface:

Norman’s use of affordance (1988), not “affordance” what is physically possible, but perceived affordance what actions we perceive as possible is what interest design. He states that in graphical, screen-based interfaces, all that the designer has available is control over perceived affordances. The smartphone display screen (e.g touch screen) affords to tap, launching an application and clicking on every pixel on the display screen.

Image 2. Icon interface of Facetune 

Facetune 2 photo- editing application launched early January an updated version of Facetune, their mobile photo editing software. Although launch icons for both versions came out looking similar, the affordance of both bore a great difference.  The photo editing application affords you the luxury of getting your picture to fit into the contemporary narrative of how a photo should look like, especially when you’re constrained in the skilled use of software like Photoshop, and Lightroom to alter raw image file.

Adaptive/ Responsive Design

Adaptive design  Introduced in 2011 by web designer Aaron Gustafson in his book, adaptive web design where responsive design relies on changing the design pattern to fit the real estate available to it. Using this concept I believe same applies to a software application when an app detects an available space, it selects layout most appropriate for the screen.

The term response design was first coined by the web designer and developer Ethan Marcotte in his book, Responsive web design. Responsive web designs respond to changes in browser width by adjusting the placement of design element to fit in the available space. On smartphone or tablet devices, the process is automatic, the application checks for the available space and then presents itself in the ideal arrangement.

Responsive design is easier and takes less work to implement, it affords less control over your design on each screen size. Adaptive design unlike responsive design, where a screen flows from desktop design into a smaller device’s adaptive design offers tailor-made solutions. As the name suggests, they adapt to the user’s situational needs and capabilities. It allows users to be in tune with their needs on a mobile device by making designs touch friendly.

Choices not properties

In order to make truly intuitive interfaces, designers must be hyper-aware of the conventions by which we make sense of the world. The four-dimensional properties of digital environments (the participatory, procedural, spatial and encyclopedic affordances) that provide the core palette for designers across applications within the common digital medium.

Despite the great ratings of the app, Facetune 2 does not give you a full user experience if you do not have some sort of payment plan. This constrains you from having access to the main elements and features that the app provides which differentiates it from the earlier version.

Image 3: The difference between a subscribed and unsubscribed version 

Affordances/ Control

The application comes with a demo on how to use some of its features using our already existing human capacity of senses; touch and sight e.g the Spot removal tool, heal, brightening, lightning and whitening tools are activities you can use easily once you download the software app. These are part of the design affordances the app allows for human capacity and symbol expression which prompts for full-screen takeover

To use the application to it best ability which most people rarely do, one needs to use full thinking and creative skills with clear knowledge of what the intended outcome will be. These would require manipulating the filter choices and other tools to suit the contemporary style you intended as the final look of the photograph

Conclusion

Designers should consciously exploit the user’s pre-existing knowledge by looking for familiar interaction patterns that will be easy to learn and will quickly become transparent.

References:

Gibson, J.J. (1977). The theory of affordances. In R.E. Shaw & J. Bransford (Eds.), Perceiving, Acting, and Knowing. Hillsdale, NJ: Lawrence Erlbaum Associates.

Murray, J. H. (2012). Inventing the medium excerpts Introduction 1-2 pdf.

Nielsen, J. (1993). Usability engineering. Boston: AP Professional.

Norman, D.A. (1988). The Psychology of Everyday Things. New York: Basic Books. (The paperback version is Norman, 1990.)

Norman, D.A. (1990). The Design of Everyday Things. New York: Doubleday.

Amazon’s website interfaces, affordances and constrains

This weeks readings were based on the terms of affordances, constrains, interfaces and design interactions. As Murray points out in his article, digital artifacts pervade our lives, and the design decisions that shape them affect the way we think, act, understand the world, and communicate with one another.

We always find new ways of designing new medium, that’s part of our human nature. But it is critical to have a good design process, keeping in mind that it should serve a function and have a purpose.

Amazon’s website now and then

Let’s take a look at Amazon’s website since its first launch and compare it with today’s website.

Amazon’s 1994 homepage

Today’s website

Constrains, Interface, Affordances

As we can see, a lot has changed. There were a lot of constrains with the old website. First, the web page was not designed to be accessed from a phone, so it was not responsive to different screen sizes. There is the logical constrain of scrolling down. The design of the interface was not very interactive. So you see a lot of text and it constrains the customer to follow a linear path, with not much interaction.

Today’s website is much more interactive, with more options and functions. The simple website has evolved drastically. It has changed the way that people shop, from the convenience of their homes. You can shop from books, to electronic, to clothes, jewelry, shoes, food, home supplies and so much more. But even the most well-designed website can have constrains and that’s just the way it is.

The most obvious constrain is that you have to have power and be connected to the internet in order to shop online. The other constrain is that you have to have a valid credit/debit card to make the payment. And then create a profile with the user’s personal information .

I do like the interface. It is intuitive to me, in the sense of what we see and what can we operate. The search bar is the first step to look at an item that you want to purchase. Of course that the constrain with the experience is that you cannot physically look at the object, but the reviews that clients leave usually give you an idea about the object that you’re looking for. And giving an option to rate the product and leave a review also is meant to make your experience more enjoyable.

Let’s take a look at the digital affordances of this website. The use of the labels (different departments)  help the customer to correctly find a product. There is the symbol of the shopping cart to give the idea that you put the items you buy in the cart, so it’s kinda mimicking the actual experience. Now the website is responsive and you can access it on your phone as well.

I think the purpose of the amazon’s website has changed a lot since it first started. It is so convenient to “go shopping” from the comfort of your home, saving you time and in most cases also money. But is it changing the experience and the term of shopping. It makes you think that all these conveniences, are making us lazy in a way, that we don’t even want to go shopping anymore because we can do it online. And about the design process, it will not be that long before the website incorporates audio, and you could just active the speaker and tell it to search a product for you, you won’t even have to write it.

References:

Murray, Janet  Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012.

Kaptelinin, Victor. “Affordances.” The Encyclopedia of Human-Computer Interaction, 2nd Ed., 2013.

Norman, A. Donald, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Quito, Anne Amazon’s 1994 homepage. Digital image. N.p. July 18, 2016. Web. <https://qz.com/734985/this-is-what-amazons-homepage-looked-like-when-it-launched-21-years-ago-this-month/>.

Bryant, Miranda. Evening Standard, Amazon’s website. Digital Image. N.p. June 27, 2013. Web.<https://www.standard.co.uk/news/techandgadgets/new-amazon-service-lets-you-download-old-vinyl-tapes-and-cds-you-bought-from-them-in-1999-8676017.html/>.

The Windows 8 Disaster

In 2012, my computer died. It had lived a long life so this was not much of a surprise. It did, however, mean that I would have to buy into the brand new Windows 8 operating system. When Windows 8 first launched, Microsoft made it very difficult to purchase a new computer on the familiar, and much beloved Windows 7 OS. I’d heard some of the negative buzz, but was given to understand that this was a “learning curve” situation, the result of doddering old PC users who were averse to change. I was myself averse to change, but I didn’t like the idea of paying an addition $100 to “downgrade” my OS. This was a mistake.

 

Figure 1 Windows 8 Start Screen (CNET 2012)

The Windows 8 operating system was designed to be a universal operating system for a suite of Windows devices, such as the new tablets and Windows phone. In 2012, there was a sense that the tablet was going to displace the classic laptop design. Microsoft, in their rush to catch up with Apple, lock in users, and begin the migration to the cloud, failed to consider the very different ways laptops, tablets, and phones are used.

Laptop computers were designed as portable personal computers. The design of the laptop computer includes a number of affordances for time intensive work involving a great deal of human-computer interaction. The flat base of the laptop with a raised digital display is designed to make interaction while seated, or standing at a high counter, easy. The hinge design also allows the user to angle the screen, easily adjusting the computer to fit each user’s form. The design in very stable, once set up on a flat surface, the laptop is not going to fall over. The ease with which the user can input information is enhanced by the QWERTY keyboard and large graphic display. However, the size and weight of the laptop do not afford walking while operating the device. Additionally, laptops are usually wifi or ethernet dependent. These affordances led to its widespread adoption in the home and workplace, where working environments are more controlled and when work is performed over longer periods of time.

In contrast, smartphones were designed as mobile communication devices. Smartphones can be held comfortably in one hand and easily carried as an accessory. Smartphones were also designed to play games, watch videos, and access digital media while on the move. The convenience of smartphones has led to their adoption in both personal and professional settings, however it small display and relative difficulty (when compared with affordances of a QWERTY keyboard) for composing lengthy messages make them a poor choice for many business or digital media production purposes.

Finally the tablet, which at a larger size than the smartphone, was designed with affordances that fall somewhere between a laptop and a smartphone. Notably, kickstands for propping up screens and QWERTY keyboards are not affordances of the tablet and must be purchased as accessories. Most of these accessories still lack the affordance of the clam shell laptop design, such a range of motion for angling the screen. For many professional settings, the affordances of a laptop still outweigh the tablet. The most notable affordance of the tablet that has not been universally adopted into the laptop is the touchscreen.

This brings us back to Window 8, the operating system designed to be used on all three devices. The tiled display of the Windows 8 Start page was a good design for a smartphone with a touchscreen. Touchscreens afford swiping and tapping. The large blocky icons conform with size of human fingers which make them easy to select and launch. Applications launched on a smartphone are designed to take over the entire screen, which given the small size of the digital display, ensures the viewer can read all the important information presented. Unfortunately for Microsoft, these same design features when put on a laptop computer were counter productive and non-intuitive for the user experience.

On the larger graphics display, the launching of applications that take over the whole screen constrained the number of activities a user could perform at a given time. Multitasking, a simple task of having more than one window open at once, was suddenly a challenge if any of the programs being run were designed in an app format. Additionally, the apps were designed to be launched from the Start page, while more traditional programs like Microsoft office were designed to be accessed from a tradition desktop layout. Moving between these two layouts was, as described by PC World in their review of the operating system, a mess:

If all you need to do is launch an application, you can simply click its tile in the Start screen. If you need robust file management and navigation features, you have to access the desktop. After you boot the machine, pressing the Windows key sends you to the desktop. Unfortunately, the Windows key isn’t consistent in this behavior: If you’re in an app, pressing the Windows key always returns you to the Start screen. Press it again, and you’re in the most recent Windows 8 app. Instead, to move to the desktop consistently, you need to be in the habit of pressing Windows-D. Another option is to move the pointer to the lower left of the screen and click there (though this method works only if you have used no other app recently). (PCWorld 2012)

Even outside of confusion like the above, interaction was nonintuitive. The majority of laptops in 2012 did not have touchscreens so “swiping” left or right was accomplished with a mouse by scrolling up and down. The tile display that was sized for human fingers when displayed on a phone was extremely large on a laptop monitor and made the workspace busy and overwhelming. There was at once too much information and too little. Lack of signaling left users confused as to where they could find basic functions (hidden off the side of the screen, an area that previously had not existed). The affordances offered by Windows 8 were often imperceivable and violated conventions, which Norman argues are cultural constraints as they are learned behaviors “shared by a cultural group.” (Norman, 1999, 41) 

Less than a year later, Windows 8.1 was rolled out which allowed users to boot into the desktop, bypassing the Start screen. However, the damage was done. The failure of designers to consider that different devices had different affordances, as well as different rituals and behaviors associated with them, doomed Windows 8. Murray describes the designer’s task  as needing to be “grounded in the service of specific human needs: this is what gives the work clarity and direction. “ (Murray, 2012, 42) Norman gives his own warning, “Conventions are not arbitrary: they evolve, they require a community of practice…Use them with respect. Violate them only with great risk.” (Norman, 1999, 41)

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 41.

How to Get the Start Menu Back in Windows 8.” CNET. Accessed October 11, 2017. https://www.cnet.com/how-to/how-to-get-the-start-menu-back-in-windows-8/.

Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012. 42.

“Windows 8: The Official Review.” PCWorld, October 25, 2012. https://www.pcworld.com/article/2012830/windows-8-the-official-review.html

E-Book, Word, PDF, Notepad and the Idea of Paper

  1. Affordances and Interfaces of a Book

Affordance, according to Norman, is about making possible uses of a produce immediately obvious (Interactive design Foundation). Taking book as an artefact design, we can see that it is a set of rectangular paper glued on one side of the edges (normally the left), and can be opened up from the other side (normally the right side). Thus readers would know how to hold a book and open it: hold the left side, where the pages are all glued together so the book will not fall apart, and turn the pages from the right side when the reading process goes on. Also a book normally has its title on one side of the cover, thus readers could intuitively know where to start from.

The whole process happens intuitively – that is, we have our unconscious expectations about how to open a book at the moment we see it (Murray). This kind of expectations are based on the past experiences, and provided by cultural conventions as cognitive affordance (Norman). For example, readers of English (as well as many other languages) books expect the content to appear horizontally from left to right, however books in Japanese as well as traditional Chinese are expected to read vertically from right to left.

(Different ways of presenting texts)

  1. Computational and Digital Display of Paper

Books, as well as other paper products such as note books, are designed to help people to note down thoughts and deliver them. When transferred into the digital display, such as word processor (e.g. Microsoft word), PDF viewer (e.g. adobe), e-book, as well as notepad, designers still want to keep a sense of paper.

The affordance of books does not always apply to digital displays. For example, when words appear on the screen we cannot actually turn the pages like in books. However, a table of content can be used to help users better locate in the book or document, and allows readers to jump to the wanted content. Also, these document processing applications offer users ways to take notes, such as highlight and underline, as users are used to do while reading paper books.

 

2.1 E-book

E-book gadgets as well as the applications are designed with the principle to restore the experience of reading a real book. In most of the e-book applications, the reader can swipe the screen or tap on the right for turning to the next the page and left to the former page, in the purpose of simulating the feeling of turning pages in a real book. This recreates the real life artefact of turning a page to get to more content.

 

2.2 Word Processor and PDF Viewer

Word Processors and PDF viewers has also inherited the notion of page limits, but the way to turn pages is changed. We do not swipe or tab right to turn pages, instead, we roll down a bar on the right side of the screen for this process just as fir webpages. This is a merging of intended use and ease of use: content appears with limitations of paper edges so that the users can have an idea of how it will look like when printed out on paper (intended use); and at the same time, being able to e scrolled through makes the content appear consecutively, which creates a smooth reading and editing experience.

It is also interesting to mention that, when I was searching for word processor as well as PDF viewer apps, most of the appeared icons are in blue (for word) and red (for PDF). To some extent, I think this is the colour of icons of the biggest companies in these areas (Microsoft Word is blue and Adobe Reader is red). That shows that these companies have a strong force on the market share, that other applications of the similar functions need to be in the similar design or colour so that the users can have an idea of the function of the application.

 

2.3 Notepad

Different from word processor and PDF viewer, notepad does not expect the user to print out the content, thus there are no page limits in each notes. They try to give users enough space to keep a whole piece of thought in the same piece of “paper”, while another piece of thought in another piece of “paper”. Clusters are also designed to help the users better organize and group their thoughts.

Most of the notepad icons are designed as a representation of what the application is simulating (a notepad with a pencil), showing that notepads are more function oriented rather than brand identification oriented.

 

References 

Martin Irvine, “Introduction to Affordances and Interfaces.”

Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012. Selections from the Introduction and chapters 1-2.

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Interaction Design Foundation, The Encyclopedia of Human-Computer Interaction, 2nd. Ed. https://www.interaction-design.org/literature.

Affordances, Constraints and Convention of Books

This week we revisit the concepts of affordances and interfaces, but this time we go deeper into analyzing them.

Previously, in Universal Principles of Design, we learned the concept of affordances as “a property in which the physical characteristics of an object or environment influence its function”. Among the same lines, on Affordances, Kaptelinin cites Gibson “action possibilities provided to the actor by the environment”. However, there’s more to affordances and interactions.

After the concept of affordances in design was expressed by Norman in Psychology of Everyday Things, designers on the field focused on it and embraced it, often mistaking everything with an added “affordance”. Later on, Norman made some distinctions to clarify what he meant by affordances and what he considered “perceived affordances”, constraints and conventions.

Just as an affordance is an intrinsic, almost intuitive, better way of using or interacting with something, constraints are the exact opposite. Constraints are clear and obvious ways of not using or interacting with said artifact. The design of an artifact is considered “good” when it enables or affords certain uses and actions but at the same time disables or closes other uses (Irvine, Introduction to Affordances and Interfaces.)

However, on Affordance, Conventions, and Design, Norman expresses that “an essential part of making designs intuitive has to do with perception” but he also goes on saying that the majority of what designers have been considering “affordances” are really “cultural conventions” or visual feedback. We learn how to use things not only by responding to the features in our interaction with the object, but also by normative, practiced, social use of said object: by convention.

To further clarify, Norman says that “a convention is a constraint in that it prohibits some activities and encourage others. Physical constraints make some actions impossible: there is no way to ignore them. Logical and cultural constraints are weaker in the sense that they can be violated or ignored… They are not arbitrary: they evolve, they require community of practice. They are slow to be adopted and, once adopted, slow to go away. They are real constraints on our behavior”.

Now, let’s try to apply the principles of affordances, constraints and convention to the book.

Fig. 1. Source: University of Michigan Library.

Physical or real affordances:

  • It is scaled to be handled by humans. The pages to be easily turned using our hands.
  • It has pages, instead of one big scroll, making it more efficient to continue reading without extra non-practical handling.
  • It is portable.
  • It is easy to locally store.

Constraints:

  • Since it is human scaled, it does not afford practical real-time use from a big group of individuals at the same time. It works better for just the individual handling it.
  • There is only one practical way of opening it: by separating its sides.
  • Depending on the materials used, it can be either light but easy to damage, or durable but heavy.

Convention and cultural environment:

  • The book can be opened only one way but doesn’t necessarily has to be read in one way. The direction in which we turn the pages it’s by convention. By practiced normative use, in the western civilization we turn pages from right to left and read left to right, but in other cultures it’s the opposite. This is an example of a convention that became a constraint of our behavior, and therefore, we expect it in future versions of this artifact.
  • The way we store books could be considered a convention. The physical affordance of the book enables it to be stored in any way possible, but by the use of symbols, letters and systems like the alphabetical order of filing information, we store it in a certain position and order.

 

 

References:

Design of Amazon Webpage

After finishing the readings this week, especially for Murray’s article, I have strong feelings about the great efforts digital designers bring into the design process to meet human needs and expectations. I started to find screenshots of the Amazon webpage from different periods of time. It is obvious that the interfaces have been upgraded overtime. However, I have never thought that the way we think of affordances and constraints are also changing, which has great influence on people’s thoughts, behaviors and interaction with digital media.

What does Amazon webpage look like when it first launched?

The layout of the webpage is simple which consists of a logo, words in black and blue underlined words. Murray states that “some digital conventions script us in a transparent way”. The blue words are distinguished from the black ones, which cues us for hyperlinks. It also reflects the Norman’s idea of perceived affordances. They are cultural constraints that one should move the cursor to the blue underlined words and click them in order to reach the hyperlinks. At the same time, physical and logical constraints exist on the webpage in that one could only move the cursor inside the screen while knows how to scroll down for more lists of links. However, the webpage is not well organized into categories and genres.

When it comes to the Amazon webpage in 1999, more icons like the drop-down menu and the “Go!” button are designed as visual feedback to distribute affordances. Specifically, the protruding design of the “Go!” button implies that this is a button to press for more information. The icon with the letter “Go” also has a cognitive affordance of proceeding. Considering the situation if there’s a letter “Back” on the bottom, users definitely would not press it for search results while would press it for previous steps instead. In addition, there is a huge design evolution for the template. From the perspective of distributed cognition, the formats of websites could be treated as cognitive schemas that users clearly know about the functions of each part. An understandable template for an online shopping website should be designed like the layout of products in grocery stores, with design conventions like categories of products, the section of customer services, an available shopping cart for each customer, and the check out area, etc. The design conventions provide affordances for users during the interaction process.

In addition to abundant layout of information and perceived affordances, I think one of the most prominent design features of the newest site is the wide use of social participation compared to previous versions. Murray explains affordance of the digital medium as participatory, meaning the formation of many-many communication. Under the design convention of customer reviews, users not only post reviews, but also leave comments or even directly email to a customer for purchase experiences. It potentially raises the privacy issue that anyone could see your purchase history once you leave customer reviews about the products. Moreover, randomly noticing advertising related to Amazon purchase history also drives us attention and worry about security problems. After all, “a good design is aimed at perfecting the object and at improving the overall practice of the field” (Murray, 2012), designers should take the spread of information into account under the circumstance of the participatory media environment.

Question: I’m also considering the important role of algorithm takes place on Amazon nowadays, especially for the precise display of customers’ purchase behaviors. I’m quite confused about Murray’s explanation of procedural affordance, which particularly mentions about the idea of algorithm. How could we connect the use of algorithm on Amazon with procedural affordance?

 

Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012.

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Quito, A., & Quito, A. (n.d.). What Amazon’s homepage looked like when it launched 21 years ago this month. Retrieved October 11, 2017, from https://qz.com/734985/this-is-what-amazons-homepage-looked-like-when-it-launched-21-years-ago-this-month/

Go Back In Time: How 10 Big Websites Looked 15 Years Ago. (n.d.). Retrieved October 11, 2017, from http://www.makeuseof.com/tag/time-10-big-websites-looked-15-years/

Customer Review. (n.d.). Retrieved October 11, 2017, from https://www.amazon.com/gp/customer-reviews/R3TOGB0V8Z3WFS/ref=cm_cr_dp_d_rvw_btm?ie=UTF8&ASIN=B00R6OXJWE#wasThisHelpful

Affordance in the Design of Everyday Things

In our daily life, numerous things around us have great affordance. Books, door handles, and even the design of a pen can reveal how the people “perceive” the function of an artefacts through visual cues the object provided. And the affordance of those simple products can be transferred to computational and digital displays. I think Kindle is the perfect example of how affordance can be transferred from non-digital artifact (book) to digital artifact.

-Physical affordance:

The physical affordance of an artefact can be responded through inferring how its use fits human body. We can see the way people hold books:

The structure of paper books helps readers hold them easily, and gives readers a clue that books need to be read horizontally or vertically, and they need to be read from one side (the former page) to another side (the latter page).

The way people hold Kindle is quite like the way they hold books. The design of Kindle also gives people a clue that the E-books need to be read horizontally.

-Perceptual affordance:

We can tell from the design of paper book that their pages are turnable. And for Kindle, readers can touch the left side of the screen to move forward and tough the right side to move backward.

The readers can see there are two linear button on both left side and right side of the screen, which gives the reader a clue. Besides, the page-turning direction of Kindle is exactly the same with the paper books. According to Norman, “in graphical, screen-based interfaces, the designer primarily can control only perceived affordance” (1999). The touch screen of Kindle provides the readers with numerous hints about how to turn page and read.

-Cognitive affordance:

In some countries, books can be read horizontally, for example the US. But in some countries, books can only be read vertically, for example in Japan. And thusly the design of Kindle E-books in Japan can only be read vertically while the E-book in US can be read horizontally. In addition, people will touch the right button to move forward and left button to move backward, which is exactly opposite to the US way. The design of books and Kindle depend on the difference in cultural conventions.

-Constraint:

For books, we can only turn pages to read it. Once we forget the page we have read, we need to turn pages from the beginning (or use the bookmarks). However, Kindle somehow improved, the system of Kindle can memorize the page we have read and automatically turn to the page we want.

Question about this week’s reading:

I’m confused with the concept of real affordance and perceived affordance. I know they are different, but I cannot tell the difference in the real affordance and perceived affordance of Kindle.

Reference:

Irvine, M. (n.d.). Affordance-Interface-Intro.pdf. Retrieved October 11, 2017, from https://drive.google.com/file/d/0Bz_pbxFcpfxRaGprQ3BWY3VXQmc/view

Zhang, J., & Patel, V. L. (2006). Meet Google Drive – One place for all your files. Retrieved October 11, 2017, from https://drive.google.com/file/d/0Bxfe3nz80i2GNGxOeVdlbHVZME0/view

Norman, D. A. (1999). Affordance, Conventions, and Design. Retrieved October 11, 2017, from https://drive.google.com/file/d/0Bxfe3nz80i2Ga2lSREV5NVJYMjA/view

see perceptive affordance

As Norman said in the book Design of Everyday Things, “the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.” Affordance is the property of environment, it is exist in the relationship between animal and environment. It is like the accessible functions of the environment toward animals. So when Norman defined his version of affordance as perceptive affordance, I think comparing to the real affordance, perceptive affordance may be more meaningful in the design area.

Carry around

For a print book, first of all it can be carried by human beings. It can be grabbed by human beings because the size of the thick of a book can fits into human hand. Also the weight of a book is suggested to be affordable by human beings. So it can be the nested affordance, you grab the book, then you find it can be carried around.

Readable

The main function of a book is to provide information contained in the words to people. the size of letters printed in the book is able to be seen by people, and the white color of page, black color of letter is making words able to be captured by people.

Flip over

The page of the book is made of wood paper, it is thin and soft, so as long as we touch the page of a book, we find it can be folded with the strength of our hands. Also as the physical constraints, the size of the page can only contain certain amount of information, which also indicates people to flip over the page.

 

As for the digital book, here is how it looks like in the window of iBook.

The window page is an interface of iBook app, it is the converge point between human perceptive cognition and app.

Touch icon to get book

It is being designed as a shelf; each book has the cover page stand in its little area. This icon of the book suggests us which book it is. And the touchable screen will make people try to touch the icon and thus getting the book. Also when touch at the blank area, there will be no response also indicate people should touch at the certain icon. To me, each icon is also like an interface between a book information and human perception process.

Touch to flip over

After the book is pumped out, when we finish one page, we will try to flip the page over. But as there is no optional icon or any other button, we will try to touch the screen again. And then we find touch the right part of screen can flip over to rest part of the book and touch left part can get to the previous page.

Touch to summon operational page

So when we finish the book or wanted to choose another book, we also know that we can only obtain that goal by touch screen. So when left part and right part is to flip over, we will probably try the central part. We touch the central part and the options show up. There are graphic signs indicate us the function of them.

Also, if you press long on one word you can choose it, copy it, or look up in dictionary. The app is making information can be operated with different intention.

So it feels like this is the perceptive affordance of an app, a digital book, but through the adjustment of perceptive affordance, to think in the user’s role, focus on convention and feedback, we are likely to design a “ good” artifacts that fits user’s expectations.

Reference:

Martin Irvine, “Introduction to Affordances and Interfaces.”
Kaptelinin, Victor. “Affordances.” The Encyclopedia of Human-Computer Interaction, 2nd Ed., 2013.

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999)