Category Archives: Week 6

The Book as an artifact


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Books, bound books in particular, have been a familiar design artifact dating back to the Roman empire. They have differed little over the years from the form we see on our shelves today and that is due largely to the affordances and constraints inherent in their use. As an artifact I look at books as having three arenas of interfaces: Physical, Visual, and conceptual or interpretive.

Physical

The fundamental purpose of a bound book is to provide a means of organizing two-dimensional substrates on which our design systems can be applied to communicate information (a term used broadly in this case). This means that the form of the book must facilitate the accessing of this information by a person. As such, the size and physical capabilities of a human are a limiting factor. On one hand, a book may be small enough to hold open in the hand but not so small that the symbolic artifacts used to communicate meaning do not fit on the pages contained. On the other end of the spectrum, some use cases involve the appropriate use of a stand to hold the weight of the book. While this gives a broad range of sizes, there is still an upward bound to book size due to the constraint of the reader needing to be able to see all of the information on the page in a relatively low energy manner – a 10ft tall book may be able to contain a great deal of information but would require a platform to read the top lines and a mechanism for turning the pages.

From a manufacturing perspective there are additional constraints based on the ease of writing or printing the text on pages that can be produced, and the longevity and production of the material used to bind the book.

Visual

The visual constraints of a book are a factor of the symbols they contain. Our modern text based communication takes a linear format, either left to right or right to left, making rectangular shaped pages, and hence books, an efficient medium. However, it is not too difficult to imagine a form of communication based in non-linear symbols that when grouped together take on an arced, rounded, or triangular shape. In such a circumstance, given appropriate production means, it would not be surprising to see a non rectangular shaped book.

One of the most readily noticeable aspects of a book has to do with the design of the text inside. Is it too big, too small, or just right? This differs by reader given factors including eyesight and general preferences often described as “comfort.” These decisions have guardrails in the form of number of pages in the book, amount of content desired, and limits of human capabilities.

Additional visual design elements include size of margins, distance between lines of text, and distance between paragraphs.

Conceptual

Another aspect of book design that is often overlooked until it becomes an issue is the organizing of the information. It is a decision of the author as to how to split the book into sections or chapters. The inclusion of a Table of Contents improves ease of access to the information in the book by the reader. For more content heavy books the use of an Index is invaluable, allowing readers to locate key concepts and ideas in the reading quickly. Both of these elements have been readily adopted in a fundamental way by digital reading interfaces that offer search functions in place of an Index, and tabs and menus in place of a Table of Contents.

 

Side note: nice quick video on affordances and the ever frustrating “Norman doors.”

Affordances within the Nike Run Club App


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Just looking at the screen of an iPhone, one understands that each little app icon is clickable and will open a new application. This affordance draws off a long history of having small icons represent applications within computational graphical user interfaces. We could even go one step further and say that this physical touch screen provides the affordability of tapping these apps to open them. The flat design of the glass screen and the implied semiotic reconfigurability of a phone intuitively beckons a user to tap or touch the colorful icons.

Once you tap on the app to open it, the app fills the entire screen. This constrains the user to only operate within one app of the phone at a time. This constraint is born from the physical constraints of the design of the iPhone. The relatively small screen of the phone would be too cluttered and hard to interpret if one could run multiple apps at a time on screen. Multi-tasking is still available on the phone, as the modular apps can communicate with one another and run in the background, but the constraints of the iPhone’s screen ensure that the user is only immersed in one app at a time.

When looking at what design affordances are used, the amount of affordances that were derived from acquired cognitive models of graphical user interfaces. Once I began to think critically about what felt intuitive to do to navigate within the app and to explain why said actions felt intuitive, I realized that these intuitions mostly came from past smartphone apps. For, example, the top row of menus obviously affords clickability to the two not bold options. This affordability is only afforded to me because of socialization with previous examples of hierarchical typographic information to focus on bolded items as way finders within information. If I were an alien with no human socialization, nothing about the top menu design would tell me that I could tap other options. It truly is semiotic representation all the way down.

