Saturday, 29 April 2017

How to make Magento2 website faster

Introduction
Magento websites usually have large visitors. Its mean website should be fast enough to deal with large number of visitors.
To make magento website fast we can use varnish cache that is open source web application accelerator.
Varnish caches files in memory, this enables Varnish to reduce the response time and network bandwidth consumption on future, equivalent requests.
Here is step by step guide to make your magento 2 website more faster than ever by using varnish cache.
1. Install Varnish (Ubuntu)
  • open terminal run "sudo curl http://repo.varnish-cache.org/debian/GPG-key.txt | sudo apt-key add -"
  • Run sudo echo "deb http://repo.varnish-cache.org/ubuntu/ precise varnish-3.0" | sudo tee -a /etc/apt/sources.list
  • sudo apt-get update
  • sudo apt-get install varnish
  • check that varnish is installed by typing “varnishd -V”

2. Configure apache

Note: apache runs on port 80 so varnish server cannot run on port 80 so we need to change the apache port from 80 to 8080
  • change apache port 80 to 8080
  • go to /etc/apache2/ports.conf and change Listen 80 to Listen 8080
  • save configurations
  • virtual host settings “sudo nano /etc/apache2/sites-available/000-default.conf”
  • change <VirtualHost *:80> to <VirtualHost *:8080>
  • if you have configured any virtual host change the port of that host from 80 to 8080.
  • restart apache “sudo service apache2 restart”
  • check the localhost with the port 8080 “curl -I http://localhost:8080

3. configuration of varnish to use with apache

  • Setting up varnish port to 80 “sudo nano /etc/default/varnish”
  • change DAEMON_OPTS="-a :6081 \ to DAEMON_OPTS="-a :80 \
  • save configurations
  • run “sudo service varnish restart”
  • check our varnish is working by “curl -I http://localhost
  • check varnish is listening top port 80 netstat -tulpn | grep varnishd

4. Configure Magento 2 to use Varnish

  • open file “sudo nano /etc/varnish/default.vcl
  • change the .host (127.0.0.1) to your own IP(xxx.x.x.x) and port should be 8080

5. replace configuration file

  • First enable the Full Page Cache to use Varnish (Go to Admin > Stores > Configuration > Advanced > System > Full Page Cache), you will see as:
  • Save the settings and hit the Export VCL button (Varnish 3 or 4 as per your Varnish Version).
  • And use this default.vcl to replace the file in /etc/varnish/default.vcl
  • to see the varnish headers
  • magento application must be in developer mode
  • you have enabled the full page cache from system->cache management

6. Add cache hosts to app/etc/env.php

  • Go to app/etc/env.php
  • add code at the end of file


7. add the varnish server in your magento config to http-cache-hosts

Run “php bin/magento setup:config:set –http-cache-hosts=127.0.0.1:6081”
change the (127.0.0.1) to your own IP(xxx.x.x.x)
service varnish restart
service apache2 restart

