ux

Are we already entering that future that we saw in the series and films of science fiction? At the moment the cars do not fly, but by pressing an electronic button from home they send you a product at the moment. In an era where immediacy is the order of the day, it is logical that consumers are increasingly impatient. But why? Especially because of the enormous development that technology has experienced in the last decade. We want everything here and now. Recently it was said that we had a world of possibilities at a single click, now this world is even more accelerated and closer. We can have everything in the palm of our hand. Thanks to the evolution of web commerce (Amazon has done a lot of good or very bad, depending on how you look at it) and especially to mobile devices, specifically smartphones, in the future we could end up becoming something similar to the human characters of the Wall-E movie. Jokes aside, since we get up in the morning until we go to bed, we look at the screens of our mobile phones on average 150 times a day and approximately 130 minutes. It is here that what is known as micromomento arises, that in which a person accesses a digital medium to satisfy a need to learn, do, discover or buy something. It is curious that the term has been coined by Google, the king of Big Data, which we unconsciously go as if it were an oracle, and from which we expect an immediate and accurate answer: "how to do this, I want to see that, I need to see the other, etc. " We respond to a stimulus immediately, waiting for the best response, with which we will make a mostly improvised decision. To get an idea, after the consumer has been impacted by X television ads, a flash may appear, a need to search for information in a short space of time. This is what we know as "window of opportunity". Preventing the moment and the message as well as facilitating digital infrastructure, will allow brands to box in the ring of micro-moments. It is necessary to distinguish the micromomentos "O.G", those that we consider business opportunity, from those that are not, the "fake" that do not interest us. For it according to the great oracle Google, we can establish that a micromomento consists of four parts: 1.- The person: the target customer. Who he is and what we know about him. 2.- The intention: information, purchase, etc ... 3.- The context: not all micro-moments are the same. 4.- Immediacy: need to satisfy immediately. In an ultra-competitive era, in which we live a gigantic advertising saturation, where the consumer as a rule does not consider a predetermined brand in its search, but goes investigating like Sherlock; micromomentos are very important, since the consumer is really looking to satisfy YOUR need. The companies that elaborate a strategy understanding and satisfying these micro-moments and needs, will be the winners of the battle. But of course, it is not all gold that shines, nor can we know all the micro-moments, nor all the micro-moments are equal. In general, we want our personal moments to be respected. If we publish our breakfast on Instagram, and suddenly we see two elements like Mario Vaquerizo and Rebeca selling tires at a good price, we will consider it strange, intrusive and even annoying. Another totally different case is that we have to pass the review of our car but we do not have too much cash. We may take our cell phone out of our pocket and look for "tires at a good price". This is where the micro-moments race begins. The micromomentos happen through the way of the consumer So, all this will impact on the so-called "consumer path", the pilgrimage and phases in which this can establish a contact with the brands is in continuous change, and therefore can suppose different business opportunities for companies. First, in a certain micromanage, a brand can impact and say: Hey, I'm here! Second, in a micromomento in which the consumer needs information, initiating a process that may end up in purchase, a brand must be able to enter into the consideration of it, that is, that it be taken into account at the time of Make the decision: You know I'm here, and I offer you this! Third, in the purchase phase it is essential not to fail, immediacy and ease are the keys to success: Pim, pam, pum, tuna sandwich !. And finally, loyalty and loyalty are essential to achieve a possible repurchase: Go home, come back for Christmas. How can we benefit from micro-moments   We must carefully select what micro-moments we really want to win. The contents we offer are of great importance, as is the treatment of statistical or qualitative data that allows us to better segmentation. So to succeed you must: Analyze micro-moments: what is sought and in what places. It is essential to know the consumers and our target audience. Analyze the context and moments of contact: adapt and offer solutions as quickly and efficiently as possible. Adapt the UX: allow mobility between the contents and the purchase process. Usability and accessibility. In short, optimization, optimization and optimization. Position correctly. Carry out measurements on the different micro-moments and the impact of our responses.. After all this, I hope it has become clear that, through micromomentos, the preferences of the users are defined. Also, not all of these little moments are equal in importance, and in fact you have to avoid being intrusive. For this reason we can not abandon the drift as the Dutch wanderer to our target, we must be present offering the fastest, simplest and most effective solutions through the different phases of the sales process: presale, sale and after sale. There are many websites where you can learn more about how companies currently use micro-moments, and they contain a lot of interesting and useful information.

