Tag Archives: interface

Is Ghost Button an effective UX design?

is-ghost-button-an-effective-ux-design

Ghost button may be one of the most used buttons that reached its peak around a year ago. But, this button is still popular to this day; you can find them across a wide range of websites. This type of button is usually used on minimalist or flat design.

If you are web designers, ghost buttons can be a good choice for creating an attractive design perspective. Their subtle design can give prominence to other design elements on the page. Moreover, it is also a good choice if you want to work well with responsive websites.

However, this makes it hard for people to see if their contrast with the background image is poor. Moreover, some people find it is difficult to spot the button, as they can be too subtle sometimes.

The Pros of Ghost Buttons

In the right context, ghost buttons will give a great look; they can give an elegant, subtle feel to a design. As a result, your pages will appear more minimal and lighter. Moreover, they can give you a deep visual hierarchy of a design when you can use them well. On the other hand, they will highlight an order of importance when you have more than one CTA on a page. This will give a more subtle effect to a secondary CTA.

The Cons of Ghost Buttons

While providing lots of benefits, in the other hand ghost buttons also bring some issues for users that affect in important page elements being overlooked. This has made Ghost buttons become a very questionable design decision since it often suffers from usability and accessibility issues. Based on the data available, it was clear that the ghost buttons were harder to spot during the tests.

Conclusion

Considering what impact you’d like your CTA to have is important. Only by this, you can decide which type to use. Even though, some experiments have shown that Ghost button grab less attention than solid CTAs. However, for some people Ghost button is still a ‘visually pleasing’ design.

Knowing 3 UX Mistakes that Almost Every Designer Makes

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

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