Week 6


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Many affordances that are linked to books are so ingrained in my understanding of books that it is difficult to separate the inferences derived from using books to what they actually are. On a basic level, a book is a physical vessel of information.The affordances of books and inferences that can be made from using a book are much more complex.As written in the Introduction to Affordances, Constraints and Interfaces, “the inferences we make are learned from socialization into what’s normative in using all the built “stuff” in a culture.” (Irvine). Books have been integral to my life since the day I was born, so it isn’t difficult to see why my inferences about books and readers are innate. One affordance that I almost almost have whenever I see a person reading a book is that the reader is curious about the world. Other affordances about books include ideas like books can be used to teach, learn or entertain, books impact ideologies and world views , books should be read from right to left and that books should have dark font on light paper. These are just a few of the affordances that come to mind when thinking of the representative nature of books and those who use them. In understanding design, it is easy to see how many of these affordances have been transferred to technology and digital media.

On a physical level, opening a laptop is learned behavior from opening a book. Both laptops and books are square folded devices, if a person holds a closed laptop by its spine and opened it it would mimic the act of opening a book. This learned behavior is a result of the affordances of books. On a digital level, many operational functions on a laptop are similar to operating a book. One clear example is the ability to switch screens by swiping left or right on the mouse pad. This relatively new feature to technology is a replication of turning a page in a book. In both actions, the meaning is implicit, the user wants to view different information. Other affordances from books have been integrated into the interface of web browsers. Janet Murray explained that designers are often engaged in the process of refinement and the  fact that there are four universal functions and “buttons” on the toolbar of a webpage is not only simple but initiative.. Murray also states, “It is an appropriate design strategy to exploit the interactor ’ s unconscious expectations and knowledge to cue their interaction with a new artifact or process, making the experience feel “ intuitive ”rather than difficult to understand or hard to learn.” ( Murray 2012). This explanation helps to clarify the presence of the back and forward arrows on a browser tool bar. A novice computer user can almost immediately identify the purpose of the back button because of his, her or their prior experience with reading books. The arrows on webpages indicate access to either old or new webpages which is representative of how readers use books.

 

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.

Weekly Response – 6


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Here is an underlined text. The first thing we do unconsciously is to click it because it seems to be a hyperlink to an external website. But this link will be a mystery for those who have not encountered a hyperlink before. So we as designers had better improve the interface of hyperlink like this: Click here 🙂 This visual and interpretable design will work for most of the people. When we actually click it, we will find it doesn’t work though. There is a gap between perceived affordance and its actual affordance. Here is another one: Click here 🙂. This time it affords the function of a hyperlink, which leads us to a website. But the only thing we could do with this hyperlink is to click it to browse the new page, or not. It cannot afford other actions like being removed with a simple click. That is the constraint of this design.

Through the hyperlink practice above, we see the completion of affordance as well as its flipside. Both actual and perceived affordances must be well considered in the design. Or the user will feel the gap which leads to the failure of design. “…affordances, both real and perceived, play very different roles in physical products than they do in the world of screen-based products.” A user’s perception and understanding of affordances might vary according to their ability, goals, cultural backgrounds, context, and past experiences.

The hyperlink experiment reminds me of the ongoing debate about “printed newspaper versus online news website”. Online newspaper abounds with countless hyperlinks which lead readers to relevant news based on their reading history; yet newspaper constrains reading content for it is a physical medium with limited space and specific date required. The amount of information they could cover is just one aspect to compare affordances of them. Like any other media artefact, the newspaper has a form–an interface. This form varies according to the layout, design, illustration styles, schemes of departmentalization, etc.. All of those aspects influence reader’s experience and affects their affordance to work.

Image source: The Washington Post

To be more specific, first, the physical attribute of print newspaper affords discussion and interaction in reality. For printed newspaper reader, the experience will be more comfortable when they seat in the armchair or sofa. With print newspaper at home, an open space to share the news and discussions, readers tend to share opinions directly with others who are co-present and find body-to-body company. The physical attribute of printed newspaper affords an enjoyable reading experience in a less mobile world and allows more possibilities to interact with people around you. Yet those affordances have flip sides. Nowadays comparatively large size of print newspapers are not designed for easy reading on the move. To read them, users have to fold the paper, which reduces the visible surface. For online news readers, they might find online page more flexible owing to Web 2.0 tools that enable more dynamic and interactive structure. Their opinion sharing experience with families or friends might be less immediate than the printed newspaper, but online newspapers allow asynchronous sharing of information with internet users on the social network.

Image source: The Washington Post

