navigation

5 Key Principles of User Centered Design

Posted on by Mario

Centered Design

User-centered design (UCD) process outlines the phases throughout a design and development life-cycle all while focusing on gaining a deep understanding of who will be using the product. This method has been widely acknowledged among so many web designers nowadays. But, not many understand the key principles behind user centered design. Here are 3 basic principles of user centered design that you surely won’t miss it!

  1. Use Simple and Natural Dialogue

It is important to create a natural sequence dialogue between user and system. Therefore, provide no unnecessary information to the user. In fact, irrelevant information will add complexity to the dialogue and in the end confusing the user. Bear in mind to use plain English and should use the vocabulary of the intended audience. Hence, terminology should be defined so that the same term always has the same meaning

  1.  Provide Adequate Feedback

Your users should be confident that their actions will be successful. For example, you can display a progress or working indicator when your users waiting for completion. This indicator will give the user a confidence that the computer is still operating.

Moreover, you also have to provide several levels of interaction. To show feedback at a low-level, you should give confirmation which tell that a control have been operated successfully.

  1. Provide Adequate Navigation Mechanisms

Users should have enough relevant information about where they are. To produce this information, you should apply a meaningful and consistent mechanism for assigning titles to windows. Then, use range and location indicators such as scroll bars or page numbers. You can also create navigation map, overview, or history of areas visited. Make your users feel more convenient in navigating the different windows in your web. You can create routes to access for particular tasks to achieve this goal. Furthermore, you should create an “emergency exit”. This will enable your users to escape from any unwanted state without having to go through an extended dialogue. For instance, undo facility or cancel button.

  1. Present Information Clearly

Increase the user’s ability to discriminate between different items and groups of data. Arranging on-screen information by the use of spacing, boxes, and visual coding techniques. But, don’t burden users with lots of information or coding than is necessary when performing the task. To enhance learn ability, you should be consistent in presenting information and location across different windows.

  1. Reduce Errors

Guiding the user to find their correct path to accomplish their goal will reduce errors. Users’ responses should be constrained to avoid error where appropriate to the task. But not where this would limit the users’ reasonable choice in how to perform their tasks. Similarly, the system should validate data entry as near to the point of input as possible.

Moreover, you should also use plain language avoiding the use of codes, indicate precisely the problem. Then, you should suggest a solution in error messages. But, above all, avoid using words that would blame the users.

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.

The Magnificent Flexbox

Posted on by Mario

FLEXBOX

Today, there are many design layout method that can help you do many things, but among those methods there is a method that is worth it to try for, named Flexbox, or the Flexible Box Layout. It is a powerful CSS layout module that gives web designers and developers an efficient and simple way to place, align and distribute elements in a container.

Flexbox Basics

Basically, Flexbox is formed by two elements, a flex container (flex parent) and flex items (flex children). A flex container is a containing element (like a div) given the display property flex. Flex items are child elements of a flex container, which can be manipulated through various display properties.

Flex containers and flex items each have their own range of properties that can be combined in different ways to create a range of complex layouts. Items inside a flex container can be laid out horizontally or vertically, aligned and distributed in various ways, and stretched or shrunk to fit the available space. All these options let you easily create responsive layouts.

How to use Flexbox

In order to start using flexbox, you need to first create your flex container (the parent element that will contain your flex items), for example a div block. Let’s add three more div blocks inside our flex container to act as the flex items before we style the element. The items will be stacked at this point.

We can set the parent container’s display property to flex with our child divs in place.

{
display: flex;
}

Layout Directions

The direction your elements will distribute themselves is known as the layout direction. Row acts as the default direction of a flex container, which will display the child elements horizontally. You can switch the layout to vertical by setting the direction to column.

Flex Container {
display: flex;
flex-direction: row;
}

Flex Container {
display: flex;
flex-direction: column;
}

The ‘main’ direction you set on your flex container is referred to whichever direction, while the ‘cross’ direction refers to other direction you didn’t choose. Due to this, the main direction will be horizontal and the cross direction will be vertical.

Flexbox also lets you reverse the layout; Children of a flex container will be laid out right-to-left (if direction is row) or bottom-to-top (if direction is column).

Flex Container {
display: flex;
flex-direction: row-reverse;
}

Flex Container {
display: flex;
flex-direction: column-reverse;
}
This can come in handy, especially if you wish to reserve the layout on smaller screens. For instance, you want to show text on the left side of the screen and an image on the right on desktop screens. This will move the image below the text on mobile. But, you can ensure that the image appears above the text by reversing the direction.

Flex Sizing

Flex users can modify their width or height (depending on the container’s layout direction) to fill available space.

Three options are given by Webflow for flex sizing: shrink if needed, fill empty space, and don’t shrink. Note that each child element can have its own settings, which allows for a plethora of design options.

Flex Item {
flex-shrink: <number>;
flex-grow: <number>;
flex-basis: <length> | auto;
}

Let’s take a look at what each of these options does:

  • Shrink if needed: sizes the item based on its width/height or its content since the item won’t grow larger than it needs to but may shrink to its minimum size to prevent overflow.
  • Fill empty space: ensure the item to fill all available space inside its parent. But, if you set this on all items in a flex container, they’ll expand to take up equal amounts of empty space.
  • Don’t shrink: sizes the item based on its width/height or its content, but doesn’t allow it to shrink, even if that will cause overflow.

Flex items can also have their own alignment settings, which override the default alignment set by their parent flex container. These alignments behave as explained previously.

Flex Item {
display: flex;
flex-direction: row;
align-items: flex-start | flex-end | center | baseline | stretch;

}

Flex items display in the same order as they appear in the source code by default. You can ignore this behavior to ensure elements display with flexbox, in the same order as you want.

There are four main options that you can use:

  • Auto: The default value, which order items as they are in the source
  • First: Item appears first in its flex container
  • Last: item appears last in its flex container
  • Custom: you can customize the order your item will be displayed in

Custom order can be defined as a number. This number will define the order in which the flex item appears inside a flex container.

Flex Item {
order: <integer>;
}