user interface

A Simple Guide for Designing Better Buttons

Posted on by Mario

simple-ways-in-designing-better-buttons

In website development, the role of buttons is important in determining the next actions. Moreover, having a good button design will automatically improve your user experience. If you’d like to take a look on how to create better buttons, you can follow several steps below:

Make Buttons Look Like Buttons

With visual cues, people can determine the click-ability, then understand that an element is a button. Due to this, it is important to use proper visual signifiers on clickable elements to make them look like buttons.

  • Shape
    For a long time ago, square or square with rounded corners is the most popular button’s design. Due to this, users are very familiar with this button shape. Even though, in some cases, the button shape can be circles, triangles, and etc., depending on the style of the site or app. However, using unique ideas to replace the traditional shapes will be a bit riskier. The main point is to make sure that people can easily identify each varying shape as a button.

But what elements can help you identify icons as buttons? There are two elements that can        give clear and distinct labels to icons as buttons. First, be consistent about the shapes to              provide a more familiar experience for users. The picture below demonstrates this point              perfectly.

  • Shadows and Highlights
    Shadows will help you a lot in making the element stand out against the background. Moreover, with shadows and highlights, you can easily identify an element as a tap-able or clickable. Since the effect makes the elements look like as if they can be pressed down.

Make It Easy for Users to Interact with Buttons

The next step is to make sure that your users have a good experience when they press the buttons. This includes size and visual feedback of buttons.

  • Size and Padding
    A good button should have bigger size than a person’s tap size. This will ensure the buttons you design are large enough for people to interact with. To choose a proper size for your buttons, you can rely on the MIT Touch Lab study. This study reveals that the average size of finger pads is between 10-14mm and fingertips are 8-10mm, making 10mmx10mm a good minimum touch target size.
  • Put Buttons Where Users can Find Them
    Locate your button in an easy to find area. Don’t make your users hunt for buttons.
  • Location and Order
    When it comes to web-based apps, you should determine about which placement truly works best for users. The right way to find out is by testing. If you design mobile navigation it’s worth paying attention to the best practices for buttons location.

What is an Interaction Designer?

Posted on by Mario

what-is-an-interaction-designer

Interaction and designer are two familiar words, but when it forms “interaction designer”, not many people truly understand the real meaning of that phrase, in fact, a real graphic designer or web designer may get confused with interaction designer’s job description. If you are one of those, you can learn it below:

Interaction Design

A process which is focused on creating engaging web interfaces with logical and thought out behaviors and actions is known as interaction design. A good interactive design will create desired user experience by using technology and principles of good communication.

There are many fields of interaction design, but there are five pieces that are still useful and relevant today are such as follows:

  • Human/machine communication is the translation of conversations between the device and user.
  • Action/reaction looks at how interactions happen and unfold.
  • State ensures that users know what is happening and why in terms of the application.
  • Workflow ensures that users know who to use a tool or application and what happens next.
  • Malfunction takes into account mistakes that are bound to happen.

In fact, there are more considerations to keep in mind despite the five pieces above, when creating design interactions. You can ask yourself with usability.gov basic questions in six different categories that can help shape how the design comes together.

  • What can a user do with their mouse, finger or stylus to directly interact with the interface?
  • What commands can a user give to interact with the interface?
  • What about the appearance gives the user a clue about how it functions?
  • What information do you provide to let a user know what will happen before they perform an action?
  • Are there constraints to help prevent errors?
  • Do error messages provide a way for the user to correct the problem?
  • What feedback does a user get when an action is performed?
  • What is the response time between an action and response?
  • Are the interface elements a reasonable size to interact with?
  • Are edges and corners strategically being used to locate interactive elements?
  • Are you following standards?
  • Is information chunked into a few items at a time?
  • Is the user end as simple as possible?
  • Are familiar formats used?

Role of an Interaction Designer

An interaction designer should be able to perform a design strategy, identify key interactions of the product, and create prototypes to test concepts and keep up to date on technology and trends that will impact users. Moreover, a person can be notified to have any talent as a good interaction designer, if they find themselves thinking about or asking the questions in the list above, then you are a good interaction designer material.

Moreover, a design is categorized as an interaction design when it has concepts and principles, such as follows:

  • Goal-driven design: Why does your site or interaction exist? Figure it out and make sure your application does this one thing exceptionally well.
  • Interface as magic: You don’t even really see the best interfaces. “the best interaction designs don’t exist: they don’t take a long time to load/respond; they don’t make users think; and they don’t give user’s cause for grief.”
  • Usability: “interfaces which make the state of the underlying system easy to understand and use are favored.”
  • Affordances: ”The best (industrial/interaction)designs are those that speak for themselves; in which, as the saying goes, form follows function.”
  • Learnability: “A great deal of what comprises a usable interface is made up of familiar components. … The best interaction designers don’t reinvent the wheel every time a similar design challenge comes. Rather, they call upon a set of patterns.”

5 Tips for Ergonomic Mobile Interfaces

Posted on by Mario

mobile user interface

Ergonomics design has been very popular in design world recently. No wonder, every good web designers or graphic designers will absolutely considering the ergonomic design when it comes to mobile design interfaces.  But do you know what ergonomic mobile interface is.  Ergonomics has always been very important to industrial designers, but it’s becoming increasingly important to digital designers since we no longer use a keyboard and a mouse, but we use more physical activities, such as tap, pinch or stroke them.

This new physical activities demand designers to not only think about how a design looks and feels, but also the physical aspects of using it. So, how can we create a mobile design that is comfortable to use as a result of being ergonomic.

  1. Design for Multiple Holds

If you keen enough to observe how people hold their mobile devices, you will discover that they use variety of different holds. Therefore, creating a design with multiple holds in mind is important. For example, you need to test your designs out across a range of holds to see how comfortable your design on each of them.

  1. Design for Thumbs

Thumbs is the most used body parts when it comes to gadget. In fact, thumbs drive the majority of all smartphone interactions. This is because thumbs are exclusively used when a mobile is held in one hand and heavily used when it is held in two hands. Therefore, you should create tag targets which are slightly bigger than your fingers. A good tap targets should at least 44 x 44 points (16x16mm), with at least 7 points (2.5mm) between them. Bigger target is always better rather than the smaller one. However, if you still want to make a smaller target, you better not go any smaller than 44×30 points (16x11mm). This size can be used as a standard in making tap target in any device.

  1. Place Popular Controls in Reach

Locating links and buttons in easy to reach place will ease your user interactions. The middle and bottom is the most favorable place to locate any controls, buttons, or links. Moreover, you should be careful when placing the menus at the bottom corners, since it will easily lead to a tricky tap, especially when a device is being held in only one hand.

  1. Place Content above Controls

To prevent any disruption or halt when you are playing the content as they tap the screen, always try to place content above controls. Moreover, you also need to put key information outside the screen area to avoid any finger or thumb’s disruption.

  1. Design with Portrait Mode in Mind

Although, you can choose either to use smartphones vertically or horizontally for the majority of the time, horizontal is usually used for particular tasks, such as viewing videos or photos. Of course a mobile design should ideally support both vertical and horizontal modes, but unless you are designing a video or photo-heavy site or application, please always design with portrait mode in mind.