A Beginner’s Guide to Psychology Principles in UX Design

Posted by Jessica Fender on Nov 29, 2019 7:00:00 PM

Understanding user behavior is paramount when designing any type of product, be it digital or traditional. The way people perceive certain things will affect how they interact with them, the pleasure that is driven from said action, or the overall experience they have. 

Before diving into the actual development of a digital product, UX designers need to plan their every step by maintaining a user-centered perspective. They need to think like the users, identify their needs and what stimulates a particular action or reaction. For that, there is one single type of science that we can use – psychology

This does not mean you need a master’s degree in behavioral science to deliver great digital experience. But by understanding some of the most basic psychology principles, you can elevate your design and provide users with enjoyable experiences. 

three rectangular boxes with another three boxes inside

Understand the Basics of Human Attention

In simple words, attention is the ability to process the information around us and select what stimuli we react to. Sometimes, these reactions happen automatically, like when someone calls our name, while other times we get to decide what we want to react to, often called the focus. Right now, your brain processes a huge number of stimuli, such as the light in the room, the sounds we hear, or the voice in your head that reads these words. However, your decision at that particular moment might be to focus on the voice. 

When it comes to visual attention, there are two ways people can choose to direct it. The first one, spatial attention, refers to focusing on a particular region, such as the main page. The second one, feature-based attention, dives even deeper and shifts focus to one single element; a particular color or word, for example. 

But attention is a limited resource, which means UX designers need to focus on not overloading the mind. This brings us to Hick’s Law, which states that the more choices someone has, the higher the cognitive load. To put it simply; the more choices you give to a user, the harder it will be for them to decide which action to take. On the other hand; limited, but more clear options, will lead to a much better user experience and drive satisfaction. 

However, there comes a time when you need to feature a large number of options, and you can’t afford to cut back on any of them. In this case, you can break the process up into steps similar to that of the menu bar of an eCommerce store.

Gestalt Laws of Perceptual Organization

Commonly referred to as the Gestalt Principles, these laws present the fact that human minds tend to group elements in certain ways, for a much easier way of processing stimuli around us. Basically, the mind does this to help break up complex schemes or images. Try looking at these Rainmeter skins, for example, and how designers managed to group different elements on the desktop for better UX. 

Since every person is different, you might be tempted to think that the way we group these elements is different or random. In reality, they all fall under 5 principles:

  • Proximity: This principle refers to the fact that we tend to group elements that are close to each other and perceive them as one single item
  • Similarity: Elements that look alike, probably because of color, shape, or some other feature, are tend to be grouped together
  • Continuity: Our minds are designed to follow paths. So, you can use the principle of continuity to guide the user towards a certain element on a page.
  • Closure: Our brain is used to process a whole image better than multiple bits. So even though an element is missing, you will still perceive the bigger picture as an entire unit
  • Connectedness: The simplest out of all 5 principles - this refers to the fact that we have a tendency to group items that are connected, kind of like a big painting fragmented into three separate sections.

We Favor What We Find Familiar

Another psychology principle, called Jakob’s Law suggests the fact that people tend to favor experiences they find familiar. How can we leverage this to deliver a good UX design? Well, it means that people are more likely to react positively to websites or apps that look similar to those they have been using before. 

However, this does not mean you should go ahead and copy Uber’s interface if you are designing a rideshare app. It only means that you may want to keep the same principles.

To apply Jakob’s Law, you need to first identify the leaders of the industry and see what elements they have in common. Think of it as a spin on a traditional recipe. A hamburger without a bun and a patty is no longer a hamburger, but this does not mean you can’t add lettuce, cheese, or your secret sauce to it. 

By keeping the key elements together that users are familiar with, you can avoid confusion and succeed in meeting user expectations. Paper writing sites, for example, focus on maintaining a few basic elements, such as the type of services they provide, samples, and contact information as visible as possible, because these are the main features that people look out for.  

Don’t fear that keeping a familiar structure will limit your chances to provide innovative features. By conducting market research, you will be able to identify the areas in which can do something different. 

 

