If you are approaching the world of UX or you are already a navigated UX / UI Designer, then this article, in which I am going to talk about 6 principles that every UX Designer should know, is designed for you.

In this article, I want to deepen the discussion on what the founding principles of UX are and cause us all to think a little outside of the box.

The principles of UX: first of all, we need to know the people

Designing the experience of any product (physical or digital), or a service, means putting the user at the center of the project and then applying a user-centric thought.

Before getting in front of a computer, designing UX means knowing the people for whom we have to design and empathize with them through all our senses. It means observing them, listening to them, asking them questions; it even means smelling the smells of the context in which they live: yes, everything becomes fundamental!

Since birth, we have had 5 powerful tools that allow us to interact and retrieve information in the world we live in: the senses. Without them it would be impossible (or very complicated) to move independently in the spaces that surrounds us.

Precisely for this reason, understanding how people interact, through the senses, in the area in which we are going to treat their experience as users, is fundamental.

So if we need to know people to make UX, who can help us do it correctly?

The most correct answer is certainly psychology. In particular, some strands that have focused more on the study of human perception and experience.

Obviously this does not mean having the presumption of knowing it all! However, having familiarity with some theories and principles helps the designer to understand (first) and design (after) the most comfortable and rewarding experience for their user.

Here I would like to start with some key principles that govern the interaction between man and the real and / or virtual world. There are not many, but they are sufficient to determine the success or failure of the products with which we relate every day.

The most fascinating thing (for a UX Designer, of course) is that these theories apply to any existing object, and sector, that can come to mind.

To start talking about it – though – it is necessary to reference one of the fathers of this discipline who theorized them, and who presented himself with the title of the first UX designer.

The 6 ” never again without” UX principles.

Donald Arthur Norman, a US psychologist and engineer, along with another guru and his partner Jakob Nielsen, has dedicated himself to the research and study of ergonomics, design, and more generally of the human cognitive process. He based his analysis on anthropocentric design, bringing together two fields that, at the time, did not communicate: technology and psychology.

In the well-known book The Coffee Maker of the Masochist , the “bible” for the true aspiring UX designer, tells the deduction of the principles of usability and ergonomics that govern our world since ancient times. Subsequently, in a second text equally worthy of mention, Emotional design , Norman maintains that a product capable of stimulating positive emotions – through an experience – is perceived as “more beautiful” and “better functioning”.

30 years have passed since the publication of his first text, yet the principles listed are still alive and well, and most definitely put into practice today.

Let’s walk through them together:

1. Affordance

The affordance (which we could translate with “invitation”) is defined as the physical quality of an object that suggests appropriate actions to manipulate it.

As Norman writes,

Perceived affordances help us guess what actions are possible, without the need for signs or instructions.

In interactive design affordance is the first fundamental rule: being intuitive. That is, the interface must be understandable from the first glance, without needing instructions (labels, texts, CTA, and so forth).

2. Significance

The signifiers are “elements” that enrich an object, telling the intrinsic meaning of the same. In other words, they signal the possible actions through that object and how to execute them. They have the task of triggering the Feedforward, which means anticipating exactly what will happen.

The signifiers must be perceptible, otherwise they do not work.

– Donald Arthur Norman

A classic example is the anti-panic door handle, you don’t need to know it or even accompany it with the word “push”. There is only one correct way to use it.

In interactivity, in order to exploit the concept of signifiers, you have to be careful not to make two serious mistakes :

1. The signifiers that do not make sense: that is, the use of texts (in call-to-action) that do not clearly tell the action or page that the user is about to visit. To give an example just think of the superfluous Click here, which turns out to be a real tautology. It is obvious that a button needs to be clicked, tell me what happens if I do it! Another similar example of significant error is the Discover more, often inserted too generally in texts, videos or CTAs. As Yvonne Bindi, information architect and expert in language and communication, writes in his “Language design. Guide to the usability of words for communication professionals”:
   
   ” Discover thus becomes an empty navigation word, all too obviously borrowed from marketing.”
   
   
2. The excess of icons: In visual design, the overabundant use of icons, or icons that are forced where they aren’t necessary, gives rise to what is called visual pollution. The user is overloaded with information and is therefore impaired in the use of the product. The icon is useful when alone it represents something unequivocally, without being accompanied by texts. It is also necessary to pay close attention to cultural conventions.

3. Mapping

How many times have you mistaken the light switch or the cooktop knob?

Here, it means that there was a mapping error in the design phase.

The mapping principle indicates the relationship between two things. For example, between the operation of a key and its effects. A good mapping takes into account the cultural models learned or spatial analogies.

Let’s think about activating the directional arrows of a car.

To indicate the right, move the lever upwards (making a semicircular movement to the right) and vice versa for the left, move the lever downwards.

Norman writes:

When the mapping uses the spatial correspondence between the placement of the commands and that of the commanded devices, it is easy to understand how to use them.