Microinteractions are small pieces of functionality that allow the user to carry out a concrete action. Today we are surrounded by them because they are found in all digital products. Good microinteraction design improves the user experience and can be responsible for users falling in love with our product. The history of microinteractions goes back to the earliest electronic devices and many of the GUI standards we use today were once primitive microinteractions. A microinteraction can be part of a product or it can be the complete product. For example, a weighing scale only serves for one thing: to calculate the weight. It has only one case of use: the user climbs on top and the scale shows the weight by means of the display. Well-designed interactions solve a specific problem with efficiency, humour and style; making the difference between a product we love and one we simply accept. For example Google offers suggestions on what you are looking instantly generating a unique and magical feeling in the user. Whatsapp displays small icons in each message to report the status of conversations. A clock indicates that the message has not arrived, a tick indicates that the message has arrived at the Whatsapp server, a double tick indicates that the message has arrived at the recipient's device, and a double tick changes to blue when the recipient has read the message. On the contrary, an ill-conceived microinteraction can cause great confusion and frustration in a user. For example, the small wheel to regulate the temperature of some refrigerators has always seemed super confusing. It has numbers from 1 to 9, but it is not entirely clear whether a higher number is colder or more temperature. The design is greatly improved by simply adding the word Colder. But it gets much better if we add some thermometer icons at each end of the scale so that anyone can understand the microinteraction regardless of the language they speak. I personally would have opted for snowflake icons that are more illustrative. One snowflake on one side of the wheel and three snowflakes on the opposite side. It could even be improved by adding a color gradient from warm to cold tones. Another mythical example of poorly designed microinteraction is the locking of a car with the remote control. Just after pressing the button on the remote control the lights of the car blink and a beep sounds, all fantastic if it were not because when you open the car occurs virtually the same. For this reason most people press the button several times and even more than one returns to the street to check if the car is closed. A microinteraction consists of 4 parts: The triggers that initiate it, the rules that determine its operation, the feedback generated by the rules that give status information and finally the loops and modes that determine the duration of a microinteraction, define whether it repeats or changes over time and allow us to change the operation of the same in particularly cumbersome scenarios. We are going to desgranar each one of these parts: 1.- Triggers that initiate it A trigger is what initiates the microinteraction. It is important that the user easily identifies the trigger, that there are no visual discrepancies, for example if the trigger looks like a switch it must act as such. The more common and used the microinteraction is more visible and easy to recognize the trigger should be. Ex: During the design of the website for Drupalcamp Spain 2017 we decided to place the call to action to buy tickets as a floating button that is always visible, at all times and throughout the site. There are two types of triggers: Manuals: It is the user who determines when the microinteraction starts. These triggers arise from the user's desire to do something: I want to turn off the alarm, I want to know how to go to Lisbon, I want to start a chat with my ex-girlfriend, and so on. The most obvious and common example of this type of triggers is the button. System: They are activated automatically and without human intervention if a certain condition is met. Most of the time the user can configure and limit these triggers. Typical examples of conditions are: Errors: When an error occurs in an app, the system communicates it through a microinteraction. E.g.: Endomondo generates a voice alert and displays a red icon when the GPS signal is lost. Location Changes:When we enter or leave a particular location. E.g.: Tripadvisor shows suggestions about restaurants in the cities you have just reached by means of push notifications to the mobile phones of those users who have previously authorized it. Incoming data: A new email, an available update, the time, a call, a message, etc. E.g.: Any smartphone receiving a call shows several options automatically such as picking up the call, hanging up or answering with a sms. Other microinteractions:in many cases one microinteraction precedes another and is part of a feature or macrointeraction. For example, in the registration of a user after entering email and password can be sent an email to confirm the account through a link. 2.- Rules that determine how it works The rules serve to create a model of microinteraction and should reflect both context constraints and business constraints. The key to defining the rules is to reduce complexity. Limit options to a minimum and set default values. The more options, the more rules. All the information we know a priori should be used to make the rules. Data of the user that we have saved, data of the platform, or of the environment. E.g.: Instagram uses data that it has from the people we follow and it follows us to generate the rules of the microinteraction that suggests us to follow new users. You have to define states for each element and see how it changes with time or user interaction. The rules also serve to prevent errors. Prevent the user from making a mistake. 3.- Feedback that informs the user of what is happening Feedback is possibly the most important part of a microinteraction because it provides the user with information that allows them to understand how the action takes place. It is important to define what information the user needs to know and when they need to know it. There are the following types of feedback: Visual feedback: Animations and messages. The most common of all types of feedback. Ex: Asana shows a floating confirmation message when the user marks a task as completed. Feedback in audio form: Earcorns and voice (speech). Earcorn are distinctive sounds used to announce certain events: system startup, new message, etc. Perhaps the most famous earcorn in history is the mythical Windows XP boot sound, or the error sound! The audio feedback can also be simply by voice, the synthesized voices are already very realistic and it is increasingly common for an app to inform us of anything in this way. Vibrotactile feedback: The device in question vibrates to send the user some kind of information. A lot has happened since 1976 when the Moto Cross arcade video game "Fonz" added the first vibrotactile feedback in history so that players could feel the vibration when crashing into other bikes in the game. Today this type of feedback is very common on consoles, gaming machines, smartphones and tablets. Ex: The Steam controller implements this type of feedback. Feedback allows us to give personality to our microinteraction and therefore to our application. Ex: Mailchimp gives a cool touch of humor to the critical moment of sending an email. Whenever possible, feedback should be given to the user to avoid moments of uncertainty. Good feedback gives us that fantastic sensation of having control of the app. 4.- Loops and modes When there are infrequent actions that can cloud the microinteraction we use what is known as "mode".   A mode is a specific space in which the functioning of the microinteraction changes. Already in the early days of modern computing, the mythical text editor for UNIX Vi systems based its handling on the change of mode: The command mode allowed you to move within a file and perform editing operations such as searching, deleting text, modifying text, etc. while the insert mode allowed you to write new text to the file. To change the mode you had to press the ESC key. (Although I spoke about it in the past, hundreds of thousands of programmers and system administrators still use Vi every day). Ex: Capture of the vi Editor for Mac OS. Whenever possible a mode should have its own screen to avoid confusion. Ex: Airbnb allows users who have their house for rent on the platform to switch between travel mode and host mode. Finally, loops determine the duration of a microiteraction and define whether it repeats itself or changes over time. Loop parameters must be carefully chosen to ensure the best user experience. Long-term loops are used to provide the microinteraction with memory and to simplify it over time.   As designers, it is important to use microinteractions correctly as they allow us to improve the user experience and provide our products with that little magic touch that engages users.