A person using tab and desktop

Get Familiar with UX Writing

Besides images and other visually pleasing elements, effective UX designs need to correctly incorporate texts also. While we might be used to guide ourselves based on graphic elements, such as icons and pictures; the text helps with call-to-action. 

Try to imagine an app that is solely based on graphic elements. No written information, no guidelines, no help menu, nothing. Would it be easy for you to navigate through it? But, most importantly, would it be easy for someone else who is not as tech-savvy as you are, to work their way around it?

The text needs to be incorporated into the development process since its early stages, to ensure they blend and go well with the rest of the design elements. Otherwise, developers might have to rectify the initial design to ensure that it fits the text elements.

Bottom Line

A few basic psychology principles can help you go a long way in the UX design process. By understanding how the mind of the user works, you will be able to shape up your design and influence the way people interact with the app. Still unsure? Try observing these principles in the apps or websites you visit every day and see if they have any role in how you interact with them. You are in for a surprise.

 

**This post is written by our guest author Jessica Fender. She's a blogger and Chief Content Officer at OnlineWritersRating.com.

Interested to write for us? Drop a mail at guestpost@srijan.net with your awesome ideas.

Topics: Web Design, Customer Experience, JavaScript & UI/UX, User Experience and User Interface

Setup React App From Square One Without Using Create-React-App

Posted by Pradeep Kumar Jha on Nov 1, 2019 6:17:18 PM

The breakthrough in technology has brought a whole new range of tool suite for developers to make the software development process more efficient. React App is among one of them! A prominent tool recommended by the React community to create single-page applications (SPAs) and also get familiar with React.

React App ensures that the development process is refined enough to let developers leverage the latest JavaScript functionalities for better experiences and optimization of the apps for production.

For one of our clients- a giant retail travel outlet - who went out to get a realistic travel budget in mind for the travelers to plan ahead and avoid spending shocks along the way we built a budget planner. 

Built on React.js on top of Drupal, it is a dynamic feature and can be added anywhere in the website (under blogs, services) without coding. 

Creating React App doesn't require configuration of web pack (bundler for modules) and babel (compiler). They come inbuilt. Developers can right away start with coding here. However, the drawback is that they won’t be able to get an idea about things happening in the background.

If we set up React App without using the Create React App, then we will be able to know which all NPM packages/components are needed to make react app working.

About React App

Create React App was built by Joe Haddad and Dan Abramov. The GitHub repository is well-maintained by the creators to fix errors and deliver updates frequently. 

It is a prominent toolchain for building apps quickly and efficiently. A toolchain can be defined as a set of different s/w development tools that are optimized to perform specific functions. For example, the C++ development process requires the compiler to compile the code and a build system, say CMake, to manage all the dependencies. Similarly, the React App is used to create “hello-world” applications.

This blog will showcase how to create a React app from scratch. The prerequisite is to have the NPM package manager installed in the system.

Below mentioned are the steps for the same-

Step 1- Create an app directory

mkdir myApp

Step 2- Access myApp folder and run 

npm init

This, in turn, will create a package.json file for which you can provide the name and version.

Or

npm init -y

This will create a package.json file with a default package name and version.

Step 3- Install react and react-dom packages

npm install react react-dom

This will create a node_modules folder with all dependent libraries to further add dependency inside package.json file)

Step 4- Create a .gitignore file, to avoid pushing unnecessary files to GitHub

vi .gitignore

Under files section, add all the files which you don’t wish to be tracked by Git

  1. node_modules
  2. dist
  3. ._

dist ( Distributed folder ):- This is an auto-generated build directory. We don’t require this folder because it will be generated by the compiler.

Step 5- Create an app folder

mkdir app

Access app directory and then create three files 

  1. touch index
  2. js index.css
  3.  index.html

Step 6- Edit index.html and add below snippet

<!DOCTYPE html>

<html>

    <head><title>

        my-app

    </title></head>

    <body>

        <div id="app"></div>

    </body>

</html>

( No need to add any styling inside index.css file as of now )

