interface

Knowing 3 UX Mistakes that Almost Every Designer Makes

Posted on by Mario

knowing-4-ux-mistakes-that-almost-every-designer-makes

It’s in every designer’s DNA to make the impossible mission happens to be easy, simple, and beautiful. This makes many designers tend to be perfectionists which terrible critics would make their world fall apart and beautiful praise makes them fly. However, everyone will make mistakes and this also works for designers, especially web designers who should cope with user interfaces design. Therefore, every web designers should accept that mistakes is part of learning process since only by accepting it that way, they will learn and grow.

UX Mistake 1: Thinking users will understand what designers understand about.

Since designer will often deal with user interfaces, they use their common sense in everything they do. Their intuitive knowledge about how things work on the web is trained already, and sometimes this situation makes them think that it is a usual thing for people to think the same common sense like they did which cause further problems such as assuming that users: understand the controls, know which questions to ask, know what their icons, symbols and logos mean, will read or follow the instructions we give them, and know how to find what they want.

However, the fact is many users know nothing about design world at all since they come from different work background or etc., some even find that your visuals are confusing them. So, it is designer’s job to explain your design in varied points of view and lead their thought into yours.

UX Mistake 2: Do not know who Your Target Audiences actually are

There are many types of users, and not all users are your target audience, sometimes designers who do not understand about this will create wrong design which in the end may disappoint their target audience. Google’s designers seem to understand the difference between users and target audiences, instead of creating design that would please all users, they create user experience designs that would cause conflict with their goals, and in this case, if you are advertisers, bots, fraudsters, and searchers, you are removed from their user experience goals. They only create design that would please searchers, regular people searching for something.

UX Mistake 3: Not Enough Friction

Not many designers see the importance of having the right friction in their web design. In fact, some designers still believe user friction is bad. But, the truth is all websites need friction. Friction will help you manage things to adjust the users you attract.

There are many kind of good friction that you can use as examples, one of them is Quora, a Q&A site which have simple policy. Quora requires its users to be nice and respectful, unless they will be blocked or banned. Thus system is designed to maximize the user experience and make Quora a safe place for others.

The main point about friction is to know how to adjust the dial to attract the users they want, if you don’t then you will potentially overreacting it or you are chronically abused it. Below are some examples of bad friction:

  • Using captcha forms on a contact form with three or four fields.
  • Applying too many steps which are unnecessary
  • Not using enough form fields so everyone can easily gain access to whatever your design is offering.
  • Asking for privacy information in a matter where you should keep it as privacy.

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>;
}

3 Web Design Trends in 2016 that You Should Be Careful About

Posted on by Mario

web design

Like every trend, web design trend always comes and goes. Therefore, if you are web designer keeping up to date is the best solution to stay successful in this industry, so you can understand what is good and what is bad for your design. Below are 3 web design trends that you shouldn’t use in 2016, you can read this material to avoid you from any harmful mistake.

  1. Complex Typography

You may find that having more multiple typefaces is a good idea, while the fact is that sometimes using more than two multiple typefaces in your website will create a confusing and cluttered looking site, which reduces legibility and readability. However, at some point you still can use more than two typefaces in order to get a good effect.

In addition, another important point that you should remember related with fronts is about its spacing. A good spacing will work well for clarity. Below are some more tips related with typography that you can use:

  • Experiment with fonts. Aim for clean and clear presentation that also reflects the brand’s visual style.
  • Use fonts and typefaces that complement each other or are contrast enough to provide interesting color. In addition, you need to allow for psychological level when selecting the font/typeface as believe it or not certain color and certain type of typography will bring different emotions and feelings, for instance, a serif brings an air of formality, a sans-serif feels reliable and a script can be haughty.
  1. Put Everything Under a Hamburger Menu

In order to simplifying the navigation, designers keep hiding all of icon under a hamburger menu whether it is in desktop or in mobile devices. It is understandable that many designers will prefer to hide it under the hamburger menu just to make your site cleaner and sleeker. However, this also increases the risk of discoverability.

  1. Parallax Scrolling

Recently, parallax scrolling is one of the most favorable sites that allow the foreground and background content to scroll at different speeds which cause an illusion of depth. However, it is still debatable if it produces a good UX.

  • Bad for SEO

Since having parallax scrolling in your page will result in one page optimization, so search engines will only have a little way of content that can be crawled by the search engines. This is especially true as text tends to be embedded in graphics.

  • Can Reduce Performance

Moreover, due to its heavy use of graphics and JavaScript, the page will require longer time to load the image and this will cause more trouble for mobile users.

  • Can Affect Users Negatively

Some people may find that parallax site is more fun than the non-parallax sites, but some other people experience a motion sickness and significant usability issues toward parallax sites.