“User research ” is a set of observation techniques and the obtaining of feedback and the analysis of results that allow us to understand the behaviors, needs and motivations of the users of any product or service. There are dozens of methods and variants within the field of user research.  In this article, we will describe the 6 most used in the web industry.     Card Sorting This consists of asking a group of users to group content and functionality in open or closed categories. The result of the exercise are patterns of how users expect to find the content, as well as navigation tips, menus and categories. This method doesn't provide a final structure, but helps answer many questions we ask ourselves in the design phase. More info: http://www.usability.gov/how-to-and-tools/methods/card-sorting.html http://boxesandarrows.com/card-sorting-a-definitive-guide/ http://www.measuringu.com/blog/card-sorting.php     Eye Tracking This technique uses technology to analyze eye movements on the user interface. The result is a heat map of points of focus that offer clear information about which parts of the site capture more attention and which is the visual flow of the user through the site. More info: http://www.webdesignerdepot.com/2013/11/4-essential-ux-rules-taught-by-eye-tracking-research/ https://uxmag.com/articles/leveraging-eye-tracking-to-create-an-engaging-user-experience/ http://www.uxbooth.com/articles/a-brief-history-of-eye-tracking/     A/B Test This consists of providing different versions of a page for different users and comparing the results to determine what works best. It is a great way to optimize funnels and landing pages. More info: http://www.wired.com/2012/04/ff_abtesting/ https://www.smashingmagazine.com/2010/06/the-ultimate-guide-to-a-b-testing/ http://www.uxbooth.com/articles/how-to-increase-site-performance-through-ab-split-testing/     Focus Group This brings together users to discuss certain topics or issues related to the content or the website. The result yields useful information on the views and feelings of users in relation to the subject matter, providing insight into the audience and refining the target. More info: http://www.webcredible.com/blog/focus-groups-how-run-them/ http://www.slideshare.net/Centralis/adapting-focus-groups-for-user-experience-ux-research/ https://blog.mozilla.org/ux/2012/08/when-to-use-a-focus-group-and-when-not-to/     Usability testing This is an individual test where a page or site with representative users from the target market are evaluated. Direct user feedback is collected using the tool or the prototype which serves to implement improvements based on the results. More info: http://www.usability.gov/how-to-and-tools/methods/usability-testing.html http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/ http://uxmyths.com/post/831431504/myth-22-usability-testing-is-expensive     Quantitative Surveys Surveys of users are conducted for information about their satisfaction with the product, the usefulness of a particular page, their opinion on a particular topic, etc.  The benefits of this method are many because it allows better understanding of end users and the design of better products, thus reducing the risk of making mistakes or offering mediocre solutions. More info: http://uxmastery.com/better-user-research-through-surveys/ http://www.uxmatters.com/mt/archives/2012/09/strengths-and-weaknesses-of-quantitative-and-qualitative-research.php http://www.marketingdonut.co.uk/marketing/market-research/what-is-quantitative-research-   Main photo: Hal Gatewood

