Usability in daily life – Psychology of Usability

Psychology, a science of behavior and mind, is frequently being mentioned in the field of user experience and usability research. For example, one of the very critical factors of usability, learnability (Norman, 2013), included one of the most profound theories in developmental psychology: conditioning.

Conditioning is a concept based on the classical conditioning experiment posed by Pavlov(1927) and known as Pavlov’s dog. Conditioning theories describe the rules of behavior learning, which the relationship (direct or indirect) between stimulus and reaction become an experience and shape future behavior tendency. The learnability refers to how easy could a user understand how to operate a task with a device/interface he or she hasn’t used before. If the relationship between stimulus (in this scene, user’s action) and reaction (in this scene, the result of their actions) appears to be obvious, it would be difficult for the user to understand what’s happening and learn the process.

In a later study (Seligman,1967) a concept of “learned helplessness”, describes the repeating unpleasant experiences would result in desperation, which is corresponding to user’s frustration in usability & user experience test.

The way we encounter new technology is actually very similar to the way people encountered new technology 10 years, 100 years ago. Our mental model stabilized in a younger age to support us adapt to the existed environment, and lower down our efficiency learning a new concept. This tradeoff forces the designer to use a common understanding of reality, which is also called “knowledge in the world” in Norman’s context, to design functions that most of the users would be able to get the idea of features without massive thinking process. Especially while the tasks are already being difficult, there is no reason to add on cognitive loading just for “being creative.” 

A project (Botella, 2016)examined two different navigation structure: Hyperlink and linear. The researchers believe that the familiarity of information structure would result in efficiency difference significantly in elders. The result of the experiments supported their hypothesis that the linear structure is easier to understand for elders due to they’re more used to linear structure such as paper books. Both performance and efficiency are better. This paper supports the theory that “What have people learned” does matter to the learnability for the information system.

It is not impossible to break condition. Of course, human cognition works way more complicated than Pavlov’s dog. However, viewing the process of user experience and user flow in cognitive psychology helps diagnose issues in the design evaluation.


Botella, C. (2016). Effect of Web navigation style in elderly users. Computers in Human Behavior, 55, 909-920.

Castilla, D., Garcia-Palacios, A., Miralles, I., Breton-Lopez, J., Parra, E., Rodriguez-Berges, S., &

Pavlov IP (1927). Translated by Anrep GV. “Conditioned Reflexes: An Investigation of the Physiological Activity of the Cerebral Cortex”. Nature. 121(3052): 662–664. Bibcode:1928Natur.121..662D. doi:10.1038/121662a0.RoselloLos mapas del screener.El «Wandersmänner» de Michel de Certeau y el declive hipertextual de Paul Auster

Norman, D. (2013). The design of everyday things: Revised and expanded edition. Basic books.

En G.P. Landow (Ed.), Teoría del hipertexto, Paidós, Barcelona (1997), pp. 147-187

Seligman, M. E., & Maier, S. F. (1967). Failure to escape traumatic shock. Journal of experimental psychology, 74(1), 1.

Spence, K. W. (1956). Behavior theory and conditioning (Vol. 35). New Haven: yale university Press.

Design Critique : Steam ( on PC app)


 Steam is an international digital distribution platform which allow users to purchase and play PC video games. Steam help users install and update their games and provides community features such as friend lists and groups, video streaming and video sharing. It also provide cloud-saving function so that users can load their game process in every device they use.

Critique 1 :  Login Window

When open the application program, the first window would be the login page. User enter the combination of account name and password to login their account and continue using the service.  The page offers understandable description for people who are not able to enter the correct combination, however, it’s little confusing about where to click.

The login window of STEAM application.

The login window of STEAM application. Wide buttons on the bottom look like drop-down menu, which they are not.