In web design the mapping is extremely linked to the signifiers and is conveyed by the position and behavior of the elements. The most classic example is the vertical scroll on a screen, which indicates where you are compared to the page. As you drag it down (or up) the page moves at the same speed, maintaining the place of positioning in space.

4. Constraints

The limits are divided into physical, cultural, semantic and logical, depending on the context, but define, with the same force, “obligations” that guide the user along a path.

In an interface, the constraints can be obvious, like the physical ones of the screen size, or more refined ones, like the logical ones of a deactivated icon.

They are logical constraints of anticipation, like the images half inside the screen and half outside, which allow us to intuit a slideshow and swipe. Or the visualization of the steps of a process, for example during the checkout of an e-commerce sale, which allow the user to immediately understand the correct path to follow to get to the end.

5.  Feedback

The feedback (which we can translate as a “response”) is a return message from an object that tells us that our action has been implemented.

Norman points out to us that

The feedback must be immediate, even a delay of one tenth of a second can be disconcerting.

Every day we receive feedback from the products / services we use: the light on the button of the elevator, or of the pedestrian traffic light, or of the coffee machine. They allow us to have confirmations, without groping in the darkness of uncertainty.

Also and above all, feedback is fundamental on the web. When we select a folder with a mouse click, for example, the folder takes on a different color, which tells us that the system has learned our request. If, on the contrary, this type of feedback does not occur, we would continue to click spasmodically on the folder, in the grip of a sense of frustration (why does it not open?!).

6. Conceptual model

A good example that helps us understand are the icons of files and folders on your computer. In the computer there are really no sheets or folders, but the concept of a “binder” (recovered from the way we organize things in reality) facilitates understanding and interaction.

Interactive design, as we have just understood, makes extensive use of this principle. In association with the signifiers (Home = house, Size = scissors, Funnel = filter), the conceptual models allow us to associate a virtual action with one that we perform in everyday life, and therefore more concrete, for an immediate and simple understanding.

In the design phase it is important to take into account the fact that, as in reality, even in the virtual experience users expect a similar response to that which they experience in everyday life.

Conclusion

Norman’s 6 principles are timeless because they are based on human psychology, and applying them in design is a way to ensure a significantly higher level of usability and clarity.

But I must be honest in telling you that they are not the only ones and it is not enough to know only these. There are other very interesting theories that explain the complex but fascinating way in which people act in front of daily stimuli.

And above all, remember that, although it may seem complicated at first, becoming a UX designer is a journey that must be cultivated day after day. (As with everything).

Pay attention to every experience you go through because each of them pays a small roll in the way a designer, whether they be UX or otherwise, conducts themselves and their work.

In an internet world, a website is a way to share information with readers and to convert users into possible clients. Websites are a client’s portfolio and make up the center of marketing efforts.

However, in a rapidly changing world, where internet trends shift and change, a website may grow to feel outdated. Redesigning a website is expensive. Here are some ways to keep your website efficient.

Design for your audience

When working towards your audience, remember to use market research to find out who your audience is. Then make sure to design your website around your audience.

A corporate audience would engage differently with teenage gamers, for example. Once you know who your audience is, match your website to user needs. Request user feedback, and then follow these guidelines to improve your site.

Create personalized experiences for your users

There have been a lot of improvements lately in personalized experiences. You’ve seen chat bots and conversational interfaces everywhere. But an interesting new feature that you might see is age-responsive design.

It may sound strange, but it’s actually an amazing thing. With it, you can tweak the user’s experience to suit it better for them. You can change the font size, color or other elements that will make it easier for older people to consume your content.

Less is more

Internet viewers are impatient, and you might only have a few seconds to hold their attention.

Keep only important information on your homepage, and let viewers find what they need by installing an effective navigation panel.

Include your logo, brand, and call to action details on your homepage, so that users know that they have come to the right place. From here, users can navigate to different areas of your site.

Structure your site

Your navigation panel, content, and action panel should be designed as clearly and concisely as possible so that they meet user needs.

If a website flows and a user is easily able to communicate, this will ensure return customers.

Text

When including written content, look at the size and choice of font. Your goal is to make the content as easy to read as possible. Use only three fonts at most, and divide paragraphs into easy to read headings or subheadings. Make sure you’re writing an easy to understand website tagline. It’s the first thing your users will see.

Use bullet points to make instructions clear. Read the text carefully so that you are aware of how to structure information to meet users’ needs.

Also, make sure the fonts you use are easy to read in paragraphs or titles. There are lots of articles with free fonts. Pick one or two fonts that are fit for your audience and have a good readability score and you won’t be missing any visitors/clients due to font issues.

Navigation bar

Your navigation bar is used by viewers to access your site. Make it simple, easy to access and efficient.

Help visitors to return to your homepage easily. Your homepage displays your brand and logo, and assists with defining your product.

