User Experience (UX) Principles and Best Practices
In one of the simplest form possible, UX, is also know as user usability and user experience. This term describes how the most basic user will use an application, a website, a program or anything that can actually “be used”. User Experience is based on how the user behaves. It is different than what gaining feedback is, because UX bases on how will the user reach its final goal or aim – buy the product, input the email address, or even simpler – click a button.
There are various techniques taken in consideration when you have to make the end user’s job easier, or actually make them achieve your own goals, and we will be discussing them in the details now.
User Experience: Summed Up
User (image credit: Peter Li)
In a few sentences, user experience is divided into several parts, each having its very important role in the over-all UX experience. We are talking about: Content, Visual Design, User Interfaces & Graphics, The Functionality of a website and the ease of browsing through the website. If User Experience is your main priority, or one of them, then you do realize how much time is put into doing the proper research of your website, users and their needs, and the right testing. There are many services out there that are willing to help you achieve the best user experience, for a small fee. UserTesting is one of those websites which will deliver, in a video format, the very same experience one your usual user experiences/faces.
Sketches
Wireframe for an internet shop with clothes (image credit: Samo Drole)
Well, when you think of anything, no matter what it is, it starts with an idea. No matter the idea is good or bad, easy or hard to make it take a proper shape, it actually has to be thought. It all starts with sketching and planning, either a pretty simple idea exposed on a paper or a very complex sketch describing each step.
A sketch is not something the creator must totally follow as it’s only a phase of planning, nor something that must be shown to clients/users as it may have many imperfections. Feedback is crucial that’s why it mustn’t be exposed, but I would rather ask a few people for their opinions than expose a wrong sketch to the masses. Some would say that sketches help you in client work because you can sort out ideas in the beginning, discuss and plan well, but I’d kindly disagree with that. I’d rather come up with a Wireframe for a client, which is slightly different compared to a sketch. It’s more of a refined, improved and detailed concept of a sketch, which means more, or less details but concise plan for a client.
Forms
Custom form elements (image credit: Marten Bjork)
Sign Up Forms
Signing up for a website or service is something either very important or unnoticeable for you, mainly because it depends what kind of website/product it is. Whether you are signing up or asking someone do to that, you are requiring some of their personal information. Some people are pretty anxious about sharing their names, e-mail addresses, addresses, sometimes even telephone numbers that’s why you must make them trust you. There are various fears users face when signing-up for something, some of them being the fear of getting spammed, having their telephone number shared with somebody else or getting their social media accounts hi-jacked.
Newsletters
Newsletters are another way of asking your user for personal information, and it mustn’t be ignored in any way. Newsletters usually consist of a single or two forms which ask you to input your name and your e-mail address. They are also accompanied by a CTA button which will actually submit your information to the database and will process it.
Typography
Wherever you’d look, you see text, typography and basically typefaces. Most of the times, websites set their basic fonts to the usual “sans-serif” font which is either the default “Arial” or “Helvetica”. The popular usability blog, UXMovement has concluded that sans-serif fonts actually affect readability which isn’t the best thing. From Usability’s standpoint, the best thing to do would be taking typography very seriously, and especially understand the basic principles of font pairing.
Buttons
In my opinion, buttons play a major role in user-experience, mainly because it asks you to perform one, or another action. The button click is the latest action the user has to perform, and if it’s a successful one, then you can say that your job is done. As a rule of thumb, the more visitors you have, the higher chance of having more customers, which is a thing you’d obviously want to achieve.
Techniques:
Colors
Depending on the colour palette of your web design, you would like to adjust the colour of your button(s). Minimal designs would obviously require a nice, light-greyish button rather than a very bright green one but as a rule of thumb try to give your buttons colours that grab the attention and put the main focus on them. One more thing that has to be taken in consideration is the contrast between the text on button and the colour of the button itself. As an example, you would like to use white coloured text on a dark button or dark text on a white-grey button.
Shadows
Most of the times I would say that you mustn’t add a Drop Shadow effect to a button’s text but it actually depends from case to case. On a dark button for example, it would be very appropriate to add a 30% Opacity, white drop shadow effect.
Size
One very important thing is to find the most appropriate size for your button(s). It is obvious that your buttons must be of a decent size, so that your visitors can actually see them, the same is for over-sized buttons, which simply don’t fit in your layout. It’s necessarily to find the right contrast between your layout, other widgets and grids (if applied).
Static, Hover & Clicked States
That is the necessary interactivity you simply can’t ignore. This point can only be applied if you are having your designs coded, otherwise you don’t need these states designed. Hover-Clicked states are a must nowadays because everyone is used to creating interactive, beautiful and appealing buttons which actually make the user feel comfortable and if you won’t comply, you’ll end up losing those precious users.
Understand the F and Z Web design Layouts
Whether you are, or you are not a web designer, understanding the f and the z web design layouts is what you need to care about if you do want to know more about usability and user experience. Most web designers are pretty familiar with these kind of layouts but if you want to dig into eye-moving techniques and similar then I’d recommend you to read the following articles.
Graphics & Interfaces
Another factor that does affect your users’ behaviour are the images and especially graphics you make use of on your websites/interfaces. It’s important to know that mascots, characters do give a personality to your website and make its over-all look more appealing.
Live Examples
Red Stamp has a very beautiful website with various UI-UX elements placed all over the page, including but not limited to buttons, forms like the newsletter and dropdowns, all combined with a nice colour palette.
Courchavel has set a very beautiful website as well, which actually got mentioned as the nominated website on CSS Design Awards and aWWWards.
Another very nice website owned by a design agency. The website actually puts emphasis on both black and white colours, creating a very appealing contrast.
This is a gastronomic website we are having here. It’s actually a very nice representation of what catering companies can go to and build an extremely appealing website, even if it’s not that complicated.
The following example is a different website from the ones we showcased before, mainly because it follows a rather strange way of promoting their work, but we definitely can’t deny that creativity has been put while designing it.
Conclusion
In this article we have tried to sum up and describe in details what user experience is. Whether you are a web designer, developer or simply a site owner, it’s important to keep in mind these basic techniques. No matter what your role is, you always have to deliver the easiest and best experience for the end-user, that’s why the techniques described above should be applied and taken-care of while doing your job.
I think many times designers and developers get so caught up with having a “cool” website that they forget there is an intended purpose behind each website. They are typically there for some entity on the other end to grow a business which requires functional design as well.
Thanks for this article, but you only talked about 1/6 of what User Experience is. Your article is more about “Web Design” than User Experience or Usability.
You forgot about User Research
You forgot about Information Architecture
You forgot about Content Strategy
You forgot about Usability Testing–Heuristic, Summative and Formative
You forgot about Visual Design
You forgot about development
Makes me think about this quote from Dan Kaneman’s book https://kindle.amazon.com/post/dWLXmmU0RGWpm5JG8nqo8w
fantastic article…………….:D
Thanks for this article. I agree with Bennett, it is more about webdesign than user experience.
And, you made a mistake : it is courchEvel, and not courchAvel :)
A – B testing could also be mentioned on this one, testing versions of your web page and something as ‘simple’ as the colour of a call to action button can make noticeable difference in conversion along with its size (as mentioned) – D
I agree that the article is only focusing on Web design. Just to add my comments, multiplicity of meanings used for UX and Usability confuses many. ISO definition of usability includes satisfaction. However assessing satisfaction without other essential criteria such as utility seems meaningless. User Experience (UX) is the overarching definition that encompasses Usability, Utility and look and feel that can legitimately relate to actual user experience. Usability and Utility are more of a science and look and feel is more of an art form that evokes sentimental emotions.
Also defining UX as “Content, Visual Design, User Interfaces & Graphics, and Functionality etc.” is misleading. UX is the user perspective and all such criteria are only the means by which a good user experience can be achieved.]
Really helpful article!!! check out this goo.gl/zAgN1