8. varify varnish is working with magento 2

  • Verify contents in var/page_cache folder is not regenerated (server configured to serve the content from Varnish, once cleared, cache folder (var/page_cache) should always be empty.

Wednesday, 15 March 2017

Second-hand UX

Something that I feel is overlooked by a lot of product designers is the second-hand experience of their product. That is to say, above and beyond the target user, who is affected by the product—and most importantly—what is their experience?
If the UX team has satisfied all the needs and desires of the target user, minimized their pain-points, and maximized their ability to enjoy the most common process flows, that is truly awesome—but how does the experience they design affect that person’s social circle? Do product designers currently see that as a question worth spending additional time and resources to answer?
The classical method of product design is for design considerations to be dictated by our insights regarding the target user, as well as the goals (often monetary goals) of internal stakeholders. But as tech continually permeates our lives in an increasingly personal fashion, I believe the need for second-hand experience analysis will begin to shine through.
Photograph showing a woman texting (target user's experience) being watched by a male companion (second-hand user experience).

The power of shared experiences

The experience of the target user is not isolated from the experience of the indirect user. Whether it happens immediately or eventually, the two experiences affect and influence each other.
The target user, as entranced as they may be by their own experience, will continually receive feedback from others who were witness to this experience and will begin to judge the primary experience not only from their own frame of view but also from feedback received from constituents of their social ecosystem. The final verdict on an experience is often a group effort.
Venn diagram with three circles: left, primary experience, overlaps center (final verdict), which overlaps right (feedback from second-hand users)

The need for second-hand UX

The need for greater focus on second-hand user experience is real. Many existing products already demonstrate a gap in the experience that affects indirect users.
One easy example of this might be the prevalence of texting and how it affects secondary users. What started as a flicker of excitement with the invention of smartphones (even if they were flip phones, sliders, or some other sort of archaic paperweight) has grown into something that has become a contentious social (and sometimes physical) habit.
Whether texting is positive or negative as a whole is a subjective judgement which requires a certain scope to even make a judgement feasible. For example, in a very surface-level, everyday efficiency scope, is texting positive? Probably so, at least for the direct user. But within a different scope, one that perhaps takes a look at the sociological/psychological effects of texting, would you come to the same judgement? Maybe, maybe not, but you’d certainly give it more thought.
Common responses to these deeper-level scopes consider issues such as how mobile phone usage creates a social distance between the primary user and secondary users. The dynamic, generally speaking, encourages less frequent and more shallow interaction between the person using the mobile device and the other people that may be around them. How often do you see people over-indulge in their electronic devices at the expense of paying attention to those around them?
Think back on personal situations where you might have been the secondary user. How did your feelings change towards the primary user? How about toward the product itself?
The smartphone—something that was intended to be a design solution for pain-points of communication efficiency, frequency, and accessibility—brings a complicated dynamic. It has raised questions with philosophical, psychological, and sociological underpinnings that should lead us to question the pros and cons of what I call short-term experience solutions, ones that satisfy the immediate user but don’t necessarily take into consideration the long-term effect these decisions have on the social ecosystem that encompasses the user.
That being said, I’m not here to rag on texting. On the contrary, I am totally addicted to texting and general mobile phone usage, despite the fact that its negative impacts are so apparent to me that I have recently started doing several exercises to try to correct my text neck.
Rather, I’d like to draw attention to the social dynamic that is created by tangible tech, be it a wearable, a mobile phone, a laptop, earbuds, or even a virtual reality headset. Each device, as well as the context it is used in, bears with it a social dynamic. These social dynamics are a much more important part of the experience of a product than the field of UX / product design would demonstrate historically.
I do think that designing for the primary user should be of utmost importance—but I also think product designers need to start valuing how the primary user’s interaction with the product affects their relationship with their social environment.
There is precedent to support an increased focus on second-hand user experience. We’ve read about the social implications of addictive smart-phone usage, the unintended negative interpretations of checking your Apple Watch, and of course the privacy concerns of wearables like Google Glass.
If you somehow think we’ve seen the peak of socially-permeating tech, think again. Technology is only going to continue to penetrate our lives as time passes, further warranting the need for considering second-hand UX.

The big question

This raises the question: When will second-hand UX become an integrated concern within the practice of UX?
Undoubtedly, product designers are concerned to some extent about how their products may affect second-hand users, but how often do we actually involve indirect users in the discovery and validation portions of our design process? To what extent are second-hand users a driving force behind how we generate requirements? (How many times will I say “second-hand”?)
Making this concept of valuing the experience of indirect users a top of mind concern could drastically alter the way UX practitioners do their work.
Just imagine the potential shift in focus for user research. Direct observations of people near someone using their virtual reality / augmented reality headset. Surveys, interviews, and focus groups inquiring about the experience that people had when their friends were using their new smart-watch. The possibilities are vast.
One way to utilize second-hand user research would be to engage existing UX assets, but with a new twist. Instead of traditional personas, we could have second-hand personas that examine the demographics, behaviors, likes and dislikes, proficiencies and deficiencies, and other attributes of the indirect user of a given product / experience. Who is our typical second-hand user? How might we describe them?
Similarly, UX practitioners could start developing second-hand journey maps that divulge the way an indirect user is thinking, feeling, and acting for each action that the primary user takes in their experience with the product. How did you feel as your friend watched a video on their virtual reality headset? What action did you take when your coworker started working next to you with their earbuds in? What were you thinking when your roommate used a voice command on Amazon Echo to lower the song you were listening to?
This shift in focus could open up a whole new realm of UX research and design that could lead to interesting new experiences.
Collaborative mode for VR headsets where multiple people share the same vision? More functionality built into health informatics for sharing data from person-to-person? Socially-contextual settings to limit notifications and keep users engaged in the real people that surround them? Maybe, maybe not. One thing is for certain: The ability to definitively and accurately decide how and when to implement design patterns like these will be dependent on empathizing with indirect users.

Next steps

So why is this important? Why should we care what indirect/second-hand users think or feel?
From a monetary perspective, the answer is simple: Purchase and usage considerations do not end at how the product/service will affect the buyer. Considerations extend into how it will affect the things they care about (which transitively affect them)—most often being their relationship with other people.
From a philosophical perspective, a lack of care about the psychological and sociological toll our products may take on users could drastically alter the concept of a traditional society altogether. It’s better to recognize and reverse potentially harmful design patterns now before habits and cultural beliefs lose sight of social concerns that were once fundamental. Despite popular belief, money and societal good do not have to be mutually exclusive. Let’s start taking second-hand experience into consideration and make it a core part of the way we practice UX.

Tuesday, 17 January 2017

The front-end is...

It’s been my experience that most front-end developers know the feeling of being mislabeled for their skills: “The front-end? Oh, that’s just wireframes and fonts and…”
😒
Yeeeeeah nope! The front-end is also:

Design

Yes, front-end developers design. Maybe not 100% of them, but c’mon, it’s an integral part of development. They design everything from interfaces to APIs, so let’s give these people props!

Code…lots and lots of it

You think that stuff in the browser runs on fairy dust?

Testing

We test the code, we test the UI, we test the experience. Then we refine it all and retest.

Problem-solving

User abandon rate high? Load times not what they should be? Need the whole thing to interact with assistive technology? Keep it coming.

Hard

See everything I mentioned above, then see everything that I mention below.

Cutting-edge

How many new web-based features were introduced last week alone? Which ones are being implemented in nightly builds? Keeping up with all of it is a challenge in itself.

Fun

Sure, the front-end can be chaotic — and at times a headache — but it’s also a lot of fun to work on something that will get in front of a lot of users.

Implementation

We package it, we deploy it. To users, to the world.

Data

We collect data, we work with data, we produce data.

Multi-platform

This stuff has to work in different browsers on different devices, running on different operating systems across different networks.

UI, UX, UEverything

Users are our lifeblood. We do this to make things better for them.

Debugging

It works great over here, but not over here. This device is okay, but not this one. And performance throttling isn’t what it should be. Could ‘ya fix all that, and also get your TPS reports in?

Production

We deliver a product. A tangible, usable product to customers.

Tough to describe!

Hey, you give it a try and see how far you get. The front-end is complicated.

Rewarding

We’re changing the way people interact with the web, the way they manage their lives. That’s kinda huge.

Everywhere

Take a look around. It’s a big online world out there. Anything you’re interacting with has a front-end component to it.

Really, really awesome!

I can’t imagine ever doing anything else.

Tuesday, 15 November 2016

7 secrets for enhancing UX with micro-interactions

Knowing that we all judge a book by its cover, smart designers create catchy and practical interfaces. Potential users may be hooked, but how do you reel them all the way in?
In trying to answer this question, all roads lead to a human-centered design approach, where the user is the prime focus. Be human: your application should speak the same language we use every day, including emotions, colloquial speech, and with a pinch of “come-hither” look. An interface should be your good friend, ready to give advice striving to enhance your experience, and make you chuckle.
Curtains up, hit the lights: micro-interactions come into play. To be more precise, this is about interactive animations that come along with an interface to make it more appealing. A good animation can:
  • Communicate status and provide feedback
  • Enhance the sense of direct manipulation
  • Help people visualize the results of their actions
In UX, what matters is how you deal with users and how they feel when using the product. Even minor details deserve close attention. Micro-interactions provide users with needed feedback and an understanding of the ongoing processes, making an interface approachable no matter how complicated the logic behind it may be.

1) SHOW SYSTEM STATUS

The first usability heuristic principle by Jakob Nielsen states: keep your user informed about what is going on. Users expect to get responses immediately, but there are situations when a site needs some time before an action is completed.
So, the interface should keep the user enlightened about what is happening by displaying a graphic in the background, measuring bitrate, or playing a sound. The same principle relates to file transfers: don’t let your user get bored; show them progress. Even a not-so-pleasant notification such as a transfer fail should be delivered in a cute way. Make your user smile!

2) HIGHLIGHT CHANGES

