The Human Mind and UX
Today’s topic was “Designing for the Human Mind”
Going into a lot of how we think, organize information, retain it, and then some, we were then tasked with finding a website, screenshot it, and explain what Gestalt principles are demonstrated here. Those principles include: proximity, similarity, continuity, closure, symmetry, figure/ground, and common fate and will, partially or entirely, aid in the design of the UI and UX of a product, generally lending to the effects they will have on a user’s subconscious.
I could easily go and use the same screenshot I did before, of Apple’s website. They very clearly demonstrate those very same principles; no doubt many of them play into the visual hierarchy of the website, considering such principles such as proximity or similarity, but instead, we’ll drift away from Apple, and go to one of their competitor’s websites — Alphabet (yes, Alphabet, not Google!), and specifically, we’ll take a look at Google Drive.
This is Google Drive, as we can see it right now, as a typical user as of July 30th. In this screenshot, you can view the darkened background that brings the main work area out of focus, and shifts said focus onto the Settings window.
The site uses quite a few of the principles to convey information, and allow you to easily know what relates to what, and how things work and flow. First, I’ll go over how they use proximity in the design. In the Settings popup, you’ll see how they use a blend of horizontal and vertical alignment, and space such elements in a way to make them visually distinct, with only a very faint line to further reinforce the separation.
Now, why do I say “reinforce”? Because I feel through the power of proximity, among other design principles, the user doesn’t explicitly need those lines. In the following example, I’ve edited out the light gray lines:
In the above example, the primary navbar, on the left side, is still quite there. Using design rules earlier gone over, they keep the visual style consistent. Even though visually they’re smaller and less important than the rest of the page, their location and behavior provide enough contrast that one can fathom, without too much thinking, that this is the navbar and while it references the rest of the window, it’s still separate. The spacing between that and the rest of the window keeps it separated and apart.
That said, I did mention “well enough”. There’s a reason for that. Once we chop off the navbar from the settings page, things become a bit of a double-edged sword….
The overall appearance of the settings window without the leftmost navbar is somewhat clear, somewhat not. This could be personal preference and bias getting in the way, but I do feel that the use of proximity, or lack of, could be a bit of a problem. The use of whitespace is good at keeping the labels of each field, on the left, consistent with directing attention to the interactive content on the right, but because of how the layout is, I feel justifying the labels RIGHT, and the content LEFT (as it is now), might aid in visual clarity, but that’s a bit beyond the scope of this article.
The next principle that I’ll address will be “similarity”. Google Drive uses key design choices that aid greatly in conveying visual information and associations. “Objects” within your cloud storage are designed with certain layouts and dimensions that allow you to know what you are going to look for, in ways that make a lot of sense to the user. To better portray it, let me cheat and make a second screencap which reveals everything behind the Settings popup.
Proximity is used in conjunction with the overall layout, but here, the principle of “similarity” is used for various objects, from the folders in the tree view on the very left of the web page, to the folders in your current directory at the top, to the actual files within the current directory. Folders are very muted in relation to actual files. They are given lower visual priority by having their appearance as just small icons — which are all the same. Folders that are within the currently viewed directory contain visual significance to the tree view folders so the user knows the difference, but all files are given ample amounts of visual importance by allowing every file to be a large square that contains the icon representing the file type, the title of the file, and then a visual preview (or icon), when applicable.
Each type of element is similar to other like elements, and even those that are slightly different (tree view folders vs. directory folders) are given similar design theming to maintain consistency, and to give visual links; they are all folders, but one is within an overview, and others are the individuals found within a specific directory and are relevant to the user’s current view.
Another design element used here includes one known as “Figure/Ground”, and is used in a few different ways in my example, here.
But first, a quick tangent.
Skeuomorphism is a design practice best known in pre-iOS7 era iPhones and iPod touch devices, along with many design choices for macOS, then known as OS X. It uses references to real-world objects and situations to allow users to make sense. Dividers that looked like an embossed or pressed-in effect on paper helped with a visual aid. Subtle shadows under words gave the illusion of depth as if you viewed a real-world object. Glass-like gradients would give a shiny, new, modern look to an old design, in an age where physical objects reflected such ideals. Your archive of deleted files (or files to be deleted) are sent to the trash can or recycle bin — both skeuomorphic references for what we come to know this as.
Jonny Ive at Apple felt, along with others, that skeuomorphism was good back when we had lower resolution screens; the reduced fidelity was aided with such visual cues, and then some — but with the higher resolution displays, he felt that it was time for the very displays themselves to shine, and show their worth. And since iOS7 and subsequent releases of iOS, macOS and even Chrome OS and Windows 10, it was clear that this was the direction of modern UI/UX design going forward. The way figure/ground worked before is similar but different than it does now.
Today, we use bold color and typography with very minimal use of shadows, to imitate depth. Generally, we use contrast through color, size, and pattern, along with other more general, not-always-real-life elements to provide visual feedback and information. Text and typography still gives enough contrast for the user to read the content, but the icons and file previews generally come forward, past the labels of said sections — for instance, in the screenshot above, “Folders” and “Files” are both there to show the user a section header, but they’re small, and are gray instead of black, giving less contrast. The rest of the content, from the folders to the files all are much larger and take up more space visually, giving more importance to them, bringing them further in front of the user.
That said, going all the way to the first screenshot we can see how the settings screen actually uses skeuomorphism alongside figure/ground to give even more depth — the entire workspace we viewed normally is darkened, lowering it’s contrast and visual importance so it could essentially blur out to the user, mentally, but then the settings screen on top uses shadow and higher contrast to bring it much closer to the user’s face, virtually. There’s no doubt the user wouldn’t be able to access what’s underneath, because of the huge amount of contrast uses to separate the files and folders from the active window — the settings screen.