Step 7- Edit index.js file and add below snippet

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

class App extends React. Component{

    render(){

        return(

            <div>Hello World</div>

        )

    }

}




ReactDOM.render(<App />, document.getElementById('app'))

At the time of running this JSX code (XML/HTML- like syntax used by React that extends ECMAScript) in the browser, it will drop an error. Because the JSX code browser doesn’t understand and that is when we require Babel and Webpack.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

NPM install takes 3 exclusives, optional flags that either save or duplicate the package version in your main package.

1.  JSON: -S, ~save: 

The package appears in your dependencies

2. -D,~save.dev: 

The package appears in your devDependencies

3. -O, ~save-optional:

The package appears in your optionalDependencies

We will use Flag--save-dev to differentiate between built dependency & app dependency. 

Once installed successfully, you can check the package.json file to check the differences.

Webpack Configuration

Webpack, as stated is a module bundler, which primarily focuses on bundling JavaScript files for usage in a browser. Though it is also capable of transforming, bundling, or packaging just about any resource or asset.

Check the steps below for webpack configuration-

touch webpack.config.js

Step 1- Add below snippet in this file

var path = require('path');

var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {

    entry : './app/index.js',

    output : {

        path : path.resolve(__dirname , 'dist'),

        filename: 'index_bundle.js'

    },

    module : {

        rules : [

            {test : /\.(js)$/, use:'babel-loader'},

            {test : /\.css$/, use:['style-loader', 'css-loader']}

        ]

    },

    mode:'development',

    plugins : [

        new HtmlWebpackPlugin ({

            template : 'app/index.html'

        })

    ]




}

Step 2- To allow babel-loader work well, we have to add babel preset config to package.json

"main": "index.js",

"babel":{

    "presets" : [

      "@babel/preset-env",

      "@babel/preset-react"

    ]

  }

Step 3- To run build, we need to add webpack to script within the package, i.e.,  package.json

"main": "index.js",

  "babel":{

    "presets" : [

      "@babel/preset-env",

      "@babel/preset-react"

    ]

  },

  "scripts": {

    "create": "webpack"

  },

Step 4- Run below command

npm run create

With this, webpack will be created, which, in turn, will create a dist folder and our bundle file including index.html.

Watch this video to learn more about it

 

Step 5- Now to start webpack dev server, add below snippet inside package.json file

"scripts": {

    "start": "webpack-dev-server --open"

  }

It will start building our code as soon as we run npm start.

Step 6- All setup is done. Now run `npm run start` command to see the result on the browser.

The final directory structure will somewhat look like this as shown in the picture - 

 

Note: You might observe some storybook related extra files in the picture. However, these files won’t be visible in your setup. If you want to know about the storybook, stay tuned for our next blog.

Conclusion

I hope that now you have understood the fundamentals of Create React App better. If Yes, then implement the given steps right away and start building your awesome ideas!

Stay tuned for my next blog in which I will discuss Storybook. 

 

Happy Coding!

Topics: Planet Drupal, JavaScript & UI/UX, Architecture, Framework and Libraries

My Experience with Progressive Decoupled Blocks

Posted by Vaibhav Jain on Aug 21, 2019 6:16:00 PM

The JS frameworks have changed quite a lot in Drupal especially with API-first concept adding to the scenario. It is only expected that developers are inclined towards learning more about JS and related possibilities.

Recently, I was tasked to render blocks on a page while keeping individual components encapsulated in their own. JavaScript has the potential to make web pages dynamic and interactive without hindering the page speed and so I decided to opt for progressively decoupled blocks.

I came across this Drupal module Progressive Decoupled Blocks, which allows us to render blocks in a decoupled way and seemed a perfect fit for the situation.

Anatomy of Progressive Decoupled Blocks

The module is javascript-framework-agnostic, progressive decoupling tool to allow custom blocks to be written in the javascript framework of one’s choice. What makes it unique is one can do all this without needing to know any Drupal API.

It keeps individual components compact in their own directories containing all the CSS, JS, and template assets necessary for them to work, and using an info.yml file to declare these components and their framework dependencies to Drupal.

