ux

The Rules of Responsive Web Typography

Posted on by Mario

typography

Have you ever seen a text in a website that is easy for you to read that does not tire your eyes when reading it? If you have, then you have seen an art called Typography. What is typography? What kind of typography that is properly arranged?

The right kind of Typography
For a web designer, typography is the art of their design works. It is the science about the appearance of text. The purpose is to not only make the words look attractive enough to draw a conversation, but also helps text fulfill its purpose of communication. Therefore, to fulfill this purpose, the typography should convey appropriate emotion, so that a text can be easy to read. Then, how do we create a text that embodies emotion, yet easy to read?

Here are several factors you might need to know:

The Art of Readable Text
No other words can beat the art of readable text, and a readable text means getting the right size for the font, leading and measure.

You can use the following guidelines to ensure you have the right size as mentioned above:

  • Make sure it is easy to read
  • Set the line-height, the font-size, and the text width (typesetting)
  • Begin typesetting with a page that contains users’ needed information
  • The page should contain multiple elements, such as h1, h2, h3, body text and captions
  • Estimate the distance between readers’ eyes and the screen for different devices
  • Once everything is settled, start by selecting font-size
  • Measure the line-height
  • Test your typesetting choices with your audience
  • Make sure everything is right and suitable
  • Continue setting the sizes of other elements after finishing with typesetting the body text.

While getting the best result for the typography is important, it doesn’t mean it has to be perfect. Just do the best to convey your passion in your work.

Typesetting Other Elements
If you happen to choose the font-size for elements like h1 and h2 visually, you may need to reconsider it for these scales can’t be directly used for the web because they are built for print design. Therefore, you can use a modular scale. Construct it with the body test you’ve decided on and multiply it by a ratio numerous times until you get a scale. After constructing the modular scale, you can typeset the rest of your elements, picking a number from the scale as your font-size; then do the same process for the leading and measure setting, until you get a balance of readable elements.

Vertical Rhythm
Next, arrange the individual elements using a technique called vertical rhythm. In order for one element to flow harmoniously into the next, we need to adjust the thing that joins them up: the white space. This white space should be large enough to distinguish one element from another, but it should be small enough, so that the flow isn’t broken.

In order to get enough white space, you can use a multiple of the line-height value of your body text because we naturally recognize white space patterns within text. You can set the white space between elements to a multiple of the base line-height, and set the line-height of all other elements to a multiple of the base line-height to use the right vertical rhythm. Values like 0.5x and 1.25x of the base line-height can give you more flexibility.

Baseline grid, yes or no?
Where there is vertical rhythm, there is the concept of a baseline grid inevitably comes into the picture. Although it is helpful, it can be difficult to get the right vertical rhythm for beginners. Baseline grids can’t work perfectly on the web because the math in typography contains subpixels (like 24.8px) and the subpixels are handled differently.

Typography for Multiple Screens
There are three things needed from a design perspective. First, the distance between a user’s eyes and their screens are different depending on the device used for that. The larger and the wider the screen and the device, the more you need for the font sizes. Second, you need consistency in the proportions between the body text and other elements. When you increase the body text size, you have to increase the sizes of all elements as well. Third, you should increase the font-size of specific elements through picking a different number from the modular scale to control the visual hierarchy.

That’s all you need to learn! To sum it up, typography is the art of making a grandiose website that will not only make people effortlessly understand the texts, but also creatively convey the passion in creating it.

5 Killer Ways to Influence User Behavior

Posted on by Mario

In order to influence the behavior of users, websites should employ psychological techniques. Hence, web designers should understand how mind works and how people make decisions. This is crucial as people will interact to a site through site’s design, so your users will determine whether your site has been successfully interpreted what they want. Here are 5 killer ways that can influence your user behavior.

  1. Apply the Scarcity Effect

People tend to take action when they know that something has limited quantities or availability. Therefore, you can create something that others might not have access, this makes it becomes exclusive. Besides, people also more appreciate things coming in limited quantities. This is called the scarcity effect.  So, you can use this to your advantage such as using timers in your design elements while your user is making decision.

You can also show users quantities of certain items are limited, or have flash sales on items that only last a certain time on ecommerce site. Moreover, you can allow users to upgrade and access exclusive premium content on a content-focused website. If you’re releasing a new product or major update, give people ‘exclusive invitations’ and  let them only invite a limited number of friends to have a sneak preview.

  1. Apply Persuasion Tactically over the User Journey

Persuasion is a combination of stimulation, context, and behavior. Therefore, it cannot work in isolation. To persuade more users, you can apply scarcity as a persuasive message, ask a high price for money, or create social proof to validate your product with the wisdom of the crowds. There are three fundamental dimensions of consumer behavior, such as emotion, motivation, and ability to use persuasion effectively. Segment strategically in a data-driven manner, gain insight into their journey, and understand the assumptions and values that your customers are bringing into the process. Then apply persuasive techniques tactically, whether it is aiming at an impulsive click or tap, or to improve the brand perception (and re-engagement) over the course of several visits. But, doing it the other way will alienate and infuriate your users.

  1. Design a Great Service

To influence user behavior, you may have to involve cognitive biases, and then do a bunch of A/B tests. You’ll get some uplifts and you’ll probably feel good about yourself. In fact, the best way is to influence user behavior is to design a great service that fulfils user needs. When you fulfil their needs, good service comes along the way.

  1. Know your Boundaries

By knowing your boundaries, you will not approach a project where there was the potential to use design for the wrong ends. This encourages me to develop my own code of conduct:

  1. Don’t trick
  2. Don’t cheat
  3. Don’t lie
  4. Provide positive benefit
  1. Consider What People are Trying to Achieve

Since we don’t know what causes of behavior, we tend to guess and misallocate our resources. Apart from intuition, which is hard to reproduce, the best clues I’ve been able to find have come from a process of analysis of ‘jobs to be done’ for the consumer. This is not a utilitarian view of intention or a measurement of economic value. In fact, it’s an understanding of the urges people feel that comple them to do things.

So, it is important to understand what they are actually trying to achieve and provide ways for them to achieve that. This is what UX analysis and design is all about.