Plus, being different objects–one analogue and the other digital–print and online newspapers show various of uses. Online news webpage only affords reading and functions related to news. All of those functions are digital objects–they are immaterial. But print newspaper as a material object, it affords not only immaterial function like reading, but also material ones. It is fascinating to see people reinvent the design of newspaper and practice different uses–lighting a fire, wrapping for a gift, even for artistic practice like collage or cut-ups.

Image source: Taylor Houlihan

Besides, both of print and online version affords the function of advertising. In printed one, it might be a work of art or a poster while in online it has a form of banner, pop-up, link, images, etc.. The constraint of printed one is that audience could not get further details of certain advertisement as they could get from online newspapers.

Image source: The Washington Post

The comparison could not be a good vs bad, digital vs. analog dichotomy. When we distinguish the differences we also need to sort out the underlying continuities in those two artefacts. As Prof. Irvine stated in his article, “we live at cultural moment where ‘traditional’ pre-digital media artefacts co-exist in a continuum with digital media, and where much in the digital media design world shares or translates affordances from prior forms. ” In the case of newspaper comparison, we should also take a more broad and inclusive perspective.

 

Credits to:

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.

 

 

Week 6_ A Brief Analysis of Books’ Affordances and Interfaces


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Tianyi Zhao

Books have been one of the most universal and typical artefacts for over three hundred years. Similarly, as affordances and interfaces are significant and indispensable characters to artefacts, they have been parts of human built world for thousands of years. This short essay will briefly explain how affordances and interfaces adopted on books and their remediation to digital forms.

The affordances on books are quite various. Based on Herbert Simon’s statement, the “inner” environment of an interface should be appropriate to the “outer” environment. As for the “inner” environment design, Jiajie Zhang and Vimla Patel argue that from the perspective of distributed cognition, affordances in internal space can be divided into biological, physical, perceptual and cognitive affordances. (Zhang & Patel 338) I figure out that books belong to the mix-affordance artefacts. First of all, the physical structures and form factor of books are finely designed for different types. Besides the fact that all the books are “portable” and “stored locally,” the size of pocket books perfectly and intentionally affords to our coat pocket; and the classic collections– hardcover, gracefully designed with large size– can stand for quite a long-time storation. Another example is the pup-up books for toddlers. Traditionally, we treat books are “two-dimensional substrates for our representing all of our sign systems.” (Irvine 2) However, pop-up books are breaking the boundaries of space. They are three-dimensional and movable books with abundant types– animated books, transformations, tunnel books, etc.. Even some book artists have leverage it for artistic creation.