Did it work?

I decided to test the module in the new Umami Demo profile, that comes out of the box with Drupal, with React and Angular blocks.

I used the Layout module and picked a page to place these blocks. This is one of the best parts I liked about the module, every piece of block content that we need to be placed on the page, can be done without even visiting the block page and setting visibility.

Module Architecture

The module has a custom block derivative, which searches for all components that have been added and exposes them as blocks. This architecture makes it super easy to add a new block.

You can refer to this git for the block derivative - https://git.drupalcode.org/project/pdb/blob/8.x-1.x/src/Plugin/Derivative/PdbBlockDeriver.php

Refer to this git for component discovery - https://git.drupalcode.org/project/pdb/blob/8.x-1.x/src/ComponentDiscovery.php

Possibilities

For React JS there are 2 examples in this module.

First is with a simple React Create element class, without JSX. This example renders a simple text inside a React component. This is a very good starter example for anyone who wants to understand how to integrate a react component with Drupal in a progressive way.

The second example is a ToDo app, which allows you to add and remove todo items to a list. It makes use of local storage to store any item that has been added. This app creates React components, integrate these components in other component and renders a fully functional DOM inside Drupal DOM in a progressive way.

This example comes with a package.json which needs to be installed before making it functional. However, the component did not render perfectly on Umami theme, I made certain changes to make sure it renders correctly. Patch attached in the end.

progressive decoupled block

I decided to extend this module and added a new component to render a banner block (comes OOB with Umami), and exposed this block as an API via JSON:API. As this was a very simple block, I decided to create this block without JSX. Also, I decided to generate the URL with static ID in the path. This can, however, be made dynamic, which I plan to do later in my implementation. I also decided to choose the same class names to save on styling. The classes can be found in the Umami theme profile.

(function ($, Drupal, drupalSettings) {
Drupal.behaviors.pddemo = {
attach: function (context, settings) {
$.ajax(drupalSettings.pdb.reactbanner.url, {
type: 'get',
success: function (result) {
var image = result.included[0].attributes.uri.url;
var title = result.data.attributes.field_title;
ReactDOM.render(React.createElement(
'div',
{
className: 'block-type-banner-block',
style: {backgroundImage: 'url(' + image + ')'}
},
React.createElement(
'div',
{className: 'block-inner'},
React.createElement(
'div',
{className: 'summary'},
React.createElement(
'div',
{className: 'field--name-field-title'},
title
)
)
)
), document.getElementById('reactbanner'));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus || errorThrown);
},
});
}
};
})(jQuery, Drupal, drupalSettings);


Angular JS

Angular JS comes with many more easy and complex examples. Things didn’t work as smoothly as it did with React. There were a couple of changes we were required to make it work.

Please refer to this gist for the patch.

You will have to install node modules before, to make it work. Also, all JS is in the form of Typescript, which needs to be processed to JS before you can make it work.

Conclusion

The module gives you a great kickstart to move any block, rendered by Drupal, to a progressively decoupled block, using React, Angular or Ember as JS framework. However, you may want to extend the module or create your own to render the blocks.

Topics: Drupal, JavaScript & UI/UX, Architecture

IdeaStorm like platform in Drupal

Posted by Nilanjana on Dec 20, 2011 1:57:00 PM

Ideation is a Kit specification-compliant Feature Module. It is a crowd-sourced suggestion box, which allows users to suggest ideas, vote on and discuss already submitted ideas, as well as start discussions around ideas.

The Ideation feature has a use-case for implementing websites like IdeaStorm by Dell. Dell had built this platform to engage online communities in giving feedback and generating ideas for its products, triggered by negative publicity about Dell computers in the online world.

Here's a video by the US Department of Education, for which this Ideation feature was built.

 

 

Topics: Drupal, JavaScript & UI/UX

Discussion

Write to us

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms Of Service apply. By submitting this form, you agree to our Privacy Policy.

See how our uniquely collaborative work style, can help you redesign your business.

Contact us