Page speed

Internet users are impatient. Ensure your page downloads quickly. This is particularly important for mobile devices; which viewers may use to quickly access information during a quick time gap.

If your user is going for a quick cup of coffee or making a hasty purchase between phone calls, and your page takes a long time to install, your client will feel frustrated and you’ll lose a customer.

Slow pages often result in viewers ‘bouncing’ or leaving the site after accessing the home page. A two second time delay may result in 87% of viewers leaving the site. This has a massive impact on a business.

Find out from Google what your page speed is, and pick up any suggestions they have to offer on improving your site’s downloading time.

Be bold with your calls to action

Calls to action show viewers how to subscribe, join a forum or make a purchase. These buttons are often clearly and simply labeled. Use bright website color schemes or strong contrasts to highlight your buttons. Pick colors carefully, depending on the message you want to give your user (reliability, intelligence, urgency).

When labeling your call to action, use words that encourage action. Focus on encouraging your user to identify emotionally. Words such as ‘Join Now’ encourage belonging to a forum. They also give a sense of time, which prompts the user to join ‘now’ and not later.

Keep your call to action message direct and precise. Showing customers how to subscribe and offering a prompt such as a good deal or free download can also encourage customer participation.

Keeping space

Keeping your website uncluttered will give your user an easy and relaxed experience. A cluttered, chaotic site is often difficult to negotiate.

Make sure your content, images, and icons all have breathing space. This will give flow to your unique website. Group together all connected data to keep your site clean and easy to understand, and connect your pages through consistent color, font, and style.

Contact details

If you want your users to engage or get in touch with you, make sure your contact details are easy to reach. Add all the necessary means of communication (such as phone, address or email).

Social media links

Your users may find out about your product via your website, but they often engage via social media. Include links to your social media pages so that your users are able to find you, engage with you, and follow your latest posts.

All businesses should have a social media page in order to engage clients, show new updates and keep in contact with potential customers.

Include a search field

When your user comes to your site and wishes to make a quick purchase, or has a question, search tools vital. If you have a great deal of information on your site, and precise details are hard to access, customers may use the search information to access the data they need. This will give quick and easy answers, prevent frustration, and keep your user on your site.

Frustrated users will go to your competition. To make your website quick and efficient (particularly if you have a lot of information) make your search bar easy to find.

Fix your broken links or install a custom 404 page

If your website has broken links, these may result in users leaving your site. This is because they find a ‘dead’ page, which cannot take them where they want to go.

404 pages are like blind alleys that block access to your site. Identify your broken links by checking your website in Google’s webmaster tools.

Redirect your old page to a new URL with a similar topic.

Request that your old URL is removed from search engines.

You can design a custom 404 page, taking users to your main site, offering up good deals and explaining your brand. Show your viewers new products, special offers, and top deals.

Use humor and apologize to your viewers for the broken links. You could also offer an apology on your custom page, give users the option to access a great deal, or offer a voucher or free delivery on a product.

Summary

Giving your viewers an excellent online experience will engage viewers, converting them into clients.

Use these helpful tips to get the best from your website and give your viewers a worthwhile online experience.

Did you ever try to work in a straight line from the beginning to the end of a design project? If yes, you may have discovered that your design concept didn’t work out quite as planned. Perhaps, it didn’t even work out at all.

Prototyping is an effective way to prevent such occurrences from happening. Any extra work involved in building a prototype usually pays good dividends!

Prototyping significantly speeds up the design process. Moreover, it helps spot errors that would involve greater expense during later stages.

Finding the right prototyping tool need not take a lot of your time. The three featured here, are the best of the best.

Proto.io

Both low- and high-fidelity prototypes serve useful purposes. Whether you want verification that your design concept is valid and workable, or you wish to user test your design before handing it over to a developer, Proto.io will be a great choice. It is a powerful and easy-to-use prototyping tool.

You can start using it right away, since design or coding skills are not required to use it.Once you add Proto.io to your toolkit, you’ll be able to do your design and prototyping work, share information, provide previews, and collaborate with project stockholders – all on a single platform.

Proto.io’s Dashboard helps you maintain strict version control and supports your collaboration tasks. The Editor provides the functionality needed to build your prototype(s). The Playerplays an essential role when you need to share a prototype with others, conduct testing, or view change results on your browser.

You have the option of designing a prototype from scratch using the Editor, or importing design and design information from Photoshop or Sketch.

Design Systems by UXPin

If you’re in the market for an end-to-end UX design tool, UXPin is your best bet. The market is saturated with prototyping tools, but UXPin seems to be the only tool that doesn’t just excel at prototyping, but also tackles the more complex challenges of workflow, design consistency, and developer collaboration.

This cloud-based platform supports the whole UX process in one place: design systems, prototyping, documentation, collaboration, and developer handoffs. UXPin also integrates with Photoshop, Sketch, Jira, and Slack to create a more connected workflow.