(Tao Hua Yuan Ji at the Philadelphia Photo Arts Center, Colette Fu.                                            Source: https://en.wikipedia.org/wiki/Colette_Fu)

Moreover, books have shown cognitive affordances as well, which are provided by cultural conventions. For example, the spines of the books written and made in ancient China were on the right hand. The texts should be read from right to left vertically. It afforded to the Chinese characters and were also “good” enough to fulfill users’ expectations so that a unique habit was cultivated until last century.

Compendium of Materia Medica, printed version, Cangzhou, China.                                                                                                              Source: https://sns.91ddcc.com/t/37416 )

The digital remediation of books has changed my study habit a lot. Apple iPad Pro, launched in 2017 and simply works with Apple Pencil, finally realized the transformation of pixel-based interactive screen interfaces. They are light (only weigh around 1.5 pounds) and portable like books. No matter the book has only 50 pages or 1,000 pages, the weight is never a conundrum since they are digitally stored in the applications. Besides, the screen size is much larger than books so that user’s reading experience has been improved with the adjustable display brightness and book-like page designs. The two sizes– 10.5 and 12.9 inches– have satisfied the different demands; for instance, the larger one is always favored by artist students as sketchbooks. The environment when reading is no longer limited as books. The display brightness empower to read in darkness, and the zooming function liberates the reading distance to eyes, which are highly restricted when reading books.

(Reading with iPad Pro. Source: https://www.macworld.com/article/3201035/ios/105-inch-ipad-pro-review.html)

As computational and digital technologies inherit from the past ones and develop as continuum, I believe there will be a new subversive artefact to revolute our current reading habits, which will break through the dimensional limitation by leveraging with artificial intelligence or virtual reality technologies.

 

Works Cited 

Irvine, Martin. “Introduction to Affordances and Interfaces.”

Jiajie, and Vimla L. Patel. “Distributed Cognition, Representation, and Affordance.” Pragmatics & Cognition 14, no. 2 (July 2016): 333-341.

https://www.apple.com/ipad-pro/specs/

https://en.wikipedia.org/wiki/Pop-up_book

Week 6-De-blackboxing of touchscreen


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Zijing Liu

Screen, one of the most common things we take for granted in the digital age, functions as a black-box, where users can only see its input and output. Whereas, after learning this class for several weeks, it is important for us to consider screen in a designer’s perspective ­– to de-productize and de-blackbox what is lying behind.

Before analyzing the affordance and constraints of the screen, I would like to clarify how screen works. There are two main types of screen, resistive and capacitive. The resistive screens are the basic ones that applied at ATMs and many other places. It senses our “touch” as pressure since when we touch resistive screen, we apply pressure on the screen. Then the underlying two electrically conductive layers connect, which helps to locate the position of the “touching point” and execute the order of that point. The other one is the capacitive screen, the most widely used on our smartphones, iPads and other electronic devices. This screen receives electrical charge emitted from our body that creates a “voltage drop” on the screen, then processes the order of that dropping position.

The first time I exposed to the word “affordance” and “constraints” was in “Universal Principles of Design”. After learning Murray’s concepts this week, I realize that everything has to be designed based on its affordance and constraints. The affordance of the screen is tightly connected with the socialization of human being. To design a screen, it cannot be too large or too small, too heavy or too light, which means it should be designed to be easily portable. The thinner, the better. Also, as a cognitive artifact, the screen is designed for people to read symbols and communicate with, that is the reason why screens are mostly rectangle instead of round. Moreover, it should be sensitive as well as accurate to the touch. For early screens, people had difficulties using the touchscreen because they had to push very hard to select icons. In fact, this constraint is still common in the current. For instance, the touchscreen of the package locker in my apartment is hard to use – each time I have to push very hard or using something sharper, like my nail, to force it to respond to my intention.

On the contrary, the constraints of touchscreen originate from its functions. The light of screen can be harmful to eyes, especially for those love to face screens in darkness – on bed before going to sleep. Besides, the touchscreen loses its function when wearing gloves or your hands are wet – it cut off the transmission of electrical charges. It annoys me when I have to pull off my gloves to touch the screen in cold winter or the water on my hand interfere with my operating.

Return back to the early point to think about affordances and constraints one more time, view everything from a perspective of designer, we will notice that everything has strong reasons to be designed in this particular way, even if it seems to be so ordinary.

References

Week six, affordances and constraints of books


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Week six, affordances of book

 

It’s interesting to examine our daily life things with affordance, and it’s also interesting to see how affordance, interfaces and constraints would be meaningless without “human beings”. As Norman states in his article The Psychology of Everyday Things, affordance can be explained as “strong clues about how an object should be used. provided by the object itself or by its context (Norman 1988).” For example, when we see the knife, judging by the sharp edge on it, we know that can be used to cut or stab things even when we didn’t know what a “knife” was.

 

So going off to the books. As Professor Irvine says in the introduction paper, people “usually respond favorably to seeding things with an optimal human from factor- shaped, size, weight-for its use (Irvine).” Books were designed to fit our body features. For the physical aspect, the size and the weight of a book should be affordable for our relatively weak (comparing to other species or robots) hands and arms. Books are designed to be carried in bags, so the size and the weight couldn’t be too large. Another important affordance is that people, even babies who doesn’t have much social experience, knows how to open a book, regardless of whether they can understand it or not. Other than that, the covers of the book are designed to protect the book, and also to be labeled so that we can easy find the book we want.

 

Also, as Professor Irvine mentions in the paper, books also have “great affordances as cognitive interfaces. They provide a consistent grouping of two-D substrates for representing all of our sign systems that can be drawn or printed on a surface (Irvine).” Books are designed to be easily for us to read and to understand the signs and symbols on it.

 

Books, especially the hard-copied ones, also have constraints. As Norman states in his article in 1999, the constraints are “limits”, which is the opposite of the “affordance” (Norman 1999). The physical constraints of the book is that it’s hard for people to “search” things with the pages. And the affordable size or, the “capacity” is also the limitation to the amount of information that we need.

 

Martin Irvine, “Introduction to Affordances and Interfaces.”

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

Norman, Donald (1988). The Design of Everyday Things. New York: Basic Books. ISBN 978-0-465-06710-7.

 

Affordances of books: from paper to digital version


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Huazhi Qin

According to Norman, affordances are relationships. (Norman,1999) To be more specific, an affordance is a relationship between an object and a person. Also, it enables a particular kind of interactions in between, which is determined by the properties of the object and the capabilities of the person who is interacting with the object. The book is one of the most important artefacts which numerous affordances.

As human beings’ long history of reading print books, a series of habits have been established, which is constrained by properties of physical books and individuals’ abilities. As for appearances, front cover presents the core information including title and author, while back cover always remain blank. Readers can easily figure out which face they should start with. Also in order to turn to the next page, readers have to flip over rotating the side which is bound up. Besides, information such as title is printed on the spine. It allows readers to stack books in bookshelf with the only spine facing outside. Regarding inside pages, Papers and ink constrain readers to read the book under the light. Fixed font sizes define the distance between eyes and papers. Also, margins allow readers to write down their thoughts or take notes. Contents and page numbers afford to quickly search and locate chapters.

Furthermore, different books vary in weight and size and influence how and where people read or use it. Those lightweight books with a medium size are easy to be carried in hand and bags, which means they are portable and people can take one along and read whenever and wherever they want to. While other books, like dictionaries, are often too heavy and large to take outside.

However, affordances are not always the same in every case. They might be different in different cultures. According to Professor Irvine, the inferences we make are learned from socialization into what’s normative in using all the built “stuff” in a culture. (Irvine) For instance, reading directions differ in different countries. In Japan, books are read vertically from right to left. In China, it should be done horizontally from left to right.

As what Professor Irvine said, societies are always hybrid with many co-existing technologies, contexts of use, and cultural genres. (Irvine) Print books and eBooks now co-exist in our reading experience.

Take Kindle as an example. How we respond and interact with it inherits from how we deal with paper books and also change at the same time. Kindle tries to provide similar reading experiences. The texts presented following the habitual reading direction. And it simulates how reader flip over a printed paper – tap the right side of the screen to turn to the next page and tap on the left side to get back to the previous page. Also, it employs e-ink technology to make the screen somewhat paper-like.

Meanwhile, many reading experiences have been improved in digital media displays. It expands the numbers of books one can bring. “My library” acts as a virtual bookshelf, indicating where to find the booklist. Its adjustable font sizes loosen the reading distance restrictions. The function of quick searching and locating can be used based on keywords or terms rather than chapter titles. Besides, the highlighting sentences and notes readers take are collected in a “notebook” and can be exported to the computer and other software.

Weekly Writing for Week 6


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/commons/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Banruo Xiao

In this week’s readings, affordance is described as a social and/or cultural product. It could be seen as a norm guiding the designer to think about how a product/service to be convenient to users. At the same time, people rely on the affordance to learn social behavior.

For example, the affordance of a book includes, first, readers do not need to learn how to open a book. The behavior of opening and closing can be subconscious, since only one side can be flipped. Second, the other side of a book is designed to be solid and supportive for reader to hold. Inside a book, the text usually starts from the left side, following people’s reading habits. However, in Taiwan, the text starts from the right side with vertical layout to fit the reading behavior of local residents. Furthermore, the size and the font of the text are designed to make people read it clear. Also, the nature of the paper implies that people can take notes in blank area. At the same time, people are easy to pick up and carry a book, because the size and the weight are designed to be used with hands and to conform to people’s capacity.

However, since the book has its own constraints. For example, it is hard to search for a specific paragraph, to save the paper sources and to share, because the property of papers limits these actions. With the emerging technology development, hard copy is gradually transferred to electronic source. People can carry thousands of books in a one-book sized tablet, such as iPad and Kindle. People no longer stay in the library and check out books to do research. In a word, the interface has changed from paper to a combination of pixels and bits. However, the affordance of a tablet has many similarities with a real book. For example, reader still needs to flip to read the next page; the layout still follows local resident’s reading pattern. They are similar because people get used to read a book with these behaviors. A new pattern would only become a constraint.

The difference is the behaviors including taking notes, flipping page and highlighting sentences do not directly act on the screen of the tablet. Instead, the behaviors are transformed and interpreted by computing code and operation system. Indeed, affordance is defined as a relationship between interface and agency. No matter how interface or agency change, there are some universal standard of affordance remain. There might be minor changes, but at least for a book shown in a hard paper and shown on the pixel based screen, the affordances are basically the same.