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.
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.
Designing for the web has always been a fast-developing field where a professional has to skillfully combine visual information design, aesthetics and composition priciples with the most relevant current ideas and trends to satisfy the expectations of his client.
A good web designer has a clear vision of the main aim of the website they are creating and the particular message they are trying to convey.
With the rise of Bootstrap, Foundation and similar frameworks, it’s clear that layouts are in danger of becoming more ‘samey’ than ever before. We’re all very familiar with that ‘Bootstrap Look’, right?
In this context, the need for a little design differentiation is more urgent than ever. I think that one of the most difficult tasks for a web designer is to find some creative angle to make work which can be considered as different and unique.
In other words, ideally we’d all love to build layout and site experiences that couldn’t easily replicated by the masses.
The rule to follow to accomplish this first task is to use imagination and avoid the most commonly used images, framing tricks, compositions or effects.
More and more professionals are trying to create some pretty cool graphics and animations with pure CSS, exploiting all its hidden potential, as in this case.
OK, perhaps this is too much.
Let’s try with this construction from Roman Cortes. Even though it may not be not accessible to everyone, it’s a fine reminder of what CSS3 can let us do.
But what if I am not a CSS expert and don’t have such advanced competences? Or if I perhaps don’t have the time (or inclination) to draw images with CSS, and instead prefer to leverage what I’ve learned about Photoshop or Illustrator?
Thankfully Photoshop can help us to achieve good results and create visual less conventional treatments.
In this tutorial you’ll see how to create a photo-filled text in few simple steps that you could use to adorn your next project.
Photoshop in Action
This tutorial will help us to understand how simple is to insert a photo inside a text using Adobe Photoshop CS6. We’re going to use a very few and very well-known commands of the program and I assure you that the result you’ll achieve is awesome.
We can use our personal photos or images we have found surfing the Web. There are no limits and all we have to do is follow our fantasy.
Let’s start our project choosing a photo we particularly love, we are fond on, or we would like to work on and think about the typeface we’re going to use for this.
I choose a beautiful view of the Tower Bridge, the wonderful combined bascule and suspension bridge that spans the River Thames. It is close to the Tower of London, from which it takes its name and has become an iconic symbol of this town.
Obviously, feel free to work on also on a subject of your choosing.
Let’s see how to go on.
Many graphic effects that were previously only possible using a graphics editor are now feasible thanks to a combination of simple CSS rules. This trend is often referred to as “CSS Art”, a term that indicates the use of CSS for the creation of graphic experiments where the CSS bosses the show — whether it be images or real animations.
It should be noted that although a user may be attracted by these effects, probably in some cases they are taken to extremes. We would always want to ensure that any technique we use isn’t affecting the performance or maintainability of our code.
Here’s a CodePen demo showing what we’ll be creating:
A Brief BEM Intro
For this project we’ll use the BEM methodology for naming our CSS classes.
Explaining BEM in great detail is outside the scope of this article, but here I’ll cover it briefly.
The acronym BEM stands for Block Element Modifier. This methodology suggests a structured way of naming classes, based on the properties and role of the element in question. To adhere to the BEM methodology, we have to stick with a naming convention that follows this pattern:
The Transform Effect in Adobe Illustrator lets you move, scale, flip, rotate and clone the appearance of one of more selected objects (all from a central dialog box).
Using it you can create patterns with paths and text blocks, and handle the whole pattern by making adjustments to the native project.
In this tutorial, I’ll explain you how to create a simple bevelled stroke effect and I’ll show you some curiosities regarding the Transform Effect.
You’ll be surprised by the power of this as simple as indispensable tool.
The Transform Effect: what is it?
As I mentioned in the introduction of the article, the Transform Effect is a dynamic effect whose main result is to create patterns of paths or text blocks that can be simply manipulated in a single command, allowing you to make adjustments to the original object.
In this practical example, I’ll guide you step by step in the creation of a simple beveled stroke effect. Secondly, we’ll have a look at how to use one of the most important and curious Illustrator’s path wigglers, — the Pucker & Bloat.
Well, right premises done, let’s get started.
Step 1: Setting up the text
Open a simple line drawing and do a background square which will be our starting point.
The first task of this exercise is using the offset strokes to create a depth effect.
Basically we’ll achieve this practical effect dynamically, which is a smarter and better way to work. It’s very common, indeed – especially among the very beginner users of Adobe Illustrator – that a good way to create a text with more than one stroke is the following: creating a text, assigning a stroke, doing a copy of it, doing a paste in front of the same image, change color and reduce the stroke and then repeat the same operations over and over again until reaching the desired effect.
Obviously this is not the right (and recommended) way of creating this effect, not only because it is slow, repetitive and imprecise but above all because that means that if you make a change to anyone of your texts, you’ll have to change all the others of course.
On the contrary, with this new approach, you have only one centered text, so that one change affects the whole set of offset strokes, and this appears a smarter way to work.
srcsetattribute allows us to specify a list of sources for an image, which will be delivered based on the pixel density or size of the user’s screen.
Introduction Some of the most regular and frequent readers of the network might remember a previous series of mine entitled Build a Responsive, Mobile-Friendly Website From Scratch. It started with the creation of mockups and wireframes through to the adaptation of the layout according to the devices used. I decided to take up this small […]
This entry is part 3 of 3 in the series Mobile Design PatternsIn the first article we’ve seen some useful tips and tricks for better organization of forms, galleries and search functions; in the second one we’ve seen, through some examples of more or less known applications available in the marketplace, which are the most […]
This entry is part 2 of 3 in the series Mobile Design PatternsIntroduction In the first article of this mini-series dedicated to Mobile Design Patterns, I gave a brief overview of what they are and the importance of their implementation in any well designed mobile application. Besides, I tried to show, through the study of […]