One simplified workflow we found useful was creating your design system in UXPin with Sketch assets, then quickly prototyping in UXPin, collecting feedback in UXPin and sharing in Jira, then generating specs and style guides for developers in UXPin.

Fluid UI

Fluid UI is a user-friendly wireframing and prototyping tool designed to improve communication between web designers, developers and product managers.

Without ever leaving the platform, you can design, start interactive video sessions and chat and comment in real time whether designing or just previewing. Fluid UI is especially effective when working with distributed teams – whether in the same office, or on the other side of the planet, it doesn’t matter.

Fluid UI also contains a comprehensive series of built-in libraries that support wireframe and prototype design, material design, and design on iOS or the web. You can also upload your existing designs.

Three subscription plans are available, but you might first want to see what Fluid UI has to offer by signing up for its single project, “Free Forever” plan. Unlike other tools, Fluid UI also has the advantage of allowing you to store your data for free between projects.

Why Prototyping is so Important

To ensure you’ll accomplish your goals, it’s important to test your ideas as you progress. This is much more preferable than work straight through.

Prototypes provide insight into the performance of a site’s functionality. They tell you when changes are needed to ensure the product will be a pleasure to use.

Prototypes help you:

1. Define your design goals and ideas, refine them, and allow them to evolve

How to get the maximum benefit from prototypes? You need to create a series of them to check your design as you progress.

This process is often referred to as rapid prototyping. Such approach will help you deliver a high-quality design in less time.

2. Determine what works, what doesn’t, and what could be made to work better

A cool idea doesn’t always magically morph into a stellar design. If you’re going to make a pitch to a client, it’s not a bad idea to first see if your design idea is practical and feasible. Low-fidelity prototypes are particularly effective in demonstrating the practicality of a design concept.

Once practicality established, further prototyping can be extremely useful. Use it to validate and improve your design’s performance characteristics and functionality!

3. Identify easy to overlook design errors or problems

You don’t have to wait until user testing to uncover any remaining problems. Doing so can cost you extra in terms of time and money.

Problems detected early on are generally easiest to fix. By using prototypes, you’re more apt to detect problems that would otherwise go unnoticed.

4. Collaborate and communicate more effectively

Prototypes, especially interactive ones, contain vastly more valuable information than text or slideshows.

Prototyping can reduce a day-long product review meeting to an hour or less in many instances. This is also relevant when communication tools like video or live chat are put into play.

Summary

A prototype can be viewed simply as a useful design aide, but a good prototyping tool offers much more. It does not only speed up the design process! It provides an excellent means for early-on detection of hard-to-find design errors.

Those chosen here, stand for the best of the best in terms of functionality and performance.

With so much information related to the evolution of the graphic design, I don’t think there is any designer who can deny that flat design is one of the latest and hottest trends in the graphic design world. Having its own roots in the minimalist design, this visually simple and simplistic style can have many different forms and definitions. But to clear the things right from the beginning, I think it’s a better option to describe flat design starting from what it isn’t:

1. Flat design is not 3D. In simple words, the style’s name comes from its two-dimensional characteristics that are given by the usage of the flat shapes and of the details that create depth and dimension, such as shadows, textures, and highlights.
2. Flat design is not skeuomorphic. It started as a reaction against skeuomorphism. Designed to suggest or to look like (resemble) the real-world objects or processes, skeuomorphism uses generously effects such as drop shadows, reflections, realistic textures, bevel and emboss, glows and so on.

Flat design started to be a recognizable style in 2012 and 2013 thanks to the release of Windows 8 and iOS 7.

Why is flat design so popular today?

There are many reasons for which the flat website design has taken the web world by storm. Easy user interface, bold colors, sharp images, simple navigation, distinctive fonts, easy to read the text, all together contribute in making flat design the best option for many designers and customers. Indeed, all designers know that flat design is two-dimensional, uses simple graphic design and icons and has some minimalist approach that makes especially the web design projects easy to manage. On the other hand, for the companies which embrace this style, it comes with attributes such as simple user interface, friendly aesthetics, clean, colorful, positive wire-framing effect, minimal, ease of use and maintenance and the list seems to continue.

We see today tons of SaaS companies and products leverage flat design for creating easy to understand and simple products. Here are a few resource management software tools to online banking apps, they all started to embrace flat design and absolutely nail it.

However, the web designers have to face these days not just the challenge of a new relative trend, but they also have to make sure the design is responsive enough to provide the user an easy access on other devices than just desktops.

Taking into consideration the flat design has been around for a few years and is still going strong, for sure it’s more than just a passing trend and it has come here to stay. As for any other trend, there are two sides of the same coin that each designer should know and not just blindly follow the trend.

So, let’s look at flat design pros and cons and also let’s see where it might head in the future.

The PROS

Flat design is trendy

