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.
Digital mobility and connectivity is becoming increasingly important every day. Users have their mobile devices nearby, check notifications frequently, and in some occasions use multiple devices at once. They are not limited to use one screen at a time anymore. They do things with the device they believe is the best for a particular task or simply the one closest. Users connect to the Internet through multiple devices, starting an operation on their smartphone and completing it on their tablet or laptop. The continuous changing of devices has become common practice for a large number of people.
You can understand how crucial it is to start thinking about designing interfaces for cross-device usage. If you are curious to know more about this topic, this article is a great start.
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.
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 […]
This entry is part 1 of 3 in the series Mobile Design PatternsIntroduction We’re living in an era in which the constant and rapid changes of habits and the increasing presence of technology in our lives is presenting very big challenges to developers and designers. The growing importance given to the design and development of […]
Annarita Tranfici wraps up her series with the sixth part, in which she refines the code to ensure the project site renders properly on mobile screens.
In this fifth part of Annarita Tranfici’s series, we see which rules to apply to render our website responsive and to assure a good performance on tablets.