Norman use the term signifier  to refer any mark or sound or perceivable indicator that letting user know what to do with an item. The width of the button makes it look more drop-down menu than a button to click on. The designers do use the CAPITALS to differentiate button and description text, but I think it could be more obvious to avoid misunderstanding. Despite the shape and color of the button, the term “I CAN’T SIGN IN” seems more difficult to understand than “CREATE A NEW ACCOUNT” since the users wouldn’t know what would happen before clicking the button. For the other function, the signifiers works nicely. The affordance is clear, which mean users could easily understand what can they do with an item. and the layout follow knowledge in the world. It do give out feedback of wrong combination but return the same page without telling the user what went wrong. This page also give out a nice constraint: the LOGIN button wouldn’t turn bright and clickable unless user fill both of the columns.

Possible Solution:

To avoid the feeling of unsure, I’d recommend to use “RETRIEVE MY PASSWORD/ACCOUNT” for the replacement of “I CAN’T SIGN IN…” For the shape of the button, if not changing the shape, my advice is align the text to the right to differentiate them from description text. Usually drop-down menu would not align to the right, so I assume that would be a more common mapping of buttons and could lower down confusion.


Critique 2 : Functions on Greeting page (Store page)

The greeting page of steam is a customized store page. Information of special sale event would be displayed on top of the screen.

The greeting page, also the store page, of steam

The greeting page, also the store page, of steam


At the first glance, the layout looks a little too complicated. There are three different control bars in the screen. The designers use a nice mapping technique to differentiate them.  For the tool bar on top of everything is using the format of traditional application tool bar, which indicate it’s part of the application software but the page. The second tool bar is located on top of the URL column and align with backward and forward button, which indicate that it is a tool bar for tabs. The URL column, also function as a monitor to provide discoverability of the current state of the page, set constraint that it couldn’t edit by users if not using the action option the software provided. The third tool bar is the category bar for the store page itself. Moreover, the searching column clearly claim that it is used for search the store. These semantic constraints help users limited the possible function that the tool bar could offer so that they could find function easily.

However, some of them have overlapped features. While it wouldn’t hurt to have various way to access essential function, some functions are not as findable as it could be.  For example, the “games” button on the top tool bar gives users access their games library, just as the category “LIBRARY” in second tool bar allows them to, but the Games on the third tool bar only give links for users to explore and purchase new games.  This inconsistency might mess up the knowledge in users’ head and make them get lost in the layout again and again.

Three tool bars on steam page

Three tool bars on steam page

There is also a fixed foot allow user to add game, users could add a non-steam game to the library showing that they own it, or using code to activate a product on steam. Interestingly, there are not direct button for users to add physical steam gift card to steam.

Possible Solution:

To keep consistency, I don’t recommend using the same word for different functions even though the word might be descriptive for both the functions. The designers could try to use a different names. For example, using “game categories” for “games” in the store category bar. Or they could simply remove the link “View Games Library” and rename “Games” as “Manage my games” or “Action” because it could also link to user’s game list with “View.”

Also, I recommend them to add a direct link for adding gift card to account next to the “ADD A GAME” link.

Critique 3 : Tabs and URL column

As mentioned, the second tool bar is located on top of the URL column and align with backward and forward button, which indicate that it is a tool bar for tabs. It follows the knowledge in the world, at least follows the rule that Google Chrome and Microsoft Edge follow.

The upper one is a screenshot of Google Chrome, the another on is Microsoft Edge. Both of them are common Internet browsers. As seen, the tabs are beneath the URL column.
Also, they are both featuring as searching bar. For some users, they have been used to using the URL column to search and only use the URL column for the task. They might try to click the URL column and try to type on it, but no feedback would shown to tell them that the URL column is locked since there is already a little lock icon on the left of the URL column.

Possible Solution:

While the mouse cursor move upon the URL column, it would become a big “I”, which I think is a very misleading signifier that would indicate the URL column could be edited.  Changing cursor from “I” to “Prohibition” could simply stop user from trying to edit the content of URL column by providing semanticconstraint as clue of  affordances.