As we’ve already mentioned, flat design is one of the hottest trends nowadays. You may see it everywhere, whether it’s about brand design, print, packaging or web design. Those visual projects that use flat design are on top and this style has gained the attention of many graphic designers in a very short time.

Flat design is compatible with the responsive design

Since Microsoft, Apple and other big brands have embraced the flat design, this style was also adopted as a fresh approach to delivering a great experience to the users. From its appearance until now, it has been and continues to be an excellent choice for web and mobile design – and for some good reasons.

It’s true the flat design principles fits all design categories and can be applied by all of them, but its grid-based layouts and simple visual are particularly suited to web and mobile design because they can be easily resized or rearranged to display on different devices and screen sizes.

Taking into consideration that the number of people connecting to the internet using mobile devices surpassed the number of those who access the internet using a desktop, the reason for choosing flat design website is more than obvious. According to Ryan Allen, flat design can be used to “dynamically scale to a content-appropriate size much simpler than a pixel-perfect design.”

Flexible framework

No matter how you name it – grids, cards or modules – many visuals using the flat look tend to rely their graphics on geometric shapes, especially because this type of layout is easy to scan and navigate. The grids or modules are also flexible frameworks that can be shaped into different configurations. This allows the designers to create visuals that best suits with different design projects and display their content, rather than gather the content in limiting and pre-determined layouts.

Let’s take a look at the two examples listed below:

The San-Francisco based agency Moniker uses grids in different ways to show their work, profile, and news.

On the other hand, these brochure and flyer designs feature different geometric shapes for highlighting various design elements such as typography and icons. Also, the blocks of uniform colors and simple illustration bring the flat look for both of them.

Clean typography

Because of the lack of three-dimensional effects and of the quite simple visual, flat design also provoke the designers to approach the typesetting in a different way. Often, the result is a larger and more streamlined typography that combined with bright colors, bold and creative look makes it look absolutely stunning.

Clean and Sharp Visuals

One of the most important characteristics that make a flat design so appealing and interesting is its sharp design. The icons, shapes, lines, and buttons are all in the minimalist style, making the visual look beautiful. Also, the high-contrast features including bright colors, typography, and boldness all together make the design clean and easy to follow.

The CONS

Lack of Distinctiveness

In terms of visual communication, every business or brand wants its design to communicate their unique characteristics, whether they are using about brochures, posters, websites, apps or something else to convey their message.

One of the downsides of flat designs is the constraints imposed to designers by the minimalist approach and relatively strict rules. With a limited choice of principles to apply, combined with other current graphic design trends, we’re seeing a huge rise in generically designed visuals.

For instance, let’s take a look at the two apps listed below, which are unrelated to each other:

Both of them feature almost the same geometric shapes, use the same color scheme and overlapped white sans-serif text.

Compromised Usability

While they strive to emphasize the flat design’s clean and minimalist qualities, some designers fall into the trap of focusing too much on aesthetics to the detriment of usability. This is a particular risk for the web and mobile design.

Since everything is flat, it’s hard to say what is clickable and what is not. To keep it simple, flat design projects tend to have less “information density”, so, important features and actions can be hidden from the view. Therefore, many users don’t accept with an open heart the too much simplicity in interface design that characterizes the flat design.

Extreme minimalism

The ethos of flat design is to implement the “Swiss Style” philosophy. A philosophy that places heavy emphasis on minimalism amongst other things. But the minimalism included here is a fine line that could be easily overstepped and transform everything in a featureless site.

On the other side, it can be difficult to convey a complicated visual message in flat design. One of the arguments against flat design is the simplicity of user-interface tools. The supporters of skeuomorphic design say the effects that add a sense of realism make the tools easy to use. Frankly, I think it depends on the context.

The FUTURE

Flat 2.0

As the flat design has been around for few years with all its pros and cons, the designers decided to adjust the style according to their needs.

In its early days, the flat design was characterized by a strict visual simplicity. However, for both aesthetic and functional reasons, the recent developments have brought the subtle reintroduction of effects like shadows and textures. The result is a style named “Flat 2.0” or “almost-flat” design.

This style is more of a compromise: you still get the clean simplicity of flat design but add some subtitle 3D effects for a visual variety and improved usability.

Material Design

Including many common characteristics with Flat 2.0, Material Design is a visual language developed by Google that accentuates grid-based layouts and features of “deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space” to create a “bold and graphic interface that immerse the user in the experience”.

Considering the material as a metaphor, Material Design uses a paper-inspired approach with “visual cues that are grounded in reality” and “familiar tactile attributes” for helping users to quickly understand and navigate the designs. Also, the “fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.”

As Google Material Design’s guide is free, the designers are encouraged to apply it to their own work, whether they chose to follow closely these guidelines or to pick up and use the elements and techniques they like.

Join the Discussion

Whether you are an advocate of flat design or of skeuomorphism, the two can certainly co-exist. It depends on the context and content. The tricky part, as the last years has shown and for sure the next years will prove, is to find the perfect balance between them.

