Tag Archives: designer

5 Killer Ways to Influence User Behavior

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.

What is Minification?

css minification

Web browsers aren’t concerned about the readability of code, when it comes to generating a page or running a script. In order for the file to be executed, minification strips a code file of all data that isn’t required. With minified files, you don’t need to be decompressed before they can be read, modified or executed. This is so much different from traditional compression techniques. If you are a web developer or web designer, you may need to know further information about CSS minification.

After the code for a web application is written, and before the application is deployed, minification is performed. Minification can result in faster response times and lower bandwidth costs, as it sends the minified version instead of the full version. Nowadays, minification can be widely used in many websites ranging from small personal blogs to multi-million user services.

Minification Techniques and Tools

Minify is one of the more comprehensive minification tools. Minify handles minification, caching, and compression of CSS, HTML and JavaScript files. Minify also offers integration with popular web applications and frameworks including WordPress and the Zend Framework.

HTML minification

If you are looking for performance improvements to websites, you can find the PageSpeed Insights Chrome extension in Google. PageSpeed Insights provides a “Minify HTML” rule which generates a minified version of the open website.

CSS minification

Several online tools provide instant CSS minification, since CSS is less likely to change frequently. To get a quick and simple way to minify CSS, Refresh-SF uses multiple tools to minify CSS, HTML and JavaScript.

JavaScript minification

To create a more efficient copy of any JavaScript file, you can use Google’s JavaScript optimization tool, the Closure Compiler. Usually, a developer will use the Closure Compiler to minify the code and make change to a JavaScript file. For a user’s web browser, they can access the new file in the web server.

Example of Minification

The following code block shows an example of plain HTML and CSS:

<html>
       <head>
               <style>
                 #myContent { font-family: Arial }
                #myContent { font-size: 90% }
</style>
</head>

        <body>

                 <!– start myContent –>
                       <div id=”myContent”>
                       <p>Hello world!</p>
                       </div>
                 <!– end myContent –>

        </body>
</html>

Here are the same codes after minification:

<html><head><style>#myContent{font-family:Arial;font-size:90%}</style></head><body><div id=”myContent”><p>Hello world!</p></div></body></html>

Benefits of Minification

  1. As less unnecessary data needs to be downloaded, users can load content faster. Users experience identical service without the additional overhead.
  2. Lower bandwidth costs as less data is transmitted over the network. Developers no longer send the extra content that users don’t care about.
  3. Lower resource usage since less data needs to be processed for each request. The minified content need to be generated once, but can be used for an unlimited number of requests.

Create Beautiful Gradient Transitions with Granim.js

create-beautiful-gradient-transitions-with-granim-js

In web design, some features are made only for the sake of beauty while others are made for functional purpose. Gradient transitions are one of designs that made solely for show but they are quite popular and entertaining.

Now you can build gradient transitions with Granim.js. The result will look smooth and mesh nicely in any website. In fact, Granim may be the only JS library that managing gradient transitions and offer the perfect solution. Besides, it’s built on Vanilla JavaScript, so it can run alongside jQuery or any other JS library.

To get started with granim.js, you can drop the file into your page. You can also download a copy from GitHub or host one from a live CDN.

Here’s a basic code sample from the GitHub repo:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!– Create a canvas element –>

<canvas id=”granim-canvas”></canvas>

<!– Create a Granim instance –>

<script>

var granimInstance = new Granim({

element: ‘#granim-canvas’,

name: ‘granim’,

opacity: [1, 1],

states : {

“default-state”: {

gradients: [

[‘#834D9B’, ‘#D04ED6’],

[‘#1CD8D2’, ‘#93EDC7’]

]

}

}

});

</script>

It may look simple, but things can get more complicated than this. That’s why; you need to learn more on some examples. Then, find code snippets under each example to create gradient transitions for image backgrounds and even image masks.

The image masks can be used for a logo, for instance a PNG image, which gets hidden behind a gradient. Gradient will slowly transitions throughout the text which is as a result create a JS-animated logo.

Example

The example above takes a lot of JS/CSS code, so basically it’s not a simple implementation. But, you’ll find it is easier to be setup and customized after several practices. In fact, it’s the absolute best solution for any project as it is the only true gradient transition library online.

If you have any issues, you can check the issues tab, since the library is still updated semi-frequently. It’s only a pretty small library where there are no many things that need updating. This is also the strong reason why Granim.js can be a reliable solution for any site small or large.