Design your way

Wednesday, December 16, 2015

The goal and only purpose of a user interface (UI), as the name implies, is to create an experience for the user.

Many automated solutions exist to make UI design simpler and faster; however, the designer must understand some basic rules of how to design a user interface. Because the focus is centered on the potential user, the user’s needs must primarily drive all design choices.

What are the needs of the user?

  • To accomplish the task with relative ease
  • To complete the task quickly
  • To enjoy the experience

The single most important characteristic of the UI is that it has to work well and work consistently. Secondly, the UI must carry out commands and respond quickly and intuitively. Lastly, but still very important the user interface should be visually appealing to the user.

How To Design A Great User Interface
Image source: Youlanda Kuo

Not one of these user needs can be minimized or ignored, but they must be prioritized. The feeling of satisfaction that a designer experiences when putting on the finishing touches is wonderful – for the designer.

If a user becomes lost or frustrated during the interaction, it really won’t matter at all that he thought the program looked cool. All enjoyment of the experience quickly disappears and frustration appears.

Designing a fantastic UI can be a daunting task, because in order to do so, we must focus completely on the target client and the program’s usefulness to that client.

We will discuss some basic rules that are very easy to comprehend but not always easy to follow. As long as these principles are our guide and the resulting characteristics are present, our UI design will be successful.

Think about your user

Think about your user 1
Image source: Eric Hoffman

This is very much an understatement of what really needs to happen. Constantly think of the user and his needs. Think of nothing else! It is very important that you do not assume anything about this part.

Pretend that you have no prior knowledge of the task at hand and approach your research form this angle. Truly and fully understanding the desired user experience is critical and all other aspects will depend on it.

Think about your user 2
Image source: Ennio Dybeli

The best way to gain a good understanding of the user needs is to, of course, speak with the client. Conduct an interview – face to face if possible. Ask detailed questions about what she wants to accomplish, what features he enjoys and dislikes. During the conversation, come to the meeting with an open mind, take detailed notes and employ active listening techniques.

Asking a question and simply pausing while the subject answers while mentally forming your response is the opposite of active listening and will block your hearing and comprehension.

After hearing your client’s response it is very important to summarize or restate what you have heard and ask them to clarify whether you are correct in your understanding. By interacting with the client in this way, you are giving them the control of the project and the end result will be that they feel at ease and in control.

Think about your user 3
Image source: Ranjith Alingal

A different aspect of a user’s needs is his or her level of competence or ability to use software. You may need to simplify or otherwise adjust to this.

After all, if you give them the ability to accomplish the job but they are not skilled enough to use your interface, what have you accomplished? Remember frustration and discomfort destroys enjoyment.

KISS (Keep It Simple, Stupid)

When beginning your UI design, start with a bare-bones approach. Build the skeleton of absolutely, fundamentally necessary elements and features. To go beyond this and add any additional features, stop and question your own motivation.

FM Radio UI
Image source: Aurélien Salomon

Does this feature have a definite purpose? Is it necessary to accomplish the required task? Will this make the user experience more efficient or simple? Am I showing off to a competitor or to myself by adding this? Are my desires driving my choices or am I remaining true to my goal of simply meeting the user’s needs? Remember, with a successful user interface design, less is ALWAYS more.

The same process should be applied to adding any design elements. If you can clearly explain the need for the element, then it should be included. If you are trying to impress someone else or yourself, it should be excluded. When in doubt, leave it out – at least for the present moment.

Ink iOS Mobile UI Kit
Image source: Ink iOS Mobile UI Kit

We certainly won’t pretend that the goal of being clear and concise at the same time will be easily accomplished. This particular guideline is much easier said than done, unfortunately; however, let the valuable time spent be an investment on your part rather than on the user side.

You are not improving the client’s quality of life by requiring them to read numerous, lengthy explanations of features in an effort to bring clarity. Self-explanatory tools are much more helpful than endless documentation. If there is a need for excessive documentation, then you have not achieved your goal of an efficient, quick and simple user interaction and your efforts are counterproductive.

KISS (Keep It Simple, Stupid)
Image source: Dejan Markovic

Again, this is not to suggest that you neglect attention to visual design elements. I am simply making the point that visual effects cannot be the main focus or add an unnecessary complication to the user. You focus on what it looks like much more than a user ever will.

Additionally, make life simple for the user by allowing some room for error. Error is inevitable, both in your design process and on the user end. If a simple formatting or input error causes a need to restart the entire process, users will feel thwarted and defeated.

Make the design familiar to the user

Make the design familiar to the user 1
Image source: Charles Patterson

This is not the time or place to reinvent the wheel or to teach new skills and patterns. The reality is that users spend a major part of their lives using an interface that is not the one you are creating.

