and mobile version:

You can see that only one picture appears on the top of the screen on mobile version and the rest of topics are listed above, while on BBC desktop each topic is followed by a picture.

Not using design pattern libraries

It might not be a reprehensible error, but you’re missing out a lot. It’s always worth to look up libraries with user interace elements. You can draw inspiration from them and become familiar with current trends. We recommend those:

Inconsistency in button order

There are many debates among web designers on the issue of button order.

One thing is for sure: GUI for Windows and Apple are different: Windows places button OK on the left side, Apple — on the right. So if you are designing an interface — always follow GUI and be consistent throughout your entire digital product.

Here’s come cool reads for you on different points of views on button order issue:

Order depends on what is the primary action and on the task itself. If the user is about to do something irreversible, the primary action is “cancel” or “return” and should be placed on the left.

Placing OK on the right makes our brain and eyes work less.

Distance between buttons matter

Overly complex forms

Forms should be short and understandable. Remember that the more fields the user will have to fill in, the less likely he will. Deciding on a long and pointless form put at stake the success of the service. As a result, users abandon baskets, registration, or they don’t sign up for newsletters.

Remember to call buttons and labels in a simple and understandable way. You can use different types of boxes depending on what information you want to get — checkboxes, radio buttons or simple text fields.

And one more thing — there is probably nothing more annoying than a poorly marked errors. An absolute must is marking errors in a clear way and explaining the nature of the error in the field. A good solution is giving an example of correct format of valued to be placed (eg. Date of birth)

Here’s a crazy example of way too long form. Would you register? ;)

Hamburger

Morten Rand-Hendriksen in his article on hamburger menu writes extensively about the problem with a hamburger. Hendriksen explains that everyone involved in designing an app or a service knows from their own experience that a hamburger is the icon menu and assume that it is intuitive. Hamburger is not intuitive — users must learn its function. The same character in mathematics “identity”, or “equal to”.

Also, menus with tabs on the landing page increases the engagement of users, and thus — the revenue of the company.

Some fun now from Twitter user @lukew:

So, what solutions can be used instead a Hamburger? Hendriksen suggests:

Use The word “Menu” instead

Consider using a down arrow or another active icon

Reconsider the menu position and function

Use an off-canvas menu and use a tab with an arrow to indicate active interaction

Ignoring Mobile-first — the size does matter

Let me start with some quotes:

“Mobile’s share on the web traffic leapt 39% since the same time last year, with one-third of all web pages now served to mobile phones.”

What’s more:

“The United Kingdom leads in terms of active e-commerce use, with data suggesting that almost two-thirds of the country’s population bought something online in the past month.”

Thing that many designers forget is the fact that users use services or apps differently on a laptop and a smartphone. This is not just another screen size. In addition to implementing the principles of responsiveness, you should consider what features and information is necessary to be seen on screen of each device. We could come up with a conclusion that what you see on the screen of your smartphone could serve as a backbone (the most important functions and informations) that you can’t omit while designing desktop version.

The post has come to an end. We hope you learned something new that will allow you to become better designers. Do you see any other glaring mistakes in UX or UI? Let us know in the comments :)