Where do you see flat design moving? Do you think it is here to stay or taking into consideration the last evolution of the graphic design trends, it will rather evolve to something else? Feel free to share your thoughts and insights in the comments.

We may not judge a book by the cover, but we always judge a business by its website. This is the reality and we have to deal with it.

Back in time, in the early days of the Internet, creating a website was something that only IT guys were capable of making. With today’s advancement of technology and increasing interest for better and easier solutions when designing websites, almost anyone can design websites without much effort or any coding know-how.

However, this also brings some inconveniences since not everyone understands the concepts and principles of website-building. Therefore, sometimes the creativity goes too far away either due to lack of knowledge or experience or simply laziness.

In order to solve this problem, some companies have created website builder apps. Most of them have pretty nice templates, responsive designs, many options for customizing them, and can be used to create attractive websites with a few clicks of a button. But what most people tend to forget is that a website builder is merely a tool. If you don’t have the right vision and you don’t know the design principles, then you will most likely fail to make your site eye-catching, functional, and efficient.

Instead of having a website conveying the right message to your audience, you will get something that will either make people laugh or ask what was in the designer’s mind. Either way, your visitors will leave your web page without giving you any second chance.

Before listing the worst websites I have found on the Internet, let me be clear about some things:

– Firstly, I don’t mean to cause any trouble or pain to anyone, and I am certainly not making fun of web designers. Therefore, I beg the developers of the listed sites not to take offense at my remarks. I am quite sure some of these sites are designed by beginner designers. We all have to start somewhere. Besides, mistakes easily occur if you don’t have any experience.

– Secondly, I’m not talking about those websites that are just too old and haven’t been updated since their inception. Those sites may look unappealing to us now, but surely, they were created while considering the design principles of their time. But if it happens to display some old designs, it may also be because there is something in the design that’s plainly terrible and hideous.

I have listed these websites keeping in my mind several design principles:

• Easy to understand navigation;
• Proper use of color;
• Right use of animation;
• An easy-to-use layout;
• An aesthetically-pleasing model;
• Appropriate to the topic;
• The design elements do not hinder content;
• Great content that’s easy to find, navigate, consume, and share.

Simply put, the main idea is that I don’t want to shame anyone. Taking into consideration that we are all used to finding and appreciating the best website designs, I think we should also analyze awful designs and learn from such painstaking mistakes.

With that being said, let’s take a look at some websites that are hilariously terrible:

1. Penny Juice

Penny Juice is a fruit juice concentrate that’s made specifically for childcare centers, preschools, etc. When you get to the website, the first thing you need to do is to choose which version you want to use: either HTML or Flash. Choose wisely!

Once you have chosen the version you want to use, you get to the next page with a simple menu structure and flashy colors that irreversibly hurt your retina. You will also find a copyright notice since 2001-2002. That should explain the horror, but I wouldn’t bet on it.

All of this looks pretty innocent until you click to visit a particular page on the site. That’s when your monitor bursts out. The color scheme is completely overwhelming and drowns the little information left about the product. It is also extremely challenging to navigate through this website, with small links hidden at the bottom of the page.

2. Yale University School Of Art

You would expect a college art school to have a lovely website that reflected the kind of education you could get from there. Therefore, you would assume Yale’s site was more appealing to your visual senses. Instead of this, the website leaves you wondering if you are really in the right place.

It uses Ruby on Rails, and it is updated by the faculty and students quite often. But the tiled images in the background and the horrible font choices are just inexcusable. The navigation is pretty user-friendly, but the ghastly use of animated backgrounds is enough to put you off.

In order to build a website with a great UI/UX, every company should take into consideration a lot of factors. You must make the users feel at home and extend their reach from the first interaction with your website. Therefore, the essence of an excellent UI design is to help users complete a given task as simple and time-efficient as possible. Even if the approach for making this is different depending on many factors, an attractive interface and impressive images are elements with a great importance. But the core part of making a great UI design is to deliver the users an intuitive and smooth experience.

Many people that get started in the business keep looking for the best user interface websites, in order to see how different features have worked for other companies with different preferences and requirements.

For a good starting point for evaluating if a UI design is efficient, the research company Nielsen Norman Group defines usability through these 5 characteristics:

• Learnability:Can the user complete their tasks with little or without any difficulty?
• Efficiency:Does the interface allow the user to complete tasks in a timely manner?
• Memorability:After leaving a website, how likely will the user be able to remember how to use it the next time they visit?
• Errors:What steps does the interface take to lessen the chance of user error, and how do they let the users correct an error?
• Satisfaction: Does the user enjoy interacting with the design?

On top of those standards, a good UI should also reflect the personality of the brand in order to stand out from the competition and provide users with a delightful experience.

From this point of view, the following characteristics should be taken into consideration:

• Stunning and unique layout: Even for visitors who fail to stay, a great layout can make your website unforgettable. They might return because your products are laid out with creativity rather than being displayed in the old-fashioned grids.
• High-quality images: photos are the most eye-catching features that visitors see from the first glance on your website. Remarkable sites compete to cover their high-resolution image pages to expose their products from any possible angles.
• Thought-provoking slogans: Clever content providers and UI designers create and put thought-provoking slogans everywhere on their homepages from sliders, headers to landing pages and pop-up forms. Once one of the slogans hits the visitor’s eye, you have very big chances to get a new order or a new subscriber, and so on.
• Straightforward navigation: This idea is easily understandable. Nowadays, everyone is in a hurry. If your users can’t find soon what they want, for sure you will lose them very quickly.
• Rapid prototyping: if you take a closer look at most websites with a gorgeous UI design, you’ll find that rapid prototyping tools were adopted by most of them. This approach lays a solid basis for a fast iterative development in the next stages of the websites building.

Based on all these characteristics, we have looked around on the Internet and put together a list of five websites that have gotten great UI designs and deliver a delightful experience to their visitors:

1. Airbnb

The UI of Airbnb does three things very well: booking a place to stay, sharing different places, experiences and destinations and creating trust between two complete strangers. Airbnb has prioritized making it easy to start booking a stay right from the home page.

The conversational invitation for searching is a delightful way of portraying the voice of the brand, as well as making the process of finding a place to stay simple. The only fields you need to fill during the initial search are: choosing a destination where you would like to go, along with the duration of your staying and the number of guests. By leaving out the additional filters until the next step, the process is streamlined, friendly and approachable.

The listing pages are complete with a description of any additional fees that may be included. This is a very straightforward, easy process for just about any user. The ‘Request for Book’ button sits right under this and is the brightest buttons on the page, inviting users to click it in order to finalize their order.

On the other hand, Airbnb takes pride in bringing people together and gives the conversation importance over the transaction. Airbnb has cleverly thought out its copy and used engaging photos and videos to ensure that the interface conveys an emotional tone that helps create a sense of trust between strangers.

2. MyUKmailbox

MyUKmailbox.com is a company that provides BuyForMe and UK mail forwarding services to people everywhere in the world. The idea is simple: not every British online store delivers outside of the borders, and therefore MyUKmailbox.com provides the user a physical address where you can get your product and they take care of forwarding them where you want.

In fact, delivering simplicity, trust and efficiency are the main goals of the website. And MyUKmailbox does this! Even if as structure, the UI of MyUKmailbox.com can be seen on many other websites, the layout, design and content were created focusing on the customer. To clear things from the beginning, a video explainer is placed right on the home page and the user will find in a funny and nice way the benefits he will get after signing in.  On the “Price” page, in addition to the pricing plans, they placed a Rate Calculator where, after filling a regular form, the user gets a cost estimation. This way, he can decide what financial option fits him the best.

The modern layout, which stays on top with the latest web design trends, reflects the personality of the brand and stands apart from the competition.

3. Dropbox

Dropbox has one of the easiest to understand interfaces by far. By having a folder and file organizational structure, it is easy to recognize and use by anyone who ever used a computer before. In terms of learnability, the things are pretty simple. All the actions you have to make in order to have an account and upload the files for storage or for sharing or download the files are so easy and intuitive, that every user has already known how to do from the start. It’s natural for most users to try dragging and dropping files from their desktops to the page without them even know if it’s possible or not, just because it’s so familiar.

Dropbox’s friendly personality, created by lighthearted illustrations, helps the user feel comfortable while using the product. Also, by adopting the usage of hand-drawn illustrations in everything they do, they put the user at ease, appeal to the child in all of us, and make the product seem more accessible. This addition to the interface makes the product feel like an old friend, ready to help users complete their file sharing tasks.

This is especially helpful if you are a large tech company like Dropbox.

4. Boosted Boards

This is a website full of life and personality. Upon arrival, users are immediately greeted with some microinteractions. The UI lets here the product to take the spotlight, putting everything else in the background. When a visitor clicks the “Reserve for $100” button, a check out form pops up. Instead of being redirect to another page, this allows the user to go ahead quickly, fill the form and reserve his products without leaving the product page.

When scrolling down, the home page has a series of panels of big, bold and vibrant photos showing the product in use and information related to products, their advantages and the most important characteristics. This gives users a unique way of seeing what the product has to offer instead of just listing out features. By greying out the text, the eyes are drawn to the two bright and bold places that contrast with the image from background: “Shop Now” and “Learn More” call-to-action buttons.

The UI of Boosted Boards really helps to compliment the “cool” factor that the product has to offer.

5. Frank and Oak

Men’s clothing retailer, Frank and Oak, uses their UI to grab the attention of their visitors and their taste of stylish shopping. The company uses big, bold photography and clean, sans-serif typography to capture the personality of the brand and to convey the message to their target audience.