Keeping certain elements similar to other frequently used applications will give the user a feeling of deja vu. If you give the user the feeling that they have used this application before and understand how it will react to certain actions, then you have achieved the creation of an intuitive product.

Metro style
Image source: Ionut Zamfir

Menus and buttons should perform in a predictable manner according to similar applications. Humans see what we expect to see! Give them what they would expect from other experiences. For instance under a File menu, a user would expect to be able to save changes, print or share the document.

A feeling of comforting familiarity can also be imparted to the user by providing frequent feedback. The status of any action should be apparent to the client. No matter how airtight your product humans are going to make mistakes.

Make the design familiar to the user 3
Image source: Dmitriy Goncharov

They should easily understand whether the action was successful or not, whether saving is required or if further action is needed. The last thing you want is a guessing user. A guessing user quickly becomes a frustrated user and ultimately, an ex-user. This feedback can be accomplished with brief messages or visual cues. As a user received various messages regarding the success or failure of a particular sequence, mistakes will occur less often.

Handling labels and icons

Sharebox
Image source: Oykun Yilmaz

Place labels next to icons rather than having the label appear as the user hovers over the icon. This will only slow them down. Don’t assume the user will understand the meaning of any icon unless it is a commonly used and universally understood symbol. What a new image means to you may be completely unclear to the client.

Use a visual hierarchy

When considering the UI design, a strong visual hierarchy is crucial to the look and feel of the interface as well as to ease-of-use. Each screen and menu should be similar with options consistently placed. Once users have become acquainted with the opening or home page, the design should already seem familiar as they move through subsequent screens.

Slate
Image source: Eduardo Santos

Overuse of fonts and other features intended to highlight important areas will result in an opposite effect. If everything is highlighted, nothing really stands out.

Any changes in color or other design elements may cause a need for many more changes through the user interface. In light of these points, a previously state rule bears repeating: only add or change design elements if the action is absolutely necessary.

Be consistent in your design

We’ve talked a lot about the comfort and confidence of the user and will continue. Remember: the user interface design is all about the user experience. If you keep your design steady and familiar the client will feel at home as they progress through the sequence. A consistent design helps the user to feel comfortable and confident. Every new phase of the program cannot require learning completely new skills. Similar tasks will look familiar and respond predictably.

Whatsapp redesign
Image source: Davey Heuser

Color scheme, general layout, navigational buttons and menus should remain exactly the same throughout each page. A consumer’s eye will automatically be drawn to a menu if the menu resides in the same area as on the previous page.

Make it look good

Make it look good
Image source: Dmitriy Ivanov

We’ve repeatedly stressed that design is secondary to functionality. If a program doesn’t function well and predictably, it won’t matter how it looks. However, if you have created a fantastic product, go the extra mile and put on the finishing touches.

CHallenge
Image source: Olia Gozha

The UI needs to look good to the target audience, so personal preferences of the developer may not be important. What is visually pleasing to one person may be irritating to the next.

Again, don’t make the mistake of going overboard with aesthetic elements. Know when to stop adding “bling”.

Remember, your design must be efficient

The primary goal of the user interface must be kept in mind here. The sole purpose of the UI is to accomplish tasks quickly and effectively, providing benefit and enjoyment to the user. Take the same care to evaluate the efficiency of the UI that you took to discover the client needs. After you’ve asked what the needs are, created an interface designed to meet those needs and provided a comfortable vehicle that meets those needs, the job is not done.

Email client
Image source: Jakub Antalík

To determine whether your design had efficiently met the goals, observe actual users to see if your design needs improvement. You may discover elements that slow the process down or frustrate users. Only by testing the product in a real-time environment can you truly evaluate design efficiency.

Conclusion

Conclusion
Image source: Michal Langmajer

This discussion is intended to serve as general guidelines to follow when creating any type of user interface. Every solution will be different in and of course, no hard and fast rules will apply to each situation. Some of the suggestions may seem to interfere with others.

Even as ideas appear to conflict, none can be ignored. Design features must be chosen only if they do not interfere with functionality; however, color schemes and other aesthetics are also important the user experience and should not be ignored.

Coaching
Image source: Julia Khusainova

Interfaces should accomplish all required task with clarity and efficiency, but in the effort to impart information, we can overwhelm and frustrate the customer with too much explanation.

The reality of user interface design is that every project will be different. The goal is to apply the guidelines discussed here in harmony with each other.

Paying particular attention to each aspect and choreographing a final product that is in perfect balance can only be done with meticulous planning and constant reevaluation. To pull all of these factors together in a balanced and smooth interface will take practice.

Admin web app ui
Image source: Mason Yarnell

Mistakes will be made, but the most effective lessons are usually learned through making mistakes. Try, maybe fail and try again and again and again. Interface design is not a natural talent for most and success will come with practice and experience. Start from where you are and be brave.



Source: http://ift.tt/1vQZIKE

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading