I have a Bachelor's degree in European languages, cultures, and literature from the University of Naples. I'm passionate about graphics and web design, and for several years I've been working on projects and designs for many companies. I'm a writer for the Audero User Group; my specialties are HTML, CSS, Web Design, and Adobe Photoshop.
I’ve been working as a freelance web designer for several years now. This is a job full of joy, some sorrow, satisfaction and hard work. During these years I’ve had the opportunity to test my capabilities and meet many different people. Learning from each project has ensured that my career continues to flourish and has […]
In this short series of articles about Mobile Design patterns I introduced some of the most common patterns used to fix problems during development. During articles you’ve learned what a design pattern is, its basic components and the best solutions to solve problems with them. Problems such as organization of forms, galleries, search functions and interaction suggestions. You should also have learned why and when to avoid mobile design anti-patterns.
For the conclusion of this series, I’ll outline 5 interface design patterns you should recognize from popular mobile apps and can use in your own projects. They’ll help you in making your design useful and intuitive for users. In particular, I’ll focus on patterns that will help you managing:
- Social sharing
- Content updates
- User interaction (swipe, tap, etc.)
In my last article, we talked about some unexpected events that can annoy users while they’re using your site or mobile application.
Among the issues that could make your users feel frustrated or anxious when performing their tasks, the perceived speed of your website/mobile app is arguably the single most important.
Speed is a critical part of user experience and has been definitely proven to feed back directly into your revenues and users’ engagement. A study in May this year found that optimizing page load times from 8 seconds down to 5 seconds translated into a 18% jump in revenue. That’s free money.
There are a lot of well-documented technical approaches out there to reduce page load times by speeding server responses and optimizing the payload being sent. That is beyond the scope of this article
In this article I want to talk about techniques that DON’T physically increase the ability of your app to respond (since device’s connection speed is out of your control) but instead can help to make your app feel faster.
How is this possible? Well, the answer is simple: pretending that your app always loads fast even under a slow connection.
This certainly doesn’t mean you shouldn’t try to improve your website’s actual performances. But although this is a critical factor, what matters most is that your users are aware of that improvement.
So here are 3 design tricks that will make your app feel much quicker, without altering your infrastructure
In one of my recent articles, The Evolution of the Hamburger icon we talked about the history of this commonly-used pattern, and about who’s using it and why.
In this article, I thought we’d focus on three other very common 2014 UX patterns. Each one is so prevalent and humdrum that we may not even think twice when we employ them.
But perhaps we should.
If you’ve followed my articles, you’ll know that the effectiveness of a UX pattern depends on a great number of factors, and there is no scientific formula that will tell you that choice ‘x’ is totally right or wrong. You are the only one who that can really judge if it fits your needs of audience, and you’ll make the final call.
Nevertheless, if they aren’t questioned, even widely-discredited UX patterns often persist long after they should have become no more than historical footnotes.
The UX patterns that we’ll examine are:
Large Background Images
Text as Images
In addition, I’ll give you some alternatives to these three (I believe) outdated design patterns in order to help you move on.
1. Large Background Images
In recent years, panoramic background images have become such a hot web design trend that they approach the realm of cliche. You don’t have to wander far to find dozens of creative examples which illustrate the technique beautifully. The Web is still full of captivating landing pages, big portfolios, and in some cases even traditional corporate websites use specialized full-screen background photos to dazzle users.
Although some images make a very impressive visual impact on a website, you’ll often need to consider alternatives to this practice, particularly for sites with an important mobile audience.
Even if the old saying “A picture is worth a thousand words” is true, and information conveyed through imagery is remembered much more readily than the written data, developers should pay attention to how and when apply this principle to web design.
In my last article, Obvious always wins I showed how important it is that users are able to understand your website or application and can use it without any effort. The first thing to be sure of is that your interface is simple and intuitive, utilizing familiar icons, actions, and features.
One of the greatest challenges for developers is to find and implement a functional navigation menu that works well on mobile devices.
You cannot create a good user experience without a functional navigation bar. New users will look for and scan your navigation so it is crucial to give a good impression and avoid disappointing their expectations.
Among the professionals who have written on this topic, the first that deserves a mention is Brad Frost. You can discover his approaches and examples of patterns for mobile navigational menus on Brad’s website.
In this article I’ll focus on 5 of them. Think carefully about the best to use in your next projects based on your users’ needs.
Top Nav or “Do Nothing” Approach
One of the most frequently used solutions for navigation is to keep it at the top. Because of its ease of implementation, it’s the one adopted by the majority of websites.
The Internet contains an endless supply of information and it’s possibilities are endless. You can find answers to questions, learn about something you enjoy, communicate, make purchases and so much more.
How many times whilst surfing the Web or using a mobile application have you felt annoyed by an event or occurrence that you didn’t expect? How many times have you felt frustrated or nervous when you faced too many obstacles in performing your tasks? This has happened to me on several occasions.
In this article I want to share with you a list of three common mistakes that websites and apps make and how these affect users’ satisfaction (mine, at least).
Let me play please!
The first example we’re going to discuss is from the field of Games. Online games are a popular activity enjoyed by people of all ages. Some online games are played by visiting a website, but nowadays, thanks to the advancement of mobile devices, people can also enjoy games on their mobile devices.
Let’s suppose that you would like to play your favorite football game on your awesome smartphone. The first time you open it, the game asks if you want to login using a social network, for example Facebook, or start playing as shown below (sorry, the screenshot is in Italian).
Once the game loads, you (the user) read this message:
In the first part of this short series about Neuro Web Design, we saw how our decision-making behavior is governed by unconscious processing and how our experience is driven by external factors such as social validation, similarity and other interesting human factors.
Now it’s time to see these principles in action.
In this second part, I’ll give you some suggestions on how to make websites persuasive and more inclined to make people ‘click’, or take action in general. Hopefully you’ll find them useful, especially if you have an e-commerce and want to improve your selling.
I’ve broken them into 6 principles you should take into account while planning the marketing strategy to adopt in your website (if you are a seller), or to keep in mind (if you are a buyer).
1) Similarity: a picture is worth a thousand words
The images make up the majority of our thoughts, regardless of the sensory modality in which they are originated, and regardless of whether we think of an object (i.e. a boat) or to the processes related to objects (i.e. a boat trip), words, or symbols.
In short, information conveyed through imagery is remembered much more readily than the written data, and we give it more attention.
Summary: Use a small amount of well-chosen words to describe your product or service, and combine them with attractive and incisive images.
Fear of loss
We are programmed to notice and pay attention to situations that can trigger in us the fear of loss.
In fact, the fear of losing motivates us more than the opportunity to win or gain. Faced with situations of potential loss, our bodies and our unconscious mind are activated faster than the conscious level.
Once explained it, imagine the effect that something like Only two in stock may have on our brain. This is a topic that people who intend to sell their products using an e-commerce service should deepen. In the image below, you can see an example of this practice applied to a website.
Eyeballs and conversions. I suspect most would agree that these are the two main ways we measure the success of any website.
Sure, websites convey specific messages and may be built to achieve a raft of various smaller goals. Most websites are built to appeal users and bring them to a business — especially e-commerce — and may contain an underlying strategy designed to attract a larger pool of potential customers, and convert the highest percentage possible of them to a making a purchase.
In recent years a new phenomenon in human factors, called Neuro Web Design, has emerged. It’s a methodology which borrows from various fields, and it deals with the UNION of:
- research on motivation
Its aim is to provide a useful method for the creation of websites that are more engaging and effective overall.
So, what is this concept of Neuro Web Design, and in what way could it be applied in the real world?
In this article composed of two parts, we’ll discuss some general ideas and principles first, and then I’ll go on to present some tips and techniques for applying it to your own designs.
Neuro Web Design: What is it?
Recent research in neuroscience has provided insights into how people think, how they decide, and what motivates people to take action. Whether you want to create a website, software, game, or application, you should pay attention to these latest studies and learn how to apply the research in neuroscience to your design projects.
First of all, let’s start by dispelling a few myths.
We love (and are used to) thinking that we made our decisions after having spent some time doing a careful meditation. In fact, most of our choices arise from an unconscious level.[caption id="attachment_87622" align="alignright" width="240"] Photo: ota_photos[/caption]
Secondly, we often believe ourselves to be self-assured masters in these choices, but the truth is that, in general, people observe other people’s attitudes and then decide what to do (often changing their mind in the process). This is true especially in those circumstances of doubt where they aren’t sure about how (and above all if) to act.
Sometimes we decide to act only when we know the experience of other people with a certain product or service.
Raise your hand if you have never read a review about the quality of an item or service before concluding the purchase. I suspect very few hands are up right now.
In other cases, we convince ourselves of a purchase when we know that others are buying the same product, and maybe they are buying it right now.
Of course, this isn’t true only for purchases. Just think at how you decide what video to watch next, on websites like YouTube or Netflix after your previous video has ended.[caption id="attachment_87620" align="alignright" width="374"] Netflix: Because you watched…[/caption]
Again, when doing your shopping online, I suspect there have been several times that you clicked on invitations such as “You might also be interested in …”, or “People who bought this item also bought…”.
Am I wrong?
Another thing that probably it’s not so obvious to get is that, even though we may say that we prefer the freedom of having a lot of alternatives to choose from, the reality is that many of us aren’t able to make a decision when there are too many alternatives to evaluate. We are paralysed by indecision.
In my last article Obvious always wins, I discussed in depth how arbitrary and relative the concept of “obvious” is and then I left you with an insight. That what big companies adopt for their services is good for (all) users isn’t always true.
We’ve seen that this is particularly true for a recent commonly used pattern for the navigation menu, the “hamburger icon”. This simple three-bar icon has become a convention to indicate a menu (in some cases lists) that many companies such as Disney, Starbucks, Facebook, and Google have employed in the mobile version of their websites or in their mobile applications.
There have been many discussions in UX circles that have raised the the unintuitive nature of the hamburger icon. Some alternatives have already been adopted and this icon will probably be replaced by a new and more intuitive one soon.
In this article we’ll discuss the evolution of this pattern, how the icon has been implemented, which companies have decided to use it in their projects, and why now it seems everything has changing.
The very beginning of a widespread trend
At the beginning of this trend, almost three years ago, there were some developers who studied this pattern and found that the hamburger icon was necessary in order to maintain a high conversion rate and user experience.
In their opinion, the icon didn’t distract users from achieving their task (in this case, filling a form), while giving them the freedom to navigate to other pages. In fact, they noticed that links that were too prominent caught the users attention, while when hidden behind the use of the hamburger icon, users only used the links when they needed.
Afterwards, in her interesting article Don’t Make These Mobile Menu Mistakes, Linda Bustos explored the potential of this new pattern. She didn’t refute the prior use of the hamburger icon as a menu but she insisted on a truth that should be always considered, what matters is how you apply it to your design.
If you’re like me, you are curious about how changing the interface of a mobile application or website may influence the engagement and the earnings of your product.
The idea for this article came to me after reading a tweet posted on the 11th of April by Luke Wroblewski.
His statement Obvious always wins and the image associated with it made me think about some real cases where a simple change may give unexpected results.
Let’s find out what obvious means in the field of mobile design, and look at some examples of obvious choices that affect users’ engagement in a good way. Then, we’ll also see how not so intuitive decisions can have the opposite effect.
Obvious always wins
What is obvious? And why do things seem obvious only after we see the solution?
When someone tells us the solution to a problem or a puzzle, we exclaim “Oh, it was so obvious!”.
Things appear obvious when easily discovered, seen, or understood. No surprises there. What could be more easily discovered, seen, or understood than facts and methods we have already learned? We consider obvious most of what we know, and we consider challenging what we don’t know. For example, many people get frustrated when teaching and if their students don’t understand immediately.
The problem is not with them. The truth is that, if it was really so obvious, they wouldn’t be having any trouble.
Obvious is not what you think
In mobile Design there are no intuitive interfaces. There are only interfaces that are familiar, and once familiar they become intuitive. This brings us to the consideration that the concept of obvious is arbitrary and relative.
When you surf the Web or use mobile apps, they usually have, more or less, the same look. Sure they differ in layout, style and colors, but you expect to see common patterns. For example to find the main menu at the top of a screen, a search box in the top-right corner, a footer at the bottom, and so on. The layout is typically the result of conventions and trends of a given period. For example, I’m sure that you are able to distinguish something built recently and something older.