The online shopping experience they deliver to their users is fairly straightforward. The navigation is quite easy,

if you want to dive deeper for more products or to switch between different products categories.

When you decide to buy a product, the UX Frank and Oak website delivered to the user is quite friendly and delightful. After clicking on one item, even if there are some other elements that help user to buy the right product, the page is focused on two things: the product’s images, and the call to action button, those two being the only colored elements on the page. To avoid some unpleasant situations, the ‘Add to Cart’ button won’t work until a size is selected.

Filling out personal information during the online buying process could be an unpleasant and stressful experience, but Frank and Oak help users out by breaking the form into smaller chunks of input fields to reduce the stress.

Overall, the UI of Frank and Oak website can be seen on many other websites, but the layout and the style were definitely created having the ideal customer in mind.

“Advertising is dead.”

Simply typing that phrase into the Google search engine will reveal over 240,000 results.

However, is advertising indeed dead?

Not really. However, when you realize that the average banner ad today has a clickthrough rate of 0.1 percent — compared to the 44 percent clickthrough rate the first banner advertisement had — it’s easy to lose hope as a publisher hoping to rely on advertising revenue.

It is important to realize a few things whenever you look at statistics claiming that advertising is dead:

• Most of the rates are average — in other words, they combine statistics from both low-performers and high-performers to come up with an average. As the number of advertisements increase (resulting in more ads competing for user attention) and attention spans decrease (which happens every year now), the average rate will keep going down. It is worth noting, though, that some publishers are doing extraordinarily well; and this article will be revealing most of their secrets.
• Facebook really started taking its advertising game seriously when most of the “experts” began to declare advertising dead, yet it reported a massive $8.6 billion in advertising revenue in the fourth quarter of 2016 alone. This number was an improvement from the previous year.

Simply put, you can keep complaining and worrying about declining advertising revenue, or you can sit tight, find out what those who advertising is working for are doing and then make necessary design changes to seriously boost your ad revenue. If you choose the latter, as long as every other thing is in place – a good offer, a reliable website hosting that doesn’t keep your visitors waiting, and a well-optimized checkout process – here are some super effective design tweaks you should consider.

1. Redesign Your Ads

Banner blindness is indeed a thing, but people do not ignore banner just because — and contrary to what most people would like you to believe, the reason people ignore banners isn’t because there are a lot of ads.

Sometimes, poor banner design — created by the advertiser you’re featuring — could cost you a lot of ad revenue. Research on banner blindness found that as far back as 2006, during elections in Florida, a massive 13 percent of voters couldn’t cast their votes for their preferred candidate due to a poorly-designed ballot. The same principle holds true for ads.

Ask yourself, would you click on the banner featured on your site if you were a reader? If no, will your advertiser allow you to use your own custom designed banner? If yes, go ahead and create something else. You’d be amazed at how much of a boost in ad revenue this can result in.

2. Understand the Sensory Adaptation Phenomenon and How it Can Lead to Banner Blindness

Often, the so-called “banner blindness” that people talk about is not necessarily due to the fact that people are increasingly hating ads. Instead, it boils down to a psychological phenomenon called “sensory adaptation,” something every human being exhibit, that explains how we all tend to tune out certain signals after constant exposure.

For example, if you hear a loud ringing sound in your new home; initially, you will find it highly irritating, probably to the point of frustration. Over time, though, especially if it is not going away, you get very used to it and won’t even notice it unless someone new to the stimulus brings it to your notice. This same phenomenon explains why we don’t feel our clothes or shoes, or why we don’t feel our buttocks on a chair after sitting on it for a while — everything just seems as if they are a part of us, and we ignore them.

In the same way, sensory adaptation explains why we ignore ads; if we’ve been visiting a website regularly that has a green color scheme, we’re highly unlikely to pay much attention to a green ad on the site since it blends with the design. This changes, however, if it is a red ad. In other words, it isn’t necessarily about a certain ad color per se — it is that having an ad that conforms to the design of your site is very bad for conversions.

3. Focus on Mobile Ad Optimization

Right now, mobile traffic is a lot more than desktop traffic — in fact, there is a great probability that the majority of your website visitors are visiting from a mobile device.

While mobile web usage keeps increasing, very few people have their ads optimized for mobile devices; it’s a different thing to have your website optimized for mobile users. You also need to have your ads optimized.

If your ads are currently not optimized for mobile devices, then you might need to get back to the drawing board – when you realize that over half of all internet users use the internet primarily on their mobile device, the consequences of alienating more than half of your potential customers becomes clear.

Creating a mobile-optimized ad isn’t hard at all; simply switching to responsive ads, which automatically adjusts to any device, will do the trick. Google recently primarily put a focus on this kind of ad, even making it impossible to create or edit standard texts. You can easily use HTML5 to create your own responsive ads.