Often, to save space, an app will simply replace one button with another when it’s needed. Sometimes we have to show notifications to make sure the user sees it. Animation will attract their attention and not let users overlook what you think is important.

3) KEEP CONTEXT

In the era of smartphones and smart watches with small screens, it can be difficult to fit a lot of information on one screen. One way to handle it is to keep clear navigation between different pages; so the user understands what appeared from where, and is able to easily navigate back. There are many options for this:

4) NON-STANDARD LAYOUTS

Continuing with the previous examples, micro-interactions should help users understand how to interact with uncommon layouts without unnecessary confusion. Photos flipping forward, scrolling graphs, and rotating characters are all great options:

5) CALLS TO ACTION

Apart from helping a user effectively interact with an application, micro-interactions have the power to encourage users to actually interact: keep on browsing, like, or share content, just because it’s attractive and they don’t want to leave:

6) VISUALIZE INPUT

Data input is one of the most important elements of any application. The quality results users get depends on the data input. As a rule, it is pretty boring, but micro-interactions turn this process into something special:

7) MAKE TUTORIALS COME ALIVE

And of course, animations can help educate users after the launch of an application by highlighting basic features and controls needed for further usage without a hitch.

CONCLUSIONS

So, if you value your user experience, polish your interface from A to Z, spicing it up with micro-interactions and animations. It will breathe life into your project.
Attention to each and every detail is key to your success making human-computer interaction easy to use.

Alternative content