Week 3 — Reading
#universitydiaries
New things
New things I discovered this week and that I had never realized:
This week I discovered that reading is not natural to the human eye. While we have evolved to speak well, our ability to read is a skill that we learn through instruction and practice. Learning to read is essentially training our brain to recognize patterns. Some people because of socio-economic circumstances don’t get the chance learn to read. Dyslexia or color blindness can also be reasons why reading can be more difficult.
What I learned
This is what I learned about this week:
There are two different types of reading:
- Feature-driven reading: This works from the bottom to the top, as the brain recognizes lines, patterns and symbols, which form morphemes, which form words, which form sentences and so on.
- Context-driven reading: This is the opposite of feature-driven reading and works from top to bottom. It is based on expectations and prior knowledge, which allows the brain to predict the topic off a text based on the knowledge of words.
When we read, feature-driven reading is dominant and context-driven reading helps assist.
Here is an example of top-down reading. The texts from both (A) and (B) come classic children songs. Reader who are most likely familiar with the lyrics, would be able to read the words or make out the words — even if they are scrambled or mostly obscured.
Our color vision is limited
Because we are programmed to detect contrast over brightness it is important to design for good accessibility. Our ability to differentiate colors depend on how colors are presented i.e. displayed to us. Some people perceive colors different e.g. people with colorblindness — whereby they mistake shades or are unable to distinguish colors at all.
This is a look at the types of colors which people with different color blindness see.
Typographic rules and grids is important alongside interface guidelines
Poor design of a text can disrupt reading (e.g. hard to read fonts, too small font size, poorly contrasted text to background). That’s why visual designers and UI designers use typography rules, grid, spacing, layout etc… when designing in high-fidelity. This helps designers structure text and keep in mind to design for an enjoyable but also easy reading experience.
Here is an example of how grid layout has helped to structure the CNN website design. Usually well designed websites have narrow grids meaning that there is white space on the left and right columns. Because our peripheral vision is poor compared to the resolution of the fovea — it is important to organize interface designs based on our eyes’ ability to focus. When this is not considered, important information or content can be missed during the reading experience.
Because a lot of web pages are poorly designed for reading, there are tools out there to help smoothen a user’s reading experience. One that I can think of is Safari’s Reader View in their browser. But of course, designers shouldn’t rely on this but rather always adhere to user interface guidelines and typography principles.
Curious about
I wanted to know more about … and I found it (in literature, on YouTube, on TED talk, etc.):
With this week’s lecture sitting in my mind, I was wondering how the UX is different when designing UI’s in different languages. Take Mandarin Chinese as an example, Chinese is composed of characters that have multiple strokes and look more complex and busy. While English words come from Latin alphabets.
Here is an example of one booking website in two different languages. On the left is the website in English and on the right in Ukranian.
The information it communicates is exactly the same but the interface appears to have more text and the layout takes more space. This is because the words and the length of the sentences can differ between two languages. What works for an English interface with short phrases doesn’t neccesarily work for a Ukrainian sentence where the text has to break down into multiple lines to communicate the same information.
Elisa M. del Galdo and Jacob Nielsen’s book International User Interfaces acknowledges that,
“It is no longer enough to simply offer a product translated in ten to twenty different languages. Users also want a product that acknowledges their unique cultural characteristics and business practices.”
Another interesting example I came across when reading further is the difference in usage and understanding of icons across different cultures. In North America, Facebook and Gmail make use of hamburger and kebab menus icons.
In certain cultures, specific design patterns are accepted as universal. For instance, with the help of Facebook and Gmail UI designs, the hamburger (FB, left) and kebab (Gmail, right) menus have become the common choice for revealing navigation links and further options.
A research by Dan Grover found that in most popular Chinese apps, a compass or grid icon is used instead of the hamburger and kebab menu icons — to indicate “discover” which connotes intrigue and curiosity. And this is because Chinese users perceive apps more like an ecosystem rather than list of items.
These two examples illustrate that there is value in adapting to cultural and linguistic variations as what works in one country doesn’t necessarily mean it will work elsewhere. A designer research these differences and adapt accordingly.
Usage in UX design
This is how I can use … in experience design:
- Refer to typography rules and user interface guidelines while designing — When in doubt about typography rules and user interface guidelines can usually erase any designers doubts. A classmate recently recommended me The Elements of Typographic Style by Robert Bringhurst.
- Design for optimized contrast — When designing in Figma, there is a plugin called Contrast that can help you check if what you designed is at optimal contrast ratios of colors based on the Web Content Accessibility Guidelines (WCAG). Using tools like this can help designers ensure that their design in accessible to all users.
- Check you design so it’s 100% inclusive and accessible — Design with all readers in mind. Stark is a useful plugin that allows you to preview your work in 8 different types of color blindness.
- Research the linguistic variations when designing cross-culture — when designing internationally there might be differences for me as I am learning UX from a very western system. Therefore when designing for interface interactions in a different culture, the app or web experience should be researched and understood before starting to design.