With the advent of HTML5 few years ago, the possibility to add placeholder has appeared The placeholder text is displayed in a text field on a form before the user complete, it’s very useful since it clarify what information must be entered in this field. For example, the HTML code: <form> <label for="search">Subscribe to the newsletter</label> <input id="news" type="text" placeholder="Enter your email" name="seach"> <button id="subscribebutton" type="submit">Send</button> </form> It show something like this Adding placeholders to the forms is a good practice that improves usability and of course the user experience. The W3C recommends using the placeholder always with the Label that, since they are supposedly complementary, but in Wild Wild Web, we often use only one of the two, since using both will be redundant. Support for placeholder will only be visible in most modern web browsers but usually a jquery fallback is implemented for the same functionality in older browsers. There are several ways to add a placeholder to a field on a form in Drupal 7. Below we highlight 4 which we consider the most useful. Form module Placeholder https://www.drupal.org/project/form_placeholder This module allows us to add placeholders to any form of the site from the Drupal administration. Hints Webform module https://www.drupal.org/project/webform_hints This module allows automatic placeholders to incorporate any textfield, testarea, select list and email field forms created with the webform module (https://www.drupal.org/project/webform) This module also comes with support for older browsers that do not support the placeholder attribute will and implement the fallback using jQuery. Field placeholder module https://www.drupal.org/project/field_placeholder It allows you to add the placeholder attribute to any field of a drupal entity, as fields of a content type, terms of taxonomy, user, etc. When activated, it displays a new option to enter the placeholder when you edit or create a field. Function in the template.php Finally the more advanced technical approach that involves all code but it’s the most powerful of all. It is about adding the following function to template.php file from our theme. function YOURTHEMENAME_form_alter( &$form, &$form_state, $form_id ) { if (in_array( $form_id, array( 'user_login', 'user_login_block'))) { $form['name']['#attributes']['placeholder'] = t( 'Username' ); $form['pass']['#attributes']['placeholder'] = t( 'Password' ); } } This case introduces a placeholder for the login form. Remember to change the name of the function YOURTHEMENAME by the name of your theme, and change the id of the form and name of the field you want to make the change. Learn how to get the id of a form.

The Stanford Persuasive Technology Lab has compiled 10 rules to create a credible website. They are based on 3 years of research involving more than 4,500 people. ​ Show that you are real Demonstrate that you are a real business. Put your physical address in your website, a map, photos of your offices or building. If your business is affiliated with organizations like the chamber of commerce or other institutions, show this.   Make fact-checking easy Try to make it easy for people to verify that what you’re saying is true. Use citations and links to your sources… Though people may not click them, the links will increase the strength of your content.   Highlight your experience Emphasize what’s best: if you have experienced people in your business, let visitors know. If you have worked with important clients, tell your visitors. It all helps to build your credibility.   Show real people Let users know that there are real people behind your website and your business by using pictures and text. This is especially recommended if you work with customer service.   Provide your contact info Easy access to contact info means more contact from clients. Users have more confidence in websites that do this. Putting a visible telephone number on each and every page is a very good practice.   Professional Design Like Don Norman said, “attractive things work better.” The vast majority of people instantly evaluate your page based on its design. The website must be designed for the target audience, as well as the purpose of the company. Responsive design (adapted to all devices and frameworks) betters the usability and therefore the credibility of your business.   Update content often Websites that update frequently are seen as more credible. If a visitor is browsing your page and notices that your blog hasn’t been updated in a year, they will probably think the site has been abandoned. Updating the portfolio, blog, pictures and headlines makes your page a more credible place.   Avoid or minimize ads If it’s possible, try to avoid ads, or at least indicate clearly when content is sponsored. Each time you pester a visitor with ads in pop-ups or within your content, you’re losing credibility.   Avoid errors Language errors or dead links significantly damage your page’s credibility. Revise content periodically and be sure to pay attention to the little things.   Obviously these rules also rely on refined and professional offline behavior. Meetings with clients, response times and incident resolution are essential in order to avoid undermining the online work.